feat: switch to vite and upgrade to react 18

[emccorson]

No description provided.

[emccorson]

@yong-asial I have mostly finished this but i am still having one problem:

I am serving the files in www/components as public assets in the dev server, so they should be available at localhost:8080/components/. This works fine locally, but when I run the Previewer in Monaca Cloud IDE, it gets a 404 for components/loader.js and components/loader.css.

You can reproduce this by:

1. Running npm run monaca:preview locally and seeing that there is no 404 error in the browser console.
2. Uploading the template to Monaca Cloud IDE with monaca upload.
3. Opening the uploaded project in Monaca Cloud IDE and seeing that there is a 404 error in the console.

Could you please have a look at this problem when you have a chance since you know much more about the Monaca internals than me? Thank you for any help you can give 🙏

[yong-asial]

@emccorson I checked and it seems to be working fine on local, cloud, and phone.

[emccorson]

Is that only when watch is added to monaca:preview, or does it work even without watch? I removed watch because it performs a full build so you lose the advantage of using ES modules for quick reloads.

[yong-asial]

@emccorson we need the watch in monaca:preview because monaca-debugger (and the build server) is served from the www folder. Without watch, User has to run npm run build on a terminal tab which is not possible for "free-account" user.

does it work even without watch?

I think so. I just tested it and it seems to be working fine. The only problem is when we change the code it doesn't reflect to Monaca Debugger and Build Server

Opening the uploaded project in Monaca Cloud IDE and seeing that there is a 404 error in the console.

are you referring to no cordova.js in Monaca Cloud IDE's browser? if so, that's ok. we can ignore it. Since it's just on browser. We just need to make sure it works on Phone (Monaca Debugger)

The main point to test on Monaca Cloud IDE, is to ensure that Previewer could serve when terminal feature is turned on and off (?previewer=1&terminal=0 and ?previewer=1&terminal=1)

Anyway, is it working on your sides now? on phone and Cloud IDE?

[emccorson]

@yong-asial Thanks for the extra information. I'm not sure why it wasn't working for me before but everything seems to be good now. I've tested on Monaca Debugger and Monaca Cloud IDE with and without the terminal, and it seems to be working.

This is ready for merge now. I've also created the PRs in the other repositories.
monaca-templates/onsenui-v2-react-navigation#9
monaca-templates/onsenui-v2-react-splitter#11
monaca-templates/onsenui-v2-react-tabbar#11