monaca-templates · emccorson · Aug 22, 2022 · Aug 23, 2022
diff --git a/package.json b/package.json
@@ -3,20 +3,20 @@
   "version": "5.0.1",
   "description": "",
   "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "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.2",
+    "react-onsenui": "~1.13.0"
   },
   "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": {
@@ -25,30 +25,12 @@
     }
   },
   "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"
+    "cross-env": "^7.0.3",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.0.1",
+    "postcss-preset-env": "^7.4.2",
+    "vite": "^3.0.7",
+    "yargs": "^17.4.1"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,10 +1,5 @@
 module.exports = {
-  plugins: [
-    [
-      "postcss-preset-env",
-      {
-        // Options
-      },
-    ],
-  ],
-};
+  plugins: {
+    'postcss-preset-env': {},
+  },
+};
diff --git a/src/public/index.html.ejs → src/index.html b/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>
diff --git a/src/main.jsx b/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
-    );
-  });
-}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,39 @@
+import path from 'path'
+import react from '@vitejs/plugin-react'
+import yargs from 'yargs/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,
+  }
+};