Skip to content

Commit

Permalink
build(ps): switch from CRA to vite
Browse files Browse the repository at this point in the history
Refs #1314
  • Loading branch information
eventualbuddha committed Jun 24, 2022
1 parent 68cb064 commit ce85381
Show file tree
Hide file tree
Showing 18 changed files with 835 additions and 302 deletions.
2 changes: 1 addition & 1 deletion frontends/bas/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion frontends/bmd/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion frontends/bsd/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion frontends/election-manager/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions frontends/precinct-scanner/.eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,8 @@
/cypress/support
/prodserver
/src/**/*.js
/config
/scripts
*.d.ts
*.config.js
*.config.ts
106 changes: 106 additions & 0 deletions frontends/precinct-scanner/config/env.js
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 14 additions & 0 deletions frontends/precinct-scanner/config/jest/cssTransform.js
Original file line number Diff line number Diff line change
@@ -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';
},
};
73 changes: 73 additions & 0 deletions frontends/precinct-scanner/config/paths.js
Original file line number Diff line number Diff line change
@@ -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;
16 changes: 16 additions & 0 deletions frontends/precinct-scanner/index.html
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions frontends/precinct-scanner/jest.config.js
Original file line number Diff line number Diff line change
@@ -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)$',
],
};
38 changes: 13 additions & 25 deletions frontends/precinct-scanner/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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,
Expand Down
Loading

0 comments on commit ce85381

Please sign in to comment.