create-widget 0.0.9 → 24.1.1-beta.1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "create-widget",
-  "version": "0.0.9",
-  "main": "lib/index.js",
+  "version": "24.1.1-beta.1",
+  "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,9 +30,9 @@
   },
   "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",
@@ -40,7 +40,8 @@
     "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/env.d.ts

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

package/template/package.json

@@ -1,8 +1,8 @@
 {
   "name": "hello-widget",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -11,21 +11,21 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "@widget-js/core": "0.11.20",
     "@widget-js/vite-plugin-widget": "^1.2.8",
+    "@widget-js/vue3": "0.11.21-rc.2",
     "vue": "^3.3.11",
-    "vue-router": "^4.2.5",
-    "@widget-js/core": "0.11.20",
-    "@widget-js/vue3": "0.11.21-rc.2"
+    "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",
     "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"
+    "vue-tsc": "^1.8.25"
   }
 }

package/template/public/widget.json

@@ -47,4 +47,4 @@
     }
   ],
   "pages": []
-}
+}

package/template/src/App.vue

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

package/template/src/router/index.ts

@@ -1,11 +1,11 @@
-import WidgetRouter from '../widgets/widget-router';
-import {createRouter, createWebHashHistory} from 'vue-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;
+export default router

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

@@ -1,22 +1,23 @@
-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';
-//组件关键词
+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,
+  name,
+  title,
+  description,
+  keywords,
   lang: 'zh-CN',
   width: 2,
   height: 2,
@@ -27,6 +28,6 @@ const ClockWidget = new Widget({
   previewImage: '/preview_clock.png',
   path,
   configPagePath,
-});
+})
 
-export default ClockWidget;
+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";
+  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 { widgetData, widgetParams, save } = useWidget(ClockModel)
+BrowserWindowApi.setup({ width: 600, height: 400 })
+// 修改成需要设置组件参数配置
 const widgetConfigOption = new WidgetConfigOption({
-  title:'时钟设置',
+  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,14 +1,14 @@
-import type { RouteRecordRaw } from 'vue-router';
-import ClockWidget from './Clock.widget';
+import type { RouteRecordRaw } from 'vue-router'
+import ClockWidget from './Clock.widget'
 
-const path = ClockWidget.path;
-const name = ClockWidget.name;
+const path = ClockWidget.path
+const name = ClockWidget.name
 
-const configPagePath = ClockWidget.configPagePath!;
+const configPagePath = ClockWidget.configPagePath!
 
 const ClockWidgetRoutes: RouteRecordRaw[] = [
   {
-    path: path,
+    path,
     name: `${name}`,
     component: () =>
       import(
@@ -23,6 +23,6 @@ const ClockWidgetRoutes: RouteRecordRaw[] = [
         /* webpackChunkName: "cn.test.widget.clock.config" */ './ClockConfigView.vue'
       ),
   },
-];
+]
 
-export default ClockWidgetRoutes;
+export default ClockWidgetRoutes

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

@@ -1,17 +1,9 @@
-<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";
+import { useWidget } from '@widget-js/vue3'
+import { ref } from 'vue'
+import { ClockModel } from '@/widgets/clock/model/ClockModel'
 
-const {widgetData} = useWidget(ClockModel);
+const { widgetData } = useWidget(ClockModel)
 
 const time = ref(new Date().toLocaleTimeString())
 setInterval(() => {
@@ -19,6 +11,15 @@ setInterval(() => {
 }, 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;

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/*"]
-    }
-  }
+    },
+    "noEmit": true
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
 }

package/template/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "files": [],
   "references": [
     {
       "path": "./tsconfig.node.json"
@@ -7,5 +6,6 @@
     {
       "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.*"
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "noEmit": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
+  ]
 }

package/template/vite.config.ts

@@ -1,8 +1,9 @@
-import widget from '@widget-js/vite-plugin-widget';
-import { fileURLToPath, URL } from 'node: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'
 
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), widget()],
@@ -11,4 +12,4 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
-});
+})

package/template/widget.package.ts

@@ -1,6 +1,6 @@
-import { WidgetPackage } from '@widget-js/core';
+import { WidgetPackage } from '@widget-js/core'
 
-//TODO 完善组件包信息
+// TODO 完善组件包信息
 export default new WidgetPackage({
   author: '修改成你的信息',
   description: {
@@ -17,4 +17,4 @@ export default new WidgetPackage({
   devOptions: {
     folder: './src/widgets/',
   },
-});
+})