@flowgram.ai/cli 0.1.8 → 0.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/cli",
-  "version": "0.1.8",
+  "version": "0.4.11",
   "description": "A CLI tool to create demo projects or sync materials",
   "bin": {
     "flowgram-cli": "./bin/index.js"
@@ -17,7 +17,8 @@
     "chalk": "^5.3.0",
     "download": "8.0.0",
     "tar": "7.4.3",
-    "inquirer": "^9.2.7"
+    "inquirer": "^9.2.7",
+    "ignore": "~7.0.5"
   },
   "devDependencies": {
     "@types/download": "8.0.5",

package/src/index.ts

@@ -7,6 +7,7 @@ import { Command } from "commander";
 
 import { syncMaterial } from "./materials";
 import { createApp } from "./create-app";
+import { updateFlowgramVersion } from "./update-version";
 
 const program = new Command();
 
@@ -15,7 +16,7 @@ program.name("flowgram-cli").version("1.0.0").description("Flowgram CLI");
 program
   .command("create-app")
   .description("Create a new flowgram project")
-  .argument('[string]', 'Project name')
+  .argument("[string]", "Project name")
   .action(async (projectName) => {
     await createApp(projectName);
   });
@@ -23,9 +24,25 @@ program
 program
   .command("materials")
   .description("Sync materials to the project")
-  .argument('[string]', 'Material name')
-  .action(async (materialName) => {
-    await syncMaterial(materialName);
+  .argument("[string]", "Material name")
+  .option(
+    "--refresh-project-imports",
+    "Refresh project imports to copied materials",
+    false,
+  )
+  .action(async (materialName, options) => {
+    await syncMaterial({
+      materialName,
+      refreshProjectImports: options.refreshProjectImports,
+    });
+  });
+
+program
+  .command("update-version")
+  .description("Update flowgram version in the project")
+  .argument("[string]", "Flowgram version")
+  .action(async (version) => {
+    await updateFlowgramVersion(version);
   });
 
 program.parse(process.argv);

package/src/materials/index.ts

@@ -10,17 +10,25 @@ import { copyMaterial, listAllMaterials, Material } from "./materials";
 import { loadNpm } from "../utils/npm";
 import path from "path";
 import { Project } from "../utils/project";
+import { executeRefreshProjectImport } from "./refresh-project-import";
+
+export async function syncMaterial(opts: {
+  materialName?: string;
+  refreshProjectImports?: boolean;
+}) {
+  const { materialName, refreshProjectImports } = opts;
 
-export async function syncMaterial(materialName?: string) {
   // materialName can be undefined
-  console.log(chalk.bgGreenBright("Welcome to @flowgram.ai form-materials!"));
+  console.log(chalk.bold("🚀 Welcome to @flowgram.ai form-materials!"));
 
   const project = await Project.getSingleton();
   project.printInfo();
 
   if (!project.flowgramVersion) {
     throw new Error(
-      "Please install @flowgram.ai/fixed-layout-editor or @flowgram.ai/free-layout-editor",
+      chalk.red(
+        "❌ Please install @flowgram.ai/fixed-layout-editor or @flowgram.ai/free-layout-editor",
+      ),
     );
   }
 
@@ -31,7 +39,7 @@ export async function syncMaterial(materialName?: string) {
 
   let material: Material | undefined; // material can be undefined
 
-  // Check if materialName is provided and exists in materials
+  // 1. Check if materialName is provided and exists in materials
   if (materialName) {
     const selectedMaterial = materials.find(
       (m) => `${m.type}/${m.name}` === materialName,
@@ -48,7 +56,7 @@ export async function syncMaterial(materialName?: string) {
     }
   }
 
-  // If material not found or materialName not provided, prompt user to select
+  // 2. If material not found or materialName not provided, prompt user to select
   if (!material) {
     // User select one component
     const result = await inquirer.prompt<{
@@ -74,9 +82,15 @@ export async function syncMaterial(materialName?: string) {
     process.exit(1);
   }
 
+  // 3. Refresh project imports
+  if (refreshProjectImports) {
+    console.log(chalk.bold("🚀 Refresh imports in your project"));
+    executeRefreshProjectImport(project, material);
+  }
+
   // 4. Copy the materials to the project
   console.log(
-    chalk.bold("The following materials will be added to your project"),
+    chalk.bold("🚀 The following materials will be added to your project"),
   );
   console.log(material);
   let { packagesToInstall } = copyMaterial(material, project, formMaterialPath);
@@ -84,10 +98,10 @@ export async function syncMaterial(materialName?: string) {
   // 4. Install the dependencies
   await project.addDependencies(packagesToInstall);
   console.log(
-    chalk.bold("These npm dependencies is added to your package.json"),
+    chalk.bold("✅ These npm dependencies is added to your package.json"),
   );
   packagesToInstall.forEach((_package) => {
     console.log(`- ${_package}`);
-  })
-  console.log(chalk.bold("\nPlease run npm install to install dependencies"));
+  });
+  console.log(chalk.bold("\n➡️ Please run npm install to install dependencies\n"));
 }

package/src/materials/materials.ts

@@ -3,16 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-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 { Project } from "../utils/project"; // Import ProjectInfo
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+import { traverseRecursiveTsFiles } from "../utils/ts-file";
 
 // Added type definitions
 export interface Material {
@@ -77,7 +72,8 @@ export const copyMaterial = (
 ): {
   packagesToInstall: string[];
 } => {
-  const formMaterialDependencies = getFormMaterialDependencies(formMaterialPath);
+  const formMaterialDependencies =
+    getFormMaterialDependencies(formMaterialPath);
 
   const sourceDir: string = material.path;
   const materialRoot: string = path.join(
@@ -91,38 +87,35 @@ export const copyMaterial = (
 
   fs.cpSync(sourceDir, targetDir, { recursive: true });
 
-  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@${project.flowgramVersion}`,
-          );
-        } else if (!source.startsWith(".") && !source.startsWith("react")) {
-          // check if is in form material dependencies
-          const [dep, version] =
-            Object.entries(formMaterialDependencies).find(([_key]) =>
-              source.startsWith(_key),
-            ) || [];
-          if (!dep) {
-            continue;
-          }
-          if (dep.startsWith("@flowgram.ai/")) {
-            packagesToInstall.add(`${dep}@${project.flowgramVersion}`);
-          } else {
-            packagesToInstall.add(`${dep}@${version}`);
-          }
+  for (const file of traverseRecursiveTsFiles(targetDir)) {
+    for (const importDeclaration of file.imports) {
+      const { source } = importDeclaration;
+
+      if (source.startsWith("@/")) {
+        // is inner import
+        console.log(
+          `Replace Import from ${source} to @flowgram.ai/form-materials`,
+        );
+        file.replaceImport(
+          [importDeclaration],
+          [{ ...importDeclaration, source: "@flowgram.ai/form-materials" }],
+        );
+        packagesToInstall.add(
+          `@flowgram.ai/form-materials@${project.flowgramVersion}`,
+        );
+      } else if (!source.startsWith(".") && !source.startsWith("react")) {
+        // check if is in form material dependencies
+        const [dep, version] =
+          Object.entries(formMaterialDependencies).find(([_key]) =>
+            source.startsWith(_key),
+          ) || [];
+        if (!dep) {
+          continue;
+        }
+        if (dep.startsWith("@flowgram.ai/")) {
+          packagesToInstall.add(`${dep}@${project.flowgramVersion}`);
+        } else {
+          packagesToInstall.add(`${dep}@${version}`);
         }
       }
     }

package/src/materials/refresh-project-import.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import chalk from "chalk";
+import { ImportDeclaration } from "../utils/import";
+import { Project } from "../utils/project";
+import { getIndexTsFile, traverseRecursiveTsFiles } from "../utils/ts-file";
+import { Material } from "./materials";
+
+export function executeRefreshProjectImport(
+  project: Project,
+  material: Material,
+) {
+  const materialFile = getIndexTsFile(material.path);
+
+  if (!materialFile) {
+    console.warn(`Material ${material.name} not found`);
+    return;
+  }
+
+  const targetDir = `@/form-materials/${material.type}/${material.name}`;
+
+  const exportNames = materialFile.allExportNames;
+
+  console.log(`👀 The exports of ${material.name} is ${exportNames.join(",")}`);
+
+  for (const tsFile of traverseRecursiveTsFiles(project.srcPath)) {
+    for (const importDeclaration of tsFile.imports) {
+      if (importDeclaration.source === "@flowgram.ai/form-materials") {
+        const currentMaterialImports = importDeclaration.namedImports?.filter(
+          (item) => exportNames.includes(item.imported),
+        );
+        if (!currentMaterialImports?.length) {
+          continue;
+        }
+        const nextImports: ImportDeclaration[] = [
+          {
+            ...importDeclaration,
+            namedImports: currentMaterialImports,
+            source: targetDir,
+          },
+        ];
+
+        const keepImportNames = importDeclaration.namedImports?.filter(
+          (item) => !exportNames.includes(item.imported),
+        );
+
+        if (keepImportNames?.length) {
+          nextImports.unshift({
+            ...importDeclaration,
+            namedImports: keepImportNames,
+          });
+        }
+
+        tsFile.replaceImport([importDeclaration], nextImports);
+        console.log(chalk.green(`🔄 Refresh Imports In: ${tsFile.path}`));
+
+        console.log(
+          `From:\n${importDeclaration.statement}\nTo:\n${nextImports
+            .map((item) => item.statement)
+            .join("\n")}`,
+        );
+      }
+    }
+  }
+}

package/src/update-version/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { getLatestVersion } from "../utils/npm";
+import { traverseRecursiveFiles } from "../utils/file";
+import chalk from "chalk";
+
+export async function updateFlowgramVersion(inputVersion?: string) {
+  console.log(chalk.bold("🚀 Welcome to @flowgram.ai update-version helper"));
+
+  // Get latest version
+  const latestVersion = await getLatestVersion("@flowgram.ai/editor");
+  const currentPath = process.cwd();
+  console.log("- Latest flowgram version: ", latestVersion);
+  console.log("- Current Path: ", currentPath);
+
+  // User Input flowgram version, default is latestVersion
+  const flowgramVersion: string = inputVersion || latestVersion;
+
+  for (const file of traverseRecursiveFiles(currentPath)) {
+    if (file.path.endsWith("package.json")) {
+      console.log("👀 Find package.json: ", file.path);
+      let updated = false;
+      const json = JSON.parse(file.content);
+      if (json.dependencies) {
+        for (const key in json.dependencies) {
+          if (key.startsWith("@flowgram.ai/")) {
+            updated = true;
+            json.dependencies[key] = flowgramVersion;
+            console.log(`- Update ${key} to ${flowgramVersion}`);
+          }
+        }
+      }
+      if (json.devDependencies) {
+        for (const key in json.devDependencies) {
+          if (key.startsWith("@flowgram.ai/")) {
+            updated = true;
+            json.devDependencies[key] = flowgramVersion;
+            console.log(`- Update ${key} to ${flowgramVersion}`);
+          }
+        }
+      }
+
+      if (updated) {
+        file.write(JSON.stringify(json, null, 2));
+        console.log(`✅ ${file.path} Updated`);
+      }
+    }
+  }
+}

package/src/utils/export.ts

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export function extractNamedExports(content: string) {
+  const valueExports = [];
+  const typeExports = [];
+
+  // Collect all type definition names
+  const typeDefinitions = new Set();
+  const typePatterns = [
+    /\b(?:type|interface)\s+(\w+)/g,
+    /\bexport\s+(?:type|interface)\s+(\w+)/g,
+  ];
+
+  let match;
+  for (const pattern of typePatterns) {
+    while ((match = pattern.exec(content)) !== null) {
+      typeDefinitions.add(match[1]);
+    }
+  }
+
+  // Match various export patterns
+  const exportPatterns = [
+    // export const/var/let/function/class/type/interface
+    /\bexport\s+(const|var|let|function|class|type|interface)\s+(\w+)/g,
+    // export { name1, name2 }
+    /\bexport\s*\{([^}]+)\}/g,
+    // export { name as alias }
+    /\bexport\s*\{[^}]*\b(\w+)\s+as\s+(\w+)[^}]*\}/g,
+    // export default function name()
+    /\bexport\s+default\s+(?:function|class)\s+(\w+)/g,
+    // export type { Type1, Type2 }
+    /\bexport\s+type\s*\{([^}]+)\}/g,
+    // export type { Original as Alias }
+    /\bexport\s+type\s*\{[^}]*\b(\w+)\s+as\s+(\w+)[^}]*\}/g,
+  ];
+
+  // Handle first pattern: export const/var/let/function/class/type/interface
+  exportPatterns[0].lastIndex = 0;
+  while ((match = exportPatterns[0].exec(content)) !== null) {
+    const [, kind, name] = match;
+    if (kind === "type" || kind === "interface" || typeDefinitions.has(name)) {
+      typeExports.push(name);
+    } else {
+      valueExports.push(name);
+    }
+  }
+
+  // Handle second pattern: export { name1, name2 }
+  exportPatterns[1].lastIndex = 0;
+  while ((match = exportPatterns[1].exec(content)) !== null) {
+    const exportsList = match[1]
+      .split(",")
+      .map((item) => item.trim())
+      .filter((item) => item && !item.includes(" as "));
+
+    for (const name of exportsList) {
+      if (name.startsWith("type ")) {
+        typeExports.push(name.replace("type ", "").trim());
+      } else if (typeDefinitions.has(name)) {
+        typeExports.push(name);
+      } else {
+        valueExports.push(name);
+      }
+    }
+  }
+
+  // Handle third pattern: export { name as alias }
+  exportPatterns[2].lastIndex = 0;
+  while ((match = exportPatterns[2].exec(content)) !== null) {
+    const [, original, alias] = match;
+    if (typeDefinitions.has(original)) {
+      typeExports.push(alias);
+    } else {
+      valueExports.push(alias);
+    }
+  }
+
+  // Handle fourth pattern: export default function name()
+  exportPatterns[3].lastIndex = 0;
+  while ((match = exportPatterns[3].exec(content)) !== null) {
+    const name = match[1];
+    if (typeDefinitions.has(name)) {
+      typeExports.push(name);
+    } else {
+      valueExports.push(name);
+    }
+  }
+
+  // Handle fifth pattern: export type { Type1, Type2 }
+  exportPatterns[4].lastIndex = 0;
+  while ((match = exportPatterns[4].exec(content)) !== null) {
+    const exportsList = match[1]
+      .split(",")
+      .map((item) => item.trim())
+      .filter((item) => item && !item.includes(" as "));
+
+    for (const name of exportsList) {
+      typeExports.push(name);
+    }
+  }
+
+  // Handle sixth pattern: export type { Original as Alias }
+  exportPatterns[5].lastIndex = 0;
+  while ((match = exportPatterns[5].exec(content)) !== null) {
+    const [, original, alias] = match;
+    typeExports.push(alias);
+  }
+
+  // Deduplicate and sort
+  return {
+    values: [...new Set(valueExports)].sort(),
+    types: [...new Set(typeExports)].sort(),
+  };
+}

package/src/utils/file.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import path from "path";
+import fs from "fs";
+import ignore, { Ignore } from "ignore";
+
+export 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");
+  }
+
+  write(nextContent: string) {
+    this.content = nextContent;
+    fs.writeFileSync(this.path, this.content, "utf-8");
+  }
+}
+
+export function* traverseRecursiveFilePaths(
+  folder: string,
+  ig: Ignore = ignore().add(".git"),
+  root: string = folder,
+): Generator<string> {
+  const files = fs.readdirSync(folder);
+
+  // add .gitignore to ignore if exists
+  if (fs.existsSync(path.join(folder, ".gitignore"))) {
+    ig.add(fs.readFileSync(path.join(folder, ".gitignore"), "utf-8"));
+  }
+
+  for (const file of files) {
+    const filePath = path.join(folder, file);
+
+    if (ig.ignores(path.relative(root, filePath))) {
+      continue;
+    }
+
+    if (fs.statSync(filePath).isDirectory()) {
+      yield* traverseRecursiveFilePaths(filePath, ig, root);
+    } else {
+      yield filePath;
+    }
+  }
+}
+
+export function* traverseRecursiveFiles(folder: string): Generator<File> {
+  for (const filePath of traverseRecursiveFilePaths(folder)) {
+    yield new File(filePath);
+  }
+}

package/src/utils/import.ts

@@ -11,7 +11,7 @@
  * import D, { type E, F } from 'module';
  * import A, { B as B1 } from 'module';
  */
-interface ImportDeclaration {
+export interface ImportDeclaration {
   // origin statement
   statement: string;
 
@@ -50,7 +50,7 @@ export function assembleImport(declaration: ImportDeclaration): string {
   if (namespaceImport) {
     importClauses.push(`* as ${namespaceImport}`);
   }
-  return `import ${importClauses.join(', ')} from '${source}'`;
+  return `import ${importClauses.join(', ')} from '${source}';`;
 }
 
 export function replaceImport(
@@ -66,7 +66,7 @@ export function replaceImport(
 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;
+    /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) {

package/src/utils/project.ts

@@ -24,6 +24,8 @@ export class Project {
 
   packageJson: PackageJson;
 
+  srcPath: string;
+
   protected constructor() {}
 
   async init() {
@@ -42,6 +44,7 @@ export class Project {
 
     this.projectPath = projectPath;
 
+    this.srcPath = path.join(projectPath, "src");
     this.packageJsonPath = path.join(projectPath, "package.json");
     this.packageJson = JSON.parse(readFileSync(this.packageJsonPath, "utf8"));
 
@@ -86,6 +89,13 @@ export class Project {
     }
   }
 
+  writeToPackageJsonFile() {
+    writeFileSync(
+      this.packageJsonPath,
+      JSON.stringify(this.packageJson, null, 2),
+    );
+  }
+
   printInfo() {
     console.log(chalk.bold("Project Info:"));
     console.log(chalk.black(`  - Flowgram Version: ${this.flowgramVersion}`));