@darkchest/wck 0.0.1

package/src/compiler-helper.js

@@ -0,0 +1,34 @@
+import parser from '@babel/parser';
+import t from '@babel/types';
+import { Logger } from './utils/index.js';
+
+import compileStyles from './compilers/compileStyles.js'
+import compileScriptDefault from './compilers/compileScriptDefault.js'
+import compileScriptSetup from './compilers/compileScriptSetup.js'
+import compileTemplate from './compilers/compileTemplate.js'
+
+export const compileSFCStyles = (styles) => compileStyles(styles);
+
+export const compileSFCScripts = (script) => {
+  const ast = parser.parse(script?.content ?? '', { sourceType: 'module'});
+  
+  if(ast.program.body.some(node => t.isExportDefaultDeclaration(node))){
+    // 检测到顶层export default, 认为这是vue2的组件脚本风格.
+    return compileScriptDefault(ast);
+  }
+
+  return compileScriptSetup(ast);
+};
+export const compileSFCTempalte = (template) => {
+  const compiled = compileTemplate(template?.ast);
+
+  compiled?.warnings?.forEach?.(str => Logger.warn(str));
+
+  return compiled?.template ?? '';
+};
+
+export default{
+  compileSFCStyles,
+  compileSFCScripts,
+  compileSFCTempalte,
+}

package/src/compiler-template.js

@@ -0,0 +1,199 @@
+import { reactive, createApp } from './libs/petite-vue.es.js';
+import { isComp, Logger } from "./utils/index.js";
+
+export default class extends HTMLElement {
+  static observedAttributes = [/** <!-- Attributes --> */];
+  constructor() {
+    super();
+    this._isDarkchest = true;
+    this._componentId = Math.random().toString(36).substring(2);
+    this._types = {/** <!-- Types --> */};
+    this._watchers = {};
+    this._listeners = [];
+    this._el = null;
+    this._parent = null;
+    this._children = [];
+    this._eventPrefix = '@';
+
+    this.attachShadow({ mode: "open" });
+
+    const style = document.createElement("style");
+    style.textContent = `
+      *, *::before, *::after {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+      }
+      /** <!-- Styles --> */
+    `;
+    
+    const container = document.createElement("div");
+    container.innerHTML = `<div /** <!-- Watcher --> */>/** <!-- Template --> */</div>`;
+    this._el = container.firstElementChild;
+    
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(this._el);
+
+    this.app = null;
+  }
+
+  connectedCallback() {
+    const that = this;
+    this.app = reactive({
+      /** <!-- Config --> */
+      get $el(){
+        return that.$el;
+      },
+      get $parent(){
+        return that.$parent;
+      },
+
+      get $children(){
+        return that.$children;
+      },
+
+      get $root(){
+        return that.$root;
+      },
+      $emit(name, data){
+        that.dispatchEvent(new CustomEvent(that._eventPrefix + name, { detail: data }));
+      },
+    });
+    this.$app = createApp(this.app).mount(this._el);
+    
+    let parent = this.parentElement;
+    while(parent && !isComp(parent)){
+      parent = parent.parentElement;
+    }
+    if(parent){
+      this._parent = parent;
+      parent._children.push(this);
+    }
+
+    this.dispatchEvent(new CustomEvent('mounted'));
+    this.app?.$lifecycle_mounted?.();
+
+    /** <!-- initializeAttribute --> */
+
+    /** <!-- initializeData --> */
+  }
+
+  attributeChangedCallback(name, oldValue, newValue){
+    if(!this.app){
+      var that = this;
+      setTimeout(function(){
+        that.attributeChangedCallback(name, oldValue, newValue);
+      }, 10);
+      return;
+    }
+    if((this?.constructor?.observedAttributes ?? []).indexOf?.(name) >= 0){
+      const prop = this._types[name];
+      if(prop){
+        this.app[prop.attr] = this._typeChcker(newValue, prop.type);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    if(this._children){
+      this._children.forEach(child => child.disconnectedCallback());
+      this._children = [];
+    }
+    if(this._parent){
+      this._parent._children = this._parent._children.filter(child => child !== this);
+      this._parent = null;
+    }
+
+    Object.keys(this._listeners).forEach(name => this.off(name));
+    this._listeners = {};
+
+    this.dispatchEvent(new CustomEvent('unmounted'));
+    this.app?.$lifecycle_unmounted?.();
+    this.app = null;
+    this.$app.unmount();
+    this.$app = null;
+    
+    this._el = null;
+  }
+  
+  get __isDarkchest(){
+    return this._isDarkchest;
+  }
+
+  get __componentId(){
+    return this._componentId;
+  }
+
+  get $el(){
+    return this._el || null;
+  }
+
+  get $parent(){
+    return this._parent || null;
+  }
+
+  get $children(){
+    return this._children || [];
+  }
+
+  get $root(){
+    let root = this;
+    while(root.$parent && isComp(root.$parent)){
+      root = root.$parent;
+    }
+    return root;
+  }
+
+  _typeChcker(val, type){
+    console.log('_typeChcker: ', type)
+    return val;
+  }
+
+  prop(name, value){
+    if((this?.constructor?.observedAttributes ?? []).indexOf?.(name) >= 0){
+      if(value === undefined) return this.getAttribute(name);
+      this.setAttribute(name, value);
+    }else{
+      Logger.info(`未定义的prop [${name}]`);
+    }
+  }
+
+  /** <!-- Props --> */
+
+  on(name, handler, options){
+    const eventName = this._eventPrefix + name;
+    this._listeners[eventName] = handler;
+    this.addEventListener(eventName, handler, options);
+    return this;
+  }
+
+  off(name, handler){
+    if(name){
+      const eventName = this._eventPrefix + name;
+      if(handler){
+        // 尝试删除特定的事件监听
+        this.removeEventListener(eventName, handler);
+        delete this._listeners[eventName];
+      }else{
+        const eventHandler = this._listeners[eventName];
+        if(eventHandler){
+          this.removeEventListener(eventName, eventHandler);
+          delete this._listeners[eventName];
+        }
+      }
+    }
+    return this;
+  }
+
+  once(name, handler, options){
+    const eventName = this._eventPrefix + name;
+    const eventHandler = (...args) => {
+      this.removeEventListener(eventName, eventHandler);
+      handler(...args);
+    };
+    this.addEventListener(eventName, eventHandler, options);
+    return this;
+  }
+
+  /** <!-- Methods --> */
+}

package/src/compilers/compileScriptDefault.js

@@ -0,0 +1,333 @@
+import parser from '@babel/parser';
+import traverse from '@babel/traverse';
+import { generate } from "@babel/generator";
+import t from '@babel/types';
+import { LogSig } from '../utils/index.js';
+
+export const compileExportDefault = (ast) => {
+  const scriptData = {
+    config: [], // petite使用的配置项
+    attributes: [], // web组件暴露给html标签的属性名称列表
+    types: [], // web组件暴露给html标签的属性类型索引
+    props: [], // web组件属性名称列表, 用于间接设置petite的attrivutes属性
+    watcher: [], // 用于模拟watch效果的变量收集
+    methods: [],  // web组件方法名称, 用于间接调用petite方法.
+    initializeAttribute: [], // 初始化this.app.props的属性
+    initializeData: [], // 初始化this.app.data的数据
+  };
+  let exportedDeclaration = null;
+
+  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 = [];
+    let bodyNode = { body: [] };
+    if(t.isObjectProperty(node) && t.isArrowFunctionExpression(node.value)){
+      async = node.value.async;
+      if(t.isBlockStatement(node.value.body)){
+        bodyNode = node.value.body;
+      }else{
+        const ast = parser.parse(`function anonymous(){
+          return ${generate(node.value.body)?.code};
+        }`, { sourceType: 'module' });
+        bodyNode = ast.program.body[0].body;
+      }
+      paramsNode = node.value.params;
+    }
+    if(t.isObjectProperty(node) && t.isFunctionExpression(node.value)){
+      async = node.value.async;
+      if(t.isBlockStatement(node.value.body)){
+        bodyNode = node.value.body;
+        paramsNode = node.value.params;
+      }
+    }
+    if(t.isObjectMethod(node)){
+      async = node.async;
+      if(t.isBlockStatement(node.body)){
+        bodyNode = node.body;
+        paramsNode = node.params;
+      }
+    }
+    return {
+      async,
+      name: node.key.name,
+      params: paramsNode?.map?.(node => generate(node).code)?.join?.(', ') ?? '',
+      body: bodyNode?.body?.map?.(node => generate(node).code)?.join?.('\n') ?? '',
+    }
+  }
+
+  const getNodePropData = (node) => {
+    const name = node.key.name;
+    if(t.isObjectProperty(node) || t.isObjectMethod(node)){
+      const valueNode = node.value;
+      if(isSimpleType(valueNode) && t.isIdentifier(valueNode)){
+        return {
+          name,
+          type: [`"${valueNode.name}"`],
+          default: null,
+        }
+      }
+      if(t.isStringLiteral(valueNode)){
+        return {
+          name,
+          type: ["String"],
+          default: generate(valueNode).code,
+        }
+      }
+      if(t.isNumericLiteral(valueNode)){
+        return {
+          name,
+          type: ["Number"],
+          default: generate(valueNode).code,
+        }
+      }
+      if(t.isBooleanLiteral(valueNode)){
+        return {
+          name,
+          type: ["Boolean"],
+          default: !!(valueNode.value),
+        }
+      }
+      if(t.isArrayExpression(valueNode)){
+        return {
+          name,
+          type: valueNode.elements.map(item => t.isIdentifier(item) ? "${item.name}" : null).filter(item => !!item),
+          default: null,
+        }
+      }
+      
+      if(t.isArrowFunctionExpression(valueNode) || t.isFunctionExpression(valueNode) || t.isObjectMethod(node)){
+        return{
+          name,
+          type: ["Object"],
+          default: `function(){
+            ${getFunctionCode(node).body}
+          }`,
+        }
+      }
+    }
+    if(t.isObjectProperty(node) && t.isObjectExpression(node.value)){
+      const typeNode = node.value.properties.find(item => item.key.name === 'type');
+      const defaultNode = node.value.properties.find(item => item.key.name === 'default');
+      const defaultValue = getNodePropData(defaultNode);
+
+      let type = [].concat(defaultValue?.type);
+      if(typeNode){
+        if(t.isArrayExpression(typeNode.value)){
+          type = typeNode.value.elements.map(item => `"${generate?.(item)?.code}"`);
+        }
+        if(t.isIdentifier(typeNode.value)){
+          type = [`"${typeNode.value.name}"`];
+        }
+      }
+      return {
+        name,
+        type,
+        default: defaultValue?.default ?? null,
+      }
+    }
+    return { name, type: ["Object"], default: null };
+  }
+
+  traverse.default(ast, {
+    ExportDefaultDeclaration(path) {
+      // 存储 declaration，用于后续执行
+      exportedDeclaration = path.node.declaration;
+      
+      // 映射 Options 属性到 AST 节点
+      if (t.isObjectExpression(exportedDeclaration)) {
+        exportedDeclaration.properties.forEach(propNode => {
+          if (t.isObjectProperty(propNode) || t.isObjectMethod(propNode)) {
+            const name = propNode.key.name;
+            switch(name){
+              case 'props':
+                if (t.isObjectProperty(propNode)){
+                  const toLowerCase = (str) => str.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){
+                        // 只要类型中存在复合类型, 则需要通过initializeAttribute函数去赋值.
+                        scriptData.config.push(`${ret.name}: null`);
+                        if(ret?.default?.indexOf?.('function(){') === 0){
+                          // 如果默认值类型是函数, 则放在initializeAttribute中执行.
+                          scriptData.initializeAttribute.push(`this.setAttribute("${ret.name}", (${ret.default})());`);
+                        }
+                      }else{
+                        scriptData.config.push(`${ret.name}: ${ret.default}`);
+                      }
+                      scriptData.props.push(`
+                        get ${ret.name}() { return this?.app?.${ret.name}; }
+                        set ${ret.name}(value) {
+                          this.app.${ret.name} = this?._typeChcker?.(value, ${ret?.type ?? []});
+                        }
+                      `);
+                    }
+                  });
+                }
+              break;
+              case 'data':
+                if(t.isObjectProperty(propNode) && t.isObjectExpression(propNode.value)){
+                  propNode.value.properties?.forEach?.(node => {
+                    const name = node.key.name;
+                    scriptData.config.push(`${name}: ${generate(node.value)?.code ?? null}`);
+                  });
+                }else{
+                  const ast = parser.parse(`function anonymous(){
+                    ${getFunctionCode(propNode).body};
+                  }`, { sourceType: 'module' });
+                  const returnNode = ast.program.body[0].body.body.find(item => t.isReturnStatement(item));
+                  returnNode.argument.properties.forEach(node => {
+                    const name = node.key.name;
+                    scriptData.config.push(`${name}: ${generate(node.value)?.code ?? null}`);
+                  });
+                  scriptData.initializeData.push(`(function(){
+                    const data = (function anonymous(){
+                      ${getFunctionCode(propNode).body};
+                    })();
+                    Object.keys(data).forEach(name => {
+                      if((that?.constructor?.observedAttributes ?? []).indexOf?.(name) >= 0){
+                        Logger.info('当前属性 '+ name +' 已定义为 prop 属性, 无法初始化.')
+                      }else{
+                        that.app[name] = data[name];
+                      }
+                    });
+                  })();`);
+                }
+              break;
+              case 'methods':
+                if(t.isObjectProperty(propNode)){
+                  propNode.value.properties?.forEach(node => {
+                    const { name, async, params, body } = getFunctionCode(node);
+                    scriptData.config.push(`${async ? 'async':''} ${name}(${params}){
+                      ${body}
+                    }`);
+                    scriptData.methods.push(`${async ? 'async':''} ${name}(${params}){
+                      return this.app["${name}"](${params});
+                    }`)
+                  })
+                }
+              break;
+              case 'computed':
+                if(t.isObjectProperty(propNode)){
+                  propNode.value.properties?.map(node => {
+                    if(t.isObjectMethod(node)){
+                      scriptData.config.push(`get ${node.key.name}(){
+                          ${getFunctionCode(node).body}
+                      }`);
+                    }
+                    if(t.isObjectProperty(node)){
+                      const getNode = node.value.properties.find(item => item.key.name === 'get');
+                      if(getNode){
+                        scriptData.config.push(`get ${node.key.name}(){
+                          ${getFunctionCode(getNode).body}
+                        }`);
+                      }
+                    }
+                  })
+                }
+              break;
+              case 'watch':
+                if(t.isObjectProperty(propNode)){
+                  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);
+                    scriptData.watcher.push(`:data-watch-${name}="$${snaked}"`);
+                    if(t.isObjectMethod(node)){
+                      const code = getFunctionCode(node);
+                      const params = !!code.params?.trim?.() ? code.params : 'newVal, oldVal';
+                      scriptData.config.push(`$$${snaked}_handler(${params}){
+                          that._watchers['$$${snaked}'] = ${params}?.split?.(',')?.shift?.()?.trim?.();
+                          ${code.body}
+                        },
+                        get $$${snaked}(){
+                          const watchedVal = this.${name};
+                          if(that._watchers['$$${snaked}'] !== watchedVal){
+                            this.$$${snaked}_handler(watchedVal, that._watchers['$$${snaked}']);
+                          }
+                          return watchedVal;
+                        }`);
+                    }
+                    if(t.isObjectProperty(node)){
+                      const handlerNode = node.value.properties.find(item => item.key.name === 'handler');
+                      const immediateNode = node.value.properties.find(item => item.key.name === 'immediate');
+                      if(handlerNode){
+                        const immediate = immediateNode?.value?.value === true;
+                        const code = getFunctionCode(handlerNode);
+                        const params = !!code.params?.trim?.() ? code.params : 'newVal, oldVal';
+                        scriptData.config.push(`$$${snaked}_handler(${params}){
+                            that._watchers['$$${snaked}'] = ${params}?.split?.(',')?.shift?.()?.trim?.();
+                            ${code.body}
+                          },
+                          get $$${snaked}(){
+                            const watchedVal = this.${name};
+                            if(that._watchers['$$${snaked}'] !== watchedVal){
+                              this.$$${snaked}_handler(watchedVal, that._watchers['$$${snaked}']);
+                            }
+                            return watchedVal;
+                          }`);
+
+                        if(immediate){
+                          scriptData.initializeData.push(`this.app.$$${snaked}_handler(this.${name}, this._watchers['$$${snaked}']);`);
+                        }
+                      }
+                    }
+                  })
+                }
+              break;
+              case 'mounted':
+              case 'onMounted':
+                scriptData.config.push(`$lifecycle_mounted(){
+                  ${getFunctionCode(propNode).body}
+                }`);
+              break;
+              case 'destroyed':
+              case 'unmounted':
+              case 'onUnmounted':
+                scriptData.config.push(`$lifecycle_unmounted(){
+                  ${getFunctionCode(propNode).body}
+                }`);
+              break;
+            }
+          }
+        })
+      }
+    }
+  });
+
+  if (!exportedDeclaration) {
+    throw new Error(`${LogSig} 在组件script中没有找到 'export default {}' 模块.`);
+  }
+
+  return scriptData;
+};
+
+export default compileExportDefault;

package/src/compilers/compileScriptSetup.js

@@ -0,0 +1,5 @@
+export const compileScriptSetup = (ast) => {
+  // todo: 支持vue3的script setup语法转换.
+}
+
+export default compileScriptSetup;

package/src/compilers/compileStyles.js

@@ -0,0 +1,29 @@
+import * as sass from 'sass';
+import { Logger } from '../utils/index.js';
+
+export const compileStyles = (styles) => {
+  if (!styles || styles.length === 0) {
+    return '';
+  }
+
+  const compiledCss = styles?.map?.(s => {
+    let content = s.content;
+    try {
+        if (s.lang === 'scss') {
+            const result = sass.compileString(content, { charset: false });
+            content = result.css.toString().replace(/\:+\s*root\s*\{/gi, ':host {');
+        }
+        if (s.scoped) {
+            // Logger.warn(`忽略scoped标识.`);
+        }
+        return content;
+    } catch (e) {
+        Logger.error(`解析CSS(${s.lang})失败:`, e);
+        return `/* Compilation Error */`;
+    }
+  }).join('\n');
+
+  return compiledCss;
+};
+
+export default compileStyles;

package/src/compilers/compileTemplate.js

@@ -0,0 +1,62 @@
+export const compileTemplate = (ast) => {
+  const warnings = new Set();
+  
+  // 完整的 Vue AST 节点类型（从 @vue/compiler-core 源码）
+  const NodeTypes = {
+    ROOT: 0,                   // 根节点
+    ELEMENT: 1,                // 元素节点
+    TEXT: 2,                   // 文本节点
+    COMMENT: 3,                // 注释节点
+    SIMPLE_EXPRESSION: 4,      // 简单表达式
+    INTERPOLATION: 5,          // 插值表达式 {{ }}
+    ATTRIBUTE: 6,              // 普通属性
+    DIRECTIVE: 7,              // 指令
+    // containers
+    COMPOUND_EXPRESSION: 8,    // 复合表达式
+    IF: 9,                     // v-if 节点
+    IF_BRANCH: 10,             // v-if 分支
+    FOR: 11,                   // v-for 节点
+    TEXT_CALL: 12,             // 文本调用
+    // codegen
+    VNODE_CALL: 13,            // VNode 调用
+    JS_CALL_EXPRESSION: 14,    // JS 函数调用
+    JS_OBJECT_EXPRESSION: 15,  // JS 对象表达式
+    JS_PROPERTY: 16,           // JS 对象属性
+    JS_ARRAY_EXPRESSION: 17,   // JS 数组表达式
+    JS_FUNCTION_EXPRESSION: 18, // JS 函数表达式
+    JS_CONDITIONAL_EXPRESSION: 19, // JS 条件表达式
+    JS_CACHE_EXPRESSION: 20,   // JS 缓存表达式
+    // ssr
+    JS_BLOCK_STATEMENT: 21,    // JS 块语句
+    JS_TEMPLATE_LITERAL: 22,   // JS 模板字符串
+    JS_IF_STATEMENT: 23,       // JS if 语句
+    JS_ASSIGNMENT_EXPRESSION: 24, // JS 赋值表达式
+    JS_SEQUENCE_EXPRESSION: 25, // JS 序列表达式
+    JS_RETURN_STATEMENT: 26,   // JS return 语句
+  };
+  
+  // 执行转换
+  try {
+    let rootProps = `@vue:mounted="console.log('mounted on: ', $el)" @vue:unmounted="console.log('unmounted: ', $el)"`;
+    let html = ast.source.slice(ast.source.indexOf('<template>'), ast.source.lastIndexOf('</template>')).replace('<template>', '');
+    if(ast?.children?.length > 1 || ast?.children?.[0]?.type !== NodeTypes.ELEMENT){
+      html = `<div ${rootProps}>${html}</div>`;
+    }else{
+      const tag = ast.children?.[0]?.tag;
+      html = html.replace(`<${tag}`, `<${tag} ${rootProps}`);
+    }
+
+    return {
+      template: html.trim(),
+      warnings: Array.from(warnings)
+    };
+  } catch (error) {
+    return {
+      template: '',
+      warnings: [`转换错误: ${error.message}`],
+      error: error.message
+    };
+  }
+}
+
+export default compileTemplate;

package/src/component.js

@@ -0,0 +1,2 @@
+export * from "./petite-vue/petite-vue.es.js";
+export * from "./utils/index.js";