@flowgram.ai/cli 0.1.8

package/dist/index.js

@@ -0,0 +1,472 @@
+// ../../common/temp/node_modules/.pnpm/tsup@8.3.5_typescript@5.8.3/node_modules/tsup/assets/esm_shims.js
+import { fileURLToPath } from "url";
+import path from "path";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/materials/index.ts
+import inquirer from "inquirer";
+import chalk2 from "chalk";
+
+// src/materials/materials.ts
+import { fileURLToPath as fileURLToPath2 } from "url";
+import path3 from "path";
+import fs2 from "fs";
+
+// src/utils/traverse-file.ts
+import path2 from "path";
+import fs from "fs";
+var File = class {
+  constructor(filePath, root = "/") {
+    this.root = root;
+    this.path = filePath;
+    this.relativePath = path2.relative(this.root, this.path);
+    this.suffix = path2.extname(this.path);
+    if (!fs.existsSync(this.path)) {
+      throw Error(`File ${path2} Not Exists`);
+    }
+    try {
+      this.content = fs.readFileSync(this.path, "utf-8");
+      this.isUtf8 = true;
+    } catch (e) {
+      this.isUtf8 = false;
+      return;
+    }
+  }
+  replace(updater) {
+    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");
+  }
+};
+function* traverseRecursiveFiles(folder) {
+  const files = fs.readdirSync(folder);
+  for (const file of files) {
+    const filePath = path2.join(folder, file);
+    if (fs.statSync(filePath).isDirectory()) {
+      yield* traverseRecursiveFiles(filePath);
+    } else {
+      yield new File(filePath);
+    }
+  }
+}
+
+// src/utils/import.ts
+function assembleImport(declaration) {
+  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}'`;
+}
+function replaceImport(fileContent, origin, replaceTo) {
+  const replaceImportStatements = replaceTo.map(assembleImport);
+  return fileContent.replace(origin.statement, replaceImportStatements.join("\n"));
+}
+function* traverseFileImports(fileContent) {
+  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 = {
+      statement: fullMatch,
+      source
+    };
+    const defaultImport = defaultPart?.trim() || defaultPart2?.trim();
+    if (defaultImport && !namespacePart && !namedPart) {
+      declaration.defaultImport = defaultImport;
+    } else if (defaultImport && (namespacePart || namedPart)) {
+      declaration.defaultImport = defaultImport;
+    }
+    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;
+  }
+}
+
+// src/materials/materials.ts
+var __filename2 = fileURLToPath2(import.meta.url);
+var __dirname2 = path3.dirname(__filename2);
+var _types = [
+  "components",
+  "effects",
+  "plugins",
+  "shared",
+  "typings",
+  "validate",
+  "form-plugins",
+  "hooks"
+];
+function listAllMaterials(formMaterialSrc) {
+  const _materials = [];
+  for (const _type of _types) {
+    const materialsPath = path3.join(formMaterialSrc, _type);
+    _materials.push(
+      ...fs2.readdirSync(materialsPath).map((_path) => {
+        if (_path === "index.ts") {
+          return null;
+        }
+        return {
+          name: _path,
+          // Assuming the folder name is the material name
+          type: _type,
+          path: path3.join(materialsPath, _path)
+        };
+      }).filter((material) => material !== null)
+    );
+  }
+  return _materials;
+}
+var getFormMaterialDependencies = (formMaterialPath) => {
+  const packageJsonPath = path3.join(formMaterialPath, "package.json");
+  const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf8"));
+  return packageJson.dependencies;
+};
+var copyMaterial = (material, project, formMaterialPath) => {
+  const formMaterialDependencies = getFormMaterialDependencies(formMaterialPath);
+  const sourceDir = material.path;
+  const materialRoot = path3.join(
+    project.projectPath,
+    "src",
+    "form-materials",
+    `${material.type}`
+  );
+  const targetDir = path3.join(materialRoot, material.name);
+  const packagesToInstall = /* @__PURE__ */ new Set();
+  fs2.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("@/")) {
+          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")) {
+          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]
+  };
+};
+
+// src/utils/npm.ts
+import { execSync } from "child_process";
+import { existsSync } from "fs";
+import path4 from "path";
+import download from "download";
+async function getLatestVersion(packageName) {
+  return execSync(`npm view ${packageName} version --tag=latest`).toString().trim();
+}
+async function loadNpm(packageName) {
+  const packageLatestVersion = await getLatestVersion(packageName);
+  const packagePath = path4.join(
+    __dirname,
+    `./.download/${packageName}-${packageLatestVersion}`
+  );
+  if (existsSync(packagePath)) {
+    return packagePath;
+  }
+  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;
+  }
+}
+
+// src/materials/index.ts
+import path6 from "path";
+
+// src/utils/project.ts
+import { existsSync as existsSync2, readFileSync, writeFileSync } from "fs";
+import path5 from "path";
+import chalk from "chalk";
+var Project = class _Project {
+  constructor() {
+  }
+  async init() {
+    let projectPath = process.cwd();
+    while (projectPath !== "/" && !existsSync2(path5.join(projectPath, "package.json"))) {
+      projectPath = path5.join(projectPath, "..");
+    }
+    if (projectPath === "/") {
+      throw new Error("Please run this command in a valid project");
+    }
+    this.projectPath = projectPath;
+    this.packageJsonPath = path5.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) {
+    let name;
+    let version;
+    const lastAtIndex = dependency.lastIndexOf("@");
+    if (lastAtIndex <= 0) {
+      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) {
+    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;
+  }
+};
+
+// src/materials/index.ts
+async function syncMaterial(materialName) {
+  console.log(chalk2.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 = path6.join(formMaterialPath, "src");
+  const materials = listAllMaterials(formMaterialSrc);
+  let material;
+  if (materialName) {
+    const selectedMaterial = materials.find(
+      (m) => `${m.type}/${m.name}` === materialName
+    );
+    if (selectedMaterial) {
+      material = selectedMaterial;
+      console.log(chalk2.green(`Using material: ${materialName}`));
+    } else {
+      console.log(
+        chalk2.yellow(
+          `Material "${materialName}" not found. Please select from the list:`
+        )
+      );
+    }
+  }
+  if (!material) {
+    const result = await inquirer.prompt([
+      {
+        type: "list",
+        name: "material",
+        message: "Select one material to add:",
+        choices: [
+          ...materials.map((_material) => ({
+            name: `${_material.type}/${_material.name}`,
+            value: _material
+          }))
+        ]
+      }
+    ]);
+    material = result.material;
+  }
+  if (!material) {
+    console.error(chalk2.red("No material selected. Exiting."));
+    process.exit(1);
+  }
+  console.log(
+    chalk2.bold("The following materials will be added to your project")
+  );
+  console.log(material);
+  let { packagesToInstall } = copyMaterial(material, project, formMaterialPath);
+  await project.addDependencies(packagesToInstall);
+  console.log(
+    chalk2.bold("These npm dependencies is added to your package.json")
+  );
+  packagesToInstall.forEach((_package) => {
+    console.log(`- ${_package}`);
+  });
+  console.log(chalk2.bold("\nPlease run npm install to install dependencies"));
+}
+
+// src/create-app/index.ts
+import path7 from "path";
+import { execSync as execSync2 } from "child_process";
+import inquirer2 from "inquirer";
+import fs3 from "fs-extra";
+import chalk3 from "chalk";
+import download2 from "download";
+import * as tar from "tar";
+var args = process.argv.slice(2);
+var updateFlowGramVersions = (dependencies, latestVersion) => {
+  for (const packageName in dependencies) {
+    if (packageName.startsWith("@flowgram.ai")) {
+      dependencies[packageName] = latestVersion;
+    }
+  }
+};
+var createApp = async (projectName) => {
+  console.log(chalk3.green("Welcome to @flowgram.ai/create-app CLI!"));
+  const latest = execSync2("npm view @flowgram.ai/demo-fixed-layout version --tag=latest latest").toString().trim();
+  let folderName = "";
+  if (!projectName) {
+    const { repo } = await inquirer2.prompt([
+      {
+        type: "list",
+        name: "repo",
+        message: "Select a demo to create:",
+        choices: [
+          { name: "Fixed Layout Demo", value: "demo-fixed-layout" },
+          { name: "Free Layout Demo", value: "demo-free-layout" },
+          { name: "Fixed Layout Demo Simple", value: "demo-fixed-layout-simple" },
+          { 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" }
+        ]
+      }
+    ]);
+    folderName = repo;
+  } else {
+    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.');
+      return;
+    }
+  }
+  try {
+    const targetDir = path7.join(process.cwd());
+    const downloadPackage = async () => {
+      try {
+        const tarballBuffer = await download2(`https://registry.npmjs.org/@flowgram.ai/${folderName}/-/${folderName}-${latest}.tgz`);
+        fs3.ensureDirSync(targetDir);
+        const tempTarballPath = path7.join(process.cwd(), `${folderName}.tgz`);
+        fs3.writeFileSync(tempTarballPath, tarballBuffer);
+        await tar.x({
+          file: tempTarballPath,
+          C: targetDir
+        });
+        fs3.renameSync(path7.join(targetDir, "package"), path7.join(targetDir, folderName));
+        fs3.unlinkSync(tempTarballPath);
+        return true;
+      } catch (error) {
+        console.error(`Error downloading or extracting package: ${error}`);
+        return false;
+      }
+    };
+    const res = await downloadPackage();
+    const pkgJsonPath = path7.join(targetDir, folderName, "package.json");
+    const data = fs3.readFileSync(pkgJsonPath, "utf-8");
+    const packageLatestVersion = execSync2("npm view @flowgram.ai/core version --tag=latest latest").toString().trim();
+    const jsonData = JSON.parse(data);
+    if (jsonData.dependencies) {
+      updateFlowGramVersions(jsonData.dependencies, packageLatestVersion);
+    }
+    if (jsonData.devDependencies) {
+      updateFlowGramVersions(jsonData.devDependencies, packageLatestVersion);
+    }
+    fs3.writeFileSync(pkgJsonPath, JSON.stringify(jsonData, null, 2), "utf-8");
+    if (res) {
+      console.log(chalk3.green(`${folderName} Demo project created successfully!`));
+      console.log(chalk3.yellow("Run the following commands to start:"));
+      console.log(chalk3.cyan(`  cd ${folderName}`));
+      console.log(chalk3.cyan("  npm install"));
+      console.log(chalk3.cyan("  npm start"));
+    } else {
+      console.log(chalk3.red("Download failed"));
+    }
+  } catch (error) {
+    console.error("Error downloading repo:", error);
+    return;
+  }
+};
+
+// src/index.ts
+var program = new Command();
+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").action(async (projectName) => {
+  await createApp(projectName);
+});
+program.command("materials").description("Sync materials to the project").argument("[string]", "Material name").action(async (materialName) => {
+  await syncMaterial(materialName);
+});
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@flowgram.ai/cli",
+  "version": "0.1.8",
+  "description": "A CLI tool to create demo projects or sync materials",
+  "bin": {
+    "flowgram-cli": "./bin/index.js"
+  },
+  "type": "module",
+  "files": [
+    "bin",
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "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"
+  },
+  "devDependencies": {
+    "@types/download": "8.0.5",
+    "@types/fs-extra": "11.0.4",
+    "@types/node": "^18",
+    "@types/inquirer": "9.0.7",
+    "tsup": "^8.0.1",
+    "eslint": "^8.54.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist",
+    "start": "node bin/index.js"
+  }
+}

package/src/create-app/index.ts

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import path from 'path';
+
+import { execSync } from 'child_process';
+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) {
+    if (packageName.startsWith('@flowgram.ai')) {
+      dependencies[packageName] = latestVersion
+    }
+  }
+}
+
+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();
+
+  let folderName = ''
+
+  if (!projectName) {
+    // 询问用户选择 demo 项目
+    const { repo } = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'repo',
+        message: 'Select a demo to create:',
+        choices: [
+          { name: 'Fixed Layout Demo', value: 'demo-fixed-layout' },
+          { name: 'Free Layout Demo', value: 'demo-free-layout' },
+          { name: 'Fixed Layout Demo Simple', value: 'demo-fixed-layout-simple' },
+          { 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' }
+        ],
+      },
+    ]);
+
+    folderName = repo;
+  } else {
+    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.');
+      return;
+    }
+  }
+
+  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 tempTarballPath = path.join(process.cwd(), `${folderName}.tgz`);
+
+        // 将下载的 tarball 写入临时文件
+        fs.writeFileSync(tempTarballPath, tarballBuffer);
+
+        // 解压 tarball 文件到目标文件夹
+        await tar.x({
+          file: tempTarballPath,
+          C: targetDir,
+        });
+
+        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
+    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 jsonData = JSON.parse(data);
+    if (jsonData.dependencies) {
+      updateFlowGramVersions(jsonData.dependencies, packageLatestVersion);
+    }
+
+    if (jsonData.devDependencies) {
+      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'))
+    }
+
+  } catch (error) {
+    console.error('Error downloading repo:', error);
+    return;
+  }
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Command } from "commander";
+
+import { syncMaterial } from "./materials";
+import { createApp } from "./create-app";
+
+const program = new Command();
+
+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')
+  .action(async (projectName) => {
+    await createApp(projectName);
+  });
+
+program
+  .command("materials")
+  .description("Sync materials to the project")
+  .argument('[string]', 'Material name')
+  .action(async (materialName) => {
+    await syncMaterial(materialName);
+  });
+
+program.parse(process.argv);