Merge pull request #224 from seznam/delete-babel

feat: 🎸 Removed babel support (swc is now only supported)
seznam · Jul 26, 2022 · 2ee814e · 2ee814e
2 parents cff2a4b + 82bdb98
commit 2ee814e
Show file tree

Hide file tree

Showing 12 changed files with 9,659 additions and 32,157 deletions.
diff --git a/createWebpackConfig.js b/createWebpackConfig.js
@@ -33,7 +33,14 @@ function createWebpackConfig(callback) {
           loader: require.resolve('babel-loader'),
           options: {
             sourceType: 'unambiguous',
-            targets: { chrome: '80', safari: '14' }, // es11
+            targets: {
+              chrome: '80',
+              edge: '80',
+              firefox: '80',
+              opera: '67',
+              safari: '14',
+              ios: '14',
+            }, // es11
             babelrc: false,
             configFile: false,
             cacheDirectory: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@commitlint/cli": "^17.0.1",
     "@commitlint/config-conventional": "^17.0.0",
-    "@fortawesome/fontawesome-free": "5.12.1",
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
@@ -73,6 +73,7 @@
     "@typescript-eslint/parser": "^5.27.0",
     "autocannon": "^7.9.0",
     "babel-jest": "^27.5.1",
+    "babel-loader": "^8.2.5",
     "bulma": "0.8.0",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
@@ -86,21 +87,21 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.4.6",
-    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.0",
     "fs-extra": "^10.0.1",
     "git-cz": "^4.9.0",
     "gulp": "4.0.2",
     "gulp-change": "1.0.2",
     "gulp-rename": "2.0.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "jest": "^26.6.3",
-    "jsdoc-to-markdown": "5.0.3",
-    "jsdom": "^19.0.0",
+    "jsdoc-to-markdown": "^7.1.1",
+    "jsdom": "^20.0.0",
     "lerna": "^5.0.0",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",
-    "lint-staged": "^12.4.3",
+    "lint-staged": "^13.0.3",
     "lunr": "^2.3.9",
     "map-stream": "0.0.7",
     "mini-css-extract-plugin": "^2.6.0",
@@ -114,7 +115,7 @@
     "style-loader": "^3.3.1",
     "stylelint": "^14.8.5",
     "stylelint-config-css-modules": "^4.1.0",
-    "stylelint-config-standard": "^25.0.0",
+    "stylelint-config-standard": "^26.0.0",
     "stylelint-declaration-block-no-ignored-properties": "2.5.0",
     "stylelint-order": "5.0.0",
     "to-mock": "1.6.2",

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -29,17 +29,13 @@
     "lint": "eslint './**/*.{js,jsx,ts,tsx}'"
   },
   "dependencies": {
-    "@babel/core": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
     "@gatsbyjs/webpack-hot-middleware": "2.25.2",
     "@ima/dev-utils": "^18.0.0-rc.3",
     "@ima/error-overlay": "^18.0.0-rc.3",
     "@ima/hmr-client": "^18.0.0-rc.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@swc/core": "^1.2.196",
     "ajv": "8.11.0",
-    "babel-loader": "^8.2.5",
     "better-opn": "3.0.2",
     "bundle-stats-webpack-plugin": "^3.3.8",
     "chalk": "4.1.2",

diff --git a/packages/cli/src/types.ts b/packages/cli/src/types.ts
@@ -104,15 +104,6 @@ export type ImaConfig = {
     imaConfig: ImaConfig
   ) => Promise<Configuration>;
 
-  /**
-   * Function which receives babel-loader config and current context, which can be used for
-   * additional customization or returning completely different babel config.
-   */
-  babel: (
-    config: Record<string, unknown>,
-    ctx: ImaConfigurationContext
-  ) => Promise<Record<string, unknown>>;
-
   /**
    * Function which receives default app swc-loader config and current context,
    * this can be used for additional customization or returning completely different config.
@@ -165,7 +156,7 @@ export type ImaConfig = {
   sourceMap?: boolean | string;
 
   /**
-   * Set custom jsxRuntime for @babel/preset-react, the default is 'automatic'.
+   * Set custom jsxRuntime, the default is 'automatic'.
    */
   jsxRuntime?: 'classic' | 'automatic';
 
@@ -194,7 +185,6 @@ export type ImaConfig = {
    * Some of these may find a way to default configuration in future versions of IMA.js.
    */
   experiments?: {
-    swc?: boolean; // Enables swc instead of babel (true by default)
     css?: boolean; // Enables webpack native CSS support
   };
 };

diff --git a/packages/cli/src/webpack/config.ts b/packages/cli/src/webpack/config.ts
@@ -350,169 +350,84 @@ export default async (
                 },
               ],
             },
-            ...(imaConfig.experiments?.swc
-              ? [
-                  /**
-                   * Run node_modules and app JS through swc
-                   */
-                  {
-                    test: /\.(js|mjs|cjs)$/,
-                    exclude: [
-                      /\bcore-js\b/,
-                      /\bwebpack\/buildin\b/,
-                      /\bcss-loader\b/,
-                      /\bmini-css-extract-plugin\b/,
-                      /\breact-dom-server\b/,
-                      appDir,
-                    ],
-                    use: [
-                      !isServer && {
-                        loader: require.resolve('swc-loader'),
-                        options: {
-                          env: {
-                            targets,
-                            mode: 'usage',
-                            coreJs: '3.22.7',
-                            bugfixes: true,
-                          },
-                          module: {
-                            type: 'commonjs',
-                          },
-                          jsc: {
-                            parser: {
-                              syntax: 'ecmascript',
-                            },
-                          },
-                          sourceMaps: useSourceMaps,
-                          inlineSourcesContent: useSourceMaps,
-                        },
-                      },
-                      {
-                        // This injects new plugin loader interface into legacy plugins
-                        loader: 'ima-legacy-plugin-loader',
+            /**
+             * Run node_modules and app JS through swc
+             */
+            {
+              test: /\.(js|mjs|cjs)$/,
+              exclude: [
+                /\bcore-js\b/,
+                /\bwebpack\/buildin\b/,
+                /\bcss-loader\b/,
+                /\bmini-css-extract-plugin\b/,
+                /\breact-dom-server\b/,
+                appDir,
+              ],
+              use: [
+                !isServer && {
+                  loader: require.resolve('swc-loader'),
+                  options: {
+                    env: {
+                      targets,
+                      mode: 'usage',
+                      coreJs: '3.22.7',
+                      bugfixes: true,
+                    },
+                    module: {
+                      type: 'commonjs',
+                    },
+                    jsc: {
+                      parser: {
+                        syntax: 'ecmascript',
                       },
-                    ].filter(Boolean),
+                    },
+                    sourceMaps: useSourceMaps,
+                    inlineSourcesContent: useSourceMaps,
                   },
-                  {
-                    test: /\.(js|mjs|jsx|cjs)$/,
-                    include: appDir,
-                    exclude: /node_modules/,
-                    loader: require.resolve('swc-loader'),
-                    options: await imaConfig.swc(
-                      {
-                        env: {
-                          targets,
-                          mode: 'usage',
-                          coreJs: '3.22.7',
-                          shippedProposals: true,
-                          bugfixes: true,
-                        },
-                        module: {
-                          type: 'es6',
-                        },
-                        jsc: {
-                          parser: {
-                            syntax: 'ecmascript',
-                            jsx: true,
-                          },
-                          transform: {
-                            react: {
-                              runtime: imaConfig.jsxRuntime ?? 'automatic',
-                              development: isDevEnv,
-                              refresh: useHMR,
-                              useBuiltins: true,
-                            },
-                          },
-                        },
-                        sourceMaps: useSourceMaps,
-                        inlineSourcesContent: useSourceMaps,
-                      },
-                      ctx
-                    ),
+                },
+                {
+                  // This injects new plugin loader interface into legacy plugins
+                  loader: 'ima-legacy-plugin-loader',
+                },
+              ].filter(Boolean),
+            },
+            {
+              test: /\.(js|mjs|jsx|cjs)$/,
+              include: appDir,
+              exclude: /node_modules/,
+              loader: require.resolve('swc-loader'),
+              options: await imaConfig.swc(
+                {
+                  env: {
+                    targets,
+                    mode: 'usage',
+                    coreJs: '3.22.7',
+                    shippedProposals: true,
+                    bugfixes: true,
                   },
-                ]
-              : [
-                  /**
-                   * Process js of app directory with general babel config
-                   */
-                  {
-                    test: /\.(js|mjs|cjs)$/,
-                    exclude: [/\bcore-js\b/, /\bwebpack\/buildin\b/, appDir],
-                    use: [
-                      !isServer && {
-                        loader: require.resolve('babel-loader'),
-                        options: {
-                          sourceType: 'unambiguous',
-                          babelrc: false,
-                          configFile: false,
-                          cacheDirectory: true,
-                          cacheCompression: false,
-                          compact: !isDevEnv,
-                          targets,
-                          presets: [
-                            [
-                              require.resolve('@babel/preset-env'),
-                              {
-                                bugfixes: true,
-                                modules: false,
-                                useBuiltIns: 'usage',
-                                corejs: { version: '3.22.7' },
-                                exclude: ['transform-typeof-symbol'],
-                              },
-                            ],
-                          ],
-                          sourceMaps: useSourceMaps,
-                          inputSourceMap: useSourceMaps,
-                        },
-                      },
-                      {
-                        // This injects new plugin loader interface into legacy plugins
-                        loader: 'ima-legacy-plugin-loader',
-                      },
-                    ].filter(Boolean),
+                  module: {
+                    type: 'es6',
                   },
-                  {
-                    test: /\.(js|mjs|jsx|cjs)$/,
-                    include: appDir,
-                    exclude: /node_modules/,
-                    loader: require.resolve('babel-loader'),
-                    options: await imaConfig.babel(
-                      {
-                        targets,
-                        babelrc: false,
-                        configFile: false,
-                        cacheDirectory: true,
-                        cacheCompression: false,
-                        compact: !isDevEnv,
-                        presets: [
-                          [
-                            require.resolve('@babel/preset-react'),
-                            {
-                              development: isDevEnv,
-                              runtime: imaConfig.jsxRuntime ?? 'automatic',
-                            },
-                          ],
-                          [
-                            require.resolve('@babel/preset-env'),
-                            {
-                              bugfixes: true,
-                              modules: false,
-                              useBuiltIns: 'usage',
-                              corejs: { version: '3.22.7', proposals: true },
-                              exclude: ['transform-typeof-symbol'],
-                            },
-                          ],
-                        ],
-                        plugins: useHMR
-                          ? [require.resolve('react-refresh/babel')]
-                          : [],
-                        sourceMaps: useSourceMaps,
-                        inputSourceMap: useSourceMaps,
+                  jsc: {
+                    parser: {
+                      syntax: 'ecmascript',
+                      jsx: true,
+                    },
+                    transform: {
+                      react: {
+                        runtime: imaConfig.jsxRuntime ?? 'automatic',
+                        development: isDevEnv,
+                        refresh: useHMR,
+                        useBuiltins: true,
                       },
-                      ctx
-                    ),
+                    },
                   },
-                ]),
+                  sourceMaps: useSourceMaps,
+                  inlineSourcesContent: useSourceMaps,
+                },
+                ctx
+              ),
+            },
             /**
              * CSS & LESS loaders, both have the exact same capabilities
              */

diff --git a/packages/cli/src/webpack/utils.ts b/packages/cli/src/webpack/utils.ts
@@ -178,10 +178,10 @@ function createCacheKey(
    */
   hash.update(
     JSON.stringify({
-      experimentsSwc: imaConfig.experiments?.swc,
       experimentsCss: imaConfig.experiments?.css,
       command: ctx.command,
       forceSPA: ctx.forceSPA,
+      legacy: ctx.legacy,
       profile: ctx.profile,
       publicPath: ctx.publicPath,
       rootDir: ctx.rootDir,
@@ -224,12 +224,8 @@ async function resolveImaConfig(args: ImaCliArgs): Promise<ImaConfig> {
       ignored: ['**/.git/**', '**/node_modules/**', '**/build/**'],
       aggregateTimeout: 5,
     },
-    babel: async config => config,
     swc: async config => config,
     postcss: async config => config,
-    experiments: {
-      swc: true,
-    },
   };
 
   const imaConfig = requireImaConfig(args.rootDir);

diff --git a/packages/create-ima-app/template/app/main.js b/packages/create-ima-app/template/app/main.js
@@ -33,7 +33,8 @@ if (!$IMA.Test) {
 
 if (module.hot) {
   module.hot.accept((err, { module }) => {
-    module.hot.accept();
+    // Try to accept again and in any case reload on error
+    module.hot.accept(window.location.reload);
   });
 }