@knotx/cli 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 'use strict';
 
+const node_child_process = require('node:child_process');
 const path = require('node:path');
 const process = require('node:process');
 const chalk = require('chalk');
@@ -18,6 +19,25 @@ const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 const inquirer__default = /*#__PURE__*/_interopDefaultCompat(inquirer);
 const ora__default = /*#__PURE__*/_interopDefaultCompat(ora);
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -41,7 +61,7 @@ var __async = (__this, __arguments, generator) => {
 const templatesDir = path__default.resolve(__dirname, "..", "templates");
 const program = new commander.Command();
 program.name("knotx").description("Knotx CLI - \u521B\u5EFA\u548C\u7BA1\u7406Knotx\u63D2\u4EF6").version("0.0.1");
-program.command("create-plugin").description("\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684Knotx\u63D2\u4EF6").action(() => __async(undefined, null, function* () {
+program.command("create-plugin").description("\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684Knotx\u63D2\u4EF6\uFF0C\u5305\u542B\u5F00\u53D1\u73AF\u5883\u548C\u6F14\u793A playground").action(() => __async(undefined, null, function* () {
   console.log(chalk__default.blue("\u{1F539} \u6B22\u8FCE\u4F7F\u7528 Knotx \u63D2\u4EF6\u521B\u5EFA\u5DE5\u5177\uFF01"));
   const answers = yield inquirer__default.prompt([
     {
@@ -70,43 +90,98 @@ program.command("create-plugin").description("\u521B\u5EFA\u4E00\u4E2A\u65B0\u76
     console.log(chalk__default.red(`\u274C \u9519\u8BEF: \u76EE\u5F55 ${fullPluginName} \u5DF2\u5B58\u5728`));
     return;
   }
-  const spinner = ora__default("\u{1F4C2} \u521B\u5EFA\u63D2\u4EF6\u76EE\u5F55...").start();
+  let spinner = ora__default("\u{1F4C2} \u521B\u5EFA\u63D2\u4EF6\u76EE\u5F55...").start();
   try {
     yield fs__default.ensureDir(targetDir);
     yield fs__default.ensureDir(path__default.join(targetDir, "src"));
     spinner.succeed("\u{1F4C2} \u63D2\u4EF6\u76EE\u5F55\u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA package.json...";
-    spinner.start();
-    yield createPackageJson(targetDir, pluginName, environment);
+    spinner = ora__default("\u{1F50D} \u83B7\u53D6 @knotx \u5305\u7684\u6700\u65B0\u7248\u672C...").start();
+    const knotxVersions = yield getKnotxPackageVersions();
+    spinner.succeed("\u{1F50D} @knotx \u5305\u7248\u672C\u4FE1\u606F\u83B7\u53D6\u6210\u529F");
+    spinner = ora__default("\u{1F4C4} \u521B\u5EFA package.json...").start();
+    yield createPackageJson(targetDir, pluginName, environment, knotxVersions);
     spinner.succeed("\u{1F4C4} package.json \u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA\u914D\u7F6E\u6587\u4EF6...";
-    spinner.start();
+    spinner = ora__default("\u{1F4C4} \u521B\u5EFA\u914D\u7F6E\u6587\u4EF6...").start();
     yield createConfigFiles(targetDir);
     spinner.succeed("\u{1F4C4} \u914D\u7F6E\u6587\u4EF6\u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA\u6E90\u4EE3\u7801\u6587\u4EF6...";
-    spinner.start();
+    spinner = ora__default("\u{1F4C4} \u521B\u5EFA\u6E90\u4EE3\u7801\u6587\u4EF6...").start();
     yield createSourceFiles(targetDir, pluginName, environment);
     spinner.succeed("\u{1F4C4} \u6E90\u4EE3\u7801\u6587\u4EF6\u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA README.md...";
-    spinner.start();
+    spinner = ora__default("\u{1F4C4} \u521B\u5EFA README.md...").start();
     yield createReadme(targetDir, pluginName);
     spinner.succeed("\u{1F4C4} README.md \u521B\u5EFA\u6210\u529F");
+    spinner = ora__default("\u{1F4C4} \u521B\u5EFA .gitignore \u6587\u4EF6...").start();
+    yield createGitignore(targetDir);
+    spinner.succeed("\u{1F4C4} .gitignore \u521B\u5EFA\u6210\u529F");
+    spinner = ora__default("\u{1F527} \u521D\u59CB\u5316 Git \u4ED3\u5E93...").start();
+    try {
+      initGitRepo(targetDir);
+      spinner.succeed("\u{1F527} Git \u4ED3\u5E93\u521D\u59CB\u5316\u6210\u529F");
+    } catch (error) {
+      spinner.warn("\u26A0\uFE0F Git \u4ED3\u5E93\u521D\u59CB\u5316\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u521D\u59CB\u5316");
+      console.warn(chalk__default.yellow(`  \u53EF\u80FD\u7684\u539F\u56E0: ${error.message}`));
+    }
     console.log(chalk__default.green(`
 \u2705 \u63D2\u4EF6 ${chalk__default.bold(fullPluginName)} \u521B\u5EFA\u6210\u529F\uFF01`));
     console.log(`
 \u{1F4C1} \u63D2\u4EF6\u76EE\u5F55: ${chalk__default.cyan(targetDir)}`);
     console.log(`
-\u8FD0\u884C\u4EE5\u4E0B\u547D\u4EE4\u4EE5\u5B89\u88C5\u4F9D\u8D56\u5E76\u6784\u5EFA:
+\u8FD0\u884C\u4EE5\u4E0B\u547D\u4EE4\u4EE5\u5B89\u88C5\u4F9D\u8D56\u5E76\u5F00\u59CB\u5F00\u53D1:
 `);
     console.log(chalk__default.cyan(`  cd ${path__default.relative(process__default.cwd(), targetDir)}`));
     console.log(chalk__default.cyan("  pnpm install"));
     console.log(chalk__default.cyan("  pnpm build"));
+    console.log(chalk__default.cyan("  pnpm dev    # \u542F\u52A8\u5F00\u53D1\u670D\u52A1\u5668\uFF0C\u8FD0\u884C playground"));
+    console.log(`
+\u{1F680} \u63D2\u4EF6\u5F00\u53D1\u8BF4\u660E:`);
+    console.log(`  1. \u4E3B\u8981\u4EE3\u7801\u4F4D\u4E8E ${chalk__default.yellow("src/")} \u76EE\u5F55`);
+    console.log(`  2. \u5F00\u53D1\u73AF\u5883\uFF08Playground\uFF09\u4F4D\u4E8E ${chalk__default.yellow("playground/")} \u76EE\u5F55`);
+    console.log(`  3. \u8FD0\u884C ${chalk__default.yellow("pnpm dev")} \u542F\u52A8 Vite \u5F00\u53D1\u670D\u52A1\u5668\uFF0C\u8BBF\u95EE ${chalk__default.blue("http://localhost:5173")} \u67E5\u770B\u6F14\u793A\u9875\u9762`);
+    console.log(`  4. \u5BF9\u4EE3\u7801\u7684\u4FEE\u6539\u4F1A\u81EA\u52A8\u70ED\u91CD\u8F7D\uFF0C\u5B9E\u65F6\u67E5\u770B\u6548\u679C`);
   } catch (error) {
     spinner.fail("\u274C \u521B\u5EFA\u63D2\u4EF6\u5931\u8D25");
     console.error(chalk__default.red(error));
   }
 }));
-function createPackageJson(targetDir, pluginName, environment) {
+function getKnotxPackageVersions() {
+  return __async(this, null, function* () {
+    const knotxVersions = {};
+    try {
+      const packages = [
+        "@knotx/core",
+        "@knotx/decorators",
+        "@knotx/jsx",
+        "@knotx/build-config",
+        "@knotx/eslint-config",
+        "@knotx/typescript-config",
+        "@knotx/react",
+        "@knotx/plugins-base-render"
+      ];
+      const npmRegistry = "https://registry.npmjs.org";
+      for (const pkg of packages) {
+        try {
+          const version = node_child_process.execSync(`npm view ${pkg} version --registry=${npmRegistry}`, { encoding: "utf8" }).trim();
+          knotxVersions[pkg] = `^${version}`;
+        } catch (e) {
+          console.warn(chalk__default.yellow(`\u26A0\uFE0F \u65E0\u6CD5\u83B7\u53D6 ${pkg} \u7684\u6700\u65B0\u7248\u672C\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u7248\u672C`));
+          knotxVersions[pkg] = "latest";
+        }
+      }
+      return knotxVersions;
+    } catch (e) {
+      console.warn(chalk__default.yellow("\u26A0\uFE0F \u83B7\u53D6 @knotx \u5305\u7248\u672C\u5931\u8D25\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u7248\u672C"));
+      return {
+        "@knotx/core": "latest",
+        "@knotx/decorators": "latest",
+        "@knotx/jsx": "latest",
+        "@knotx/build-config": "latest",
+        "@knotx/eslint-config": "latest",
+        "@knotx/typescript-config": "latest"
+      };
+    }
+  });
+}
+function createPackageJson(targetDir, pluginName, environment, knotxVersions) {
   return __async(this, null, function* () {
     const packageJson = {
       name: `@knotx/plugins-${pluginName}`,
@@ -133,20 +208,21 @@ function createPackageJson(targetDir, pluginName, environment) {
       ],
       scripts: {
         build: "unbuild --failOnWarn=false",
-        dev: "unbuild --stub",
+        dev: "cd ./playground && vite",
         lint: "eslint .",
         typecheck: "tsc --noEmit"
       },
       peerDependencies: {},
       dependencies: {
-        "@knotx/core": "workspace:*",
-        "@knotx/decorators": "workspace:*",
-        "@knotx/jsx": "workspace:*"
+        "@knotx/core": knotxVersions["@knotx/core"],
+        "@knotx/decorators": knotxVersions["@knotx/decorators"],
+        "@knotx/jsx": knotxVersions["@knotx/jsx"]
       },
       devDependencies: {
-        "@knotx/build-config": "workspace:*",
-        "@knotx/eslint-config": "workspace:*",
-        "@knotx/typescript-config": "workspace:*",
+        "@babel/plugin-proposal-decorators": "^7.25.9",
+        "@knotx/build-config": knotxVersions["@knotx/build-config"],
+        "@knotx/eslint-config": knotxVersions["@knotx/eslint-config"],
+        "@knotx/typescript-config": knotxVersions["@knotx/typescript-config"],
         "@types/node": "^22.13.5",
         "eslint": "^9.23.0",
         "typescript": "^5.7.3",
@@ -158,18 +234,69 @@ function createPackageJson(targetDir, pluginName, environment) {
     if (environment === "jsx") ; else if (environment === "react") {
       packageJson.peerDependencies.react = "^17";
       packageJson.peerDependencies["react-dom"] = "^17";
+      packageJson.devDependencies["@knotx/react"] = knotxVersions["@knotx/react"];
+      packageJson.devDependencies["@knotx/plugins-base-render"] = knotxVersions["@knotx/plugins-base-render"];
       packageJson.devDependencies.react = "^17";
       packageJson.devDependencies["@vitejs/plugin-react"] = "^4.3.4";
       packageJson.devDependencies["react-dom"] = "^17";
       packageJson.devDependencies["@types/react"] = "^17";
       packageJson.devDependencies["@types/react-dom"] = "^17";
     }
+    const sortedPackageJson = sortObjectKeys(packageJson);
     yield fs__default.writeFile(
       path__default.join(targetDir, "package.json"),
-      JSON.stringify(packageJson, null, 2)
+      `${JSON.stringify(sortedPackageJson, null, 2)}
+`
     );
   });
 }
+function sortObjectKeys(obj) {
+  const keyOrder = [
+    "name",
+    "type",
+    "version",
+    "description",
+    "license",
+    "publishConfig",
+    "sideEffects",
+    "exports",
+    "main",
+    "module",
+    "types",
+    "files",
+    "scripts",
+    "peerDependencies",
+    "dependencies",
+    "devDependencies"
+  ];
+  const sortedObj = {};
+  for (const key of keyOrder) {
+    if (key in obj)
+      sortedObj[key] = obj[key];
+  }
+  const remainingKeys = Object.keys(obj).filter((key) => !keyOrder.includes(key)).sort();
+  for (const key of remainingKeys) {
+    sortedObj[key] = obj[key];
+  }
+  for (const key of Object.keys(sortedObj)) {
+    if (typeof sortedObj[key] === "object" && sortedObj[key] !== null && !Array.isArray(sortedObj[key])) {
+      if (["dependencies", "devDependencies", "peerDependencies"].includes(key)) {
+        sortedObj[key] = sortObjectAlphabetically(sortedObj[key]);
+      } else {
+        sortedObj[key] = sortObjectKeys(sortedObj[key]);
+      }
+    }
+  }
+  return sortedObj;
+}
+function sortObjectAlphabetically(obj) {
+  const sortedObj = {};
+  const sortedKeys = Object.keys(obj).sort();
+  for (const key of sortedKeys) {
+    sortedObj[key] = obj[key];
+  }
+  return sortedObj;
+}
 function createConfigFiles(targetDir) {
   return __async(this, null, function* () {
     try {
@@ -221,17 +348,44 @@ function createSourceFiles(targetDir, pluginName, environment) {
       const pluginContent = pluginTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName));
       const fileName = `${pluginName}.tsx`;
       yield fs__default.writeFile(path__default.join(targetDir, "src", fileName), pluginContent);
+      yield createPlayground(targetDir, pluginName, environment);
     } catch (error) {
       console.error("\u65E0\u6CD5\u8BFB\u53D6\u6A21\u677F\u6587\u4EF6:", error);
     }
   });
 }
+function createPlayground(targetDir, pluginName, environment) {
+  return __async(this, null, function* () {
+    const playgroundDir = path__default.join(targetDir, "playground");
+    yield fs__default.ensureDir(playgroundDir);
+    try {
+      const viteConfigTemplate = yield fs__default.readFile(path__default.join(templatesDir, "vite.config.ts.template"), "utf-8");
+      const htmlTemplate = yield fs__default.readFile(path__default.join(templatesDir, "playground/index.html.template"), "utf-8");
+      const tsConfigTemplate = yield fs__default.readFile(path__default.join(templatesDir, "playground/tsconfig.json.template"), "utf-8");
+      const isReact = environment === "react";
+      const mainTemplate = yield fs__default.readFile(
+        path__default.join(templatesDir, `playground/main.${isReact ? "react" : "jsx"}.template`),
+        "utf-8"
+      );
+      const fileExtension = isReact ? "tsx" : "ts";
+      const viteConfigContent = viteConfigTemplate.replace(new RegExp("\\{\\{#if isReact\\}\\}(.*?)\\{\\{\\/if\\}\\}", "gs"), isReact ? "$1" : "");
+      const htmlContent = htmlTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName)).replace(/\{\{fileExtension\}\}/g, fileExtension);
+      const mainContent = mainTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName));
+      yield fs__default.writeFile(path__default.join(playgroundDir, "vite.config.ts"), viteConfigContent);
+      yield fs__default.writeFile(path__default.join(playgroundDir, "index.html"), htmlContent);
+      yield fs__default.writeFile(path__default.join(playgroundDir, `main.${fileExtension}`), mainContent);
+      yield fs__default.writeFile(path__default.join(playgroundDir, "tsconfig.json"), tsConfigTemplate);
+    } catch (error) {
+      console.error("\u8BFB\u53D6 playground \u6A21\u677F\u6587\u4EF6\u5931\u8D25:", error);
+    }
+  });
+}
 function createReadme(targetDir, pluginName) {
   return __async(this, null, function* () {
     try {
       const readmeTemplate = yield fs__default.readFile(path__default.join(templatesDir, "README.md.template"), "utf-8");
       const description = `${capitalize(pluginName)} Plugin for Knotx`;
-      const readmeContent = readmeTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{description\}\}/g, description);
+      const readmeContent = readmeTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName)).replace(/\{\{description\}\}/g, description);
       yield fs__default.writeFile(path__default.join(targetDir, "README.md"), readmeContent);
     } catch (error) {
       console.error("\u65E0\u6CD5\u8BFB\u53D6 README \u6A21\u677F\u6587\u4EF6:", error);
@@ -268,6 +422,67 @@ MIT`;
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
+function createGitignore(targetDir) {
+  return __async(this, null, function* () {
+    try {
+      const gitignoreTemplate = yield fs__default.readFile(path__default.join(templatesDir, ".gitignore.template"), "utf-8");
+      yield fs__default.writeFile(path__default.join(targetDir, ".gitignore"), gitignoreTemplate);
+    } catch (error) {
+      console.error("\u65E0\u6CD5\u8BFB\u53D6 .gitignore \u6A21\u677F\u6587\u4EF6:", error);
+      const gitignoreContent = `# \u4F9D\u8D56\u76EE\u5F55
+node_modules
+
+# \u6784\u5EFA\u4EA7\u7269
+dist
+build
+
+# \u65E5\u5FD7\u6587\u4EF6
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# \u73AF\u5883\u53D8\u91CF\u6587\u4EF6
+.env
+.env.local
+
+# \u7F16\u8F91\u5668\u76EE\u5F55\u548C\u6587\u4EF6
+.vscode
+.idea
+.DS_Store
+
+# \u6D4B\u8BD5\u8986\u76D6\u7387
+coverage
+`;
+      yield fs__default.writeFile(path__default.join(targetDir, ".gitignore"), gitignoreContent);
+    }
+  });
+}
+function initGitRepo(targetDir) {
+  try {
+    node_child_process.execSync("git init", { cwd: targetDir, stdio: "ignore" });
+    node_child_process.execSync("git add .", { cwd: targetDir, stdio: "ignore" });
+    node_child_process.execSync('git commit -m "Initial commit with Knotx plugin template"', {
+      cwd: targetDir,
+      stdio: "ignore",
+      env: __spreadProps(__spreadValues({}, process__default.env), {
+        GIT_AUTHOR_NAME: "Knotx CLI",
+        GIT_AUTHOR_EMAIL: "knotx-cli@noreply.github.com",
+        GIT_COMMITTER_NAME: "Knotx CLI",
+        GIT_COMMITTER_EMAIL: "knotx-cli@noreply.github.com"
+      })
+    });
+    return true;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new TypeError(`Git \u521D\u59CB\u5316\u5931\u8D25: ${error.message}`);
+    } else {
+      throw new TypeError(`Git \u521D\u59CB\u5316\u5931\u8D25: ${String(error)}`);
+    }
+  }
+}
 program.parse();
 if (!process__default.argv.slice(2).length) {
   program.outputHelp();

package/dist/index.mjs

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+import { execSync } from 'node:child_process';
 import path from 'node:path';
 import process from 'node:process';
 import chalk from 'chalk';
@@ -7,6 +8,25 @@ import fs from 'fs-extra';
 import inquirer from 'inquirer';
 import ora from 'ora';
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -30,7 +50,7 @@ var __async = (__this, __arguments, generator) => {
 const templatesDir = path.resolve(__dirname, "..", "templates");
 const program = new Command();
 program.name("knotx").description("Knotx CLI - \u521B\u5EFA\u548C\u7BA1\u7406Knotx\u63D2\u4EF6").version("0.0.1");
-program.command("create-plugin").description("\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684Knotx\u63D2\u4EF6").action(() => __async(undefined, null, function* () {
+program.command("create-plugin").description("\u521B\u5EFA\u4E00\u4E2A\u65B0\u7684Knotx\u63D2\u4EF6\uFF0C\u5305\u542B\u5F00\u53D1\u73AF\u5883\u548C\u6F14\u793A playground").action(() => __async(undefined, null, function* () {
   console.log(chalk.blue("\u{1F539} \u6B22\u8FCE\u4F7F\u7528 Knotx \u63D2\u4EF6\u521B\u5EFA\u5DE5\u5177\uFF01"));
   const answers = yield inquirer.prompt([
     {
@@ -59,43 +79,98 @@ program.command("create-plugin").description("\u521B\u5EFA\u4E00\u4E2A\u65B0\u76
     console.log(chalk.red(`\u274C \u9519\u8BEF: \u76EE\u5F55 ${fullPluginName} \u5DF2\u5B58\u5728`));
     return;
   }
-  const spinner = ora("\u{1F4C2} \u521B\u5EFA\u63D2\u4EF6\u76EE\u5F55...").start();
+  let spinner = ora("\u{1F4C2} \u521B\u5EFA\u63D2\u4EF6\u76EE\u5F55...").start();
   try {
     yield fs.ensureDir(targetDir);
     yield fs.ensureDir(path.join(targetDir, "src"));
     spinner.succeed("\u{1F4C2} \u63D2\u4EF6\u76EE\u5F55\u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA package.json...";
-    spinner.start();
-    yield createPackageJson(targetDir, pluginName, environment);
+    spinner = ora("\u{1F50D} \u83B7\u53D6 @knotx \u5305\u7684\u6700\u65B0\u7248\u672C...").start();
+    const knotxVersions = yield getKnotxPackageVersions();
+    spinner.succeed("\u{1F50D} @knotx \u5305\u7248\u672C\u4FE1\u606F\u83B7\u53D6\u6210\u529F");
+    spinner = ora("\u{1F4C4} \u521B\u5EFA package.json...").start();
+    yield createPackageJson(targetDir, pluginName, environment, knotxVersions);
     spinner.succeed("\u{1F4C4} package.json \u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA\u914D\u7F6E\u6587\u4EF6...";
-    spinner.start();
+    spinner = ora("\u{1F4C4} \u521B\u5EFA\u914D\u7F6E\u6587\u4EF6...").start();
     yield createConfigFiles(targetDir);
     spinner.succeed("\u{1F4C4} \u914D\u7F6E\u6587\u4EF6\u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA\u6E90\u4EE3\u7801\u6587\u4EF6...";
-    spinner.start();
+    spinner = ora("\u{1F4C4} \u521B\u5EFA\u6E90\u4EE3\u7801\u6587\u4EF6...").start();
     yield createSourceFiles(targetDir, pluginName, environment);
     spinner.succeed("\u{1F4C4} \u6E90\u4EE3\u7801\u6587\u4EF6\u521B\u5EFA\u6210\u529F");
-    spinner.text = "\u{1F4C4} \u521B\u5EFA README.md...";
-    spinner.start();
+    spinner = ora("\u{1F4C4} \u521B\u5EFA README.md...").start();
     yield createReadme(targetDir, pluginName);
     spinner.succeed("\u{1F4C4} README.md \u521B\u5EFA\u6210\u529F");
+    spinner = ora("\u{1F4C4} \u521B\u5EFA .gitignore \u6587\u4EF6...").start();
+    yield createGitignore(targetDir);
+    spinner.succeed("\u{1F4C4} .gitignore \u521B\u5EFA\u6210\u529F");
+    spinner = ora("\u{1F527} \u521D\u59CB\u5316 Git \u4ED3\u5E93...").start();
+    try {
+      initGitRepo(targetDir);
+      spinner.succeed("\u{1F527} Git \u4ED3\u5E93\u521D\u59CB\u5316\u6210\u529F");
+    } catch (error) {
+      spinner.warn("\u26A0\uFE0F Git \u4ED3\u5E93\u521D\u59CB\u5316\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u521D\u59CB\u5316");
+      console.warn(chalk.yellow(`  \u53EF\u80FD\u7684\u539F\u56E0: ${error.message}`));
+    }
     console.log(chalk.green(`
 \u2705 \u63D2\u4EF6 ${chalk.bold(fullPluginName)} \u521B\u5EFA\u6210\u529F\uFF01`));
     console.log(`
 \u{1F4C1} \u63D2\u4EF6\u76EE\u5F55: ${chalk.cyan(targetDir)}`);
     console.log(`
-\u8FD0\u884C\u4EE5\u4E0B\u547D\u4EE4\u4EE5\u5B89\u88C5\u4F9D\u8D56\u5E76\u6784\u5EFA:
+\u8FD0\u884C\u4EE5\u4E0B\u547D\u4EE4\u4EE5\u5B89\u88C5\u4F9D\u8D56\u5E76\u5F00\u59CB\u5F00\u53D1:
 `);
     console.log(chalk.cyan(`  cd ${path.relative(process.cwd(), targetDir)}`));
     console.log(chalk.cyan("  pnpm install"));
     console.log(chalk.cyan("  pnpm build"));
+    console.log(chalk.cyan("  pnpm dev    # \u542F\u52A8\u5F00\u53D1\u670D\u52A1\u5668\uFF0C\u8FD0\u884C playground"));
+    console.log(`
+\u{1F680} \u63D2\u4EF6\u5F00\u53D1\u8BF4\u660E:`);
+    console.log(`  1. \u4E3B\u8981\u4EE3\u7801\u4F4D\u4E8E ${chalk.yellow("src/")} \u76EE\u5F55`);
+    console.log(`  2. \u5F00\u53D1\u73AF\u5883\uFF08Playground\uFF09\u4F4D\u4E8E ${chalk.yellow("playground/")} \u76EE\u5F55`);
+    console.log(`  3. \u8FD0\u884C ${chalk.yellow("pnpm dev")} \u542F\u52A8 Vite \u5F00\u53D1\u670D\u52A1\u5668\uFF0C\u8BBF\u95EE ${chalk.blue("http://localhost:5173")} \u67E5\u770B\u6F14\u793A\u9875\u9762`);
+    console.log(`  4. \u5BF9\u4EE3\u7801\u7684\u4FEE\u6539\u4F1A\u81EA\u52A8\u70ED\u91CD\u8F7D\uFF0C\u5B9E\u65F6\u67E5\u770B\u6548\u679C`);
   } catch (error) {
     spinner.fail("\u274C \u521B\u5EFA\u63D2\u4EF6\u5931\u8D25");
     console.error(chalk.red(error));
   }
 }));
-function createPackageJson(targetDir, pluginName, environment) {
+function getKnotxPackageVersions() {
+  return __async(this, null, function* () {
+    const knotxVersions = {};
+    try {
+      const packages = [
+        "@knotx/core",
+        "@knotx/decorators",
+        "@knotx/jsx",
+        "@knotx/build-config",
+        "@knotx/eslint-config",
+        "@knotx/typescript-config",
+        "@knotx/react",
+        "@knotx/plugins-base-render"
+      ];
+      const npmRegistry = "https://registry.npmjs.org";
+      for (const pkg of packages) {
+        try {
+          const version = execSync(`npm view ${pkg} version --registry=${npmRegistry}`, { encoding: "utf8" }).trim();
+          knotxVersions[pkg] = `^${version}`;
+        } catch (e) {
+          console.warn(chalk.yellow(`\u26A0\uFE0F \u65E0\u6CD5\u83B7\u53D6 ${pkg} \u7684\u6700\u65B0\u7248\u672C\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u7248\u672C`));
+          knotxVersions[pkg] = "latest";
+        }
+      }
+      return knotxVersions;
+    } catch (e) {
+      console.warn(chalk.yellow("\u26A0\uFE0F \u83B7\u53D6 @knotx \u5305\u7248\u672C\u5931\u8D25\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u7248\u672C"));
+      return {
+        "@knotx/core": "latest",
+        "@knotx/decorators": "latest",
+        "@knotx/jsx": "latest",
+        "@knotx/build-config": "latest",
+        "@knotx/eslint-config": "latest",
+        "@knotx/typescript-config": "latest"
+      };
+    }
+  });
+}
+function createPackageJson(targetDir, pluginName, environment, knotxVersions) {
   return __async(this, null, function* () {
     const packageJson = {
       name: `@knotx/plugins-${pluginName}`,
@@ -122,20 +197,21 @@ function createPackageJson(targetDir, pluginName, environment) {
       ],
       scripts: {
         build: "unbuild --failOnWarn=false",
-        dev: "unbuild --stub",
+        dev: "cd ./playground && vite",
         lint: "eslint .",
         typecheck: "tsc --noEmit"
       },
       peerDependencies: {},
       dependencies: {
-        "@knotx/core": "workspace:*",
-        "@knotx/decorators": "workspace:*",
-        "@knotx/jsx": "workspace:*"
+        "@knotx/core": knotxVersions["@knotx/core"],
+        "@knotx/decorators": knotxVersions["@knotx/decorators"],
+        "@knotx/jsx": knotxVersions["@knotx/jsx"]
       },
       devDependencies: {
-        "@knotx/build-config": "workspace:*",
-        "@knotx/eslint-config": "workspace:*",
-        "@knotx/typescript-config": "workspace:*",
+        "@babel/plugin-proposal-decorators": "^7.25.9",
+        "@knotx/build-config": knotxVersions["@knotx/build-config"],
+        "@knotx/eslint-config": knotxVersions["@knotx/eslint-config"],
+        "@knotx/typescript-config": knotxVersions["@knotx/typescript-config"],
         "@types/node": "^22.13.5",
         "eslint": "^9.23.0",
         "typescript": "^5.7.3",
@@ -147,18 +223,69 @@ function createPackageJson(targetDir, pluginName, environment) {
     if (environment === "jsx") ; else if (environment === "react") {
       packageJson.peerDependencies.react = "^17";
       packageJson.peerDependencies["react-dom"] = "^17";
+      packageJson.devDependencies["@knotx/react"] = knotxVersions["@knotx/react"];
+      packageJson.devDependencies["@knotx/plugins-base-render"] = knotxVersions["@knotx/plugins-base-render"];
       packageJson.devDependencies.react = "^17";
       packageJson.devDependencies["@vitejs/plugin-react"] = "^4.3.4";
       packageJson.devDependencies["react-dom"] = "^17";
       packageJson.devDependencies["@types/react"] = "^17";
       packageJson.devDependencies["@types/react-dom"] = "^17";
     }
+    const sortedPackageJson = sortObjectKeys(packageJson);
     yield fs.writeFile(
       path.join(targetDir, "package.json"),
-      JSON.stringify(packageJson, null, 2)
+      `${JSON.stringify(sortedPackageJson, null, 2)}
+`
     );
   });
 }
+function sortObjectKeys(obj) {
+  const keyOrder = [
+    "name",
+    "type",
+    "version",
+    "description",
+    "license",
+    "publishConfig",
+    "sideEffects",
+    "exports",
+    "main",
+    "module",
+    "types",
+    "files",
+    "scripts",
+    "peerDependencies",
+    "dependencies",
+    "devDependencies"
+  ];
+  const sortedObj = {};
+  for (const key of keyOrder) {
+    if (key in obj)
+      sortedObj[key] = obj[key];
+  }
+  const remainingKeys = Object.keys(obj).filter((key) => !keyOrder.includes(key)).sort();
+  for (const key of remainingKeys) {
+    sortedObj[key] = obj[key];
+  }
+  for (const key of Object.keys(sortedObj)) {
+    if (typeof sortedObj[key] === "object" && sortedObj[key] !== null && !Array.isArray(sortedObj[key])) {
+      if (["dependencies", "devDependencies", "peerDependencies"].includes(key)) {
+        sortedObj[key] = sortObjectAlphabetically(sortedObj[key]);
+      } else {
+        sortedObj[key] = sortObjectKeys(sortedObj[key]);
+      }
+    }
+  }
+  return sortedObj;
+}
+function sortObjectAlphabetically(obj) {
+  const sortedObj = {};
+  const sortedKeys = Object.keys(obj).sort();
+  for (const key of sortedKeys) {
+    sortedObj[key] = obj[key];
+  }
+  return sortedObj;
+}
 function createConfigFiles(targetDir) {
   return __async(this, null, function* () {
     try {
@@ -210,17 +337,44 @@ function createSourceFiles(targetDir, pluginName, environment) {
       const pluginContent = pluginTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName));
       const fileName = `${pluginName}.tsx`;
       yield fs.writeFile(path.join(targetDir, "src", fileName), pluginContent);
+      yield createPlayground(targetDir, pluginName, environment);
     } catch (error) {
       console.error("\u65E0\u6CD5\u8BFB\u53D6\u6A21\u677F\u6587\u4EF6:", error);
     }
   });
 }
+function createPlayground(targetDir, pluginName, environment) {
+  return __async(this, null, function* () {
+    const playgroundDir = path.join(targetDir, "playground");
+    yield fs.ensureDir(playgroundDir);
+    try {
+      const viteConfigTemplate = yield fs.readFile(path.join(templatesDir, "vite.config.ts.template"), "utf-8");
+      const htmlTemplate = yield fs.readFile(path.join(templatesDir, "playground/index.html.template"), "utf-8");
+      const tsConfigTemplate = yield fs.readFile(path.join(templatesDir, "playground/tsconfig.json.template"), "utf-8");
+      const isReact = environment === "react";
+      const mainTemplate = yield fs.readFile(
+        path.join(templatesDir, `playground/main.${isReact ? "react" : "jsx"}.template`),
+        "utf-8"
+      );
+      const fileExtension = isReact ? "tsx" : "ts";
+      const viteConfigContent = viteConfigTemplate.replace(new RegExp("\\{\\{#if isReact\\}\\}(.*?)\\{\\{\\/if\\}\\}", "gs"), isReact ? "$1" : "");
+      const htmlContent = htmlTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName)).replace(/\{\{fileExtension\}\}/g, fileExtension);
+      const mainContent = mainTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName));
+      yield fs.writeFile(path.join(playgroundDir, "vite.config.ts"), viteConfigContent);
+      yield fs.writeFile(path.join(playgroundDir, "index.html"), htmlContent);
+      yield fs.writeFile(path.join(playgroundDir, `main.${fileExtension}`), mainContent);
+      yield fs.writeFile(path.join(playgroundDir, "tsconfig.json"), tsConfigTemplate);
+    } catch (error) {
+      console.error("\u8BFB\u53D6 playground \u6A21\u677F\u6587\u4EF6\u5931\u8D25:", error);
+    }
+  });
+}
 function createReadme(targetDir, pluginName) {
   return __async(this, null, function* () {
     try {
       const readmeTemplate = yield fs.readFile(path.join(templatesDir, "README.md.template"), "utf-8");
       const description = `${capitalize(pluginName)} Plugin for Knotx`;
-      const readmeContent = readmeTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{description\}\}/g, description);
+      const readmeContent = readmeTemplate.replace(/\{\{pluginName\}\}/g, pluginName).replace(/\{\{capitalizedPluginName\}\}/g, capitalize(pluginName)).replace(/\{\{description\}\}/g, description);
       yield fs.writeFile(path.join(targetDir, "README.md"), readmeContent);
     } catch (error) {
       console.error("\u65E0\u6CD5\u8BFB\u53D6 README \u6A21\u677F\u6587\u4EF6:", error);
@@ -257,6 +411,67 @@ MIT`;
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
+function createGitignore(targetDir) {
+  return __async(this, null, function* () {
+    try {
+      const gitignoreTemplate = yield fs.readFile(path.join(templatesDir, ".gitignore.template"), "utf-8");
+      yield fs.writeFile(path.join(targetDir, ".gitignore"), gitignoreTemplate);
+    } catch (error) {
+      console.error("\u65E0\u6CD5\u8BFB\u53D6 .gitignore \u6A21\u677F\u6587\u4EF6:", error);
+      const gitignoreContent = `# \u4F9D\u8D56\u76EE\u5F55
+node_modules
+
+# \u6784\u5EFA\u4EA7\u7269
+dist
+build
+
+# \u65E5\u5FD7\u6587\u4EF6
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# \u73AF\u5883\u53D8\u91CF\u6587\u4EF6
+.env
+.env.local
+
+# \u7F16\u8F91\u5668\u76EE\u5F55\u548C\u6587\u4EF6
+.vscode
+.idea
+.DS_Store
+
+# \u6D4B\u8BD5\u8986\u76D6\u7387
+coverage
+`;
+      yield fs.writeFile(path.join(targetDir, ".gitignore"), gitignoreContent);
+    }
+  });
+}
+function initGitRepo(targetDir) {
+  try {
+    execSync("git init", { cwd: targetDir, stdio: "ignore" });
+    execSync("git add .", { cwd: targetDir, stdio: "ignore" });
+    execSync('git commit -m "Initial commit with Knotx plugin template"', {
+      cwd: targetDir,
+      stdio: "ignore",
+      env: __spreadProps(__spreadValues({}, process.env), {
+        GIT_AUTHOR_NAME: "Knotx CLI",
+        GIT_AUTHOR_EMAIL: "knotx-cli@noreply.github.com",
+        GIT_COMMITTER_NAME: "Knotx CLI",
+        GIT_COMMITTER_EMAIL: "knotx-cli@noreply.github.com"
+      })
+    });
+    return true;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new TypeError(`Git \u521D\u59CB\u5316\u5931\u8D25: ${error.message}`);
+    } else {
+      throw new TypeError(`Git \u521D\u59CB\u5316\u5931\u8D25: ${String(error)}`);
+    }
+  }
+}
 program.parse();
 if (!process.argv.slice(2).length) {
   program.outputHelp();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/cli",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "CLI tool for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -40,9 +40,9 @@
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",
-    "@knotx/build-config": "0.0.1",
-    "@knotx/eslint-config": "0.0.1",
-    "@knotx/typescript-config": "0.0.1"
+    "@knotx/build-config": "0.0.2",
+    "@knotx/eslint-config": "0.0.2",
+    "@knotx/typescript-config": "0.0.2"
   },
   "scripts": {
     "build": "unbuild --failOnWarn=false",

package/templates/.gitignore.template

@@ -0,0 +1,45 @@
+# 依赖目录
+node_modules
+.pnp
+.pnp.js
+
+# 构建产物
+dist
+build
+*.tsbuildinfo
+
+# 日志文件
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# 环境变量文件
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# 编辑器目录和文件
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# 测试覆盖率
+coverage
+
+# 缓存
+.eslintcache
+.stylelintcache
+.npm
+.cache 

package/templates/README.md.template

@@ -15,7 +15,7 @@ pnpm add @knotx/plugins-{{pluginName}}
 ## 使用方法
 
 ```typescript
-import { {{capitalizedPluginName}} } from '@knotx/plugins-{{pluginName}}';
+import { {{capitalizedPluginName}} } from '@knotx/plugins-{{pluginName}}'
 ```
 
 ## 许可证

package/templates/eslint.config.js.template

@@ -1 +1 @@
-export { default } from '@knotx/eslint-config'; 
+export { default } from '@knotx/eslint-config'

package/templates/index.ts.template

@@ -1 +1 @@
-export * from './{{pluginName}}'; 
+export * from './{{pluginName}}'

package/templates/playground/index.html.template

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{capitalizedPluginName}} Plugin Playground</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f7f7f7;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      background-color: white;
+      padding: 20px;
+      border-radius: 5px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+    h1 {
+      color: #333;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>{{capitalizedPluginName}} Plugin Demo</h1>
+    <p>这是 {{pluginName}} 插件的演示页面。您可以在这里测试插件的功能。</p>
+    
+    <div id="app">
+      <!-- 插件内容将在这里展示 -->
+    </div>
+  </div>
+  
+  <script type="module" src="./main.{{fileExtension}}"></script>
+</body>
+</html> 

package/templates/playground/main.jsx.template

@@ -0,0 +1,11 @@
+import { {{capitalizedPluginName}} } from '../src'
+
+// 在这里初始化和使用您的插件
+const plugin = new {{capitalizedPluginName}}()
+plugin.init()
+
+// 更新演示区域
+const appElement = document.getElementById('app')
+if (appElement) {
+  appElement.innerHTML += '<p>插件已初始化，请查看控制台输出</p>'
+} 

package/templates/playground/main.react.template

@@ -0,0 +1,39 @@
+import { BaseRender } from '@knotx/plugins-base-render'
+import { Knotx } from '@knotx/react'
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom'
+
+import { {{capitalizedPluginName}} } from '../src'
+
+function App() {
+  const nodes = [
+    {
+      id: '1',
+      position: { x: 0, y: 0 },
+      data: {},
+    },
+    {
+      id: '2',
+      position: { x: 100, y: 100 },
+      data: {},
+    },
+  ]
+  const edges = [
+    {
+      id: '1',
+      source: '1',
+      target: '2',
+    },
+  ]
+
+  return (
+    <Knotx
+      style={{ height: 480, boxShadow: '0 0 2px #333', borderRadius: 4 }}
+      nodes={nodes}
+      edges={edges}
+      plugins={[BaseRender, {{capitalizedPluginName}}]}
+    />
+  )
+}
+
+ReactDOM.render(<StrictMode><App /></StrictMode>, document.getElementById('app'))

package/templates/playground/tsconfig.json.template

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "types": ["vite/client"]
+  },
+  "include": ["."]
+}

package/templates/plugin.jsx.template

@@ -1,7 +1,7 @@
 import type { NodeData } from '@knotx/core'
 
-import { inject, OnInit } from '@knotx/decorators'
 import { BasePlugin } from '@knotx/core'
+import { inject, OnInit } from '@knotx/decorators'
 
 export class {{capitalizedPluginName}} extends BasePlugin<'{{pluginName}}'> {
   name = '{{pluginName}}' as const

package/templates/vite.config.ts.template

@@ -0,0 +1,19 @@
+{{#if isReact}}import react from '@vitejs/plugin-react'{{/if}}
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [{{#if isReact}}react({
+        babel: {
+          plugins: [[
+            '@babel/plugin-proposal-decorators',
+            {
+              version: '2023-11',
+              decoratorsBeforeExport: true,
+            },
+          ]],
+        },
+      }){{/if}}],
+  server: {
+    port: 5173,
+  },
+})