@flowgram.ai/cli 0.4.11 → 0.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/cli",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "description": "A CLI tool to create demo projects or sync materials",
   "bin": {
     "flowgram-cli": "./bin/index.js"
@@ -15,20 +15,20 @@
     "fs-extra": "^9.1.0",
     "commander": "^11.0.0",
     "chalk": "^5.3.0",
-    "download": "8.0.0",
     "tar": "7.4.3",
-    "inquirer": "^9.2.7",
+    "inquirer": "^12.9.4",
     "ignore": "~7.0.5"
   },
   "devDependencies": {
     "@types/download": "8.0.5",
     "@types/fs-extra": "11.0.4",
     "@types/node": "^18",
-    "@types/inquirer": "9.0.7",
+    "@types/inquirer": "^9.0.9",
     "tsup": "^8.0.1",
     "eslint": "^8.54.0",
     "@typescript-eslint/parser": "^6.10.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "@flowgram.ai/eslint-config": "0.4.13"
   },
   "publishConfig": {
     "access": "public",
@@ -36,6 +36,9 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist",
-    "start": "node bin/index.js"
+    "watch": "tsup src/index.ts --format esm,cjs --out-dir dist --watch",
+    "start": "node bin/index.js",
+    "lint": "eslint ./src --cache",
+    "lint:fix": "eslint ./src --fix"
   }
 }

package/src/create-app/index.ts

@@ -4,29 +4,58 @@
  */
 
 import path from 'path';
-
+import https from 'https';
 import { execSync } from 'child_process';
+
+import * as tar from 'tar';
 import inquirer from 'inquirer';
 import fs from 'fs-extra';
 import chalk from 'chalk';
-import download from 'download';
-import * as tar from 'tar';
-
-const args = process.argv.slice(2);
 
 const updateFlowGramVersions = (dependencies: any[], latestVersion: string) => {
-  for(const packageName in dependencies) {
+  for (const packageName in dependencies) {
     if (packageName.startsWith('@flowgram.ai')) {
-      dependencies[packageName] = latestVersion
+      dependencies[packageName] = latestVersion;
     }
   }
+};
+
+// 使用 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 const createApp = async (projectName?: string) => {
   console.log(chalk.green('Welcome to @flowgram.ai/create-app CLI!'));
-  const latest = execSync('npm view @flowgram.ai/demo-fixed-layout version --tag=latest latest').toString().trim();
+  const latest = execSync('npm view @flowgram.ai/demo-fixed-layout version --tag=latest latest')
+    .toString()
+    .trim();
 
-  let folderName = ''
+  let folderName = '';
 
   if (!projectName) {
     // 询问用户选择 demo 项目
@@ -42,14 +71,23 @@ export const createApp = async (projectName?: string) => {
           { name: 'Free Layout Demo Simple', value: 'demo-free-layout-simple' },
           { name: 'Free Layout Nextjs Demo', value: 'demo-nextjs' },
           { name: 'Free Layout Vite Demo Simple', value: 'demo-vite' },
-          { name: 'Demo Playground for infinite canvas', value: 'demo-playground' }
+          { name: 'Demo Playground for infinite canvas', value: 'demo-playground' },
         ],
       },
     ]);
 
     folderName = repo;
   } else {
-    if (['fixed-layout', 'free-layout', 'fixed-layout-simple', 'free-layout-simple', 'playground', 'nextjs'].includes(projectName)) {
+    if (
+      [
+        'fixed-layout',
+        'free-layout',
+        'fixed-layout-simple',
+        'free-layout-simple',
+        'playground',
+        'nextjs',
+      ].includes(projectName)
+    ) {
       folderName = `demo-${projectName}`;
     } else {
       console.error('Invalid projectName. Please run "npx create-app" to choose demo.');
@@ -59,45 +97,42 @@ export const createApp = async (projectName?: string) => {
 
   try {
     const targetDir = path.join(process.cwd());
+
     // 下载 npm 包的 tarball
     const downloadPackage = async () => {
       try {
-        // 从 npm registry 下载 tarball 文件
-        const tarballBuffer = await download(`https://registry.npmjs.org/@flowgram.ai/${folderName}/-/${folderName}-${latest}.tgz`);
-
-        // 确保目标文件夹存在
-        fs.ensureDirSync(targetDir);
-
-        // 创建一个临时文件名来保存 tarball 数据
+        const url = `https://registry.npmjs.org/@flowgram.ai/${folderName}/-/${folderName}-${latest}.tgz`;
         const tempTarballPath = path.join(process.cwd(), `${folderName}.tgz`);
 
-        // 将下载的 tarball 写入临时文件
-        fs.writeFileSync(tempTarballPath, tarballBuffer);
+        console.log(chalk.blue(`Downloading ${url} ...`));
+        await downloadFile(url, tempTarballPath);
+
+        fs.ensureDirSync(targetDir);
 
-        // 解压 tarball 文件到目标文件夹
         await tar.x({
           file: tempTarballPath,
           C: targetDir,
         });
 
-        fs.renameSync(path.join(targetDir, 'package'), path.join(targetDir, folderName))
+        fs.renameSync(path.join(targetDir, 'package'), path.join(targetDir, folderName));
 
-        // 删除下载的 tarball 文件
         fs.unlinkSync(tempTarballPath);
         return true;
-
       } catch (error) {
         console.error(`Error downloading or extracting package: ${error}`);
         return false;
       }
     };
+
     const res = await downloadPackage();
 
-    // 下载完成后，执行操作，替换 package.json 文件内部的所有 @flowgram.ai 包版本为 latest
+    // 替换 package.json 内部的 @flowgram.ai 包版本为 latest
     const pkgJsonPath = path.join(targetDir, folderName, 'package.json');
     const data = fs.readFileSync(pkgJsonPath, 'utf-8');
 
-    const packageLatestVersion = execSync('npm view @flowgram.ai/core version --tag=latest latest').toString().trim();
+    const packageLatestVersion = execSync('npm view @flowgram.ai/core version --tag=latest latest')
+      .toString()
+      .trim();
 
     const jsonData = JSON.parse(data);
     if (jsonData.dependencies) {
@@ -108,23 +143,19 @@ export const createApp = async (projectName?: string) => {
       updateFlowGramVersions(jsonData.devDependencies, packageLatestVersion);
     }
 
-    // 修改完成后写入
     fs.writeFileSync(pkgJsonPath, JSON.stringify(jsonData, null, 2), 'utf-8');
 
     if (res) {
-      // 克隆项目
       console.log(chalk.green(`${folderName} Demo project created successfully!`));
-
       console.log(chalk.yellow('Run the following commands to start:'));
       console.log(chalk.cyan(`  cd ${folderName}`));
       console.log(chalk.cyan('  npm install'));
       console.log(chalk.cyan('  npm start'));
     } else {
-      console.log(chalk.red('Download failed'))
+      console.log(chalk.red('Download failed'));
     }
-
   } catch (error) {
     console.error('Error downloading repo:', error);
     return;
   }
-}
+};

package/src/find-materials/index.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import chalk from 'chalk';
+
+import { traverseRecursiveTsFiles } from '../utils/ts-file';
+import { Project } from '../utils/project';
+import { loadNpm } from '../utils/npm';
+import { Material } from '../materials/material';
+
+export async function findUsedMaterials() {
+  // materialName can be undefined
+  console.log(chalk.bold('🚀 Welcome to @flowgram.ai form-materials CLI!'));
+
+  const project = await Project.getSingleton();
+  project.printInfo();
+
+  const formMaterialPkg = await loadNpm('@flowgram.ai/form-materials');
+  const materials: Material[] = Material.listAll(formMaterialPkg);
+
+  const allUsedMaterials = new Set<Material>();
+
+  const exportName2Material = new Map<string, Material>();
+
+  for (const material of materials) {
+    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)) {
+    const fileMaterials = new Set<Material>();
+
+    let fileImportPrinted = false;
+    for (const importDeclaration of tsFile.imports) {
+      if (
+        !importDeclaration.source.startsWith('@flowgram.ai/form-materials') ||
+        !importDeclaration.namedImports?.length
+      ) {
+        continue;
+      }
+
+      if (!fileImportPrinted) {
+        fileImportPrinted = true;
+        console.log(chalk.bold(`\n👀 Searching ${tsFile.path}`));
+      }
+
+      console.log(`🔍 ${importDeclaration.statement}`);
+
+      if (importDeclaration.namedImports) {
+        importDeclaration.namedImports.forEach((namedImport) => {
+          const material = exportName2Material.get(namedImport.imported);
+
+          if (material) {
+            fileMaterials.add(material);
+            allUsedMaterials.add(material);
+            console.log(`import ${chalk.bold(material.fullName)} by ${namedImport.imported}`);
+          }
+        });
+      }
+    }
+  }
+
+  console.log(chalk.bold('\n📦 All used materials:'));
+  console.log([...allUsedMaterials].map((_material) => _material.fullName).join(','));
+}

package/src/index.ts

@@ -3,44 +3,59 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { Command } from "commander";
+import path from 'path';
 
-import { syncMaterial } from "./materials";
-import { createApp } from "./create-app";
-import { updateFlowgramVersion } from "./update-version";
+import { Command } from 'commander';
+
+import { updateFlowgramVersion } from './update-version';
+import { syncMaterial } from './materials';
+import { findUsedMaterials } from './find-materials';
+import { createApp } from './create-app';
 
 const program = new Command();
 
-program.name("flowgram-cli").version("1.0.0").description("Flowgram CLI");
+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")
+  .command('create-app')
+  .description('Create a new flowgram project')
+  .argument('[string]', 'Project name')
   .action(async (projectName) => {
     await createApp(projectName);
   });
 
 program
-  .command("materials")
-  .description("Sync materials to the project")
-  .argument("[string]", "Material name")
-  .option(
-    "--refresh-project-imports",
-    "Refresh project imports to copied materials",
-    false,
+  .command('materials')
+  .description('Sync materials to the project')
+  .argument(
+    '[string]',
+    'Material name or names\nExample 1: components/variable-selector \nExample2: components/variable-selector,effect/provideJsonSchemaOutputs'
   )
+  .option('--refresh-project-imports', 'Refresh project imports to copied materials', false)
+  .option('--target-material-root-dir <string>', 'Target directory to copy materials')
+  .option('--select-multiple', 'Select multiple materials', false)
   .action(async (materialName, options) => {
     await syncMaterial({
       materialName,
       refreshProjectImports: options.refreshProjectImports,
+      targetMaterialRootDir: options.targetMaterialRootDir
+        ? path.join(process.cwd(), options.targetMaterialRootDir)
+        : undefined,
+      selectMultiple: options.selectMultiple,
     });
   });
 
 program
-  .command("update-version")
-  .description("Update flowgram version in the project")
-  .argument("[string]", "Flowgram version")
+  .command('find-used-materials')
+  .description('Find used materials in the project')
+  .action(async () => {
+    await findUsedMaterials();
+  });
+
+program
+  .command('update-version')
+  .description('Update flowgram version in the project')
+  .argument('[string]', 'Flowgram version')
   .action(async (version) => {
     await updateFlowgramVersion(version);
   });

package/src/materials/copy.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';
+
+import { traverseRecursiveTsFiles } from '../utils/ts-file';
+import { SyncMaterialContext } from './types';
+
+interface CopyMaterialReturn {
+  packagesToInstall: string[];
+}
+
+export const copyMaterials = (ctx: SyncMaterialContext): CopyMaterialReturn => {
+  const { selectedMaterials, project, formMaterialPkg, targetFormMaterialRoot } = ctx;
+  const formMaterialDependencies = formMaterialPkg.dependencies;
+  const packagesToInstall: Set<string> = new Set();
+
+  for (const material of selectedMaterials) {
+    const sourceDir: string = material.sourceDir;
+    const targetDir: string = path.join(targetFormMaterialRoot, material.type, material.name);
+
+    fs.cpSync(sourceDir, targetDir, { recursive: true });
+
+    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}`);
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    packagesToInstall: [...packagesToInstall],
+  };
+};

package/src/materials/index.ts

@@ -3,105 +3,76 @@
  * SPDX-License-Identifier: MIT
  */
 
-import inquirer from "inquirer";
-import chalk from "chalk";
+import path from 'path';
 
-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";
+import chalk from 'chalk';
 
-export async function syncMaterial(opts: {
-  materialName?: string;
-  refreshProjectImports?: boolean;
-}) {
-  const { materialName, refreshProjectImports } = opts;
+import { Project } from '../utils/project';
+import { loadNpm } from '../utils/npm';
+import { MaterialCliOptions, SyncMaterialContext } from './types';
+import { getSelectedMaterials } from './select';
+import { executeRefreshProjectImport } from './refresh-project-import';
+import { Material } from './material';
+import { copyMaterials } from './copy';
+
+export async function syncMaterial(cliOpts: MaterialCliOptions) {
+  const { refreshProjectImports, targetMaterialRootDir } = cliOpts;
 
   // materialName can be undefined
-  console.log(chalk.bold("🚀 Welcome to @flowgram.ai form-materials!"));
+  console.log(chalk.bold('🚀 Welcome to @flowgram.ai form-materials CLI!'));
 
   const project = await Project.getSingleton();
   project.printInfo();
 
+  // where to place all material in target project
+  const targetFormMaterialRoot =
+    targetMaterialRootDir || path.join(project.projectPath, 'src', 'form-materials');
+  console.log(chalk.black(`  - Target material root: ${targetFormMaterialRoot}`));
+
   if (!project.flowgramVersion) {
     throw new Error(
       chalk.red(
-        "❌ Please install @flowgram.ai/fixed-layout-editor or @flowgram.ai/free-layout-editor",
-      ),
+        '❌ Please install @flowgram.ai/fixed-layout-editor or @flowgram.ai/free-layout-editor'
+      )
     );
   }
 
-  const formMaterialPath = await loadNpm("@flowgram.ai/form-materials");
-  const formMaterialSrc = path.join(formMaterialPath, "src");
-
-  const materials: Material[] = listAllMaterials(formMaterialSrc);
+  const formMaterialPkg = await loadNpm('@flowgram.ai/form-materials');
 
-  let material: Material | undefined; // material can be undefined
-
-  // 1. Check if materialName is provided and exists in materials
-  if (materialName) {
-    const selectedMaterial = materials.find(
-      (m) => `${m.type}/${m.name}` === materialName,
-    );
-    if (selectedMaterial) {
-      material = selectedMaterial;
-      console.log(chalk.green(`Using material: ${materialName}`));
-    } else {
-      console.log(
-        chalk.yellow(
-          `Material "${materialName}" not found. Please select from the list:`,
-        ),
-      );
-    }
-  }
+  let selectedMaterials: Material[] = await getSelectedMaterials(cliOpts, formMaterialPkg);
 
-  // 2. If material not found or materialName not provided, prompt user to select
-  if (!material) {
-    // 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: [
-          ...materials.map((_material) => ({
-            name: `${_material.type}/${_material.name}`,
-            value: _material,
-          })),
-        ],
-      },
-    ]);
-    material = result.material;
-  }
   // Ensure material is defined before proceeding
-  if (!material) {
-    console.error(chalk.red("No material selected. Exiting."));
+  if (!selectedMaterials.length) {
+    console.error(chalk.red('No material selected. Exiting.'));
     process.exit(1);
   }
 
-  // 3. Refresh project imports
+  const context: SyncMaterialContext = {
+    selectedMaterials: selectedMaterials,
+    project,
+    formMaterialPkg,
+    cliOpts,
+    targetFormMaterialRoot,
+  };
+
+  // Copy the materials to the project
+  console.log(chalk.bold('🚀 The following materials will be added to your project'));
+  console.log(selectedMaterials.map((material) => `📦 ${material.fullName}`).join('\n'));
+  console.log('\n');
+
+  let { packagesToInstall } = copyMaterials(context);
+
+  // Refresh project imports
   if (refreshProjectImports) {
-    console.log(chalk.bold("🚀 Refresh imports in your project"));
-    executeRefreshProjectImport(project, material);
+    console.log(chalk.bold('🚀 Refresh imports in your project'));
+    executeRefreshProjectImport(context);
   }
 
-  // 4. Copy the materials to the project
-  console.log(
-    chalk.bold("🚀 The following materials will be added to your project"),
-  );
-  console.log(material);
-  let { packagesToInstall } = copyMaterial(material, project, formMaterialPath);
-
-  // 4. Install the dependencies
+  // Install the dependencies
   await project.addDependencies(packagesToInstall);
-  console.log(
-    chalk.bold("✅ These npm dependencies is added to your package.json"),
-  );
+  console.log(chalk.bold('\n✅ These npm dependencies is added to your package.json'));
   packagesToInstall.forEach((_package) => {
     console.log(`- ${_package}`);
   });
-  console.log(chalk.bold("\n➡️ Please run npm install to install dependencies\n"));
+  console.log(chalk.bold(chalk.bold('\n➡️ Please run npm install to install dependencies\n')));
 }

package/src/materials/material.ts

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import path from 'path';
+import { readdirSync } from 'fs';
+
+import { getIndexTsFile } from '../utils/ts-file';
+import { LoadedNpmPkg } from '../utils/npm';
+
+export class Material {
+  protected static _all_materials_cache: Material[] = [];
+
+  static ALL_TYPES = [
+    'components',
+    'effects',
+    'plugins',
+    'shared',
+    'validate',
+    'form-plugins',
+    'hooks',
+  ];
+
+  constructor(public type: string, public name: string, public formMaterialPkg: LoadedNpmPkg) {}
+
+  get fullName() {
+    return `${this.type}/${this.name}`;
+  }
+
+  get sourceDir() {
+    return path.join(this.formMaterialPkg.srcPath, this.type, this.name);
+  }
+
+  get indexFile() {
+    return getIndexTsFile(this.sourceDir);
+  }
+
+  get allExportNames() {
+    return this.indexFile?.allExportNames || [];
+  }
+
+  static listAll(formMaterialPkg: LoadedNpmPkg): Material[] {
+    if (!this._all_materials_cache.length) {
+      this._all_materials_cache = Material.ALL_TYPES.map((type) => {
+        const materialsPath: string = path.join(formMaterialPkg.srcPath, type);
+        return readdirSync(materialsPath)
+          .map((_path: string) => {
+            if (_path === 'index.ts') {
+              return null;
+            }
+
+            return new Material(type, _path, formMaterialPkg);
+          })
+          .filter((material): material is Material => material !== null);
+      }).flat();
+    }
+
+    return this._all_materials_cache;
+  }
+}