payloadcms · jacobsfletch · Aug 5, 2024 · Jul 19, 2024 · Jul 19, 2024 · Jul 19, 2024
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ dist
 !/.idea/runConfigurations
 !/.idea/payload.iml
 
+
 test-results
 .devcontainer
 .localstack
@@ -300,3 +301,8 @@ $RECYCLE.BIN/
 
 /build
 .swc
+app/(payload)/admin/importMap.js
+test/live-preview/app/(payload)/admin/importMap.js
+/test/live-preview/app/(payload)/admin/importMap.js
+test/admin-root/app/(payload)/admin/importMap.js
+/test/admin-root/app/(payload)/admin/importMap.js
diff --git a/.idea/payload.iml b/.idea/payload.iml
diff --git a/.idea/runConfigurations/Run_Dev_Fields.xml b/.idea/runConfigurations/Run_Dev_Fields.xml
diff --git a/.idea/runConfigurations/Run_Dev__community.xml b/.idea/runConfigurations/Run_Dev__community.xml
diff --git a/.idea/runConfigurations/Run_Dev_admin.xml b/.idea/runConfigurations/Run_Dev_admin.xml
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const metadata = {
+  description: 'Generated by Next.js',
+  title: 'Next.js',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/app/(app)/test/page.tsx b/app/(app)/test/page.tsx
@@ -0,0 +1,11 @@
+import configPromise from '@payload-config'
+import { getPayloadHMR } from '@payloadcms/next/utilities'
+
+export const Page = async ({ params, searchParams }) => {
+  const payload = await getPayloadHMR({
+    config: configPromise,
+  })
+  return <div>test ${payload?.config?.collections?.length}</div>
+}
+
+export default Page
diff --git a/app/(payload)/admin/[[...segments]]/not-found.tsx b/app/(payload)/admin/[[...segments]]/not-found.tsx
@@ -5,6 +5,8 @@
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
 
+import { importMap } from '../importMap.js'
+
 type Args = {
   params: {
     segments: string[]
@@ -17,6 +19,7 @@
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
   generatePageMetadata({ config, params, searchParams })
 
-const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, importMap, params, searchParams })
 
 export default NotFound
diff --git a/app/(payload)/admin/[[...segments]]/page.tsx b/app/(payload)/admin/[[...segments]]/page.tsx
@@ -5,6 +5,8 @@
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
 
+import { importMap } from '../importMap.js'
+
 type Args = {
   params: {
     segments: string[]
@@ -17,6 +19,7 @@
 export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
   generatePageMetadata({ config, params, searchParams })
 
-const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, importMap, params, searchParams })
 
 export default Page
diff --git a/app/(payload)/layout.tsx b/app/(payload)/layout.tsx
@@ -1,6 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 import configPromise from '@payload-config'
 import { RootLayout } from '@payloadcms/next/layouts'
+
+import { importMap } from './admin/importMap.js'
+
 // import '@payloadcms/ui/styles.css' // Uncomment this line if `@payloadcms/ui` in `tsconfig.json` points to `/ui/dist` instead of `/ui/src`
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from 'react'
@@ -11,6 +14,10 @@
   children: React.ReactNode
 }
 
-const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+const Layout = ({ children }: Args) => (
+  <RootLayout config={configPromise} importMap={importMap}>
+    {children}
+  </RootLayout>
+)
 
 export default Layout
diff --git a/eslint.config.js b/eslint.config.js
@@ -28,6 +28,7 @@ export const rootParserOptions = {
   EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
   EXPERIMENTAL_useProjectService: {
     allowDefaultProjectForFiles: ['./src/*.ts', './src/*.tsx'],
+    maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 100,
   },
   sourceType: 'module',
   ecmaVersion: 'latest',

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,11 @@
 import bundleAnalyzer from '@next/bundle-analyzer'
 
 import withPayload from './packages/next/src/withPayload.js'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(__filename)
 
 const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
@@ -15,6 +20,10 @@ export default withBundleAnalyzer(
     typescript: {
       ignoreBuildErrors: true,
     },
+    env: {
+      PAYLOAD_CORE_DEV: 'true',
+      ROOT_DIR: path.resolve(dirname),
+    },
     async redirects() {
       return [
         {

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "build:email-nodemailer": "turbo build --filter email-nodemailer",
     "build:email-resend": "turbo build --filter email-resend",
     "build:eslint-config": "turbo build --filter eslint-config",
+    "build:essentials:force": "pnpm clean:build && turbo build --filter=\"payload...\" --filter=\"@payloadcms/ui\" --filter=\"@payloadcms/next\" --filter=\"@payloadcms/db-mongodb\" --filter=\"@payloadcms/db-postgres\" --filter=\"@payloadcms/richtext-lexical\" --filter=\"@payloadcms/translations\" --filter=\"@payloadcms/plugin-cloud\" --filter=\"@payloadcms/graphql\" --no-cache --force",
     "build:force": "pnpm run build:core:force",
     "build:graphql": "turbo build --filter graphql",
     "build:live-preview": "turbo build --filter live-preview",
@@ -52,10 +53,11 @@
     "clean:all": "node ./scripts/delete-recursively.js '@node_modules' 'media/*' '**/dist/' '**/.cache/*' '**/.next/*' '**/.turbo/*' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
     "clean:build": "node ./scripts/delete-recursively.js 'media/' '**/dist/' '**/.cache/' '**/.next/' '**/.turbo/' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
     "clean:cache": "node ./scripts/delete-recursively.js node_modules/.cache! packages/payload/node_modules/.cache! .next/*",
-    "dev": "cross-env NODE_OPTIONS=--no-deprecation node ./test/dev.js",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/dev.ts",
     "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
+    "dev:generate-importMap": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateImportMap.ts",
     "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
-    "dev:postgres": "cross-env NODE_OPTIONS=--no-deprecation PAYLOAD_DATABASE=postgres node ./test/dev.js",
+    "dev:postgres": "cross-env NODE_OPTIONS=--no-deprecation PAYLOAD_DATABASE=postgres tsx ./test/dev.ts",
     "devsafe": "node ./scripts/delete-recursively.js '**/.next' && pnpm dev",
     "docker:restart": "pnpm docker:stop --remove-orphans && pnpm docker:start",
     "docker:start": "docker compose -f packages/plugin-cloud-storage/docker-compose.yml up -d",

diff --git a/packages/db-mongodb/src/types.ts b/packages/db-mongodb/src/types.ts
@@ -67,31 +67,6 @@ export type FieldGenerator<TSchema, TField> = {
   schema: TSchema
 }
 
-/**
- * Field config types that need representation in the database
- */
-type FieldType =
-  | 'array'
-  | 'blocks'
-  | 'checkbox'
-  | 'code'
-  | 'collapsible'
-  | 'date'
-  | 'email'
-  | 'group'
-  | 'json'
-  | 'number'
-  | 'point'
-  | 'radio'
-  | 'relationship'
-  | 'richText'
-  | 'row'
-  | 'select'
-  | 'tabs'
-  | 'text'
-  | 'textarea'
-  | 'upload'
-
 export type FieldGeneratorFunction<TSchema, TField extends Field> = (
   args: FieldGenerator<TSchema, TField>,
 ) => void

diff --git a/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.tsx b/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.tsx
@@ -1,28 +1,32 @@
 import type { DocumentTabConfig, DocumentTabProps } from 'payload'
 
+import { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared'
 import React, { Fragment } from 'react'
 
 import { DocumentTabLink } from './TabLink.js'
 import './index.scss'
 
 export const baseClass = 'doc-tab'
 
-export const DocumentTab: React.FC<DocumentTabConfig & DocumentTabProps> = (props) => {
+export const DocumentTab: React.FC<
+  { Pill_Component?: React.FC } & DocumentTabConfig & DocumentTabProps
+> = (props) => {
   const {
     Pill,
+    Pill_Component,
     apiURL,
     collectionConfig,
     condition,
-    config,
     globalConfig,
     href: tabHref,
     i18n,
     isActive: tabIsActive,
     label,
     newTab,
+    payload,
     permissions,
   } = props
-
+  const { config } = payload
   const { routes } = config
 
   let href = typeof tabHref === 'string' ? tabHref : ''
@@ -55,6 +59,17 @@ export const DocumentTab: React.FC<DocumentTabConfig & DocumentTabProps> = (prop
           })
         : label
 
+    const createMappedComponent = getCreateMappedComponent({
+      importMap: payload.importMap,
+      serverProps: {
+        i18n,
+        payload,
+        permissions,
+      },
+    })
+
+    const mappedPin = createMappedComponent(Pill, undefined, Pill_Component)
+
     return (
       <DocumentTabLink
         adminRoute={routes.admin}
@@ -67,10 +82,10 @@ export const DocumentTab: React.FC<DocumentTabConfig & DocumentTabProps> = (prop
       >
         <span className={`${baseClass}__label`}>
           {labelToRender}
-          {Pill && (
+          {mappedPin && (
             <Fragment>
               &nbsp;
-              <Pill />
+              <RenderComponent mappedComponent={mappedPin} />
             </Fragment>
           )}
         </span>

diff --git a/packages/next/src/elements/DocumentHeader/Tabs/index.tsx b/packages/next/src/elements/DocumentHeader/Tabs/index.tsx
@@ -1,11 +1,12 @@
 import type { I18n } from '@payloadcms/translations'
 import type {
+  Payload,
   Permissions,
   SanitizedCollectionConfig,
-  SanitizedConfig,
   SanitizedGlobalConfig,
 } from 'payload'
 
+import { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared'
 import { isPlainObject } from 'payload'
 import React from 'react'
 
@@ -20,12 +21,13 @@ const baseClass = 'doc-tabs'
 
 export const DocumentTabs: React.FC<{
   collectionConfig: SanitizedCollectionConfig
-  config: SanitizedConfig
   globalConfig: SanitizedGlobalConfig
   i18n: I18n
+  payload: Payload
   permissions: Permissions
 }> = (props) => {
-  const { collectionConfig, config, globalConfig, permissions } = props
+  const { collectionConfig, globalConfig, i18n, payload, permissions } = props
+  const { config } = payload
 
   const customViews = getCustomViews({ collectionConfig, globalConfig })
 
@@ -82,7 +84,29 @@ export const DocumentTabs: React.FC<{
                 }
 
                 if (typeof Tab === 'function') {
-                  return <Tab path={path} {...props} key={`tab-custom-${index}`} />
+                  const createMappedComponent = getCreateMappedComponent({
+                    importMap: payload.importMap,
+                    serverProps: {
+                      i18n,
+                      payload,
+                      permissions,
+                      ...props,
+                      key: `tab-custom-${index}`,
+                      path,
+                    },
+                  })
+
+                  const mappedTab = createMappedComponent(Tab)
+                  return (
+                    <RenderComponent
+                      clientProps={{
+                        key: `tab-custom-${index}`,
+                        path,
+                      }}
+                      key={`tab-custom-${index}`}
+                      mappedComponent={mappedTab}
+                    />
+                  )
                 }
 
                 return (

diff --git a/packages/next/src/elements/DocumentHeader/Tabs/tabs/index.tsx b/packages/next/src/elements/DocumentHeader/Tabs/tabs/index.tsx
@@ -1,4 +1,5 @@
 import type { DocumentTabConfig } from 'payload'
+import type React from 'react'
 
 import { VersionsPill } from './VersionsPill/index.js'
 
@@ -17,6 +18,7 @@ export type DocumentViewKey = (typeof documentViewKeys)[number]
 export const tabs: Record<
   DocumentViewKey,
   {
+    Pill_Component?: React.FC
     order?: number // TODO: expose this to the globalConfig config
   } & DocumentTabConfig
 > = {
@@ -67,7 +69,7 @@ export const tabs: Record<
     condition: () => false,
   },
   Versions: {
-    Pill: VersionsPill,
+    Pill_Component: VersionsPill,
     condition: ({ collectionConfig, globalConfig, permissions }) =>
       Boolean(
         (collectionConfig?.versions &&