intlayer-editor 2.0.0

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "intlayer-editor",
+  "version": "2.0.0",
+  "private": false,
+  "description": "IntLayer Editor is a tool that allow you to edit your IntLayer declaration files using a graphical interface.",
+  "keywords": [
+    "intlayer",
+    "application",
+    "editor",
+    "typescript",
+    "javascript",
+    "json",
+    "file"
+  ],
+  "homepage": "https://github.com/aypineau/intlayer",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aypineau/intlayer.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Aymeric PINEAU",
+    "url": "https://github.com/aypineau"
+  },
+  "exports": {
+    "./client": {
+      "types": "./dist/esm/client/index.d.mts",
+      "require": "./dist/cjs/client/index.cjs",
+      "import": "./dist/esm/client/index.mjs"
+    },
+    "./server": {
+      "types": "./dist/esm/server/index.d.mts",
+      "require": "./dist/cjs/server/index.cjs",
+      "import": "./dist/esm/server/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "./package.json"
+      ]
+    }
+  },
+  "bin": {
+    "intlayer-editor": "./bin/start-server.js"
+  },
+  "files": [
+    "./dist",
+    "./src",
+    "./bin",
+    "./package.json"
+  ],
+  "dependencies": {
+    "@types/body-parser": "^1.19.5",
+    "body-parser": "^1.20.2",
+    "commander": "^12.0.0",
+    "express": "^4.19.2",
+    "lucide-react": "^0.376.0",
+    "magic-regexp": "^0.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5.91.0",
+    "zustand": "^4.5.2",
+    "@intlayer/config": "^2.0.0",
+    "@intlayer/core": "^2.0.0",
+    "@intlayer/design-system": "^2.0.0",
+    "@intlayer/dictionaries-entry": "^2.0.0",
+    "intlayer": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/generator": "7.24.4",
+    "@babel/parser": "7.24.4",
+    "@babel/types": "7.24.0",
+    "@changesets/changelog-github": "0.5.0",
+    "@changesets/cli": "2.27.1",
+    "@types/babel__generator": "^7.6.8",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "rimraf": "5.0.5",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "@utils/eslint-config": "^1.0.1",
+    "@utils/ts-config": "^1.0.1"
+  },
+  "engines": {
+    "node": ">=14.18"
+  },
+  "bug": {
+    "url": "https://github.com/aypineau/intlayer/issues"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf ./dist",
+    "dev": "tsup --watch",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs",
+    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --fix",
+    "prettier": "prettier --check src",
+    "prettier:fix": "prettier --write src",
+    "serve": "webpack serve --config ./webpack.config.ts",
+    "start:dev": "node --experimental-specifier-resolution=node --loader ts-node/esm --watch src/index.ts",
+    "transpile": "webpack --config ./webpack.config.ts",
+    "typecheck": "tsup--project ./tsconfig.json --noEmit",
+    "watch": "webpack --config ./webpack.config.ts --watch"
+  }
+}

package/src/client/ContentEditionLayout.tsx

@@ -0,0 +1,26 @@
+import type { Locales } from '@intlayer/config/client';
+import type { FC, ReactNode } from 'react';
+import { EditionPanel } from './EditionPanel/index';
+
+export type ContentEditionLayoutProps = {
+  children?: ReactNode;
+  locale: Locales;
+  localeList: Locales[];
+  setLocale: (locale: Locales) => void;
+};
+
+export const ContentEditionLayout: FC<ContentEditionLayoutProps> = ({
+  children,
+  locale,
+  setLocale,
+  localeList,
+}) => (
+  <>
+    {children}
+    <EditionPanel
+      locale={locale}
+      localeList={localeList}
+      setLocale={setLocale}
+    />
+  </>
+);

package/src/client/ContentSelectorWrapper.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import type { KeyPath } from '@intlayer/core';
+import { ContentSelector } from '@intlayer/design-system';
+import type { FC } from 'react';
+import { useEditedContentStore } from './EditionPanel/useEditedContentStore';
+import { useEditionPanelStore } from './EditionPanel/useEditionPanelStore';
+
+type ContentSelectorWrapperProps = {
+  children: string;
+  dictionaryId: string;
+  dictionaryPath: string;
+  keyPath: KeyPath[];
+};
+
+export const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({
+  children,
+  dictionaryId,
+  dictionaryPath,
+  keyPath,
+}) => {
+  const { setFocusedContent } = useEditionPanelStore();
+  const handleSelect = () =>
+    setFocusedContent({
+      dictionaryId,
+      dictionaryPath,
+      keyPath,
+    });
+
+  const { getEditedContentValue } = useEditedContentStore();
+  const editedValue = getEditedContentValue(dictionaryPath, keyPath);
+
+  return (
+    <ContentSelector onSelect={handleSelect}>
+      {editedValue ?? children}
+    </ContentSelector>
+  );
+};

package/src/client/EditionPanel/EditionPanel.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import type { Locales } from '@intlayer/config/client';
+import type { ContentModule } from '@intlayer/core';
+import {
+  useRightDrawerStore,
+  RightDrawer,
+  DictionaryEditor,
+  LocaleSwitcher,
+} from '@intlayer/design-system';
+/**
+ * @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 FC, useEffect } from 'react';
+import { useEditorServer } from '../useEditorServer';
+import { useEditedContentStore } from './useEditedContentStore';
+import { useEditionPanelStore } from './useEditionPanelStore';
+
+type EditionPanelProps = {
+  locale: Locales;
+  localeList: Locales[];
+  setLocale: (locale: Locales) => void;
+};
+
+export const EditionPanel: FC<EditionPanelProps> = ({
+  locale,
+  localeList,
+  setLocale,
+}) => {
+  const { open } = useRightDrawerStore();
+  const { focusedContent, setFocusedContent } = useEditionPanelStore();
+  const { editedContent, addEditedContent, clearEditedDictionaryContent } =
+    useEditedContentStore();
+  const { editContentRequest } = useEditorServer();
+
+  // Use effect to react to changes in focusedContent
+  useEffect(() => {
+    if (focusedContent !== null) {
+      open(); // Call the open function from useRightDrawerStore
+    }
+  }, [focusedContent, open]); // Depend on focusedContent and open to trigger the effect
+
+  if (!focusedContent) {
+    return null;
+  }
+
+  const dictionary: ContentModule = dictionaries[focusedContent.dictionaryId];
+
+  if (!dictionary?.filePath) {
+    return null;
+  }
+
+  const dictionaryPath = dictionary.filePath;
+  const editedDictionaryContent = editedContent[dictionaryPath] ?? [];
+
+  return (
+    <RightDrawer
+      title={dictionary.id}
+      label={`Edit dictionary ${dictionary.id}`}
+      header={
+        <LocaleSwitcher
+          setLocale={setLocale}
+          locale={locale}
+          localeList={localeList}
+        />
+      }
+    >
+      <DictionaryEditor
+        dictionary={dictionary}
+        locale={locale}
+        focusedKeyPath={focusedContent.keyPath}
+        editedContent={editedDictionaryContent}
+        onFocusKeyPath={(keyPath) =>
+          setFocusedContent({ ...focusedContent, keyPath })
+        }
+        onContentChange={(keyPath, newValue) =>
+          addEditedContent(dictionaryPath, keyPath, newValue)
+        }
+        onValidEdition={editContentRequest}
+        onCancelEdition={() => {
+          clearEditedDictionaryContent(dictionaryPath);
+          setFocusedContent(null);
+        }}
+      />
+    </RightDrawer>
+  );
+};

package/src/client/EditionPanel/index.ts

@@ -0,0 +1,3 @@
+export * from './EditionPanel';
+export * from './useEditionPanelStore';
+export * from './useEditedContentStore';

package/src/client/EditionPanel/useEditedContentStore.ts

@@ -0,0 +1,98 @@
+import type { KeyPath } from '@intlayer/core';
+import type { FileContent } from '@intlayer/design-system';
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+type DictionaryPath = string;
+
+export type EditedContent = Record<DictionaryPath, FileContent[]>;
+
+type EditedContentStore = {
+  editedContent: EditedContent;
+  addEditedContent: (
+    dictionaryPath: DictionaryPath,
+    keyPath: KeyPath[],
+    newValue: string
+  ) => void;
+  removeEditedContent: (
+    dictionaryPath: DictionaryPath,
+    keyPath: KeyPath[]
+  ) => void;
+  clearEditedDictionaryContent: (dictionaryPath: DictionaryPath) => void;
+  clearEditedContent: () => void;
+  getEditedContentValue: (
+    dictionaryPath: DictionaryPath,
+    keyPath: KeyPath[]
+  ) => string | undefined;
+};
+
+const isSameKeyPath = (keyPath1: KeyPath[], keyPath2: KeyPath[]) =>
+  keyPath1.every(
+    (element, index) =>
+      keyPath2[index] &&
+      keyPath2[index].key === element.key &&
+      keyPath2[index].type === element.type
+  );
+
+export const useEditedContentStore = create(
+  persist<EditedContentStore>(
+    (set, get) => ({
+      editedContent: {},
+      addEditedContent: (dictionaryPath, keyPath, newValue) => {
+        set((state) => {
+          const editedContent = state.editedContent[dictionaryPath] ?? [];
+          return {
+            editedContent: {
+              ...state.editedContent,
+              [dictionaryPath]: [
+                ...editedContent.filter(
+                  (content) => !isSameKeyPath(content.keyPath, keyPath)
+                ),
+                {
+                  keyPath,
+                  newValue,
+                },
+              ],
+            },
+          };
+        });
+      },
+
+      removeEditedContent: (dictionaryPath, keyPath) => {
+        set((state) => {
+          const editedContent = state.editedContent[dictionaryPath] ?? [];
+          return {
+            editedContent: {
+              ...state.editedContent,
+              [dictionaryPath]: editedContent.filter(
+                (content) => content.keyPath !== keyPath
+              ),
+            },
+          };
+        });
+      },
+
+      clearEditedDictionaryContent: (dictionaryPath) => {
+        set((state) => ({
+          editedContent: {
+            ...state.editedContent,
+            [dictionaryPath]: [],
+          },
+        }));
+      },
+
+      clearEditedContent: () => {
+        set({ editedContent: {} });
+      },
+
+      getEditedContentValue: (dictionaryPath, keyPath): string | undefined =>
+        get().editedContent[dictionaryPath]?.find((content) =>
+          isSameKeyPath(content.keyPath, keyPath)
+        )?.newValue,
+    }),
+    {
+      name: 'edited-content-store',
+      storage: createJSONStorage(() => sessionStorage),
+    }
+  )
+);

package/src/client/EditionPanel/useEditionPanelStore.ts

@@ -0,0 +1,19 @@
+import type { KeyPath } from '@intlayer/core';
+import { create } from 'zustand';
+
+type DictionaryPath = string;
+type FileContent = {
+  dictionaryPath: DictionaryPath;
+  dictionaryId: string;
+  keyPath: KeyPath[];
+};
+
+type EditionPanelStore = {
+  focusedContent: FileContent | null;
+  setFocusedContent: (content: FileContent | null) => void;
+};
+
+export const useEditionPanelStore = create<EditionPanelStore>((set) => ({
+  focusedContent: null,
+  setFocusedContent: (content) => set({ focusedContent: content }),
+}));

package/src/client/index.ts

@@ -0,0 +1,4 @@
+export * from './renderContentSelector';
+export * from './EditionPanel/index';
+export * from './ContentEditionLayout';
+export * from './useEditorServer';

package/src/client/renderContentSelector.tsx

@@ -0,0 +1,17 @@
+import type { KeyPath } from '@intlayer/core';
+import { ContentSelectorWrapper } from './ContentSelectorWrapper';
+
+export const renderContentEditor = (
+  content: string,
+  dictionaryId: string,
+  dictionaryPath: string,
+  keyPath: KeyPath[]
+) => (
+  <ContentSelectorWrapper
+    dictionaryId={dictionaryId}
+    dictionaryPath={dictionaryPath}
+    keyPath={keyPath}
+  >
+    {content}
+  </ContentSelectorWrapper>
+);

package/src/client/useEditorServer.ts

@@ -0,0 +1,31 @@
+import { getConfiguration } from '@intlayer/config/client';
+import { useEditedContentStore } from './EditionPanel/useEditedContentStore';
+
+export const useEditorServer = () => {
+  const { editedContent, clearEditedContent } = useEditedContentStore();
+
+  const editContentRequest = async () => {
+    const {
+      editor: { port },
+    } = getConfiguration();
+
+    await fetch(`http://localhost:${port}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(editedContent),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Failed to edit content');
+        }
+        clearEditedContent();
+      })
+      .catch((error) => {
+        console.error('Failed to edit content:', error);
+      });
+  };
+
+  return { editContentRequest };
+};

package/src/server/content-editor.ts

@@ -0,0 +1,209 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { createRequire } from 'module';
+import { parse } from '@babel/parser';
+import type {
+  ObjectExpression,
+  VariableDeclarator,
+  Program,
+  Identifier,
+  StringLiteral,
+  AssignmentExpression,
+  ObjectProperty,
+  CallExpression,
+  ObjectMethod,
+  SpreadElement,
+} from '@babel/types';
+import {
+  NodeType,
+  type KeyPath,
+  type ObjectExpressionNode,
+  type TranslationOrEnumerationNode,
+} from '@intlayer/core';
+import prettier from 'prettier';
+import type { EditedContent } from '../client/index';
+
+const requireFunction =
+  typeof import.meta.url === 'undefined'
+    ? require
+    : createRequire(import.meta.url);
+
+const { default: generate } = requireFunction('@babel/generator');
+
+/**
+ * Helper function to find a nested property in an ObjectExpression based on a key path
+ */
+const findNestedProperty = (
+  obj: ObjectExpression,
+  keyPath: KeyPath[]
+): ObjectExpression | undefined => {
+  let currentObj = obj;
+  for (const key of keyPath) {
+    let foundProperty:
+      | ObjectProperty
+      | ObjectMethod
+      | SpreadElement
+      | undefined;
+
+    if (
+      // if the keyPath is an object, select the related node
+      (key as ObjectExpressionNode).type === 'ObjectExpression'
+    ) {
+      foundProperty = currentObj.properties.find(
+        (prop) =>
+          'key' in prop &&
+          (prop.key as Identifier).name === (key as ObjectExpressionNode).key
+      );
+    }
+
+    if (
+      // if the keypath is a translation or enumeration node, go across the function and select the related node
+      Object.values(NodeType).includes(
+        (key as TranslationOrEnumerationNode).type
+      )
+    ) {
+      foundProperty = (
+        (currentObj as unknown as CallExpression)
+          .arguments[0] as ObjectExpression
+      ).properties.find(
+        (prop) => 'key' in prop && (prop.key as Identifier).name === key.key
+      );
+    }
+
+    if (foundProperty && 'value' in foundProperty) {
+      currentObj = foundProperty.value as ObjectExpression;
+    } else {
+      return undefined;
+    }
+  }
+
+  return currentObj;
+};
+
+/**
+ * Find and update specific content based on key path
+ */
+const findAndUpdate = (
+  objExpr: ObjectExpression,
+  keyPath: KeyPath[],
+  newValue: string
+) => {
+  const lastKey = keyPath[keyPath.length - 1]; // Get the last key in the path
+
+  if (lastKey) {
+    const propertyToUpdate = findNestedProperty(objExpr, keyPath); // Traverse the key path
+
+    if (propertyToUpdate && 'value' in propertyToUpdate) {
+      (propertyToUpdate as unknown as StringLiteral).value = newValue; // Update the value of the specified key
+    }
+  }
+};
+
+/**
+ * Traverse the AST and update based on key path and new value
+ */
+const traverseNode = (node: Program, keyPath: KeyPath[], newValue: string) => {
+  if (Array.isArray(node.body)) {
+    (node.body as unknown as Program[]).forEach((subNode) =>
+      traverseNode(subNode, keyPath, newValue)
+    );
+  } else if (node.body) {
+    traverseNode(node.body, keyPath, newValue);
+  }
+
+  if (
+    // For ES Module (e.g., `const variable = ...;  export default variable`)
+    'declarations' in node
+  ) {
+    (node.declarations as VariableDeclarator[]).forEach((declaration) => {
+      if (declaration.init?.type === 'ObjectExpression') {
+        findAndUpdate(declaration.init, keyPath, newValue);
+      }
+    });
+  }
+
+  if (
+    // For ES Module (e.g., `export default { ... }`)
+    'declaration' in node &&
+    (node.declaration as ObjectExpression).type === 'ObjectExpression'
+  ) {
+    return findAndUpdate(
+      node.declaration as ObjectExpression,
+      keyPath,
+      newValue
+    );
+  }
+
+  if (
+    // For CommonJS (e.g., `module.exports = ...`)
+    'expression' in node &&
+    (node.expression as AssignmentExpression).right.type === 'ObjectExpression'
+  ) {
+    return findAndUpdate(
+      (node.expression as AssignmentExpression).right as ObjectExpression,
+      keyPath,
+      newValue
+    );
+  }
+
+  // throw new Error('Could not find the specified key path in the AST.');
+};
+
+/**
+ * Format the content with Prettier
+ */
+const format = async (content: string) => {
+  // Resolve the configuration from the project
+  let options: prettier.Options = {};
+
+  try {
+    // Resolve the prettier configuration from the project
+    options =
+      (await prettier.resolveConfig(content, {
+        editorconfig: true,
+      })) ?? {};
+  } catch (error) {
+    console.error('Failed to resolve Prettier configuration:', error);
+  }
+
+  // Add the parser option to the resolved config
+  const config: prettier.Options = { ...options, parser: 'typescript' };
+
+  return prettier.format(content, config);
+};
+
+/**
+ * Edit the content of a file based on the key path and new value
+ */
+export const editContent = async (editedContent: EditedContent) => {
+  // Loop into each dictionary path
+  for (const dictionaryPath of Object.keys(editedContent)) {
+    // Read the file
+    const fileContent = readFileSync(dictionaryPath, 'utf-8');
+
+    // Parse the content with TypeScript support
+    const parsed = parse(fileContent, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    });
+
+    // Loop into each key path and new value
+    for (const { keyPath, newValue } of editedContent[dictionaryPath]) {
+      // Update values based on key paths
+      traverseNode(parsed.program, keyPath, newValue);
+    }
+
+    // Generate the updated code
+    const updatedContent = generate(parsed).code;
+
+    if (fileContent === updatedContent) {
+      console.info(`Could not find specified key path in ${dictionaryPath}.`);
+    } else {
+      const formattedContent = await format(updatedContent);
+
+      // Write back to the file
+      writeFileSync(dictionaryPath, formattedContent, 'utf-8');
+
+      console.info('Updated the file successfully.');
+    }
+  }
+};

package/src/server/index.ts

@@ -0,0 +1,40 @@
+import { getConfiguration } from '@intlayer/config';
+import bodyParser from 'body-parser';
+import express, { type Request, type Response } from 'express';
+import type { EditedContent } from '../client';
+import { editContent } from './content-editor';
+
+export const startIntlayerEditor = () => {
+  const app = express();
+  const {
+    editor: { port },
+  } = getConfiguration();
+
+  app.use(bodyParser.json());
+  app.use(bodyParser.urlencoded({ extended: true }));
+
+  app.post(
+    '/',
+    async (
+      req: Request<undefined, undefined, EditedContent>,
+      res: Response
+    ) => {
+      const editedContent = req.body;
+
+      try {
+        await editContent(editedContent);
+
+        res.send({ success: true, editedContent });
+      } catch (error) {
+        console.error(error);
+        res.status(500).send({ success: false });
+      }
+    }
+  );
+
+  app.listen(port, () => {
+    console.info(
+      `Intlayer editor server is running on http://localhost:${port}`
+    );
+  });
+};