react-intlayer 1.2.1 → 2.0.1

package/src/client/useTraduction.ts

@@ -1,33 +0,0 @@
-import type { LanguageContent } from '@intlayer/core';
-import { useContext } from 'react';
-import { getTranslation } from '../getTranslation';
-import { IntlayerClientContext } from './IntlayerClientProvider';
-
-/**
- * On the client side, Hook that picking one dictionary by its id and return the content.
- *
- * 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:
- *
- * ```tsx
- * 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>
-): Content => {
-  const { locale } = useContext(IntlayerClientContext);
-
-  return getTranslation(languageContent, locale);
-};

package/src/craco/craco.config.ts

@@ -1,11 +0,0 @@
-import type { CracoConfig } from '@craco/types';
-import * as intlayerPlugin from './intlayerCracoPlugin';
-
-// Usage Example
-module.exports = {
-  plugins: [
-    {
-      plugin: intlayerPlugin,
-    },
-  ],
-} satisfies CracoConfig;

package/src/craco/intlayerCracoPlugin.ts

@@ -1,89 +0,0 @@
-import { resolve, relative, join } from 'path';
-import type {
-  CracoConfig,
-  CracoConfigOverride,
-  CracoPlugin,
-  WebpackConfigOverride,
-} from '@craco/types';
-import { getConfiguration, formatEnvVariable } from '@intlayer/config';
-import { IntLayerPlugin as IntLayerWebpackPlugin } from '@intlayer/webpack';
-import webpack, { type Configuration as WebpackConfig } from 'webpack';
-
-// Get IntLayer configuration
-const intlayerConfig = getConfiguration();
-
-// Format environment variables
-const env: Record<string, string> = formatEnvVariable('react_app');
-
-// Custom CRACO plugin function to override webpack configuration
-export const overrideWebpackConfig = ({
-  webpackConfig,
-}: WebpackConfigOverride): WebpackConfig => {
-  webpackConfig.externals = {
-    ...(typeof webpackConfig.externals === 'object'
-      ? webpackConfig.externals
-      : {}),
-    esbuild: 'esbuild',
-    module: 'module',
-    fs: 'fs',
-    vm: 'vm',
-  };
-
-  (webpackConfig.module?.rules ?? []).push({
-    test: /\.node$/,
-    use: 'node-loader',
-  });
-
-  // You can add any custom CRACO plugins here if needed
-  // config.plugins.push(new CustomCracoPlugin());
-
-  return webpackConfig;
-};
-
-// Return a CRACO configuration object
-export const overrideCracoConfig = ({
-  cracoConfig,
-}: CracoConfigOverride): CracoConfig => {
-  const { mainDir, baseDir } = intlayerConfig.content;
-
-  const dictionariesPath = join(mainDir, 'dictionaries.mjs');
-  const relativeDictionariesPath = relative(baseDir, dictionariesPath);
-
-  return {
-    ...cracoConfig,
-    webpack: {
-      ...cracoConfig.webpack,
-      plugins: {
-        ...cracoConfig.webpack?.plugins,
-        add: [new webpack.EnvironmentPlugin(env), new IntLayerWebpackPlugin()],
-      },
-      alias: {
-        ...cracoConfig.webpack?.alias,
-        '@intlayer/dictionaries-entry': resolve('./', relativeDictionariesPath),
-      },
-    },
-  };
-};
-
-/**
- * A CRACO plugin that adds the IntLayer configuration to the webpack configuration and sets the environment variables.
- *
- * Usage:
- *
- * ```ts
- * const cracoConfig: CracoConfig = {
- *  plugins: [
- *   {
- *    plugin: intlayerCracoPlugin(),
- *   },
- *  ],
- * };
- *
- * export default cracoConfig;
- * ```
- *
- */
-export const plugin: CracoPlugin = {
-  overrideCracoConfig,
-  overrideWebpackConfig,
-};

package/src/getEnumeration.ts

@@ -1,46 +0,0 @@
-import { type QuantityContent, getEnumerationContent } from '@intlayer/core';
-import { contentRender } from './ContentEditor/contentRender';
-
-/**
- * Allow to pick a content based on a quantity.
- *
- * Return either the content editor, or the content itself depending on the configuration.
- *
- * Usage:
- *
- * ```ts
- * const content = getEnumeration({
- *  '<=-2.3': 'You have less than -2.3',
- *  '<1': 'You have less than one',
- *  '2': 'You have two',
- *  '>=3': 'You have three or more',
- * }, 2);
- * // 'You have two'
- * ```
- *
- * The order of the keys will define the priority of the content.
- *
- * ```ts
- * const content = getEnumeration({
- *  '<4': 'You have less than four',
- *  '2': 'You have two',
- * }, 2);
- * // 'You have less than four'
- * ```
- *
- */
-export const getEnumeration = <Content>(
-  enumerationContent: QuantityContent<Content>,
-  quantity: number
-): Content => {
-  const result: Content = getEnumerationContent<Content>(
-    enumerationContent,
-    quantity
-  );
-
-  if (typeof result === 'string') {
-    return contentRender(result) as Content;
-  }
-
-  return result;
-};

package/src/getTranslation.ts

@@ -1,42 +0,0 @@
-import { type Locales, getConfiguration } from '@intlayer/config/client';
-import { type LanguageContent, getTranslationContent } from '@intlayer/core';
-import { contentRender } from './ContentEditor/contentRender';
-
-/**
- *
- * 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
-  );
-
-  if (typeof result === 'string') {
-    return contentRender(result) as Content;
-  }
-
-  return result;
-};

package/src/processDictionary/contentDictionary.d.ts

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

package/src/processDictionary/index.ts

@@ -1,144 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { type Locales, getConfiguration } from '@intlayer/config/client';
-import {
-  NodeType,
-  type QuantityContent,
-  type LanguageContent,
-} from '@intlayer/core';
-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 { defaultLocale } = getConfiguration().internationalization;
-
-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);
-  };
-};
-
-const isReactNode = (node: Record<string, unknown>): boolean =>
-  typeof node?.key !== 'undefined' && typeof node?.props !== 'undefined';
-
-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;
-};
-
-// 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);
-};
-
-/**
- * Function that process a dictionary and return the result to be used in the application.
- */
-export const processDictionary = (
-  content: Content,
-  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];
-
-      result[key] = processNode(field, locale);
-    }
-
-    return result;
-  }
-
-  // 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,35 +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,
-    locale
-  ) as IntlayerDictionaryTypesConnector[T];
-};