Skip to content

Commit 177f954

Browse files
rtugeekrtugeek
committed
接入vite，修改readme
1 parent b4f27f9 commit 177f954

27 files changed

+240
-98
lines changed

‎.storybook/main.js

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
const path = require('path');
22
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
3+
const {mergeConfig, loadConfigFromFile} = require("vite");
34

45
module.exports = {
5-
"stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
6-
"addons": [ "@storybook/addon-essentials" ],
7-
"framework": "@storybook/vue3",
6+
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
7+
addons: [ "@storybook/addon-essentials" ],
8+
framework: "@storybook/vue3",
89
core: {
9-
builder: "webpack5"
10+
builder: "@storybook/builder-webpack5"
11+
},
12+
async viteFinal(previousConfig) {
13+
const { config } = await loadConfigFromFile(
14+
path.resolve(__dirname, "../vite.config.ts")
15+
);
16+
return mergeConfig(previousConfig, {
17+
...config,
18+
plugins: [
19+
],
20+
});
1021
},
1122
webpackFinal: async (config, { configType }) => {
1223
config.resolve.alias = {

‎README.md

+17-14
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ widgets
4141
### 运行项目
4242

4343
#### Vue
44-
#
44+
下载并打开桌面组件客户端后再运行
4545
```shell
4646
pnpm serve
4747
```
@@ -58,6 +58,22 @@ pnpm widget create
5858
```
5959

6060
### 组件列表
61+
#### 生日列表
62+
![gif](screenshot/birthday_list.png)
63+
64+
- 代码路径：/widgets/birthday_list
65+
- 组件路由：/widget/birthday_list
66+
- 配置路由：/widget/config/birthday_list
67+
68+
69+
#### 灵动通知
70+
71+
![gif](screenshot/dynamic_island.gif)
72+
73+
- 代码路径：/widgets/dynamic_island
74+
- 组件路由：/widget/dynamic_island
75+
- 配置路由：/widget/config/dynamic_island
76+
6177

6278
#### 打工进度
6379

@@ -67,25 +83,12 @@ pnpm widget create
6783
- 组件路由：/widget/labor_progress
6884
- 配置路由：/widget/config/labor_progress
6985

70-
学到了什么：
71-
72-
- dayjs：duration，diff
73-
- animate.css: animate__animated animate__fadeOutUp animate__infinite
74-
- vueuse: useIntervalFn
75-
7686
#### 时间进度
7787

7888
![time_progress.png](screenshot%2Ftime_progress.png)
7989
- 代码路径：/widgets/time_progress
8090
- 组件路由：/widget/time_progress
8191

82-
学到了什么：
83-
84-
- vueuse: useTransition
85-
- string.padStart(2,"0"): 字符串不足2位，用0补足。 "7" -> "07"
86-
- 动画曲线：TransitionPresets.easeInOutCubic
87-
88-
8992
#### 歌词小说
9093
- 代码路径：/widgets/lyric_book
9194
- 组件路由：/widget/lyric_book

‎auto-imports.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Generated by 'unplugin-auto-import'
22
export {}
33
declare global {
4-
4+
const ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
55
}

‎components.d.ts

-13
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,6 @@ export {}
77

88
declare module '@vue/runtime-core' {
99
export interface GlobalComponents {
10-
ElAlert: typeof import('element-plus/es')['ElAlert']
11-
ElButton: typeof import('element-plus/es')['ElButton']
12-
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
13-
ElForm: typeof import('element-plus/es')['ElForm']
14-
ElFormItem: typeof import('element-plus/es')['ElFormItem']
15-
ElInput: typeof import('element-plus/es')['ElInput']
16-
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
17-
ElProgress: typeof import('element-plus/es')['ElProgress']
18-
ElRadio: typeof import('element-plus/es')['ElRadio']
19-
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
20-
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
21-
ElTable: typeof import('element-plus/es')['ElTable']
22-
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
2310
RouterLink: typeof import('vue-router')['RouterLink']
2411
RouterView: typeof import('vue-router')['RouterView']
2512
}

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Widget</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"test:unit": "jest",
1414
"dev": "vite --host",
1515
"vite:build": "vue-tsc && vite build",
16+
"vite:dev": "vite",
1617
"preview": "vite preview"
1718
},
1819
"pnpm": {
@@ -30,8 +31,8 @@
3031
"@vueuse/integrations": "^9.6.0",
3132
"@vueuse/motion": "2.0.0-beta.12",
3233
"@vueuse/router": "^9.9.0",
33-
"@widget-js/core": "^0.1.18",
34-
"@widget-js/vue3": "^0.1.18",
34+
"@widget-js/core": "^0.1.19",
35+
"@widget-js/vue3": "^0.1.20",
3536
"animate.css": "^4.1.1",
3637
"axios": "^1.1.3",
3738
"color": "^4.2.3",
@@ -57,13 +58,15 @@
5758
"@storybook/addon-links": "^6.5.13",
5859
"@storybook/addon-storysource": "^6.5.13",
5960
"@storybook/addon-viewport": "^6.5.13",
61+
"@storybook/builder-vite": "^0.2.5",
6062
"@storybook/builder-webpack5": "^6.5.13",
6163
"@storybook/manager-webpack5": "^6.5.13",
64+
"@storybook/preset-scss": "^1.0.3",
6265
"@storybook/testing-library": "^0.0.13",
6366
"@storybook/vue3": "^6.5.13",
6467
"@types/color": "^3.0.3",
6568
"@types/lodash": "^4.14.186",
66-
"@types/node": "^18.11.7",
69+
"@types/node": "^18.11.13",
6770
"@typescript-eslint/eslint-plugin": "^5.42.0",
6871
"@typescript-eslint/parser": "^5.42.0",
6972
"@vitejs/plugin-vue": "^4.0.0",

‎public/index.html

-17
This file was deleted.

‎screenshot/birthday_list.png

183 KB
Loading

‎screenshot/dynamic_island.gif

1.22 MB
Loading

‎script/registerWidgetPackage.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import WebSocket from "ws";
2+
import {WebSocketEvent, WebSocketEventType} from "@widget-js/core";
3+
import consola from "consola";
4+
5+
const registerWidgetPackage = async (widgetPackage) => {
6+
if (process.env.NODE_ENV === 'development') {
7+
if (!widgetPackage.devOptions.devUrl) {
8+
consola.error("注册组件失败，没有配置开发链接devUrl，示例：http://127.0.0.1:8080")
9+
return
10+
}
11+
const url = `ws://127.0.0.1:3506`;
12+
const ws = new WebSocket(url)
13+
ws.onerror = () => {
14+
consola.error("注册组件失败，客户端可能没有启动，或者端口占用")
15+
}
16+
ws.onopen = () => {
17+
widgetPackage.url = widgetPackage.devOptions.devUrl;
18+
for (const widget of widgetPackage.widgets) {
19+
widget.packageName = widgetPackage.name;
20+
}
21+
const webSocketEvent = new WebSocketEvent(WebSocketEventType.RESISTER_WIDGETS, widgetPackage);
22+
consola.info(`Widgets size:${widgetPackage.widgets.length}`);
23+
widgetPackage.widgets.forEach((it) => {
24+
consola.info(it.name);
25+
});
26+
const data = JSON.stringify(webSocketEvent);
27+
ws.send(data);
28+
ws.close();
29+
}
30+
}
31+
}
32+
33+
export default registerWidgetPackage;

‎script/scanWidgetPackage.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import fs from "fs";
2+
import path from "path";
3+
import scanWidgets from "./scanWidgets";
4+
5+
6+
const scanWidgetPackage = () => {
7+
const json = fs.readFileSync(path.join(process.cwd(), 'widget.json')).toString();
8+
const widgetPackage = JSON.parse(json);
9+
if (!widgetPackage["widgets"]) {
10+
widgetPackage["widgets"] = [];
11+
}
12+
scanWidgets().forEach((it) => {
13+
widgetPackage["widgets"].push(it);
14+
})
15+
return widgetPackage;
16+
}
17+
18+
19+
export default scanWidgetPackage;

‎script/scanWidgets.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import fs from "fs";
2+
import path from "path";
3+
import * as process from "process";
4+
import {exec} from 'child_process';
5+
6+
const fileExt = ".widget.ts";
7+
// import tsnode from 'ts-node';
8+
//
9+
// tsnode.register({
10+
// compilerOptions: {
11+
// "module": "commonJS",
12+
// "moduleResolution": "node",
13+
// "preserveConstEnums": true,
14+
// "strict": true,
15+
// "target": "esnext",
16+
// "esModuleInterop": true,
17+
// },
18+
// "esm": true,
19+
// "experimentalSpecifierResolution": "node",
20+
// });
21+
22+
function searchFile(currentDirPath, callback) {
23+
fs.readdirSync(currentDirPath, {withFileTypes: true}).forEach((dirent) => {
24+
const filePath = path.join(currentDirPath, dirent.name);
25+
if (dirent.isFile()) {
26+
callback(filePath, dirent);
27+
} else if (dirent.isDirectory()) {
28+
searchFile(filePath, callback);
29+
}
30+
});
31+
}
32+
33+
function scanWidgets() {
34+
const widgets = [];
35+
searchFile(path.join('./src'), async function (filePath, stat) {
36+
if (filePath.endsWith(fileExt)) {
37+
console.log(filePath);
38+
const s = 'file://' + path.join(process.cwd(), filePath);
39+
console.log(s)
40+
// exec("ts-node " + s)
41+
const widget = await import(s);
42+
console.log(widget)
43+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
44+
// @ts-ignore
45+
widgets.push(widget);
46+
}
47+
});
48+
return widgets
49+
}
50+
51+
export default scanWidgets;

‎src/main.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import '@widget-js/vue3/dist/style.css'
77
import '@widget-js/vue3/dist/mingcute_icon/font/Mingcute.css'
88
import {createPinia} from "pinia";
99
import {MotionPlugin} from '@vueuse/motion'
10+
import ElementPlus from 'element-plus'
11+
import 'element-plus/dist/index.css'
1012

11-
createApp(App).use(WidgetJsPlugin).use(MotionPlugin)
13+
createApp(App).use(ElementPlus).use(WidgetJsPlugin).use(MotionPlugin)
1214
.use(router).use(createPinia()).mount('#app')
1315

0 commit comments

Comments
 (0)