feat: swc register (#1779)

* feat: implements esbuild and removes babel

* chore: implements esbuild-register

* chore: tests passing

* chore: implements @swc/jest for tests

* feat: implements swc

* chore: removes build and relies on swc/register only

* chore: converts some exports

* chore: flattens ts configs

* chore: allows tsx in swc

* chore: converts more exports into js

* chore: restores payload module.exports

* chore: removes unused dependency

src/webpack/components.config.ts

@@ -26,11 +26,13 @@ export default {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(t|j)sx?$/,
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
+        use: [
+          {
+            loader: require.resolve('swc-loader'),
+          },
+        ],
       },
       {
         oneOf: [

src/webpack/getBaseConfig.ts

@@ -2,7 +2,6 @@ import path from 'path';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack, { Configuration } from 'webpack';
 import { SanitizedConfig } from '../config/types';
-import babelConfig from '../babel.config';
 
 const mockModulePath = path.resolve(__dirname, './mocks/emptyModule.js');
 const mockDotENVPath = path.resolve(__dirname, './mocks/dotENV.js');
@@ -20,11 +19,18 @@ export default (config: SanitizedConfig): Configuration => ({
     rules: [
       {
         test: /\.(t|j)sx?$/,
-        exclude: /node_modules[\\/](?!(@payloadcms[\\/]payload)[\\/]).*/,
+        exclude: /node_modules/,
         use: [
           {
-            loader: require.resolve('babel-loader'),
-            options: babelConfig,
+            loader: require.resolve('swc-loader'),
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                },
+              },
+            },
           },
         ],
       },
@@ -47,7 +53,7 @@ export default (config: SanitizedConfig): Configuration => ({
     },
     modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
     alias: {
-      'payload-config': config.paths.config,
+      'payload-config': config.paths.rawConfig,
       payload$: mockModulePath,
       'payload-user-css': config.admin.css,
       dotenv: mockDotENVPath,

src/webpack/getProdConfig.ts

@@ -1,12 +1,13 @@
-import TerserJSPlugin from 'terser-webpack-plugin';
 import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import path from 'path';
 import { Configuration } from 'webpack';
 import { SanitizedConfig } from '../config/types';
 import getBaseConfig from './getBaseConfig';
 
+// eslint-disable-next-line import/no-extraneous-dependencies, @typescript-eslint/no-var-requires
+const SwcMinifyWebpackPlugin = require('swc-minify-webpack-plugin');
+
 export default (payloadConfig: SanitizedConfig): Configuration => {
   const baseConfig = getBaseConfig(payloadConfig) as any;
 
@@ -21,7 +22,7 @@ export default (payloadConfig: SanitizedConfig): Configuration => {
     mode: 'production',
     stats: 'errors-only',
     optimization: {
-      minimizer: [new TerserJSPlugin({}), new CssMinimizerPlugin()],
+      minimizer: [new SwcMinifyWebpackPlugin()],
       splitChunks: {
         cacheGroups: {
           styles: {