@intlayer/webpack 1.0.0

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@intlayer/webpack",
+  "version": "1.0.0",
+  "private": false,
+  "description": "Webpack application for IntLayer - Webpack process to transpile TypeScript files to JavaScript files into IntLayer dictionaries.",
+  "keywords": [
+    "intlayer",
+    "webpack",
+    "application",
+    "transpile",
+    "typescript",
+    "javascript",
+    "json",
+    "file"
+  ],
+  "homepage": "https://github.com/aypineau/intlayer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aypineau/intlayer"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Aymeric PINEAU",
+    "url": "https://github.com/aypineau"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.mts",
+      "require": "./dist/cjs/index.cjs",
+      "import": "./dist/esm/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "src/index.ts",
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "./package.json"
+      ]
+    }
+  },
+  "files": [
+    "./dist",
+    "./src",
+    "./bin",
+    "./package.json"
+  ],
+  "dependencies": {
+    "crypto-js": "^4.2.0",
+    "esbuild": "^0.20.2",
+    "esbuild-loader": "^4.1.0",
+    "glob": "^10.3.10",
+    "node-loader": "^2.0.0",
+    "rimraf": "5.0.5",
+    "util": "^0.12.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "yargs": "^17.7.2",
+    "@intlayer/cli": "^1.0.0",
+    "@intlayer/config": "^1.0.0",
+    "@intlayer/core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "0.5.0",
+    "@changesets/cli": "2.27.1",
+    "@types/crypto-js": "^4.2.2",
+    "@types/node": "^20.11.30",
+    "@types/uuid": "^9.0.8",
+    "@types/webpack-watch-files-plugin": "^1.1.3",
+    "@types/yargs": "^17.0.32",
+    "node-polyfill-webpack-plugin": "^3.0.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "webpack-watch-files-plugin": "^1.2.1",
+    "@utils/eslint-config": "^1.0.0",
+    "@utils/ts-config": "^1.0.0"
+  },
+  "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:fix": "prettier --write src/**/*",
+    "serve": "webpack serve --config ./webpack.config.ts",
+    "transpile": "webpack --config ./webpack.config.ts",
+    "typecheck": "tsup--project ./tsconfig.json --noEmit",
+    "watch": "webpack --config ./webpack.config.ts --watch"
+  }
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+import { bundle, startServer, watch } from './scripts/index';
+import { IntLayerPlugin } from './webpack-plugin';
+import { devServerConfig, webpackConfig } from './webpack.config';
+
+export {
+  bundle,
+  watch,
+  startServer,
+  devServerConfig,
+  webpackConfig,
+  IntLayerPlugin,
+};

package/src/scripts/bundle.ts

@@ -0,0 +1,44 @@
+import type { Compiler } from 'webpack';
+
+export const bundle = (compiler: Compiler) =>
+  // Run the compiler
+  compiler.run((err, stats) => {
+    // Handle errors and webpack compilation stats
+    if (err) {
+      console.error('Webpack compilation error:', err);
+      return;
+    }
+
+    console.info('Webpack compilation successful.');
+
+    if (stats)
+      console.info(
+        stats.toString({
+          // Add options here to customize the stats output
+          colors: true,
+        })
+      );
+  });
+
+export const watch = (compiler: Compiler) =>
+  // Run the compiler
+  compiler.watch({}, (err, stats) => {
+    // Handle errors and webpack compilation stats
+    if (err) {
+      console.error('Webpack compilation error:', err);
+      return;
+    }
+
+    console.info('Webpack compilation successful.');
+
+    if (stats)
+      console.info(
+        stats.toString({
+          // Add options here to customize the stats output
+          colors: true,
+        })
+      );
+
+    // After successful compilation, start the server
+    console.info('Watch IntLayer content...');
+  });

package/src/scripts/index.ts

@@ -0,0 +1,2 @@
+export * from './startServer';
+export * from './bundle';

package/src/scripts/startServer.ts

@@ -0,0 +1,14 @@
+import type { Compiler } from 'webpack';
+import { devServerConfig } from '../webpack.config';
+
+const WebpackDevServer = require('webpack-dev-server');
+
+export const startServer = (compiler: Compiler) => {
+  // Create a new instance of webpack-dev-server
+  const devServer = new WebpackDevServer(devServerConfig, compiler);
+
+  // Start the server
+  devServer.startCallback(() => {
+    console.info('Webpack Dev Server is running...');
+  });
+};

package/src/transpiler/dictionary_to_main/createDictionaryList.ts

@@ -0,0 +1,65 @@
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { basename, extname, relative, resolve } from 'path';
+import { getConfiguration } from '@intlayer/config';
+import { sync } from 'glob';
+import { getFileHash } from '../../utils';
+
+const { content } = getConfiguration();
+const { dictionariesDir, mainDir } = content;
+
+/**
+ * This function generates the content of the dictionary list file
+ */
+const generateDictionaryListContent = (
+  dictionaries: string[],
+  format: 'cjs' | 'esm' = 'esm'
+): string => {
+  let content = '';
+
+  const dictionariesRef = dictionaries.map((dictionaryPath) => ({
+    relativePath: relative(mainDir, dictionaryPath),
+    id: basename(dictionaryPath, extname(dictionaryPath)), // Get the base name as the dictionary id
+    hash: `_${getFileHash(dictionaryPath)}`, // Get the hash of the dictionary to avoid conflicts
+  }));
+
+  // Import all dictionaries
+  dictionariesRef.forEach((dictionary) => {
+    if (format === 'esm')
+      content += `import ${dictionary.hash} from '${dictionary.relativePath}';\n`;
+    if (format === 'cjs')
+      content += `const ${dictionary.hash} = require('${dictionary.relativePath}');\n`;
+  });
+
+  content += '\n';
+
+  // Format Dictionary Map
+  const formattedDictionaryMap: string = dictionariesRef
+    .map((dictionary) => `"${dictionary.id}": ${dictionary.hash}`)
+    .join(',\n');
+
+  if (format === 'esm')
+    content += `export default {\n${formattedDictionaryMap}\n};\n`;
+  if (format === 'cjs')
+    content += `module.exports = {\n${formattedDictionaryMap}\n};\n`;
+
+  return content;
+};
+
+/**
+ * This function generates a list of dictionaries in the main directory
+ */
+export const createDictionaryList = () => {
+  // Create main directory if it doesn't exist
+  if (!existsSync(mainDir)) {
+    mkdirSync(mainDir, { recursive: true });
+  }
+
+  const dictionaries: string[] = sync(`${dictionariesDir}/**/*.json`);
+
+  // Create the dictionary list file
+  const cjsContent = generateDictionaryListContent(dictionaries, 'cjs');
+  writeFileSync(resolve(mainDir, 'dictionaries.cjs'), cjsContent);
+
+  const esmContent = generateDictionaryListContent(dictionaries, 'esm');
+  writeFileSync(resolve(mainDir, 'dictionaries.mjs'), esmContent);
+};

package/src/transpiler/dictionary_to_main/index.ts

@@ -0,0 +1 @@
+export * from './createDictionaryList';

package/src/transpiler/dictionary_to_type/createModuleAugmentation.ts

@@ -0,0 +1,70 @@
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { basename, join, relative } from 'path';
+import { getConfiguration } from '@intlayer/config';
+import { sync } from 'glob';
+import { getFileHash, transformToCamelCase } from '../../utils';
+
+const { content } = getConfiguration();
+const { typesDir, moduleAugmentationDir } = content;
+
+export const getTypeName = (id: string): string =>
+  transformToCamelCase(`${id}Content`);
+
+/**
+ * This function generates the content of the module augmentation file
+ */
+const generateTypeIndexContent = (typeFiles: string[]): string => {
+  let content = "import 'intlayer';\n\n";
+
+  const dictionariesRef = typeFiles.map((dictionaryPath) => ({
+    relativePath: relative(moduleAugmentationDir, dictionaryPath),
+    id: basename(dictionaryPath, '.d.ts'), // Get the base name as the dictionary id
+    hash: `_${getFileHash(dictionaryPath)}`, // Get the hash of the dictionary to avoid conflicts
+  }));
+
+  // Import all dictionaries
+  dictionariesRef.forEach((dictionary) => {
+    const typeName = getTypeName(dictionary.id);
+    content += `import type { ${typeName} as ${dictionary.hash} } from '${dictionary.relativePath}';\n`;
+  });
+
+  content += '\n';
+
+  // Format Dictionary Map
+  const formattedDictionaryMap: string = dictionariesRef
+    .map((dictionary) => `    "${dictionary.id}": ${dictionary.hash};`)
+    .join('\n');
+
+  /**
+   * Write the module augmentation to extend the intlayer module with the dictionaries types
+   * Will suggest the type resulting of the dictionaries
+   *
+   * declare module 'intlayer' {
+   *   interface IntlayerDictionaryTypesConnector = {
+   *     dictionaries: {
+   *       id: DictionaryType;
+   *     }
+   * }
+   *
+   * See https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+   */
+  content += `declare module 'intlayer' {\n  interface IntlayerDictionaryTypesConnector {\n${formattedDictionaryMap}\n  };\n};`;
+
+  return content;
+};
+
+/**
+ * This function generates a index file merging all the types
+ */
+export const createModuleAugmentation = () => {
+  // Create main directory if it doesn't exist
+  if (!existsSync(moduleAugmentationDir)) {
+    mkdirSync(moduleAugmentationDir, { recursive: true });
+  }
+
+  const dictionaries: string[] = sync(`${typesDir}/**/*.d.ts`);
+  // Create the dictionary list file
+
+  const tsContent = generateTypeIndexContent(dictionaries);
+  writeFileSync(join(moduleAugmentationDir, 'intlayer.d.ts'), tsContent);
+};

package/src/transpiler/dictionary_to_type/createType.ts

@@ -0,0 +1,140 @@
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+import { getConfiguration } from '@intlayer/config';
+import {
+  NodeType,
+  type Content,
+  type ContentModule,
+  type TypedNode,
+} from '@intlayer/core';
+import { getTypeName } from './createModuleAugmentation';
+
+const { content, internationalization } = getConfiguration();
+const { typesDir } = content;
+
+/**
+ *
+ * This function generates a TypeScript type definition from a JSON object
+ *
+ * Example:
+ *
+ * const input = {
+ *  id: '1',
+ *  name: 'John Doe',
+ *  address: {
+ *      id: '2',
+ *      street: '123 Main St',
+ *      city: 'Springfield',
+ *  }
+ * };
+ *
+ * const result = generateTypeScriptType(input, 'RootObject');
+ * console.log(result);
+ *
+ * Output:
+ *
+ * type RootObject = {
+ *  id: '1',
+ *  name: string,
+ *  address: {
+ *      id: '2',
+ *      street: string,
+ *      city: string,
+ *  },
+ * };
+ *
+ */
+export const generateTypeScriptType = (obj: ContentModule): string => {
+  let typeDefinition = ``;
+
+  const typeName = getTypeName(obj.id);
+
+  typeDefinition += `export type ${typeName} = {\n`;
+  typeDefinition += generateTypeScriptTypeContent(obj);
+  typeDefinition += '};\n\n';
+
+  return typeDefinition;
+};
+
+export const generateTypeScriptTypeContent = (obj: Content): string => {
+  let typeDefinition = ``;
+
+  for (const [key, value] of Object.entries(obj)) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nodeType: NodeType | undefined = (value as TypedNode).nodeType;
+
+    if (
+      // Check if the value is a typed node
+      typeof value === 'object' &&
+      nodeType === NodeType.Translation
+    ) {
+      const tsType =
+        typeof value[internationalization.defaultLocale as keyof typeof value];
+      typeDefinition += `  ${key}: ${tsType},\n`;
+    } else if (
+      // Check if the value is a typed node
+      typeof value === 'object' &&
+      nodeType === NodeType.Enumeration
+    ) {
+      const tsType =
+        typeof value[internationalization.defaultLocale as keyof typeof value];
+
+      typeDefinition += `  ${key}: (quantity: number) => ${tsType},\n`;
+    } else if (
+      // Check if the value is a nested object
+      typeof value === 'object' &&
+      !Array.isArray(value)
+    ) {
+      // Nested object, recurse
+      const nestedType = generateTypeScriptTypeContent(value as Content);
+      typeDefinition += `  ${key}: {${nestedType}},\n`;
+    } else if (
+      // Check if the value is an array
+      Array.isArray(value)
+    ) {
+      // Array handling (simplified, assumes non-empty arrays with uniform type)
+      const arrayType = typeof value[0];
+      typeDefinition += `  ${key}: ${arrayType}[],\n`;
+    } else if (
+      // Check if the value is an 'id'
+      typeof value === 'string' &&
+      key === 'id'
+    ) {
+      // Special handling for 'id' field
+      const tsType = `"${value}"`;
+      typeDefinition += `  ${key}: ${tsType},\n`;
+    } else {
+      // Primitive type
+      const tsType = typeof value;
+      typeDefinition += `  ${key}: ${tsType},\n`;
+    }
+  }
+
+  return typeDefinition;
+};
+
+/**
+ * This function generates a TypeScript type definition from a JSON object
+ */
+export const createTypes = (dictionariesPaths: string[]): string[] => {
+  const resultTypesPaths: string[] = [];
+
+  // Create type folders if they don't exist
+  if (!existsSync(typesDir)) {
+    mkdirSync(typesDir, { recursive: true });
+  }
+
+  for (const dictionaryPath of dictionariesPaths) {
+    const contentModule: ContentModule = require(dictionaryPath);
+    const dictionaryName: string = contentModule.id;
+    const typeDefinition: string = generateTypeScriptType(contentModule);
+
+    const outputPath = resolve(typesDir, `${dictionaryName}.d.ts`);
+
+    writeFileSync(outputPath, typeDefinition);
+
+    resultTypesPaths.push(outputPath);
+  }
+
+  return resultTypesPaths;
+};

package/src/transpiler/dictionary_to_type/index.ts

@@ -0,0 +1,2 @@
+export * from './createModuleAugmentation';
+export * from './createType';

package/src/transpiler/intlater_module_to_dictionary/extractNestedJSON.ts

@@ -0,0 +1,60 @@
+import type { Content, ContentModule } from '@intlayer/core';
+
+/**
+ *
+ * This function extracts all nested objects with an 'id' field from the input object and returns them as an array
+ *
+ * Example:
+ *
+ * const input = {
+ *  id: '1',
+ *  name: 'John Doe',
+ *  address: {
+ *    id: '2',
+ *    street: '123 Main St',
+ *    city: 'Springfield',
+ *    state: 'IL'
+ *  },
+ * };
+ * const result = extractObjectsWithId(input);
+ * console.log(result);
+ *
+ * Output:
+ *
+ * [{
+ *  id: '1',
+ *  name: 'John Doe',
+ *  address: {
+ *    id: '2',
+ *    street: '123 Main St',
+ *    city: 'Springfield',
+ *    state: 'IL'
+ *  }
+ * },
+ * {
+ *  id: '2',
+ *  street: '123 Main St',
+ *  city: 'Springfield',
+ *  state: 'IL'
+ * }]
+ *
+ */
+export const extractObjectsWithId = (input: ContentModule): ContentModule[] => {
+  // Function to recursively search and extract nested objects with an 'id'
+  const search = (obj: Content, results: ContentModule[]): void => {
+    if (obj && typeof obj === 'object') {
+      if (Object.prototype.hasOwnProperty.call(obj, 'id')) {
+        results.push(obj as ContentModule);
+      }
+      for (const key of Object.keys(obj)) {
+        if (typeof obj[key] === 'object') {
+          search(obj[key] as Content, results);
+        }
+      }
+    }
+  };
+
+  const results: ContentModule[] = [];
+  search(input, results);
+  return results;
+};

package/src/transpiler/intlater_module_to_dictionary/index.ts

@@ -0,0 +1,3 @@
+export * from './extractNestedJSON';
+export * from './processModule';
+export * from './transpileBundledCode';

package/src/transpiler/intlater_module_to_dictionary/processModule.ts

@@ -0,0 +1,69 @@
+import { resolve } from 'path';
+import type {
+  Content,
+  ContentModule,
+  FlatContent,
+  FlatContentValue,
+} from '@intlayer/core';
+
+/**
+ * Function to load the module file in a sandboxed environment
+ */
+const loadModule = async (modulePath: string): Promise<ContentModule> => {
+  // @TODO: Sandbox the module to prevent malicious code execution
+
+  return (await import(modulePath)).default;
+};
+
+/**
+ * Function to replace function and async function fields with their results in the object
+ */
+const processFunctionResults = async (entry: Content): Promise<FlatContent> => {
+  if (entry && typeof entry === 'object') {
+    const promises: Promise<void>[] = [];
+    const result: FlatContent = {};
+
+    for (const key of Object.keys(entry)) {
+      const field = entry?.[key];
+
+      if (typeof field === 'object') {
+        result[key] = (await processFunctionResults(
+          field as Content
+        )) as FlatContentValue;
+      }
+
+      if (typeof field === 'function') {
+        // Wait for the function to resolve if it's an async function
+        const promise = (async () => {
+          // Execute the function and await the result if it's a Promise
+          const value = await field();
+          result[key] = value as FlatContentValue;
+        })();
+        promises.push(promise);
+      } else {
+        result[key] = field as FlatContentValue;
+      }
+    }
+
+    // Wait for all async operations to complete
+    await Promise.all(promises);
+
+    return result;
+  }
+
+  return entry;
+};
+
+/**
+ * Function to load, process the module and return the Intlayer ContentModule from the module file
+ */
+export const processModule = async (file: string) => {
+  try {
+    const functionPath = resolve(file);
+    const entry = await loadModule(functionPath);
+
+    return (await processFunctionResults(entry)) as ContentModule;
+  } catch (error) {
+    console.error('Error processing module:', error);
+  }
+};