@widget-js/cli 1.2.7 → 1.2.9-rc.3

package/lib/chunk-RAXJBANW.js

@@ -0,0 +1,45 @@
+// src/utils/PrettierUtils.ts
+import { format } from "prettier";
+var PrettierUtils = class {
+  static async format(code, parser) {
+    return format(code, {
+      parser,
+      tabWidth: 2,
+      singleQuote: true
+    });
+  }
+};
+
+// src/utils/EJSUtils.ts
+import path from "path";
+import fs from "fs";
+import ejs from "ejs";
+import { dirname } from "dirname-filename-esm";
+var EJSUtils = class {
+  static async renderToFile(templateFile, outputFile, parser, renderOptions) {
+    const defineTemplatePath = path.join(dirname(import.meta), "../template", templateFile);
+    let defineTemplate = fs.readFileSync(defineTemplatePath, "utf8");
+    let code = ejs.render(defineTemplate, renderOptions);
+    const formattedEJSCode = await PrettierUtils.format(code, parser);
+    fs.writeFileSync(outputFile, formattedEJSCode);
+  }
+};
+
+// src/utils/WidgetPackageUtils.ts
+import path2 from "path";
+import fs2 from "fs";
+var WidgetPackageUtils = class {
+  static getRootDir(widgetPackage) {
+    const widgetRootDir = path2.join(process.cwd(), widgetPackage.devOptions?.folder ?? "./src/widgets");
+    if (!fs2.existsSync(widgetRootDir)) {
+      fs2.mkdirSync(widgetRootDir, { recursive: true });
+    }
+    return widgetRootDir;
+  }
+};
+
+export {
+  PrettierUtils,
+  EJSUtils,
+  WidgetPackageUtils
+};

package/lib/{createWidget-UCZL7NIF.js → createWidget-UFW26NP6.js}

@@ -1,6 +1,7 @@
 import {
-  EJSUtils
-} from "./chunk-36QWOCKO.js";
+  EJSUtils,
+  WidgetPackageUtils
+} from "./chunk-RAXJBANW.js";
 import {
   promptChecker_default
 } from "./chunk-3GPAHQ6O.js";
@@ -26,16 +27,11 @@ async function createWidget() {
     consola.error("widget.ts or widget.json not found");
     return;
   }
-  let widgetFolder = path.join(process.cwd(), "./src/widgets");
-  let devOptions = widgetPackage["devOptions"] ?? {};
-  if (devOptions["folder"]) {
-    widgetFolder = devOptions["folder"];
-    consola.info(`\u7EC4\u4EF6\u8DEF\u5F84\uFF1A${widgetFolder}`);
+  let widgetRootDir = WidgetPackageUtils.getRootDir(widgetPackage);
+  if (widgetPackage.devOptions && widgetPackage.devOptions.folder) {
+    consola.info(`\u7EC4\u4EF6\u8DEF\u5F84\uFF1A${widgetRootDir}`);
   } else {
-    consola.info(`\u6CA1\u6709\u914D\u7F6EdevOptions.folder\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u8DEF\u5F84${widgetFolder}`);
-  }
-  if (!fs.existsSync(widgetFolder)) {
-    fs.mkdirSync(widgetFolder, { recursive: true });
+    consola.info(`\u6CA1\u6709\u914D\u7F6EdevOptions.folder\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u8DEF\u5F84${widgetRootDir}`);
   }
   const getMiddleValue = (arr) => {
     if (arr.length === 1) {
@@ -130,7 +126,7 @@ async function createWidget() {
   const snakeCaseName = snakeCase(name);
   const paramCaseName = paramCase(name);
   const widgetName = widgetPackage.name + "." + snakeCaseName;
-  const widgetDir = path.join(widgetFolder, paramCaseName);
+  const widgetDir = path.join(widgetRootDir, paramCaseName);
   if (!fs.existsSync(widgetDir)) {
     fs.mkdirSync(widgetDir);
   } else {
@@ -164,14 +160,14 @@ async function createWidget() {
   const widgetFile = path.resolve(widgetDir, `${name}Widget.vue`);
   const widgetViewFile = path.resolve(widgetDir, `${name}WidgetView.vue`);
   const widgetRoutesFile = path.resolve(widgetDir, `${name}WidgetRoutes.ts`);
-  EJSUtils.renderToFile("WidgetDefine.ejs", widgetDefineFile, "typescript", renderOptions);
-  EJSUtils.renderToFile("WidgetView.ejs", widgetViewFile, "vue", renderOptions);
-  EJSUtils.renderToFile("WidgetRoutes.ejs", widgetRoutesFile, "typescript", renderOptions);
+  await EJSUtils.renderToFile("WidgetDefine.ejs", widgetDefineFile, "typescript", renderOptions);
+  await EJSUtils.renderToFile("WidgetView.ejs", widgetViewFile, "vue", renderOptions);
+  await EJSUtils.renderToFile("WidgetRoutes.ejs", widgetRoutesFile, "typescript", renderOptions);
   if (configurable) {
     const configFile = path.resolve(widgetDir, `${name}ConfigView.vue`);
-    EJSUtils.renderToFile("WidgetConfig.ejs", configFile, "vue", renderOptions);
+    await EJSUtils.renderToFile("WidgetConfig.ejs", configFile, "vue", renderOptions);
   }
-  const routeFile = path.join(widgetFolder, "widget-router.ts");
+  const routeFile = path.join(widgetRootDir, "widget-router.ts");
   let routeContent;
   if (fs.existsSync(routeFile)) {
     routeContent = fs.readFileSync(routeFile, "utf8");

package/lib/index.js

@@ -11,7 +11,7 @@ var cliPackage = JSON.parse(fs.readFileSync(packageJsonPath).toString());
 console.log(gradient.pastel.multiline(figlet.textSync("widget-cli", { horizontalLayout: "full" })));
 program.version(`@widget-js/cli ${cliPackage.version}`).usage("<command> [options]");
 program.command("create").description("Create new widget").action(async () => {
-  const createWidget = await import("./createWidget-UCZL7NIF.js");
+  const createWidget = await import("./createWidget-UFW26NP6.js");
   await createWidget.default();
 });
 var dependenciesOption = new Option("-t, --type <type>").choices(["remote", "local"]);
@@ -20,7 +20,7 @@ program.command("dependencies").description("Set @widget-js dependencies to loca
   await dependencies.default(options);
 });
 program.command("init").description("Initialize widget-js project").action(async () => {
-  const init = await import("./init-2NOIC3PQ.js");
+  const init = await import("./init-QWD6RW77.js");
   await init.init();
 });
 var typeOption = new Option("-t, --type <type>").choices(["ftp", "oss"]);

package/lib/init-QWD6RW77.js

@@ -0,0 +1,115 @@
+import {
+  EJSUtils,
+  PrettierUtils,
+  WidgetPackageUtils
+} from "./chunk-RAXJBANW.js";
+import {
+  promptChecker_default
+} from "./chunk-3GPAHQ6O.js";
+import {
+  Utils
+} from "./chunk-IJH6LXRT.js";
+
+// src/init/init.ts
+import path from "path";
+import process from "process";
+import fs from "fs";
+import consola from "consola";
+import chalk from "chalk";
+import ora from "ora";
+import { scanWidgetPackage } from "@widget-js/utils";
+var spinner = ora("Loading");
+async function init() {
+  await addDependencies();
+  await addWidgetTs();
+}
+async function addWidgetTs() {
+  let name = await promptChecker_default(
+    {
+      type: "input",
+      name: "name",
+      message: chalk.blue("\u7EC4\u4EF6\u5305 \u5305\u540D \uFF08\u793A\u4F8B cn.widget.countdown\uFF09\uFF1A")
+    },
+    (answer) => {
+      const name2 = answer.name;
+      if (name2 == null || name2 === "") {
+        consola.log(chalk.red(`\u5305\u540D\u4E0D\u80FD\u4E3A\u7A7A`));
+        return false;
+      }
+      return true;
+    }
+  );
+  let widgetPackageTs = path.join(process.cwd(), "widget.package.ts");
+  if (fs.existsSync(widgetPackageTs)) {
+    spinner.info("widget.package.ts\u5DF2\u5B58\u5728\uFF0C\u8DF3\u8FC7");
+  } else {
+    spinner.info("\u521B\u5EFA widget.package.ts");
+    await EJSUtils.renderToFile("WidgetPackage.ejs", widgetPackageTs, "typescript", { name });
+  }
+  await addVitePlugin();
+  await createRouter();
+  spinner.succeed("\u5B8C\u6210! \u8BB0\u5F97\u4FEE\u6539widget.package.ts\u3002");
+}
+async function addDependencies() {
+  spinner.info("Adding dependencies");
+  const packageJson = Utils.getPackageJson();
+  let dependencies = packageJson["dependencies"];
+  let devDependencies = packageJson["devDependencies"];
+  if (!dependencies) {
+    dependencies = {};
+  }
+  if (!devDependencies) {
+    packageJson["devDependencies"] = {};
+  }
+  await addDependency("@widget-js/core", dependencies);
+  await addDependency("@widget-js/vue3", dependencies);
+  await addDependency("@widget-js/vite-plugin-widget", devDependencies);
+  packageJson["dependencies"] = dependencies;
+  packageJson["devDependencies"] = devDependencies;
+  fs.writeFileSync(Utils.getPackagePath(), JSON.stringify(packageJson, null, 2));
+}
+async function addVitePlugin() {
+  spinner.info("\u6DFB\u52A0 vite-plugin-widget \u5230 vite plugin");
+  const viteConfigPath = path.join(process.cwd(), "vite.config.ts");
+  if (!fs.existsSync(viteConfigPath)) {
+    spinner.warn("vite.config.ts not exists");
+    return;
+  }
+  let viteConfig = fs.readFileSync(viteConfigPath).toString();
+  viteConfig = `import widget from '@widget-js/vite-plugin-widget'
+` + viteConfig;
+  viteConfig = viteConfig.replace("vue()", `vue(),widget()`);
+  fs.writeFileSync(viteConfigPath, await PrettierUtils.format(viteConfig, "typescript"));
+}
+async function createRouter() {
+  const widgetPackage = await scanWidgetPackage();
+  if (widgetPackage) {
+    spinner.info("\u521B\u5EFA widget-router.ts");
+    const rootDir = WidgetPackageUtils.getRootDir(widgetPackage);
+    const widgetRouterPath = path.join(rootDir, "widget-router.ts");
+    const routerContent = fs.readFileSync(path.join(__dirname, "../template/widget-router.ts"), "utf8");
+    fs.writeFileSync(widgetRouterPath, routerContent);
+    const vueRouterPath = path.join(process.cwd(), "./router/index.ts");
+    spinner.info("\u4FEE\u6539VueRouter\u914D\u7F6E");
+    if (fs.existsSync(vueRouterPath)) {
+      let vueRouterContent = fs.readFileSync(vueRouterPath, "utf8");
+      const importStr = `import WidgetRouter from "../widgets/widget-router";`;
+      vueRouterContent = `${importStr}
+${vueRouterContent}`;
+      vueRouterContent.replace("routes: [", `routes: [
+...WidgetRouter,`);
+      fs.writeFileSync(vueRouterPath, await PrettierUtils.format(vueRouterContent, "typescript"));
+    }
+  }
+}
+async function addDependency(packageName, dependencies) {
+  spinner.info(`Adding dependencies ${packageName}`);
+  if (dependencies[packageName]) {
+    return;
+  }
+  const remoteVersion = await Utils.getRemoteVersion(packageName);
+  dependencies[packageName] = `^${remoteVersion}`;
+}
+export {
+  init
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widget-js/cli",
-  "version": "1.2.7",
+  "version": "1.2.9-rc.3",
   "main": "lib/index.js",
   "author": "Neo Fu",
   "license": "MIT",
@@ -34,11 +34,13 @@
     "minimatch": "^9.0.3",
     "ora": "^6.2.0",
     "package-json": "^8.1.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.1.1",
     "semver": "^7.3.8",
     "shelljs": "^0.8.5",
     "ssh2-sftp-client": "^9.1.0",
     "ws": "^8.11.0",
+    "@widget-js/core": "^0.11.20",
+    "@widget-js/vue3": "^0.11.20",
     "@widget-js/utils": "0.10.21"
   },
   "devDependencies": {
@@ -63,8 +65,9 @@
     "vue-router": "^4.2.5",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",
-    "@widget-js/vue3": "^0.11.20",
-    "@widget-js/core": "0.11.20"
+    "@widget-js/vite-plugin-widget": "^1.2.8",
+    "@widget-js/core": "0.11.21",
+    "@widget-js/vue3": "^0.11.20"
   },
   "scripts": {
     "build": "rimraf ./lib/ && tsup-node src/index.ts --format esm",

package/src/createWidget.ts

@@ -1,232 +1,227 @@
-import path from 'path'
-import fs from 'fs'
-import consola from 'consola'
-import promptChecker from './promts/promptChecker'
-import {paramCase, snakeCase} from 'change-case'
-import inquirer from 'inquirer'
-import shell from 'shelljs'
-import exit from './utils.js'
-import chalk from 'chalk'
-import {scanWidgetPackage} from '@widget-js/utils'
-import {fileURLToPath} from 'url'
-import {EJSUtils} from "./utils/EJSUtils";
-// import vm from "vm";
-const __filename = fileURLToPath(import.meta.url)
-
-const __dirname = path.dirname(__filename)
-
-interface RenderOptions {
-  name: string
-  snakeCaseName: string
-  paramCaseName: string
-  packageName: string
-  widgetName: string
-  title: string
-  configurable: string
-  width: number
-  height: number
-  maxWidth: number
-  minHeight: number
-  maxHeight: number
-  minWidth: number
-}
-
-export default async function createWidget() {
-  let widgetPackage = await scanWidgetPackage()
-  if (!widgetPackage) {
-    consola.error('widget.ts or widget.json not found')
-    return
-  }
-  let widgetFolder = path.join(process.cwd(), './src/widgets')
-  let devOptions = widgetPackage['devOptions'] ?? {}
-  if (devOptions['folder']) {
-    widgetFolder = devOptions['folder']
-    consola.info(`组件路径：${widgetFolder}`)
-  } else {
-    consola.info(`没有配置devOptions.folder，使用默认路径${widgetFolder}`)
-  }
-
-  if (!fs.existsSync(widgetFolder)) {
-    fs.mkdirSync(widgetFolder, {recursive: true})
-  }
-
-  const getMiddleValue = (arr: number[]) => {
-    if (arr.length === 1) {
-      return arr[0]
-    } else if (arr.length === 2) {
-      return Math.max(...arr)
-    } else {
-      const max = Math.max(...arr)
-      const min = Math.min(...arr)
-      const sum = arr[0] + arr[1] + arr[2]
-      return sum - max - min
-    }
-  }
-
-  let name = await promptChecker(
-    {
-      type: 'input',
-      name: 'name',
-      message: chalk.blue('请输入组件名(大驼峰式)，如：CountdownClock'),
-    },
-    answer => {
-      const name = answer.name
-      if (name == null || name === '') {
-        consola.log(chalk.red('组件名不能为空'))
-        return false
-      }
-      return true
-    },
-  )
-
-  consola.log(chalk.green(name))
-
-  let title = await promptChecker({
-    type: 'input',
-    name: 'title',
-    message: chalk.blue('请输入组件标题，如：倒计时'),
-  })
-  consola.log(chalk.green(title))
-  let answerW = await promptChecker(
-    {
-      type: 'checkbox',
-      name: 'w',
-      message: chalk.blue(
-        '请选择组件宽度，最多选3个，例如选中2,4,6，代表组件最小宽为2，默认宽为4，最大宽为6，单选代表不可拉伸',
-      ),
-      choices: [1, 2, 3, 4, 5, 6],
-    },
-    answer => {
-      if (answer.w.length === 0) {
-        consola.log(chalk.red('宽度必须选择'))
-        return false
-      }
-
-      if (answer.w.length > 3) {
-        consola.log(chalk.red('宽度最多选择3个'))
-        return false
-      }
-      return true
-    },
-  )
-  consola.log(chalk.green(answerW))
-
-  let answerH = await promptChecker(
-    {
-      type: 'checkbox',
-      name: 'h',
-      message: chalk.blue(
-        '请选择组件高度，最多选3个，例如选中1,2，代表组件最小高为1，默认高为2，最大高为2，单选代表不可拉伸',
-      ),
-      choices: [1, 2, 3, 4, 5, 6],
-    },
-    answer => {
-      if (answer.h.length === 0) {
-        consola.log(chalk.red('高度必须选择'))
-        return false
-      }
-
-      if (answer.h.length > 3) {
-        consola.log(chalk.red('高度最多选择3个'))
-        return false
-      }
-      return true
-    },
-  )
-
-  consola.log(chalk.green(answerH))
-
-  let configurable = await promptChecker({
-    type: 'confirm',
-    name: 'configurable',
-    message: chalk.blue('组件是否可配置，例如修改背景颜色，字体大小等'),
-  })
-
-  consola.log(chalk.green(configurable))
-
-  const width = getMiddleValue(answerW)
-  const height = getMiddleValue(answerH)
-  const minWidth = Math.min(...answerW)
-  const maxWidth = Math.max(...answerW)
-  const minHeight = Math.min(...answerH)
-  const maxHeight = Math.max(...answerH)
-  const snakeCaseName = snakeCase(name)
-  const paramCaseName = paramCase(name)
-
-  const widgetName = widgetPackage.name + '.' + snakeCaseName
-
-  const widgetDir = path.join(widgetFolder, paramCaseName)
-  if (!fs.existsSync(widgetDir)) {
-    fs.mkdirSync(widgetDir)
-  } else {
-    let answer = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'override',
-        message: chalk.red('组件名已存在，是否继续?'),
-      },
-    ])
-    if (!answer.override) {
-      exit()
-    }
-  }
-
-  const renderOptions: RenderOptions = {
-    name: name,
-    snakeCaseName: snakeCaseName,
-    paramCaseName: paramCaseName,
-    packageName: widgetPackage.name,
-    widgetName: widgetName,
-    title: title,
-    configurable: configurable,
-    width: width,
-    height: height,
-    maxWidth: maxWidth,
-    minHeight: minHeight,
-    maxHeight: maxHeight,
-    minWidth: minWidth,
-  }
-
-  const widgetDefineFile = path.resolve(widgetDir, `${name}.widget.ts`)
-  const widgetFile = path.resolve(widgetDir, `${name}Widget.vue`)
-  const widgetViewFile = path.resolve(widgetDir, `${name}WidgetView.vue`)
-  const widgetRoutesFile = path.resolve(widgetDir, `${name}WidgetRoutes.ts`)
-
-  EJSUtils.renderToFile('WidgetDefine.ejs', widgetDefineFile, 'typescript', renderOptions)
-  // EJSUtils.renderToFile('Widget.ejs', widgetFile, 'vue', renderOptions)
-  EJSUtils.renderToFile('WidgetView.ejs', widgetViewFile, 'vue', renderOptions)
-  EJSUtils.renderToFile('WidgetRoutes.ejs', widgetRoutesFile, 'typescript', renderOptions)
-  if (configurable) {
-    const configFile = path.resolve(widgetDir, `${name}ConfigView.vue`)
-    EJSUtils.renderToFile('WidgetConfig.ejs', configFile, 'vue', renderOptions)
-  }
-  // 注册路由
-  const routeFile = path.join(widgetFolder, 'widget-router.ts')
-  let routeContent
-  if (fs.existsSync(routeFile)) {
-    routeContent = fs.readFileSync(routeFile, 'utf8')
-  } else {
-    routeContent = fs.readFileSync(path.join(__dirname, '../template/widget-router.ts'), 'utf8')
-  }
-  const importRouteStr = `import ${name}WidgetRoutes from "./${paramCaseName}/${name}WidgetRoutes";`
-  const routeStr = `...${name}WidgetRoutes,`
-  if (!routeContent.includes(importRouteStr)) {
-    routeContent = routeContent.replaceAll(
-      '//FBI WANING! IMPORT PLACE',
-      `${importRouteStr}\n//FBI WANING! IMPORT PLACE`,
-    )
-  }
-  if (!routeContent.includes(routeStr)) {
-    routeContent = routeContent.replaceAll('//FBI WANING! ROUTE PLACE', `${routeStr}\n    //FBI WANING! ROUTE PLACE`)
-  }
-
-  fs.writeFileSync(routeFile, routeContent)
-
-  //添加到版本控制
-  let gitAdd = `git add ${widgetDir}`
-  consola.info(chalk.grey(gitAdd))
-  shell.exec(gitAdd)
-  consola.log('=================')
-  consola.info(`已创建组件：${widgetDir}`)
-  consola.success('Happy coding!')
-}
+import path from 'path'
+import fs from 'fs'
+import consola from 'consola'
+import promptChecker from './promts/promptChecker'
+import {paramCase, snakeCase} from 'change-case'
+import inquirer from 'inquirer'
+import shell from 'shelljs'
+import exit from './utils.js'
+import chalk from 'chalk'
+import {scanWidgetPackage} from '@widget-js/utils'
+import {fileURLToPath} from 'url'
+import {EJSUtils} from './utils/EJSUtils'
+import {WidgetPackageUtils} from "./utils/WidgetPackageUtils";
+// import vm from "vm";
+const __filename = fileURLToPath(import.meta.url)
+
+const __dirname = path.dirname(__filename)
+
+interface RenderOptions {
+  name: string
+  snakeCaseName: string
+  paramCaseName: string
+  packageName: string
+  widgetName: string
+  title: string
+  configurable: string
+  width: number
+  height: number
+  maxWidth: number
+  minHeight: number
+  maxHeight: number
+  minWidth: number
+}
+
+export default async function createWidget() {
+  let widgetPackage = await scanWidgetPackage()
+  if (!widgetPackage) {
+    consola.error('widget.ts or widget.json not found')
+    return
+  }
+  let widgetRootDir = WidgetPackageUtils.getRootDir(widgetPackage);
+  if (widgetPackage.devOptions && widgetPackage.devOptions.folder) {
+    consola.info(`组件路径：${widgetRootDir}`)
+  } else {
+    consola.info(`没有配置devOptions.folder，使用默认路径${widgetRootDir}`)
+  }
+
+  const getMiddleValue = (arr: number[]) => {
+    if (arr.length === 1) {
+      return arr[0]
+    } else if (arr.length === 2) {
+      return Math.max(...arr)
+    } else {
+      const max = Math.max(...arr)
+      const min = Math.min(...arr)
+      const sum = arr[0] + arr[1] + arr[2]
+      return sum - max - min
+    }
+  }
+
+  let name = await promptChecker(
+    {
+      type: 'input',
+      name: 'name',
+      message: chalk.blue('请输入组件名(大驼峰式)，如：CountdownClock'),
+    },
+    answer => {
+      const name = answer.name
+      if (name == null || name === '') {
+        consola.log(chalk.red('组件名不能为空'))
+        return false
+      }
+      return true
+    },
+  )
+
+  consola.log(chalk.green(name))
+
+  let title = await promptChecker({
+    type: 'input',
+    name: 'title',
+    message: chalk.blue('请输入组件标题，如：倒计时'),
+  })
+  consola.log(chalk.green(title))
+  let answerW = await promptChecker(
+    {
+      type: 'checkbox',
+      name: 'w',
+      message: chalk.blue(
+        '请选择组件宽度，最多选3个，例如选中2,4,6，代表组件最小宽为2，默认宽为4，最大宽为6，单选代表不可拉伸',
+      ),
+      choices: [1, 2, 3, 4, 5, 6],
+    },
+    answer => {
+      if (answer.w.length === 0) {
+        consola.log(chalk.red('宽度必须选择'))
+        return false
+      }
+
+      if (answer.w.length > 3) {
+        consola.log(chalk.red('宽度最多选择3个'))
+        return false
+      }
+      return true
+    },
+  )
+  consola.log(chalk.green(answerW))
+
+  let answerH = await promptChecker(
+    {
+      type: 'checkbox',
+      name: 'h',
+      message: chalk.blue(
+        '请选择组件高度，最多选3个，例如选中1,2，代表组件最小高为1，默认高为2，最大高为2，单选代表不可拉伸',
+      ),
+      choices: [1, 2, 3, 4, 5, 6],
+    },
+    answer => {
+      if (answer.h.length === 0) {
+        consola.log(chalk.red('高度必须选择'))
+        return false
+      }
+
+      if (answer.h.length > 3) {
+        consola.log(chalk.red('高度最多选择3个'))
+        return false
+      }
+      return true
+    },
+  )
+
+  consola.log(chalk.green(answerH))
+
+  let configurable = await promptChecker({
+    type: 'confirm',
+    name: 'configurable',
+    message: chalk.blue('组件是否可配置，例如修改背景颜色，字体大小等'),
+  })
+
+  consola.log(chalk.green(configurable))
+
+  const width = getMiddleValue(answerW)
+  const height = getMiddleValue(answerH)
+  const minWidth = Math.min(...answerW)
+  const maxWidth = Math.max(...answerW)
+  const minHeight = Math.min(...answerH)
+  const maxHeight = Math.max(...answerH)
+  const snakeCaseName = snakeCase(name)
+  const paramCaseName = paramCase(name)
+
+  const widgetName = widgetPackage.name + '.' + snakeCaseName
+
+  const widgetDir = path.join(widgetRootDir, paramCaseName)
+  if (!fs.existsSync(widgetDir)) {
+    fs.mkdirSync(widgetDir)
+  } else {
+    let answer = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'override',
+        message: chalk.red('组件名已存在，是否继续?'),
+      },
+    ])
+    if (!answer.override) {
+      exit()
+    }
+  }
+
+  const renderOptions: RenderOptions = {
+    name: name,
+    snakeCaseName: snakeCaseName,
+    paramCaseName: paramCaseName,
+    packageName: widgetPackage.name,
+    widgetName: widgetName,
+    title: title,
+    configurable: configurable,
+    width: width,
+    height: height,
+    maxWidth: maxWidth,
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    minWidth: minWidth,
+  }
+
+  const widgetDefineFile = path.resolve(widgetDir, `${name}.widget.ts`)
+  const widgetFile = path.resolve(widgetDir, `${name}Widget.vue`)
+  const widgetViewFile = path.resolve(widgetDir, `${name}WidgetView.vue`)
+  const widgetRoutesFile = path.resolve(widgetDir, `${name}WidgetRoutes.ts`)
+
+  await EJSUtils.renderToFile('WidgetDefine.ejs', widgetDefineFile, 'typescript', renderOptions)
+  // EJSUtils.renderToFile('Widget.ejs', widgetFile, 'vue', renderOptions)
+  await EJSUtils.renderToFile('WidgetView.ejs', widgetViewFile, 'vue', renderOptions)
+  await EJSUtils.renderToFile('WidgetRoutes.ejs', widgetRoutesFile, 'typescript', renderOptions)
+  if (configurable) {
+    const configFile = path.resolve(widgetDir, `${name}ConfigView.vue`)
+    await EJSUtils.renderToFile('WidgetConfig.ejs', configFile, 'vue', renderOptions)
+  }
+  // 注册路由
+  const routeFile = path.join(widgetRootDir, 'widget-router.ts')
+  let routeContent
+  if (fs.existsSync(routeFile)) {
+    routeContent = fs.readFileSync(routeFile, 'utf8')
+  } else {
+    routeContent = fs.readFileSync(path.join(__dirname, '../template/widget-router.ts'), 'utf8')
+  }
+  const importRouteStr = `import ${name}WidgetRoutes from "./${paramCaseName}/${name}WidgetRoutes";`
+  const routeStr = `...${name}WidgetRoutes,`
+  if (!routeContent.includes(importRouteStr)) {
+    routeContent = routeContent.replaceAll(
+      '//FBI WANING! IMPORT PLACE',
+      `${importRouteStr}\n//FBI WANING! IMPORT PLACE`,
+    )
+  }
+  if (!routeContent.includes(routeStr)) {
+    routeContent = routeContent.replaceAll('//FBI WANING! ROUTE PLACE', `${routeStr}\n    //FBI WANING! ROUTE PLACE`)
+  }
+
+  fs.writeFileSync(routeFile, routeContent)
+
+  //添加到版本控制
+  let gitAdd = `git add ${widgetDir}`
+  consola.info(chalk.grey(gitAdd))
+  shell.exec(gitAdd)
+  consola.log('=================')
+  consola.info(`已创建组件：${widgetDir}`)
+  consola.success('Happy coding!')
+}

package/src/init/init.ts

@@ -1,76 +1,118 @@
-import {Utils} from "../utils";
-import path from "path";
-import process from "process";
-import fs from "fs";
-import consola from "consola";
-import promptChecker from "../promts/promptChecker";
-import chalk from "chalk";
-import {EJSUtils} from "../utils/EJSUtils";
-import ora from "ora";
-const spinner = ora("Loading");
-
-export async function init() {
-  await addDependencies();
-  await addWidgetTs();
-}
-
-async function addWidgetTs() {
-  let name = await promptChecker(
-    {
-      type: 'input',
-      name: 'name',
-      message: chalk.blue('请输入组件包名(一般为倒置域名、只能小写字母)，如：cn.widget.countdown'),
-    },
-    answer => {
-      const name = answer.name
-      if (name == null || name === '') {
-        consola.log(chalk.red('包名不能为空'))
-        return false
-      }
-      return true
-    },
-  )
-
-  let widgetTs = path.join(process.cwd(), "widget.ts");
-  if (!fs.existsSync(widgetTs)) {
-    spinner.info('creating widget.ts')
-    EJSUtils.renderToFile('WidgetPackage.ejs', widgetTs, 'typescript', {name})
-    spinner.succeed('Done! Be sure to replace the contents of widget.ts with your own.')
-  }
-}
-
-/**
- * 增加widget-js依赖
- */
-async function addDependencies() {
-  spinner.info("Adding dependencies")
-  const packageJson = Utils.getPackageJson();
-  let dependencies = packageJson["dependencies"];
-  let devDependencies = packageJson["devDependencies"];
-  if (!dependencies) {
-    dependencies = {};
-  }
-  if (!devDependencies) {
-    packageJson["devDependencies"] = {};
-  }
-
-  await addDependency('@widget-js/core', dependencies)
-  await addDependency('@widget-js/vue3', dependencies)
-  await addDependency('@widget-js/vite-plugin-widget', devDependencies)
-
-  packageJson["dependencies"] = dependencies;
-  packageJson["devDependencies"] = devDependencies;
-
-  fs.writeFileSync(Utils.getPackagePath(), JSON.stringify(packageJson, null, 2));
-}
-
-
-async function addDependency(packageName: string, dependencies: any) {
-  spinner.info(`Adding dependencies ${packageName}`)
-  if (dependencies[packageName]) {
-    return;
-  }
-  const remoteVersion = await Utils.getRemoteVersion(packageName);
-  dependencies[packageName] = `^${remoteVersion}`;
-}
-
+import {Utils} from '../utils'
+import path from 'path'
+import process from 'process'
+import fs from 'fs'
+import consola from 'consola'
+import promptChecker from '../promts/promptChecker'
+import chalk from 'chalk'
+import {EJSUtils} from '../utils/EJSUtils'
+import ora from 'ora'
+import {PrettierUtils} from '../utils/PrettierUtils'
+import {scanWidgetPackage} from '@widget-js/utils'
+import {WidgetPackageUtils} from '../utils/WidgetPackageUtils'
+
+const spinner = ora('Loading')
+
+export async function init() {
+  await addDependencies()
+  await addWidgetTs()
+}
+
+async function addWidgetTs() {
+  let name = await promptChecker(
+    {
+      type: 'input',
+      name: 'name',
+      message: chalk.blue('组件包 包名 （示例 cn.widget.countdown）：'),
+    },
+    answer => {
+      const name = answer.name
+      if (name == null || name === '') {
+        consola.log(chalk.red(`包名不能为空`))
+        return false
+      }
+      return true
+    },
+  )
+
+  let widgetPackageTs = path.join(process.cwd(), 'widget.package.ts')
+  if (fs.existsSync(widgetPackageTs)) {
+    spinner.info('widget.package.ts已存在，跳过')
+  } else {
+    spinner.info('创建 widget.package.ts')
+    await EJSUtils.renderToFile('WidgetPackage.ejs', widgetPackageTs, 'typescript', {name})
+  }
+
+  await addVitePlugin()
+  await createRouter()
+
+  spinner.succeed('完成! 记得修改widget.package.ts。')
+}
+
+/**
+ * 增加widget-js依赖
+ */
+async function addDependencies() {
+  spinner.info('Adding dependencies')
+  const packageJson = Utils.getPackageJson()
+  let dependencies = packageJson['dependencies']
+  let devDependencies = packageJson['devDependencies']
+  if (!dependencies) {
+    dependencies = {}
+  }
+  if (!devDependencies) {
+    packageJson['devDependencies'] = {}
+  }
+
+  await addDependency('@widget-js/core', dependencies)
+  await addDependency('@widget-js/vue3', dependencies)
+  await addDependency('@widget-js/vite-plugin-widget', devDependencies)
+
+  packageJson['dependencies'] = dependencies
+  packageJson['devDependencies'] = devDependencies
+
+  fs.writeFileSync(Utils.getPackagePath(), JSON.stringify(packageJson, null, 2))
+}
+
+async function addVitePlugin() {
+  spinner.info('添加 vite-plugin-widget 到 vite plugin')
+  const viteConfigPath = path.join(process.cwd(), 'vite.config.ts')
+  if (!fs.existsSync(viteConfigPath)) {
+    spinner.warn('vite.config.ts not exists')
+    return
+  }
+  let viteConfig = fs.readFileSync(viteConfigPath).toString()
+  viteConfig = `import widget from '@widget-js/vite-plugin-widget'\n` + viteConfig
+  viteConfig = viteConfig.replace('vue()', `vue(),widget()`)
+  fs.writeFileSync(viteConfigPath, await PrettierUtils.format(viteConfig, 'typescript'))
+}
+
+async function createRouter() {
+  const widgetPackage = await scanWidgetPackage()
+  if (widgetPackage) {
+    spinner.info('创建 widget-router.ts')
+    const rootDir = WidgetPackageUtils.getRootDir(widgetPackage)
+    const widgetRouterPath = path.join(rootDir, 'widget-router.ts')
+    const routerContent = fs.readFileSync(path.join(__dirname, '../template/widget-router.ts'), 'utf8')
+    fs.writeFileSync(widgetRouterPath, routerContent)
+
+    const vueRouterPath = path.join(process.cwd(), './router/index.ts')
+    spinner.info('修改VueRouter配置')
+    if (fs.existsSync(vueRouterPath)) {
+      let vueRouterContent = fs.readFileSync(vueRouterPath, 'utf8')
+      const importStr = `import WidgetRouter from "../widgets/widget-router";`
+      vueRouterContent = `${importStr}\n${vueRouterContent}`
+      vueRouterContent.replace('routes: [', `routes: [\n...WidgetRouter,`)
+      fs.writeFileSync(vueRouterPath, await PrettierUtils.format(vueRouterContent, 'typescript'))
+    }
+  }
+}
+
+async function addDependency(packageName: string, dependencies: any) {
+  spinner.info(`Adding dependencies ${packageName}`)
+  if (dependencies[packageName]) {
+    return
+  }
+  const remoteVersion = await Utils.getRemoteVersion(packageName)
+  dependencies[packageName] = `^${remoteVersion}`
+}

package/src/utils/EJSUtils.ts

@@ -1,25 +1,17 @@
-import path from "path";
-import fs from "fs";
-import ejs, {Data} from "ejs";
-import prettier, {BuiltInParserName} from 'prettier'
-import { dirname } from 'dirname-filename-esm';
-
-export class EJSUtils{
-  static renderToFile(
-    templateFile: string,
-    outputFile: string,
-    parser: BuiltInParserName,
-    renderOptions: Data,
-  ) {
-    const defineTemplatePath = path.join(dirname(import.meta),'../template', templateFile)
-    let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8')
-    // Format the EJS code using Prettier
-    let code = ejs.render(defineTemplate, renderOptions)
-    const formattedEJSCode = prettier.format(code, {
-      parser: parser,
-      tabWidth: 2,
-      singleQuote: true,
-    })
-    fs.writeFileSync(outputFile, formattedEJSCode)
-  }
-}
+import path from 'path'
+import fs from 'fs'
+import ejs, {Data} from 'ejs'
+import {BuiltInParserName} from 'prettier'
+import {dirname} from 'dirname-filename-esm'
+import {PrettierUtils} from './PrettierUtils'
+
+export class EJSUtils {
+  static async renderToFile(templateFile: string, outputFile: string, parser: BuiltInParserName, renderOptions: Data) {
+    const defineTemplatePath = path.join(dirname(import.meta), '../template', templateFile)
+    let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8')
+    // Format the EJS code using Prettier
+    let code = ejs.render(defineTemplate, renderOptions)
+    const formattedEJSCode =await PrettierUtils.format(code,parser)
+    fs.writeFileSync(outputFile, formattedEJSCode)
+  }
+}

package/src/utils/PrettierUtils.ts

@@ -0,0 +1,11 @@
+import {BuiltInParserName, format} from 'prettier'
+
+export class PrettierUtils {
+  static async format(code: string, parser: BuiltInParserName) {
+    return format(code, {
+      parser: parser,
+      tabWidth: 2,
+      singleQuote: true,
+    })
+  }
+}

package/src/utils/WidgetPackageUtils.ts

@@ -0,0 +1,13 @@
+import path from 'path'
+import {WidgetPackage} from '@widget-js/core'
+import fs from "fs";
+
+export class WidgetPackageUtils {
+  static getRootDir(widgetPackage: WidgetPackage) {
+    const widgetRootDir = path.join(process.cwd(), widgetPackage.devOptions?.folder ?? './src/widgets')
+    if (!fs.existsSync(widgetRootDir)) {
+      fs.mkdirSync(widgetRootDir, {recursive: true})
+    }
+    return widgetRootDir;
+  }
+}

package/template/WidgetPackage.ejs

@@ -7,11 +7,8 @@ export default new WidgetPackage({
     'zh-CN': '修改成你的组件描述',
   },
   entry: 'index.html',
-  hash: true,
   homepage: '',
   name: '<%= name  %>',
-  remoteEntry: '',
-  remotePackage: '',
   title: {
     'zh-CN': '修改成你的组件标题',
   },

package/vite.config.ts

@@ -0,0 +1,15 @@
+import widget from '@widget-js/vite-plugin-widget';
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), widget()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});

package/lib/chunk-36QWOCKO.js

@@ -1,23 +0,0 @@
-// src/utils/EJSUtils.ts
-import path from "path";
-import fs from "fs";
-import ejs from "ejs";
-import prettier from "prettier";
-import { dirname } from "dirname-filename-esm";
-var EJSUtils = class {
-  static renderToFile(templateFile, outputFile, parser, renderOptions) {
-    const defineTemplatePath = path.join(dirname(import.meta), "../template", templateFile);
-    let defineTemplate = fs.readFileSync(defineTemplatePath, "utf8");
-    let code = ejs.render(defineTemplate, renderOptions);
-    const formattedEJSCode = prettier.format(code, {
-      parser,
-      tabWidth: 2,
-      singleQuote: true
-    });
-    fs.writeFileSync(outputFile, formattedEJSCode);
-  }
-};
-
-export {
-  EJSUtils
-};

package/lib/init-2NOIC3PQ.js

@@ -1,74 +0,0 @@
-import {
-  EJSUtils
-} from "./chunk-36QWOCKO.js";
-import {
-  promptChecker_default
-} from "./chunk-3GPAHQ6O.js";
-import {
-  Utils
-} from "./chunk-IJH6LXRT.js";
-
-// src/init/init.ts
-import path from "path";
-import process from "process";
-import fs from "fs";
-import consola from "consola";
-import chalk from "chalk";
-import ora from "ora";
-var spinner = ora("Loading");
-async function init() {
-  await addDependencies();
-  await addWidgetTs();
-}
-async function addWidgetTs() {
-  let name = await promptChecker_default(
-    {
-      type: "input",
-      name: "name",
-      message: chalk.blue("\u8BF7\u8F93\u5165\u7EC4\u4EF6\u5305\u540D(\u4E00\u822C\u4E3A\u5012\u7F6E\u57DF\u540D\u3001\u53EA\u80FD\u5C0F\u5199\u5B57\u6BCD)\uFF0C\u5982\uFF1Acn.widget.countdown")
-    },
-    (answer) => {
-      const name2 = answer.name;
-      if (name2 == null || name2 === "") {
-        consola.log(chalk.red("\u5305\u540D\u4E0D\u80FD\u4E3A\u7A7A"));
-        return false;
-      }
-      return true;
-    }
-  );
-  let widgetTs = path.join(process.cwd(), "widget.ts");
-  if (!fs.existsSync(widgetTs)) {
-    spinner.info("creating widget.ts");
-    EJSUtils.renderToFile("WidgetPackage.ejs", widgetTs, "typescript", { name });
-    spinner.succeed("Done! Be sure to replace the contents of widget.ts with your own.");
-  }
-}
-async function addDependencies() {
-  spinner.info("Adding dependencies");
-  const packageJson = Utils.getPackageJson();
-  let dependencies = packageJson["dependencies"];
-  let devDependencies = packageJson["devDependencies"];
-  if (!dependencies) {
-    dependencies = {};
-  }
-  if (!devDependencies) {
-    packageJson["devDependencies"] = {};
-  }
-  await addDependency("@widget-js/core", dependencies);
-  await addDependency("@widget-js/vue3", dependencies);
-  await addDependency("@widget-js/vite-plugin-widget", devDependencies);
-  packageJson["dependencies"] = dependencies;
-  packageJson["devDependencies"] = devDependencies;
-  fs.writeFileSync(Utils.getPackagePath(), JSON.stringify(packageJson, null, 2));
-}
-async function addDependency(packageName, dependencies) {
-  spinner.info(`Adding dependencies ${packageName}`);
-  if (dependencies[packageName]) {
-    return;
-  }
-  const remoteVersion = await Utils.getRemoteVersion(packageName);
-  dependencies[packageName] = `^${remoteVersion}`;
-}
-export {
-  init
-};

package/widget.package.ts

@@ -1,23 +0,0 @@
-import {WidgetPackage} from "@widget-js/core";
-
-export default new WidgetPackage({
-  author: "Neo Fu",
-  description: {
-    "zh-CN": "包含知乎、B站、抖音、微博等平台的热搜组件。",
-  },
-  entry: "index.html",
-  hash: true,
-  homepage: "https://widgetjs.cn",
-  name: "cn.widgetjs.widgets.hotspot",
-  remoteEntry: "https://rtugeek.gitee.io/hotspot",
-  remotePackage: "https://rtugeek.gitee.io/hotspot/widget.json",
-  title: {
-    "zh-CN": "全网热点组件",
-  },
-  version: "1.0.0",
-  devOptions: {
-    folder: "./src/widgets/",
-    route: true,
-    devUrl: "http://localhost:5173/hotspot"
-  }
-});

package/widget.ts

@@ -1,22 +0,0 @@
-import { WidgetPackage } from '@widget-js/core';
-
-//TODO 完善组件包信息
-export default new WidgetPackage({
-  author: '修改成你的信息',
-  description: {
-    'zh-CN': '修改成你的组件描述',
-  },
-  entry: 'index.html',
-  hash: true,
-  homepage: '',
-  name: 'test',
-  remoteEntry: '',
-  remotePackage: '',
-  title: {
-    'zh-CN': '修改成你的组件标题',
-  },
-  version: '1.0.0',
-  devOptions: {
-    folder: './src/widgets/',
-  },
-});