create-widget 0.0.9 → 24.1.1-beta.15

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

@@ -5551,9 +5551,9 @@ var require_minimist = __commonJS({
   }
 });
 
-// ../../../node_modules/.pnpm/universalify@2.0.0/node_modules/universalify/index.js
+// ../../../node_modules/.pnpm/universalify@2.0.1/node_modules/universalify/index.js
 var require_universalify = __commonJS({
-  "../../../node_modules/.pnpm/universalify@2.0.0/node_modules/universalify/index.js"(exports2) {
+  "../../../node_modules/.pnpm/universalify@2.0.1/node_modules/universalify/index.js"(exports2) {
     "use strict";
     exports2.fromCallback = function(fn) {
       return Object.defineProperty(function(...args) {
@@ -5561,11 +5561,8 @@ var require_universalify = __commonJS({
           fn.apply(this, args);
         else {
           return new Promise((resolve2, reject) => {
-            fn.call(
-              this,
-              ...args,
-              (err, res) => err != null ? reject(err) : resolve2(res)
-            );
+            args.push((err, res) => err != null ? reject(err) : resolve2(res));
+            fn.apply(this, args);
           });
         }
       }, "name", { value: fn.name });
@@ -5575,8 +5572,10 @@ var require_universalify = __commonJS({
         const cb = args[args.length - 1];
         if (typeof cb !== "function")
           return fn.apply(this, args);
-        else
-          fn.apply(this, args.slice(0, -1)).then((r) => cb(null, r), cb);
+        else {
+          args.pop();
+          fn.apply(this, args).then((r) => cb(null, r), cb);
+        }
       }, "name", { value: fn.name });
     };
   }
@@ -7754,11 +7753,11 @@ var require_lib2 = __commonJS({
 // src/index.ts
 var import_node_fs = __toESM(require("fs"));
 var process2 = __toESM(require("process"));
+var import_node_path = __toESM(require("path"));
 var import_gradient_string = __toESM(require_gradient_string());
 var import_prompts = __toESM(require_lib());
 var import_minimist = __toESM(require_minimist());
 var import_chalk = __toESM(require_source());
-var import_node_path = __toESM(require("path"));
 
 // src/utils/directoryTraverse.ts
 var fs = __toESM(require("fs"));
@@ -7840,7 +7839,7 @@ function emptyDir(dir) {
 }
 async function init() {
   console.log();
-  let defaultBanner = "Widget.js - The Desktop Widget Framework";
+  const defaultBanner = "Widget.js - The Desktop Widget Framework";
   const gradientBanner = (0, import_gradient_string.default)([
     { color: "#42d392", pos: 0 },
     { color: "#42d392", pos: 0.1 },
@@ -7850,9 +7849,9 @@ async function init() {
   console.log();
   const argv2 = (0, import_minimist.default)(process2.argv.slice(2), {
     alias: {
-      typescript: ["ts"],
+      "typescript": ["ts"],
       "with-tests": ["tests"],
-      router: ["vue-router"]
+      "router": ["vue-router"]
     },
     string: ["_"],
     // all arguments are treated as booleans
@@ -7883,7 +7882,7 @@ async function init() {
     ],
     {
       onCancel: () => {
-        throw new Error(import_chalk.default.red("\u2716") + " Operation cancelled");
+        throw new Error(`${import_chalk.default.red("\u2716")} Operation cancelled`);
       }
     }
   );

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "create-widget",
-  "version": "0.0.9",
-  "main": "lib/index.js",
+  "version": "24.1.1-beta.15",
+  "private": false,
   "description": "An easy way to start a Widget project",
   "author": "Neo Fu <rtugeek@gmail.com>",
   "license": "MIT",
-  "private": false,
+  "main": "lib/index.js",
   "bin": {
     "create-widget": "index.cjs"
   },
@@ -13,12 +13,12 @@
     "index.cjs",
     "template"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "engines": {
     "node": ">=v16.20.0"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "chalk": "^4.1.2",
     "consola": "^2.15.3",
@@ -30,17 +30,19 @@
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.2",
-    "@types/gradient-string": "^1.1.2",
     "@types/ejs": "latest",
     "@types/fs-extra": "^11.0.4",
+    "@types/gradient-string": "^1.1.2",
     "@types/minimist": "^1.2.5",
     "@types/node": "^18.11.13",
     "@types/prompts": "^2.4.9",
+    "esbuild": "^0.20.2",
     "ts-loader": "^9.4.1",
     "ts-node": "^10.9.1",
     "tsup": "^6.5.0",
     "typescript": "^5.2.2",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "zx": "^7.2.3"
   },
   "scripts": {
     "build": "zx ./scripts/build.mjs",

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,31 +1,30 @@
-{
-  "name": "hello-widget",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "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/vite-plugin-widget": "^1.2.8",
-    "vue": "^3.3.11",
-    "vue-router": "^4.2.5",
-    "@widget-js/core": "0.11.20",
-    "@widget-js/vue3": "0.11.21-rc.2"
-  },
-  "devDependencies": {
-    "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/tsconfig": "^0.5.0",
-    "npm-run-all2": "^6.1.1",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.10",
-    "vue-tsc": "^1.8.25",
-    "@widget-js/vite-plugin-widget": "^1.2.8"
-  }
-}
+{
+  "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",
+    "update:widgetjs": "widget dependencies -t remote",
+    "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"
+  }
+}

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 WidgetRouter from '../widgets/widget-router';
-import {createRouter, createWebHashHistory} from 'vue-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,32 +1,21 @@
-import { Widget, WidgetKeyword } from '@widget-js/core';
-//TODO 修改组件信息，标题，描述，关键词
-const name = 'cn.example.widget.clock';
-//组件标题
-const title = { 'zh-CN': '时钟' };
-//组件描述
-const description = { 'zh-CN': 'Hello world!' };
-//组件关键词
-const keywords = [WidgetKeyword.RECOMMEND];
-//组件路由地址
-const path = '/widget/clock';
-//配置页路由地址
-const configPagePath = '/widget/config/clock';
-//组件关键词
-const ClockWidget = new Widget({
-  name: name,
-  title: title,
-  description: description,
-  keywords: keywords,
-  lang: 'zh-CN',
-  width: 2,
-  height: 2,
-  minWidth: 2,
-  maxWidth: 6,
-  minHeight: 2,
-  maxHeight: 6,
-  previewImage: '/preview_clock.png',
-  path,
-  configPagePath,
-});
-
-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 @@
-<template>
-  <widget-edit-dialog
-      :widget-params="widgetParams"
-      :option="widgetConfigOption"
-      v-model="widgetData"
-      @apply="save()"
-      @confirm="save({ closeWindow: true })"
-  >
-    <template #custom>
-      标题 <input v-model="widgetData.title"/>
-    </template>
-  </widget-edit-dialog>
-</template>
-
-<script lang="ts" setup>
-import {
-  useWidget,
-  WidgetConfigOption,
-  WidgetEditDialog,
-} 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>
-
-<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: 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,34 +1,35 @@
-<template>
-  <widget-wrapper>
-    <div class="clock">
-      <span>{{ widgetData.title }}</span>
-      <span>{{ time }}</span>
-    </div>
-  </widget-wrapper>
-</template>
-<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>
-
-<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/clock/model/ClockModel.ts

@@ -1,5 +1,5 @@
-import {WidgetData} from "@widget-js/core";
+import { WidgetData } from '@widget-js/core'
 
 export class ClockModel extends WidgetData {
-    title: string = 'Hello world!';
+  title: string = 'Hello world!'
 }

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

@@ -1,8 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router'
-import ClockWidgetRoutes from "./clock/ClockWidgetRoutes";
-//FBI WANING! IMPORT PLACE, DONT DELETE THIS LINE
+import ClockWidgetRoutes from './clock/ClockWidgetRoutes'
+
+// FBI WANING! IMPORT PLACE, DONT DELETE THIS LINE
 const WidgetRouter: RouteRecordRaw[] = [
-    ...ClockWidgetRoutes,
-    //FBI WANING! ROUTE PLACE, DONT DELETE THIS LINE
-];
+  ...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",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
-  "compilerOptions": {
-    "composite": true,
-    "noEmit": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}
+{
+  "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 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ]
-}
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "files": []
+}

package/template/tsconfig.node.json

@@ -1,17 +1,17 @@
-{
-  "extends": "@tsconfig/node18/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "noEmit": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
-}
+{
+  "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,14 +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)),
-    },
-  },
-});
+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)),
+    },
+  },
+})

package/template/widget.package.ts

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