Add support for packaged SvelteKit apps

[bfanger]

Currently SvelteKit assumes the website is hosted at a preconfigured base, but that won't work for packaged apps as the url folder is unknown at built time, the file:// urls are also problematic as these probably want the .html suffix.

If hash based routing sveltejs/kit#7443 becomes available that would be a solution

[chipndahla]

Continuing Tizen investigation here. Took some time due to buggy/broken debugging tools. Findings:

1. The failure to load resources from relative URLs I reported earlier turned out to be an issue in Logrocket. The Tizen web engine could actually load them fine assuming the use a method in 2 below
2. I tested relatives URLs since Tizen is using the file:/// schema. I can confirm the following all works when loading from script tags (haven't been able to check with imports) in emulators using Tizen v3,4,5 and 7

• /resource.xxx - ie an initial / loads from root folder
• resource.xxx - ie no inital sign loads from current folder
• ./resource.xxx - also loads from current folder
• ../resource.xxx - load from parent folder

Conclusion: Tizen web app's relative URLs works as if they were accessed through a web server using http://.

So the errors I've seen must come from something else. That's up next (in paralell I'm trying to get the Chrome devtools working with the older Tizen web engines - would significantly speed up debugging since LogRocket doesn't work for packaged apps)

[chipndahla]

A new round of investigations: to get clearer results I decided to use the Sveltekit skelteton app (but removed sverdle since it didn't like static prerendering). Got good and bad news:

Building it for Tizen 3 I could run the first page (with the counter) on Tizen 3, 4, 5 and 7 emulators. But when I built for Tizen 5 it didn't work in Tizen 5 emulator (which I hoped for) and got the following error messages:
[hhoBgupUGT] Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. [hhoBgupUGT] Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. [hhoBgupUGT] Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: file:///_app/immutable/entry/start.df9c55cc.js

I could however run in on Tizen 7. In addition I tried our own, quite complex app built for Tizen 3 and 5. Got different errors like:
[NPNQnpBgGn] _app/immutable/start-56c737df.js:1: TypeError: Illegal constructor [NPNQnpBgGn] _app/immutable/chunks/vyouser-ffed84fa.js:3081: Uncaught (in promise) TypeError: Illegal constructor [NPNQnpBgGn] _app/immutable/chunks/vyouser-ffed84fa.js:3081: Uncaught (in promise) TypeError: Illegal constructor

Conclusion: the current tvkit version seem to support basic packaged Tizen web app in some build targets (like Tizen 3), but struggles with more advanced code and/or mix of build targets.

Happy to assist more!

[chipndahla]

I've managed to setup Chrome remote debugging now for Tizen 5 (and likely older) so we can get proper error messages and debugging tools. One of the stacktraces looks like this:
start-56c737df.js:1 TypeError: Illegal constructor at new e (vyouser-ffed84fa.js:3081) at Object.execute (vyouser-ffed84fa.js:3081) at n (tvkit-polyfills.js:1) at p (tvkit-polyfills.js:1) at tvkit-polyfills.js:1 at Array.forEach (<anonymous>) at p (tvkit-polyfills.js:1) at tvkit-polyfills.js:1 at Array.forEach (<anonymous>) at p (tvkit-polyfills.js:1)

Not sure if that tells you anything, but now we can continue with proper debugging.

Also tried a Tizen 5 build using the "serve" command and tested in Chrome 63 (ie Tizen 5 web engine). Got other errors but the site didn't work here either.

[bfanger]

tvkit 0.12+ has --add which allows adding a polyfill that the targetted browser normally doesn't need.

tvkit build --browser tizen5 --add es6-module would enable the systemjs polyfill, preventing errors related to using esm.

[chipndahla]

Interesting. Will try and report results.

[chipndahla]

tvkit 0.12+ has --add which allows adding a polyfill that the targetted browser normally doesn't need.

tvkit build --browser tizen5 --add es6-module would enable the systemjs polyfill, preventing errors related to using esm.

Tried the new switch but don't think I noticed any differences. I did however dig into the "Illegal constructor" exception. It occurs at super(...args);:
execute: function () { sha256 = __vite__cjsImport3_jsSha256["sha256"]; _export("VyouScreen", VyouScreen = class VyouScreen extends EventTarget { constructor(...args) { super(...args); <-- HERE _defineProperty(this, "screenId", void 0); _defineProperty(this, "pairingId", void 0); _defineProperty(this, "index", void 0); _defineProperty(this, "publicIp", void 0); _defineProperty(this, "privateIp", void 0); <SNIP>

This is using: npx tvkit@latest serve --browser "Tizen 5" --add es6-module --no-minify
and tested in stand alone Chrome 63 (can also be observed at https://legacy.vyou.art/) Also got the same error in Tizen 5 emulator.

Essentially the same error occurs if I use --browser "Tizen 3".

The class VyouScreen is defined as:
export class VyouScreen extends EventTarget

Stack trace:
app.js:43 TypeError: Illegal constructor at new VyouScreen (vyouScreen.ts:34) at Object.execute (vyouScreen.ts:165) at n (tvkit-polyfills.js:1) at p (tvkit-polyfills.js:1) at tvkit-polyfills.js:1 at Array.forEach (<anonymous>) at p (tvkit-polyfills.js:1) at tvkit-polyfills.js:1 at Array.forEach (<anonymous>) at p (tvkit-polyfills.js:1)

Any ideas?

[bfanger]

EventTarget is only an interface which is implemented on native DOM objects, not a constructor that is available to javascript.

According to this stackoverflow answer from 2014.

https://www.npmjs.com/package/event-target-polyfill might help

[chipndahla]

EventTarget is only an interface which is implemented on native DOM objects, not a constructor that is available to javascript.

According to this stackoverflow answer from 2014.

https://www.npmjs.com/package/event-target-polyfill might help

Yeah, think you are right. The EventTarget constructor was introduced in Chrome 64: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/EventTarget

Will investigate!

[chipndahla]

Sooo, after a lot of rounds and redesigns of our software I've reached a major milestone: running our sveltekit app on Tizen 5! Since the full app is quite complex with code for both web, mobile and TVs. Removed the none TV parts and got it working well with some modifications. I also tried on Tizen 3 and 4 which so far failed but I'm hopeful at least Tizen 4 will work too. Will continue to try and report back. And after Tizen I'll try WebOS

[chipndahla]

Fixed some incompatible Tizen WebAPIs and managed to run on Tizen 4 too. The Samsung webapi docs seems incorrect, but not very suprised at all. Now let's see if we can get Tizen 3 working too.

[chipndahla]

Tizen 3 reports the error:
Uncaught TypeError: Proxy polyfill does not support trap 'has'fc @ tvkit-polyfills.js:1(anonymous function) @ tvkit-polyfills.js:1TypeError @ tvkit-polyfills.js:1Proxy.PB.Proxy.s @ tvkit-polyfills.js:1transformCachableValue @ screenManagement.bdaf5672.js:130wrap @ screenManagement.bdaf5672.js:130(anonymous function) @ screenManagement.bdaf5672.js:130i @ _layout.13e4020c.js:138

Only found this when Googleing:
GoogleChrome/proxy-polyfill#49

So if a recent version of the proxy polyfill is being used, at least that issues should have been solved?

Any ideas what otherwise can cause this?

Anyhow, we're making a lot of progress.

[jorisw]

Were you able to solve this? I believe GoogleChrome/proxy-polyfill#49 was closed without a solution.

[chipndahla]

No, we decided to abandon support for Tizen 3. But if anyone managed to solve it I'm still interested :-)

[jorisw]

One workaround we found was to disable the use of Proxies altogether by downgrading Immer (that shipped with Redux ToolKit) to 9.x and doing a setUseProxies(false) on it. Since this doesn't seem like a sustainable solution, we're also opting out of supporting Tizen 3.0 / WebOS 3.0.

That said, there is another Proxy polyfill that does a little more than Google's: https://github.com/ambit-tsai/es6-proxy-polyfill