@widget-js/cli 1.0.4 → 1.0.6

package/babel.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        '@babel/preset-env'
+      ]
+    },
+    build: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            loose: true
+          }
+        ]
+      ]
+    }
+  }
+}

package/bin/widget.js

@@ -1,217 +1,30 @@
-import inquirer from "inquirer";
-import {chalk} from "@vue/cli-shared-utils";
-import fs from "fs";
-import path from "path";
-import {snakeCase, paramCase} from "change-case";
-import {fileURLToPath} from 'url';
-import shell from 'shelljs';
-import promptChecker from "../lib/promts/promptChecker.js";
-import {exit, exitProcess} from "@vue/cli-shared-utils/lib/exit.js";
-import ejs from "ejs";
-import consola from "consola";
+import {program} from 'commander';
+
+import packageJson from '../package.json' assert {type: 'json'};
+import createWidget from "../lib/createWidget.js";
+import release from "../lib/release/release.js";
+
+program
+    .version(`@widget-js/cli ${packageJson.version}`)
+    .usage('<command> [options]')
+program
+    .command('create')
+    .description('创建新的组件')
+    .action(async () => {
+        await createWidget()
+    })
+program
+    .command('release')
+    .description('发布应用，仅内部使用')
+    .action(async () => {
+        await release()
+    })
+
+//TODO init 初始化项目
+//TODO publish 发布
+//TODO delete  删除
+program.parse(process.argv);
 
 
-let widgetJson = path.join(process.cwd(), "widget.json");
-if (!fs.existsSync(widgetJson)) {
-    consola.error("没有在根目录找到widget.json文件")
-    exit();
-}
 
-let widgetPackage = JSON.parse(fs.readFileSync(widgetJson));
-
-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 __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-Array.prototype.max = function () {
-    return Math.max.apply(null, this);
-};
-
-Array.prototype.min = function () {
-    return Math.min.apply(null, this);
-};
-
-const getMiddleValue = (arr) => {
-    if (arr.length === 1) {
-        return arr[0];
-    } else if (arr.length === 2) {
-        return arr.max();
-    } else {
-        const max = arr.max();
-        const min = arr.min();
-        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 = answerW.min();
-const maxWidth = answerW.max();
-const minHeight = answerH.min();
-const maxHeight = answerH.max();
-const snakeCaseName = snakeCase(name);
-const paramCaseName = paramCase(name);
-const packageName = "com.wisdom.widgets." + 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) {
-        exitProcess();
-    }
-}
-
-const renderOptions = {
-    name: name,
-    snakeCaseName: snakeCaseName,
-    paramCaseName: paramCaseName,
-    packageName: packageName,
-    title: title,
-    configurable: configurable,
-    width: width,
-    height: height,
-    maxWidth: maxWidth,
-    minHeight: minHeight,
-    maxHeight: maxHeight,
-    minWidth: minWidth
-}
-
-function renderToFile(templateFile, outputFile, renderOptions) {
-    const defineTemplatePath = path.join(__dirname, '../template', templateFile)
-    let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8');
-    fs.writeFileSync(outputFile, ejs.render(defineTemplate, renderOptions))
-}
-
-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`)
-
-renderToFile('WidgetDefine.ejs', widgetDefineFile, renderOptions);
-renderToFile('Widget.ejs', widgetFile, renderOptions);
-renderToFile('WidgetView.ejs', widgetViewFile, renderOptions);
-renderToFile('WidgetRoutes.ejs', widgetRoutesFile, renderOptions);
-if (configurable) {
-    const configFile = path.resolve(widgetDir, `${name}ConfigView.vue`)
-    renderToFile('WidgetConfig.ejs', configFile, renderOptions);
-}
-if (devOptions["useStorybook"]) {
-    const storiesFile = path.resolve(widgetDir, `${name}Widget.stories.ts`)
-    renderToFile('stories.ejs', storiesFile, 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!")
 

package/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  roots: ['<rootDir>/test'],
+  testMatch: [
+    '**/__tests__/**/*.+(ts|tsx|js)',
+    '**/?(*.)+(spec|test).+(ts|tsx|js)',
+  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest',{
+      tsconfig: 'tsconfig.json'
+    }],
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      './config/fileTransformer.js',
+  }
+}

package/lib/createWidget.js

@@ -0,0 +1,217 @@
+import path from "path";
+import fs from "fs";
+import consola from "consola";
+import {exit, exitProcess} from "@vue/cli-shared-utils/lib/exit.js";
+import {fileURLToPath} from "url";
+import promptChecker from "./promts/promptChecker.js";
+import {chalk} from "@vue/cli-shared-utils";
+import {paramCase, snakeCase} from "change-case";
+import inquirer from "inquirer";
+import ejs from "ejs";
+import shell from "shelljs";
+
+export default async function createWidget() {
+    let widgetJson = path.join(process.cwd(), "widget.json");
+    if (!fs.existsSync(widgetJson)) {
+        consola.error("没有在根目录找到widget.json文件")
+        exit();
+    }
+
+    let widgetPackage = JSON.parse(fs.readFileSync(widgetJson));
+
+    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 __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+
+    Array.prototype.max = function () {
+        return Math.max.apply(null, this);
+    };
+
+    Array.prototype.min = function () {
+        return Math.min.apply(null, this);
+    };
+
+    const getMiddleValue = (arr) => {
+        if (arr.length === 1) {
+            return arr[0];
+        } else if (arr.length === 2) {
+            return arr.max();
+        } else {
+            const max = arr.max();
+            const min = arr.min();
+            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 = answerW.min();
+    const maxWidth = answerW.max();
+    const minHeight = answerH.min();
+    const maxHeight = answerH.max();
+    const snakeCaseName = snakeCase(name);
+    const paramCaseName = paramCase(name);
+    const packageName = "com.wisdom.widgets." + 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) {
+            exitProcess();
+        }
+    }
+
+    const renderOptions = {
+        name: name,
+        snakeCaseName: snakeCaseName,
+        paramCaseName: paramCaseName,
+        packageName: packageName,
+        title: title,
+        configurable: configurable,
+        width: width,
+        height: height,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        maxHeight: maxHeight,
+        minWidth: minWidth
+    }
+
+    function renderToFile(templateFile, outputFile, renderOptions) {
+        const defineTemplatePath = path.join(__dirname, '../template', templateFile)
+        let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8');
+        fs.writeFileSync(outputFile, ejs.render(defineTemplate, renderOptions))
+    }
+
+    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`)
+
+    renderToFile('WidgetDefine.ejs', widgetDefineFile, renderOptions);
+    renderToFile('Widget.ejs', widgetFile, renderOptions);
+    renderToFile('WidgetView.ejs', widgetViewFile, renderOptions);
+    renderToFile('WidgetRoutes.ejs', widgetRoutesFile, renderOptions);
+    if (configurable) {
+        const configFile = path.resolve(widgetDir, `${name}ConfigView.vue`)
+        renderToFile('WidgetConfig.ejs', configFile, renderOptions);
+    }
+    if (devOptions["useStorybook"]) {
+        const storiesFile = path.resolve(widgetDir, `${name}Widget.stories.ts`)
+        renderToFile('stories.ejs', storiesFile, 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!")
+}

package/lib/release/oss.js

@@ -0,0 +1,47 @@
+import OSS from "ali-oss";
+import {chalk} from "@vue/cli-shared-utils";
+import fs from "fs";
+
+let packageData = JSON.parse(fs.readFileSync("./package.json").toString());
+export const AccessKeyID = packageData.oss.id;
+export const AccessKeySecret = packageData.oss.secret;
+
+const headers = {
+    // 指定Object的存储类型。
+    'x-oss-storage-class': 'Standard',
+    // 指定Object的访问权限。
+    'x-oss-object-acl': 'public-read',
+    'x-oss-forbid-overwrite': 'false',
+    'Cache-Control': 'no-cache'
+};
+
+const clinet = new OSS({
+    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+    region: 'oss-cn-hangzhou',
+    // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
+    accessKeyId: AccessKeyID,
+    accessKeySecret: AccessKeySecret,
+    bucket: 'widget-fun',
+});
+
+export async function put(ossPath, file) {
+    try {
+        // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
+        // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
+        const result = await clinet.put(ossPath, file, {headers});
+        console.log(chalk.green(`上传成功：${file}->${ossPath}`));
+    } catch (e) {
+        console.log(e);
+    }
+}
+
+export async function copy(dist, src) {
+    try {
+        // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
+        // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
+        const result = await clinet.copy(dist, src, {headers});
+        console.log(chalk.green(`复制成功：${src}->${dist}`));
+    } catch (e) {
+        console.error(e);
+    }
+}

package/lib/release/release.js

@@ -0,0 +1,73 @@
+import {chalk} from "@vue/cli-shared-utils";
+import fs from "fs";
+import path from "path";
+import promptChecker from "../promts/promptChecker.js";
+import zipDirectory from "./update-zip.js";
+import {copy, put} from "./oss.js";
+
+const packageJSON = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
+const changelogJSON = JSON.parse(fs.readFileSync('changelog.json', 'utf-8'))
+const version = packageJSON["version"]
+const changelog = changelogJSON[version]
+
+async function delay(time) {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            resolve();
+        }, time);
+    });
+}
+
+const release = async () => {
+    let needUpdateElectron = await promptChecker({
+        type: "confirm",
+        name: 'electron',
+        message: chalk.blue("用户是否需要更新Electron?")
+    });
+
+    let needUpdateNodeModule = await promptChecker({
+        type: "confirm",
+        name: 'electron',
+        message: chalk.blue("用户是否需要更新node_module?")
+    });
+
+    const versionInfo = {
+        version: version,
+        releaseNote: changelog,
+        updateElectron: needUpdateElectron,
+        updateNodeModule: needUpdateNodeModule,
+        updateWindowsApi: false,
+        downloadLink: ''
+    };
+
+    let installerPath = path.join(`./packaged/widgets-${version}-setup-win-x64.exe`);
+    if (!fs.existsSync(installerPath)) {
+        installerPath = path.join(`./packaged/electron-${version}-setup-win-x64.exe`);
+    }
+    const updateZipPath = path.join(`./packaged/update.zip`)
+
+    console.log(chalk.blue("压缩更新文件中"))
+    if (needUpdateNodeModule) {
+        await zipDirectory("packaged/win-unpacked/resources/app", updateZipPath);
+    } else {
+        await zipDirectory("release", updateZipPath);
+    }
+
+    console.log(chalk.blue("上传installer.exe到OSS"))
+    await put("version/installer.exe", installerPath)
+
+    console.log(chalk.blue("上传update.zip到OSS"))
+    await put("version/update.zip", updateZipPath)
+
+    console.log(chalk.blue("更新版本信息"))
+    versionInfo.downloadLink = "https://widget-fun.oss-cn-hangzhou.aliyuncs.com/version/update.zip"
+    const versionJSON = JSON.stringify(versionInfo, null, 2)
+    await put("version/version.json", Buffer.from(versionJSON))
+
+    copy(`version/history/${version}.exe`, "version/installer.exe")
+    copy(`version/history/update-${version}.zip`, "version/update.zip")
+
+    console.log(chalk.yellow(versionJSON))
+}
+
+export default release;

package/lib/release/update-zip.js

@@ -0,0 +1,20 @@
+import fs from "fs";
+import archiver from "archiver";
+
+
+function zipDirectory(sourceDir, outPath) {
+  const archive = archiver('zip', { zlib: { level: 9 }});
+  const stream = fs.createWriteStream(outPath);
+
+  return new Promise((resolve, reject) => {
+    archive
+      .directory(sourceDir, false)
+      .on('error', err => reject(err))
+      .pipe(stream)
+    ;
+
+    stream.on('close', () => resolve());
+    archive.finalize();
+  });
+}
+export default zipDirectory;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@widget-js/cli",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "bin/widget.js",
   "author": "Neo Fu",
   "license": "MIT",
-  "type": "module",
   "private": false,
   "bin": {
     "widget": "bin/widget.js"
   },
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -17,14 +17,41 @@
   },
   "dependencies": {
     "@vue/cli-shared-utils": "^5.0.8",
+    "@widget-js/core": "^0.1.14",
+    "ali-oss": "^6.17.1",
+    "archiver": "^5.3.1",
+    "chalk": "^5.2.0",
     "change-case": "^4.1.2",
+    "commander": "^9.4.1",
     "consola": "^2.15.3",
     "ejs": "^3.1.8",
     "inquirer": "^9.1.4",
-    "shelljs": "^0.8.5"
+    "shelljs": "^0.8.5",
+    "ws": "^8.11.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/node": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@types/ejs": "latest",
+    "@types/inquirer": "latest",
+    "@types/jest": "^29.2.3",
+    "@types/node": "^18.11.13",
+    "@types/shelljs": "latest",
+    "pinst": "^3.0.0",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0"
   },
-  "devDependencies": {},
   "scripts": {
-    "widget": "node ./bin/widget.js"
+    "widget": "node ./bin/widget.js",
+    "build": "npm run build:esm && npm run build:types && npm run build:cjs && npm  run build:umd",
+    "build:cjs": "node tools/cleanup cjs && tsc -p config/tsconfig.cjs.json",
+    "build:esm": "node tools/cleanup esm && tsc -p config/tsconfig.esm.json",
+    "build:umd": "node tools/cleanup umd && webpack --config config/webpack.config.js",
+    "build:types": "node tools/cleanup types && tsc -p config/tsconfig.types.json"
   }
 }

package/tools/cleanup.js

@@ -0,0 +1,29 @@
+/* eslint-disable */
+const fs = require('fs')
+const Path = require('path')
+/* eslint-enable */
+
+const deleteFolderRecursive = (path) => {
+  if (fs.existsSync(path)) {
+    fs.readdirSync(path).forEach((file) => {
+      const curPath = Path.join(path, file)
+      if (fs.lstatSync(curPath).isDirectory()) {
+        deleteFolderRecursive(curPath)
+      } else {
+        fs.unlinkSync(curPath)
+      }
+    })
+    fs.rmdirSync(path)
+  }
+}
+
+const folder = process.argv.slice(2)[0]
+
+if (folder) {
+  deleteFolderRecursive(Path.join(__dirname, '../dist', folder))
+} else {
+  deleteFolderRecursive(Path.join(__dirname, '../dist/cjs'))
+  deleteFolderRecursive(Path.join(__dirname, '../dist/esm'))
+  deleteFolderRecursive(Path.join(__dirname, '../dist/umd'))
+  deleteFolderRecursive(Path.join(__dirname, '../dist/types'))
+}

package/tools/packagejson.js

@@ -0,0 +1,25 @@
+/* eslint-disable */
+const fs = require('fs')
+const Path = require('path')
+const fileName = '../package.json'
+const file = require(fileName)
+/* eslint-enable */
+
+const args = process.argv.slice(2)
+
+for (let i = 0, l = args.length; i < l; i++) {
+  if (i % 2 === 0) {
+    file[args[i]] = args[i + 1]
+  }
+}
+
+fs.writeFile(
+  Path.join(__dirname, fileName),
+  JSON.stringify(file, null, 2),
+  (err) => {
+    if (err) {
+      return console.log(err)
+    }
+    console.log('Writing to ' + fileName)
+  }
+)

package/tsconfig.json

@@ -0,0 +1,74 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    // "module": "commonjs",                  /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    /* Type declaration files to be included in compilation. */
+//    "types": ["element-plus/global"],
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    // "resolveJsonModule": true,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+
+    /* Skip type checking of declaration files. */
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  },
+  "include": ["src/**/*"],
+}