build(ps): switch from CRA to vite

frontends/bas/package.json

@@ -144,7 +144,7 @@
     "ts-pnp": "1.2.0",
     "typescript": "4.6.3",
     "url-loader": "4.1.1",
-    "vite": "^2.9.9"
+    "vite": "^2.9.12"
   },
   "vx": {
     "isBundled": true,

frontends/bmd/package.json

@@ -193,7 +193,7 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "26",
-    "vite": "^2.9.9"
+    "vite": "^2.9.12"
   },
   "engines": {
     "node": ">= 12"

frontends/bsd/package.json

@@ -144,7 +144,7 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "type-fest": "^0.18.0",
-    "vite": "^2.9.9",
+    "vite": "^2.9.12",
     "zip-stream": "^3.0.1"
   },
   "vx": {

frontends/election-manager/package.json

@@ -205,7 +205,7 @@
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "vite": "^2.9.9"
+    "vite": "^2.9.12"
   },
   "vx": {
     "isBundled": true,

frontends/precinct-scanner/.eslintignore

@@ -5,4 +5,8 @@
 /cypress/support
 /prodserver
 /src/**/*.js
+/config
+/scripts
 *.d.ts
+*.config.js
+*.config.ts

frontends/precinct-scanner/config/env.js

@@ -0,0 +1,106 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+        // We support configuring the sockjs pathname during development.
+        // These settings let a developer run multiple simultaneous projects.
+        // They are used as the connection `hostname`, `pathname` and `port`
+        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+        // and `sockPort` options in webpack-dev-server.
+        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+        // Whether or not react-refresh is enabled.
+        // react-refresh is not 100% stable at this time,
+        // which is why it's disabled by default.
+        // It is defined here so it is available in the webpackHotDevClient.
+        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+      }
+    );
+  // Stringify all values so we can feed into webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

frontends/precinct-scanner/config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

frontends/precinct-scanner/config/paths.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+const publicUrlOrPath = getPublicUrlOrPath(
+  process.env.NODE_ENV === 'development',
+  require(resolveApp('package.json')).homepage,
+  process.env.PUBLIC_URL
+);
+
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find(extension =>
+    fs.existsSync(resolveFn(`${filePath}.${extension}`))
+  );
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp('build'),
+  appPublic: resolveApp('public'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  proxySetup: resolveApp('src/setupProxy.js'),
+  appNodeModules: resolveApp('node_modules'),
+  swSrc: resolveModule(resolveApp, 'src/service-worker'),
+  publicUrlOrPath,
+};
+
+
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

frontends/precinct-scanner/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Another election tool from VotingWorks" />
+    <title>VotingWorks VxScan</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>

frontends/precinct-scanner/jest.config.js

@@ -0,0 +1,32 @@
+const shared = require('../../jest.config.shared');
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+module.exports = {
+  ...shared,
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/config/*',
+    '!src/**/*.d.ts',
+    '!src/index.tsx',
+  ],
+  coverageThreshold: {
+    global: {
+      statements: 95,
+      branches: 91,
+      functions: 94,
+      lines: 95,
+    },
+  },
+  resetMocks: true,
+  setupFiles: ['react-app-polyfill/jsdom'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+  ],
+};

frontends/precinct-scanner/package.json

@@ -9,19 +9,17 @@
   ],
   "scripts": {
     "type-check": "tsc --build",
-    "build": "tsc --build && react-scripts build",
+    "build": "vite build",
     "build:watch": "tsc --build --watch",
-    "eject": "react-scripts eject",
     "format": "prettier '**/*.+(css|graphql|json|less|md|mdx|sass|scss|yaml|yml)' --write",
     "lint": "pnpm type-check && eslint . && pnpm stylelint:run",
     "lint:fix": "pnpm type-check && eslint . --fix && pnpm stylelint:run:fix",
-    "start": "react-scripts start",
+    "start": "vite",
     "stylelint:run": "stylelint 'src/**/*.{js,jsx,ts,tsx}' && stylelint 'src/**/*.css' --config .stylelintrc-css.js",
     "stylelint:run:fix": "stylelint 'src/**/*.{js,jsx,ts,tsx}' --fix && stylelint 'src/**/*.css' --config .stylelintrc-css.js --fix",
     "test": "is-ci test:coverage test:watch",
-    "test:debug": "TZ=UTC react-scripts --inspect-brk test --runInBand --no-cache --env=jest-environment-jsdom-sixteen",
-    "test:watch": "TZ=UTC react-scripts test --env=jest-environment-jsdom-sixteen",
-    "test:coverage": "TZ=UTC react-scripts test --coverage --watchAll=false",
+    "test:watch": "TZ=UTC node scripts/test.js --env=jest-environment-jsdom-sixteen",
+    "test:coverage": "TZ=UTC node scripts/test.js --coverage --watchAll=false",
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
@@ -54,22 +52,6 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/config/*",
-      "!src/**/*.d.ts",
-      "!src/index.tsx"
-    ],
-    "coverageThreshold": {
-      "global": {
-        "statements": 95,
-        "branches": 91,
-        "functions": 94,
-        "lines": 95
-      }
-    }
-  },
   "dependencies": {
     "@rooks/use-interval": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
@@ -91,6 +73,7 @@
     "base64-js": "^1.3.1",
     "buffer": "^6.0.3",
     "debug": "^4.3.1",
+    "events": "^3.3.0",
     "fetch-mock": "^9.11.0",
     "http-proxy-middleware": "1.0.6",
     "i18next": "^19.4.5",
@@ -100,12 +83,12 @@
     "luxon": "^1.26.0",
     "mockdate": "^3.0.5",
     "normalize.css": "^8.0.1",
+    "path": "^0.12.7",
     "pluralize": "^8.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.7.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
     "setimmediate": "^1.0.5",
     "styled-components": "^5.2.3",
     "typescript": "4.6.3",
@@ -117,6 +100,7 @@
     "@codemod/parser": "^1.0.6",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^12.8.3",
+    "@types/connect": "^3.4.35",
     "@types/debug": "^4.1.5",
     "@types/kiosk-browser": "workspace:*",
     "@types/pluralize": "^0.0.29",
@@ -140,18 +124,22 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-vx": "workspace:*",
     "is-ci-cli": "^2.1.2",
-    "jest": "^27.3.1",
+    "jest": "^26.6.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-watch-typeahead": "0.6.4",
     "lint-staged": "^10.5.4",
     "prettier": "^2.6.2",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.9.0",
     "sort-package-json": "^1.50.0",
     "stylelint": "^13.1.0",
     "stylelint-config-palantir": "^4.0.1",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.9.0",
-    "ts-jest": "^26.5.6"
+    "ts-jest": "^26.5.6",
+    "vite": "^2.9.12"
   },
   "vx": {
     "isBundled": true,