About importing external functions to the app page

[utpluvia]

Hi! Could you help me with the following problem? I have an app the main page of which imports a number of functions from an external js file, and everything goes just fine until I jump to the settings page by push() and then return by means of back() function. After returning back to the main page I get all my imported functions undefined as if they weren't imported. Is there any way to fix this? As I got it right, I can't import external functions at any other place but at the top of the main_page.js, which means I can't use import statement within my function (which in its turn uses those imported function) to reimport them one more time when I get back to the main_page.js

[silver-zepp]

Yes, dynamic imports are not supported. You will have to import all the necessary things on each page that requires them.

[silver-zepp]

Also, make sure to provide us with the device/emulator (zos/api/FW versions) that you are experiencing this issue with.

[utpluvia]

sample.zip

Here is the sample project. I've removed all the unnecessary things and left only two pages. In the index page there are sunrise and sunset times which are calculated with getTimes function imported from suncalc file (the file is added to the propject by npm install suncalc). You can see that everything is being calculated as it is supposed to and the data is displayed by the text widgets. Then you can push the gear button at the bottom of the page to jump to the settings page (index.pageB). You are to do nothing there but to push the arrow button which will lead you back to the main page by means of replace() function. There is also commented back() function which causes the same behavior as replace actually. When you are back to the main page you will see that getTimes function is not imported for some reasons.
I'm using Balance v1.1.0 emulator version. The version of simulator.exe is 1.2.3 and also 2.0.0. The same behavior is on my Balance watch with the last updates.

[silver-zepp]

Okay, first of all, I strongly suggest updating your simulator to 2.0.x and forgetting about the v1 version for good. Then update your Balance emulator to v 2.1.x, it has multiple bugfixes, and one critical bugfix where it takes a minute to establish the connection for the first time with zeus-cli.

Now, back to your actual issue. I suspect the bug lies in importing from the npm namespace. What I suggest is to simply put the .js file of the suncalc lib in your project and reference it locally import ... from "./suncalc", see if that fixes the bug. I assume this is somehow related to the fact that this lib doesn't have zeppos flag in it, so if confirmed, that will be something for us to investigate.

If still not working, try removing (function () { 'use strict'; ... construct from the lib and see if that's the cause.

If nothing solves your issue, let me know, so we'll look into it deeper.

[utpluvia]

I tried to use emulator of version greater than 1.1.0 and I experienced some annoying issues with text widgets like missing letters and whole words. The same issues arise after installing the app on the watch before the watch is rebooted. Sure, I can turn off the emulator and to turn it on again, but in that case I have to do it many times which isn't very convenient. And it doesn't help every time I try it.

Anyway, the problem we're discussing seems not to be caused the emulator version, the same behavior is on the watch.
I moved the suncalc.js to the root directory and imported the functions directly from suncals. Then I removed (function () { 'use strict'; ... construct as you told me to do. Nothing changed the program behavior, there is still the same error (the new project is attached).

In my app I'm also using another one js package to import functions - lunarphase-js (npm install lunarphase-js -> import { Moon } from "lunarphase-js";). Functions from this file show the same behavior, they work fine when the page is loaded from watchface and don't work after jumping back to the main page from the settings page.

sample.zip

[utpluvia]

Before writing here, I tried several things like importing the functions one by one, importing them to an auxiliary file and then reexporting them to the source file. What I didn't do was only copying the source code directly to my main page file because it didn't seem convenient as I was afraid to mess up with foreign code within my own code. And that second lib (lunarphase-js) contains several files unlike the suncalc lib. Therefore, it would be great to be able to deal with the issue

[silver-zepp]

We have further investigated this, and it's indeed the issue with the library not being supported by our build tools.
As suggested

If still not working, try removing (function () { 'use strict'; ... construct from the lib and see if that's the cause.

Besides removing the AMD wrapper, which this conversion defaults to

// export as Node module / AMD module / browser variable
if (typeof exports === 'object' && typeof module !== 'undefined') module.exports = SunCalc;
else if (typeof define === 'function' && define.amd) define(SunCalc);
else window.SunCalc = SunCalc;

you have to re-export the module with ecmascript support. Considering it's mostly built with prototypes, here's the straightforward approach

const SunCalc = {};
...
// stuff in between remains the same
...
export default SunCalc;

Additionally, it's better to replace all var occurrences with const to ensure those imports don't pollute the global space, which might cause issues with reimports.

[utpluvia]

Yep, looks like removing the AMD wrapper and replacing it with "export default SunCalc" helped, all the necessary functions are now imported afted jumping to the main page.

For some reasons, the main page now is being loaded a bit longer than before and all the steps that require recalculating data (for instance if I need those data for some next or previous days) are being performed with apparent delays. I'm not sure whether this happens due to the suncalc functions directly or not, because in the sample project this behavior isn't that obvious, and yet my app is performing much more calculations by means of those imported functions than the sample project, so I will probably investigate that behavior more carefully.

Thank you for your help!

[silver-zepp]

Awesome, glad you can advance.

The lib is small, not sure what could be the lag's cause. Possibly some operations were skipped/simplified as the lib didn't work properly in the past (?) But I assume you've seen the correct output prior as well.

Try to time all the methods and see what causes the drag

export function timeIt(operation, description) {
    const start_time = Date.now(); 
    const result = operation(); 
    const end_time = Date.now();
    const duration = end_time - start_time; 
    console.log(`${description} took: ${duration}ms`);
    return result;
}

timeIt(() => SunCalc.getPosition(...), "getPosition()");

[utpluvia]

Hi!
Could I ask another one question as regards to the app I'm working on using that suncalc.js lib?
It relates to time zones matter in the simulator. Natively simulator shows time in UTC, while I need time in my local time zone.
I changed start_qemu.bat file by adding -rtc base=localtime option, and now time in the simulator is finallly shown correctly, and the time sensor also returns time correctly, but time zone offset returned by function new Date().getTimezoneOffset() is always 0. And all the data that returns suncalc.js are also in time zone GMT+0. On my watch it's all alright and I can see correct timezone offset GMT+3 in console.log in all the data that are returned by suncalc.js.
Is there any way to let simulator know which timezone it shoud use so that all the functions within the app return GMT offset correctly?
I tried adding set TZ=Europe/Moscow and set TIMEZONE=Europe/Moscow, but this affected only displayed time but not time zone itself.
Thank you!