⚛️ Enable experimental support for Expo Web

.gitignore

@@ -18,3 +18,5 @@ www/dist/
 config.xml
 package.json
 coverage/
+
+.expo/

.prettierignore

@@ -2,8 +2,9 @@
 www/dist
 www/json
 
-# Ignore all HTML files:
+# Ignore all HTML and CSS files
 **/*.html
+**/*.css
 
 # This is the pattern to check only www directory
 # Ignore all

app.json

@@ -0,0 +1,16 @@
+{
+  "expo": {
+    "entryPoint": "./www/js/App.tsx",
+    "ios": {
+      "bundleIdentifier": "edu.berkeley.eecs.emission"
+    },
+    "android": {
+      "package": "edu.berkeley.eecs.emission"
+    },
+    "splash": {
+      "image": "./resources/splash.png",
+      "backgroundColor": "#EEEEEE"
+    },
+    "icon": "./resources/icon.png"
+  }
+}

bin/configure_xml_and_json.js

@@ -3,13 +3,15 @@
 const fs = require('fs');
 
 var copyInlinedFiles = function(inlineString) {
-    var selConfigXml = "config."+inlineString+".xml";
-    var selPkgJson = "package."+inlineString+".json";
-    fs.copyFileSync(selConfigXml, "config.xml");
-    fs.copyFileSync(selPkgJson, "package.json");
-
-    console.log("Copied "+selConfigXml+" -> config.xml and "+
-                selPkgJson + " -> package.json");
+    [['config', 'xml'], ['package', 'json']].forEach(([prefix, ext]) => {
+        const selFile = prefix+"."+inlineString+"."+ext;
+        if (fs.existsSync(selFile)) {
+            fs.copyFileSync(selFile, prefix+"."+ext);
+            console.log("Copied "+selFile+" -> "+prefix+"."+ext);
+        } else {
+            console.log("File "+selFile+" does not exist, skipping");
+        }
+    });
 }
 
 if (process.argv.length != 3) {

metro.config.js

@@ -0,0 +1,22 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+config.resolver = {
+  ...config.resolver,
+  unstable_enablePackageExports: true,
+  resolveRequest: (context, moduleName, platform) => {
+    /* enketo-transformer has 'libxslt' as an optional peer dependency.
+      We don't need it since we are only doing client-side transformations via
+        enketo-transformer/web (https://github.com/enketo/enketo-transformer#web).
+      So, we can tell metro it's ok to ignore libxslt by aliasing it to false. */
+    if (moduleName == 'libxslt') {
+      return { type: 'empty' };
+    }
+    // Optionally, chain to the standard Metro resolver.
+    return context.resolveRequest(context, moduleName, platform);
+  }
+};
+
+module.exports = config;

package.expo.json

@@ -0,0 +1,58 @@
+{
+  "name": "edu.berkeley.eecs.emission",
+  "version": "2.5.0",
+  "displayName": "emission",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/e-mission/e-mission-phone.git"
+  },
+  "main": "www/js/App.tsx",
+  "scripts": {
+    "start": "expo start --localhost"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~3.1.3",
+    "@messageformat/core": "^3.2.0",
+    "@react-navigation/native": "^6.1.7",
+    "@react-navigation/stack": "^6.3.17",
+    "@shopify/flash-list": "^1.7.1",
+    "@types/react": "~18.2.45",
+    "@types/jest": "^29.5.5",
+    "@types/leaflet": "^1.9.4",
+    "bottleneck": "^2.19.5",
+    "chart.js": "^4.3.0",
+    "chartjs-adapter-luxon": "^1.3.1",
+    "chartjs-plugin-annotation": "^3.0.1",
+    "e-mission-common": "github:JGreenlee/e-mission-common#semver:0.5.4",
+    "enketo-core": "^6.1.7",
+    "enketo-transformer": "^4.0.0",
+    "fast-xml-parser": "^4.2.2",
+    "expo": "~50.0.8",
+    "expo-dev-client": "~3.3.9",
+    "expo-device": "^6.0.2",
+    "expo-status-bar": "~1.11.1",
+    "humanize-duration": "^3.31.0",
+    "i18next": "^23.7.6",
+    "leaflet": "^1.9.4",
+    "luxon": "^3.3.0",
+    "react": "~18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "~18.2.0",
+    "react-i18next": "^13.5.0",
+    "react-native": "0.73.4",
+    "react-native-html-parser": "^0.1.0",
+    "react-native-paper": "^5.12.3",
+    "react-native-paper-dates": "^0.18.12",
+    "react-native-safe-area-context": "^4.6.3",
+    "react-native-svg": "14.1.0",
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-web": "^0.19.10",
+    "react-qr-code": "^2.0.11",
+    "typescript": "^5.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "sass": "^1.71.1"
+  }
+}

setup/setup_expo.sh

@@ -0,0 +1,11 @@
+# error out if any command fails
+set -e
+
+# Setup the development environment
+source setup/setup_shared.sh
+
+echo "Configuring the repo for UI development"
+./bin/configure_xml_and_json.js expo
+
+echo "Setting up all npm packages"
+npm install

tsconfig.json

@@ -11,8 +11,16 @@
     "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node",
-    "typeRoots": ["node_modules/@types", "www/js/types"],
+    "typeRoots": [
+      "node_modules/@types",
+      "www/js/types"
+    ]
   },
-  "include": ["www/**/*"],
-  "exclude": ["**/node_modules/*", "**/dist/*"],
+  "include": [
+    "www/**/*"
+  ],
+  "exclude": [
+    "**/node_modules/*",
+    "**/dist/*"
+  ]
 }

webpack.config.js

@@ -12,7 +12,7 @@ module.exports = {
       // to load CSS and SCSS (enketo-core only supplies SCSS)
       {
         test: /\.(scss|css)$/,
-        include: [path.resolve(__dirname, 'www/css'),
+        include: [path.resolve(__dirname, 'www'),
                   path.resolve(__dirname, 'node_modules/enketo-core'),
                   path.resolve(__dirname, 'node_modules/leaflet')],
         use: ['style-loader', 'css-loader', 'sass-loader'],
@@ -81,6 +81,9 @@ module.exports = {
           enketo-transformer/web (https://github.com/enketo/enketo-transformer#web).
         So, we can tell webpack it's ok to ignore libxslt by aliasing it to false. */
       'libxslt': false,
+      'expo': false,
+      'expo-device': false,
+      'react-native-html-parser': false,
     },
     extensions: ['.web.js', '.jsx', '.tsx', '.ts', '.js'],
   },