feat(build): implement build optimization

Author: aymericzip

examples/nextjs-15-app/intlayer.config.ts

@@ -10,11 +10,15 @@ const config: IntlayerConfig = {
     strictMode: 'strict',
   },
   content: {
-    contentDir: ['./', '../../apps'],
+    // contentDir: ['./', '../../apps'],
   },
   editor: {
     applicationURL: 'http://localhost:3000',
   },
+  build: {
+    optimize: process.env.NODE_ENV === 'production',
+    activateDynamicImport: true,
+  },
 };
 
 export default config;

examples/vite-react-app/intlayer.config.ts

@@ -18,6 +18,10 @@ const config: IntlayerConfig = {
     clientId: process.env.INTLAYER_CLIENT_ID,
     clientSecret: process.env.INTLAYER_CLIENT_SECRET,
   },
+  build: {
+    optimize: process.env.NODE_ENV === 'production',
+    activateDynamicImport: true,
+  },
 };
 
 export default config;

packages/@intlayer/babel/src/babel-plugin-intlayer.ts

@@ -23,16 +23,66 @@ const PACKAGE_LIST = [
 
 const CALLER_LIST = ['useIntlayer', 'getIntlayer'] as const;
 
+/**
+ * Packages that support dynamic import
+ */
+const PACKAGE_LIST_DYNAMIC = [
+  'react-intlayer',
+  'react-intlayer/client',
+  'react-intlayer/server',
+  'next-intlayer',
+  'next-intlayer/client',
+  'next-intlayer/server',
+] as const;
+
+const STATIC_IMPORT_FUNCTION = {
+  getIntlayer: 'getDictionary',
+  useIntlayer: 'useDictionary',
+} as const;
+
+const DYNAMIC_IMPORT_FUNCTION = {
+  useIntlayer: 'useDictionaryDynamic',
+} as const;
+
 /* ────────────────────────────────────────── types ───────────────────────── */
 
 type State = PluginPass & {
-  opts: { dictionariesDir: string; dictionariesEntryPath: string };
-  /** map key → generated ident (per-file) */
-  _newImports?: Map<string, t.Identifier>;
+  opts: {
+    /**
+     * The path to the dictionaries directory.
+     */
+    dictionariesDir: string;
+    /**
+     * The path to the dictionaries entry file.
+     */
+    dictionariesEntryPath: string;
+    /**
+     * The path to the dictionaries directory.
+     */
+    dynamicDictionariesDir: string;
+    /**
+     * The path to the dynamic dictionaries entry file.
+     */
+    dynamicDictionariesEntryPath: string;
+    /**
+     * If true, the plugin will activate the dynamic import of the dictionaries.
+     */
+    activateDynamicImport?: boolean;
+    /**
+     * Files list to traverse.
+     */
+    filesList?: string[];
+  };
+  /** map key → generated ident (per-file) for static imports */
+  _newStaticImports?: Map<string, t.Identifier>;
+  /** map key → generated ident (per-file) for dynamic imports */
+  _newDynamicImports?: Map<string, t.Identifier>;
   /** whether the current file imported *any* intlayer package */
   _hasValidImport?: boolean;
   /** whether the current file *is* the dictionaries entry file */
   _isDictEntry?: boolean;
+  /** whether dynamic helpers are active for this file */
+  _useDynamicHelpers?: boolean;
 };
 
 /* ────────────────────────────────────────── helpers ─────────────────────── */
@@ -49,10 +99,15 @@ const makeIdent = (key: string): t.Identifier => {
 
 const computeRelativeImport = (
   fromFile: string,
-  dictDir: string,
-  key: string
+  dictionariesDir: string,
+  dynamicDictionariesDir: string,
+  key: string,
+  isDynamic = false
 ): string => {
-  const jsonPath = join(dictDir, `${key}.json`);
+  const jsonPath = isDynamic
+    ? join(dynamicDictionariesDir, `${key}.mjs`)
+    : join(dictionariesDir, `${key}.json`);
+
   let rel = relative(dirname(fromFile), jsonPath).replace(/\\/g, '/'); // win →
   if (!rel.startsWith('./') && !rel.startsWith('../')) rel = `./${rel}`;
   return rel;
@@ -64,28 +119,70 @@ const computeRelativeImport = (
  * Babel plugin that transforms `useIntlayer/getIntlayer` calls into
  * `useDictionary/getDictionary` and auto-imports the required JSON dictionaries.
  *
- * **New behaviour**: if the currently processed file matches `dictionariesEntryPath`,
- * its entire contents are replaced with a simple `export default {}` so that it
- * never contains stale or circular references.
- *
- * The **critical detail** (bug-fix) is that we still **only rewrite** an import
- * specifier when its *imported* name is `useIntlayer`/`getIntlayer`.
  *
  * This means cases like:
+ *
+ * ```ts
+ * import { getIntlayer } from 'intlayer';
+ * import { useIntlayer } from 'react-intlayer';
+ *
+ * // ...
+ *
+ * const content1 = getIntlayer('app');
+ * const content2 = useIntlayer('app');
+ * ```
+ *
+ * will be transformed into:
+ *
  * ```ts
- * import { useDictionary as useIntlayer } from 'react-intlayer';
+ * import _dicHash from '../../.intlayer/dictionaries/app.mjs';
+ * import { getDictionary as getIntlayer } from 'intlayer';
+ * import { useDictionaryDynamic as useIntlayer } from 'react-intlayer';
+ *
+ * // ...
+ *
+ * const content1 = getIntlayer(_dicHash);
+ * const content2 = useIntlayer(_dicHash)
+ * ```
+ *
+ * Or if the `activateDynamicImport` option is enabled:
+ *
+ * ```ts
+ * import _dicHash from '../../.intlayer/dynamic_dictionaries/app.mjs';
+ * import _dicHash_dyn from '../../.intlayer/dictionaries/app.mjs';
+ *
+ * import { useDictionary as getIntlayer } from 'intlayer';
+ * import { useDictionaryDynamic as useIntlayer } from 'react-intlayer';
+ *
+ * // ...
+ *
+ * const content1 = getIntlayer(_dicHash);
+ * const content2 = useIntlayer(_dicHash_dyn, 'app');
  * ```
- * —where `useIntlayer` is merely an *alias* or re-export—are left untouched
- * because `imported.name` is `useDictionary`.
  */
 export const intlayerBabelPlugin = (): PluginObj<State> => {
   return {
     name: 'babel-plugin-intlayer-transform',
 
     pre() {
-      this._newImports = new Map();
+      this._newStaticImports = new Map();
+      this._newDynamicImports = new Map();
+      this._isIncluded = false;
       this._hasValidImport = false;
       this._isDictEntry = false;
+      this._useDynamicHelpers = false;
+
+      // If filesList is provided, check if current file is included
+      const filename = this.file.opts.filename;
+      if (this.opts.filesList && filename) {
+        const isIncluded = this.opts.filesList.includes(filename);
+
+        if (!isIncluded) {
+          // Force _isIncluded to false to skip processing
+          this._isIncluded = false;
+          return;
+        }
+      }
     },
 
     visitor: {
@@ -108,13 +205,39 @@ export const intlayerBabelPlugin = (): PluginObj<State> => {
         exit(programPath, state) {
           if (state._isDictEntry) return; // nothing else to do – already replaced
           if (!state._hasValidImport) return; // early-out if we touched nothing
+          if (!state._isIncluded) return; // early-out if file is not included
 
           const file = state.file.opts.filename!;
-          const dictDir = state.opts.dictionariesDir;
+          const dictionariesDir = state.opts.dictionariesDir;
+          const dynamicDictionariesDir = state.opts.dynamicDictionariesDir;
           const imports: t.ImportDeclaration[] = [];
 
-          for (const [key, ident] of state._newImports!) {
-            const rel = computeRelativeImport(file, dictDir, key);
+          // Generate static imports (for getIntlayer and useIntlayer when not using dynamic)
+          for (const [key, ident] of state._newStaticImports!) {
+            const rel = computeRelativeImport(
+              file,
+              dictionariesDir,
+              dynamicDictionariesDir,
+              key,
+              false // Always static
+            );
+            imports.push(
+              t.importDeclaration(
+                [t.importDefaultSpecifier(t.identifier(ident.name))],
+                t.stringLiteral(rel)
+              )
+            );
+          }
+
+          // Generate dynamic imports (for useIntlayer when using dynamic helpers)
+          for (const [key, ident] of state._newDynamicImports!) {
+            const rel = computeRelativeImport(
+              file,
+              dictionariesDir,
+              dynamicDictionariesDir,
+              key,
+              true // Always dynamic
+            );
             imports.push(
               t.importDeclaration(
                 [t.importDefaultSpecifier(t.identifier(ident.name))],
@@ -133,8 +256,8 @@ export const intlayerBabelPlugin = (): PluginObj<State> => {
             if (
               t.isExpressionStatement(stmt) &&
               t.isStringLiteral(stmt.expression) &&
-              (stmt.expression.value === 'use client' ||
-                stmt.expression.value === 'use server')
+              !stmt.expression.value.startsWith('import') &&
+              !stmt.expression.value.startsWith('require')
             ) {
               insertPos += 1;
             } else {
@@ -165,15 +288,40 @@ export const intlayerBabelPlugin = (): PluginObj<State> => {
             ? spec.imported.name
             : (spec.imported as t.StringLiteral).value;
 
-          if (importedName === 'useIntlayer') {
-            spec.imported = t.identifier('useDictionary');
-          } else if (importedName === 'getIntlayer') {
-            spec.imported = t.identifier('getDictionary');
+          const activateDynamicImport = state.opts.activateDynamicImport;
+          // Determine whether this import should use the dynamic helpers. We
+          // only switch to the dynamic helpers when (1) the option is turned
+          // on AND (2) the package we are importing from supports the dynamic
+          // helpers.
+          const shouldUseDynamicHelpers =
+            activateDynamicImport && PACKAGE_LIST_DYNAMIC.includes(src as any);
+
+          // Remember for later (CallExpression) whether we are using the dynamic helpers
+          if (shouldUseDynamicHelpers) {
+            state._useDynamicHelpers = true;
+          }
+
+          const helperMap = shouldUseDynamicHelpers
+            ? ({
+                ...STATIC_IMPORT_FUNCTION,
+                ...DYNAMIC_IMPORT_FUNCTION,
+              } as Record<string, string>)
+            : (STATIC_IMPORT_FUNCTION as Record<string, string>);
+
+          const newIdentifier = helperMap[importedName];
+
+          // Only rewrite when we actually have a mapping for the imported
+          // specifier (ignore unrelated named imports).
+          if (newIdentifier) {
+            // Keep the local alias intact (so calls remain `useIntlayer` /
+            // `getIntlayer`), but rewrite the imported identifier so it
+            // points to our helper implementation.
+            spec.imported = t.identifier(newIdentifier);
           }
         }
       },
 
-      /* 2. Replace calls: useIntlayer("foo") → useDictionary(_hash) */
+      /* 2. Replace calls: useIntlayer("foo") → useDictionary(_hash) or useDictionaryDynamic(_hash, "foo") */
       CallExpression(path, state) {
         if (state._isDictEntry) return; // skip if entry file – already handled
 
@@ -182,23 +330,50 @@ export const intlayerBabelPlugin = (): PluginObj<State> => {
         if (!CALLER_LIST.includes(callee.name as any)) return;
 
         // Ensure we ultimately emit helper imports for files that *invoke*
-        // the hooks, even if they didn’t import them directly (edge cases with
+        // the hooks, even if they didn't import them directly (edge cases with
         // re-exports).
         state._hasValidImport = true;
 
         const arg = path.node.arguments[0];
         if (!arg || !t.isStringLiteral(arg)) return; // must be literal
 
         const key = arg.value;
-        // per-file cache
-        let ident = state._newImports!.get(key);
-        if (!ident) {
-          ident = makeIdent(key);
-          state._newImports!.set(key, ident);
-        }
+        const useDynamic = Boolean(state._useDynamicHelpers);
 
-        // replace first arg with ident
-        path.node.arguments[0] = t.identifier(ident.name);
+        // Determine if this specific call should use dynamic imports
+        const shouldUseDynamicForThisCall =
+          callee.name === 'useIntlayer' && useDynamic;
+
+        let ident: t.Identifier;
+
+        if (shouldUseDynamicForThisCall) {
+          // Use dynamic imports for useIntlayer when dynamic helpers are enabled
+          let dynamicIdent = state._newDynamicImports!.get(key);
+          if (!dynamicIdent) {
+            // Create a unique identifier for dynamic imports by appending a suffix
+            const hash = getFileHash(key);
+            dynamicIdent = t.identifier(`_${hash}_dyn`);
+            state._newDynamicImports!.set(key, dynamicIdent);
+          }
+          ident = dynamicIdent;
+
+          // Dynamic helper: first argument is the dictionary, second is the key.
+          path.node.arguments = [
+            t.identifier(ident.name),
+            ...path.node.arguments,
+          ];
+        } else {
+          // Use static imports for getIntlayer or useIntlayer when not using dynamic helpers
+          let staticIdent = state._newStaticImports!.get(key);
+          if (!staticIdent) {
+            staticIdent = makeIdent(key);
+            state._newStaticImports!.set(key, staticIdent);
+          }
+          ident = staticIdent;
+
+          // Static helper (useDictionary / getDictionary): replace key with ident.
+          path.node.arguments[0] = t.identifier(ident.name);
+        }
       },
     },
   };

packages/@intlayer/chokidar/src/filterDictionaryLocales.ts

@@ -17,7 +17,10 @@ const filterTranlationsPlugin = (locales: Locales[] | Locales): Plugins => ({
     const isSingleLocale = localesArray.length === 1;
 
     if (isSingleLocale) {
-      return translationMap[localesArray[0] as Locales];
+      return deepTransformNode(
+        translationMap[localesArray[0] as Locales],
+        props
+      );
     }
 
     const filteredTranslationMap = Object.fromEntries(

packages/@intlayer/chokidar/src/getBuiltDynamicDictionariesPath.ts

@@ -16,8 +16,10 @@ export const getBuiltDynamicDictionariesPath = (
     mkdirSync(mainDir, { recursive: true });
   }
 
+  const extension = format === 'cjs' ? 'cjs' : 'mjs';
+
   const dictionariesPath: string[] = fg.sync(
-    `${dynamicDictionariesDir}/**/*.${format}`
+    `${dynamicDictionariesDir}/**/*.${extension}`
   );
 
   return dictionariesPath;