Skip to content

Commit 53730ef

Browse files
peruukkiperuukki
authored
chore: Eject Create React App dependency from Feast UI (#4681)
* chore: Eject create-react-app with `yarn eject` in /ui Signed-off-by: Harri Lehtola <peruukki@hotmail.com> * chore: Move most eject dependencies to devDependencies in /ui Signed-off-by: Harri Lehtola <peruukki@hotmail.com> * chore: Remove duplicate babel config added when ejecting in /ui The presets are set in .babelrc.js. Signed-off-by: Harri Lehtola <peruukki@hotmail.com> * chore: Upgrade dependencies with vulnerabilities in /ui These two dependencies can now be upgraded after ejecting. Signed-off-by: Harri Lehtola <peruukki@hotmail.com> * chore: Extract Jest configuration from package.json in /ui This keeps package.json cleaner. Signed-off-by: Harri Lehtola <peruukki@hotmail.com> * chore: Extract ESLint configuration from package.json in /ui Signed-off-by: Harri Lehtola <peruukki@hotmail.com> * chore: Remove unused tailwindcss added when ejecting in /ui Signed-off-by: Harri Lehtola <peruukki@hotmail.com> * chore: Disable strict mode warnings in scripts and config in /ui Strict mode is implicit in modules, so ESLint gave warnings about using them in the scripts. However, the scripts are run directly with `node`, so they are not used as modules. But setting their sourceType to "script" results in ESLint errors saying "Strict mode is not permitted." I couldn't figure out why, so let's just disable the rule for the scripts. Later I noticed the same warning in the config directory, so let's include that too. Signed-off-by: Harri Lehtola <peruukki@hotmail.com> --------- Signed-off-by: Harri Lehtola <peruukki@hotmail.com>
1 parent 138176e commit 53730ef

File tree

18 files changed

+3002
-664
lines changed

18 files changed

+3002
-664
lines changed

‎ui/.eslintrc.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
extends: ["react-app", "react-app/jest"],
3+
overrides: [
4+
{
5+
files: ["./scripts/**", "./config/**"],
6+
parserOptions: { sourceType: "script" },
7+
rules: { strict: "off" },
8+
},
9+
],
10+
};

‎ui/config/env.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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+
// It is defined here so it is available in the webpackHotDevClient.
90+
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
91+
}
92+
);
93+
// Stringify all values so we can feed into webpack DefinePlugin
94+
const stringified = {
95+
'process.env': Object.keys(raw).reduce((env, key) => {
96+
env[key] = JSON.stringify(raw[key]);
97+
return env;
98+
}, {}),
99+
};
100+
101+
return { raw, stringified };
102+
}
103+
104+
module.exports = getClientEnvironment;

‎ui/config/getHttpsConfig.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
'use strict';
2+
3+
const fs = require('fs');
4+
const path = require('path');
5+
const crypto = require('crypto');
6+
const chalk = require('react-dev-utils/chalk');
7+
const paths = require('./paths');
8+
9+
// Ensure the certificate and key provided are valid and if not
10+
// throw an easy to debug error
11+
function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
12+
let encrypted;
13+
try {
14+
// publicEncrypt will throw an error with an invalid cert
15+
encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
16+
} catch (err) {
17+
throw new Error(
18+
`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
19+
);
20+
}
21+
22+
try {
23+
// privateDecrypt will throw an error with an invalid key
24+
crypto.privateDecrypt(key, encrypted);
25+
} catch (err) {
26+
throw new Error(
27+
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
28+
err.message
29+
}`
30+
);
31+
}
32+
}
33+
34+
// Read file and throw an error if it doesn't exist
35+
function readEnvFile(file, type) {
36+
if (!fs.existsSync(file)) {
37+
throw new Error(
38+
`You specified ${chalk.cyan(
39+
type
40+
)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
41+
);
42+
}
43+
return fs.readFileSync(file);
44+
}
45+
46+
// Get the https config
47+
// Return cert files if provided in env, otherwise just true or false
48+
function getHttpsConfig() {
49+
const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
50+
const isHttps = HTTPS === 'true';
51+
52+
if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
53+
const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
54+
const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
55+
const config = {
56+
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
57+
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
58+
};
59+
60+
validateKeyAndCerts({ ...config, keyFile, crtFile });
61+
return config;
62+
}
63+
return isHttps;
64+
}
65+
66+
module.exports = getHttpsConfig;

‎ui/config/jest/babelTransform.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use strict';
2+
3+
const babelJest = require('babel-jest').default;
4+
5+
const hasJsxRuntime = (() => {
6+
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
7+
return false;
8+
}
9+
10+
try {
11+
require.resolve('react/jsx-runtime');
12+
return true;
13+
} catch (e) {
14+
return false;
15+
}
16+
})();
17+
18+
module.exports = babelJest.createTransformer({
19+
presets: [
20+
[
21+
require.resolve('babel-preset-react-app'),
22+
{
23+
runtime: hasJsxRuntime ? 'automatic' : 'classic',
24+
},
25+
],
26+
],
27+
babelrc: false,
28+
configFile: false,
29+
});

‎ui/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+
};

‎ui/config/jest/fileTransform.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
'use strict';
2+
3+
const path = require('path');
4+
const camelcase = require('camelcase');
5+
6+
// This is a custom Jest transformer turning file imports into filenames.
7+
// http://facebook.github.io/jest/docs/en/webpack.html
8+
9+
module.exports = {
10+
process(src, filename) {
11+
const assetFilename = JSON.stringify(path.basename(filename));
12+
13+
if (filename.match(/\.svg$/)) {
14+
// Based on how SVGR generates a component name:
15+
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16+
const pascalCaseFilename = camelcase(path.parse(filename).name, {
17+
pascalCase: true,
18+
});
19+
const componentName = `Svg${pascalCaseFilename}`;
20+
return `const React = require('react');
21+
module.exports = {
22+
__esModule: true,
23+
default: ${assetFilename},
24+
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25+
return {
26+
$$typeof: Symbol.for('react.element'),
27+
type: 'svg',
28+
ref: ref,
29+
key: null,
30+
props: Object.assign({}, props, {
31+
children: ${assetFilename}
32+
})
33+
};
34+
}),
35+
};`;
36+
}
37+
38+
return `module.exports = ${assetFilename};`;
39+
},
40+
};

0 commit comments

Comments
 (0)