@flowgram.ai/form-materials 0.1.0-alpha.11 → 0.1.0-alpha.13

package/bin/index.ts

@@ -5,7 +5,7 @@ import { Command } from 'commander';
 import chalk from 'chalk';
 
 import { getProjectInfo, installDependencies, ProjectInfo } from './project.js';
-import { bfsMaterials, copyMaterial, listAllMaterials, Material } from './materials.js';
+import { copyMaterial, listAllMaterials, Material } from './materials.js';
 
 const program = new Command();
 
@@ -66,34 +66,26 @@ program
       process.exit(1);
     }
 
+    // 4. Copy the materials to the project
+    console.log(chalk.bold('The following materials will be added to your project'));
     console.log(material);
-
-    // 3. Get the component dependencies by BFS (include depMaterials and depPackages)
-    const { allMaterials, allPackages } = bfsMaterials(material!, materials);
+    let { packagesToInstall } = copyMaterial(material, projectInfo);
 
     // 4. Install the dependencies
-    let flowgramPackage = `@flowgram.ai/editor`;
-    if (projectInfo.flowgramVersion !== 'workspace:*') {
-      flowgramPackage = `@flowgram.ai/editor@${projectInfo.flowgramVersion}`;
-    }
-    const packagesToInstall: string[] = [flowgramPackage, ...allPackages];
+    packagesToInstall = packagesToInstall.map((_pkg) => {
+      if (
+        _pkg.startsWith(`@flowgram.ai/`) &&
+        projectInfo.flowgramVersion !== 'workspace:*' &&
+        !_pkg.endsWith(`@${projectInfo.flowgramVersion}`)
+      ) {
+        return `${_pkg}@${projectInfo.flowgramVersion}`;
+      }
+      return _pkg;
+    });
 
     console.log(chalk.bold('These npm dependencies will be added to your project'));
     console.log(packagesToInstall);
     installDependencies(packagesToInstall, projectInfo);
-
-    // 5. Copy the materials to the project
-    console.log(chalk.bold('These Materials will be added to your project'));
-    console.log(allMaterials);
-    copyMaterial(material, projectInfo, { overwrite: true });
-
-    allMaterials.forEach((mat: Material) => {
-      if (mat === material) {
-        return;
-      }
-      // Add type for mat
-      copyMaterial(mat, projectInfo, { overwrite: false });
-    });
   });
 
 program.parse(process.argv);

package/bin/materials.ts

@@ -7,6 +7,8 @@ import { fileURLToPath } from 'url';
 import path from 'path';
 import fs from 'fs';
 
+import { traverseRecursiveFiles } from './utils/traverse-file';
+import { replaceImport, traverseFileImports } from './utils/import';
 import { ProjectInfo } from './project'; // Import ProjectInfo
 
 const __filename = fileURLToPath(import.meta.url);
@@ -17,12 +19,19 @@ export interface Material {
   name: string;
   type: string;
   path: string;
-  depPackages?: string[];
-  depMaterials?: string[];
   [key: string]: any; // For other properties from config.json
 }
 
-const _types: string[] = ['components', 'effects', 'utils', 'typings', 'form-plugins'];
+const _types: string[] = [
+  'components',
+  'effects',
+  'plugins',
+  'shared',
+  'typings',
+  'validate',
+  'form-plugins',
+  'hooks',
+];
 
 export function listAllMaterials(): Material[] {
   const _materials: Material[] = [];
@@ -39,19 +48,7 @@ export function listAllMaterials(): Material[] {
             return null;
           }
 
-          const configPath = path.join(materialsPath, _path, 'config.json');
-          // Check if config.json exists before reading
-          if (!fs.existsSync(configPath)) {
-            console.warn(
-              `Warning: config.json not found for material at ${path.join(materialsPath, _path)}`
-            );
-            return null;
-          }
-          const configContent = fs.readFileSync(configPath, 'utf8');
-          const config = JSON.parse(configContent);
-
           return {
-            ...config,
             name: _path, // Assuming the folder name is the material name
             type: _type,
             path: path.join(materialsPath, _path),
@@ -64,66 +61,12 @@ export function listAllMaterials(): Material[] {
   return _materials;
 }
 
-interface BfsResult {
-  allMaterials: Material[];
-  allPackages: string[];
-}
-
-export function bfsMaterials(material: Material, _materials: Material[] = []): BfsResult {
-  function findConfigByName(name: string): Material | undefined {
-    return _materials.find(
-      (_config) => _config.name === name || `${_config.type}/${_config.name}` === name
-    );
-  }
-
-  const queue: (Material | undefined)[] = [material]; // Queue can hold undefined if findConfigByName returns undefined
-  const allMaterials = new Set<Material>();
-  const allPackages = new Set<string>();
-
-  while (queue.length > 0) {
-    const _material = queue.shift();
-    if (!_material || allMaterials.has(_material)) {
-      // Check if _material is defined
-      continue;
-    }
-    allMaterials.add(_material);
-
-    if (_material.depPackages) {
-      for (const _package of _material.depPackages) {
-        allPackages.add(_package);
-      }
-    }
-
-    if (_material.depMaterials) {
-      for (const _materialName of _material.depMaterials) {
-        const depMaterial = findConfigByName(_materialName);
-        if (depMaterial) {
-          // Ensure dependent material is found before adding to queue
-          queue.push(depMaterial);
-        } else {
-          console.warn(
-            `Warning: Dependent material "${_materialName}" not found for material "${_material.name}".`
-          );
-        }
-      }
-    }
-  }
-
-  return {
-    allMaterials: Array.from(allMaterials),
-    allPackages: Array.from(allPackages),
-  };
-}
-
 export const copyMaterial = (
   material: Material,
-  projectInfo: ProjectInfo,
-  {
-    overwrite,
-  }: {
-    overwrite?: boolean;
-  } = {}
-): void => {
+  projectInfo: ProjectInfo
+): {
+  packagesToInstall: string[];
+} => {
   const sourceDir: string = material.path;
   const materialRoot: string = path.join(
     projectInfo.projectPath,
@@ -132,25 +75,33 @@ export const copyMaterial = (
     `${material.type}`
   );
   const targetDir = path.join(materialRoot, material.name);
-
-  if (!overwrite && fs.readdirSync(targetDir)?.length > 0) {
-    console.log(`Material ${material.name} already exists in ${materialRoot}, skip copying.`);
-    return;
-  }
+  const packagesToInstall: Set<string> = new Set();
 
   fs.cpSync(sourceDir, targetDir, { recursive: true });
 
-  let materialRootIndexTs: string = '';
-  const indexTsPath = path.join(materialRoot, 'index.ts');
-  if (fs.existsSync(indexTsPath)) {
-    materialRootIndexTs = fs.readFileSync(indexTsPath, 'utf8');
-  }
-  if (!materialRootIndexTs.includes(material.name)) {
-    fs.writeFileSync(
-      indexTsPath,
-      `${materialRootIndexTs}${materialRootIndexTs.endsWith('\n') ? '' : '\n'}export * from './${
-        material.name
-      }';\n`
-    );
+  for (const file of traverseRecursiveFiles(targetDir)) {
+    if (['.ts', '.tsx'].includes(file.suffix)) {
+      for (const importDeclaration of traverseFileImports(file.content)) {
+        const { source } = importDeclaration;
+
+        if (source.startsWith('@/')) {
+          // is inner import
+          console.log(`Replace Import from ${source} to @flowgram.ai/form-materials`);
+          file.replace((content) =>
+            replaceImport(content, importDeclaration, [
+              { ...importDeclaration, source: '@flowgram.ai/form-materials' },
+            ])
+          );
+          packagesToInstall.add('@flowgram.ai/form-materials');
+        } else if (!source.startsWith('.') && !source.startsWith('react')) {
+          // check if is third party npm packages
+          packagesToInstall.add(source);
+        }
+      }
+    }
   }
+
+  return {
+    packagesToInstall: [...packagesToInstall],
+  };
 };

package/bin/project.ts

@@ -70,22 +70,26 @@ export function findRushJson(startPath: string): string | null {
 
 export function installDependencies(packages: string[], projectInfo: ProjectInfo): void {
   if (fs.existsSync(path.join(projectInfo.projectPath, 'yarn.lock'))) {
+    console.log(`yarn add ${packages.join(' ')}`);
     execSync(`yarn add ${packages.join(' ')}`, { stdio: 'inherit' });
     return;
   }
 
   if (fs.existsSync(path.join(projectInfo.projectPath, 'pnpm-lock.yaml'))) {
+    console.log(`pnpm add ${packages.join(' ')}`);
     execSync(`pnpm add ${packages.join(' ')}`, { stdio: 'inherit' });
     return;
   }
 
   //  rush monorepo
   if (findRushJson(projectInfo.projectPath)) {
+    console.log(`rush add ${packages.map((pkg) => `--package ${pkg}`).join(' ')}`);
     execSync(`rush add ${packages.map((pkg) => `--package ${pkg}`).join(' ')}`, {
       stdio: 'inherit',
     });
     return;
   }
 
+  console.log(`npm install ${packages.join(' ')}`);
   execSync(`npm install ${packages.join(' ')}`, { stdio: 'inherit' });
 }

package/bin/utils/import.ts

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Cases
+ * import { A, B } from 'module';
+ * import A from 'module';
+ * import * as C from 'module';
+ * import D, { type E, F } from 'module';
+ * import A, { B as B1 } from 'module';
+ */
+interface ImportDeclaration {
+  // origin statement
+  statement: string;
+
+  // import { A, B } from 'module';
+  namedImports?: {
+    local?: string;
+    imported: string;
+    typeOnly?: boolean;
+  }[];
+
+  // import A from 'module';
+  defaultImport?: string;
+
+  // import * as C from 'module';
+  namespaceImport?: string;
+
+  source: string;
+}
+
+export function assembleImport(declaration: ImportDeclaration): string {
+  const { namedImports, defaultImport, namespaceImport, source } = declaration;
+  const importClauses = [];
+  if (namedImports) {
+    importClauses.push(
+      `{ ${namedImports
+        .map(
+          ({ local, imported, typeOnly }) =>
+            `${typeOnly ? 'type ' : ''}${imported}${local ? ` as ${local}` : ''}`
+        )
+        .join(', ')} }`
+    );
+  }
+  if (defaultImport) {
+    importClauses.push(defaultImport);
+  }
+  if (namespaceImport) {
+    importClauses.push(`* as ${namespaceImport}`);
+  }
+  return `import ${importClauses.join(', ')} from '${source}'`;
+}
+
+export function replaceImport(
+  fileContent: string,
+  origin: ImportDeclaration,
+  replaceTo: ImportDeclaration[]
+): string {
+  const replaceImportStatements = replaceTo.map(assembleImport);
+  // replace origin statement
+  return fileContent.replace(origin.statement, replaceImportStatements.join('\n'));
+}
+
+export function* traverseFileImports(fileContent: string): Generator<ImportDeclaration> {
+  // 匹配所有 import 语句的正则表达式
+  const importRegex =
+    /import\s+([^{}*,]*?)?(?:\s*\*\s*as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?(?:\s*\{([^}]*)\}\s*,?)?(?:\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?\s*from\s*['"`]([^'"`]+)['"`]/g;
+
+  let match;
+  while ((match = importRegex.exec(fileContent)) !== null) {
+    const [fullMatch, defaultPart, namespacePart, namedPart, defaultPart2, source] = match;
+
+    const declaration: ImportDeclaration = {
+      statement: fullMatch,
+      source: source,
+    };
+
+    // 处理默认导入
+    const defaultImport = defaultPart?.trim() || defaultPart2?.trim();
+    if (defaultImport && !namespacePart && !namedPart) {
+      declaration.defaultImport = defaultImport;
+    } else if (defaultImport && (namespacePart || namedPart)) {
+      declaration.defaultImport = defaultImport;
+    }
+
+    // 处理命名空间导入 (* as)
+    if (namespacePart) {
+      declaration.namespaceImport = namespacePart.trim();
+    }
+
+    // 处理命名导入
+    if (namedPart) {
+      const namedImports = [];
+      const namedItems = namedPart
+        .split(',')
+        .map((item) => item.trim())
+        .filter(Boolean);
+
+      for (const item of namedItems) {
+        const typeOnly = item.startsWith('type ');
+        const cleanItem = typeOnly ? item.slice(5).trim() : item;
+
+        if (cleanItem.includes(' as ')) {
+          const [imported, local] = cleanItem.split(' as ').map((s) => s.trim());
+          namedImports.push({
+            imported,
+            local,
+            typeOnly,
+          });
+        } else {
+          namedImports.push({
+            imported: cleanItem,
+            typeOnly,
+          });
+        }
+      }
+
+      if (namedImports.length > 0) {
+        declaration.namedImports = namedImports;
+      }
+    }
+
+    yield declaration;
+  }
+}

package/bin/utils/traverse-file.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import path from 'path';
+import fs from 'fs';
+
+class File {
+  content: string;
+
+  isUtf8: boolean;
+
+  relativePath: string;
+
+  path: string;
+
+  suffix: string;
+
+  constructor(filePath: string, public root: string = '/') {
+    this.path = filePath;
+    this.relativePath = path.relative(this.root, this.path);
+    this.suffix = path.extname(this.path);
+
+    // Check if exists
+    if (!fs.existsSync(this.path)) {
+      throw Error(`File ${path} Not Exists`);
+    }
+
+    // If no utf-8, skip
+    try {
+      this.content = fs.readFileSync(this.path, 'utf-8');
+      this.isUtf8 = true;
+    } catch (e) {
+      this.isUtf8 = false;
+      return;
+    }
+  }
+
+  replace(updater: (content: string) => string) {
+    if (!this.isUtf8) {
+      console.warn('Not UTF-8 file skipped: ', this.path);
+      return;
+    }
+    this.content = updater(this.content);
+    fs.writeFileSync(this.path, this.content, 'utf-8');
+  }
+}
+
+export function* traverseRecursiveFiles(folder: string): Generator<File> {
+  const files = fs.readdirSync(folder);
+  for (const file of files) {
+    const filePath = path.join(folder, file);
+    if (fs.statSync(filePath).isDirectory()) {
+      yield* traverseRecursiveFiles(filePath);
+    } else {
+      yield new File(filePath);
+    }
+  }
+}