lightnet 3.10.1 → 3.10.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # lightnet
 
+## 3.10.2
+
+### Patch Changes
+
+- [#325](https://github.com/LightNetDev/LightNet/pull/325) [`07b71f4`](https://github.com/LightNetDev/LightNet/commit/07b71f4d44f8e005aafb48bedc347f14c71e182a) Thanks [@smn-cds](https://github.com/smn-cds)! - Refactor internal react i18n logic.
+
 ## 3.10.1
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.10.1",
+  "version": "3.10.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",

package/src/admin/components/form/FieldErrors.tsx

@@ -1,17 +1,20 @@
 import type { AnyFieldMeta } from "@tanstack/react-form"
 
+import { useI18n } from "../../../i18n/react/useI18n"
+
 type FieldErrorsProps = {
   meta: AnyFieldMeta
 }
 
 export const FieldErrors = ({ meta }: FieldErrorsProps) => {
+  const { t } = useI18n()
   if (!meta.isTouched || meta.isValid) return null
 
   return (
     <ul className="my-2 flex flex-col gap-1" role="alert">
       {meta.errors.map((error) => (
         <li className="text-sm text-rose-800" key={error.code}>
-          {error.message}
+          {t(error.message)}
         </li>
       ))}
     </ul>

package/src/admin/components/form/SubmitButton.tsx

@@ -2,6 +2,7 @@ import { useStore } from "@tanstack/react-form"
 import { useEffect, useRef, useState } from "react"
 
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 import { useFormContext } from "./form-context"
 
 const SUCCESS_DURATION_MS = 2000
@@ -18,9 +19,9 @@ const buttonStateClasses = {
 } as const
 
 const buttonLabels = {
-  idle: "Save",
-  success: "Saved",
-  error: "Failed",
+  idle: "ln.admin.save",
+  success: "ln.admin.saved",
+  error: "ln.admin.failed",
 } as const
 
 const icons = {
@@ -31,6 +32,7 @@ const icons = {
 
 export default function SubmitButton() {
   const form = useFormContext()
+  const { t } = useI18n()
   const { submissionAttempts, isSubmitting, isSubmitSuccessful } = useStore(
     form.store,
     (state) => ({
@@ -48,7 +50,7 @@ export default function SubmitButton() {
   return (
     <button className={buttonClass} type="submit" disabled={isSubmitting}>
       {icon && <Icon className={icon} ariaLabel="" />}
-      {label}
+      {t(label)}
     </button>
   )
 }

package/src/admin/i18n/translations/en.yml

@@ -1 +1,11 @@
 ln.admin.edit: Edit
+ln.admin.save: Save
+ln.admin.saved: Saved
+ln.admin.failed: Failed
+ln.admin.edit-media-item: Edit media item
+ln.admin.back-to-details-page: Back to details page
+ln.admin.title: Title
+ln.admin.common-id: Common ID
+ln.admin.toast.invalid-data.title: Invalid form data
+ln.admin.toast.invalid-data.hint: Check the fields and try again.
+ln.admin.errors.non-empty-string: String must contain at least 1 character(s)

package/src/admin/pages/media/EditForm.tsx

@@ -2,6 +2,11 @@ import { revalidateLogic } from "@tanstack/react-form"
 
 import { showToastById } from "../../../components/showToast"
 import Toast from "../../../components/Toast"
+import {
+  createI18n,
+  type I18nConfig,
+  I18nContext,
+} from "../../../i18n/react/i18n-context"
 import { useAppForm } from "../../components/form"
 import { type MediaItem, mediaItemSchema } from "../../types/media-item"
 import { updateMediaItem } from "./media-item-store"
@@ -9,9 +14,11 @@ import { updateMediaItem } from "./media-item-store"
 export default function EditForm({
   mediaId,
   mediaItem,
+  i18nConfig,
 }: {
   mediaId: string
   mediaItem: MediaItem
+  i18nConfig: I18nConfig
 }) {
   const form = useAppForm({
     defaultValues: mediaItem,
@@ -29,30 +36,38 @@ export default function EditForm({
       showToastById("invalid-form-data-toast")
     },
   })
+  const i18n = createI18n(i18nConfig)
+  const { t } = i18n
 
   return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault()
-        form.handleSubmit()
-      }}
-      className="flex flex-col items-start gap-4"
-    >
-      <form.AppField
-        name="commonId"
-        children={(field) => <field.TextField label="Common ID" />}
-      />
-      <form.AppField
-        name="title"
-        children={(field) => <field.TextField label="Title" />}
-      />
-      <form.AppForm>
-        <form.SubmitButton />
-        <Toast id="invalid-form-data-toast" variant="error">
-          <div className="font-bold text-gray-700">Invalid form data</div>
-          Check the fields and try again.
-        </Toast>
-      </form.AppForm>
-    </form>
+    <I18nContext.Provider value={i18n}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          form.handleSubmit()
+        }}
+        className="flex flex-col items-start gap-4"
+      >
+        <form.AppField
+          name="commonId"
+          children={(field) => (
+            <field.TextField label={t("ln.admin.common-id")} />
+          )}
+        />
+        <form.AppField
+          name="title"
+          children={(field) => <field.TextField label={t("ln.admin.title")} />}
+        />
+        <form.AppForm>
+          <form.SubmitButton />
+          <Toast id="invalid-form-data-toast" variant="error">
+            <div className="font-bold text-gray-700">
+              {t("ln.admin.toast.invalid-data.title")}
+            </div>
+            {t("ln.admin.toast.invalid-data.hint")}
+          </Toast>
+        </form.AppForm>
+      </form>
+    </I18nContext.Provider>
   )
 }

package/src/admin/pages/media/EditRoute.astro

@@ -4,6 +4,7 @@ import { getCollection } from "astro:content"
 import config from "virtual:lightnet/config"
 
 import { getRawMediaItem } from "../../../content/get-media-items"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import { resolveLocales } from "../../../i18n/resolve-locales"
 import Page from "../../../layouts/Page.astro"
 import EditForm from "./EditForm"
@@ -17,6 +18,9 @@ export const getStaticPaths = (async () => {
 
 const { mediaId } = Astro.params
 const mediaItemEntry = await getRawMediaItem(mediaId)
+
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, ["ln.admin.*"])
+const { t } = Astro.locals.i18n
 ---
 
 <Page>
@@ -24,10 +28,15 @@ const mediaItemEntry = await getRawMediaItem(mediaId)
     <a
       class="underline"
       href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
-      >Back to details page</a
+      >{t("ln.admin.back-to-details-page")}</a
     >
-    <h1 class="mb-4 mt-8 text-lg">Edit media item</h1>
+    <h1 class="mb-4 mt-8 text-lg">{t("ln.admin.edit-media-item")}</h1>
 
-    <EditForm mediaId={mediaId} mediaItem={mediaItemEntry.data} client:load />
+    <EditForm
+      mediaId={mediaId}
+      mediaItem={mediaItemEntry.data}
+      i18nConfig={i18nConfig}
+      client:load
+    />
   </div>
 </Page>

package/src/admin/types/media-item.ts

@@ -1,8 +1,10 @@
 import { z } from "astro/zod"
 
+const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
+
 export const mediaItemSchema = z.object({
-  commonId: z.string().nonempty(),
-  title: z.string().nonempty(),
+  commonId: z.string().nonempty(NON_EMPTY_STRING),
+  title: z.string().nonempty(NON_EMPTY_STRING),
 })
 
 export type MediaItem = z.infer<typeof mediaItemSchema>

package/src/i18n/locals.d.ts

@@ -3,36 +3,43 @@ declare namespace App {
     /**
      * Provides internationalization helpers.
      */
-    i18n: {
-      /**
-       * Translate a key to the language of the current locale.
-       *
-       * @param TranslationKey to be translated.
-       */
-      t: import("./translate").TranslateFn
+    i18n: I18n
+  }
+}
 
-      /**
-       *  The current locale or the default locale if the current locale is not available.
-       *
-       *  In comparison to Astro.currentLocale this will always return a locale.
-       *  Use Astro.currentLocale if you want to know the locale that is included in the current path.
-       */
-      currentLocale: string
+type I18n = {
+  /**
+   * Translate a key to the language of the current locale.
+   *
+   * @param TranslationKey to be translated.
+   */
+  t: import("./translate").TranslateFn
 
-      /**
-       * The current text direction. Left-to-right or right-to-left.
-       */
-      direction: "ltr" | "rtl"
+  /**
+   *  The current locale or the default locale if the current locale is not available.
+   *
+   *  In comparison to Astro.currentLocale this will always return a locale.
+   *  Use Astro.currentLocale if you want to know the locale that is included in the current path.
+   */
+  currentLocale: string
 
-      /**
-       * The default locale as defined in the project configuration.
-       */
-      defaultLocale: string
+  /**
+   * The current text direction. Left-to-right or right-to-left.
+   */
+  direction: "ltr" | "rtl"
 
-      /**
-       * The available locales as defined in the project configuration.
-       */
-      locales: string[]
-    }
-  }
+  /**
+   * The default locale as defined in the project configuration.
+   */
+  defaultLocale: string
+
+  /**
+   * The available locales as defined in the project configuration.
+   */
+  locales: string[]
+
+  /**
+   * All available translation keys.
+   */
+  translationKeys: string[]
 }

package/src/i18n/locals.ts

@@ -4,7 +4,7 @@ import config from "virtual:lightnet/config"
 import { resolveDefaultLocale } from "./resolve-default-locale"
 import { resolveLanguage } from "./resolve-language"
 import { resolveLocales } from "./resolve-locales"
-import { useTranslate } from "./translate"
+import { translationKeys, useTranslate } from "./translate"
 
 export const onRequest: MiddlewareHandler = (
   { locals, currentLocale: astroCurrentLocale },
@@ -22,6 +22,7 @@ export const onRequest: MiddlewareHandler = (
       defaultLocale,
       direction,
       locales,
+      translationKeys,
     }
   }
   return next()

package/src/i18n/react/i18n-context.ts

@@ -0,0 +1,32 @@
+import { createContext } from "react"
+
+export type I18n = {
+  t: (key: string) => string
+  currentLocale: string
+  direction: "rtl" | "ltr"
+}
+
+export type I18nConfig = Omit<I18n, "t"> & {
+  translations: Record<string, string>
+}
+
+export const I18nContext = createContext<I18n | undefined>(undefined)
+
+/**
+ * Creates the runtime i18n helpers given a prepared configuration.
+ * Wraps the raw translation dictionary with a lookup that throws on missing keys.
+ */
+export const createI18n = ({
+  translations,
+  currentLocale,
+  direction,
+}: I18nConfig) => {
+  const t = (key: string) => {
+    const translated = translations[key]
+    if (!translated) {
+      throw new Error(`Missing translation for key ${key}`)
+    }
+    return translated
+  }
+  return { t, currentLocale, direction }
+}

package/src/i18n/react/prepare-i18n-config.ts

@@ -0,0 +1,31 @@
+/**
+ * Prepares the configuration object passed from an Astro page to the React i18n context.
+ * Resolves every requested translation key (supporting wildcard suffixes like `ln.dashboard.*`)
+ * so the React island receives only the strings it needs.
+ *
+ * @param i18n i18n helpers sourced from `Astro.locals`.
+ * @param translationKeys Specific keys (or wildcard groups) required by the React component.
+ * @returns A configuration object containing the resolved config.
+ */
+export const prepareI18nConfig = (
+  { t, translationKeys: allKeys, currentLocale, direction }: I18n,
+  translationKeys: string[],
+) => {
+  const resolveTranslations = (key: string) => {
+    if (key.endsWith("*")) {
+      const keyPrefix = key.slice(0, -1)
+      return allKeys
+        .filter((k) => k.startsWith(keyPrefix))
+        .map((k) => [k, t(k)])
+    }
+    return [[key, t(key)]]
+  }
+
+  return {
+    translations: Object.fromEntries(
+      translationKeys.flatMap(resolveTranslations),
+    ) as Record<string, string>,
+    currentLocale,
+    direction,
+  }
+}

package/src/i18n/react/useI18n.ts

@@ -0,0 +1,15 @@
+import { useContext } from "react"
+
+import { I18nContext } from "./i18n-context"
+
+/**
+ * Retrieves the current i18n helpers from context.
+ * Must be called inside a React tree wrapped with `I18nContext.Provider`, otherwise throws.
+ */
+export const useI18n = () => {
+  const i18n = useContext(I18nContext)
+  if (!i18n) {
+    throw new Error("No i18n context has been provided")
+  }
+  return i18n
+}

package/src/i18n/translate.ts

@@ -22,18 +22,30 @@ const languageCodes = [
 ]
 const defaultLocale = resolveDefaultLocale(config)
 
-await i18next.init({
+const translations = await prepareI18nextTranslations()
+export const translationKeys = [
+  ...new Set(
+    Object.values(translations)
+      .map(({ translation }) => translation)
+      .flatMap((oneLanguageTranslations) =>
+        Object.keys(oneLanguageTranslations),
+      ),
+  ),
+]
+
+const i18n = i18next.createInstance()
+await i18n.init({
   lng: defaultLocale,
   // don't use name spacing
   nsSeparator: false,
   // only use flat keys
   keySeparator: false,
-  resources: await prepareI18nextTranslations(),
+  resources: translations,
 })
 
 export function useTranslate(bcp47: string | undefined): TranslateFn {
   const resolvedLocale = bcp47 ?? defaultLocale
-  const t = i18next.getFixedT<TranslationKey>(resolvedLocale)
+  const t = i18n.getFixedT<TranslationKey>(resolvedLocale)
   const fallbackLng = [
     ...resolveLanguage(resolvedLocale).fallbackLanguages,
     defaultLocale,

package/src/pages/search-page/components/LoadingSkeleton.tsx

@@ -1,6 +1,8 @@
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 
-export default function LoadingSkeleton({ direction }: { direction: string }) {
+export default function LoadingSkeleton() {
+  const { direction } = useI18n()
   return (
     <div className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64">
       <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>

package/src/pages/search-page/components/SearchFilter.astro

@@ -4,7 +4,7 @@ import config from "virtual:lightnet/config"
 import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
-import { provideTranslations } from "../utils/search-filter-translations"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import SearchFilterReact from "./SearchFilter.tsx"
 
 const { t, currentLocale } = Astro.locals.i18n
@@ -49,7 +49,16 @@ if (
 ) {
   initialLanguageFilter = currentLocale
 }
-const translations = provideTranslations(t)
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.search.title",
+  "ln.language",
+  "ln.search.placeholder",
+  "ln.search.all-languages",
+  "ln.type",
+  "ln.search.all-types",
+  "ln.category",
+  "ln.search.all-categories",
+])
 ---
 
 <SearchFilterReact
@@ -57,7 +66,7 @@ const translations = provideTranslations(t)
   languages={languages}
   mediaTypes={mediaTypes}
   categories={categories}
-  translations={translations}
+  i18nConfig={i18nConfig}
   languageFilterEnabled={languageFilterEnabled}
   typesFilterEnabled={typesFilterEnabled}
   categoriesFilterEnabled={categoriesFilterEnabled}

package/src/pages/search-page/components/SearchFilter.tsx

@@ -1,12 +1,9 @@
 import { useRef } from "react"
 
 import Icon from "../../../components/Icon"
+import { createI18n, type I18nConfig } from "../../../i18n/react/i18n-context"
 import { useDebounce } from "../hooks/use-debounce"
 import { useSearchQueryParam } from "../hooks/use-search-query-param"
-import type {
-  TranslationKey,
-  Translations,
-} from "../utils/search-filter-translations"
 import { CATEGORY, LANGUAGE, SEARCH, TYPE } from "../utils/search-query"
 import Select from "./Select"
 
@@ -16,7 +13,7 @@ interface Props {
   languages: FilterValue[]
   categories: FilterValue[]
   mediaTypes: FilterValue[]
-  translations: Translations
+  i18nConfig: I18nConfig
   languageFilterEnabled: boolean
   typesFilterEnabled: boolean
   categoriesFilterEnabled: boolean
@@ -26,7 +23,7 @@ interface Props {
 export default function SearchFilter({
   categories,
   mediaTypes,
-  translations,
+  i18nConfig,
   languages,
   languageFilterEnabled,
   typesFilterEnabled,
@@ -40,7 +37,7 @@ export default function SearchFilter({
 
   const searchInput = useRef<HTMLInputElement | null>(null)
 
-  const t = (key: TranslationKey) => translations[key]
+  const { t } = createI18n(i18nConfig)
 
   const debouncedSetSearch = useDebounce((value: string) => {
     setSearch(value)

package/src/pages/search-page/components/SearchList.astro

@@ -4,10 +4,10 @@ import { getCollection } from "astro:content"
 import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
-import { provideTranslations } from "../utils/search-translations"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import SearchListReact from "./SearchList.tsx"
 
-const { t, currentLocale, direction } = Astro.locals.i18n
+const { t, currentLocale } = Astro.locals.i18n
 
 const categories: Record<string, string> = {}
 for (const { id, name } of await getUsedCategories(currentLocale, t)) {
@@ -34,15 +34,16 @@ const languages = Object.fromEntries(
 
 const mediaItemsTotal = (await getCollection("media")).length
 
-const translations = provideTranslations(t)
 const showLanguage = contentLanguages.length > 1
+
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.search.no-results",
+])
 ---
 
 <SearchListReact
   client:load
-  currentLocale={currentLocale}
-  direction={direction}
-  translations={translations}
+  i18nConfig={i18nConfig}
   categories={categories}
   mediaTypes={mediaTypes}
   languages={languages}

package/src/pages/search-page/components/SearchList.tsx

@@ -1,8 +1,12 @@
 import { useWindowVirtualizer } from "@tanstack/react-virtual"
 import { useEffect, useRef, useState } from "react"
 
+import {
+  createI18n,
+  type I18nConfig,
+  I18nContext,
+} from "../../../i18n/react/i18n-context"
 import { useSearch } from "../hooks/use-search"
-import type { TranslationKey, Translations } from "../utils/search-translations"
 import LoadingSkeleton from "./LoadingSkeleton"
 import SearchListItem, {
   type MediaType,
@@ -10,9 +14,7 @@ import SearchListItem, {
 } from "./SearchListItem"
 
 interface Props {
-  currentLocale: string | undefined
-  translations: Translations
-  direction: "rtl" | "ltr"
+  i18nConfig: I18nConfig
   categories: Record<string, string>
   languages: Record<string, TranslatedLanguage>
   showLanguage: boolean
@@ -21,11 +23,9 @@ interface Props {
 }
 
 export default function SearchList({
-  currentLocale,
   categories,
-  translations,
+  i18nConfig,
   languages,
-  direction,
   showLanguage,
   mediaTypes,
   mediaItemsTotal,
@@ -63,11 +63,10 @@ export default function SearchList({
       observer.disconnect()
     }
   }, [])
-
-  const t = (key: TranslationKey) => translations[key]
+  const i18n = createI18n(i18nConfig)
 
   return (
-    <>
+    <I18nContext.Provider value={i18n}>
       <div ref={listRef} className="px-4 md:px-8">
         <ol
           className="relative w-full divide-y divide-gray-200"
@@ -89,13 +88,11 @@ export default function SearchList({
                 }}
               >
                 {isLoading ? (
-                  <LoadingSkeleton direction={direction} />
+                  <LoadingSkeleton />
                 ) : (
                   <SearchListItem
                     item={item}
-                    direction={direction}
                     showLanguage={showLanguage}
-                    currentLocale={currentLocale}
                     categories={categories}
                     languages={languages}
                     mediaTypes={mediaTypes}
@@ -108,9 +105,9 @@ export default function SearchList({
       </div>
       {!results.length && !isLoading && (
         <div className="mt-24 text-center font-bold text-gray-500">
-          {t("ln.search.no-results")}
+          {i18n.t("ln.search.no-results")}
         </div>
       )}
-    </>
+    </I18nContext.Provider>
   )
 }

package/src/pages/search-page/components/SearchListItem.tsx

@@ -1,5 +1,6 @@
 import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 import { detailsPagePath } from "../../../utils/paths"
 import type { SearchItem } from "../api/search-response"
 
@@ -16,8 +17,6 @@ export type TranslatedLanguage = {
 
 interface Props {
   item: SearchItem
-  currentLocale: string | undefined
-  direction: "rtl" | "ltr"
   categories: Record<string, string>
   languages: Record<string, TranslatedLanguage>
   showLanguage: boolean
@@ -26,13 +25,12 @@ interface Props {
 
 export default function SearchListItem({
   item,
-  currentLocale,
   categories,
   languages,
-  direction,
   showLanguage,
   mediaTypes,
 }: Props) {
+  const { currentLocale, direction } = useI18n()
   const coverImageStyle = mediaTypes[item.type].coverImageStyle
   return (
     <a

package/src/pages/search-page/utils/search-filter-translations.ts

@@ -1,20 +0,0 @@
-const translationKeys = [
-  "ln.search.title",
-  "ln.language",
-  "ln.search.placeholder",
-  "ln.search.all-languages",
-  "ln.type",
-  "ln.search.all-types",
-  "ln.category",
-  "ln.search.all-categories",
-] as const
-
-export type TranslationKey = (typeof translationKeys)[number]
-
-export type Translations = Record<TranslationKey, string>
-
-export const provideTranslations = (translate: (key: string) => string) => {
-  return Object.fromEntries(
-    translationKeys.map((key) => [key, translate(key)]),
-  ) as Translations
-}

package/src/pages/search-page/utils/search-translations.ts

@@ -1,11 +0,0 @@
-const translationKeys = ["ln.search.no-results"] as const
-
-export type TranslationKey = (typeof translationKeys)[number]
-
-export type Translations = Record<TranslationKey, string>
-
-export const provideTranslations = (translate: (key: string) => string) => {
-  return Object.fromEntries(
-    translationKeys.map((key) => [key, translate(key)]),
-  ) as Translations
-}