Remove babel from frontend-build (POC)

.eslintignore

@@ -3,3 +3,4 @@ dist/
 node_modules/
 __mocks__/
 __snapshots__/
+lib/plugins/svgr-webpack/index.js

.github/workflows/ci.yml

@@ -22,6 +22,10 @@ jobs:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
+    # The example dependencies are required in order to lint the files it contains without import/no-unresolved errors
+    - name: Install dependencies (example)
+      run: npm ci
+      working-directory: ./example
     - name: Lint
       run: npm run lint
     - name: Test

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .eslintcache
 .idea
+.swc
 .vscode
 coverage
 dist

README.md

@@ -73,26 +73,24 @@ This package contains a set of configuration presets:
 -   webpack-prod (or webpack)
 -   webpack-dev (or webpack-dev-server)
 -   webpack-dev-stage (for running development apps against stage apis)
--   babel
--   babel-preserve-modules
 -   jest
 -   eslint
 
 If you need to extend or modify a configuration you can add your own
 configuration files, either by extending frontend-build\'s configuration
 files or supplying your own wholesale.
 
-Method 1: Extend base config (babel.config.js):
+Method 1: Extend base config (jest.config.js):
 
     const { createConfig } = require('@openedx/frontend-build');
-    module.exports = createConfig('babel', {
+    module.exports = createConfig('jest', {
        /* option overrides or extensions */
     });
 
-Method 2: Custom manipulations (babel.config.js):
+Method 2: Custom manipulations (jest.config.js):
 
     const { getBaseConfig } = require('@openedx/frontend-build');
-    const config = getBaseConfig('babel');
+    const config = getBaseConfig('jest');
 
     /* Custom config manipulations */
 
@@ -103,7 +101,6 @@ files in your project.
 
 -   eslint: `<project_root>/.eslintrc.js`
 -   jest: `<project_root>/jest.config.js`
--   babel: `<project_root>/babel.config.js`
 -   webpack-prod: `<project_root>/webpack.prod.config.js`
 -   webpack-dev-server: `<project_root>/webpack.dev.config.js`
 
@@ -118,14 +115,6 @@ prefer a different location. Example package.json:
        }
     }
 
-Note, specifying a custom config location for babel may cause issues
-with other tools in frontend-build. eslint, jest, webpack, and
-webpack-dev-server configuration presets rely upon the babel config and
-resolve the location of the config file according to the default
-locations described above. If you need to move the babel config file to
-a custom location, you may also need to customize references to its
-location in other configuration files. Please reach out to the FedX team
-if you need to do this and are running into problems.
 
 ## Local module configuration for Webpack
 
@@ -240,7 +229,7 @@ locally. To serve a production build locally:
 ## Development
 
 This project leverages the command line interface for webpack, jest,
-eslint, and babel. Because of this, local development can be tricky. The
+ and eslint. Because of this, local development can be tricky. The
 easiest way to do local development on this project is to either run
 scripts inside the project in example or to test with an existing
 project you can do the following:

bin/fedx-scripts.js

@@ -47,17 +47,14 @@ const commandName = process.argv[2];
 process.argv.splice(1, 1);
 
 switch (commandName) {
-  case 'babel':
-    ensureConfigOption(presets.babel, ['--config-file']);
-    require('@babel/cli/bin/babel');
-    break;
   case 'eslint':
     ensureConfigOption(presets.eslint);
     // eslint-disable-next-line import/extensions, import/no-extraneous-dependencies
     require('.bin/eslint');
     break;
   case 'jest':
     ensureConfigOption(presets.jest);
+    // eslint-disable-next-line import/no-extraneous-dependencies
     require('jest/bin/jest');
     break;
   case 'webpack':
@@ -72,7 +69,7 @@ switch (commandName) {
     const commonArgs = [
       '--format', 'node_modules/@openedx/frontend-build/lib/formatter.js',
       '--ignore', 'src/**/*.json',
-      '--out-file', './temp/babel-plugin-formatjs/Default.messages.json',
+      '--out-file', './temp/formatjs/Default.messages.json',
       '--', 'src/**/*.js*',
     ];
     process.argv = process.argv.concat(commonArgs);

config/.eslintrc.js

@@ -1,14 +1,9 @@
-const { babel } = require('../lib/presets');
-
 module.exports = {
   extends: '@edx/eslint-config',
   plugins: ['@typescript-eslint'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     requireConfigFile: true,
-    babelOptions: {
-      configFile: babel.resolvedFilepath || babel.defaultFilepath,
-    },
   },
   rules: {
     'import/no-extraneous-dependencies': [

config/.eslintrc.next.js

@@ -1,15 +1,10 @@
 // This file will be removed and replace "eslintrc.js" once all MFEs are ready
-const { babel } = require('../lib/presets');
 
 module.exports = {
   plugins: ['formatjs'],
   extends: '@edx/eslint-config',
-  parser: '@babel/eslint-parser',
   parserOptions: {
     requireConfigFile: true,
-    babelOptions: {
-      configFile: babel.resolvedFilepath || babel.defaultFilepath,
-    },
   },
   rules: {
     'import/no-extraneous-dependencies': [

config/jest.config.js

@@ -1,8 +1,5 @@
 const path = require('path');
 const fs = require('fs');
-const { jsWithTs: tsjPreset } = require('ts-jest/presets');
-
-const presets = require('../lib/presets');
 
 let envConfigPath = path.resolve(__dirname, './jest/fallback.env.config.js');
 const appEnvConfigPath = path.resolve(process.cwd(), './env.config.js');
@@ -12,6 +9,8 @@ if (fs.existsSync(appEnvConfigPath)) {
 }
 
 module.exports = {
+  // TypeScript and JavaScript files (.ts, .tsx, .js, .jsx) will be transformed by ts-jest to CommonJS syntax.
+  preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost/',
@@ -36,13 +35,4 @@ module.exports = {
   transformIgnorePatterns: [
     '/node_modules/(?!@(open)?edx)',
   ],
-  transform: {
-    '^.+\\.jsx?$': [
-      'babel-jest',
-      {
-        configFile: presets.babel.resolvedFilepath,
-      },
-    ],
-    ...tsjPreset.transform,
-  },
 };

config/jest/setupTest.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const fs = require('fs');
 const dotenv = require('dotenv');
-require('babel-polyfill');
 
 const testEnvFile = path.resolve(process.cwd(), '.env.test');
 

config/webpack.dev-stage.config.js

@@ -13,7 +13,6 @@ const PostCssCustomMediaCSS = require('postcss-custom-media');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const commonConfig = require('./webpack.common.config');
-const presets = require('../lib/presets');
 const resolvePrivateEnvConfig = require('../lib/resolvePrivateEnvConfig');
 const getLocalAliases = require('./getLocalAliases');
 
@@ -43,25 +42,6 @@ module.exports = merge(commonConfig, {
   module: {
     // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
     rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules\/(?!@(open)?edx)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            configFile: presets.babel.resolvedFilepath,
-            // Caches result of loader to the filesystem. Future builds will attempt to read
-            // from the cache to avoid needing to run the expensive recompilation process
-            // on each run.
-            cacheDirectory: true,
-            plugins: [
-              require.resolve('react-refresh/babel'),
-            ],
-          },
-        },
-      },
       // We are not extracting CSS from the javascript bundles in development because extracting
       // prevents hot-reloading from working, it increases build time, and we don't care about
       // flash-of-unstyled-content issues in development.

config/webpack.dev.config.js

@@ -13,7 +13,6 @@ const PostCssCustomMediaCSS = require('postcss-custom-media');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const commonConfig = require('./webpack.common.config');
-const presets = require('../lib/presets');
 const resolvePrivateEnvConfig = require('../lib/resolvePrivateEnvConfig');
 const getLocalAliases = require('./getLocalAliases');
 
@@ -44,22 +43,29 @@ module.exports = merge(commonConfig, {
   module: {
     // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
     rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
+      // The swc-loader transforms JSX and TS[X] to plain JavaScript
       {
         test: /\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules\/(?!@(open)?edx)/,
         use: {
-          loader: 'babel-loader',
+          loader: 'swc-loader',
           options: {
-            configFile: presets['babel-typescript'].resolvedFilepath,
-            // Caches result of loader to the filesystem. Future builds will attempt to read
-            // from the cache to avoid needing to run the expensive recompilation process
-            // on each run.
-            cacheDirectory: true,
-            plugins: [
-              require.resolve('react-refresh/babel'),
-            ],
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+              experimental: {
+                plugins: [
+                  ['@formatjs/swc-plugin-experimental', {}],
+                ],
+              },
+            },
           },
         },
       },
@@ -109,9 +115,23 @@ module.exports = merge(commonConfig, {
         ],
       },
       {
+        // Use SVGR to convert SVG to React components (when used in JSX files)
         test: /.svg(\?v=\d+\.\d+\.\d+)?$/,
         issuer: /\.jsx?$/,
-        use: ['@svgr/webpack'],
+        use: [
+          // Second, convert JSX to JS:
+          {
+            loader: 'swc-loader',
+            options: {
+              jsc: {
+                parser: { syntax: 'ecmascript', jsx: true },
+                transform: { react: { runtime: 'automatic' } },
+              },
+            },
+          },
+          // First, convert SVG to JSX:
+          { loader: path.resolve(__dirname, '../lib/plugins/svgr-webpack/index') },
+        ],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by
       // files it processes, which just base64 encodes them and inlines them in the javascript