diff --git a/packages/app/package.json b/packages/app/package.json index d4e0644f3a..bcc9e63956 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -74,7 +74,6 @@ "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-hot-loader": "^4.13.0", "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", "react-use": "^17.2.4", diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index a0390d96e8..f5152ffe2e 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -85,7 +85,6 @@ import { import { AdvancedSettings } from './components/advancedSettings'; import AlarmIcon from '@material-ui/icons/Alarm'; import React from 'react'; -import { hot } from 'react-hot-loader/root'; import { Navigate, Route } from 'react-router'; import { apis } from './apis'; import { entityPage } from './components/catalog/EntityPage'; @@ -276,4 +275,4 @@ const App = () => ( ); -export default hot(App); +export default App; diff --git a/packages/cli/config/jest.js b/packages/cli/config/jest.js index 21f4462eab..da7a929824 100644 --- a/packages/cli/config/jest.js +++ b/packages/cli/config/jest.js @@ -131,11 +131,12 @@ async function getProjectConfig(targetPath, displayName) { transform: { '\\.(js|jsx|ts|tsx|mjs|cjs)$': [ - require.resolve('./jestSucraseTransform.js'), + '@swc/jest', { enableSourceMaps: envOptions.enableSourceMaps || envOptions.nextTests, }, ], + // '^.+\\.(t|j)sx?$': '@swc/jest', '\\.(bmp|gif|jpg|jpeg|png|frag|xml|svg|eot|woff|woff2|ttf)$': require.resolve('./jestFileTransform.js'), '\\.(yaml)$': require.resolve('jest-transform-yaml'), diff --git a/packages/cli/package.json b/packages/cli/package.json index dc18939fef..a1038ef954 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -52,6 +52,7 @@ "@sucrase/jest-plugin": "^2.1.1", "@sucrase/webpack-loader": "^2.0.0", "@swc/core": "^1.2.160", + "@swc/jest": "^0.2.20", "@svgr/plugin-jsx": "6.3.x", "@svgr/plugin-svgo": "6.3.x", "@svgr/rollup": "6.3.x", @@ -116,7 +117,6 @@ "run-script-webpack-plugin": "^0.1.0", "semver": "^7.3.2", "style-loader": "^3.3.1", - "sucrase": "^3.20.2", "swc-loader": "^0.1.15", "tar": "^6.1.2", "terser-webpack-plugin": "^5.1.3", diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts index cb85398004..0a8f8e988b 100644 --- a/packages/cli/src/lib/bundler/config.ts +++ b/packages/cli/src/lib/bundler/config.ts @@ -150,6 +150,18 @@ export async function createConfig( console.warn(`WARNING: Failed to read react-dom version, ${error}`); } + const resolvePlugins: webpack.ResolvePluginInstance[] = [ + new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs), + ]; + + if (!isDev) { + resolvePlugins.push( + new ModuleScopePlugin( + [paths.targetSrc, paths.targetDev], + [paths.targetPackageJson], + ), + ); + } return { mode: isDev ? 'development' : 'production', profile: false, @@ -181,14 +193,7 @@ export async function createConfig( http: false, util: require.resolve('util/'), }, - plugins: [ - new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs), - !isDev && - new ModuleScopePlugin( - [paths.targetSrc, paths.targetDev], - [paths.targetPackageJson], - ), - ].filter(Boolean), + plugins: resolvePlugins, alias: resolveAliases, }, module: { @@ -237,6 +242,19 @@ export async function createBackendConfig( runScriptNodeArgs.push('--inspect-brk'); } + const resolvePlugins: webpack.ResolvePluginInstance[] = [ + new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs), + ]; + + if (!isDev) { + resolvePlugins.push( + new ModuleScopePlugin( + [paths.targetSrc, paths.targetDev], + [paths.targetPackageJson], + ), + ); + } + return { mode: isDev ? 'development' : 'production', profile: false, @@ -276,14 +294,7 @@ export async function createBackendConfig( extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx', '.json'], mainFields: ['main'], modules: [paths.rootNodeModules, ...moduleDirs], - plugins: [ - new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs), - !isDev && - new ModuleScopePlugin( - [paths.targetSrc, paths.targetDev], - [paths.targetPackageJson], - ), - ].filter(Boolean), + plugins: resolvePlugins, }, module: { rules: loaders, diff --git a/packages/cli/src/lib/bundler/transforms.ts b/packages/cli/src/lib/bundler/transforms.ts index f7093c97fe..cb151e67c3 100644 --- a/packages/cli/src/lib/bundler/transforms.ts +++ b/packages/cli/src/lib/bundler/transforms.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import webpack, { ModuleOptions, WebpackPluginInstance } from 'webpack'; +import { ModuleOptions, WebpackPluginInstance } from 'webpack'; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import { svgrTemplate } from '../svgrTemplate'; import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin'; @@ -110,11 +110,10 @@ export const transforms = (options: TransformOptions): Transforms => { test: [/\.icon\.svg$/], use: [ { - loader: require.resolve('@sucrase/webpack-loader'), + loader: require.resolve('esbuild-loader'), options: { - transforms: ['jsx'], - disableESTransforms: true, - production: !isDev, + loader: 'jsx', + target: 'es2015', }, }, { @@ -180,8 +179,12 @@ export const transforms = (options: TransformOptions): Transforms => { const plugins = new Array(); if (isDev) { - plugins.push(new ReactRefreshPlugin()); - // plugins.push(new webpack.HotModuleReplacementPlugin()); + plugins.push( + new ReactRefreshPlugin({ + esModule: true, + overlay: { sockProtocol: 'ws' }, + }), + ); } else { plugins.push( new MiniCssExtractPlugin({ diff --git a/yarn.lock b/yarn.lock index f997da81e1..992d49ca5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3354,6 +3354,13 @@ slash "^3.0.0" strip-ansi "^6.0.0" +"@jest/create-cache-key-function@^27.4.2": + version "27.5.1" + resolved "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz#7448fae15602ea95c828f5eceed35c202a820b31" + integrity sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ== + dependencies: + "@jest/types" "^27.5.1" + "@jest/environment@^27.5.1": version "27.5.1" resolved "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz#d7425820511fe7158abbecc010140c3fd3be9c74" @@ -6336,6 +6343,13 @@ "@swc/core-win32-ia32-msvc" "1.2.160" "@swc/core-win32-x64-msvc" "1.2.160" +"@swc/jest@^0.2.20": + version "0.2.20" + resolved "https://registry.npmjs.org/@swc/jest/-/jest-0.2.20.tgz#2bddb4348fb730296b86cdcd96748be131b11395" + integrity sha512-5qSUBYY1wyIMn7p0Vl9qqV4hMI69oJwZCIPUpBsTFWN2wlwn6RDugzdgCn+bLXVYh+Cxi8bJcZ1uumDgsoL+FA== + dependencies: + "@jest/create-cache-key-function" "^27.4.2" + "@szmarczak/http-timer@^4.0.5": version "4.0.5" resolved "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.5.tgz#bfbd50211e9dfa51ba07da58a14cdfd333205152" @@ -13224,7 +13238,6 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3: prop-types "^15.7.2" react "^17.0.2" react-dom "^17.0.2" - react-hot-loader "^4.13.0" react-router "6.0.0-beta.0" react-router-dom "6.0.0-beta.0" react-use "^17.2.4" @@ -21011,14 +21024,14 @@ pino@^5.12.2: quick-format-unescaped "^3.0.3" sonic-boom "^0.7.5" -pirates@^4.0.0, pirates@^4.0.1: +pirates@^4.0.0: version "4.0.1" resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87" integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA== dependencies: node-modules-regexp "^1.0.0" -pirates@^4.0.4: +pirates@^4.0.1, pirates@^4.0.4: version "4.0.5" resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b" integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ== @@ -24596,7 +24609,7 @@ subscriptions-transport-ws@^0.11.0: symbol-observable "^1.0.4" ws "^5.2.0 || ^6.0.0 || ^7.0.0" -sucrase@^3.18.0, sucrase@^3.20.2: +sucrase@^3.18.0: version "3.25.0" resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.25.0.tgz#6dffa34e614b3347877507a4380cc4f022b7b7aa" integrity sha512-WxTtwEYXSmZArPGStGBicyRsg5TBEFhT5b7N+tF+zauImP0Acy+CoUK0/byJ8JNPK/5lbpWIVuFagI4+0l85QQ== @@ -24982,7 +24995,7 @@ textextensions@^5.12.0, textextensions@^5.13.0: thenify-all@^1.0.0: version "1.6.0" resolved "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726" - integrity sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY= + integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA== dependencies: thenify ">= 3.1.0 < 4" @@ -25277,9 +25290,9 @@ ts-easing@^0.2.0: integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ== ts-interface-checker@^0.1.9: - version "0.1.10" - resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.10.tgz#b68a49e37e90a05797e590f08494dd528bf383cf" - integrity sha512-UJYuKET7ez7ry0CnvfY6fPIUIZDw+UI3qvTUQeS2MyI4TgEeWAUBqy185LeaHcdJ9zG2dgFpPJU/AecXU0Afug== + version "0.1.13" + resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699" + integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== ts-log@^2.2.3: version "2.2.3" @@ -26187,7 +26200,7 @@ walker@^1.0.7: dependencies: makeerror "1.0.x" -watchpack@^2.0.0-beta.10, watchpack@^2.4.0: +watchpack@^2.0.0-beta.10, watchpack@^2.3.1: version "2.4.0" resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d" integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==