@flowgram.ai/cli 0.1.0-alpha.15

package/src/materials/index.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import inquirer from "inquirer";
+import chalk from "chalk";
+
+import { copyMaterial, listAllMaterials, Material } from "./materials";
+import { loadNpm } from "../utils/npm";
+import path from "path";
+import { Project } from "../utils/project";
+
+export async function syncMaterial(materialName?: string) {
+  // materialName can be undefined
+  console.log(chalk.bgGreenBright("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",
+    );
+  }
+
+  const formMaterialPath = await loadNpm("@flowgram.ai/form-materials");
+  const formMaterialSrc = path.join(formMaterialPath, "src");
+
+  const materials: Material[] = listAllMaterials(formMaterialSrc);
+
+  let material: Material | undefined; // material can be undefined
+
+  // 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:`,
+        ),
+      );
+    }
+  }
+
+  // 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."));
+    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);
+  let { packagesToInstall } = copyMaterial(material, project, formMaterialPath);
+
+  // 4. Install the dependencies
+  await project.addDependencies(packagesToInstall);
+  console.log(
+    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"));
+}

package/src/materials/materials.ts

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * 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);
+
+// Added type definitions
+export interface Material {
+  name: string;
+  type: string;
+  path: string;
+  [key: string]: any; // For other properties from config.json
+}
+
+const _types: string[] = [
+  "components",
+  "effects",
+  "plugins",
+  "shared",
+  "typings",
+  "validate",
+  "form-plugins",
+  "hooks",
+];
+
+export function listAllMaterials(formMaterialSrc: string): Material[] {
+  const _materials: Material[] = [];
+
+  for (const _type of _types) {
+    // 在 Node.js 中，import.meta.dirname 不可用，可使用 import.meta.url 结合 url 模块来获取目录路径
+
+    const materialsPath: string = path.join(formMaterialSrc, _type);
+    _materials.push(
+      ...fs
+        .readdirSync(materialsPath)
+        .map((_path: string) => {
+          if (_path === "index.ts") {
+            return null;
+          }
+
+          return {
+            name: _path, // Assuming the folder name is the material name
+            type: _type,
+            path: path.join(materialsPath, _path),
+          } as Material;
+        })
+        .filter((material): material is Material => material !== null),
+    );
+  }
+
+  return _materials;
+}
+
+export const getFormMaterialDependencies = (
+  formMaterialPath: string,
+): Record<string, string> => {
+  const packageJsonPath: string = path.join(formMaterialPath, "package.json");
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+
+  return packageJson.dependencies;
+};
+
+export const copyMaterial = (
+  material: Material,
+  project: Project,
+  formMaterialPath: string,
+): {
+  packagesToInstall: string[];
+} => {
+  const formMaterialDependencies = getFormMaterialDependencies(formMaterialPath);
+
+  const sourceDir: string = material.path;
+  const materialRoot: string = path.join(
+    project.projectPath,
+    "src",
+    "form-materials",
+    `${material.type}`,
+  );
+  const targetDir = path.join(materialRoot, material.name);
+  const packagesToInstall: Set<string> = new Set();
+
+  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}`);
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    packagesToInstall: [...packagesToInstall],
+  };
+};

package/src/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/src/utils/npm.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { execSync } from 'child_process';
+import { existsSync } from 'fs';
+import path from 'path';
+import download from 'download';
+
+export async function getLatestVersion(packageName: string): Promise<string> {
+  return execSync(`npm view ${packageName} version --tag=latest`)
+    .toString()
+    .trim();
+}
+
+export async function loadNpm(packageName: string): Promise<string> {
+  const packageLatestVersion = await getLatestVersion(packageName);
+
+  const packagePath = path.join(
+    __dirname,
+    `./.download/${packageName}-${packageLatestVersion}`,
+  );
+
+  if (existsSync(packagePath)) {
+    return packagePath;
+  }
+
+  // download else
+  try {
+    const tarballUrl = execSync(
+      `npm view ${packageName}@${packageLatestVersion} dist.tarball`,
+    )
+      .toString()
+      .trim();
+    await download(tarballUrl, packagePath, { extract: true, strip: 1 });
+    return packagePath;
+  } catch (error) {
+    console.error(`Error downloading or extracting package: ${error}`);
+    throw error;
+  }
+}
+

package/src/utils/project.ts

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import path from "path";
+import { getLatestVersion } from "./npm";
+import chalk from "chalk";
+
+interface PackageJson {
+  dependencies: { [key: string]: string };
+  devDependencies?: { [key: string]: string };
+  peerDependencies?: { [key: string]: string };
+  [key: string]: any;
+}
+
+export class Project {
+  flowgramVersion?: string;
+
+  projectPath: string;
+
+  packageJsonPath: string;
+
+  packageJson: PackageJson;
+
+  protected constructor() {}
+
+  async init() {
+    // get nearest package.json
+    let projectPath: string = process.cwd();
+
+    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");
+    }
+
+    this.projectPath = projectPath;
+
+    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"];
+  }
+
+  async addDependency(dependency: string) {
+    let name: string;
+    let version: string;
+
+    // 处理作用域包（如 @types/react@1.0.0）
+    const lastAtIndex = dependency.lastIndexOf("@");
+
+    if (lastAtIndex <= 0) {
+      // 没有@符号 或者@在开头（如 @types/react）
+      name = dependency;
+      version = await getLatestVersion(name);
+    } else {
+      // 正常分割包名和版本
+      name = dependency.substring(0, lastAtIndex);
+      version = dependency.substring(lastAtIndex + 1);
+
+      // 如果版本部分为空，获取最新版本
+      if (!version.trim()) {
+        version = await getLatestVersion(name);
+      }
+    }
+
+    this.packageJson.dependencies[name] = version;
+    writeFileSync(
+      this.packageJsonPath,
+      JSON.stringify(this.packageJson, null, 2),
+    );
+  }
+
+  async addDependencies(dependencies: string[]) {
+    for (const dependency of dependencies) {
+      await this.addDependency(dependency);
+    }
+  }
+
+  printInfo() {
+    console.log(chalk.bold("Project Info:"));
+    console.log(chalk.black(`  - Flowgram Version: ${this.flowgramVersion}`));
+    console.log(chalk.black(`  - Project Path: ${this.projectPath}`));
+  }
+
+  static async getSingleton() {
+    const info = new Project();
+    await info.init();
+    return info;
+  }
+}

package/src/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);
+    }
+  }
+}