chore: migrate from babel to esbuild loader (#1848)

* chore: migrate from babel to esbuild loader

* fix cypress tests
This commit is contained in:
Oprysk Vyacheslav 2022-01-25 15:50:28 +02:00 committed by GitHub
parent b74dcde42b
commit 35418b1569
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 862 additions and 581 deletions

View File

@ -1,46 +1,5 @@
import * as webpack from 'webpack';
export function getBabelLoader({useBuiltIns, hot}: {useBuiltIns: boolean, hot?: boolean}) {
return {
loader: 'babel-loader',
options: {
babelrc: false,
sourceType: 'unambiguous',
presets: [
[
'@babel/preset-env',
{
useBuiltIns: useBuiltIns ? 'usage' : false,
corejs: 3,
exclude: ['transform-typeof-symbol'],
targets: 'defaults',
modules: false,
},
],
['@babel/preset-react', { development: false, runtime: 'classic' }],
'@babel/preset-typescript',
],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: false }],
[
'@babel/plugin-transform-runtime',
{
corejs: false,
helpers: true,
// eslint-disable-next-line import/no-internal-modules
version: require('@babel/runtime/package.json').version,
regenerator: true,
},
],
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator',
hot ? 'react-hot-loader/babel' : undefined,
].filter(Boolean)
},
};
}
export function webpackIgnore(regexp) {
return new webpack.NormalModuleReplacementPlugin(regexp, require.resolve('lodash/noop.js'));
return new webpack.NormalModuleReplacementPlugin(regexp, require.resolve('lodash.noop'));
}

2
custom.d.ts vendored
View File

@ -23,3 +23,5 @@ declare var reactHotLoaderGlobal: any;
interface Element {
scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
}
type GenericObject = Record<string, any>;

View File

@ -3,7 +3,7 @@ import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
import { resolve } from 'path';
import * as webpack from 'webpack';
import { getBabelLoader, webpackIgnore } from '../config/webpack-utils';
import { webpackIgnore } from '../config/webpack-utils';
const VERSION = JSON.stringify(require('../package.json').version);
const REVISION = JSON.stringify(
@ -46,6 +46,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
extensions: ['.ts', '.tsx', '.js', '.json'],
fallback: {
path: require.resolve('path-browserify'),
buffer: require.resolve('buffer'),
http: false,
fs: false,
os: false,
@ -72,33 +73,28 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
rules: [
{ test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.svg$/, /\.ttf$/], use: 'null-loader' },
{
test: /\.tsx?$/,
use: [getBabelLoader({ useBuiltIns: true, hot: true })],
exclude: {
and: [/node_modules/],
not: {
or: [
/swagger2openapi/,
/reftools/,
/openapi-sampler/,
/mobx/,
/oas-resolver/,
/oas-kit-common/,
/oas-schema-walker/,
/\@redocly\/openapi-core/,
/colorette/,
],
},
test: /\.(tsx?|[cm]?js)$/,
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015',
tsconfigRaw: require('../tsconfig.json'),
},
exclude: [/node_modules/],
},
{
test: /\.css$/,
use: {
loader: 'css-loader',
use: [
'style-loader',
'css-loader',
{
loader: 'esbuild-loader',
options: {
sourceMap: true,
loader: 'css',
minify: true,
},
},
],
},
],
},
@ -119,6 +115,9 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
? 'benchmark/index.html'
: 'demo/index.html',
}),
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new ForkTsCheckerWebpackPlugin({ logger: { infrastructure: 'silent', issues: 'console' } }),
webpackIgnore(/js-yaml\/dumper\.js$/),
webpackIgnore(/json-schema-ref-parser\/lib\/dereference\.js/),

1201
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -61,18 +61,6 @@
"pre-commit": "pretty-quick --staged && npm run lint"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-decorators": "^7.14.2",
"@babel/plugin-proposal-object-rest-spread": "^7.14.4",
"@babel/plugin-syntax-decorators": "^7.12.13",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.10.4",
"@babel/plugin-syntax-typescript": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.4",
"@babel/preset-react": "^7.13.13",
"@babel/preset-typescript": "^7.13.0",
"@cypress/webpack-preprocessor": "^5.9.0",
"@hot-loader/react-dom": "^17.0.1",
"@size-limit/preset-app": "^7.0.4",
@ -82,7 +70,6 @@
"@types/enzyme-to-json": "^1.5.3",
"@types/jest": "^26.0.23",
"@types/json-pointer": "^1.0.30",
"@types/lodash": "^4.14.170",
"@types/lunr": "^2.3.3",
"@types/mark.js": "^8.11.5",
"@types/marked": "^4.0.1",
@ -100,8 +87,6 @@
"@typescript-eslint/eslint-plugin": "^4.26.0",
"@typescript-eslint/parser": "^4.26.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"babel-loader": "^8.2.2",
"babel-plugin-styled-components": "^1.12.0",
"beautify-benchmark": "^0.2.4",
"conventional-changelog-cli": "^2.0.34",
"copy-webpack-plugin": "^9.0.0",
@ -111,6 +96,7 @@
"cypress": "^7.4.0",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.2",
"esbuild-loader": "^2.18.0",
"eslint": "^7.27.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-react": "^7.25.1",
@ -121,7 +107,7 @@
"jest": "^27.0.3",
"js-yaml": "^4.1.0",
"license-checker": "^25.0.1",
"lodash": "^4.17.21",
"lodash.noop": "^3.0.1",
"mobx": "^6.3.2",
"prettier": "^2.3.2",
"pretty-quick": "^3.0.0",
@ -135,7 +121,7 @@
"style-loader": "^2.0.0",
"styled-components": "^5.3.0",
"ts-jest": "^27.0.2",
"ts-loader": "^8.0.1",
"ts-loader": "^9.2.6",
"ts-node": "^10.0.0",
"typescript": "~4.1.0",
"unfetch": "^4.2.0",
@ -154,7 +140,6 @@
"styled-components": "^4.1.1 || ^5.1.1"
},
"dependencies": {
"@babel/runtime": "^7.14.0",
"@redocly/openapi-core": "^1.0.0-beta.54",
"@redocly/react-dropdown-aria": "^2.0.11",
"classnames": "^2.3.1",
@ -166,7 +151,7 @@
"mark.js": "^8.11.1",
"marked": "^4.0.10",
"mobx-react": "^7.2.0",
"openapi-sampler": "^1.0.1",
"openapi-sampler": "^1.1.1",
"path-browserify": "^1.0.1",
"perfect-scrollbar": "^1.5.1",
"polished": "^4.1.3",

View File

@ -0,0 +1,50 @@
import { objectHas, objectSet } from '../object';
describe('object utils', () => {
let obj;
beforeEach(() => {
obj = {
a: {
b: {
c: {
d: 'd',
},
c1: 'c1',
},
b1: 'b1',
},
a1: 'a1',
};
});
describe('objectHas function', () => {
it('should check if the obj has path as string', () => {
expect(objectHas(obj, 'a.b.c')).toBeTruthy();
expect(objectHas(obj, 'a.b.c1')).toBeTruthy();
expect(objectHas(obj, 'a.b.c.d')).toBeTruthy();
expect(objectHas(obj, 'a.b.c1.d')).toBeFalsy();
});
it('should check if the obj has path as array', () => {
expect(objectHas(obj, ['a', 'b', 'c'])).toBeTruthy();
expect(objectHas(obj, ['a', 'b', 'c1'])).toBeTruthy();
expect(objectHas(obj, ['a', 'b', 'c', 'd'])).toBeTruthy();
expect(objectHas(obj, ['a', 'b', 'c1', 'd'])).toBeFalsy();
});
});
describe('objectSet function', () => {
it('should set value by path as string', () => {
expect(objectHas(obj, 'a.b.c1.d')).toBeFalsy();
objectSet(obj, 'a.b.c1', { d: 'd' });
expect(objectHas(obj, 'a.b.c1.d')).toBeTruthy();
});
it('should set value by path as array', () => {
expect(objectHas(obj, ['a', 'b', 'c1', 'd'])).toBeFalsy();
objectSet(obj, ['a', 'b', 'c1'], { d: 'd' });
expect(objectHas(obj, ['a', 'b', 'c1', 'd'])).toBeTruthy();
});
});
});

28
src/utils/object.ts Normal file
View File

@ -0,0 +1,28 @@
export function objectHas(object: GenericObject, path: string | Array<string>): boolean {
let _path = <Array<string>>path;
if (typeof path === 'string') {
_path = path.split('.');
}
return _path.every((key: string) => {
if (typeof object != 'object' || object === null || !(key in object)) return false;
object = object[key];
return true;
});
}
export function objectSet(object: GenericObject, path: string | Array<string>, value: any): void {
let _path = <Array<string>>path;
if (typeof path === 'string') {
_path = path.split('.');
}
const limit = _path.length - 1;
for (let i = 0; i < limit; ++i) {
const key = _path[i];
object = object[key] ?? (object[key] = {});
}
const key = _path[limit];
object[key] = value;
}

View File

@ -1,6 +1,4 @@
/* tslint:disable:no-implicit-dependencies */
import { has, set } from 'lodash';
import { objectHas, objectSet } from './object';
function traverseComponent(root, fn) {
if (!root) {
@ -20,8 +18,8 @@ export function filterPropsDeep<T extends object>(component: T, paths: string[])
traverseComponent(component, comp => {
if (comp.props) {
for (const path of paths) {
if (has(comp.props, path)) {
set(comp.props, path, '<<<filtered>>>');
if (objectHas(comp.props, path)) {
objectSet(comp.props, path, '<<<filtered>>>');
}
}
}

View File

@ -2,7 +2,7 @@
import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
import * as webpack from 'webpack';
import * as path from 'path';
import { getBabelLoader, webpackIgnore } from './config/webpack-utils';
import { webpackIgnore } from './config/webpack-utils';
const nodeExternals = require('webpack-node-externals')({
// bundle in modules that need transpiling + non-js (e.g. css)
@ -50,6 +50,7 @@ export default (env: { standalone?: boolean; browser?: boolean } = {}) => ({
extensions: ['.ts', '.tsx', '.js', '.mjs', '.json'],
fallback: {
path: require.resolve('path-browserify'),
buffer: require.resolve('buffer'),
http: false,
fs: path.resolve(__dirname, 'src/empty.js'),
os: path.resolve(__dirname, 'src/empty.js'),
@ -78,32 +79,27 @@ export default (env: { standalone?: boolean; browser?: boolean } = {}) => ({
rules: [
{
test: /\.(tsx?|[cm]?js)$/,
use: [getBabelLoader({ useBuiltIns: !!env.standalone })],
exclude: {
and: [/node_modules/],
not: {
or: [
/swagger2openapi/,
/reftools/,
/openapi-sampler/,
/mobx/,
/oas-resolver/,
/oas-kit-common/,
/oas-schema-walker/,
/\@redocly\/openapi-core/,
/colorette/,
],
},
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015',
tsconfigRaw: require('./tsconfig.json'),
},
exclude: [/node_modules/],
},
{
test: /\.css$/,
use: {
loader: 'css-loader',
use: [
'style-loader',
'css-loader',
{
loader: 'esbuild-loader',
options: {
sourceMap: false,
loader: 'css',
minify: true,
},
},
],
},
],
},
@ -117,6 +113,9 @@ export default (env: { standalone?: boolean; browser?: boolean } = {}) => ({
}),
new ForkTsCheckerWebpackPlugin({ logger: { infrastructure: 'silent', issues: 'console' } }),
new webpack.BannerPlugin(BANNER),
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
webpackIgnore(/js-yaml\/dumper\.js$/),
env.standalone ? webpackIgnore(/^\.\/SearchWorker\.worker$/) : undefined,
].filter(Boolean),