feat: switch to vite and upgrade to react 18

.gitignore

@@ -8,3 +8,4 @@
 typings/
 node_modules
 package-lock.json
+.idea/

.monaca/project_info.json

@@ -1,5 +1,7 @@
 {
- "framework_version": "3.5",
- "cordova_version": "11.0",
- "xcode_version": "13"
+ "cordova_version": "12.0",
+ "framework_version": "3.5",
+ "xcode_version": "14.2.0",
+ "cordova_android_platform": "12.0.0",
+ "cordova_ios_platform": "6.2.0"
 }

config.xml

@@ -20,7 +20,6 @@
  <preference name="AllowInlineMediaPlayback" value="false"/>
  <preference name="AutoHideSplashScreen" value="true"/>
  <preference name="BackupWebStorage" value="cloud"/>
- <preference name="EnableViewportScale" value="false"/>
  <preference name="FadeSplashScreen" value="true"/>
  <preference name="FadeSplashScreenDuration" value="250"/>
  <preference name="KeyboardDisplayRequiresUserAction" value="true"/>
@@ -78,13 +77,8 @@
  <icon src="/res/android/icon/xhdpi.png" density="xhdpi"/>
  <icon src="/res/android/icon/xxhdpi.png" density="xxhdpi"/>
  <icon src="/res/android/icon/xxxhdpi.png" density="xxxhdpi"/>
- <splash src="/res/android/screen/splash-port-ldpi.9.png" density="port-ldpi"/>
- <splash src="/res/android/screen/splash-port-mdpi.9.png" density="port-mdpi"/>
- <splash src="/res/android/screen/splash-port-hdpi.9.png" density="port-hdpi"/>
- <splash src="/res/android/screen/splash-port-xhdpi.9.png" density="port-xhdpi"/>
- <splash src="/res/android/screen/splash-port-xxhdpi.9.png" density="port-xxhdpi"/>
- <splash src="/res/android/screen/splash-port-xxxhdpi.9.png" density="port-xxxhdpi"/>
- <splash src="/res/android/screen/splash-mdpi.png" density="mdpi"/>
+ <preference name="AndroidWindowSplashScreenBackground" value="#ffffff"/>
+ <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/android/screen/window_splashscreen_icon.png"/>
  </platform>
  <platform name="electron">
  <icon src="/res/electron/icon/icon_electron_512.png" width="512" height="512"/>

package.json

@@ -1,54 +1,36 @@
 {
  "name": "onsenui-v2-react-minimum",
- "version": "5.0.1",
+ "version": "6.0.0",
  "description": "",
+ "engines": {
+ "node": ">=18.16"
+ },
  "dependencies": {
- "cordova-plugin-splashscreen": "6.0.0",
  "monaca-plugin-monaca-core": "3.3.1",
- "onsenui": "2.11.2",
- "react": "^16.8.6",
- "react-dom": "^16.4.1",
- "react-onsenui": "1.11.4"
+ "onsenui": "~2.12.8",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-onsenui": "~1.13.3"
  },
  "scripts": {
  "monaca:preview": "npm run dev & npm run watch",
  "monaca:transpile": "npm run build",
  "monaca:debug": "npm run watch",
- "dev": "webpack serve --open",
- "build": "webpack --mode production",
- "watch": "webpack --watch --mode production"
+ "dev": "cross-env NODE_ENV=development vite",
+ "watch": "cross-env NODE_ENV=development vite build --watch",
+ "build": "cross-env NODE_ENV=production vite build"
  },
  "cordova": {
  "plugins": {
- "cordova-plugin-splashscreen": {},
  "monaca-plugin-monaca-core": {}
  }
  },
  "devDependencies": {
- "@babel/core": "^7.17.5",
- "@babel/preset-env": "^7.16.11",
- "@babel/preset-react": "^7.16.7",
- "babel-core": "^6.26.3",
- "babel-loader": "^8.2.3",
- "babel-preset-env": "^1.7.0",
- "babel-preset-react": "^6.24.1",
- "cordova": "^11.0.0",
- "css-loader": "^6.6.0",
- "cssnano": "^5.1.0",
- "file-loader": "^6.2.0",
- "html-loader": "^3.1.0",
- "html-webpack-plugin": "^5.5.0",
- "mini-css-extract-plugin": "^2.5.3",
- "postcss": "^8.4.7",
- "postcss-loader": "^6.2.1",
- "postcss-preset-env": "^7.4.1",
- "postcss-url": "^10.1.3",
- "progress-bar-webpack-plugin": "^2.1.0",
- "react-hot-loader": "^4.13.0",
- "style-loader": "^3.3.1",
- "webpack": "^5.69.1",
- "webpack-cli": "^4.9.2",
- "webpack-dev-server": "^4.7.4",
- "yargs": "^17.3.1"
+ "@types/react": "^18.2.21",
+ "@types/react-dom": "^18.2.7",
+ "@vitejs/plugin-react": "^4.0.4",
+ "cross-env": "^7.0.3",
+ "vite": "^4.4.9",
+ "yargs": "^17.7.2"
  }
 }

src/App.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Page, Button, Toolbar} from 'react-onsenui';
-import {notification} from 'onsenui';
+import ons from 'onsenui';
 
 export default class App extends React.Component {
  alertPopup() {
- notification.alert('This is an Onsen UI alert notification test.');
+ ons.notification.alert('This is an Onsen UI alert notification test.');
  }
 
  renderToolbar() {
@@ -24,4 +24,4 @@ export default class App extends React.Component {
  </Page>
  );
  }
-}
+}

src/public/index.html.ejs → src/index.html

@@ -5,13 +5,6 @@
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
-
- <!-- The following EJS lines include the necessary CSS and JS
- from Monaca (cordova.js/ loader.js) in production mode -->
-<% for (var dep in htmlWebpackPlugin.options.externalJS) { %>
- <script type="text/javascript" src="<%= htmlWebpackPlugin.options.externalJS[dep] %>"></script><% } %>
-<% for (var dep in htmlWebpackPlugin.options.externalCSS) { %>
- <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.externalCSS[dep] %>"><% } %>
  <style>
  body {
  min-height: 100vh;
@@ -20,5 +13,8 @@
 </head>
 <body>
  <div id="app"></div>
+ <script type="module" src="./main.jsx"></script>
+ <script src="components/loader.js"></script>
+ <link rel="stylesheet" href="components/loader.css" />
 </body>
 </html>

src/main.jsx

@@ -1,12 +1,10 @@
-import 'react-hot-loader/patch';
-import {AppContainer} from 'react-hot-loader';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ons from 'onsenui';
 
 // Onsen UI Styling and Icons
-require('onsenui/css/onsen-css-components.css');
-require('onsenui/css/onsenui.css');
+import 'onsenui/css/onsen-css-components.css';
+import 'onsenui/css/onsenui.css';
 
 import App from './App';
 
@@ -15,22 +13,9 @@ if (ons.platform.isIPhoneX()) {
  document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
 }
 
-const rootElement = document.getElementById('app');
-ReactDOM.render(
- <AppContainer>
+const root = createRoot(document.getElementById('app'));
+root.render(
+ <React.StrictMode>
  <App />
- </AppContainer>,
- rootElement
+ </React.StrictMode>
 );
-
-if (module.hot) {
- module.hot.accept('./App', () => {
- const NextApp = require('./App').default;
- ReactDOM.render(
- <AppContainer>
- <NextApp />
- </AppContainer>,
- rootElement
- );
- });
-}

vite.config.js

@@ -0,0 +1,39 @@
+import path from 'path'
+import react from '@vitejs/plugin-react'
+import yargs from 'yargs'
+import { hideBin } from 'yargs/helpers'
+
+const SRC_DIR = path.resolve(__dirname, './src');
+const BUILD_DIR = path.resolve(__dirname, './www');
+const argvs = yargs(hideBin(process.argv)).argv
+const HOST = process.env.MONACA_SERVER_HOST || argvs.host || '0.0.0.0';
+
+export default {
+ plugins: [
+ react()
+ ],
+ root: SRC_DIR,
+ base: '',
+ publicDir: BUILD_DIR, // needed to serve www/components in dev server
+ build: {
+ outDir: BUILD_DIR,
+ assetsInlineLimit: 0,
+ emptyOutDir: false,
+ rollupOptions: {
+ output: {
+ entryFileNames: `assets/[name].js`,
+ chunkFileNames: `assets/[name].js`,
+ assetFileNames: `assets/[name].[ext]`
+ }
+ }
+ },
+ resolve: {
+ alias: {
+ '@': SRC_DIR,
+ },
+ },
+ server: {
+ host: HOST,
+ port: 8080,
+ }
+};