@darkchest/wck 0.0.16 → 0.0.17

package/README.md

@@ -30,6 +30,7 @@
 
   - ✅ 支持props属性(注意vue中允许使用大驼峰和小驼峰定义属性, 但是web-component组件属性只允许小写, 所以vue中定义的属性在编译成web-component组件时时会转成小写和中划线连字符形式的属性并进行映射)
   - ✅ 支持$el, $parent, $children, $root属性
+  - ✅ 支持组件内querySelector(selector)查询组件内dom元素(因为web组件内的dom都隔离在shadowDom中)
   - ✅ 支持$emit事件
   - ✅ 支持methods方法
   - ✅ 支持compputed属性
@@ -37,6 +38,7 @@
   - ✅ 支持slot匿名和具名插槽
   - ✅ 支持mounted/onMounted, destroyed/unmounted/onUnmounted生命周期
   - ✅ 支持scss样式
+  - [] 支持script setup语法(规划中...)
 
 ### 关于props大小写问题
   由于vue中定义props是允许大小写字母的.而web-component组件的attributes只允许小写字母(包含中划线), 所以当我们在vue组件中定义一个带有大写字母的属性时(例如appTitle), 在@darkchest/wck插件将它转成web-component组件后, 插件会自动在web-component组件中声明apptitle, app-title两种形式(纯小写形式和小写中划线形式)的属性来映射appTitle这个vue组件属性, 所以当我们使用web-component组件时, 可以直接在html上使用全小写的属性名来设置组件的默认属性值: 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darkchest/wck",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "@darkchest/wck是一个通过将 Vue 单文件组件 (SFC) 转换为通用的web-component组件的解决方案。",
   "private": false,
   "main": "src/index.js",

package/src/compiler-template.js

@@ -55,6 +55,9 @@ export default class extends HTMLElement {
       get $root(){
         return that.$root;
       },
+      querySelector(selector){
+        return that.querySelector(selector);
+      },
       $set(obj, key, value){
         obj[key] = value;
       },
@@ -147,6 +150,10 @@ export default class extends HTMLElement {
     return root;
   }
 
+  querySelector(selector){
+    return this.shadowRoot.querySelector(selector);
+  }
+
   _typeChcker(val, type){
     // todo: 类型检查
     return val;

package/src/compilers/compileScriptDefault.js

@@ -92,7 +92,7 @@ export const compileExportDefault = (ast) => {
       if(t.isArrayExpression(valueNode)){
         return {
           name,
-          type: valueNode.elements.map(item => t.isIdentifier(item) ? "${item.name}" : null).filter(item => !!item),
+          type: valueNode.elements.map(item => t.isIdentifier(item) ? `"${item.name}"` : null).filter(item => !!item),
           default: null,
         }
       }
@@ -144,21 +144,26 @@ export const compileExportDefault = (ast) => {
               case 'props':
                 if (t.isObjectProperty(propNode)){
                   const toLowerCase = (str) => str.toLowerCase();
-                  const toSnakeCase = (str) => str.replace(/([A-Z])/g, '-$1').replace(/^[-_]*/i, '').toLowerCase();
+                  const toSnakeCase = (str) => str.replace(/([A-Z])/g, '-$1').toLowerCase();
                   scriptData.attributes = propNode.value.properties?.map?.(item => `"${toLowerCase(item.key.name)}"`).concat(propNode.value.properties?.map?.(item => `"${toSnakeCase(item.key.name)}"`));
                   propNode.value.properties?.forEach?.(node => {
                     const ret = getNodePropData(node);
                     if(ret){
-                      const type = `[${ret.type.join(', ')}]`
-                      scriptData.types.push(`"${ret.name}": { type: ${type}, attr: "${ret.name}" }`);
-                      scriptData.types.push(`"${toLowerCase(ret.name)}": { type: ${type}, attr: "${ret.name}" }`);
-                      scriptData.types.push(`"${toSnakeCase(ret.name)}": { type: ${type}, attr: "${ret.name}" }`);
-                      if(ret.type?.indexOf?.('Object') >= 0 || ret.type?.indexOf?.('Array') >= 0 || ret.type?.indexOf?.('Function') >= 0){
+                      const type = `${ret.type.join(', ')}`
+                      scriptData.types.push(`"${ret.name}": { type: [${type}], attr: "${ret.name}" }`);
+                      if(toLowerCase(ret.name) != ret.name){
+                        scriptData.types.push(`"${toLowerCase(ret.name)}": { type: [${type}], attr: "${ret.name}" }`);
+                      }
+                      if(toSnakeCase(ret.name) != ret.name){
+                        scriptData.types.push(`"${toSnakeCase(ret.name)}": { type: [${type}], attr: "${ret.name}" }`);
+                      }
+                      if(type?.indexOf?.('Object') >= 0 || type?.indexOf?.('Array') >= 0 || type?.indexOf?.('Function') >= 0){
                         // 只要类型中存在复合类型, 则需要通过initializeAttribute函数去赋值.
                         scriptData.config.push(`${ret.name}: null`);
                         if(ret?.default?.indexOf?.('function(){') === 0){
                           // 如果默认值类型是函数, 则放在initializeAttribute中执行.
                           scriptData.initializeAttribute.push(`this.setAttribute("${ret.name}", (${ret.default})());`);
+                          scriptData.initializeAttribute.push(`this.${ret.name} = (${ret.default})();`);
                         }
                       }else{
                         scriptData.config.push(`${ret.name}: ${ret.default}`);
@@ -236,7 +241,7 @@ export const compileExportDefault = (ast) => {
               break;
               case 'watch':
                 if(t.isObjectProperty(propNode)){
-                  const toSnakeCase = (str) => str.replace(/([A-Z])/g, '_$1').replace(/[.\s]+/g, '_').replace(/^[-_]*/i, '').toLowerCase();
+                  const toSnakeCase = (str) => str.replace(/([A-Z])/g, '_$1').replace(/[.\s]+/g, '_').toLowerCase();
                   propNode.value.properties?.map(node => {
                     const name = t.isStringLiteral(node.key) ? node.key.value : node.key.name;
                     const snaked = toSnakeCase(name);

package/src/compilers/compileStyles.js

@@ -10,7 +10,7 @@ export const compileStyles = (styles) => {
     let content = s.content;
     try {
         if (s.lang === 'scss') {
-            const result = sass.compileString(content, { charset: false });
+            const result = sass.compileString(content, { charset: false, style: "compressed" });
             content = result.css.toString().replace(/\:+\s*root\s*\{/gi, ':host {');
         }
         if (s.scoped) {