From 3fb6ac3ca4bdef5e9ffb3c08bfdbce028d83f10e Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Wed, 15 Jan 2025 13:22:32 -0700
Subject: [PATCH] perf: ensure unnecessary config translations are not sent to
 the client (#10524)

This will reduce the size of the initial HTML
---
 packages/next/src/layouts/Root/index.tsx      | 25 +++++++++----------
 packages/payload/src/config/client.ts         |  9 ++-----
 packages/ui/src/providers/Root/index.tsx      |  4 +--
 .../ui/src/providers/Translation/index.tsx    |  5 ++--
 .../collections/Lexical/e2e/main/e2e.spec.ts  | 12 +++++++++
 5 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx
index cc4f7f0ca..8468a4264 100644
--- a/packages/next/src/layouts/Root/index.tsx
+++ b/packages/next/src/layouts/Root/index.tsx
@@ -1,5 +1,5 @@
 import type { AcceptedLanguages } from '@payloadcms/translations'
-import type { ImportMap, SanitizedConfig, ServerFunctionClient } from 'payload'
+import type { ImportMap, LanguageOptions, SanitizedConfig, ServerFunctionClient } from 'payload'
 
 import { rtlLanguages } from '@payloadcms/translations'
 import { RootProvider } from '@payloadcms/ui'
@@ -60,19 +60,18 @@ export const RootLayout = async ({
     ? 'RTL'
     : 'LTR'
 
-  const languageOptions = Object.entries(config.i18n.supportedLanguages || {}).reduce(
-    (acc, [language, languageConfig]) => {
-      if (Object.keys(config.i18n.supportedLanguages).includes(language)) {
-        acc.push({
-          label: languageConfig.translations.general.thisLanguage,
-          value: language,
-        })
-      }
+  const languageOptions: LanguageOptions = Object.entries(
+    config.i18n.supportedLanguages || {},
+  ).reduce((acc, [language, languageConfig]) => {
+    if (Object.keys(config.i18n.supportedLanguages).includes(language)) {
+      acc.push({
+        label: languageConfig.translations.general.thisLanguage,
+        value: language,
+      })
+    }
 
-      return acc
-    },
-    [],
-  )
+    return acc
+  }, [])
 
   async function switchLanguageServerAction(lang: string): Promise<void> {
     'use server'
diff --git a/packages/payload/src/config/client.ts b/packages/payload/src/config/client.ts
index 227108c71..b0e6a74cf 100644
--- a/packages/payload/src/config/client.ts
+++ b/packages/payload/src/config/client.ts
@@ -26,6 +26,7 @@ export type ServerOnlyRootProperties = keyof Pick<
   | 'endpoints'
   | 'graphQL'
   | 'hooks'
+  | 'i18n'
   | 'jobs'
   | 'logger'
   | 'onInit'
@@ -44,7 +45,6 @@ export type ClientConfig = {
   collections: ClientCollectionConfig[]
   custom?: Record<string, any>
   globals: ClientGlobalConfig[]
-  i18n?: Omit<SanitizedConfig['i18n'], 'supportedLanguages'>
 } & Omit<SanitizedConfig, 'admin' | 'collections' | 'globals' | 'i18n' | ServerOnlyRootProperties>
 
 export const serverOnlyAdminConfigProperties: readonly Partial<ServerOnlyRootAdminProperties>[] = []
@@ -59,6 +59,7 @@ export const serverOnlyConfigProperties: readonly Partial<ServerOnlyRootProperti
   'secret',
   'hooks',
   'bin',
+  'i18n',
   'typescript',
   'cors',
   'csrf',
@@ -122,12 +123,6 @@ export const createClientConfig = ({
           importMap,
         })
         break
-      case 'i18n':
-        clientConfig.i18n = {
-          fallbackLanguage: config.i18n.fallbackLanguage,
-          translations: config.i18n.translations,
-        }
-        break
       case 'localization':
         if (typeof config.localization === 'object' && config.localization) {
           clientConfig.localization = {}
diff --git a/packages/ui/src/providers/Root/index.tsx b/packages/ui/src/providers/Root/index.tsx
index 2ff2bcc58..107902ac7 100644
--- a/packages/ui/src/providers/Root/index.tsx
+++ b/packages/ui/src/providers/Root/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { I18nClient, Language } from '@payloadcms/translations'
+import type { I18nClient, I18nOptions, Language } from '@payloadcms/translations'
 import type {
   ClientConfig,
   LanguageOptions,
@@ -38,7 +38,7 @@ type Props = {
   readonly children: React.ReactNode
   readonly config: ClientConfig
   readonly dateFNSKey: Language['dateFNSKey']
-  readonly fallbackLang: ClientConfig['i18n']['fallbackLanguage']
+  readonly fallbackLang: I18nOptions['fallbackLanguage']
   readonly isNavOpen?: boolean
   readonly languageCode: string
   readonly languageOptions: LanguageOptions
diff --git a/packages/ui/src/providers/Translation/index.tsx b/packages/ui/src/providers/Translation/index.tsx
index 6ba23c9b6..f165392f3 100644
--- a/packages/ui/src/providers/Translation/index.tsx
+++ b/packages/ui/src/providers/Translation/index.tsx
@@ -4,11 +4,12 @@ import type {
   ClientTranslationKeys,
   ClientTranslationsObject,
   I18nClient,
+  I18nOptions,
   Language,
   TFunction,
 } from '@payloadcms/translations'
 import type { Locale } from 'date-fns'
-import type { ClientConfig, LanguageOptions } from 'payload'
+import type { LanguageOptions } from 'payload'
 
 import { importDateFNSLocale, t } from '@payloadcms/translations'
 import { enUS } from 'date-fns/locale/en-US'
@@ -47,7 +48,7 @@ const Context = createContext<ContextType<any, any>>({
 type Props = {
   children: React.ReactNode
   dateFNSKey: Language['dateFNSKey']
-  fallbackLang: ClientConfig['i18n']['fallbackLanguage']
+  fallbackLang: I18nOptions['fallbackLanguage']
   language: string
   languageOptions: LanguageOptions
   switchLanguageServerAction: (lang: string) => Promise<void>
diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts
index 1865f76c5..250b4c44f 100644
--- a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts
+++ b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts
@@ -1278,6 +1278,18 @@ describe('lexicalMain', () => {
   })
 
   describe('localization', () => {
+    test('ensure lexical translations from other languages do not get sent to the client', async () => {
+      await navigateToLexicalFields()
+      // Now check if the html contains "Comience a escribir"
+
+      const htmlContent = await page.content()
+
+      // Check if the HTML contains "Comience a escribir"
+      expect(htmlContent).not.toContain('Comience a escribir')
+      expect(htmlContent).not.toContain('Beginne zu tippen oder')
+      expect(htmlContent).not.toContain('Cargando...')
+      expect(htmlContent).toContain('Start typing, or press')
+    })
     test.skip('ensure simple localized lexical field works', async () => {
       await navigateToLexicalFields(true, true)
     })