Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

webOS and Tizen export #31

Open
ksvslk opened this issue Nov 5, 2024 · 8 comments
Open

webOS and Tizen export #31

ksvslk opened this issue Nov 5, 2024 · 8 comments

Comments

@ksvslk
Copy link

ksvslk commented Nov 5, 2024

Is your feature request related to a problem? Please describe.
Exporting webOS or Tizen package is not possible

Describe the solution you'd like

  • Project folders (possibly for each webOS and Tizen version)
  • Commands to create builds.
npx expo export -p webos
npx expo export -p tizen

Describe alternatives you've considered
I tried to create web build with npx expo start --web, move that to the basic LG web app project (created with ares) and then use ares to package/install for LG webOS emulator - it did not run. Basic project did.

Additional context
I am not aware of the nuances there are when packaging for webOS or Tizen and going over each platforms docs takes time. It would be a good addition. If not a priority it could be explained it docs at least.
@giolaq
Copy link
Contributor

giolaq commented Nov 5, 2024 •
edited
Loading

I tested it with webos with the web export first npx expo export -p web and then packaging the js files in an ares package.
What error do you have?
A good thing to check is in the html file created by the basic LG project the js file is correctly pointing to the right path

@ksvslk
Copy link
Author

ksvslk commented Nov 6, 2024 •
edited
Loading

I tested it with webos with the web export first npx expo start --web and then packaging the js files in an ares package. What error do you have? A good thing to check is in the html file created by the basic LG project the js file is correctly pointing to the right path

The exporting / installing / launching all works without errors but the screen is black. I'm using LG webOS TV Emulator 5.0.0

I can paint the background but it does not load the js it seems.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>MultiTVSample</title>
    <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->

  </head>

  <body style="background-color:yellow;">
    <div>TERE</div>
    <!-- The root element for your Expo app. -->
    <div id="root"></div>
  <script src="expo/static/js/web/entry-d0e41ae379ba4d4fb814c49abc283ac9.js" defer></script>
</body>
</html>

Update: Same with Tizen
EDIT: I was able to run it on the webOS simulator 22 (some problems with image paths). But not 6.0.

@spikything
Copy link

This sounds like an ES5 issue (or something else which needs poly-filling). webOS 5 is like Chromium 68 and webOS 6 is like Chromium 79, while webOS 22 is like Chromium 87. Though I've only starting looking at this project out of interest, I haven't checked out or compiled anything yet, but have built a lot of apps on webOS 4.5 and 5.0, often finding myself having to check caniuse for thing I thought would've been supported.

@ksvslk
Copy link
Author

ksvslk commented Nov 14, 2024

This sounds like an ES5 issue (or something else which needs poly-filling). webOS 5 is like Chromium 68 and webOS 6 is like Chromium 79, while webOS 22 is like Chromium 87. Though I've only starting looking at this project out of interest, I haven't checked out or compiled anything yet, but have built a lot of apps on webOS 4.5 and 5.0, often finding myself having to check caniuse for thing I thought would've been supported.

Thank you for the input.
Is there any tool that could tell whether a exported project runs on certain webOS or Tizen version?
Or is it all feature by feature?

@giolaq
Copy link
Contributor

giolaq commented Nov 14, 2024

Hey @ksvslk I'm running some tests, Is you app not working on webOS 5.0 or 6.0 ? I only have the emulator for 6.0

@ksvslk
Copy link
Author

ksvslk commented Nov 14, 2024 •
edited
Loading

Hey @ksvslk I'm running some tests, Is you app not working on webOS 5.0 or 6.0 ? I only have the emulator for 6.0

I was only able to get it work on Simulator 22 and none of the Emulators (if i remember correctly). Neither 2.0, 5.0 or 6.0. But being new to this I cannot guaranteed my packages were always good. I did fix some paths and things started to work but not on the emulators.

@spikything
Copy link

This sounds like an ES5 issue (or something else which needs poly-filling). webOS 5 is like Chromium 68 and webOS 6 is like Chromium 79, while webOS 22 is like Chromium 87. Though I've only starting looking at this project out of interest, I haven't checked out or compiled anything yet, but have built a lot of apps on webOS 4.5 and 5.0, often finding myself having to check caniuse for thing I thought would've been supported.

Thank you for the input. Is there any tool that could tell whether a exported project runs on certain webOS or Tizen version? Or is it all feature by feature?

Nothing beats testing on an actual webOS 5/6 TV. But running your app in Chromium 68 while developing may help catch styling issues early, the simulator will help with testing builds and this tool can validate code for ES5 compliance https://github.com/legend80s/es5-validator annoyingly I don't think you can run it against an entire build folder - but if you're bundling everything into just a handful of js files, you can just point it at those files.

As well as using babel to compile your code down to ES5, I found (for old LGs and various other old set top boxes), needing many polyfills that my babel config seems to have missed:

https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=default%2CObject.is%2CArray.prototype.map%2CMap%2CNumber.isInteger%2CReflect%2CReflect.deleteProperty%2CObject.getOwnPropertyDescriptor%2CObject.getOwnPropertyDescriptors%2CObject.getOwnPropertyNames%2CReflect.getOwnPropertyDescriptor%2Csmoothscroll%2CObject.entries%2CSet%2CAbortController%2Cfetch%2Ces5%2CgetComputedStyle%2CIntersectionObserver%2CrequestAnimationFrame

If you hit the URL in a modern browser, you'll get an empty response. But if you spoof your user agent to something old LG flavoured as below, you'll see it gives you the polyfills for those missing features I found I needed.

Mozilla/5.0 (Web0S; Linux/SmartTV) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 HbbTV/1.6.1 (+DRM; LGE; 32LQ630B6LA; WEBOS22 03.30.73; W22_K8AP; DTV_W22L;) FVC/7.0 (LGE; WEBOS22;) Edg/126.0.0.0

@ksvslk
Copy link
Author

ksvslk commented Nov 15, 2024

This sounds like an ES5 issue (or something else which needs poly-filling). webOS 5 is like Chromium 68 and webOS 6 is like Chromium 79, while webOS 22 is like Chromium 87. Though I've only starting looking at this project out of interest, I haven't checked out or compiled anything yet, but have built a lot of apps on webOS 4.5 and 5.0, often finding myself having to check caniuse for thing I thought would've been supported.

Thank you for the input. Is there any tool that could tell whether a exported project runs on certain webOS or Tizen version? Or is it all feature by feature?

Nothing beats testing on an actual webOS 5/6 TV. But running your app in Chromium 68 while developing may help catch styling issues early, the simulator will help with testing builds and this tool can validate code for ES5 compliance https://github.com/legend80s/es5-validator annoyingly I don't think you can run it against an entire build folder - but if you're bundling everything into just a handful of js files, you can just point it at those files.

As well as using babel to compile your code down to ES5, I found (for old LGs and various other old set top boxes), needing many polyfills that my babel config seems to have missed:

https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=default%2CObject.is%2CArray.prototype.map%2CMap%2CNumber.isInteger%2CReflect%2CReflect.deleteProperty%2CObject.getOwnPropertyDescriptor%2CObject.getOwnPropertyDescriptors%2CObject.getOwnPropertyNames%2CReflect.getOwnPropertyDescriptor%2Csmoothscroll%2CObject.entries%2CSet%2CAbortController%2Cfetch%2Ces5%2CgetComputedStyle%2CIntersectionObserver%2CrequestAnimationFrame

If you hit the URL in a modern browser, you'll get an empty response. But if you spoof your user agent to something old LG flavoured as below, you'll see it gives you the polyfills for those missing features I found I needed.

Mozilla/5.0 (Web0S; Linux/SmartTV) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 HbbTV/1.6.1 (+DRM; LGE; 32LQ630B6LA; WEBOS22 03.30.73; W22_K8AP; DTV_W22L;) FVC/7.0 (LGE; WEBOS22;) Edg/126.0.0.0

Thank you for the detailed response! I will try these methods in the coming weeks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@giolaq @spikything @ksvslk