Exclude files from builds by build type (#12521)
This PR enables the exclusion of JavaScript and JSON source by `buildType`, and enables the running of `eslint` under LavaMoat. 80-90% of the changes in this PR are `.patch` files and LavaMoat policy additions.
The file exclusion is designed to work in conjunction with our code fencing. If you forget to fence an import statement of an excluded file, the application will now error on boot. **This PR commits us to a particular naming convention for files intended only for certain builds.** Continue reading for details.
### Code Fencing and ESLint
When a file is modified by the code fencing transform, we run ESLint on it to ensure that we fail early for syntax-related issues. This PR adds the first code fences that will be actually be removed in production builds. As a consequence, this was also the first time we attempted to run ESLint under LavaMoat. Making that work required a lot of manual labor because of ESLint's use of dynamic imports, but the manual changes necessary were ultimately quite minor.
### File Exclusion
For all builds, any file in `app/`, `shared/` or `ui/` in a sub-directory matching `**/${otherBuildType}/**` (where `otherBuildType` is any build type except `main`) will be added to the list of excluded files, regardless of its file extension. For example, if we want to add one or more pages to the UI settings in Flask, we'd create the folder `ui/pages/settings/flask`, add any necessary files or sub-folders there, and fence the import statements for anything in that folder. If we wanted the same thing for Beta, we would name the directory `ui/pages/settings/beta`.
As it happens, we already organize some of our source files in this way, namely the logo JSON for Beta and Flask builds. See `ui/helpers/utils/build-types.js` to see how this works in practice.
Because the list of ignored filed is only passed to `browserify.exclude()`, any files not bundled by `browserify` will be ignored. For our purposes, this is mostly relevant for `.scss`. Since we don't have anything like code fencing for SCSS, we'll have to consider how to handle our styles separately.
3 years ago
|
|
|
const { version: reactVersion } = require('react/package.json');
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
root: true,
|
|
|
|
parser: '@babel/eslint-parser',
|
|
|
|
parserOptions: {
|
|
|
|
sourceType: 'module',
|
|
|
|
ecmaVersion: 2017,
|
|
|
|
ecmaFeatures: {
|
|
|
|
experimentalObjectRestSpread: true,
|
|
|
|
impliedStrict: true,
|
|
|
|
modules: true,
|
|
|
|
blockBindings: true,
|
|
|
|
arrowFunctions: true,
|
|
|
|
objectLiteralShorthandMethods: true,
|
|
|
|
objectLiteralShorthandProperties: true,
|
|
|
|
templateStrings: true,
|
|
|
|
classes: true,
|
|
|
|
jsx: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
ignorePatterns: [
|
|
|
|
'!.eslintrc.js',
|
|
|
|
'node_modules/**',
|
|
|
|
'dist/**',
|
|
|
|
'builds/**',
|
|
|
|
'test-*/**',
|
|
|
|
'docs/**',
|
|
|
|
'coverage/',
|
|
|
|
'jest-coverage/',
|
|
|
|
'development/chromereload.js',
|
|
|
|
'app/vendor/**',
|
|
|
|
'test/e2e/send-eth-with-private-key-test/**',
|
|
|
|
'nyc_output/**',
|
|
|
|
'.vscode/**',
|
|
|
|
'lavamoat/*/policy.json',
|
|
|
|
'storybook-build/**',
|
|
|
|
],
|
|
|
|
|
|
|
|
extends: [
|
|
|
|
'@metamask/eslint-config',
|
|
|
|
'@metamask/eslint-config-nodejs',
|
|
|
|
'prettier',
|
|
|
|
],
|
|
|
|
|
|
|
|
plugins: ['@babel', 'import', 'prettier'],
|
|
|
|
|
|
|
|
globals: {
|
|
|
|
document: 'readonly',
|
|
|
|
window: 'readonly',
|
|
|
|
},
|
|
|
|
|
|
|
|
rules: {
|
|
|
|
'default-param-last': 'off',
|
|
|
|
'prefer-object-spread': 'error',
|
|
|
|
'require-atomic-updates': 'off',
|
|
|
|
|
Add build-time code exclusion using code fencing (#12060)
This PR adds build-time code exclusion by means of code fencing. For details, please see the README in `./development/build/transforms`. Note that linting of transformed files as a form of validation is added in a follow-up, #12075.
Hopefully exhaustive tests are added to ensure that the transform works according to its specification. Since these tests are Node-only, they required their own Jest config. The recommended way to work with multiple Jest configs is using the `projects` field in the Jest config, however [that feature breaks coverage collection](https://github.com/facebook/jest/issues/9628). That being the case, I had to set up two separate Jest configs. In order to get both test suites to run in parallel, Jest is now invoked via a script, `./test/run-jest.sh`.
By way of example, this build system feature allows us to add fences like this:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
///: BEGIN:ONLY_INCLUDE_IN(beta)
PluginController: this.pluginController,
///: END:ONLY_INCLUDE_IN
});
```
Which at build time are transformed to the following if the build type is not `beta`:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
});
```
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
3 years ago
|
|
|
// This is the same as our default config, but for the noted exceptions
|
|
|
|
'spaced-comment': [
|
|
|
|
'error',
|
|
|
|
'always',
|
|
|
|
{
|
|
|
|
markers: [
|
|
|
|
'global',
|
|
|
|
'globals',
|
|
|
|
'eslint',
|
|
|
|
'eslint-disable',
|
|
|
|
'*package',
|
|
|
|
'!',
|
|
|
|
',',
|
|
|
|
// Local additions
|
|
|
|
'/:', // This is for our code fences
|
|
|
|
],
|
|
|
|
exceptions: ['=', '-'],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
|
|
|
|
'import/no-unassigned-import': 'off',
|
|
|
|
|
|
|
|
'no-invalid-this': 'off',
|
|
|
|
'@babel/no-invalid-this': 'error',
|
|
|
|
|
|
|
|
// Prettier handles this
|
|
|
|
'@babel/semi': 'off',
|
|
|
|
|
|
|
|
'node/no-process-env': 'off',
|
|
|
|
|
|
|
|
// TODO: re-enable these rules
|
|
|
|
'node/no-sync': 'off',
|
|
|
|
'node/no-unpublished-import': 'off',
|
|
|
|
'node/no-unpublished-require': 'off',
|
|
|
|
},
|
|
|
|
overrides: [
|
|
|
|
{
|
Increase Jest unit test coverage for the Swaps feature to ~25% (#10900)
* Swaps: Show a network name dynamically in a tooltip
* Replace “Ethereum” with “$1”, change “Test” to “Testnet”
* Replace 이더리움 with $1
* Translate network names, use ‘Ethereum’ by default if a translation is not available yet
* Reorder messages to resolve ESLint issues
* Add a snapshot test for the FeeCard component, increase Jest threshold
* Enable snapshot testing into external .snap files in ESLint
* Add the “networkNameEthereum” key in ko/messages.json, remove default “Ethereum” value
* Throw an error if chain ID is not supported by the Swaps feature
* Use string literals when calling the `t` fn,
* Watch Jest tests silently (no React warnings in terminal, only errors)
* Add @testing-library/jest-dom, import it before running Jest tests
* Add snapshot testing of Swaps’ React components for happy paths, increase minimum threshold for Jest
* Add the test/jest folder for Jest setup and shared functions, use it in Swaps Jest tests
* Fix ESLint issues, update linting config
* Enable ESLint for .snap files (Jest snapshots), throw an error if a snapshot is bigger than 50 lines
* Don’t run lint:fix for .snap files
* Move `createProps` outside of `describe` blocks, move store creation inside tests
* Use translations instead of keys, update a rendering function to load translations
* Make sure all Jest snapshots are shorter than 50 lines (default limit)
* Add / update props for Swaps tests
* Fix React warnings when running tests for Swaps
4 years ago
|
|
|
files: ['ui/**/*.js', 'test/lib/render-helpers.js', 'test/jest/*.js'],
|
|
|
|
plugins: ['react'],
|
|
|
|
extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
|
|
|
|
rules: {
|
|
|
|
'react/no-unused-prop-types': 'error',
|
|
|
|
'react/no-unused-state': 'error',
|
|
|
|
'react/jsx-boolean-value': 'error',
|
|
|
|
'react/jsx-curly-brace-presence': [
|
|
|
|
'error',
|
|
|
|
{ props: 'never', children: 'never' },
|
|
|
|
],
|
|
|
|
'react/no-deprecated': 'error',
|
|
|
|
'react/default-props-match-prop-types': 'error',
|
|
|
|
'react/jsx-no-duplicate-props': 'error',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
files: ['test/e2e/**/*.spec.js'],
|
|
|
|
extends: ['@metamask/eslint-config-mocha'],
|
|
|
|
rules: {
|
|
|
|
'mocha/no-hooks-for-single-case': 'off',
|
|
|
|
'mocha/no-setup-in-describe': 'off',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
files: ['app/scripts/migrations/*.js', '*.stories.js'],
|
|
|
|
rules: {
|
|
|
|
'import/no-anonymous-default-export': ['error', { allowObject: true }],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
files: ['app/scripts/migrations/*.js'],
|
|
|
|
rules: {
|
|
|
|
'node/global-require': 'off',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
files: ['**/*.test.js'],
|
|
|
|
excludedFiles: [
|
|
|
|
'ui/**/*.test.js',
|
|
|
|
'ui/__mocks__/*.js',
|
|
|
|
'shared/**/*.test.js',
|
Add build-time code exclusion using code fencing (#12060)
This PR adds build-time code exclusion by means of code fencing. For details, please see the README in `./development/build/transforms`. Note that linting of transformed files as a form of validation is added in a follow-up, #12075.
Hopefully exhaustive tests are added to ensure that the transform works according to its specification. Since these tests are Node-only, they required their own Jest config. The recommended way to work with multiple Jest configs is using the `projects` field in the Jest config, however [that feature breaks coverage collection](https://github.com/facebook/jest/issues/9628). That being the case, I had to set up two separate Jest configs. In order to get both test suites to run in parallel, Jest is now invoked via a script, `./test/run-jest.sh`.
By way of example, this build system feature allows us to add fences like this:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
///: BEGIN:ONLY_INCLUDE_IN(beta)
PluginController: this.pluginController,
///: END:ONLY_INCLUDE_IN
});
```
Which at build time are transformed to the following if the build type is not `beta`:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
});
```
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
3 years ago
|
|
|
'development/**/*.test.js',
|
|
|
|
'app/scripts/migrations/*.test.js',
|
|
|
|
'app/scripts/platforms/*.test.js',
|
|
|
|
],
|
|
|
|
extends: ['@metamask/eslint-config-mocha'],
|
|
|
|
rules: {
|
|
|
|
'mocha/no-setup-in-describe': 'off',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
Increase Jest unit test coverage for the Swaps feature to ~25% (#10900)
* Swaps: Show a network name dynamically in a tooltip
* Replace “Ethereum” with “$1”, change “Test” to “Testnet”
* Replace 이더리움 with $1
* Translate network names, use ‘Ethereum’ by default if a translation is not available yet
* Reorder messages to resolve ESLint issues
* Add a snapshot test for the FeeCard component, increase Jest threshold
* Enable snapshot testing into external .snap files in ESLint
* Add the “networkNameEthereum” key in ko/messages.json, remove default “Ethereum” value
* Throw an error if chain ID is not supported by the Swaps feature
* Use string literals when calling the `t` fn,
* Watch Jest tests silently (no React warnings in terminal, only errors)
* Add @testing-library/jest-dom, import it before running Jest tests
* Add snapshot testing of Swaps’ React components for happy paths, increase minimum threshold for Jest
* Add the test/jest folder for Jest setup and shared functions, use it in Swaps Jest tests
* Fix ESLint issues, update linting config
* Enable ESLint for .snap files (Jest snapshots), throw an error if a snapshot is bigger than 50 lines
* Don’t run lint:fix for .snap files
* Move `createProps` outside of `describe` blocks, move store creation inside tests
* Use translations instead of keys, update a rendering function to load translations
* Make sure all Jest snapshots are shorter than 50 lines (default limit)
* Add / update props for Swaps tests
* Fix React warnings when running tests for Swaps
4 years ago
|
|
|
files: ['**/__snapshots__/*.snap'],
|
|
|
|
plugins: ['jest'],
|
|
|
|
rules: {
|
|
|
|
'jest/no-large-snapshots': [
|
|
|
|
'error',
|
|
|
|
{ maxSize: 50, inlineMaxSize: 50 },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
Add build-time code exclusion using code fencing (#12060)
This PR adds build-time code exclusion by means of code fencing. For details, please see the README in `./development/build/transforms`. Note that linting of transformed files as a form of validation is added in a follow-up, #12075.
Hopefully exhaustive tests are added to ensure that the transform works according to its specification. Since these tests are Node-only, they required their own Jest config. The recommended way to work with multiple Jest configs is using the `projects` field in the Jest config, however [that feature breaks coverage collection](https://github.com/facebook/jest/issues/9628). That being the case, I had to set up two separate Jest configs. In order to get both test suites to run in parallel, Jest is now invoked via a script, `./test/run-jest.sh`.
By way of example, this build system feature allows us to add fences like this:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
///: BEGIN:ONLY_INCLUDE_IN(beta)
PluginController: this.pluginController,
///: END:ONLY_INCLUDE_IN
});
```
Which at build time are transformed to the following if the build type is not `beta`:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
});
```
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
3 years ago
|
|
|
files: [
|
|
|
|
'ui/**/*.test.js',
|
|
|
|
'ui/__mocks__/*.js',
|
|
|
|
'shared/**/*.test.js',
|
|
|
|
'development/**/*.test.js',
|
|
|
|
'app/scripts/migrations/*.test.js',
|
|
|
|
'app/scripts/platforms/*.test.js',
|
Add build-time code exclusion using code fencing (#12060)
This PR adds build-time code exclusion by means of code fencing. For details, please see the README in `./development/build/transforms`. Note that linting of transformed files as a form of validation is added in a follow-up, #12075.
Hopefully exhaustive tests are added to ensure that the transform works according to its specification. Since these tests are Node-only, they required their own Jest config. The recommended way to work with multiple Jest configs is using the `projects` field in the Jest config, however [that feature breaks coverage collection](https://github.com/facebook/jest/issues/9628). That being the case, I had to set up two separate Jest configs. In order to get both test suites to run in parallel, Jest is now invoked via a script, `./test/run-jest.sh`.
By way of example, this build system feature allows us to add fences like this:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
///: BEGIN:ONLY_INCLUDE_IN(beta)
PluginController: this.pluginController,
///: END:ONLY_INCLUDE_IN
});
```
Which at build time are transformed to the following if the build type is not `beta`:
```javascript
this.store.updateStructure({
...,
GasFeeController: this.gasFeeController,
TokenListController: this.tokenListController,
});
```
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
3 years ago
|
|
|
],
|
|
|
|
extends: ['@metamask/eslint-config-jest'],
|
|
|
|
rules: {
|
|
|
|
'jest/no-restricted-matchers': 'off',
|
Increase Jest unit test coverage for the Swaps feature to ~25% (#10900)
* Swaps: Show a network name dynamically in a tooltip
* Replace “Ethereum” with “$1”, change “Test” to “Testnet”
* Replace 이더리움 with $1
* Translate network names, use ‘Ethereum’ by default if a translation is not available yet
* Reorder messages to resolve ESLint issues
* Add a snapshot test for the FeeCard component, increase Jest threshold
* Enable snapshot testing into external .snap files in ESLint
* Add the “networkNameEthereum” key in ko/messages.json, remove default “Ethereum” value
* Throw an error if chain ID is not supported by the Swaps feature
* Use string literals when calling the `t` fn,
* Watch Jest tests silently (no React warnings in terminal, only errors)
* Add @testing-library/jest-dom, import it before running Jest tests
* Add snapshot testing of Swaps’ React components for happy paths, increase minimum threshold for Jest
* Add the test/jest folder for Jest setup and shared functions, use it in Swaps Jest tests
* Fix ESLint issues, update linting config
* Enable ESLint for .snap files (Jest snapshots), throw an error if a snapshot is bigger than 50 lines
* Don’t run lint:fix for .snap files
* Move `createProps` outside of `describe` blocks, move store creation inside tests
* Use translations instead of keys, update a rendering function to load translations
* Make sure all Jest snapshots are shorter than 50 lines (default limit)
* Add / update props for Swaps tests
* Fix React warnings when running tests for Swaps
4 years ago
|
|
|
'import/unambiguous': 'off',
|
|
|
|
'import/named': 'off',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
files: [
|
|
|
|
'development/**/*.js',
|
|
|
|
'test/e2e/benchmark.js',
|
|
|
|
'test/helpers/setup-helper.js',
|
|
|
|
],
|
|
|
|
rules: {
|
|
|
|
'node/no-process-exit': 'off',
|
|
|
|
'node/shebang': 'off',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
files: [
|
|
|
|
'.eslintrc.js',
|
|
|
|
'babel.config.js',
|
|
|
|
'nyc.config.js',
|
|
|
|
'stylelint.config.js',
|
|
|
|
'app/scripts/lockdown-run.js',
|
|
|
|
'app/scripts/lockdown-more.js',
|
|
|
|
'development/**/*.js',
|
|
|
|
'test/e2e/**/*.js',
|
|
|
|
'test/env.js',
|
|
|
|
'test/setup.js',
|
|
|
|
'test/helpers/protect-intrinsics-helpers.js',
|
|
|
|
'test/lib/wait-until-called.js',
|
|
|
|
'jest.config.js',
|
|
|
|
],
|
|
|
|
parserOptions: {
|
|
|
|
sourceType: 'script',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
files: [
|
|
|
|
'app/scripts/lockdown-run.js',
|
|
|
|
'app/scripts/lockdown-more.js',
|
|
|
|
'test/helpers/protect-intrinsics-helpers.js',
|
|
|
|
'test/unit-global/protect-intrinsics.test.js',
|
|
|
|
],
|
|
|
|
globals: {
|
|
|
|
harden: 'readonly',
|
|
|
|
Compartment: 'readonly',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
|
|
|
|
settings: {
|
|
|
|
react: {
|
Exclude files from builds by build type (#12521)
This PR enables the exclusion of JavaScript and JSON source by `buildType`, and enables the running of `eslint` under LavaMoat. 80-90% of the changes in this PR are `.patch` files and LavaMoat policy additions.
The file exclusion is designed to work in conjunction with our code fencing. If you forget to fence an import statement of an excluded file, the application will now error on boot. **This PR commits us to a particular naming convention for files intended only for certain builds.** Continue reading for details.
### Code Fencing and ESLint
When a file is modified by the code fencing transform, we run ESLint on it to ensure that we fail early for syntax-related issues. This PR adds the first code fences that will be actually be removed in production builds. As a consequence, this was also the first time we attempted to run ESLint under LavaMoat. Making that work required a lot of manual labor because of ESLint's use of dynamic imports, but the manual changes necessary were ultimately quite minor.
### File Exclusion
For all builds, any file in `app/`, `shared/` or `ui/` in a sub-directory matching `**/${otherBuildType}/**` (where `otherBuildType` is any build type except `main`) will be added to the list of excluded files, regardless of its file extension. For example, if we want to add one or more pages to the UI settings in Flask, we'd create the folder `ui/pages/settings/flask`, add any necessary files or sub-folders there, and fence the import statements for anything in that folder. If we wanted the same thing for Beta, we would name the directory `ui/pages/settings/beta`.
As it happens, we already organize some of our source files in this way, namely the logo JSON for Beta and Flask builds. See `ui/helpers/utils/build-types.js` to see how this works in practice.
Because the list of ignored filed is only passed to `browserify.exclude()`, any files not bundled by `browserify` will be ignored. For our purposes, this is mostly relevant for `.scss`. Since we don't have anything like code fencing for SCSS, we'll have to consider how to handle our styles separately.
3 years ago
|
|
|
// If this is set to 'detect', ESLint will import React in order to find
|
|
|
|
// its version. Because we run ESLint in the build system under LavaMoat,
|
|
|
|
// this means that detecting the React version requires a LavaMoat policy
|
|
|
|
// for all of React, in the build system. That's a no-go, so we grab it
|
|
|
|
// from React's package.json.
|
|
|
|
version: reactVersion,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|