🚀 Prep Tasks for Framework Migration

.gitignore

@@ -13,6 +13,7 @@ app-settings.json
 *.apk
 *.app.zip
 *.ipa
+www/dist/
 www/js/control/collect-settings.js
 www/js/control/sync-settings.js
 www/js/control/transition-notify-settings.js

config.serve.xml

@@ -9,6 +9,7 @@
   </author>
     <content src="index.html" />
     <access origin="*" />
+    <allow-navigation href="*" />
     <hook src="hooks/before_prepare/download_translation.js" type="before_prepare" />
     <preference name="webviewbounce" value="false" />
     <preference name="UIWebViewBounce" value="false" />

package.serve.json

@@ -9,17 +9,74 @@
   },
   "scripts": {
     "setup-serve": "./bin/download_settings_controls.js && ./bin/setup_autodeploy.js",
-    "serve": "phonegap --verbose serve"
+    "serve": "webpack && concurrently -k \"phonegap --verbose serve\" \"webpack --watch\"",
+    "serve-only": "phonegap --verbose serve"
   },
   "devDependencies": {
-    "phonegap": "9.0.0+cordova.9.0.0",
-    "cordova": "^11.1.0",
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-flow": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@ionic/cli": "6.20.8",
-    "bower": "1.8.14"
+    "babel-loader": "^9.1.2",
+    "babel-plugin-optional-require": "^0.3.1",
+    "concurrently": "^8.0.1",
+    "cordova": "^11.1.0",
+    "css-loader": "^6.7.4",
+    "exports-loader": "^4.0.0",
+    "expose-loader": "^4.1.0",
+    "file-loader": "^6.2.0",
+    "phonegap": "9.0.0+cordova.9.0.0",
+    "process": "^0.11.10",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.0.1",
+    "webpack-cli": "^5.0.1"
   },
   "dependencies": {
+    "angular": "1.6.7",
+    "angular-animate": "1.6.7",
+    "angular-local-storage": "^0.7.1",
+    "angular-nvd3": "^1.0.7",
+    "angular-qrcode": "https://github.com/sebastianbarry/angular-qrcode.git#v7.3.0",
+    "angular-sanitize": "1.6.7",
+    "angular-simple-logger": "^0.1.7",
+    "angular-translate": "^2.18.1",
+    "angular-translate-loader-static-files": "^2.18.1",
+    "angular-ui-router": "0.2.13",
+    "animate.css": "^3.5.2",
+    "bottleneck": "^2.19.5",
+    "core-js": "^2.5.7",
     "fs-extra": "^9.0.1",
+    "i18next": "^22.5.0",
+    "install": "^0.13.0",
+    "ionic-datepicker": "1.2.1",
+    "ionic-toast": "^0.4.1",
+    "jquery": "^3.1.0",
+    "jquery-xml2json": "^0.0.8",
     "klaw-sync": "^6.0.0",
+    "leaflet": "^0.7.7",
+    "leaflet-plugins": "^3.0.0",
+    "leaflet.awesome-markers": "^2.0.5",
+    "messageformat": "^2.3.0",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
+    "ng-i18next": "^1.0.7",
+    "npm": "^9.6.3",
+    "nvd3": "^1.8.6",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.*",
+    "react-dom": "^18.2.*",
+    "react-native-paper": "^5.8.0",
+    "react-native-safe-area-context": "^4.5.3",
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-web": "^0.19.*",
+    "react-native-web-webview": "^1.0.2",
     "shelljs": "^0.8.5"
   },
   "cordova": {

setup/setup_serve.sh

@@ -10,8 +10,5 @@ echo "Configuring the repo for UI development"
 echo "Setting up all npm packages"
 npm install
 
-echo "Updating bower"
-npx bower update --allow-root
-
 echo "Pulling the plugin-specific UIs"
 npm run setup-serve

setup/setup_shared_native.sh

@@ -10,9 +10,6 @@ cp setup/google-services.fake.for_ci.json google-services.json
 echo "Setting up all npm packages"
 npm install
 
-echo "Updating bower"
-npx bower update
-
 # By default, node doesn't fail if any of the steps fail. This makes it hard to
 # use in a CI environment, and leads to people reporting the node error rather
 # than the underlying error. One solution is to pass in a command line argument to node

webpack.config.js

@@ -0,0 +1,96 @@
+const path = require('path')
+const glob = require('glob')
+const webpack = require('webpack')
+
+module.exports = {
+  mode: 'development',
+  entry: './www/index.js',
+  devtool: 'inline-source-map',
+  output: {
+    path: path.resolve(__dirname, 'www/dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      // to load CSS
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      // to resolve url() in CSS
+      {
+        test: /\.(png|jpg)$/,
+        loader: 'url-loader'
+      },
+      // necessary for react-native-web to bundle JSX
+      {
+        test: /\.jsx$/,
+        exclude: /node_modules\/(?!()\/).*/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+          },
+        },
+      },
+      // necessary for react-native-paper to load images, fonts, and vector graphics
+      {
+        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
+        type: 'asset/resource',
+      },
+      // necessary for react-native-paper to load icons
+      {
+        test: /\.js$/,
+        exclude: /node_modules[/\\](?!react-native-vector-icons)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            // Disable reading babel configuration
+            babelrc: false,
+            configFile: false,
+
+            // The configuration for compilation
+            presets: [
+              ['@babel/preset-env', { useBuiltIns: 'usage' }],
+              '@babel/preset-react',
+              '@babel/preset-flow',
+              "@babel/preset-typescript"
+            ],
+            plugins: [
+              '@babel/plugin-proposal-class-properties',
+              '@babel/plugin-proposal-object-rest-spread'
+            ],
+          },
+        },
+      },
+      // necessary to load html files
+      {
+        test: /\.html$/i,
+        loader: 'file-loader'
+      }
+    ],
+  },
+  plugins: [
+    // to load jQuery and moment globally
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      moment: 'moment',
+      L: 'leaflet',
+    })
+  ],
+  devServer: {
+    historyApiFallback: true,
+    contentBase: './',
+    hot: true,
+  },
+  // "react-native" must be aliased to "react-native-web"
+  // https://necolas.github.io/react-native-web/docs/setup/#package-aliasing
+  resolve: {
+    alias: {
+      'react-native$': 'react-native-web',
+      'react-native-webview': 'react-native-web-webview',
+      'react-native-vector-icons': false
+    },
+    extensions: ['.web.js', '.jsx', '.tsx', '.ts', '.js'],
+  },
+}