@darkchest/wck 0.0.1 → 0.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@darkchest/wck",
-  "version": "0.0.1",
-  "description": "@darkchest/wck是一个通过包装 Vue 单文件组件 (SFC) 并将它转换为通用的web-component组件的解决方案。",
+  "version": "0.0.2",
+  "description": "@darkchest/wck是一个通过将 Vue 单文件组件 (SFC) 转换为通用的web-component组件的解决方案。",
   "private": false,
   "main": "src/index.js",
   "type": "module",

package/readme.md

@@ -40,10 +40,11 @@
   由于vue中定义props是允许大小写字母的.而web组件只允许小写字母(包含中划线), 所以当我们在vue组件中定义一个带有大写字母的属性时(例如appTitle), 那么我们将它转成web组件后, 插件会在web组件中将appTitle声明为apptitle和app-title两种形式, 所以这俩种写法最后都有效: <todo-list apptitle="*我的清单*"></todo-list>和<todo-list app-title="*我的清单*"></todo-list>.
 
 ### 关于属性, 方法, 事件, 生命周期钩子
-  我们通过props, methods, 定义的属性和方法, 都会直接通过web组件暴露出去. 页面上可以直接操作调用并实现双向同步的逻辑.
-  如果我们需要对外透出自定义事件, 也可以在组件内通过$emit(name, data)来触发事件, 这样在页面上可以使用on/off/once方法来监听该事件.
-  所有组件都会默认触发mounted/unmounted两个生命周期事件方便监听并进行某些初始化操作.
-  可以定义onMounted/onUnmounted生命周期钩子来监听组件的初始化与销毁事件.
+  - 在vue组件中props和methods定义的属性和方法, 都会直接通过web组件暴露给页面.
+  - 在vue组件中支持(onMounted/mounted)和(onUnmounted/destroyed)生命周期钩子函数来执行初始化与销毁操作.
+  - 所有编译后的web组件都会默认触发mounted/unmounted两个生命周期事件方便页面监听并进行某些初始化操作.
+  - 所有编译后的web组件都默认增加$el, $parent, $children, $root属性.
+  - 所有编译后的web组件都默认增加$emit(name, data), on(name, handler), off(name, handler), off(name, handler)方法.
 
 ## 🛠️ 安装与配置
 
@@ -53,7 +54,7 @@
 npm install @darkchest/wck
 ```
 
-### 2. 使用示例(重要: 请参考TodoList.vue文件示例, 该文件中已包含所有核心功能)
+### 2. 使用示例(重要: 请参考TodoList.vue文件示例, 该文件中已包含所有核心功能并且开箱即用)
 ```javascript
 // vite.config.js
 import { defineConfig } from 'vite';

package/src/compiler-template.js

@@ -145,7 +145,7 @@ export default class extends HTMLElement {
   }
 
   _typeChcker(val, type){
-    console.log('_typeChcker: ', type)
+    // todo: 类型检查
     return val;
   }
 

package/src/compilers/compileScriptDefault.js

@@ -19,26 +19,6 @@ export const compileExportDefault = (ast) => {
 
   const isSimpleType = (node) => t.isIdentifier(node) && ['String', 'Number', 'Boolean'].includes(node.name);
 
-  const getFunctionAst = (node) => parser.parse('const fn = ' + generate(node)?.code, { sourceType: 'module' });
-
-  const getFunctionReturnValue = (node) => {
-    const returnStatements = [];
-    const ast = getFunctionAst(node);
-    traverse.default(ast, {
-      ReturnStatement(path) {
-        returnStatements.push(path.node.argument);
-      }
-    });
-    const returnNode = returnStatements?.[0];
-    if (returnNode && t.isArrayExpression(returnNode)) {
-      return eval(generate(returnNode)?.code);
-    }
-    if (returnNode && t.isObjectExpression(returnNode)) {
-      return eval(`(${generate(returnNode)?.code})`);
-    }
-    return undefined;
-  };
-
   const getFunctionCode = (node) => {
     let async = false;
     let paramsNode = [];