chore(ui): add ability to compile using react compiler (#6483)

This does not enable the react compiler by default

packages/next/.swcrc

@@ -16,7 +16,7 @@
         "development": false,
         "useBuiltins": true
       }
-    }
+    },
     "experimental": {
       "plugins": [
         [

packages/ui/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+not dead

packages/ui/.swcrc

@@ -16,7 +16,7 @@
         "development": false,
         "useBuiltins": true
       }
-    }
+    },
     "experimental": {
       "plugins": [
         [

packages/ui/babel.config.cjs

@@ -0,0 +1,55 @@
+const fs = require('fs')
+
+const ReactCompilerConfig = {
+  sources: (filename) => {
+
+    if(!filename.endsWith('.tsx') && !filename.endsWith('.jsx')) {
+      return false
+    }
+
+    // read file and check if 'use client' is at top. if not, return false
+    // if it is, return true
+    const file = fs.readFileSync(filename, 'utf8')
+    if(file.includes("'use client'")) {
+      //console.log("Compiling: " + filename)
+      return true
+    }
+    console.log("Skipping: " + filename)
+    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',
+    ],
+  }
+}

packages/ui/package.json

@@ -81,8 +81,10 @@
   ],
   "scripts": {
     "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build:babel": "babel src --out-dir 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 dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "build:webpack": "webpack --config webpack.config.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
@@ -116,6 +118,11 @@
     "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",
@@ -123,6 +130,8 @@
     "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
     "@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",

packages/ui/src/elements/ArrayAction/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import { Chevron } from '../../icons/Chevron/index.js'

packages/ui/src/elements/Banner/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import LinkImport from 'next/link.js' // TODO: abstract this out to support all routers
 import type { MouseEvent } from 'react'
 

packages/ui/src/elements/Card/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { ElementType } from 'react'
 
 import React from 'react'

packages/ui/src/elements/CodeEditor/CodeEditor.tsx

@@ -1,3 +1,4 @@
+'use client'
 import EditorImport from '@monaco-editor/react'
 import React from 'react'
 

packages/ui/src/elements/CodeEditor/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { Suspense, lazy } from 'react'
 
 import type { Props } from './types.js'

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { ReactDatePickerProps } from 'react-datepicker'
 
 import React from 'react'

packages/ui/src/elements/DatePicker/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { Suspense, lazy } from 'react'
 
 import type { Props } from './types.js'

packages/ui/src/elements/DraggableSortable/DraggableSortableItem/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { UseDraggableArguments } from '@dnd-kit/core'
 
 import React, { Fragment } from 'react'

packages/ui/src/elements/DraggableSortable/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { DragEndEvent } from '@dnd-kit/core'
 
 import {

packages/ui/src/elements/DraggableSortable/useDraggableSortable/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { UseDraggableArguments } from '@dnd-kit/core'
 
 import { useSortable } from '@dnd-kit/sortable'

packages/ui/src/elements/Drawer/useDrawerSlug.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { useId } from 'react'
 
 import { useEditDepth } from '../../providers/EditDepth/index.js'

packages/ui/src/elements/Dropzone/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import { useTranslation } from '../../providers/Translation/index.js'

packages/ui/src/elements/ErrorPill/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { I18nClient } from '@payloadcms/translations'
 
 import React from 'react'

packages/ui/src/elements/FieldSelect/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { FieldWithPath } from 'payload/types'
 
 import React, { Fragment, type JSX, useState } from 'react'

packages/ui/src/elements/FileDetails/FileMeta/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { formatFilesize } from 'payload/utilities'
 import React, { useState } from 'react'
 

packages/ui/src/elements/FileDetails/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { isImage } from 'payload/utilities'
 import React from 'react'
 

packages/ui/src/elements/IDLabel/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import './index.scss'

packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 

packages/ui/src/elements/Localizer/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React from 'react'

packages/ui/src/elements/Pagination/ClickableArrow/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import { Chevron } from '../../../icons/Chevron/index.js'

packages/ui/src/elements/Pagination/Page/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 export type PageProps = {

packages/ui/src/elements/Pagination/Separator/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 export const Separator: React.FC = () => <span className="paginator__separator">&mdash;</span>

packages/ui/src/elements/Popup/PopupTrigger/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import './index.scss'

packages/ui/src/elements/PreviewSizes/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type {
   Data,
   FileSize,

packages/ui/src/elements/ReactSelect/ClearIndicator/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { ClearIndicatorProps } from 'react-select'
 
 import React from 'react'

packages/ui/src/elements/ReactSelect/Control/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { ControlProps } from 'react-select'
 
 import React from 'react'

packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { DropdownIndicatorProps } from 'react-select'
 
 import { Chevron } from '@payloadcms/ui/icons/Chevron'

packages/ui/src/elements/ReactSelect/MultiValue/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { MultiValueProps } from 'react-select'
 
 import React from 'react'

packages/ui/src/elements/ReactSelect/MultiValueLabel/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { MultiValueProps } from 'react-select'
 
 import React from 'react'

packages/ui/src/elements/ReactSelect/MultiValueRemove/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { MultiValueRemoveProps } from 'react-select'
 
 import React, { type JSX } from 'react'

packages/ui/src/elements/ReactSelect/SingleValue/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { SingleValueProps } from 'react-select'
 
 import React from 'react'

packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { ValueContainerProps } from 'react-select'
 
 import React from 'react'

packages/ui/src/elements/RenderCustomClientComponent/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 export type RenderCustomComponentProps = {

packages/ui/src/elements/SearchFilter/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { getTranslation } from '@payloadcms/translations'
 // TODO: abstract the `next/navigation` dependency out from this component
 import { usePathname, useRouter } from 'next/navigation.js'

packages/ui/src/elements/SortComplex/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { OptionObject } from 'payload/types'
 import type { SanitizedCollectionConfig } from 'payload/types'
 

packages/ui/src/elements/Table/DefaultCell/fields/Code/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { DefaultCellComponentProps } from 'payload/types'
 
 import React from 'react'

packages/ui/src/elements/TableColumns/buildColumnState.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { type CellComponentProps, type SanitizedCollectionConfig } from 'payload/types'
 import React from 'react'
 

packages/ui/src/elements/TableColumns/filterFields.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 // 1. Skips fields that are hidden, disabled, or presentational-only (i.e. `ui` fields)

packages/ui/src/elements/ThumbnailCard/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types'
 
 import React from 'react'

packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import type { Props } from './types.js'

packages/ui/src/elements/WhereBuilder/Condition/Number/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import type { Props } from './types.js'

packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import type { PaginatedDocs } from 'payload/database'
 

packages/ui/src/elements/WhereBuilder/Condition/Select/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { Option, OptionObject } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'

packages/ui/src/elements/WhereBuilder/Condition/Text/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import type { Props } from './types.js'

packages/ui/src/elements/WhereBuilder/Condition/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { useEffect, useState } from 'react'
 
 import type { FieldCondition } from '../types.js'

packages/ui/src/elements/WhereBuilder/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useEffect, useState } from 'react'
 

packages/ui/src/elements/WhereBuilder/reduceFieldMap.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { Column } from '../Table/index.js'
 
 import fieldTypes from './field-types.js'

packages/ui/src/fields/Array/ArrayRow.tsx

@@ -1,3 +1,4 @@
+'use client'
 import type { FieldPermissions } from 'payload/auth'
 import type { ArrayField, Row } from 'payload/types'
 

packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import { Search } from '../../../../graphics/Search/index.js'

packages/ui/src/fields/Blocks/SectionTitle/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 
 import { useField } from '../../../forms/useField/index.js'