feat: compile ui using react compiler, using babel

payloadcms · May 23, 2024 · 58f2a29 · 58f2a29
1 parent fd02bee
commit 58f2a29
Show file tree

Hide file tree

Showing 6 changed files with 1,457 additions and 187 deletions.
diff --git a/packages/next/.swcrc b/packages/next/.swcrc
@@ -16,7 +16,7 @@
         "development": false,
         "useBuiltins": true
       }
-    }
+    },
     "experimental": {
       "plugins": [
         [

diff --git a/packages/ui/.browserslistrc b/packages/ui/.browserslistrc
@@ -0,0 +1,2 @@
+> 1%
+not dead
diff --git a/packages/ui/.swcrc b/packages/ui/.swcrc
@@ -8,15 +8,6 @@
       "tsx": true,
       "dts": true
     },
-    "transform": {
-      "react": {
-        "runtime": "automatic",
-        "pragmaFrag": "React.Fragment",
-        "throwIfNamespace": true,
-        "development": false,
-        "useBuiltins": true
-      }
-    }
     "experimental": {
       "plugins": [
         [

diff --git a/packages/ui/babel.config.cjs b/packages/ui/babel.config.cjs
@@ -0,0 +1,44 @@
+const ReactCompilerConfig = {
+  /*sources: (filename) => {
+    if(filename.indexOf('src/providers') !== -1) {
+      console.log('Babl.', filename)
+      return true
+    }
+    return false
+  },*/
+  //runtimeModule: "react"
+}
+
+module.exports = function (api) {
+  api.cache(false);
+
+  return {
+    plugins: [
+      ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
+      [
+        'babel-plugin-transform-remove-imports',
+        {
+          test: '\\.(scss|css)$',
+        },
+      ],
+    ],
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: false,
+          useBuiltIns: 'usage',
+          corejs: '3.22',
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          throwIfNamespace: false,
+          runtime: 'automatic',
+        },
+      ],
+      '@babel/preset-typescript',
+    ],
+  }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -81,8 +81,10 @@
   ],
   "scripts": {
     "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build:babel": "babel src --out-dir /Users/alessio/Documents/GitHub/payload-3.0-alpha-demo/node_modules/@payloadcms/ui/dist --source-maps --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs",
+    "build:reactcompiler": "pnpm copyfiles && pnpm build:babel && pnpm build:types",
     "build:remove-artifact": "rm dist/prod/index.js",
-    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
+    "build:swc": "swc ./src -d /Users/alessio/Documents/GitHub/payload-3.0-alpha-demo/node_modules/@payloadcms/ui/dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "build:webpack": "webpack --config webpack.config.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
@@ -116,13 +118,20 @@
     "uuid": "9.0.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.24.5",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@payloadcms/eslint-config": "workspace:*",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/qs": "6.9.7",
     "@types/react": "npm:[email protected]",
     "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "npm:[email protected]",
     "@types/uuid": "8.3.4",
+    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
+    "babel-plugin-transform-remove-imports": "^1.7.1",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "mini-css-extract-plugin": "1.6.2",