create-widget 24.1.1-beta.4 → 24.1.1-beta.41

package/LICENSE

@@ -1,27 +1,27 @@
-# create-widget core license
-
-create-widget is released under the MIT license:
-
-MIT License
-
-Copyright (c) 2023-present widgetjs
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
+# create-widget core license
+
+create-widget is released under the MIT license:
+
+MIT License
+
+Copyright (c) 2023-present widgetjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

package/index.cjs

@@ -7804,7 +7804,7 @@ var FileUtils = class {
         if (stats.isDirectory()) {
           await this.copyFolderRecursive(srcPath, destPath);
         } else {
-          await (0, import_fs_extra.copy)(srcPath, destPath);
+          await (0, import_fs_extra.copy)(srcPath, destPath, { overwrite: true });
         }
       }
     } catch (error) {
@@ -7845,7 +7845,9 @@ async function init() {
     { color: "#42d392", pos: 0.1 },
     { color: "#647eff", pos: 1 }
   ])(defaultBanner);
-  console.log(process2.stdout.isTTY && process2.stdout.getColorDepth() > 8 ? gradientBanner : defaultBanner);
+  console.log(
+    process2.stdout.isTTY && process2.stdout.getColorDepth() > 8 ? gradientBanner : defaultBanner
+  );
   console.log();
   const argv2 = (0, import_minimist.default)(process2.argv.slice(2), {
     alias: {
@@ -7860,6 +7862,9 @@ async function init() {
   let targetDir = argv2._[0];
   const defaultProjectName = !targetDir ? "widget-project" : targetDir;
   const forceOverwrite = argv2.force;
+  const unocss = argv2.unocss;
+  const vueuse = argv2.vueuse;
+  const iconpark = argv2.iconpark;
   const cwd2 = process2.cwd();
   let result = {};
   result = await (0, import_prompts.default)(
@@ -7878,6 +7883,27 @@ async function init() {
           const dirForPrompt = targetDir === "." ? "Current directory" : `Target directory "${targetDir}"`;
           return `${dirForPrompt} is not empty. Remove existing files and continue?`;
         }
+      },
+      {
+        name: "useVueUse",
+        type: () => vueuse ? null : "confirm",
+        message: () => {
+          return `Use VueUse (Collection of Essential Vue Composition Utilities)?`;
+        }
+      },
+      {
+        name: "useUnoCss",
+        type: () => unocss ? null : "confirm",
+        message: () => {
+          return `Use Unocss(Atomic CSS Engine)?`;
+        }
+      },
+      {
+        name: "useIconPark",
+        type: () => iconpark ? null : "confirm",
+        message: () => {
+          return `Use IconPark (2000+ high-quality icons)?`;
+        }
       }
     ],
     {
@@ -7886,7 +7912,13 @@ async function init() {
       }
     }
   );
-  const { projectName, shouldOverwrite = argv2.force } = result;
+  const {
+    projectName,
+    shouldOverwrite = argv2.force,
+    useVueUse = argv2.vueuse,
+    useUnoCss = argv2.unocss,
+    useIconPark = argv2.iconpark
+  } = result;
   const root = import_node_path.default.join(cwd2, targetDir);
   if (import_node_fs.default.existsSync(root) && shouldOverwrite) {
     emptyDir(root);
@@ -7897,6 +7929,20 @@ async function init() {
 Scaffolding project in ${root}...`);
   const templateRoot = import_node_path.default.join(__dirname, "./template");
   await FileUtils.copyFolderRecursive(templateRoot, root);
+  const packageJsonPath = import_node_path.default.resolve(`${root}/package.json`);
+  const packageJson = JSON.parse(import_node_fs.default.readFileSync(packageJsonPath).toString());
+  if (useVueUse) {
+    packageJson.dependencies["@vueuse/core"] = "latest";
+  }
+  if (useUnoCss) {
+    packageJson.devDependencies.unocss = "latest";
+    const unocssTemplateRoot = import_node_path.default.join(__dirname, "./unocss");
+    await FileUtils.copyFolderRecursive(unocssTemplateRoot, root);
+  }
+  if (useIconPark) {
+    packageJson.dependencies["@icon-park/vue-next"] = "latest";
+  }
+  import_node_fs.default.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
   const userAgent = process2.env.npm_config_user_agent ?? "";
   const packageManager = /pnpm/.test(userAgent) ? "pnpm" : /yarn/.test(userAgent) ? "yarn" : "npm";
   console.log(`
@@ -7904,9 +7950,17 @@ Done. Now run:
 `);
   if (root !== cwd2) {
     const cdProjectName = import_node_path.default.relative(cwd2, root);
-    console.log(`  ${import_chalk.default.bold(import_chalk.default.green(`cd ${cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName}`))}`);
+    console.log(
+      `  ${import_chalk.default.bold(
+        import_chalk.default.green(
+          `cd ${cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName}`
+        )
+      )}`
+    );
   }
-  console.log(`  ${import_chalk.default.bold(import_chalk.default.green(getCommand(packageManager, "install")))}`);
+  console.log(
+    `  ${import_chalk.default.bold(import_chalk.default.green(getCommand(packageManager, "install")))}`
+  );
 }
 init().catch((e) => {
   console.error(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-widget",
-  "version": "24.1.1-beta.4",
+  "version": "24.1.1-beta.41",
   "private": false,
   "description": "An easy way to start a Widget project",
   "author": "Neo Fu <rtugeek@gmail.com>",
@@ -11,7 +11,8 @@
   },
   "files": [
     "index.cjs",
-    "template"
+    "template",
+    "unocss"
   ],
   "engines": {
     "node": ">=v16.20.0"
@@ -21,8 +22,6 @@
   },
   "dependencies": {
     "chalk": "^4.1.2",
-    "consola": "^2.15.3",
-    "ejs": "^3.1.8",
     "fs-extra": "^11.2.0",
     "gradient-string": "^2.0.2",
     "minimist": "^1.2.8",
@@ -37,6 +36,9 @@
     "@types/node": "^18.11.13",
     "@types/prompts": "^2.4.9",
     "esbuild": "^0.20.2",
+    "eslint": "8.48.0",
+    "ora": "^6.2.0",
+    "package-json": "^10.0.1",
     "ts-loader": "^9.4.1",
     "ts-node": "^10.9.1",
     "tsup": "^6.5.0",
@@ -46,9 +48,11 @@
   },
   "scripts": {
     "build": "zx ./scripts/build.mjs",
+    "build:only": "zx ./scripts/build.mjs",
     "watch": "tsup-node src/index.ts --format cjs --watch",
-    "build:run": "npm run build && npm run create-widget",
+    "build:run": "npm run build && npm exec create-widget",
     "test": "node index.cjs",
+    "update:version": "esno scripts/updateVersion.ts",
     "pnpm:publish": "npm run build && pnpm publish --no-git-checks"
   }
 }

package/template/.vscode/extensions.json

@@ -1,3 +1,3 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

package/template/README.md

@@ -1,40 +1,40 @@
-# hello widget
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
+# hello widget
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

package/template/env.d.ts

@@ -1 +1 @@
-// / <reference types="vite/client" />
+// / <reference types="vite/client" />

package/template/index.html

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json

@@ -1,29 +1,33 @@
-{
-  "name": "hello-widget",
-  "type": "module",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build --force"
-  },
-  "dependencies": {
-    "@widget-js/core": "0.11.20",
-    "@widget-js/vue3": "0.11.21-rc.2",
-    "vue": "^3.3.11",
-    "vue-router": "^4.2.5"
-  },
-  "devDependencies": {
-    "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/tsconfig": "^0.5.0",
-    "@widget-js/vite-plugin-widget": "^1.2.8",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.10",
-    "vue-tsc": "^1.8.25"
-  }
-}
+{
+  "name": "hello-widget",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "build": "vite build",
+    "update:widgetjs": "widget dependencies -t remote"
+  },
+  "dependencies": {
+    "@vueuse/core": "^11.0.1",
+    "@widget-js/core": "latest",
+    "@widget-js/vue3": "latest",
+    "vue": "^3.3.11",
+    "vue-router": "^4.2.5",
+    "element-plus": "^2.8.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/tsconfig": "^0.5.0",
+    "unplugin-auto-import": "^0.11.4",
+    "unplugin-vue-components": "^0.22.9",
+    "@widget-js/vite-plugin-widget": "latest",
+    "@widget-js/cli": "latest",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vue-tsc": "^1.8.25"
+  }
+}

package/template/public/widget.json

@@ -1,50 +1,50 @@
-{
-  "name": "cn.test.widget",
-  "version": "1.0.0",
-  "author": "修改成你的信息",
-  "homepage": "",
-  "title": {
-    "zh-CN": "修改成你的组件标题"
-  },
-  "description": {
-    "zh-CN": "修改成你的组件描述"
-  },
-  "entry": "/",
-  "hash": true,
-  "url": "",
-  "widgets": [
-    {
-      "name": "cn.test.widget.clock",
-      "title": {
-        "zh-CN": "时钟"
-      },
-      "description": {
-        "zh-CN": ""
-      },
-      "keywords": [
-        "recommend"
-      ],
-      "security": false,
-      "permissions": [],
-      "lang": "zh-CN",
-      "width": 2,
-      "height": 2,
-      "maxWidth": 6,
-      "webviewTag": false,
-      "maxHeight": 6,
-      "minWidth": 2,
-      "minHeight": 2,
-      "movable": true,
-      "singleton": false,
-      "resizable": true,
-      "path": "/widget/clock",
-      "meta": {},
-      "backgroundThrottling": true,
-      "previewImage": "修改为组件预览图地址",
-      "supportDeployMode": 17,
-      "configPagePath": "/widget/config/clock",
-      "routes": []
-    }
-  ],
-  "pages": []
-}
+{
+  "name": "cn.test.widget",
+  "version": "1.0.0",
+  "author": "修改成你的信息",
+  "homepage": "",
+  "title": {
+    "zh-CN": "修改成你的组件标题"
+  },
+  "description": {
+    "zh-CN": "修改成你的组件描述"
+  },
+  "entry": "/",
+  "hash": true,
+  "url": "",
+  "widgets": [
+    {
+      "name": "cn.test.widget.clock",
+      "title": {
+        "zh-CN": "时钟"
+      },
+      "description": {
+        "zh-CN": ""
+      },
+      "keywords": [
+        "recommend"
+      ],
+      "security": false,
+      "permissions": [],
+      "lang": "zh-CN",
+      "width": 2,
+      "height": 2,
+      "maxWidth": 6,
+      "webviewTag": false,
+      "maxHeight": 6,
+      "minWidth": 2,
+      "minHeight": 2,
+      "movable": true,
+      "singleton": false,
+      "resizable": true,
+      "path": "/widget/clock",
+      "meta": {},
+      "backgroundThrottling": true,
+      "previewImage": "修改为组件预览图地址",
+      "supportDeployMode": 17,
+      "configPagePath": "/widget/config/clock",
+      "routes": []
+    }
+  ],
+  "pages": []
+}

package/template/src/App.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>
-
-<template>
-  <RouterView />
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView />
+</template>
+
+<style scoped></style>

package/template/src/main.ts

@@ -1,12 +1,12 @@
-import { WidgetJsPlugin } from '@widget-js/vue3'
-import '@widget-js/vue3/dist/style.css'
-import '@/assets/main.css'
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-
-const app = createApp(App)
-
-app.use(router)
-app.use(WidgetJsPlugin)
-app.mount('#app')
+import { WidgetJsPlugin } from '@widget-js/vue3'
+import '@widget-js/vue3/dist/style.css'
+import '@/assets/main.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(WidgetJsPlugin)
+app.mount('#app')

package/template/src/router/index.ts

@@ -1,11 +1,11 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-import WidgetRouter from '../widgets/widget-router'
-
-const router = createRouter({
-  history: createWebHashHistory(import.meta.env.BASE_URL),
-  routes: [
-    ...WidgetRouter,
-  ],
-})
-
-export default router
+import { createRouter, createWebHashHistory } from 'vue-router'
+import WidgetRouter from '../widgets/widget-router'
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [
+    ...WidgetRouter,
+  ],
+})
+
+export default router

package/template/src/widgets/clock/Clock.widget.ts

@@ -1,21 +1,21 @@
-import { Widget, WidgetKeyword } from '@widget-js/core'
-
-// TODO 修改组件信息，标题，描述，关键词
-const ClockWidget = new Widget({
-  name: 'cn.example.widget.clock',
-  title: { 'zh-CN': '时钟' },
-  description: { 'zh-CN': 'Hello world!' },
-  keywords: [WidgetKeyword.RECOMMEND],
-  lang: 'zh-CN',
-  width: 2,
-  height: 2,
-  minWidth: 2,
-  maxWidth: 6,
-  minHeight: 2,
-  maxHeight: 6,
-  previewImage: '/preview_clock.png',
-  path: '/widget/clock',
-  configPagePath: '/widget/config/clock',
-})
-
-export default ClockWidget
+import { Widget, WidgetKeyword } from '@widget-js/core'
+
+// TODO 修改组件信息，标题，描述，关键词
+const ClockWidget = new Widget({
+  name: 'cn.example.widget.clock',
+  title: { 'zh-CN': '时钟' },
+  description: { 'zh-CN': 'Hello world!' },
+  keywords: [WidgetKeyword.RECOMMEND],
+  lang: 'zh-CN',
+  width: 2,
+  height: 2,
+  minWidth: 2,
+  maxWidth: 6,
+  minHeight: 2,
+  maxHeight: 6,
+  previewImage: '/preview_clock.png',
+  path: '/widget/clock',
+  configPagePath: '/widget/config/clock',
+})
+
+export default ClockWidget

package/template/src/widgets/clock/ClockConfigView.vue

@@ -1,38 +1,38 @@
-<script lang="ts" setup>
-import {
-  WidgetConfigOption,
-  WidgetEditDialog,
-  useWidget,
-} from '@widget-js/vue3'
-import { BrowserWindowApi } from '@widget-js/core'
-import { ClockModel } from '@/widgets/clock/model/ClockModel'
-
-const { widgetData, widgetParams, save } = useWidget(ClockModel)
-BrowserWindowApi.setup({ width: 600, height: 400 })
-// 修改成需要设置组件参数配置
-const widgetConfigOption = new WidgetConfigOption({
-  title: '时钟设置',
-  theme: {
-    backgroundColor: true,
-    borderRadius: true,
-  },
-})
-</script>
-
-<template>
-  <WidgetEditDialog
-    v-model="widgetData"
-    :widget-params="widgetParams"
-    :option="widgetConfigOption"
-    @apply="save()"
-    @confirm="save({ closeWindow: true })"
-  >
-    <template #custom>
-      标题 <input v-model="widgetData.title">
-    </template>
-  </WidgetEditDialog>
-</template>
-
-<style scoped>
-
-</style>
+<script lang="ts" setup>
+import {
+  WidgetConfigOption,
+  WidgetEditDialog,
+  useWidget,
+} from '@widget-js/vue3'
+import { BrowserWindowApi } from '@widget-js/core'
+import { ClockModel } from '@/widgets/clock/model/ClockModel'
+
+const { widgetData, widgetParams, save } = useWidget(ClockModel)
+BrowserWindowApi.setup({ width: 600, height: 400 })
+// 修改成需要设置组件参数配置
+const widgetConfigOption = new WidgetConfigOption({
+  title: '时钟设置',
+  theme: {
+    backgroundColor: true,
+    borderRadius: true,
+  },
+})
+</script>
+
+<template>
+  <WidgetEditDialog
+    v-model="widgetData"
+    :widget-params="widgetParams"
+    :option="widgetConfigOption"
+    @apply="save()"
+    @confirm="save({ closeWindow: true })"
+  >
+    <template #custom>
+      标题 <input v-model="widgetData.title">
+    </template>
+  </WidgetEditDialog>
+</template>
+
+<style scoped>
+
+</style>

package/template/src/widgets/clock/ClockWidgetRoutes.ts

@@ -1,28 +1,28 @@
-import type { RouteRecordRaw } from 'vue-router'
-import ClockWidget from './Clock.widget'
-
-const path = ClockWidget.path
-const name = ClockWidget.name
-
-const configPagePath = ClockWidget.configPagePath!
-
-const ClockWidgetRoutes: RouteRecordRaw[] = [
-  {
-    path,
-    name: `${name}`,
-    component: () =>
-      import(
-        /* webpackChunkName: "cn.test.widget.clock" */ './ClockWidgetView.vue'
-      ),
-  },
-  {
-    path: configPagePath,
-    name: `${name}.config`,
-    component: () =>
-      import(
-        /* webpackChunkName: "cn.test.widget.clock.config" */ './ClockConfigView.vue'
-      ),
-  },
-]
-
-export default ClockWidgetRoutes
+import type { RouteRecordRaw } from 'vue-router'
+import ClockWidget from './Clock.widget'
+
+const path = ClockWidget.path
+const name = ClockWidget.name
+
+const configPagePath = ClockWidget.configPagePath!
+
+const ClockWidgetRoutes: RouteRecordRaw[] = [
+  {
+    path,
+    name: `${name}`,
+    component: () =>
+      import(
+        /* webpackChunkName: "cn.test.widget.clock" */ './ClockWidgetView.vue'
+      ),
+  },
+  {
+    path: configPagePath,
+    name: `${name}.config`,
+    component: () =>
+      import(
+        /* webpackChunkName: "cn.test.widget.clock.config" */ './ClockConfigView.vue'
+      ),
+  },
+]
+
+export default ClockWidgetRoutes

package/template/src/widgets/clock/ClockWidgetView.vue

@@ -1,35 +1,35 @@
-<script lang="ts" setup>
-import { useWidget } from '@widget-js/vue3'
-import { ref } from 'vue'
-import { ClockModel } from '@/widgets/clock/model/ClockModel'
-
-const { widgetData } = useWidget(ClockModel)
-
-const time = ref(new Date().toLocaleTimeString())
-setInterval(() => {
-  time.value = new Date().toLocaleTimeString()
-}, 1000)
-</script>
-
-<template>
-  <widget-wrapper>
-    <div class="clock">
-      <span>{{ widgetData.title }}</span>
-      <span>{{ time }}</span>
-    </div>
-  </widget-wrapper>
-</template>
-
-<style scoped>
-.clock {
-  font-size: 16px;
-  font-weight: bold;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--widget-background-color);
-  border-radius: var(--widget-border-radius);
-  color: var(--widget-color);
-  justify-content: center;
-}
-</style>
+<script lang="ts" setup>
+import { useWidget } from '@widget-js/vue3'
+import { ref } from 'vue'
+import { ClockModel } from '@/widgets/clock/model/ClockModel'
+
+const { widgetData } = useWidget(ClockModel)
+
+const time = ref(new Date().toLocaleTimeString())
+setInterval(() => {
+  time.value = new Date().toLocaleTimeString()
+}, 1000)
+</script>
+
+<template>
+  <widget-wrapper>
+    <div class="clock">
+      <span>{{ widgetData.title }}</span>
+      <span>{{ time }}</span>
+    </div>
+  </widget-wrapper>
+</template>
+
+<style scoped>
+.clock {
+  font-size: 16px;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--widget-background-color);
+  border-radius: var(--widget-border-radius);
+  color: var(--widget-color);
+  justify-content: center;
+}
+</style>

package/template/src/widgets/widget-router.ts

@@ -1,9 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router'
-import ClockWidgetRoutes from './clock/ClockWidgetRoutes'
-
+import ClockWidgetRoutes from './clock/ClockWidgetRoutes'
+
 // FBI WANING! IMPORT PLACE, DONT DELETE THIS LINE
 const WidgetRouter: RouteRecordRaw[] = [
-  ...ClockWidgetRoutes,
+  ...ClockWidgetRoutes,
   // FBI WANING! ROUTE PLACE, DONT DELETE THIS LINE
 ]
 export default WidgetRouter

package/template/tsconfig.app.json

@@ -1,13 +1,13 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "compilerOptions": {
-    "composite": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "noEmit": true
-  },
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"]
-}
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "noEmit": true
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
+}

package/template/tsconfig.json

@@ -1,11 +1,11 @@
-{
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ],
-  "files": []
-}
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "files": []
+}

package/template/tsconfig.node.json

@@ -1,17 +1,17 @@
-{
-  "extends": "@tsconfig/node18/tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"],
-    "noEmit": true
-  },
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ]
-}
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ]
+}

package/template/vite.config.ts

@@ -1,15 +1,22 @@
-import { URL, fileURLToPath } from 'node:url'
-import widget from '@widget-js/vite-plugin-widget'
-
-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)),
-    },
-  },
-})
+import { URL, fileURLToPath } from "node:url";
+import widget from "@widget-js/vite-plugin-widget";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    widget(),
+    AutoImport({ resolvers: [ElementPlusResolver()] }),
+    Components({ resolvers: [ElementPlusResolver()] }),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});

package/template/widget.package.ts

@@ -13,7 +13,6 @@ export default new WidgetPackage({
   title: {
     'zh-CN': '修改成你的组件标题',
   },
-  version: '1.0.0',
   devOptions: {
     folder: './src/widgets/',
   },

package/unocss/src/main.ts

@@ -0,0 +1,13 @@
+import 'virtual:uno.css'
+import { WidgetJsPlugin } from '@widget-js/vue3'
+import '@widget-js/vue3/dist/style.css'
+import '@/assets/main.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(WidgetJsPlugin)
+app.mount('#app')

package/unocss/uno.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  // ...UnoCSS options
+})

package/unocss/vite.config.ts

@@ -0,0 +1,24 @@
+import { URL, fileURLToPath } from "node:url";
+import widget from "@widget-js/vite-plugin-widget";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    UnoCSS(),
+    widget(),
+    AutoImport({ resolvers: [ElementPlusResolver()] }),
+    Components({ resolvers: [ElementPlusResolver()] }),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});