react-intlayer 2.0.0 → 2.0.1

package/src/getTranslation.ts

@@ -1,37 +0,0 @@
-import { type Locales, getConfiguration } from '@intlayer/config/client';
-import { type LanguageContent, getTranslationContent } from '@intlayer/core';
-
-/**
- *
- * Allow to pick a content based on a locale.
- * If not locale found, it will return the content related to the default locale.
- *
- * Return either the content editor, or the content itself depending on the configuration.
- *
- * Usage:
- *
- * ```ts
- * const content = getTranslation<string>({
- * en: 'Hello',
- * fr: 'Bonjour',
- * }, 'fr');
- * // 'Bonjour'
- * ```
- *
- * Using TypeScript:
- * - this function will require each locale to be defined if defined in the project configuration.
- * - If a locale is missing, it will make each existing locale optional and raise an error if the locale is not found.
- */
-export const getTranslation = <Content = string>(
-  languageContent: LanguageContent<Content>,
-  locale?: Locales
-): Content => {
-  const { defaultLocale } = getConfiguration().internationalization;
-
-  const result: Content = getTranslationContent<Content>(
-    languageContent,
-    locale ?? defaultLocale
-  );
-
-  return result;
-};

package/src/processDictionary/contentDictionary.ts

@@ -1,28 +0,0 @@
-import type { TranslationContent } from '@intlayer/core';
-import type { ReactNode } from 'react';
-
-export type ContentValue =
-  | string
-  | {
-      [key: string]: ContentValue;
-    }
-  | TranslationContent<unknown>;
-
-export type Content = Record<string, ContentValue | undefined>;
-
-export type TransformedContentValue =
-  | string
-  | ReactNode
-  | {
-      [key: string]: TransformedContentValue;
-    }
-  | undefined
-  | ((quantity: number) => TransformedContentValue);
-
-export type TransformedContent =
-  | Record<string, TransformedContentValue | undefined>
-  | ReactNode;
-
-export type ContentDictionary = Content & {
-  id: string;
-};

package/src/processDictionary/index.ts

@@ -1,231 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { type Locales, getConfiguration } from '@intlayer/config/client';
-import {
-  NodeType,
-  type QuantityContent,
-  type LanguageContent,
-  findMatchingCondition,
-  type KeyPath,
-} from '@intlayer/core';
-import { renderContentEditor } from 'intlayer-editor/client';
-import { type ReactElement, createElement, type ReactNode } from 'react';
-import { getEnumeration } from '../getEnumeration';
-import { getTranslation } from '../getTranslation';
-import type {
-  Content,
-  ContentValue,
-  TransformedContent,
-  TransformedContentValue,
-} from './contentDictionary';
-
-const {
-  internationalization: { defaultLocale },
-} = getConfiguration();
-
-const processTranslation = (
-  languageContent: LanguageContent<ContentValue>,
-  locale: Locales,
-  dictionaryId: string,
-  dictionaryPath: string,
-  keyPath: KeyPath[] = []
-): TransformedContent => {
-  const translationResult: ContentValue = getTranslation<ContentValue>(
-    languageContent,
-    locale
-  );
-
-  const resultKeyPath: KeyPath[] = [
-    ...keyPath,
-    { type: NodeType.Translation, key: locale },
-  ];
-
-  return processDictionary(
-    translationResult as Content,
-    dictionaryId,
-    dictionaryPath,
-    resultKeyPath,
-    locale
-  );
-};
-
-const processEnumeration = (
-  enumerationContent: QuantityContent<ContentValue>,
-  locale: Locales,
-  dictionaryId: string,
-  dictionaryPath: string,
-  keyPath: KeyPath[] = []
-): TransformedContentValue => {
-  return (quantity: number): TransformedContentValue => {
-    const enumerationResult: ContentValue = getEnumeration<ContentValue>(
-      enumerationContent,
-      quantity
-    );
-
-    const matchingCondition = findMatchingCondition(
-      enumerationContent,
-      quantity
-    );
-
-    const resultKeyPath: KeyPath[] = [
-      ...keyPath,
-      { type: NodeType.Enumeration, key: matchingCondition.toString() },
-    ];
-
-    //
-    return processDictionary(
-      enumerationResult as Content,
-      dictionaryId,
-      dictionaryPath,
-      resultKeyPath,
-      locale
-    );
-  };
-};
-
-const isReactNode = (node: Record<string, unknown>): boolean =>
-  typeof node?.key !== 'undefined' && typeof node?.props !== 'undefined';
-
-export const processNode = (
-  field: ContentValue | undefined,
-  locale: Locales,
-  dictionaryId: string,
-  dictionaryPath: string,
-  keyPath: KeyPath[] = []
-): TransformedContentValue => {
-  if (typeof field === 'object') {
-    if (field.nodeType === NodeType.Translation) {
-      return processTranslation(
-        field as LanguageContent<ContentValue>,
-        locale,
-        dictionaryId,
-        dictionaryPath,
-        keyPath
-      );
-    }
-
-    if (field.nodeType === NodeType.Enumeration) {
-      return processEnumeration(
-        field satisfies QuantityContent<ContentValue>,
-        locale,
-        dictionaryId,
-        dictionaryPath,
-        keyPath
-      );
-    }
-  }
-
-  return processDictionary(
-    field as Content,
-    dictionaryId,
-    dictionaryPath,
-    keyPath,
-    locale
-  );
-};
-
-// This function recursively creates React elements from a given JSON-like structure
-const createReactElement = (element: ReactElement) => {
-  if (typeof element === 'string') {
-    // If it's a string, simply return it (used for text content)
-    return element;
-  }
-
-  // Destructure the component properties
-
-  const convertChildrenAsArray = (element: ReactElement): ReactElement => {
-    if (element?.props && typeof element.props.children === 'object') {
-      const childrenResult: ReactNode[] = [];
-      const { children } = element.props;
-
-      // Create the children elements recursively, if any
-      Object.keys(children).forEach((key) => {
-        childrenResult.push(createReactElement(children[key]));
-      });
-
-      return {
-        ...element,
-        props: { ...element.props, children: childrenResult },
-      };
-    }
-
-    return {
-      ...element,
-      props: { ...element.props, children: element.props.children },
-    };
-  };
-
-  const fixedElement = convertChildrenAsArray(element);
-
-  const { type, props } = fixedElement;
-
-  // Create and return the React element
-  return createElement(type ?? 'div', props, ...props.children);
-};
-
-const traceKeys: string[] = ['filePath', 'id', 'nodeType'];
-
-/**
- * Function that process a dictionary and return the result to be used in the application.
- */
-export const processDictionary = (
-  content: Content,
-  dictionaryId: string,
-  dictionaryPath: string,
-  keyPath: KeyPath[] = [],
-  locale: Locales = defaultLocale
-): TransformedContent => {
-  // If it's a React element, render it
-  if (isReactNode(content)) {
-    return createReactElement(
-      content as unknown as ReactElement
-    ) as unknown as 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];
-
-      if (traceKeys.includes(key)) {
-        result[key] = field as TransformedContentValue;
-        continue;
-      }
-
-      const resultKeyPath: KeyPath[] = [
-        ...keyPath,
-        { type: 'ObjectExpression', key },
-      ];
-
-      result[key] = processNode(
-        field,
-        locale,
-        dictionaryId,
-        dictionaryPath,
-        resultKeyPath
-      );
-    }
-
-    return result;
-  }
-
-  if (typeof content === 'string') {
-    try {
-      // renderContentEditor come from intlayer-editor, which is an optional dependency.
-      // intlayer-editor should be installed in the project to use the content editor.
-      return renderContentEditor(
-        content,
-        dictionaryId,
-        dictionaryPath,
-        keyPath
-      );
-    } catch (e) {
-      // If renderContentEditor not available, it will return the content as is.
-      return content;
-    }
-  }
-
-  // If it's a string, number, or function, return it
-  return content;
-};

package/src/server/IntlayerServerProvider.tsx

@@ -1,36 +0,0 @@
-import { type Locales, getConfiguration } from '@intlayer/config/client';
-import type { FC, PropsWithChildren } from 'react';
-import { createServerContext, getServerContext } from './serverContext';
-
-/**
- * Context that store the current locale on the server side
- */
-export const IntlayerServerContext = createServerContext<Locales>(
-  getConfiguration().internationalization.defaultLocale
-);
-
-/**
- * Hook that provides the current locale
- */
-export const useIntlayer = () => getServerContext(IntlayerServerContext);
-
-/**
- * Get the current locale
- */
-export const locale = getServerContext(IntlayerServerContext);
-
-export type IntlayerServerProviderProps = PropsWithChildren & {
-  locale: Locales;
-};
-
-/**
- * Provider that store the current locale on the server side
- */
-export const IntlayerServerProvider: FC<IntlayerServerProviderProps> = ({
-  children,
-  locale,
-}) => (
-  <IntlayerServerContext.Provider value={locale}>
-    {children}
-  </IntlayerServerContext.Provider>
-);

package/src/server/getLocaleTranslation.ts

@@ -1,22 +0,0 @@
-import { getConfiguration } from '@intlayer/config/client';
-import { type LanguageContent, getTranslationContent } from '@intlayer/core';
-import { IntlayerServerContext } from './IntlayerServerProvider';
-import { getServerContext } from './serverContext';
-
-/**
- * On the server side, get the translation content based on the locale
- */
-export const getLocaleTranslation = <Content>(
-  languageContent: LanguageContent<Content>
-) => {
-  const locale = getServerContext(IntlayerServerContext);
-  const content = getTranslationContent<Content>(
-    languageContent,
-    locale ?? getConfiguration().internationalization.defaultLocale
-  );
-
-  return {
-    locale,
-    content,
-  };
-};

package/src/server/index.ts

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

package/src/server/serverContext.ts

@@ -1,85 +0,0 @@
-/**
- * Creates a new datastore for a given server context.
- * Attempts to closely mimic the `createContext` API.
- *
- * @example
- * const IntlayerServer = createServerContext<string | null>(null);
- *
- * <IntlayerServer.Provider value={locale}>
- *      {children}
- * </IntlayerServer.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(IntlayerServer);
- */
-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

@@ -1,23 +0,0 @@
-import type { Locales } from '@intlayer/config/client';
-import {
-  type DictionaryKeys,
-  useIntlayerBase,
-  type UseIntlayer,
-} from '../useIntlayerBase';
-import { IntlayerServerContext } from './IntlayerServerProvider';
-import { getServerContext } from './serverContext';
-
-/**
- * On the server side, Hook that picking one dictionary by its id and return the content
- *
- * If the locale is not provided, it will use the locale from the server context
- */
-export const useIntlayer: UseIntlayer = <T extends DictionaryKeys>(
-  id: T,
-  locale?: Locales
-) => {
-  const localeTarget =
-    locale ?? getServerContext<Locales>(IntlayerServerContext);
-
-  return useIntlayerBase(id, localeTarget);
-};

package/src/server/useTraduction.ts

@@ -1,34 +0,0 @@
-import type { Locales } from '@intlayer/config/client';
-import type { LanguageContent } from '@intlayer/core';
-import { getTranslation } from '../getTranslation';
-import { IntlayerServerContext } from './IntlayerServerProvider';
-import { getServerContext } from './serverContext';
-
-/**
- * On the server side, hook to get the translation content based on the locale
- *
- * If not locale found, it will return the content related to the default locale.
- *
- * Return either the content editor, or the content itself depending on the configuration.
- *
- * Usage:
- *
- * ```ts
- * const content = useTraduction<string>({
- * en: 'Hello',
- * fr: 'Bonjour',
- * }, 'fr');
- * // 'Bonjour'
- * ```
- *
- * Using TypeScript:
- * - this function will require each locale to be defined if defined in the project configuration.
- * - If a locale is missing, it will make each existing locale optional and raise an error if the locale is not found.
- */
-export const useTraduction = <Content = string>(
-  languageContent: LanguageContent<Content>
-) => {
-  const locale = getServerContext<Locales>(IntlayerServerContext);
-
-  return getTranslation(languageContent, locale);
-};

package/src/useIntlayerBase.ts

@@ -1,38 +0,0 @@
-import type { Locales } from '@intlayer/config/client';
-/**
- * @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 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];
-
-/**
- * Hook that picking one dictionary by its id and return the content.
- */
-export const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(
-  id: T,
-  locale?: Locales
-) => {
-  const dictionary: Content = dictionaries[id];
-
-  return processDictionary(
-    dictionary,
-    id,
-    dictionary.filePath as string,
-    [],
-    locale
-  ) as IntlayerDictionaryTypesConnector[T];
-};

package/src/vite/intlayerPlugin.ts

@@ -1,59 +0,0 @@
-import { join, relative, resolve } from 'path';
-import { watch } from '@intlayer/chokidar';
-import { getConfiguration, formatEnvVariable } from '@intlayer/config';
-import { loadEnv, type Plugin } from 'vite';
-
-// Plugin options type definition
-type PluginOptions = {
-  // Custom options for your plugin, if any
-};
-
-/**
- *
- * A Vite plugin that integrates IntLayer configuration into the build process
- *
- * ```ts
- * // Example usage of the plugin in a Vite configuration
- * export default defineConfig({
- *   plugins: [ intLayerPlugin() ],
- * });
- * ```
- *  */
-export const intLayerPlugin = (_pluginOptions: PluginOptions = {}): Plugin => ({
-  name: 'vite-intlayer-plugin',
-
-  config: (config, { mode }) => {
-    const intlayerConfig = getConfiguration();
-
-    // Set all configuration values as environment variables
-    const env = formatEnvVariable('vite');
-
-    process.env = { ...process.env, ...loadEnv(mode, process.cwd()), ...env };
-
-    const { mainDir, baseDir } = intlayerConfig.content;
-    const dictionariesPath = join(mainDir, 'dictionaries.mjs');
-    const relativeDictionariesPath = relative(baseDir, dictionariesPath);
-
-    // Update Vite's resolve alias
-    config.resolve = {
-      ...config.resolve,
-      alias: {
-        ...config.resolve?.alias,
-        '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),
-      },
-    };
-
-    return config;
-  },
-
-  buildStart: () => {
-    // Code to run when Vite build starts
-    watch({
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      persistent: (import.meta as any).env === 'development',
-    });
-  },
-  configureServer: () => {
-    // Custom server configuration, if needed
-  },
-});