react-intlayer 2.0.0 → 2.0.1

package/src/cli/react-intlayer.ts

@@ -1,60 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * To make the setup easier, we are using craco to override the webpack configuration.
- * This script is used to run the craco scripts with the custom configuration.
- *
- * The script is based on the original craco script from create-react-app.
- */
-
-import spawn from 'cross-spawn';
-
-const args = process.argv.slice(2);
-const scriptIndex = args.findIndex(
-  (x) => x === 'build' || x === 'start' || x === 'test'
-);
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
-
-switch (script) {
-  case 'build':
-  case 'start':
-  case 'test': {
-    const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
-    const scriptPath = require.resolve(`@craco/craco/dist/scripts/${script}`);
-    const scriptArgs = args.slice(scriptIndex + 1);
-    const processArgs = nodeArgs
-      .concat(scriptPath)
-      .concat([
-        ...scriptArgs,
-        '--config',
-        './node_modules/react-intlayer/dist/cjs/craco/craco.config.cjs',
-      ]);
-
-    const child = spawn.sync('node', processArgs, { stdio: 'inherit' });
-
-    if (child.signal) {
-      if (child.signal === 'SIGKILL') {
-        console.info(`
-                The build failed because the process exited too early.
-                This probably means the system ran out of memory or someone called
-                \`kill -9\` on the process.
-            `);
-      } else if (child.signal === 'SIGTERM') {
-        console.info(`
-                The build failed because the process exited too early.
-                Someone might have called  \`kill\` or \`killall\`, or the system could
-                be shutting down.
-            `);
-      }
-
-      process.exit(1);
-    }
-
-    process.exit(child.status ?? undefined);
-    break;
-  }
-  default:
-    console.info(`Unknown script "${script}".`);
-    console.info('Perhaps you need to update craco?');
-    break;
-}

package/src/client/ContentEditionLayout.tsx

@@ -1,15 +0,0 @@
-import {
-  ContentEditionLayout as ContentEditionLayoutBase,
-  type ContentEditionLayoutProps,
-} from 'intlayer-editor/client';
-import type { FC } from 'react';
-
-const BlankLayout: FC<ContentEditionLayoutProps> = ({ children }) => (
-  <>{children}</>
-);
-
-// intlayer-editor is an optional dependency. If it's not installed, return the blank layout
-export const ContentEditionLayout: FC<ContentEditionLayoutProps> =
-  typeof ContentEditionLayoutBase === 'undefined'
-    ? BlankLayout
-    : (ContentEditionLayoutBase as typeof ContentEditionLayout);

package/src/client/IntlayerClientProvider.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { getConfiguration, type Locales } from '@intlayer/config/client';
-import {
-  type PropsWithChildren,
-  createContext,
-  useContext,
-  useMemo,
-  type FC,
-  useState,
-  useCallback,
-} from 'react';
-import { ContentEditionLayout } from './ContentEditionLayout';
-import { localeCookie, setLocaleCookie } from './useLocaleCookie';
-
-type IntlayerValue = {
-  locale: Locales;
-  setLocale: (newLocale: Locales) => void;
-};
-
-/**
- * Context that store the current locale on the client side
- */
-export const IntlayerClientContext = createContext<IntlayerValue>({
-  locale: localeCookie ?? getConfiguration().internationalization.defaultLocale,
-  setLocale: () => null,
-});
-
-/**
- * Hook that provides the current locale
- */
-export const useIntlayerContext = () => useContext(IntlayerClientContext);
-
-export type IntlayerClientProviderProps = PropsWithChildren & {
-  locale?: Locales;
-};
-
-/**
- * Provider that store the current locale on the client side
- */
-export const IntlayerClientProvider: FC<IntlayerClientProviderProps> = ({
-  locale,
-  children,
-}) => {
-  const { defaultLocale, locales: availableLocales } =
-    getConfiguration().internationalization;
-
-  const [currentLocale, setCurrentLocale] = useState(
-    locale ?? localeCookie ?? defaultLocale
-  );
-
-  const setLocale = useCallback(
-    (newLocale: Locales) => {
-      if (currentLocale.toString() === newLocale.toString()) return;
-
-      if (!availableLocales.includes(newLocale)) {
-        console.error(`Locale ${locale} is not available`);
-        return;
-      }
-
-      setCurrentLocale(newLocale); // Update state
-      setLocaleCookie(newLocale); // Optionally set cookie for persistence
-    },
-    [availableLocales, currentLocale, locale]
-  );
-
-  const value: IntlayerValue = useMemo<IntlayerValue>(
-    () => ({ locale: currentLocale, setLocale }),
-    [currentLocale, setLocale]
-  );
-
-  return (
-    <IntlayerClientContext.Provider value={value}>
-      <ContentEditionLayout
-        locale={currentLocale}
-        setLocale={setLocale}
-        localeList={availableLocales}
-      >
-        {children}
-      </ContentEditionLayout>
-    </IntlayerClientContext.Provider>
-  );
-};

package/src/client/getBrowserLocale.tsx

@@ -1,192 +0,0 @@
-import { getConfiguration, type Locales } from '@intlayer/config/client';
-import { localeList } from '@intlayer/core';
-
-export enum LanguageDetector {
-  Querystring = 'querystring',
-  Cookie = 'cookie',
-  LocalStorage = 'localStorage',
-  SessionStorage = 'sessionStorage',
-  Navigator = 'navigator',
-  HtmlTag = 'htmlTag',
-}
-
-// Default settings for the language detector
-type LanguageDetectorOptions = {
-  order?: LanguageDetector[];
-  lookupQuerystring?: string;
-  lookupCookie?: string;
-  lookupLocalStorage?: string;
-  lookupSessionStorage?: string;
-  excludeCacheFor?: string[];
-  htmlTag?: HTMLElement | null;
-};
-
-const getDefaultsOptions = (): LanguageDetectorOptions => {
-  const { middleware } = getConfiguration();
-
-  return {
-    order: [
-      LanguageDetector.Querystring,
-      LanguageDetector.Cookie,
-      LanguageDetector.Navigator,
-      LanguageDetector.HtmlTag,
-    ],
-    lookupQuerystring: 'locale',
-    lookupCookie: middleware.cookieName,
-    htmlTag: document.documentElement,
-  };
-};
-
-// Helper functions for various checks and operations
-const isLocalStorageAvailable = (): boolean => {
-  try {
-    if (typeof window === 'undefined') return false;
-    const testKey = 'intlayer.translate.boo';
-    window.localStorage.setItem(testKey, 'foo');
-    window.localStorage.removeItem(testKey);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-const isSessionStorageAvailable = (): boolean => {
-  try {
-    if (typeof window === 'undefined') return false;
-    const testKey = 'intlayer.translate.boo';
-    window.sessionStorage.setItem(testKey, 'foo');
-    window.sessionStorage.removeItem(testKey);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-// Function to detect language using different detectors
-const detectLanguage = (
-  order: string[],
-  options: LanguageDetectorOptions
-): Record<LanguageDetector, Locales | Locales[]> => {
-  const detected: Record<LanguageDetector, Locales | Locales[]> = {} as Record<
-    LanguageDetector,
-    Locales | Locales[]
-  >;
-
-  const queryStringDetector = () => {
-    if (typeof window === 'undefined') return;
-    const search = window.location.search || '';
-    const params = new URLSearchParams(search);
-    const value = params.get(options.lookupQuerystring ?? '');
-    if (value) {
-      detected[LanguageDetector.Querystring] = value as Locales;
-    }
-  };
-
-  const cookieDetector = () => {
-    if (typeof document === 'undefined') return;
-    const cookies = document.cookie.split(';');
-    const cookieName = `${options.lookupCookie ?? ''}=`;
-    const cookie = cookies.find((c) => c.trim().startsWith(cookieName));
-    if (cookie) {
-      const value = cookie.split('=')[1].trim();
-
-      detected[LanguageDetector.Cookie] = value as Locales;
-    }
-  };
-
-  const localStorageDetector = () => {
-    if (!isLocalStorageAvailable()) return;
-    const value = window.localStorage.getItem(options.lookupLocalStorage ?? '');
-    if (value) {
-      detected[LanguageDetector.LocalStorage] = value as Locales;
-    }
-  };
-
-  const sessionStorageDetector = () => {
-    if (!isSessionStorageAvailable()) return;
-    const value = window.sessionStorage.getItem(
-      options.lookupSessionStorage ?? ''
-    );
-    if (value) {
-      detected[LanguageDetector.SessionStorage] = value as Locales;
-    }
-  };
-
-  const navigatorDetector = () => {
-    if (typeof navigator === 'undefined') return;
-
-    if (navigator.language) {
-      detected[LanguageDetector.Navigator] = navigator.language as Locales;
-    }
-  };
-
-  const htmlTagDetector = () => {
-    const htmlTag = options.htmlTag;
-    if (htmlTag && typeof htmlTag.getAttribute === 'function') {
-      const lang = htmlTag.getAttribute('lang');
-      if (lang) {
-        detected[LanguageDetector.HtmlTag] = lang as Locales;
-      }
-    }
-  };
-
-  // Map detector names to their corresponding functions
-  const detectors: Record<string, () => void> = {
-    [LanguageDetector.Querystring]: queryStringDetector,
-    [LanguageDetector.Cookie]: cookieDetector,
-    [LanguageDetector.LocalStorage]: localStorageDetector,
-    [LanguageDetector.SessionStorage]: sessionStorageDetector,
-    [LanguageDetector.Navigator]: navigatorDetector,
-    [LanguageDetector.HtmlTag]: htmlTagDetector,
-  };
-
-  // Use the provided order to run each detector
-  order.forEach((detectorName) => {
-    detectors[detectorName]?.();
-  });
-
-  return detected;
-};
-
-const getFirstAvailableLocale = (
-  locales: Record<LanguageDetector, Locales | Locales[]>,
-  order: LanguageDetector[]
-): Locales => {
-  const { internationalization } = getConfiguration();
-
-  for (const detector of order) {
-    const localesArray = [locales[detector]].flat() as Locales[];
-
-    for (const locale of localesArray) {
-      if (
-        locale &&
-        (internationalization.locales ?? localeList).includes(locale)
-      ) {
-        return locale;
-      } else if (
-        locale?.includes('-') &&
-        (internationalization.locales ?? localeList).includes(
-          locale.split('-')[0] as Locales
-        )
-      ) {
-        return locale.split('-')[0] as Locales;
-      }
-    }
-  }
-
-  return internationalization.defaultLocale;
-};
-
-/**
- * Core language detector function
- * const detectedLanguages = detectLanguage(['LanguageDetector.Cookie', 'LanguageDetector.LocalStorage'], { lookupCookie: 'myCookie' });
- */
-export const getBrowserLocale = (
-  userOptions: LanguageDetectorOptions | undefined = {}
-): Locales => {
-  const options = { ...getDefaultsOptions(), ...userOptions };
-
-  const locales = detectLanguage(options.order ?? [], options);
-
-  return getFirstAvailableLocale(locales, options.order ?? []);
-};

package/src/client/index.ts

@@ -1,16 +0,0 @@
-export type { IntlayerClientProviderProps } from './IntlayerClientProvider';
-export {
-  IntlayerClientContext as IntlayerClient,
-  useIntlayerContext,
-  IntlayerClientProvider,
-} from './IntlayerClientProvider';
-export { useIntlayer } from './useIntlayer';
-export { useLocaleBase } from './useLocaleBase';
-export { useLocale } from './useLocale';
-export { useTraduction } from './useTraduction';
-export {
-  useLocaleCookie,
-  localeCookie,
-  setLocaleCookie,
-} from './useLocaleCookie';
-export { getBrowserLocale } from './getBrowserLocale';

package/src/client/useContent.ts

@@ -1,20 +0,0 @@
-import type { LanguageContent } from '@intlayer/core';
-import { useLocaleBase } from './useLocaleBase';
-import { useTraduction } from './useTraduction';
-
-/**
- * On the client side, hook to get the translation content based on the locale
- */
-export const useContent = <Content>(
-  languageContent: LanguageContent<Content>
-) => {
-  const { locale } = useLocaleBase();
-
-  const content = useTraduction(languageContent);
-
-  return {
-    locale,
-    content,
-    t: useTraduction,
-  };
-};

package/src/client/useIntlayer.ts

@@ -1,25 +0,0 @@
-'use client';
-
-import type { Locales } from '@intlayer/config/client';
-import { useContext } from 'react';
-import {
-  type DictionaryKeys,
-  useIntlayerBase,
-  type UseIntlayer,
-} from '../useIntlayerBase';
-import { IntlayerClientContext } from './IntlayerClientProvider';
-
-/**
- * On the client 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 client context
- */
-export const useIntlayer: UseIntlayer = <T extends DictionaryKeys>(
-  id: T,
-  locale?: Locales
-) => {
-  const { locale: currentLocale } = useContext(IntlayerClientContext);
-  const localeTarget = locale ?? currentLocale;
-
-  return useIntlayerBase(id, localeTarget);
-};

package/src/client/useLocale.ts

@@ -1,23 +0,0 @@
-'use client';
-
-import { getConfiguration } from '@intlayer/config/client';
-import { localeList } from '@intlayer/core';
-import { useContext } from 'react';
-import { IntlayerClientContext } from './IntlayerClientProvider';
-
-/**
- * On the client side, hook to get the current locale and all related fields
- */
-export const useLocale = () => {
-  const { defaultLocale, locales: availableLocales } =
-    getConfiguration().internationalization;
-  const { locale, setLocale } = useContext(IntlayerClientContext);
-
-  return {
-    locale, // Current locale
-    defaultLocale, // Principal locale defined in config
-    availableLocales, // List of the available locales defined in config
-    localeList, // List of all available locales
-    setLocale, // Function to set the locale
-  };
-};

package/src/client/useLocaleBase.ts

@@ -1,24 +0,0 @@
-'use client';
-
-import { getConfiguration } from '@intlayer/config/client';
-import { localeList } from '@intlayer/core';
-import { useContext } from 'react';
-import { IntlayerClientContext } from './IntlayerClientProvider';
-
-const { defaultLocale, locales: availableLocales } =
-  getConfiguration().internationalization;
-
-/**
- * On the client side, hook to get the current locale and all related fields
- */
-export const useLocaleBase = () => {
-  const { locale, setLocale } = useContext(IntlayerClientContext);
-
-  return {
-    locale, // Current locale
-    defaultLocale, // Principal locale defined in config
-    availableLocales, // List of the available locales defined in config
-    localeList, // List of all available locales
-    setLocale, // Function to set the locale
-  };
-};

package/src/client/useLocaleCookie.ts

@@ -1,32 +0,0 @@
-import { type Locales, getConfiguration } from '@intlayer/config/client';
-import Cookies from 'js-cookie';
-
-const { cookieName } = getConfiguration().middleware;
-
-const cookieAttributes: Cookies.CookieAttributes = {
-  path: '/',
-  expires: undefined,
-  domain: undefined,
-  secure: false,
-  sameSite: 'strict',
-};
-
-/**
- * Get the locale cookie
- */
-export const localeCookie = Cookies.get(cookieName) as Locales | undefined;
-
-/**
- * Set the locale cookie
- */
-export const setLocaleCookie = (locale: Locales) => {
-  Cookies.set(cookieName, locale, cookieAttributes);
-};
-
-/**
- * Hook that provides the locale cookie and a function to set it
- */
-export const useLocaleCookie = () => ({
-  localeCookie,
-  setLocaleCookie,
-});

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,41 +0,0 @@
-import { type QuantityContent, getEnumerationContent } from '@intlayer/core';
-
-/**
- * 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
-  );
-
-  return result;
-};