Skip to content

Commit b791abc

Browse files
eventualbuddhaeventualbuddha
committed
build(ps): switch from CRA to vite
Refs #1314
1 parent 68cb064 commit b791abc

File tree

18 files changed

+1066
-230
lines changed

18 files changed

+1066
-230
lines changed

‎frontends/bas/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
"ts-pnp": "1.2.0",
145145
"typescript": "4.6.3",
146146
"url-loader": "4.1.1",
147-
"vite": "^2.9.9"
147+
"vite": "^2.9.12"
148148
},
149149
"vx": {
150150
"isBundled": true,

‎frontends/bmd/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@
193193
"stylelint-config-styled-components": "^0.1.1",
194194
"stylelint-processor-styled-components": "^1.10.0",
195195
"ts-jest": "26",
196-
"vite": "^2.9.9"
196+
"vite": "^2.9.12"
197197
},
198198
"engines": {
199199
"node": ">= 12"

‎frontends/bsd/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
"stylelint-config-styled-components": "^0.1.1",
145145
"stylelint-processor-styled-components": "^1.10.0",
146146
"type-fest": "^0.18.0",
147-
"vite": "^2.9.9",
147+
"vite": "^2.9.12",
148148
"zip-stream": "^3.0.1"
149149
},
150150
"vx": {

‎frontends/election-manager/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@
205205
"stylelint-config-prettier": "^8.0.1",
206206
"stylelint-config-styled-components": "^0.1.1",
207207
"stylelint-processor-styled-components": "^1.10.0",
208-
"vite": "^2.9.9"
208+
"vite": "^2.9.12"
209209
},
210210
"vx": {
211211
"isBundled": true,

‎frontends/precinct-scanner/.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@
55
/cypress/support
66
/prodserver
77
/src/**/*.js
8+
/config
9+
/scripts
810
*.d.ts
11+
*.config.js
12+
*.config.ts

‎frontends/precinct-scanner/config/env.js

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
'use strict';
2+
3+
const fs = require('fs');
4+
const path = require('path');
5+
const paths = require('./paths');
6+
7+
// Make sure that including paths.js after env.js will read .env variables.
8+
delete require.cache[require.resolve('./paths')];
9+
10+
const NODE_ENV = process.env.NODE_ENV;
11+
if (!NODE_ENV) {
12+
throw new Error(
13+
'The NODE_ENV environment variable is required but was not specified.'
14+
);
15+
}
16+
17+
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18+
const dotenvFiles = [
19+
`${paths.dotenv}.${NODE_ENV}.local`,
20+
// Don't include `.env.local` for `test` environment
21+
// since normally you expect tests to produce the same
22+
// results for everyone
23+
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
24+
`${paths.dotenv}.${NODE_ENV}`,
25+
paths.dotenv,
26+
].filter(Boolean);
27+
28+
// Load environment variables from .env* files. Suppress warnings using silent
29+
// if this file is missing. dotenv will never modify any environment variables
30+
// that have already been set. Variable expansion is supported in .env files.
31+
// https://github.com/motdotla/dotenv
32+
// https://github.com/motdotla/dotenv-expand
33+
dotenvFiles.forEach(dotenvFile => {
34+
if (fs.existsSync(dotenvFile)) {
35+
require('dotenv-expand')(
36+
require('dotenv').config({
37+
path: dotenvFile,
38+
})
39+
);
40+
}
41+
});
42+
43+
// We support resolving modules according to `NODE_PATH`.
44+
// This lets you use absolute paths in imports inside large monorepos:
45+
// https://github.com/facebook/create-react-app/issues/253.
46+
// It works similar to `NODE_PATH` in Node itself:
47+
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48+
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49+
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
50+
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51+
// We also resolve them to make sure all tools using them work consistently.
52+
const appDirectory = fs.realpathSync(process.cwd());
53+
process.env.NODE_PATH = (process.env.NODE_PATH || '')
54+
.split(path.delimiter)
55+
.filter(folder => folder && !path.isAbsolute(folder))
56+
.map(folder => path.resolve(appDirectory, folder))
57+
.join(path.delimiter);
58+
59+
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60+
// injected into the application via DefinePlugin in webpack configuration.
61+
const REACT_APP = /^REACT_APP_/i;
62+
63+
function getClientEnvironment(publicUrl) {
64+
const raw = Object.keys(process.env)
65+
.filter(key => REACT_APP.test(key))
66+
.reduce(
67+
(env, key) => {
68+
env[key] = process.env[key];
69+
return env;
70+
},
71+
{
72+
// Useful for determining whether we’re running in production mode.
73+
// Most importantly, it switches React into the correct mode.
74+
NODE_ENV: process.env.NODE_ENV || 'development',
75+
// Useful for resolving the correct path to static assets in `public`.
76+
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77+
// This should only be used as an escape hatch. Normally you would put
78+
// images into the `src` and `import` them in code to get their paths.
79+
PUBLIC_URL: publicUrl,
80+
// We support configuring the sockjs pathname during development.
81+
// These settings let a developer run multiple simultaneous projects.
82+
// They are used as the connection `hostname`, `pathname` and `port`
83+
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
84+
// and `sockPort` options in webpack-dev-server.
85+
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
86+
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
87+
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
88+
// Whether or not react-refresh is enabled.
89+
// react-refresh is not 100% stable at this time,
90+
// which is why it's disabled by default.
91+
// It is defined here so it is available in the webpackHotDevClient.
92+
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
93+
}
94+
);
95+
// Stringify all values so we can feed into webpack DefinePlugin
96+
const stringified = {
97+
'process.env': Object.keys(raw).reduce((env, key) => {
98+
env[key] = JSON.stringify(raw[key]);
99+
return env;
100+
}, {}),
101+
};
102+
103+
return { raw, stringified };
104+
}
105+
106+
module.exports = getClientEnvironment;

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use strict';
2+
3+
// This is a custom Jest transformer turning style imports into empty objects.
4+
// http://facebook.github.io/jest/docs/en/webpack.html
5+
6+
module.exports = {
7+
process() {
8+
return 'module.exports = {};';
9+
},
10+
getCacheKey() {
11+
// The output is always the same.
12+
return 'cssTransform';
13+
},
14+
};

‎frontends/precinct-scanner/config/paths.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
'use strict';
2+
3+
const path = require('path');
4+
const fs = require('fs');
5+
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
6+
7+
// Make sure any symlinks in the project folder are resolved:
8+
// https://github.com/facebook/create-react-app/issues/637
9+
const appDirectory = fs.realpathSync(process.cwd());
10+
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11+
12+
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
13+
// "public path" at which the app is served.
14+
// webpack needs to know it to put the right <script> hrefs into HTML even in
15+
// single-page apps that may serve index.html for nested URLs like /todos/42.
16+
// We can't use a relative path in HTML because we don't want to load something
17+
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
18+
const publicUrlOrPath = getPublicUrlOrPath(
19+
process.env.NODE_ENV === 'development',
20+
require(resolveApp('package.json')).homepage,
21+
process.env.PUBLIC_URL
22+
);
23+
24+
const moduleFileExtensions = [
25+
'web.mjs',
26+
'mjs',
27+
'web.js',
28+
'js',
29+
'web.ts',
30+
'ts',
31+
'web.tsx',
32+
'tsx',
33+
'json',
34+
'web.jsx',
35+
'jsx',
36+
];
37+
38+
// Resolve file paths in the same order as webpack
39+
const resolveModule = (resolveFn, filePath) => {
40+
const extension = moduleFileExtensions.find(extension =>
41+
fs.existsSync(resolveFn(`${filePath}.${extension}`))
42+
);
43+
44+
if (extension) {
45+
return resolveFn(`${filePath}.${extension}`);
46+
}
47+
48+
return resolveFn(`${filePath}.js`);
49+
};
50+
51+
// config after eject: we're in ./config/
52+
module.exports = {
53+
dotenv: resolveApp('.env'),
54+
appPath: resolveApp('.'),
55+
appBuild: resolveApp('build'),
56+
appPublic: resolveApp('public'),
57+
appHtml: resolveApp('public/index.html'),
58+
appIndexJs: resolveModule(resolveApp, 'src/index'),
59+
appPackageJson: resolveApp('package.json'),
60+
appSrc: resolveApp('src'),
61+
appTsConfig: resolveApp('tsconfig.json'),
62+
appJsConfig: resolveApp('jsconfig.json'),
63+
yarnLockFile: resolveApp('yarn.lock'),
64+
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
65+
proxySetup: resolveApp('src/setupProxy.js'),
66+
appNodeModules: resolveApp('node_modules'),
67+
swSrc: resolveModule(resolveApp, 'src/service-worker'),
68+
publicUrlOrPath,
69+
};
70+
71+
72+
73+
module.exports.moduleFileExtensions = moduleFileExtensions;

‎frontends/precinct-scanner/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta name="description" content="Another election tool from VotingWorks" />
9+
<title>VotingWorks VxScan</title>
10+
</head>
11+
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="./src/index.tsx"></script>
15+
</body>
16+
</html>

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const shared = require('../../jest.config.shared');
2+
3+
/**
4+
* @type {import('@jest/types').Config.InitialOptions}
5+
*/
6+
module.exports = {
7+
...shared,
8+
collectCoverageFrom: [
9+
'src/**/*.{js,jsx,ts,tsx}',
10+
'!src/config/*',
11+
'!src/**/*.d.ts',
12+
'!src/index.tsx',
13+
],
14+
coverageThreshold: {
15+
global: {
16+
statements: 95,
17+
branches: 91,
18+
functions: 94,
19+
lines: 95,
20+
},
21+
},
22+
resetMocks: true,
23+
setupFiles: ['react-app-polyfill/jsdom'],
24+
setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
25+
testEnvironment: 'jsdom',
26+
transform: {
27+
'^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
28+
},
29+
transformIgnorePatterns: [
30+
'[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
31+
],
32+
};

‎frontends/precinct-scanner/package.json

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,17 @@
99
],
1010
"scripts": {
1111
"type-check": "tsc --build",
12-
"build": "tsc --build && react-scripts build",
12+
"build": "vite build",
1313
"build:watch": "tsc --build --watch",
14-
"eject": "react-scripts eject",
1514
"format": "prettier '**/*.+(css|graphql|json|less|md|mdx|sass|scss|yaml|yml)' --write",
1615
"lint": "pnpm type-check && eslint . && pnpm stylelint:run",
1716
"lint:fix": "pnpm type-check && eslint . --fix && pnpm stylelint:run:fix",
18-
"start": "react-scripts start",
17+
"start": "vite",
1918
"stylelint:run": "stylelint 'src/**/*.{js,jsx,ts,tsx}' && stylelint 'src/**/*.css' --config .stylelintrc-css.js",
2019
"stylelint:run:fix": "stylelint 'src/**/*.{js,jsx,ts,tsx}' --fix && stylelint 'src/**/*.css' --config .stylelintrc-css.js --fix",
2120
"test": "is-ci test:coverage test:watch",
22-
"test:debug": "TZ=UTC react-scripts --inspect-brk test --runInBand --no-cache --env=jest-environment-jsdom-sixteen",
23-
"test:watch": "TZ=UTC react-scripts test --env=jest-environment-jsdom-sixteen",
24-
"test:coverage": "TZ=UTC react-scripts test --coverage --watchAll=false",
21+
"test:watch": "TZ=UTC node scripts/test.js --env=jest-environment-jsdom-sixteen",
22+
"test:coverage": "TZ=UTC node scripts/test.js --coverage --watchAll=false",
2523
"pre-commit": "lint-staged"
2624
},
2725
"lint-staged": {
@@ -54,22 +52,6 @@
5452
"eslintConfig": {
5553
"extends": "react-app"
5654
},
57-
"jest": {
58-
"collectCoverageFrom": [
59-
"src/**/*.{js,jsx,ts,tsx}",
60-
"!src/config/*",
61-
"!src/**/*.d.ts",
62-
"!src/index.tsx"
63-
],
64-
"coverageThreshold": {
65-
"global": {
66-
"statements": 95,
67-
"branches": 91,
68-
"functions": 94,
69-
"lines": 95
70-
}
71-
}
72-
},
7355
"dependencies": {
7456
"@rooks/use-interval": "^4.11.2",
7557
"@testing-library/jest-dom": "^5.11.4",
@@ -91,6 +73,7 @@
9173
"base64-js": "^1.3.1",
9274
"buffer": "^6.0.3",
9375
"debug": "^4.3.1",
76+
"events": "^3.3.0",
9477
"fetch-mock": "^9.11.0",
9578
"http-proxy-middleware": "1.0.6",
9679
"i18next": "^19.4.5",
@@ -100,12 +83,12 @@
10083
"luxon": "^1.26.0",
10184
"mockdate": "^3.0.5",
10285
"normalize.css": "^8.0.1",
86+
"path": "^0.12.7",
10387
"pluralize": "^8.0.0",
10488
"react": "^17.0.1",
10589
"react-dom": "^17.0.1",
10690
"react-i18next": "^11.7.3",
10791
"react-router-dom": "^5.2.0",
108-
"react-scripts": "4.0.1",
10992
"setimmediate": "^1.0.5",
11093
"styled-components": "^5.2.3",
11194
"typescript": "4.6.3",
@@ -117,6 +100,7 @@
117100
"@codemod/parser": "^1.0.6",
118101
"@testing-library/react-hooks": "^7.0.2",
119102
"@testing-library/user-event": "^12.8.3",
103+
"@types/connect": "^3.4.35",
120104
"@types/debug": "^4.1.5",
121105
"@types/kiosk-browser": "workspace:*",
122106
"@types/pluralize": "^0.0.29",
@@ -140,18 +124,22 @@
140124
"eslint-plugin-react-hooks": "^4.2.0",
141125
"eslint-plugin-vx": "workspace:*",
142126
"is-ci-cli": "^2.1.2",
143-
"jest": "^27.3.1",
127+
"jest": "^26.6.0",
144128
"jest-environment-jsdom-sixteen": "^1.0.3",
129+
"jest-watch-typeahead": "0.6.4",
145130
"lint-staged": "^10.5.4",
146131
"prettier": "^2.6.2",
132+
"react-app-polyfill": "^3.0.0",
133+
"react-dev-utils": "^12.0.1",
147134
"react-refresh": "^0.9.0",
148135
"sort-package-json": "^1.50.0",
149136
"stylelint": "^13.1.0",
150137
"stylelint-config-palantir": "^4.0.1",
151138
"stylelint-config-prettier": "^8.0.1",
152139
"stylelint-config-styled-components": "^0.1.1",
153140
"stylelint-processor-styled-components": "^1.9.0",
154-
"ts-jest": "^26.5.6"
141+
"ts-jest": "^26.5.6",
142+
"vite": "^2.9.12"
155143
},
156144
"vx": {
157145
"isBundled": true,

0 commit comments

Comments
 (0)