react-intlayer 1.2.0 → 1.2.1

package/src/processDictionary/index.ts

@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  type Locales,
-  intlayerIntlConfiguration,
-} from '@intlayer/config/client';
+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 {
@@ -17,7 +15,7 @@ import type {
   TransformedContentValue,
 } from './contentDictionary';
 
-const defaultLocale = intlayerIntlConfiguration.defaultLocale;
+const { defaultLocale } = getConfiguration().internationalization;
 
 const processTranslation = (
   languageContent: LanguageContent<ContentValue>,
@@ -46,6 +44,9 @@ const processEnumeration = (
   };
 };
 
+const isReactNode = (node: Record<string, unknown>): boolean =>
+  typeof node?.key !== 'undefined' && typeof node?.props !== 'undefined';
+
 export const processNode = (
   field: ContentValue | undefined,
   locale: Locales
@@ -72,6 +73,45 @@ export const processNode = (
   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.
  */
@@ -79,6 +119,13 @@ 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 = {};
 

package/src/server/IntlayerServerProvider.tsx

@@ -1,7 +1,4 @@
-import {
-  type Locales,
-  intlayerIntlConfiguration,
-} from '@intlayer/config/client';
+import { type Locales, getConfiguration } from '@intlayer/config/client';
 import type { FC, PropsWithChildren } from 'react';
 import { createServerContext, getServerContext } from './serverContext';
 
@@ -9,7 +6,7 @@ import { createServerContext, getServerContext } from './serverContext';
  * Context that store the current locale on the server side
  */
 export const IntlayerServerContext = createServerContext<Locales>(
-  intlayerIntlConfiguration.defaultLocale
+  getConfiguration().internationalization.defaultLocale
 );
 
 /**

package/src/server/getLocaleTranslation.ts

@@ -1,4 +1,4 @@
-import { intlayerIntlConfiguration } from '@intlayer/config/client';
+import { getConfiguration } from '@intlayer/config/client';
 import { type LanguageContent, getTranslationContent } from '@intlayer/core';
 import { IntlayerServerContext } from './IntlayerServerProvider';
 import { getServerContext } from './serverContext';
@@ -12,7 +12,7 @@ export const getLocaleTranslation = <Content>(
   const locale = getServerContext(IntlayerServerContext);
   const content = getTranslationContent<Content>(
     languageContent,
-    locale ?? intlayerIntlConfiguration.defaultLocale
+    locale ?? getConfiguration().internationalization.defaultLocale
   );
 
   return {

package/src/server/useTraduction.ts

@@ -13,12 +13,13 @@ import { getServerContext } from './serverContext';
  *
  * Usage:
  *
- * const content = getTranslation<string>({
+ * ```ts
+ * const content = useTraduction<string>({
  * en: 'Hello',
  * fr: 'Bonjour',
- * },
- * 'fr');
+ * }, 'fr');
  * // 'Bonjour'
+ * ```
  *
  * Using TypeScript:
  * - this function will require each locale to be defined if defined in the project configuration.

package/src/vite/intlayerPlugin.ts

@@ -0,0 +1,59 @@
+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: (server) => {
+    // Custom server configuration, if needed
+  },
+});