@flowgram.ai/cli 0.4.11 → 0.4.13

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

@@ -3,54 +3,73 @@
  * 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;
-  }
+import path from 'path';
+
+import chalk from 'chalk';
+
+import { traverseRecursiveTsFiles } from '../utils/ts-file';
+import { ImportDeclaration, NamedImport } from '../utils/import';
+import { SyncMaterialContext } from './types';
+import { Material } from './material';
 
-  const targetDir = `@/form-materials/${material.type}/${material.name}`;
+export function executeRefreshProjectImport(context: SyncMaterialContext) {
+  const { selectedMaterials, project, targetFormMaterialRoot } = context;
 
-  const exportNames = materialFile.allExportNames;
+  const exportName2Material = new Map<string, Material>();
 
-  console.log(`👀 The exports of ${material.name} is ${exportNames.join(",")}`);
+  const targetModule = `@/${path.relative(project.srcPath, targetFormMaterialRoot)}`;
+
+  for (const material of selectedMaterials) {
+    if (!material.indexFile) {
+      console.warn(`Material ${material.name} not found`);
+      return;
+    }
+
+    console.log(`👀 The exports of ${material.name} is ${material.allExportNames.join(',')}`);
+
+    material.allExportNames.forEach((exportName) => {
+      exportName2Material.set(exportName, material);
+    });
+  }
 
   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) {
+      if (importDeclaration.source.startsWith('@flowgram.ai/form-materials')) {
+        // Import Module and its related named Imported
+        const restImports: NamedImport[] = [];
+        const importMap: Record<string, NamedImport[]> = {};
+
+        if (!importDeclaration.namedImports) {
           continue;
         }
-        const nextImports: ImportDeclaration[] = [
-          {
-            ...importDeclaration,
-            namedImports: currentMaterialImports,
-            source: targetDir,
-          },
-        ];
 
-        const keepImportNames = importDeclaration.namedImports?.filter(
-          (item) => !exportNames.includes(item.imported),
+        for (const nameImport of importDeclaration.namedImports) {
+          const material = exportName2Material.get(nameImport.imported);
+          if (material) {
+            const importModule = `${targetModule}/${material.fullName}`;
+            importMap[importModule] = importMap[importModule] || [];
+            importMap[importModule].push(nameImport);
+          } else {
+            restImports.push(nameImport);
+          }
+        }
+
+        if (Object.keys(importMap).length === 0) {
+          continue;
+        }
+
+        const nextImports: ImportDeclaration[] = Object.entries(importMap).map(
+          ([importModule, namedImports]) => ({
+            ...importDeclaration,
+            namedImports,
+            source: importModule,
+          })
         );
 
-        if (keepImportNames?.length) {
+        if (restImports?.length) {
           nextImports.unshift({
             ...importDeclaration,
-            namedImports: keepImportNames,
+            namedImports: restImports,
           });
         }
 
@@ -60,7 +79,7 @@ export function executeRefreshProjectImport(
         console.log(
           `From:\n${importDeclaration.statement}\nTo:\n${nextImports
             .map((item) => item.statement)
-            .join("\n")}`,
+            .join('\n')}`
         );
       }
     }

package/src/materials/select.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+
+import { LoadedNpmPkg } from '../utils/npm';
+import { MaterialCliOptions } from './types';
+import { Material } from './material';
+
+export const getSelectedMaterials = async (
+  cliOpts: MaterialCliOptions,
+  formMaterialPkg: LoadedNpmPkg
+) => {
+  const { materialName, selectMultiple } = cliOpts;
+
+  const materials: Material[] = Material.listAll(formMaterialPkg);
+
+  let selectedMaterials: Material[] = [];
+
+  // 1. Check if materialName is provided and exists in materials
+  if (materialName) {
+    selectedMaterials = materialName
+      .split(',')
+      .map((_name) => materials.find((_m) => _m.fullName === _name.trim())!)
+      .filter(Boolean);
+  }
+
+  // 2. If material not found or materialName not provided, prompt user to select
+  if (!selectedMaterials.length) {
+    console.log(chalk.yellow(`Material "${materialName}" not found. Please select from the list:`));
+
+    const choices = materials.map((_material) => ({
+      name: _material.fullName,
+      value: _material,
+    }));
+    if (selectMultiple) {
+      // User select one component
+      const result = await inquirer.prompt<{
+        material: Material[]; // Specify type for prompt result
+      }>([
+        {
+          type: 'checkbox',
+          name: 'material',
+          message: 'Select multiple materials to add:',
+          choices: choices,
+        },
+      ]);
+      selectedMaterials = result.material;
+    } else {
+      // User select one component
+      const result = await inquirer.prompt<{
+        material: Material; // Specify type for prompt result
+      }>([
+        {
+          type: 'list',
+          name: 'material',
+          message: 'Select one material to add:',
+          choices: choices,
+        },
+      ]);
+      selectedMaterials = [result.material];
+    }
+  }
+
+  return selectedMaterials;
+};

package/src/materials/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Project } from '../utils/project';
+import { LoadedNpmPkg } from '../utils/npm';
+import { Material } from './material';
+
+export interface MaterialCliOptions {
+  materialName?: string;
+  refreshProjectImports?: boolean;
+  targetMaterialRootDir?: string;
+  selectMultiple?: boolean;
+}
+
+export interface SyncMaterialContext {
+  selectedMaterials: Material[];
+  project: Project;
+  formMaterialPkg: LoadedNpmPkg;
+  cliOpts: MaterialCliOptions;
+  targetFormMaterialRoot: string;
+}

package/src/update-version/index.ts

@@ -3,30 +3,31 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { getLatestVersion } from "../utils/npm";
-import { traverseRecursiveFiles } from "../utils/file";
-import chalk from "chalk";
+import chalk from 'chalk';
+
+import { getLatestVersion } from '../utils/npm';
+import { traverseRecursiveFiles } from '../utils/file';
 
 export async function updateFlowgramVersion(inputVersion?: string) {
-  console.log(chalk.bold("🚀 Welcome to @flowgram.ai update-version helper"));
+  console.log(chalk.bold('🚀 Welcome to @flowgram.ai update-version helper'));
 
   // Get latest version
-  const latestVersion = await getLatestVersion("@flowgram.ai/editor");
+  const latestVersion = await getLatestVersion('@flowgram.ai/editor');
   const currentPath = process.cwd();
-  console.log("- Latest flowgram version: ", latestVersion);
-  console.log("- Current Path: ", currentPath);
+  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);
+    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/")) {
+          if (key.startsWith('@flowgram.ai/')) {
             updated = true;
             json.dependencies[key] = flowgramVersion;
             console.log(`- Update ${key} to ${flowgramVersion}`);
@@ -35,7 +36,7 @@ export async function updateFlowgramVersion(inputVersion?: string) {
       }
       if (json.devDependencies) {
         for (const key in json.devDependencies) {
-          if (key.startsWith("@flowgram.ai/")) {
+          if (key.startsWith('@flowgram.ai/')) {
             updated = true;
             json.devDependencies[key] = flowgramVersion;
             console.log(`- Update ${key} to ${flowgramVersion}`);

package/src/utils/export.ts

@@ -9,10 +9,7 @@ export function extractNamedExports(content: string) {
 
   // Collect all type definition names
   const typeDefinitions = new Set();
-  const typePatterns = [
-    /\b(?:type|interface)\s+(\w+)/g,
-    /\bexport\s+(?:type|interface)\s+(\w+)/g,
-  ];
+  const typePatterns = [/\b(?:type|interface)\s+(\w+)/g, /\bexport\s+(?:type|interface)\s+(\w+)/g];
 
   let match;
   for (const pattern of typePatterns) {
@@ -41,7 +38,7 @@ export function extractNamedExports(content: string) {
   exportPatterns[0].lastIndex = 0;
   while ((match = exportPatterns[0].exec(content)) !== null) {
     const [, kind, name] = match;
-    if (kind === "type" || kind === "interface" || typeDefinitions.has(name)) {
+    if (kind === 'type' || kind === 'interface' || typeDefinitions.has(name)) {
       typeExports.push(name);
     } else {
       valueExports.push(name);
@@ -52,13 +49,13 @@ export function extractNamedExports(content: string) {
   exportPatterns[1].lastIndex = 0;
   while ((match = exportPatterns[1].exec(content)) !== null) {
     const exportsList = match[1]
-      .split(",")
+      .split(',')
       .map((item) => item.trim())
-      .filter((item) => item && !item.includes(" as "));
+      .filter((item) => item && !item.includes(' as '));
 
     for (const name of exportsList) {
-      if (name.startsWith("type ")) {
-        typeExports.push(name.replace("type ", "").trim());
+      if (name.startsWith('type ')) {
+        typeExports.push(name.replace('type ', '').trim());
       } else if (typeDefinitions.has(name)) {
         typeExports.push(name);
       } else {
@@ -93,9 +90,9 @@ export function extractNamedExports(content: string) {
   exportPatterns[4].lastIndex = 0;
   while ((match = exportPatterns[4].exec(content)) !== null) {
     const exportsList = match[1]
-      .split(",")
+      .split(',')
       .map((item) => item.trim())
-      .filter((item) => item && !item.includes(" as "));
+      .filter((item) => item && !item.includes(' as '));
 
     for (const name of exportsList) {
       typeExports.push(name);

package/src/utils/file.ts

@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import path from "path";
-import fs from "fs";
-import ignore, { Ignore } from "ignore";
+import path from 'path';
+import fs from 'fs';
+
+import ignore, { Ignore } from 'ignore';
 
 export class File {
   content: string;
@@ -18,7 +19,7 @@ export class File {
 
   suffix: string;
 
-  constructor(filePath: string, public root: string = "/") {
+  constructor(filePath: string, public root: string = '/') {
     this.path = filePath;
     this.relativePath = path.relative(this.root, this.path);
     this.suffix = path.extname(this.path);
@@ -30,7 +31,7 @@ export class File {
 
     // If no utf-8, skip
     try {
-      this.content = fs.readFileSync(this.path, "utf-8");
+      this.content = fs.readFileSync(this.path, 'utf-8');
       this.isUtf8 = true;
     } catch (e) {
       this.isUtf8 = false;
@@ -40,29 +41,29 @@ export class File {
 
   replace(updater: (content: string) => string) {
     if (!this.isUtf8) {
-      console.warn("Not UTF-8 file skipped: ", this.path);
+      console.warn('Not UTF-8 file skipped: ', this.path);
       return;
     }
     this.content = updater(this.content);
-    fs.writeFileSync(this.path, this.content, "utf-8");
+    fs.writeFileSync(this.path, this.content, 'utf-8');
   }
 
   write(nextContent: string) {
     this.content = nextContent;
-    fs.writeFileSync(this.path, this.content, "utf-8");
+    fs.writeFileSync(this.path, this.content, 'utf-8');
   }
 }
 
 export function* traverseRecursiveFilePaths(
   folder: string,
-  ig: Ignore = ignore().add(".git"),
-  root: string = folder,
+  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"));
+  if (fs.existsSync(path.join(folder, '.gitignore'))) {
+    ig.add(fs.readFileSync(path.join(folder, '.gitignore'), 'utf-8'));
   }
 
   for (const file of files) {
@@ -82,6 +83,6 @@ export function* traverseRecursiveFilePaths(
 
 export function* traverseRecursiveFiles(folder: string): Generator<File> {
   for (const filePath of traverseRecursiveFilePaths(folder)) {
-    yield new File(filePath);
+    yield new File(filePath, folder);
   }
 }

package/src/utils/import.ts

@@ -3,6 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
+export interface NamedImport {
+  local?: string;
+  imported: string;
+  typeOnly?: boolean;
+}
+
 /**
  * Cases
  * import { A, B } from 'module';
@@ -16,11 +22,7 @@ export interface ImportDeclaration {
   statement: string;
 
   // import { A, B } from 'module';
-  namedImports?: {
-    local?: string;
-    imported: string;
-    typeOnly?: boolean;
-  }[];
+  namedImports?: NamedImport[];
 
   // import A from 'module';
   defaultImport?: string;

package/src/utils/npm.ts

@@ -3,41 +3,114 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { execSync } from 'child_process';
-import { existsSync } from 'fs';
 import path from 'path';
-import download from 'download';
+import https from 'https';
+import { existsSync, readFileSync } from 'fs';
+import { execSync } from 'child_process';
+
+import * as tar from 'tar';
+import fs from 'fs-extra';
+
+export class LoadedNpmPkg {
+  constructor(public name: string, public version: string, public path: string) {}
+
+  get srcPath() {
+    return path.join(this.path, 'src');
+  }
+
+  get distPath() {
+    return path.join(this.path, 'dist');
+  }
+
+  protected _packageJson: Record<string, any>;
+
+  get packageJson() {
+    if (!this._packageJson) {
+      this._packageJson = JSON.parse(readFileSync(path.join(this.path, 'package.json'), 'utf8'));
+    }
+    return this._packageJson;
+  }
+
+  get dependencies(): Record<string, string> {
+    return this.packageJson.dependencies;
+  }
+}
+
+// 使用 https 下载文件
+function downloadFile(url: string, dest: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(dest);
+
+    https
+      .get(url, (response) => {
+        if (response.statusCode !== 200) {
+          reject(new Error(`Download failed: ${response.statusCode}`));
+          return;
+        }
+
+        response.pipe(file);
+
+        file.on('finish', () => {
+          file.close();
+          resolve();
+        });
+      })
+      .on('error', (err) => {
+        fs.unlink(dest, () => reject(err));
+      });
+
+    file.on('error', (err) => {
+      fs.unlink(dest, () => reject(err));
+    });
+  });
+}
 
 export async function getLatestVersion(packageName: string): Promise<string> {
-  return execSync(`npm view ${packageName} version --tag=latest`)
-    .toString()
-    .trim();
+  return execSync(`npm view ${packageName} version --tag=latest`).toString().trim();
 }
 
-export async function loadNpm(packageName: string): Promise<string> {
+export async function loadNpm(packageName: string): Promise<LoadedNpmPkg> {
   const packageLatestVersion = await getLatestVersion(packageName);
 
-  const packagePath = path.join(
-    __dirname,
-    `./.download/${packageName}-${packageLatestVersion}`,
-  );
+  const packagePath = path.join(__dirname, `./.download/${packageName}-${packageLatestVersion}`);
 
   if (existsSync(packagePath)) {
-    return packagePath;
+    return new LoadedNpmPkg(packageName, packageLatestVersion, packagePath);
   }
 
-  // download else
   try {
-    const tarballUrl = execSync(
-      `npm view ${packageName}@${packageLatestVersion} dist.tarball`,
-    )
+    // 获取 tarball 地址
+    const tarballUrl = execSync(`npm view ${packageName}@${packageLatestVersion} dist.tarball`)
       .toString()
       .trim();
-    await download(tarballUrl, packagePath, { extract: true, strip: 1 });
-    return packagePath;
+
+    // 临时 tarball 路径
+    const tempTarballPath = path.join(
+      __dirname,
+      `./.download/${packageName}-${packageLatestVersion}.tgz`
+    );
+
+    // 确保目录存在
+    fs.ensureDirSync(path.dirname(tempTarballPath));
+
+    // 下载 tarball
+    await downloadFile(tarballUrl, tempTarballPath);
+
+    fs.ensureDirSync(packagePath);
+
+    // 解压到目标目录
+    await tar.x({
+      file: tempTarballPath,
+      cwd: packagePath,
+      strip: 1,
+    });
+
+    // 删除临时文件
+    fs.unlinkSync(tempTarballPath);
+
+    return new LoadedNpmPkg(packageName, packageLatestVersion, packagePath);
   } catch (error) {
     console.error(`Error downloading or extracting package: ${error}`);
     throw error;
   }
 }
-

package/src/utils/project.ts

@@ -3,10 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { existsSync, readFileSync, writeFileSync } from "fs";
-import path from "path";
-import { getLatestVersion } from "./npm";
-import chalk from "chalk";
+import path from 'path';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+
+import chalk from 'chalk';
+
+import { getLatestVersion } from './npm';
 
 interface PackageJson {
   dependencies: { [key: string]: string };
@@ -32,26 +34,23 @@ export class Project {
     // get nearest package.json
     let projectPath: string = process.cwd();
 
-    while (
-      projectPath !== "/" &&
-      !existsSync(path.join(projectPath, "package.json"))
-    ) {
-      projectPath = path.join(projectPath, "..");
+    while (projectPath !== '/' && !existsSync(path.join(projectPath, 'package.json'))) {
+      projectPath = path.join(projectPath, '..');
     }
-    if (projectPath === "/") {
-      throw new Error("Please run this command in a valid project");
+    if (projectPath === '/') {
+      throw new Error('Please run this command in a valid 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"));
+    this.srcPath = path.join(projectPath, 'src');
+    this.packageJsonPath = path.join(projectPath, 'package.json');
+    this.packageJson = JSON.parse(readFileSync(this.packageJsonPath, 'utf8'));
 
     this.flowgramVersion =
-      this.packageJson.dependencies["@flowgram.ai/fixed-layout-editor"] ||
-      this.packageJson.dependencies["@flowgram.ai/free-layout-editor"] ||
-      this.packageJson.dependencies["@flowgram.ai/editor"];
+      this.packageJson.dependencies['@flowgram.ai/fixed-layout-editor'] ||
+      this.packageJson.dependencies['@flowgram.ai/free-layout-editor'] ||
+      this.packageJson.dependencies['@flowgram.ai/editor'];
   }
 
   async addDependency(dependency: string) {
@@ -59,7 +58,7 @@ export class Project {
     let version: string;
 
     // 处理作用域包（如 @types/react@1.0.0）
-    const lastAtIndex = dependency.lastIndexOf("@");
+    const lastAtIndex = dependency.lastIndexOf('@');
 
     if (lastAtIndex <= 0) {
       // 没有@符号 或者@在开头（如 @types/react）
@@ -77,10 +76,7 @@ export class Project {
     }
 
     this.packageJson.dependencies[name] = version;
-    writeFileSync(
-      this.packageJsonPath,
-      JSON.stringify(this.packageJson, null, 2),
-    );
+    writeFileSync(this.packageJsonPath, JSON.stringify(this.packageJson, null, 2));
   }
 
   async addDependencies(dependencies: string[]) {
@@ -90,14 +86,11 @@ export class Project {
   }
 
   writeToPackageJsonFile() {
-    writeFileSync(
-      this.packageJsonPath,
-      JSON.stringify(this.packageJson, null, 2),
-    );
+    writeFileSync(this.packageJsonPath, JSON.stringify(this.packageJson, null, 2));
   }
 
   printInfo() {
-    console.log(chalk.bold("Project Info:"));
+    console.log(chalk.bold('Project Info:'));
     console.log(chalk.black(`  - Flowgram Version: ${this.flowgramVersion}`));
     console.log(chalk.black(`  - Project Path: ${this.projectPath}`));
   }