From 6ea456d6dab7edb0feed59d4b12c1379118567ae Mon Sep 17 00:00:00 2001 From: James Date: Wed, 13 Mar 2024 13:59:38 -0400 Subject: [PATCH] chore: reduces date-fns locales loaded --- app/(payload)/admin/[[...segments]]/page.tsx | 4 +- packages/next/src/graphql/registerSchema.ts | 0 packages/next/src/index.ts | 1 - packages/next/src/layouts/Admin/index.tsx | 28 ---------- packages/next/src/utilities/getNextT.ts | 25 --------- .../payload/src/localization/middleware.ts | 38 ------------- .../localization/sanitizeFallbackLocale.ts | 15 ----- .../ui/src/elements/DatePicker/DatePicker.tsx | 10 ++-- .../src/utilities/formatDate/getDateLocale.ts | 24 ++++++++ .../formatDate/getSupportedDateLocale.ts | 10 ---- packages/ui/src/utilities/formatDate/index.ts | 11 ++-- .../ui/src/utilities/formatDate/locales.ts | 55 +++++++++++++++++++ 12 files changed, 92 insertions(+), 129 deletions(-) delete mode 100644 packages/next/src/graphql/registerSchema.ts delete mode 100644 packages/next/src/layouts/Admin/index.tsx delete mode 100644 packages/next/src/utilities/getNextT.ts delete mode 100644 packages/payload/src/localization/middleware.ts delete mode 100644 packages/payload/src/localization/sanitizeFallbackLocale.ts create mode 100644 packages/ui/src/utilities/formatDate/getDateLocale.ts delete mode 100644 packages/ui/src/utilities/formatDate/getSupportedDateLocale.ts create mode 100644 packages/ui/src/utilities/formatDate/locales.ts diff --git a/app/(payload)/admin/[[...segments]]/page.tsx b/app/(payload)/admin/[[...segments]]/page.tsx index a7c5b2d35b..ee9bd415c3 100644 --- a/app/(payload)/admin/[[...segments]]/page.tsx +++ b/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 => generatePageMetadata({ config, params, searchParams }) const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams }) diff --git a/packages/next/src/graphql/registerSchema.ts b/packages/next/src/graphql/registerSchema.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts index ada316ca71..05abef645f 100644 --- a/packages/next/src/index.ts +++ b/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' diff --git a/packages/next/src/layouts/Admin/index.tsx b/packages/next/src/layouts/Admin/index.tsx deleted file mode 100644 index b3419eeedd..0000000000 --- a/packages/next/src/layouts/Admin/index.tsx +++ /dev/null @@ -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 -}) => { - const { permissions, req } = await initPage({ config }) - - return ( - - {children} - - ) -} diff --git a/packages/next/src/utilities/getNextT.ts b/packages/next/src/utilities/getNextT.ts deleted file mode 100644 index b9313981d9..0000000000 --- a/packages/next/src/utilities/getNextT.ts +++ /dev/null @@ -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 => { - const i18n = await initI18n({ - config: config.i18n, - context: 'client', - language: language || getRequestLanguage({ cookies: cookies(), headers: headers() }), - translations, - }) - - return i18n.t -} diff --git a/packages/payload/src/localization/middleware.ts b/packages/payload/src/localization/middleware.ts deleted file mode 100644 index 1860502da7..0000000000 --- a/packages/payload/src/localization/middleware.ts +++ /dev/null @@ -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() -} diff --git a/packages/payload/src/localization/sanitizeFallbackLocale.ts b/packages/payload/src/localization/sanitizeFallbackLocale.ts deleted file mode 100644 index 19068b372e..0000000000 --- a/packages/payload/src/localization/sanitizeFallbackLocale.ts +++ /dev/null @@ -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 diff --git a/packages/ui/src/elements/DatePicker/DatePicker.tsx b/packages/ui/src/elements/DatePicker/DatePicker.tsx index cb9ef4c5f5..fdab51468e 100644 --- a/packages/ui/src/elements/DatePicker/DatePicker.tsx +++ b/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) => { // 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 diff --git a/packages/ui/src/utilities/formatDate/getDateLocale.ts b/packages/ui/src/utilities/formatDate/getDateLocale.ts new file mode 100644 index 0000000000..b9939ae4d3 --- /dev/null +++ b/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], + } +} diff --git a/packages/ui/src/utilities/formatDate/getSupportedDateLocale.ts b/packages/ui/src/utilities/formatDate/getSupportedDateLocale.ts deleted file mode 100644 index 035563ea35..0000000000 --- a/packages/ui/src/utilities/formatDate/getSupportedDateLocale.ts +++ /dev/null @@ -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 -} diff --git a/packages/ui/src/utilities/formatDate/index.ts b/packages/ui/src/utilities/formatDate/index.ts index 83130cf408..ca91d1e3bf 100644 --- a/packages/ui/src/utilities/formatDate/index.ts +++ b/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)] - return format(theDate, pattern, { locale: currentLocale }) + const { localeData } = getDateLocale(locale) + 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)] - return formatDistanceToNow(theDate, { locale: currentLocale }) + const { localeData } = getDateLocale(locale) + return formatDistanceToNow(theDate, { locale: localeData }) } diff --git a/packages/ui/src/utilities/formatDate/locales.ts b/packages/ui/src/utilities/formatDate/locales.ts new file mode 100644 index 0000000000..c03483c128 --- /dev/null +++ b/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, +}