poc: remove importMap, import paths, form state endpoint

app/(payload)/admin/ClientConfigBridge.tsx

@@ -0,0 +1,35 @@
+'use client'
+import type { ClientAdminConfig, SharedAdminConfig } from 'payload'
+
+import { ClientAdminConfigProvider } from '@payloadcms/ui'
+import React, { useMemo } from 'react'
+
+import clientConfig from '../../../test/admin/payload.config.admin.client.js'
+
+function mergeSharedIntoClient(
+  client: ClientAdminConfig,
+  shared?: SharedAdminConfig,
+): ClientAdminConfig {
+  if (!shared?.fields) {
+    return client
+  }
+
+  const merged: ClientAdminConfig = { ...client, fields: { ...client.fields } }
+
+  for (const [path, sharedField] of Object.entries(shared.fields)) {
+    if (!merged.fields![path]) {
+      merged.fields![path] = {}
+    }
+    if (sharedField.validate && !merged.fields![path].validate) {
+      merged.fields![path] = { ...merged.fields![path], validate: sharedField.validate }
+    }
+  }
+
+  return merged
+}
+
+export const ClientConfigBridge: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const mergedConfig = useMemo(() => mergeSharedIntoClient(clientConfig ?? {}), [])
+
+  return <ClientAdminConfigProvider config={mergedConfig}>{children}</ClientAdminConfigProvider>
+}

app/(payload)/layout.tsx

@@ -1,13 +1,13 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-// import '@payloadcms/ui/styles.css' // Uncomment this line if `@payloadcms/ui` in `tsconfig.json` points to `/ui/dist` instead of `/ui/src`
 import type { ServerFunctionClient } from 'payload'
 
 import config from '@payload-config'
 import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
 import React from 'react'
 
-import { importMap } from './admin/importMap.js'
+import rscAdminConfig from '../../test/admin/payload.config.admin.rsc.js'
+import { ClientConfigBridge } from './admin/ClientConfigBridge.js'
 import './custom.scss'
 
 type Args = {
@@ -18,14 +18,14 @@ const serverFunction: ServerFunctionClient = async function (args) {
   'use server'
   return handleServerFunctions({
     ...args,
+    adminConfig: rscAdminConfig,
     config,
-    importMap,
   })
 }
 
 const Layout = ({ children }: Args) => (
-  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
-    {children}
+  <RootLayout config={config} rscAdminConfig={rscAdminConfig} serverFunction={serverFunction}>
+    <ClientConfigBridge>{children}</ClientConfigBridge>
   </RootLayout>
 )
 

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/types/routes.d.ts'
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/create-payload-app/src/lib/configure-plugin-project.ts

@@ -16,15 +16,12 @@ export const configurePluginProject = ({
   const devPayloadConfigPath = path.resolve(projectDirPath, './dev/payload.config.ts')
   const devTsConfigPath = path.resolve(projectDirPath, './dev/tsconfig.json')
   const indexTsPath = path.resolve(projectDirPath, './src/index.ts')
-  const devImportMapPath = path.resolve(projectDirPath, './dev/app/(payload)/admin/importMap.js')
 
   const devPayloadConfig = fse.readFileSync(devPayloadConfigPath, 'utf8')
   const devTsConfig = fse.readFileSync(devTsConfigPath, 'utf8')
   const indexTs = fse.readFileSync(indexTsPath, 'utf-8')
-  const devImportMap = fse.readFileSync(devImportMapPath, 'utf-8')
 
   const updatedTsConfig = devTsConfig.replaceAll('plugin-package-name-placeholder', projectName)
-  const updatedImportMap = devImportMap.replaceAll('plugin-package-name-placeholder', projectName)
   let updatedIndexTs = indexTs.replaceAll('plugin-package-name-placeholder', projectName)
 
   const pluginExportVariableName = toCamelCase(projectName)
@@ -46,5 +43,4 @@ export const configurePluginProject = ({
   fse.writeFileSync(devPayloadConfigPath, updatedPayloadConfig)
   fse.writeFileSync(devTsConfigPath, updatedTsConfig)
   fse.writeFileSync(indexTsPath, updatedIndexTs)
-  fse.writeFileSync(devImportMapPath, updatedImportMap)
 }

packages/next/src/elements/DocumentHeader/Tabs/Tab/index.tsx

@@ -76,7 +76,6 @@ export const DefaultDocumentTab: React.FC<{
             {RenderServerComponent({
               Component: Pill,
               Fallback: Pill_Component,
-              importMap: req.payload.importMap,
               serverProps: {
                 i18n: req.i18n,
                 payload: req.payload,

packages/next/src/elements/DocumentHeader/Tabs/index.tsx

@@ -52,7 +52,6 @@ export const DocumentTabs: React.FC<{
                     path: viewPath,
                   } satisfies DocumentTabClientProps,
                   Component: tabConfig.Component,
-                  importMap: req.payload.importMap,
                   key: `tab-${index}`,
                   serverProps: {
                     collectionConfig,

packages/next/src/elements/DocumentHeader/Tabs/tabs/index.tsx

@@ -1,5 +1,6 @@
 import type { DocumentTabConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload'
 
+import { getAdminConfig } from '../../../../utilities/adminConfigCache.js'
 import { VersionsPill } from './VersionsPill/index.js'
 
 export const documentViewKeys = ['api', 'default', 'livePreview', 'versions']
@@ -13,7 +14,15 @@ export const getTabs = ({
   collectionConfig?: SanitizedCollectionConfig
   globalConfig?: SanitizedGlobalConfig
 }): { tab: DocumentTabConfig; viewPath: string }[] => {
+  const adminConfig = getAdminConfig()
+  const slug = collectionConfig?.slug ?? globalConfig?.slug
+  const adminEntityViews = slug
+    ? ((collectionConfig ? adminConfig.collections?.[slug] : adminConfig.globals?.[slug]) as any)
+        ?.views?.edit
+    : undefined
+
   const customViews =
+    adminEntityViews ||
     collectionConfig?.admin?.components?.views?.edit ||
     globalConfig?.admin?.components?.views?.edit ||
     {}
@@ -58,7 +67,7 @@ export const getTabs = ({
     },
   ]
     .concat(
-      Object.entries(customViews).reduce((acc, [key, value]) => {
+      Object.entries(customViews).reduce((acc, [key, value]: [string, any]) => {
         if (documentViewKeys.includes(key)) {
           return acc
         }

packages/next/src/elements/Logo/index.tsx

@@ -4,23 +4,17 @@ import type React from 'react'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import { PayloadLogo } from '@payloadcms/ui/shared'
 
+import { getAdminConfig } from '../../utilities/adminConfigCache.js'
+
 export const Logo: React.FC<ServerProps> = (props) => {
   const { i18n, locale, params, payload, permissions, searchParams, user } = props
 
-  const {
-    admin: {
-      components: {
-        graphics: { Logo: CustomLogo } = {
-          Logo: undefined,
-        },
-      } = {},
-    } = {},
-  } = payload.config
+  const adminConfig = getAdminConfig()
+  const CustomLogo = adminConfig.admin?.graphics?.Logo
 
   return RenderServerComponent({
-    Component: CustomLogo,
+    Component: CustomLogo as React.ComponentType,
     Fallback: PayloadLogo,
-    importMap: payload.importMap,
     serverProps: {
       i18n,
       locale,

packages/next/src/elements/Nav/index.tsx

@@ -6,6 +6,7 @@ import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerCompo
 import { EntityType, groupNavItems } from '@payloadcms/ui/shared'
 import React from 'react'
 
+import { getAdminConfig } from '../../utilities/adminConfigCache.js'
 import { NavHamburger } from './NavHamburger/index.js'
 import { NavWrapper } from './NavWrapper/index.js'
 import { SettingsMenuButton } from './SettingsMenuButton/index.js'
@@ -39,13 +40,15 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
     return null
   }
 
-  const {
-    admin: {
-      components: { afterNav, afterNavLinks, beforeNav, beforeNavLinks, logout, settingsMenu },
-    },
-    collections,
-    globals,
-  } = payload.config
+  const { collections, globals } = payload.config
+
+  const adminConfig = getAdminConfig()
+  const beforeNav = adminConfig.admin?.beforeNav as any
+  const afterNav = adminConfig.admin?.afterNav as any
+  const beforeNavLinks = adminConfig.admin?.beforeNavLinks as any
+  const afterNavLinks = adminConfig.admin?.afterNavLinks as any
+  const logout = adminConfig.admin?.logout as any
+  const settingsMenu = adminConfig.admin?.settingsMenu as any
 
   const groups = groupNavItems(
     [
@@ -81,7 +84,6 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
     },
     Component: logout?.Button,
     Fallback: Logout,
-    importMap: payload.importMap,
     serverProps: {
       i18n,
       locale,
@@ -102,7 +104,6 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
               viewType,
             },
             Component: item,
-            importMap: payload.importMap,
             key: `settings-menu-item-${index}`,
             serverProps: {
               i18n,
@@ -123,7 +124,6 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
       viewType,
     },
     Component: beforeNav,
-    importMap: payload.importMap,
     serverProps: {
       i18n,
       locale,
@@ -141,7 +141,6 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
       viewType,
     },
     Component: beforeNavLinks,
-    importMap: payload.importMap,
     serverProps: {
       i18n,
       locale,
@@ -159,7 +158,6 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
       viewType,
     },
     Component: afterNavLinks,
-    importMap: payload.importMap,
     serverProps: {
       i18n,
       locale,
@@ -177,7 +175,6 @@ export const DefaultNav: React.FC<NavProps> = async (props) => {
       viewType,
     },
     Component: afterNav,
-    importMap: payload.importMap,
     serverProps: {
       i18n,
       locale,

packages/next/src/layouts/Root/NestProviders.tsx

@@ -1,39 +1,28 @@
-import type { Config, ImportMap, ServerProps } from 'payload'
+import type { ServerProps } from 'payload'
 
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import '@payloadcms/ui/scss/app.scss'
 import React from 'react'
 
 type Args = {
   readonly children: React.ReactNode
-  readonly importMap: ImportMap
-  readonly providers: Config['admin']['components']['providers']
+  readonly providers: unknown[]
   readonly serverProps: ServerProps
 }
 
-export function NestProviders({
-  children,
-  importMap,
-  providers,
-  serverProps,
-}: Args): React.ReactNode {
+export function NestProviders({ children, providers, serverProps }: Args): React.ReactNode {
   return RenderServerComponent({
     clientProps: {
       children:
         providers.length > 1 ? (
-          <NestProviders
-            importMap={importMap}
-            providers={providers.slice(1)}
-            serverProps={serverProps}
-          >
+          <NestProviders providers={providers.slice(1)} serverProps={serverProps}>
             {children}
           </NestProviders>
         ) : (
           children
         ),
     },
-    Component: providers[0],
-    importMap,
+    Component: providers[0] as React.ComponentType,
     serverProps,
   })
 }

packages/next/src/layouts/Root/index.tsx

@@ -1,14 +1,20 @@
 import type { AcceptedLanguages } from '@payloadcms/translations'
-import type { ImportMap, LanguageOptions, SanitizedConfig, ServerFunctionClient } from 'payload'
+import type {
+  LanguageOptions,
+  RscAdminConfig,
+  SanitizedConfig,
+  ServerFunctionClient,
+} from 'payload'
 
 import { rtlLanguages } from '@payloadcms/translations'
 import { ProgressBar, RootProvider } from '@payloadcms/ui'
 import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig'
 import { cookies as nextCookies } from 'next/headers.js'
-import { applyLocaleFiltering } from 'payload/shared'
+import { applyLocaleFiltering, getRscSchemaPaths } from 'payload/shared'
 import React from 'react'
 
 import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js'
+import { getAdminConfig, setAdminConfig } from '../../utilities/adminConfigCache.js'
 import { getRequestTheme } from '../../utilities/getRequestTheme.js'
 import { initReq } from '../../utilities/initReq.js'
 import { checkDependencies } from './checkDependencies.js'
@@ -25,17 +31,21 @@ export const RootLayout = async ({
   children,
   config: configPromise,
   htmlProps = {},
-  importMap,
+  rscAdminConfig,
   serverFunction,
 }: {
   readonly children: React.ReactNode
   readonly config: Promise<SanitizedConfig>
   readonly htmlProps?: React.HtmlHTMLAttributes<HTMLHtmlElement>
-  readonly importMap: ImportMap
+  readonly rscAdminConfig?: RscAdminConfig
   readonly serverFunction: ServerFunctionClient
 }) => {
   checkDependencies()
 
+  if (rscAdminConfig) {
+    setAdminConfig(rscAdminConfig)
+  }
+
   const {
     cookies,
     headers,
@@ -45,7 +55,7 @@ export const RootLayout = async ({
     req: {
       payload: { config },
     },
-  } = await initReq({ configPromise, importMap, key: 'RootLayout' })
+  } = await initReq({ configPromise, key: 'RootLayout' })
 
   const theme = getRequestTheme({
     config,
@@ -85,12 +95,14 @@ export const RootLayout = async ({
   const clientConfig = getClientConfig({
     config,
     i18n: req.i18n,
-    importMap,
     user: req.user,
   })
 
   await applyLocaleFiltering({ clientConfig, config, req })
 
+  const adminConfigProviders = getAdminConfig().admin?.providers
+  const providers = adminConfigProviders || config.admin?.components?.providers
+
   return (
     <html
       data-theme={theme}
@@ -112,18 +124,17 @@ export const RootLayout = async ({
           languageOptions={languageOptions}
           locale={req.locale}
           permissions={req.user ? permissions : null}
+          rscSchemaPaths={rscAdminConfig ? getRscSchemaPaths(rscAdminConfig) : undefined}
           serverFunction={serverFunction}
           switchLanguageServerAction={switchLanguageServerAction}
           theme={theme}
           translations={req.i18n.translations}
           user={req.user}
         >
           <ProgressBar />
-          {Array.isArray(config.admin?.components?.providers) &&
-          config.admin?.components?.providers.length > 0 ? (
+          {Array.isArray(providers) && providers.length > 0 ? (
             <NestProviders
-              importMap={req.payload.importMap}
-              providers={config.admin?.components?.providers}
+              providers={providers}
               serverProps={{
                 i18n: req.i18n,
                 payload: req.payload,