feat: 🎸 Migrated from es5, es11 to es9 and es13 versions (#237)

* feat: 🎸 Migrated from es5, es11 to es9 and es13 versionss

.eslintrc.js

@@ -62,7 +62,6 @@ module.exports = {
   parser: '@babel/eslint-parser',
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 6,
     requireConfigFile: false,
     babelOptions: {
       presets: ['@babel/preset-react'],
@@ -71,7 +70,7 @@ module.exports = {
   env: {
     browser: true,
     node: true,
-    es6: true,
+    es2022: true,
   },
   globals: {
     $Debug: true,

createWebpackConfig.js

@@ -12,7 +12,7 @@ function createWebpackConfig(callback) {
   };
 
   const config = {
-    target: ['web', 'es11'],
+    target: ['web', 'es2022'],
     mode: ctx.isProduction ? 'production' : 'development',
     stats: 'minimal',
     output: {

package.json

@@ -69,8 +69,8 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "^8.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
     "autocannon": "^7.9.0",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.5",
@@ -79,7 +79,7 @@
     "chokidar": "^3.5.3",
     "commitizen": "^4.2.4",
     "copy-webpack-plugin": "^11.0.0",
-    "core-js": "^3.21.1",
+    "core-js": "^3.24.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "del": "^6.1.1",
@@ -110,7 +110,7 @@
     "postcss-loader": "^7.0.0",
     "postcss-preset-env": "^7.4.3",
     "prettier": "^2.6.0",
-    "rollup": "^2.75.3",
+    "rollup": "^2.77.1",
     "rollup-plugin-jscc": "^2.0.0",
     "style-loader": "^3.3.1",
     "stylelint": "^14.8.5",
@@ -119,10 +119,10 @@
     "stylelint-declaration-block-no-ignored-properties": "2.5.0",
     "stylelint-order": "5.0.0",
     "to-mock": "1.6.2",
-    "turbo": "^1.2.14",
+    "turbo": "^1.3.4",
     "typescript": "^4.7.2",
     "verdaccio": "^5.10.3",
-    "webpack": "^5.72.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.9.2",
     "yargs": "^17.5.0"
   },

packages/cli/package.json

@@ -42,18 +42,18 @@
     "cli-progress": "^3.11.1",
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "core-js": "3.22.7",
+    "core-js": "3.24.0",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "ejs": "^3.1.7",
     "express": "^4.18.1",
     "express-static-gzip": "^2.1.7",
     "globby": "11.1.0",
     "kill-port": "^1.6.1",
-    "less": "4.1.2",
+    "less": "^4.1.3",
     "less-loader": "^11.0.0",
     "messageformat": "2.3.0",
-    "mini-css-extract-plugin": "2.6.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "nodemon": "^2.0.16",
     "open-editor": "3.0.0",
     "postcss": "^8.4.14",
@@ -62,22 +62,21 @@
     "postcss-preset-env": "^7.6.0",
     "pretty-bytes": "5.6.0",
     "pretty-ms": "7.0.1",
-    "react-refresh": "^0.13.0",
+    "react-refresh": "^0.14.0",
     "regenerator-runtime": "0.13.9",
     "schema-utils": "4.0.0",
     "swc-loader": "^0.2.1",
-    "webpack": "^5.72.1",
+    "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-middleware": "^5.3.3",
-    "whatwg-fetch": "^3.6.2",
     "yargs": "^17.5.1"
   },
   "devDependencies": {
     "@types/cli-progress": "^3.11.0",
     "@types/ejs": "^3.1.0",
     "@types/express": "4.17.13",
-    "@types/node": "^17.0.36",
-    "@types/nodemon": "1.19.1",
+    "@types/node": "^18.6.1",
+    "@types/nodemon": "^1.19.2",
     "@types/webpack-bundle-analyzer": "4.4.1",
     "@types/webpack-env": "^1.17.0",
     "@types/webpack-hot-middleware": "2.25.6",

packages/cli/src/commands/dev.ts

@@ -110,9 +110,7 @@ const dev: HandlerFn = async args => {
 
     logger.info(
       `Running webpack watch compiler${
-        args.legacy
-          ? ` ${chalk.black.bgCyan('in legacy (es5 compatible) mode')}`
-          : ''
+        args.legacy ? ` ${chalk.black.bgCyan('in legacy mode')}` : ''
       }...`
     );
 
@@ -159,7 +157,7 @@ export const builder: CommandBuilder = {
     default: true,
   },
   legacy: {
-    desc: 'Runs application in legacy (es5-compatible) mode',
+    desc: 'Runs application in legacy mode',
     type: 'boolean',
     default: false,
   },

packages/cli/src/webpack/config.ts

@@ -26,6 +26,7 @@ import {
   createPolyfillEntry,
   extractLanguages,
   createDevServerConfig,
+  getCurrentCoreJsVersion,
 } from './utils';
 
 /**
@@ -51,19 +52,39 @@ export default async (
   const devServerConfig = createDevServerConfig({ imaConfig, ctx });
 
   // Define browserslist targets for current context
-  let targets: 'defaults' | Record<string, string> = 'defaults';
+  let targets: Record<string, string> | string[];
+  const coreJsVersion = await getCurrentCoreJsVersion();
 
   if (isEsVersion) {
-    targets = {
-      chrome: '80',
-      edge: '80',
-      firefox: '80',
-      opera: '67',
-      safari: '14',
-      ios: '14',
-    };
+    // es2022 targets (taken from 'browserslist-generator')
+    targets = [
+      'and_chr >= 91',
+      'chrome >= 91',
+      'and_ff >= 90',
+      'android >= 103',
+      'edge >= 91',
+      'samsung >= 16.0',
+      'safari >= 15',
+      'ios_saf >= 15.1',
+      'opera >= 77',
+      'firefox >= 90',
+    ];
   } else if (isServer) {
     targets = { node: '18' };
+  } else {
+    // es2018 targets
+    targets = [
+      'and_chr >= 63',
+      'chrome >= 63',
+      'and_ff >= 58',
+      'android >= 103',
+      'edge >= 79',
+      'samsung >= 8.2',
+      'safari >= 11.1',
+      'ios_saf >= 11.4',
+      'opera >= 50',
+      'firefox >= 58',
+    ];
   }
 
   // Set correct devtool source maps config
@@ -112,9 +133,10 @@ export default async (
                 [
                   'postcss-preset-env',
                   {
-                    browsers: 'defaults',
+                    browsers: '>0.5%, not dead, not op_mini all, not ie 11',
                     autoprefixer: {
                       flexbox: 'no-2009',
+                      grid: 'autoplace',
                     },
                     stage: 3,
                     features: {
@@ -151,8 +173,8 @@ export default async (
     target: isServer
       ? 'node18'
       : isEsVersion
-      ? ['web', 'es11']
-      : ['web', 'es5'],
+      ? ['web', 'es2022']
+      : ['web', 'es2018'],
     mode: isDevEnv ? 'development' : 'production',
     devtool: useHMR
       ? 'cheap-module-source-map' // Needed for proper source maps parsing in error-overlay
@@ -164,8 +186,6 @@ export default async (
           }
         : {
             [name]: [
-              // Inject fetch polyfill to es5 bundle
-              !isEsVersion && require.resolve('whatwg-fetch'),
               // We have to use @gatsbyjs version, since the original package containing webpack 5 fix is not yet released
               useHMR &&
                 `@gatsbyjs/webpack-hot-middleware/client?${new URLSearchParams({
@@ -245,7 +265,7 @@ export default async (
         new TerserPlugin({
           minify: TerserPlugin.swcMinify,
           terserOptions: {
-            ecma: isServer || isEsVersion ? 2020 : 5,
+            ecma: isServer || isEsVersion ? 2020 : 2018,
             mangle: {
               // Added for profiling in devtools
               keep_classnames: ctx.profile || isDevEnv,
@@ -370,7 +390,7 @@ export default async (
                     env: {
                       targets,
                       mode: 'usage',
-                      coreJs: '3.22.7',
+                      coreJs: coreJsVersion,
                       bugfixes: true,
                     },
                     module: {
@@ -401,7 +421,7 @@ export default async (
                   env: {
                     targets,
                     mode: 'usage',
-                    coreJs: '3.22.7',
+                    coreJs: coreJsVersion,
                     shippedProposals: true,
                     bugfixes: true,
                   },

packages/cli/src/webpack/plugins/GenerateRunnerPlugin/index.ts

@@ -101,7 +101,9 @@ class GenerateRunnerPlugin {
     ) {
       const generatedRunner = this._runnerTemplate({
         esRuntime: this._addSlashes(esRuntimeCode),
-        runtime: runtimeCode ?? '// runtime not generated',
+        runtime: runtimeCode
+          ? this._addSlashes(runtimeCode)
+          : '// runtime not generated',
       });
 
       // Clean storage

packages/cli/src/webpack/utils.ts

@@ -360,7 +360,7 @@ async function createWebpackConfig(
       processCss: false,
       ...args,
     },
-    // Process es5 in build and legacy contexts
+    // Process non-es version in build and legacy contexts
     (args.command === 'build' || args.legacy) && {
       name: 'client',
       isServer: false,
@@ -420,6 +420,23 @@ async function createWebpackConfig(
   });
 }
 
+/**
+ * Extracts major.minor version string of currently resolved
+ * core-js from node_modules.
+ */
+async function getCurrentCoreJsVersion() {
+  return JSON.parse(
+    (
+      await fs.promises.readFile(
+        path.resolve(require.resolve('core-js'), '../package.json')
+      )
+    ).toString()
+  )
+    .version.split('.')
+    .slice(0, 2)
+    .join('.');
+}
+
 export {
   resolveEnvironment,
   cleanup,
@@ -431,5 +448,6 @@ export {
   runImaPluginsHook,
   extractLanguages,
   createPolyfillEntry,
+  getCurrentCoreJsVersion,
   IMA_CONF_FILENAME,
 };

packages/cli/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "lib": [
-      "ES2020"
+      "ES2022"
     ],
     "resolveJsonModule": true,
     "outDir": "./dist",