Babel improvements: reloaded (#11593)
* Update browserslist's caniuse-lite $ npx browserslist@latest --update-db - should be ran regularly or: - caniuse-lite added to devDependencies for renovate to pick up. * Optimize babel configuration for bundle size & runtime performance * Remove probably unused/unnecessary raf polyfill * Use babel.config.js file over .babelrc to allow comments * Cleanup dependencies - Remove unused/deprecated babel-core dependency - Remove unnecessary babel-jest dependency, use version provided by jest - Remove object.values unnecessary dependency - Move url-loader to devDependencies where it belongs - Remove typescript dependency * Upgrade babel dependencies & migrate to assumptions * Use caret ranges for devDependencies, including Babel related ones * Fix tests * Fix lint errors - misc lint errors - bin/regenerate_font.js must be wrapped in a function as newest babel eslint parser fails to parse a return; statement outside of a function... - add latest eslint-plugin-react devDependency, as without it, with newest babel eslint parser, the plugin fails to see propTypes static class properties.
This commit is contained in:
Tim Pillard
GitHub
Родитель
3a6c6bea01
Коммит
d7146b512c
23
.babelrc
23
.babelrc
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"useBuiltIns": "entry",
|
||||
"corejs": "3"
|
||||
}
|
||||
],
|
||||
"@babel/preset-flow",
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/plugin-proposal-class-properties"
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [
|
||||
"dynamic-import-node"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,9 @@ pids
|
|||
*.pid
|
||||
*.seed
|
||||
|
||||
# VSCode
|
||||
.vscode
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
module.exports = {
|
||||
// https://babeljs.io/docs/en/assumptions
|
||||
'assumptions': {
|
||||
'setPublicClassFields': true,
|
||||
},
|
||||
'presets': [
|
||||
[
|
||||
// https://babeljs.io/docs/en/babel-preset-env
|
||||
'@babel/preset-env',
|
||||
{
|
||||
// Allow `@babel/preset-env` to import polyfills from core-js as needed.
|
||||
'useBuiltIns': 'usage',
|
||||
// Help `@babel/preset-env` make use of the correct core-js polyfills.
|
||||
'corejs': '3.23',
|
||||
// Perform transforms closest to targets defined in `.browserslistrc`.
|
||||
'bugfixes': true,
|
||||
},
|
||||
],
|
||||
'@babel/preset-flow',
|
||||
// https://babeljs.io/docs/en/babel-preset-react/
|
||||
[
|
||||
'@babel/preset-react',
|
||||
{
|
||||
// When spreading props, use inline object with spread elements directly
|
||||
// instead of Babel's extend helper or Object.assign.
|
||||
'useBuiltIns': true,
|
||||
// FIXME: Upgrade to React 17+
|
||||
// Cannot use React 17 new, lighter, faster JSX Transform
|
||||
// https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
|
||||
// https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation
|
||||
// 'runtime': 'automatic',
|
||||
},
|
||||
],
|
||||
],
|
||||
'plugins': [],
|
||||
'env': {
|
||||
'test': {
|
||||
'plugins': ['dynamic-import-node'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -8,7 +8,9 @@ const CharacterSet = require('characterset');
|
|||
const prettier = require('prettier');
|
||||
|
||||
function getUnicodeRangeFromFile(file) {
|
||||
return shell.exec(`./bin/find_characters_in_font.py ${file}`, {silent: true}).stdout.replace('\n', '');
|
||||
return shell
|
||||
.exec(`./bin/find_characters_in_font.py ${file}`, { silent: true })
|
||||
.stdout.replace('\n', '');
|
||||
}
|
||||
|
||||
const fonts = {
|
||||
|
|
@ -21,56 +23,61 @@ const fonts = {
|
|||
'src/fonts/woff2/Inter-roman-subset-en_de_fr_ru_es_pt_pl_it.var.woff2': {
|
||||
inputFile: 'src/fonts/woff2/Inter-roman-reduced-weights.var.woff2',
|
||||
cssFile: 'inter-subset.scss',
|
||||
cssFontDisplay: 'block', /* we preload that font and want browser to always use it */
|
||||
cssFontDisplay:
|
||||
'block' /* we preload that font and want browser to always use it */,
|
||||
htmlFile: 'Inter-roman-subset-en_de_fr_ru_es_pt_pl_it.var.html',
|
||||
},
|
||||
}
|
||||
};
|
||||
const args = process.argv.slice(2);
|
||||
const outputFile = args[0];
|
||||
const outputCharacterSet = CharacterSet.parseUnicodeRange(args[1] || getUnicodeRangeFromFile(outputFile));
|
||||
const outputCharacterSet = CharacterSet.parseUnicodeRange(
|
||||
args[1] || getUnicodeRangeFromFile(outputFile),
|
||||
);
|
||||
|
||||
// Make sure this is ran from the root of the repos.
|
||||
try {
|
||||
function regenerateFonts() {
|
||||
// Make sure this is ran from the root of the repos.
|
||||
try {
|
||||
fs.accessSync('./bin/regenerate_font.js', fs.constants.R_OK);
|
||||
} catch (err) {
|
||||
} catch (err) {
|
||||
console.error('Please run this script from the root of the repository.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure the font specified on command line is correct.
|
||||
try {
|
||||
// Make sure the font specified on command line is correct.
|
||||
try {
|
||||
if (!fonts[outputFile].inputFile) {
|
||||
throw new Error('Unsupported font!');
|
||||
}
|
||||
fs.accessSync(outputFile, fs.constants.R_OK);
|
||||
} catch (err) {
|
||||
} catch (err) {
|
||||
console.error(oneLine`Specified file does not exist or is not one of the
|
||||
supported fonts. Supported fonts are: ${Object.keys(fonts).join(', ')}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure unicode range makes sense.
|
||||
if (!outputCharacterSet.size) {
|
||||
// Make sure unicode range makes sense.
|
||||
if (!outputCharacterSet.size) {
|
||||
console.error('Invalid unicode range specified !');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const { inputFile, cssFile, cssFontDisplay, htmlFile } = fonts[outputFile];
|
||||
const { inputFile, cssFile, cssFontDisplay, htmlFile } = fonts[outputFile];
|
||||
|
||||
console.info(`Generating font ${outputFile} from ${inputFile} ...`);
|
||||
console.info(`Generating font ${outputFile} from ${inputFile} ...`);
|
||||
|
||||
shell.exec(oneLine`pyftsubset ${inputFile}
|
||||
shell.exec(oneLine`pyftsubset ${inputFile}
|
||||
--output-file=${outputFile}
|
||||
--flavor=woff2
|
||||
--layout-features=kern
|
||||
--no-hinting
|
||||
--unicodes="${outputCharacterSet.toHexRangeString()}"`);
|
||||
|
||||
console.info('Generating css...');
|
||||
const unicodeRangeFromFile = getUnicodeRangeFromFile(outputFile);
|
||||
const characterSetFromFile = CharacterSet.parseUnicodeRange(unicodeRangeFromFile);
|
||||
console.info('Generating css...');
|
||||
const unicodeRangeFromFile = getUnicodeRangeFromFile(outputFile);
|
||||
const characterSetFromFile =
|
||||
CharacterSet.parseUnicodeRange(unicodeRangeFromFile);
|
||||
|
||||
const cssContents = `/* This file is automatically generated! See src/fonts/README.md for details */
|
||||
const cssContents = `/* This file is automatically generated! See src/fonts/README.md for details */
|
||||
@font-face {
|
||||
font-display: ${cssFontDisplay};
|
||||
font-family: Inter;
|
||||
|
|
@ -79,17 +86,16 @@ const cssContents = `/* This file is automatically generated! See src/fonts/READ
|
|||
src: url('${outputFile.replace('src/fonts/', '')}') format('woff2');
|
||||
unicode-range: ${characterSetFromFile.toHexRangeString()};
|
||||
}
|
||||
`
|
||||
const runPrettierWithConfig = (text) => {
|
||||
`;
|
||||
const runPrettierWithConfig = (text) => {
|
||||
const filePath = prettier.resolveConfigFile.sync();
|
||||
const options = prettier.resolveConfig.sync(filePath);
|
||||
return prettier.format(text, { ...options, parser: 'scss' });
|
||||
}
|
||||
fs.writeFileSync(`src/fonts/${cssFile}`, runPrettierWithConfig(cssContents));
|
||||
};
|
||||
fs.writeFileSync(`src/fonts/${cssFile}`, runPrettierWithConfig(cssContents));
|
||||
|
||||
|
||||
console.info('Generating html...');
|
||||
const htmlContents = `<meta charset="utf-8" /><style>
|
||||
console.info('Generating html...');
|
||||
const htmlContents = `<meta charset="utf-8" /><style>
|
||||
@import '${cssFile}';
|
||||
|
||||
body { font-family: Inter; font-size: 42px; margin: 1em; }
|
||||
|
|
@ -97,6 +103,17 @@ const htmlContents = `<meta charset="utf-8" /><style>
|
|||
span { display: inline-block; width: 1em; border: 1px solid gray; padding: 0.1em; min-height: 1em; margin: 0.1em; }
|
||||
</style>
|
||||
<h1>${outputFile.replace('src/fonts/woff2/', '')}</h1>
|
||||
<div>${characterSetFromFile.toArray().map((chr) => `<span title="U+${chr.toString(16)}">${String.fromCodePoint(chr)}</span>`).join('\n')}</div>
|
||||
<div>${characterSetFromFile
|
||||
.toArray()
|
||||
.map(
|
||||
(chr) =>
|
||||
`<span title="U+${chr.toString(16)}">${String.fromCodePoint(
|
||||
chr,
|
||||
)}</span>`,
|
||||
)
|
||||
.join('\n')}</div>
|
||||
`;
|
||||
fs.writeFileSync(`src/fonts/${htmlFile}`, htmlContents);
|
||||
fs.writeFileSync(`src/fonts/${htmlFile}`, htmlContents);
|
||||
}
|
||||
|
||||
regenerateFonts();
|
||||
|
|
|
|||
24
package.json
24
package.json
|
|
@ -180,7 +180,7 @@
|
|||
"compression": "1.7.4",
|
||||
"config": "3.3.7",
|
||||
"connected-react-router": "5.0.1",
|
||||
"core-js": "3.22.5",
|
||||
"core-js": "3.23.1",
|
||||
"deep-eql": "4.0.1",
|
||||
"deepcopy": "2.1.0",
|
||||
"dompurify": "2.3.8",
|
||||
|
|
@ -210,7 +210,6 @@
|
|||
"prop-types": "15.8.1",
|
||||
"qhistory": "1.1.0",
|
||||
"qs": "6.10.3",
|
||||
"raf": "3.4.1",
|
||||
"rc-tooltip": "5.1.1",
|
||||
"react": "16.14.0",
|
||||
"react-autosuggest": "10.1.0",
|
||||
|
|
@ -230,38 +229,32 @@
|
|||
"redux": "4.1.2",
|
||||
"redux-logger": "3.0.6",
|
||||
"redux-saga": "0.16.2",
|
||||
"regenerator-runtime": "0.13.9",
|
||||
"response-time": "2.3.2",
|
||||
"schema-utils": "4.0.0",
|
||||
"serialize-javascript": "6.0.0",
|
||||
"touch": "3.1.0",
|
||||
"typescript": "4.6.3",
|
||||
"ua-parser-js": "1.0.2",
|
||||
"universal-base64url": "1.1.0",
|
||||
"universal-cookie-express": "4.0.3",
|
||||
"url": "0.11.0",
|
||||
"url-loader": "4.1.1",
|
||||
"uuid": "8.3.2",
|
||||
"web-vitals": "2.1.4",
|
||||
"webpack-isomorphic-tools": "4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.13.8",
|
||||
"@babel/eslint-parser": "^7.15.8",
|
||||
"@babel/plugin-proposal-class-properties": "^7.1.0",
|
||||
"@babel/preset-env": "^7.13.8",
|
||||
"@babel/preset-flow": "^7.12.13",
|
||||
"@babel/preset-react": "^7.12.13",
|
||||
"@babel/register": "^7.13.8",
|
||||
"@babel/core": "^7.18.5",
|
||||
"@babel/eslint-parser": "^7.18.2",
|
||||
"@babel/preset-env": "^7.18.2",
|
||||
"@babel/preset-flow": "^7.17.12",
|
||||
"@babel/preset-react": "^7.17.12",
|
||||
"@babel/register": "^7.17.7",
|
||||
"@emotion/core": "^11.0.0",
|
||||
"@testing-library/dom": "^8.11.3",
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"autoprefixer": "^10.2.4",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-gettext-extractor": "^4.1.3",
|
||||
"babel-jest": "^27.5.1",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-dynamic-import-node": "^2.2.0",
|
||||
"bundle-loader": "^0.5.5",
|
||||
|
|
@ -283,6 +276,7 @@
|
|||
"eslint-config-amo": "^5.1.0",
|
||||
"eslint-plugin-amo": "^1.13.0",
|
||||
"eslint-plugin-promise": "^6.0.0",
|
||||
"eslint-plugin-react": "^7.30.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"eslint-plugin-testing-library": "^5.0.5",
|
||||
"file-loader": "^6.0.0",
|
||||
|
|
@ -304,7 +298,6 @@
|
|||
"node-fetch": "^3.1.1",
|
||||
"node-sass": "^7.0.1",
|
||||
"nodemon": "^2.0.15",
|
||||
"object.values": "^1.0.4",
|
||||
"pino-devtools": "^2.1.0",
|
||||
"pino-pretty": "^7.0.0",
|
||||
"po2json": "mikeedwards/po2json#51e2310485bbe35e9e57f2eee238185459ca0eab",
|
||||
|
|
@ -329,6 +322,7 @@
|
|||
"terser-webpack-plugin": "^4.0.0",
|
||||
"tmp": "^0.2.0",
|
||||
"tosource": "^1.0.0",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.20.0",
|
||||
"webpack-cli": "^4.0.0",
|
||||
"webpack-dev-middleware": "^5.0.0",
|
||||
|
|
|
|||
|
|
@ -353,6 +353,7 @@ export class AddonReviewListBase extends React.Component<InternalProps> {
|
|||
>
|
||||
<ul>
|
||||
{allReviews.map((review, index) => {
|
||||
/* eslint-disable react/no-array-index-key */
|
||||
return (
|
||||
<li key={String(index)}>
|
||||
<AddonReviewCard
|
||||
|
|
@ -362,6 +363,7 @@ export class AddonReviewListBase extends React.Component<InternalProps> {
|
|||
/>
|
||||
</li>
|
||||
);
|
||||
/* eslint-enable react/no-array-index-key */
|
||||
})}
|
||||
</ul>
|
||||
</CardList>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,2 @@
|
|||
import 'core-js/stable';
|
||||
import 'regenerator-runtime/runtime';
|
||||
import 'raf/polyfill';
|
||||
import 'isomorphic-fetch';
|
||||
import 'focus-visible';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { setImmediate } from 'timers';
|
||||
|
||||
import sinon from 'sinon';
|
||||
import config from 'config';
|
||||
import areIntlLocalesSupported from 'intl-locales-supported';
|
||||
import values from 'object.values';
|
||||
import Enzyme from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
|
||||
|
|
@ -18,9 +19,10 @@ import 'amo/polyfill';
|
|||
|
||||
Enzyme.configure({ adapter: new Adapter() });
|
||||
|
||||
if (!Object.values) {
|
||||
values.shim();
|
||||
}
|
||||
// setImmediate is required by Express in server tests.
|
||||
// Being a Node.js API, it is not available for `testEnvironment: 'jsdom'`.
|
||||
// FIXME: Server tests should be be ran w/ `testEnvironment: 'node'`.
|
||||
global.setImmediate = setImmediate;
|
||||
|
||||
class LocalStorageMock {
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
/* eslint-disable max-len, no-console, import/no-extraneous-dependencies */
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
import config from 'config';
|
||||
|
|
@ -17,14 +16,13 @@ const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
|
|||
webpackIsomorphicToolsConfig,
|
||||
);
|
||||
|
||||
const babelrc = fs.readFileSync('./.babelrc');
|
||||
const babelrcObject = JSON.parse(babelrc);
|
||||
const babelConfig = require('./babel.config');
|
||||
|
||||
const babelPlugins = babelrcObject.plugins || [];
|
||||
const babelPlugins = babelConfig.plugins || [];
|
||||
const babelDevPlugins = ['react-hot-loader/babel'];
|
||||
|
||||
export const babelOptions = {
|
||||
...babelrcObject,
|
||||
...babelConfig,
|
||||
plugins: localDevelopment
|
||||
? babelPlugins.concat(babelDevPlugins)
|
||||
: babelPlugins,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
/* eslint-disable no-console, import/no-extraneous-dependencies */
|
||||
import fs from 'fs';
|
||||
|
||||
import chalk from 'chalk';
|
||||
import webpack from 'webpack';
|
||||
|
||||
|
|
@ -13,9 +11,9 @@ if (process.env.NODE_ENV !== 'production') {
|
|||
process.exit(1);
|
||||
}
|
||||
|
||||
const babelrc = fs.readFileSync('./.babelrc');
|
||||
const babelrcObject = JSON.parse(babelrc);
|
||||
const babelPlugins = babelrcObject.plugins || [];
|
||||
const babelConfig = require('./babel.config');
|
||||
|
||||
const babelPlugins = babelConfig.plugins || [];
|
||||
|
||||
// Create UTC creation date in the correct format.
|
||||
const potCreationDate = new Date()
|
||||
|
|
@ -57,7 +55,7 @@ const babelL10nPlugins = [
|
|||
];
|
||||
|
||||
const babelOptions = {
|
||||
...babelrcObject,
|
||||
...babelConfig,
|
||||
plugins: babelPlugins.concat(babelL10nPlugins),
|
||||
};
|
||||
|
||||
|
|
|
|||
1650
yarn.lock
1650
yarn.lock
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче