@darkchest/wck 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/readme.md +29 -14
- package/src/compiler-template.js +1 -1
- package/src/compilers/compileScriptDefault.js +0 -20
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@darkchest/wck",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "@darkchest/wck
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "@darkchest/wck是一个通过将 Vue 单文件组件 (SFC) 转换为通用的web-component组件的解决方案。",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "src/index.js",
|
|
7
7
|
"type": "module",
|
package/readme.md
CHANGED
|
@@ -40,20 +40,21 @@
|
|
|
40
40
|
由于vue中定义props是允许大小写字母的.而web组件只允许小写字母(包含中划线), 所以当我们在vue组件中定义一个带有大写字母的属性时(例如appTitle), 那么我们将它转成web组件后, 插件会在web组件中将appTitle声明为apptitle和app-title两种形式, 所以这俩种写法最后都有效: <todo-list apptitle="*我的清单*"></todo-list>和<todo-list app-title="*我的清单*"></todo-list>.
|
|
41
41
|
|
|
42
42
|
### 关于属性, 方法, 事件, 生命周期钩子
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
- 在vue组件中props和methods定义的属性和方法, 都会直接通过web组件暴露给页面.
|
|
44
|
+
- 在vue组件中支持(onMounted/mounted)和(onUnmounted/destroyed)生命周期钩子函数来执行初始化与销毁操作.
|
|
45
|
+
- 所有编译后的web组件都会默认触发mounted/unmounted两个生命周期事件方便页面监听并进行某些初始化操作.
|
|
46
|
+
- 所有编译后的web组件都默认增加$el, $parent, $children, $root属性.
|
|
47
|
+
- 所有编译后的web组件都默认增加$emit(name, data), on(name, handler), off(name, handler), off(name, handler)方法.
|
|
47
48
|
|
|
48
49
|
## 🛠️ 安装与配置
|
|
49
50
|
|
|
50
51
|
### 1. 安装依赖
|
|
51
52
|
|
|
52
53
|
```bash
|
|
53
|
-
npm install @darkchest/wck
|
|
54
|
+
npm install @darkchest/wck vite -D
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
### 2. 使用示例(重要: 请参考TodoList.vue文件示例,
|
|
57
|
+
### 2. 使用示例(重要: 请参考TodoList.vue文件示例, 该文件中已包含所有核心功能并且开箱即用)
|
|
57
58
|
```javascript
|
|
58
59
|
// vite.config.js
|
|
59
60
|
import { defineConfig } from 'vite';
|
|
@@ -71,20 +72,28 @@ export default defineConfig({
|
|
|
71
72
|
formats: ['es', 'iife', 'umd'],
|
|
72
73
|
fileName: (format, name) => `${name}.${format}.min.js`
|
|
73
74
|
},
|
|
74
|
-
},
|
|
75
|
-
resolve: {
|
|
76
|
-
alias: {
|
|
77
|
-
'@': resolve(__dirname, 'src'), // 配置别名
|
|
78
|
-
}
|
|
79
75
|
}
|
|
80
76
|
})
|
|
81
77
|
```
|
|
82
78
|
|
|
79
|
+
```json
|
|
80
|
+
// package.json
|
|
81
|
+
// 主要是增加dev/build俩个命令来启动vite开发和打包.
|
|
82
|
+
{
|
|
83
|
+
...,
|
|
84
|
+
"scripts": {
|
|
85
|
+
"dev": "vite",
|
|
86
|
+
"build": "vite build"
|
|
87
|
+
},
|
|
88
|
+
...,
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
83
92
|
```javascript
|
|
84
93
|
// src/index.js
|
|
85
|
-
import TodoList from './
|
|
94
|
+
import TodoList from './components/TodoList.vue';
|
|
86
95
|
|
|
87
|
-
|
|
96
|
+
customElements.define('todo-list', TodoList);
|
|
88
97
|
// 注意: web-component的标签名必须为中划线命名(有且至少一个中划线), 否则无法成功注册.
|
|
89
98
|
```
|
|
90
99
|
|
|
@@ -765,10 +774,16 @@ footer {
|
|
|
765
774
|
<head>
|
|
766
775
|
<meta charset="UTF-8" />
|
|
767
776
|
<title>my web components</title>
|
|
768
|
-
<script type="module" src="./dist/index.iife.min.js"></script>
|
|
769
777
|
</head>
|
|
770
778
|
<body>
|
|
771
779
|
<todo-list app-title="*待办清单*"></todo-list>
|
|
780
|
+
<script type="module">
|
|
781
|
+
import './src/index.js';
|
|
782
|
+
// 执行npm run dev时vite会启动服务并打开index.html, 我们在这个页面中导入src/index.js就能正常执行它里面的代码并注册web组件了
|
|
783
|
+
</script>
|
|
784
|
+
|
|
785
|
+
<script src="./dist//index.iife.min.js"></script>
|
|
786
|
+
<!-- 也可以执行npm run build直接编译src/index.js到dist目录, 然后在script的src属性中引入打包后的文件, 方案二选一即可 -->
|
|
772
787
|
</body>
|
|
773
788
|
</html>
|
|
774
789
|
```
|
package/src/compiler-template.js
CHANGED
|
@@ -19,26 +19,6 @@ export const compileExportDefault = (ast) => {
|
|
|
19
19
|
|
|
20
20
|
const isSimpleType = (node) => t.isIdentifier(node) && ['String', 'Number', 'Boolean'].includes(node.name);
|
|
21
21
|
|
|
22
|
-
const getFunctionAst = (node) => parser.parse('const fn = ' + generate(node)?.code, { sourceType: 'module' });
|
|
23
|
-
|
|
24
|
-
const getFunctionReturnValue = (node) => {
|
|
25
|
-
const returnStatements = [];
|
|
26
|
-
const ast = getFunctionAst(node);
|
|
27
|
-
traverse.default(ast, {
|
|
28
|
-
ReturnStatement(path) {
|
|
29
|
-
returnStatements.push(path.node.argument);
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const returnNode = returnStatements?.[0];
|
|
33
|
-
if (returnNode && t.isArrayExpression(returnNode)) {
|
|
34
|
-
return eval(generate(returnNode)?.code);
|
|
35
|
-
}
|
|
36
|
-
if (returnNode && t.isObjectExpression(returnNode)) {
|
|
37
|
-
return eval(`(${generate(returnNode)?.code})`);
|
|
38
|
-
}
|
|
39
|
-
return undefined;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
22
|
const getFunctionCode = (node) => {
|
|
43
23
|
let async = false;
|
|
44
24
|
let paramsNode = [];
|