react-intlayer 1.0.0

package/src/processDictionary/index.ts

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  type Locales,
+  intlayerIntlConfiguration,
+} from '@intlayer/config/client';
+import {
+  NodeType,
+  type QuantityContent,
+  type LanguageContent,
+} from '@intlayer/core';
+import { getEnumeration } from '../getEnumeration';
+import { getTranslation } from '../getTranslation';
+import type {
+  Content,
+  ContentValue,
+  TransformedContent,
+  TransformedContentValue,
+} from './contentDictionary';
+
+const defaultLocale = intlayerIntlConfiguration.defaultLocale;
+
+const processTranslation = (
+  languageContent: LanguageContent<ContentValue>,
+  locale: Locales
+): TransformedContent => {
+  const translationResult: ContentValue = getTranslation<ContentValue>(
+    languageContent,
+    locale
+  );
+
+  return processDictionary(translationResult as Content, locale);
+};
+
+const processEnumeration = (
+  enumerationContent: QuantityContent<ContentValue>,
+  locale: Locales
+): TransformedContentValue => {
+  return (quantity: number): TransformedContentValue => {
+    const enumerationResult: ContentValue = getEnumeration<ContentValue>(
+      enumerationContent,
+      quantity
+    );
+
+    //
+    return processDictionary(enumerationResult as Content, locale);
+  };
+};
+
+export const processNode = (
+  field: ContentValue | undefined,
+  locale: Locales
+): TransformedContentValue => {
+  if (typeof field !== 'object' || field === null) {
+    return field;
+  }
+
+  if (field.nodeType === NodeType.Translation) {
+    return processTranslation(field as LanguageContent<ContentValue>, locale);
+  }
+
+  if (field.nodeType === NodeType.Enumeration) {
+    return processEnumeration(
+      field satisfies QuantityContent<ContentValue>,
+      locale
+    );
+  }
+
+  if (typeof (field as any).type === 'undefined') {
+    return processDictionary(field as Content, locale);
+  }
+
+  return field as TransformedContentValue;
+};
+
+/**
+ * Function to replace the multi lingual content with content in the current locale
+ */
+export const processDictionary = (
+  content: Content,
+  locale: Locales = defaultLocale
+): TransformedContent => {
+  if (content && typeof content === 'object') {
+    const result: TransformedContent = {};
+
+    // List each key in the content and process it
+    for (const key of Object.keys(content)) {
+      const field = content[key];
+
+      result[key] = processNode(field, locale);
+    }
+
+    return result;
+  }
+
+  // If it's a string, number, or function, return it
+  return content;
+};

package/src/server/LocaleServerContextProvider.tsx

@@ -0,0 +1,24 @@
+import {
+  type Locales,
+  intlayerIntlConfiguration,
+} from '@intlayer/config/client';
+import type { FC, PropsWithChildren } from 'react';
+import { createServerContext, getServerContext } from './serverContext';
+
+export const LocaleServerContext = createServerContext<Locales>(
+  intlayerIntlConfiguration.defaultLocale
+);
+
+export const locale = getServerContext(LocaleServerContext);
+
+export type LocaleServerContextProviderProps = PropsWithChildren & {
+  locale: Locales;
+};
+
+export const LocaleServerContextProvider: FC<
+  LocaleServerContextProviderProps
+> = ({ children, locale }) => (
+  <LocaleServerContext.Provider value={locale}>
+    {children}
+  </LocaleServerContext.Provider>
+);

package/src/server/getLocaleTranslation.ts

@@ -0,0 +1,19 @@
+import { intlayerIntlConfiguration } from '@intlayer/config/client';
+import { type LanguageContent, getTranslationContent } from '@intlayer/core';
+import { LocaleServerContext } from './LocaleServerContextProvider';
+import { getServerContext } from './serverContext';
+
+export const getLocaleTranslation = <Content>(
+  languageContent: LanguageContent<Content>
+) => {
+  const locale = getServerContext(LocaleServerContext);
+  const content = getTranslationContent<Content>(
+    languageContent,
+    locale ?? intlayerIntlConfiguration.defaultLocale
+  );
+
+  return {
+    locale,
+    content,
+  };
+};

package/src/server/index.ts

@@ -0,0 +1,8 @@
+export { getLocaleTranslation as getLocaleContent } from './getLocaleTranslation';
+export { useTraduction } from './useTraduction';
+export {
+  LocaleServerContext,
+  locale,
+  LocaleServerContextProvider,
+} from './LocaleServerContextProvider';
+export { useIntlayer } from './useIntlayer';

package/src/server/serverContext.ts

@@ -0,0 +1,85 @@
+/**
+ * Creates a new datastore for a given server context.
+ * Attempts to closely mimic the `createContext` API.
+ *
+ * @example
+ * const LocaleServerContext = createServerContext<string | null>(null);
+ *
+ * <LocaleServerContext.Provider value={locale}>
+ *      {children}
+ * </LocaleServerContext.Provider>
+ */
+
+import react from 'react';
+
+type CacheType<T> = () => { value: T | undefined };
+
+const cacheFallback = () => () => ({ value: undefined });
+
+export const createServerContext = <T>(defaultValue?: T): ServerContext<T> => {
+  throwInClient();
+
+  const cache = react.cache<CacheType<T>> ?? cacheFallback;
+
+  const getCache = cache(() => ({
+    value: undefined,
+  }));
+
+  return {
+    Provider: ({ children, value }) => {
+      getCache().value = value;
+      return children;
+    },
+    Consumer: ({ children }) => {
+      const store = getCache();
+      return children(store ? store.value : defaultValue);
+    },
+    _storage: getCache,
+    _defaultValue: defaultValue,
+  };
+};
+
+/**
+ * Fetches a value present in a given server context.
+ * Attempts to closely mimic the `useContext` API.
+ *
+ * @example
+ * getServerContext(LocaleServerContext);
+ */
+export const getServerContext = <T>({
+  _storage,
+  _defaultValue,
+}: ServerContext<T>) => {
+  // throwInClient();
+  const store = _storage();
+  if (!store) return _defaultValue;
+  return store.value;
+};
+
+type ServerContext<T> = {
+  Provider: ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: T;
+  }) => React.ReactNode;
+  Consumer: ({
+    children,
+  }: {
+    children: (context: T | undefined) => React.ReactNode;
+  }) => React.ReactNode;
+  _storage: () => { value: T | undefined };
+  _defaultValue: T | undefined;
+};
+
+/**
+ * Throws if called within a client component environment.
+ * Useful to help prevent mistakes.
+ */
+const throwInClient = (): void | never => {
+  // If window.document is defined we're in a client component
+  if (typeof window !== 'undefined') {
+    throw new Error(`createServerContext only works in Server Components`);
+  }
+};

package/src/server/useIntlayer.ts

@@ -0,0 +1,17 @@
+import type { Locales } from '@intlayer/config/client';
+import {
+  type DictionaryKeys,
+  useIntlayerBase,
+  type UseIntlayer,
+} from '../useIntlayerBase';
+import { LocaleServerContext } from './LocaleServerContextProvider';
+import { getServerContext } from './serverContext';
+
+export const useIntlayer: UseIntlayer = <T extends DictionaryKeys>(
+  id: T,
+  locale?: Locales
+) => {
+  const localeTarget = locale ?? getServerContext<Locales>(LocaleServerContext);
+
+  return useIntlayerBase(id, localeTarget);
+};

package/src/server/useTraduction.ts

@@ -0,0 +1,13 @@
+import type { Locales } from '@intlayer/config/client';
+import type { LanguageContent } from '@intlayer/core';
+import { getTranslation } from '../getTranslation';
+import { LocaleServerContext } from './LocaleServerContextProvider';
+import { getServerContext } from './serverContext';
+
+export const useTraduction = <Content>(
+  languageContent: LanguageContent<Content>
+) => {
+  const locale = getServerContext<Locales>(LocaleServerContext);
+
+  return getTranslation(languageContent, locale);
+};

package/src/useIntlayerBase.ts

@@ -0,0 +1,32 @@
+/**
+ * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.
+ * Using an external package allow to alias it in the bundle configuration (such as webpack).
+ * The alias allow hot reload the app (such as nextjs) on any dictionary change.
+ */
+import type { Locales } from '@intlayer/config/client';
+import dictionaries from '@intlayer/dictionaries-entry';
+import type { IntlayerDictionaryTypesConnector } from 'intlayer';
+import type { Content } from './processDictionary/contentDictionary';
+import { processDictionary } from './processDictionary/index';
+
+export type StringFallback<T> = T extends never ? string : T; // If no keys are found, return string to disable error, and accept any string as dictionary key
+export type DictionaryKeys = StringFallback<
+  keyof IntlayerDictionaryTypesConnector
+>;
+
+export type UseIntlayer = <T extends DictionaryKeys>(
+  id: T,
+  locale?: Locales
+) => IntlayerDictionaryTypesConnector[T];
+
+export const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(
+  id: T,
+  locale?: Locales
+) => {
+  const dictionary: Content = dictionaries[id];
+
+  return processDictionary(
+    dictionary,
+    locale
+  ) as IntlayerDictionaryTypesConnector[T];
+};