@widget-js/cli 1.1.7 → 1.1.10

package/src/createWidget.ts

@@ -1,154 +1,171 @@
-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 ejs from "ejs";
-import shell from "shelljs";
-import exit from "./utils.js";
-import chalk from "chalk";
-import {WidgetUtils} from "@widget-js/utils";
-import prettier, {BuiltInParserName} from "prettier";
-
+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,
+  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 WidgetUtils.scanWidgetPackage(process.cwd());
+  let widgetPackage = await scanWidgetPackage()
   if (!widgetPackage) {
-    consola.error("widget.ts or widget.json not found")
-    return;
+    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}`);
+  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}`);
+    consola.info(`没有配置devOptions.folder，使用默认路径${widgetFolder}`)
   }
 
   if (!fs.existsSync(widgetFolder)) {
-    fs.mkdirSync(widgetFolder, {recursive: true});
+    fs.mkdirSync(widgetFolder, {recursive: true})
   }
 
   const getMiddleValue = (arr: number[]) => {
     if (arr.length === 1) {
-      return arr[0];
+      return arr[0]
     } else if (arr.length === 2) {
-      return Math.max(...arr);
+      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;
+      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;
-  })
+  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",
+    type: 'input',
     name: 'title',
-    message: chalk.blue("请输入组件标题，如：倒计时")
+    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;
-  })
+  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;
-  })
+  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",
+    type: 'confirm',
     name: 'configurable',
-    message: chalk.blue("组件是否可配置，例如修改背景颜色，字体大小等")
+    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 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 widgetName = widgetPackage.name + '.' + snakeCaseName
 
   const widgetDir = path.join(widgetFolder, paramCaseName)
   if (!fs.existsSync(widgetDir)) {
-    fs.mkdirSync(widgetDir);
+    fs.mkdirSync(widgetDir)
   } else {
-    let answer = await inquirer.prompt([{
-      type: 'confirm',
-      name: 'override',
-      message: chalk.red('组件名已存在，是否继续?')
-    }])
+    let answer = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'override',
+        message: chalk.red('组件名已存在，是否继续?'),
+      },
+    ])
     if (!answer.override) {
       exit()
     }
@@ -167,60 +184,49 @@ export default async function createWidget() {
     maxWidth: maxWidth,
     minHeight: minHeight,
     maxHeight: maxHeight,
-    minWidth: minWidth
-  }
-
-  function renderToFile(templateFile: string, outputFile: string, parser: BuiltInParserName, renderOptions: RenderOptions) {
-    const defineTemplatePath = path.join(__dirname, '../template', templateFile)
-    let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8');
-    // Format the EJS code using Prettier
-
-    let code = ejs.render(defineTemplate, renderOptions);
-    let fileFormat = outputFile.split('.');
-    const formattedEJSCode = prettier.format(code, {
-      parser: parser, tabWidth: 2, singleQuote: true
-    });
-    fs.writeFileSync(outputFile, formattedEJSCode)
+    minWidth: minWidth,
   }
 
   const widgetDefineFile = path.resolve(widgetDir, `${name}.widget.ts`)
-  const widgetFile = path.resolve(widgetDir, `${name}Widget.vue`);
+  const widgetFile = path.resolve(widgetDir, `${name}Widget.vue`)
   const widgetViewFile = path.resolve(widgetDir, `${name}WidgetView.vue`)
   const widgetRoutesFile = path.resolve(widgetDir, `${name}WidgetRoutes.ts`)
 
-  renderToFile('WidgetDefine.ejs', widgetDefineFile, 'typescript', renderOptions);
-  renderToFile('Widget.ejs', widgetFile, 'vue', renderOptions);
-  renderToFile('WidgetView.ejs', widgetViewFile, 'vue', renderOptions);
-  renderToFile('WidgetRoutes.ejs', widgetRoutesFile, 'typescript', renderOptions);
+  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`)
-    renderToFile('WidgetConfig.ejs', configFile, 'vue', renderOptions)
-    ;
+    EJSUtils.renderToFile('WidgetConfig.ejs', configFile, 'vue', renderOptions)
   }
-// 注册路由
-  const routeFile = path.join(widgetFolder, 'widget-router.ts');
-  let routeContent;
+  // 注册路由
+  const routeFile = path.join(widgetFolder, 'widget-router.ts')
+  let routeContent
   if (fs.existsSync(routeFile)) {
-    routeContent = fs.readFileSync(routeFile, 'utf8');
+    routeContent = fs.readFileSync(routeFile, 'utf8')
   } else {
-    routeContent = fs.readFileSync(path.join(__dirname, "../template/widget-router.ts"), 'utf8');
+    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`)
+    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`)
+    routeContent = routeContent.replaceAll('//FBI WANING! ROUTE PLACE', `${routeStr}\n    //FBI WANING! ROUTE PLACE`)
   }
 
   fs.writeFileSync(routeFile, routeContent)
 
-//添加到版本控制
-  let gitAdd = `git add ${widgetDir}`;
+  //添加到版本控制
+  let gitAdd = `git add ${widgetDir}`
   consola.info(chalk.grey(gitAdd))
-  shell.exec(gitAdd);
-  consola.log("=================")
+  shell.exec(gitAdd)
+  consola.log('=================')
   consola.info(`已创建组件：${widgetDir}`)
-  consola.success("Happy coding!")
+  consola.success('Happy coding!')
 }

package/src/dependencies/localDependencies.ts

@@ -1,5 +1,5 @@
 import ora from "ora";
-import {getPackageJson, getPackagePath, widgetPackages} from "../utils";
+import { getPackagePath, Utils, widgetPackages} from "../utils";
 import fs from "fs";
 
 
@@ -8,7 +8,7 @@ const spinner = ora("Connecting");
 export namespace LocalDependencies {
   export async function start() {
     spinner.start();
-    let json = getPackageJson();
+    let json = Utils.getPackageJson();
     let packageNames = Object.keys(widgetPackages);
     let dependencies = json["dependencies"];
     let devDependencies = json["devDependencies"];

package/src/dependencies/remoteDependencies.ts

@@ -1,6 +1,6 @@
 import packageJson from "package-json";
 import ora from "ora";
-import {getPackageJson, getPackagePath, widgetPackages} from "../utils";
+import {getPackagePath, Utils, widgetPackages} from "../utils";
 import fs from "fs";
 
 const spinner = ora("Connecting");
@@ -9,7 +9,7 @@ export namespace RemoteDependencies {
 
   export async function start() {
     spinner.start();
-    let json = getPackageJson();
+    let json = Utils.getPackageJson();
     let packageNames = Object.keys(widgetPackages);
     let dependencies = json["dependencies"];
     let devDependencies = json["devDependencies"];
@@ -26,20 +26,15 @@ export namespace RemoteDependencies {
       if (packageNames.indexOf(localPackage) > -1) {
         let packageVersion = widgetPackages[localPackage];
         if (!packageVersion) {
-          packageVersion = await getRemoteVersion(localPackage);
+          spinner.info(`Fetching package version:${localPackage}`);
+          packageVersion = await Utils.getRemoteVersion(localPackage);
           widgetPackages[localPackage] = packageVersion;
+          spinner.info(`version:${packageVersion}`);
         }
         dependencies[localPackage] = `^${packageVersion}`;
       }
     }
   }
 
-  async function getRemoteVersion(packageName: string): Promise<string> {
-    spinner.info(`Fetching package version:${packageName}`);
-    const metadata = await packageJson(packageName);
-    let version = metadata["version"];
-    spinner.info(`version:${version}`);
-    return version as string;
-  }
 
 }

package/src/index.ts

@@ -5,16 +5,17 @@ import * as process from "process";
 
 import figlet from "figlet";
 import gradient from "gradient-string";
+import {dirname} from "dirname-filename-esm";
 
 //
-const packageJsonPath = path.join(process.cwd(), "package.json");
+const packageJsonPath = path.join(dirname(import.meta), "../package.json");
 let 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("创建新的组件")
+  .description("Create new widget")
   .action(async () => {
     const createWidget = await import("./createWidget");
     await createWidget.default();
@@ -24,7 +25,7 @@ let dependenciesOption = new Option("-t, --type <type>").choices(["remote", "loc
 
 program
   .command("dependencies")
-  .description("将@widget-js依赖版本设置成远程或者本地")
+  .description("Set @widget-js dependencies to local(workspace:*) or remote(^1.0.0 etc)")
   .addOption(dependenciesOption)
   .action(async (options) => {
     let dependencies = await import("./dependencies/index");
@@ -32,18 +33,20 @@ program
   });
 
 program
-  .command("build")
-  .description("执行编译任务")
+  .command("init")
+  .description("Initialize widget-js project")
   .action(async () => {
-    const build = await import("./build/build");
-    await build.build();
+    const init = await import("./init/init");
+    await init.init();
   });
 
 let typeOption = new Option("-t, --type <type>").choices(["ftp", "oss"]);
+let fileOption = new Option("-f, --file <file>");
 program
   .command("release")
   .description("通过FTP/OSS发布文件，仅内部使用")
   .addOption(typeOption)
+  .addOption(fileOption)
   .action(async (options, command) => {
     // @ts-ignore
     let release = await import("./release/release");

package/src/init/init.ts

@@ -0,0 +1,76 @@
+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}`;
+}
+

package/src/release/ftp.ts

@@ -7,7 +7,7 @@ import consola from "consola";
 import inquirer from "inquirer";
 import ora from "ora";
 import * as process from "process";
-import {getPackageVersion} from "../utils";
+import { Utils} from "../utils";
 
 
 interface PasswordAnswer {
@@ -85,10 +85,10 @@ async function runSSH(sshConfig: Record<string, string | string[]>, releaseConfi
   }
 }
 
-export async function ftpUpload() {
+export async function ftpUpload(releaseFile: string = 'release.json') {
   // 读取
-  const releaseJsonFilePath = path.join(process.cwd(), 'release.json')
-  const packageVersion = getPackageVersion()
+  const releaseJsonFilePath = path.join(process.cwd(), releaseFile)
+  const packageVersion = Utils.getPackageVersion()
   consola.info('Package Version:', packageVersion)
 
   let releaseJson = fs.readFileSync(releaseJsonFilePath).toString().replaceAll('${version}', packageVersion);

package/src/release/release.ts

@@ -16,7 +16,7 @@ async function delay(time: number) {
 
 const release = async (options: any) => {
   if (options.type == 'ftp') {
-    await ftpUpload()
+    await ftpUpload(options.file)
     return
   }
   const packageJSON = JSON.parse(fs.readFileSync('package.json', 'utf-8'))

package/src/utils/EJSUtils.ts

@@ -0,0 +1,25 @@
+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)
+  }
+}