chore: reduces date-fns locales loaded

app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,4 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
 import config from '@payload-config'
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import { RootPage, generatePageMetadata } from '@payloadcms/next/views/Root/index.js'
@@ -12,7 +14,7 @@ type Args = {
   }
 }
 
-export const generateMetadata = ({ params, searchParams }: Args) =>
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
   generatePageMetadata({ config, params, searchParams })
 
 const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })

packages/next/src/index.ts

@@ -1,4 +1,3 @@
-export { AdminLayout } from './layouts/Admin/index.js'
 export { RootLayout } from './layouts/Root/index.js'
 export { Dashboard as DashboardPage } from './views/Dashboard/index.js'
 export { Login } from './views/Login/index.js'

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

@@ -1,28 +0,0 @@
-import type { SanitizedConfig } from 'payload/types'
-
-import { DefaultTemplate } from '@payloadcms/ui'
-import '@payloadcms/ui/scss/app.scss'
-import React from 'react'
-
-import { initPage } from '../../utilities/initPage.js'
-
-export const metadata = {
-  description: 'Generated by Next.js',
-  title: 'Next.js',
-}
-
-export const AdminLayout = async ({
-  children,
-  config,
-}: {
-  children: React.ReactNode
-  config: Promise<SanitizedConfig> | SanitizedConfig
-}) => {
-  const { permissions, req } = await initPage({ config })
-
-  return (
-    <DefaultTemplate config={config} i18n={req.i18n} permissions={permissions} user={req.user}>
-      {children}
-    </DefaultTemplate>
-  )
-}

packages/next/src/utilities/getNextT.ts

@@ -1,25 +0,0 @@
-import type { TFunction } from '@payloadcms/translations'
-import type { SanitizedConfig } from 'payload/types'
-
-import { initI18n } from '@payloadcms/translations'
-import { translations } from '@payloadcms/translations/client'
-import { cookies, headers } from 'next/headers.js'
-
-import { getRequestLanguage } from './getRequestLanguage.js'
-
-export const getNextT = async ({
-  config,
-  language,
-}: {
-  config: SanitizedConfig
-  language?: string
-}): Promise<TFunction> => {
-  const i18n = await initI18n({
-    config: config.i18n,
-    context: 'client',
-    language: language || getRequestLanguage({ cookies: cookies(), headers: headers() }),
-    translations,
-  })
-
-  return i18n.t
-}

packages/payload/src/localization/middleware.ts

@@ -1,38 +0,0 @@
-/**
- * sets request locale
- */
-export default function localizationMiddleware(req, res, next) {
-  const localization = req.payload.config.localization
-  if (!localization) {
-    next()
-    return
-  }
-
-  const validLocales = [...localization.localeCodes, 'all']
-  const validFallbackLocales = [...localization.localeCodes, 'null']
-
-  let requestedLocale = req.query.locale || localization.defaultLocale
-  let requestedFallbackLocale = req.query['fallback-locale']
-
-  if (req.body) {
-    if (req.body.locale) requestedLocale = req.body.locale
-    if (req.body['fallback-locale']) {
-      requestedFallbackLocale = req.body['fallback-locale']
-    }
-  }
-
-  if (requestedFallbackLocale === 'none') requestedFallbackLocale = 'null'
-  if (requestedLocale === '*' || requestedLocale === 'all') {
-    requestedLocale = 'all'
-  }
-  req.fallbackLocale = validFallbackLocales.find((locale) => locale === requestedFallbackLocale)
-
-  req.locale = validLocales.find((locale) => locale === requestedLocale)
-
-  if (!req.fallbackLocale) {
-    req.fallbackLocale =
-      localization.locales.find(({ code }) => req.locale === code)?.fallbackLocale ||
-      localization.defaultLocale
-  }
-  next()
-}

packages/payload/src/localization/sanitizeFallbackLocale.ts

@@ -1,15 +0,0 @@
-const sanitizeFallbackLocale = (fallbackLocale) => {
-  if (
-    fallbackLocale === 'null' ||
-    fallbackLocale === 'none' ||
-    fallbackLocale === 'false' ||
-    fallbackLocale === false ||
-    fallbackLocale === null
-  ) {
-    return null
-  }
-
-  return fallbackLocale
-}
-
-export default sanitizeFallbackLocale

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

@@ -1,6 +1,5 @@
 import type { ReactDatePickerProps } from 'react-datepicker'
 
-import * as Locales from 'date-fns/locale'
 import React from 'react'
 import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker'
 const ReactDatePicker = (ReactDatePickerDefaultImport.default ||
@@ -12,7 +11,7 @@ import type { Props } from './types.js'
 import { Calendar as CalendarIcon } from '../../icons/Calendar/index.js'
 import { X as XIcon } from '../../icons/X/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { getSupportedDateLocale } from '../../utilities/formatDate/getSupportedDateLocale.js'
+import { getDateLocale } from '../../utilities/formatDate/getDateLocale.js'
 import './index.scss'
 
 const baseClass = 'date-time-picker'
@@ -37,12 +36,13 @@ const DateTime: React.FC<Props> = (props) => {
 
   // Use the user's AdminUI language preference for the locale
   const { i18n } = useTranslation()
-  const locale = getSupportedDateLocale(i18n.language)
+
+  const { locale, localeData } = getDateLocale(i18n.language)
 
   try {
-    registerLocale(locale, Locales[locale])
+    registerLocale(locale, localeData)
   } catch (e) {
-    console.warn(`Could not find DatePicker locale for ${locale}`)
+    console.warn(`Could not find DatePicker locale for ${i18n.language}`)
   }
 
   let dateFormat = customDisplayFormat

packages/ui/src/utilities/formatDate/getDateLocale.ts

@@ -0,0 +1,24 @@
+import type { Locale } from 'date-fns'
+
+import { dateLocales } from '../../utilities/formatDate/locales.js'
+
+export const getDateLocale = (
+  locale = 'enUS',
+): {
+  locale: string
+  localeData: Locale
+} => {
+  const formattedLocales = {
+    en: 'enUS',
+    my: 'enUS', // Burmese is not currently supported
+    ua: 'uk',
+    zh: 'zhCN',
+  }
+
+  const formattedLocale = formattedLocales[locale] || locale
+
+  return {
+    locale: formattedLocale,
+    localeData: dateLocales[formattedLocale],
+  }
+}

packages/ui/src/utilities/formatDate/getSupportedDateLocale.ts

@@ -1,10 +0,0 @@
-export const getSupportedDateLocale = (locale = 'enUS'): string => {
-  const formattedLocales = {
-    en: 'enUS',
-    my: 'enUS', // Burmese is not currently supported
-    ua: 'uk',
-    zh: 'zhCN',
-  }
-
-  return formattedLocales[locale] || locale
-}

packages/ui/src/utilities/formatDate/index.ts

@@ -1,7 +1,6 @@
 import { format, formatDistanceToNow } from 'date-fns'
-import * as Locale from 'date-fns/locale'
 
-import { getSupportedDateLocale } from './getSupportedDateLocale.js'
+import { getDateLocale } from './getDateLocale.js'
 
 export const formatDate = (
   date: Date | number | string | undefined,
@@ -9,8 +8,8 @@ export const formatDate = (
   locale?: string,
 ): string => {
   const theDate = new Date(date)
-  const currentLocale = Locale[getSupportedDateLocale(locale)]
+  const { localeData } = getDateLocale(locale)
-  return format(theDate, pattern, { locale: currentLocale })
+  return format(theDate, pattern, { locale: localeData })
 }
 
 export const formatTimeToNow = (
@@ -18,6 +17,6 @@ export const formatTimeToNow = (
   locale?: string,
 ): string => {
   const theDate = new Date(date)
-  const currentLocale = Locale[getSupportedDateLocale(locale)]
+  const { localeData } = getDateLocale(locale)
-  return formatDistanceToNow(theDate, { locale: currentLocale })
+  return formatDistanceToNow(theDate, { locale: localeData })
 }

packages/ui/src/utilities/formatDate/locales.ts

@@ -0,0 +1,55 @@
+import ar from 'date-fns/locale/ar'
+import az from 'date-fns/locale/az'
+import bg from 'date-fns/locale/bg'
+import cs from 'date-fns/locale/cs'
+import de from 'date-fns/locale/de'
+import enUS from 'date-fns/locale/en-US'
+import es from 'date-fns/locale/es'
+import faIR from 'date-fns/locale/fa-IR'
+import fr from 'date-fns/locale/fr'
+import hr from 'date-fns/locale/hr'
+import hu from 'date-fns/locale/hu'
+import it from 'date-fns/locale/it'
+import ja from 'date-fns/locale/ja'
+import ko from 'date-fns/locale/ko'
+import nb from 'date-fns/locale/nb'
+import nl from 'date-fns/locale/nl'
+import pl from 'date-fns/locale/pl'
+import pt from 'date-fns/locale/pt'
+import ro from 'date-fns/locale/ro'
+import ru from 'date-fns/locale/ru'
+import sv from 'date-fns/locale/sv'
+import th from 'date-fns/locale/th'
+import tr from 'date-fns/locale/tr'
+import vi from 'date-fns/locale/vi'
+import zhCN from 'date-fns/locale/zh-CN'
+import zhTW from 'date-fns/locale/zh-TW'
+
+export const dateLocales = {
+  ar,
+  az,
+  bg,
+  cs,
+  de,
+  enUS,
+  es,
+  fa: faIR,
+  fr,
+  hr,
+  hu,
+  it,
+  ja,
+  ko,
+  nb,
+  nl,
+  pl,
+  pt,
+  ro,
+  ru,
+  sv,
+  th,
+  tr,
+  vi,
+  zh: zhCN,
+  'zh-tw': zhTW,
+}