refactor(editor): optimize dictionary loading for editor and bundle size

Author: aymericzip

packages/@intlayer/api/src/getIntlayerAPI/editor.ts

@@ -1,5 +1,5 @@
-import type { IntlayerConfig } from '@intlayer/config/client';
 import configuration from '@intlayer/config/built';
+import type { IntlayerConfig } from '@intlayer/config/client';
 
 import type {
   // @ts-ignore: intlayer-editor is not built yet
@@ -8,7 +8,6 @@ import type {
   WriteContentDeclarationBody,
   // @ts-ignore: intlayer-editor is not built yet
   WriteContentDeclarationResult,
-  // @ts-ignore: intlayer-editor is not built yet
 } from 'intlayer-editor';
 import { fetcher, type FetcherOptions } from '../fetcher';
 
@@ -40,6 +39,21 @@ export const getEditorAPI = (
     return response.data;
   };
 
+  /**
+   * Get the Intlayer configuration
+   */
+  const getDictionaries = async (
+    otherOptions: FetcherOptions = {}
+  ): Promise<Record<string, any>> => {
+    const response = await fetcher<Record<string, any>>(
+      `${EDITOR_API_ROUTE}/dictionary`,
+      authAPIOptions,
+      otherOptions
+    );
+
+    return response.data;
+  };
+
   /**
    * Adds a new dictionary to the database.
    * @param dictionary - Dictionary data.
@@ -59,6 +73,7 @@ export const getEditorAPI = (
     );
 
   return {
+    getDictionaries,
     getConfiguration,
     writeDictionary,
   };

packages/@intlayer/api/src/getIntlayerAPI/index.ts

@@ -23,8 +23,8 @@ export const getIntlayerAPI = (
   stripe: getStripeAPI(authAPIOptions, intlayerConfig),
   ai: getAiAPI(authAPIOptions, intlayerConfig),
   tag: getTagAPI(authAPIOptions, intlayerConfig),
-  editor: getEditorAPI(authAPIOptions, intlayerConfig),
   search: getSearchAPI(authAPIOptions, intlayerConfig),
+  editor: getEditorAPI(authAPIOptions, intlayerConfig),
 });
 
 export type IntlayerAPI = ReturnType<typeof getIntlayerAPI>;

packages/@intlayer/design-system/src/hooks/intlayerAPIHooks.ts

@@ -728,6 +728,14 @@ export const useAutocomplete = (
   args?: UseAsyncOptions<IntlayerAPI['ai']['autocomplete']>
 ) => useAppAsync('autocomplete', useIntlayerAuth().ai.autocomplete, args);
 
+/**
+ * Search
+ */
+
+export const useSearchDoc = (
+  args?: UseAsyncOptions<IntlayerAPI['search']['searchDoc']>
+) => useAppAsync('searchDoc', useIntlayerAuth().search.searchDoc, args);
+
 /**
  * Editor
  */
@@ -741,10 +749,11 @@ export const useWriteDictionary = (
     args
   );
 
-/**
- * Search
- */
-
-export const useSearchDoc = (
-  args?: UseAsyncOptions<IntlayerAPI['search']['searchDoc']>
-) => useAppAsync('searchDoc', useIntlayerAuth().search.searchDoc, args);
+export const useGetEditorDictionaries = (
+  args?: UseAsyncOptions<IntlayerAPI['editor']['getDictionaries']>
+) =>
+  useEditorAsync('getDictionaries', useIntlayerAuth().editor.getDictionaries, {
+    store: true,
+    cache: true,
+    ...args,
+  });

packages/intlayer-editor/client/src/components/Editor/DictionaryListDrawer/DictionaryListDrawer.tsx

@@ -2,23 +2,38 @@
 
 import type { Locales } from '@intlayer/config';
 import {
-  RightDrawer,
   Button,
+  RightDrawer,
   useRightDrawerStore,
 } from '@intlayer/design-system';
-import { useGetAllDictionaries } from '@intlayer/design-system/hooks';
-import { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';
+import {
+  useGetAllDictionaries,
+  useGetEditorDictionaries,
+} from '@intlayer/design-system/hooks';
+import {
+  useDictionariesRecordActions,
+  useEditedContent,
+  useFocusDictionary,
+} from '@intlayer/editor-react';
 import { ChevronRight } from 'lucide-react';
-import { type FC, useCallback, useMemo } from 'react';
+import { type FC, useEffect } from 'react';
 import { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer';
 import { dictionaryListDrawerIdentifier } from './dictionaryListDrawerIdentifier';
 
 export const DictionaryListDrawer: FC = () => {
   const { all: dictionaries } = useGetAllDictionaries();
-  const dictionaryKeyList = useMemo(
-    () => Object.keys(dictionaries) as Locales[],
-    [dictionaries]
-  );
+  const dictionaryKeyList = Object.keys(dictionaries) as Locales[];
+
+  const { setLocaleDictionaries } = useDictionariesRecordActions();
+  const { data: localeDictionaries } = useGetEditorDictionaries({
+    autoFetch: true,
+  });
+
+  useEffect(() => {
+    if (!localeDictionaries) return;
+
+    setLocaleDictionaries(localeDictionaries);
+  }, [dictionaries]);
 
   const { close: closeDrawer, open: openDrawer } = useRightDrawerStore();
 
@@ -37,11 +52,8 @@ export const DictionaryListDrawer: FC = () => {
     openDrawer(getDrawerIdentifier(dictionaryKey));
   };
 
-  const isDictionaryEdited = useCallback(
-    (dictionaryKey: string) =>
-      Object.keys(editedContent ?? {}).includes(dictionaryKey),
-    [editedContent]
-  );
+  const isDictionaryEdited = (dictionaryKey: string) =>
+    Object.keys(editedContent ?? {}).includes(dictionaryKey);
 
   return (
     <RightDrawer

packages/intlayer-editor/client/src/components/Editor/EditorLayout.tsx

@@ -2,7 +2,7 @@
 
 import { type Locales } from '@intlayer/config/client';
 import { MessageKey, useCrossFrameState } from '@intlayer/editor-react';
-import type { FC, PropsWithChildren } from 'react';
+import { type FC, type PropsWithChildren } from 'react';
 import { DictionaryEditionDrawerController } from './DictionaryEditionDrawer';
 import { DictionaryListDrawer } from './DictionaryListDrawer';
 

packages/intlayer-editor/server/src/controllers/dictionary.controller.ts

@@ -1,13 +1,49 @@
-import { getConfiguration } from '@intlayer/config';
-import { type Dictionary } from '@intlayer/core';
-import { type ResponseData, formatResponse } from '@utils/responseData';
 import {
   writeContentDeclaration as writeContentDeclarationEditor,
   type DictionaryStatus,
 } from '@intlayer/chokidar';
+import { getConfiguration } from '@intlayer/config';
+import { type Dictionary } from '@intlayer/core';
+import dictionaries from '@intlayer/dictionaries-entry';
+import { formatResponse, type ResponseData } from '@utils/responseData';
 import type { NextFunction, Request, Response } from 'express';
 import { t } from 'express-intlayer';
 
+type GetDictionariesResult = ResponseData<Record<string, Dictionary>>;
+
+/**
+ * Get the Intlayer configuration
+ */
+export const getDictionaries = async (
+  req: Request,
+  res: Response<GetDictionariesResult>,
+  _next: NextFunction
+): Promise<void> => {
+  try {
+    const formattedResponse = formatResponse<Record<string, Dictionary>>({
+      data: dictionaries,
+    });
+
+    res.json(formattedResponse);
+    return;
+  } catch (err) {
+    const errorMessage =
+      (err as { message?: string; status?: number }) ?? 'Internal Server Error';
+
+    const formattedErrorResponse = formatResponse<Record<string, Dictionary>>({
+      error: {
+        message: errorMessage.message ?? 'Internal Server Error',
+        code: 'INTERNAL_SERVER_ERROR',
+        title: 'Internal Server Error',
+      },
+      status: errorMessage.status ?? 500,
+    });
+
+    res.json(formattedErrorResponse);
+    return;
+  }
+};
+
 export type WriteContentDeclarationBody = { dictionary: Dictionary };
 type WriteContentDeclarationResultData = {
   status: DictionaryStatus;

packages/intlayer-editor/server/src/routes/dictionary.routes.ts

@@ -1,7 +1,10 @@
-import { writeContentDeclaration } from '@controllers/dictionary.controller';
+import type { Routes } from '@/types/Routes';
+import {
+  getDictionaries,
+  writeContentDeclaration,
+} from '@controllers/dictionary.controller';
 import { getConfiguration } from '@intlayer/config';
 import { Router } from 'express';
-import type { Routes } from '@/types/Routes';
 
 export const dictionaryRouter: Router = Router();
 
@@ -11,13 +14,22 @@ const getBaseURL = () => `${editor.editorURL}/api/dictionary`;
 
 export const getDictionaryRoutes = () =>
   ({
+    getDictionaries: {
+      urlModel: '/',
+      url: getBaseURL(),
+      method: 'GET',
+    },
     writeContentDeclaration: {
       urlModel: '/',
       url: getBaseURL(),
       method: 'POST',
     },
   }) satisfies Routes;
 
+dictionaryRouter.get(
+  getDictionaryRoutes().getDictionaries.urlModel,
+  getDictionaries
+);
 dictionaryRouter.post(
   getDictionaryRoutes().writeContentDeclaration.urlModel,
   writeContentDeclaration

packages/react-intlayer/src/editor/IntlayerEditorProvider.tsx

@@ -2,19 +2,10 @@
 
 import { IntlayerEventListener } from '@intlayer/api';
 import configuration from '@intlayer/config/built';
-
-import type { Dictionary } from '@intlayer/core';
-/**
- * @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 {
   EditorProvider,
   useChangedContentActions,
   useCrossURLPathSetter,
-  useDictionariesRecordActions,
   useEditorEnabled,
   useIframeClickInterceptor,
 } from '@intlayer/editor-react';
@@ -26,17 +17,6 @@ const IntlayerEditorHooksEnabled: FC = () => {
    */
   useCrossURLPathSetter();
 
-  /**
-   * Locale Dictionaries Messages
-   */
-  const { setLocaleDictionaries } = useDictionariesRecordActions();
-
-  useEffect(() => {
-    setLocaleDictionaries(
-      dictionaries as unknown as Record<string, Dictionary>
-    );
-  }, []);
-
   /**
    * Click Messages
    */