compelem 0.2.0-beta → 0.2.1-beta

package/CompElem.d.ts

@@ -26,7 +26,7 @@ declare const CompElem_base: {
  *
  * @author holyhigh2
  */
-export declare abstract class CompElem extends CompElem_base implements IComponent {
+export declare class CompElem extends CompElem_base implements IComponent {
     #private;
     static __l_globalRule: HTMLStyleElement;
     __events: Record<string, Array<Node | ((e: Event) => void)>[]>;
@@ -66,7 +66,7 @@ export declare abstract class CompElem extends CompElem_base implements ICompone
     /**
      * 每次更新时调用
      */
-    abstract render(): Template;
+    render(): Template;
     /**
      * dom渲染完毕后调用，该回调内可以query注解初始化完成
      */

package/index.js

@@ -1,10 +1,10 @@
 /**
-   * compelem v0.2.0-beta.1731509434
+   * compelem v0.2.1-beta.1731600715
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * https://github.com/holyhigh2/compelem
    */
-  import { toPath, isObject, isDefined, get, isUndefined, isEmpty, has, concat, set, cloneDeep, kebabCase, last, isEqual, startsWith, includes, clone, isFunction, isElement, isArray, initial, find, debounce, throttle, once, remove, map, size, isBlank, join, split, replace, compact, toArray, assign, first, each, isString, closest, bind as bind$1, trim, omitBy, camelCase, isNil, some, isNull, fval, test, merge, omit, flatMap, groupBy, reject, filter, slice, head, trimStart, trimEnd, replaceAll, snakeCase, toString, findIndex, call } from 'myfx';
+  import { toPath, isObject, isDefined, get, isUndefined, isEmpty, has, concat, set, merge, cloneDeep, each, kebabCase, last, isEqual, startsWith, includes, clone, isFunction, isElement, isArray, initial, find, debounce, throttle, once, remove, map, size, isBlank, join, split, replace, compact, toArray, assign, first, isString, closest, bind as bind$1, trim, omitBy, camelCase, isNil, some, isNull, fval, test, omit, flatMap, groupBy, reject, filter, slice, head, trimStart, trimEnd, replaceAll, snakeCase, toString, findIndex, call } from 'myfx';
 
 function showError(msg) {
     console.error(`[CompElem]`, msg);
@@ -16,9 +16,13 @@ function showWarn(...args) {
     console.warn(`[CompElem]`, ...args);
 }
 //为依赖收集提供标准地址
-function toUpdatePath(varPath) {
+function _toUpdatePath(varPath) {
     return toPath(varPath).join("-");
 }
+//获取父类构造
+function _getSuper(cls) {
+    return Object.getPrototypeOf(cls);
+}
 
 //装饰器类型
 var DecoratorType;
@@ -144,8 +148,22 @@ function defineProp(target, propertyKey, options, descriptor) {
     if (!/[a-z]/.test(propertyKey[0])) {
         showError(`Prop '${propertyKey}' must be in CamelCase`);
     }
+    let attrSet;
     if (!has(target.constructor, '__deco_props')) {
-        target.constructor.__deco_props = isEmpty(target.constructor.__deco_props) ? {} : cloneDeep(target.constructor.__deco_props);
+        const mixinProps = {};
+        let parentCtor = target.constructor;
+        while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
+            merge(mixinProps, parentCtor.__deco_props ? cloneDeep(parentCtor.__deco_props) : {});
+        }
+        target.constructor.__deco_props = mixinProps;
+        attrSet = new Set();
+        each(mixinProps, (v, k) => {
+            if (v.attribute) {
+                let kbb = kebabCase(k);
+                attrSet?.add(kbb);
+            }
+        });
+        ObservedAttrsMap.set(target.constructor, attrSet);
     }
     if (descriptor) {
         if (descriptor.get)
@@ -154,11 +172,6 @@ function defineProp(target, propertyKey, options, descriptor) {
             options.setter = descriptor.set;
     }
     if (options.attribute) {
-        let attrSet = ObservedAttrsMap.get(target.constructor);
-        if (!attrSet) {
-            attrSet = new Set();
-            ObservedAttrsMap.set(target.constructor, attrSet);
-        }
         let kbb = kebabCase(propertyKey);
         attrSet?.add(kbb);
     }
@@ -279,7 +292,7 @@ function reactive(obj, context) {
                 let subChain = concat(chain, [prop]);
                 let subChainStr = subChain.join('-');
                 if (Collector.__renderCollecting) {
-                    Collector.collect(toUpdatePath(subChain));
+                    Collector.collect(_toUpdatePath(subChain));
                     Collector.setDirectiveQ(subChain);
                 }
                 else if (Collector.__computeCollecting) {
@@ -1116,6 +1129,12 @@ class CompElem extends RenderContext(HTMLElement) {
      * props初始化完成回调
      */
     propsReady() { }
+    /**
+     * 每次更新时调用
+     */
+    render() {
+        throw Error(`[CompElem <${this.tagName}>] Missing render()`);
+    }
     /**
      * dom渲染完毕后调用，该回调内可以query注解初始化完成
      */
@@ -1239,7 +1258,7 @@ class CompElem extends RenderContext(HTMLElement) {
         each(chain, (seg) => {
             varPath.push(seg);
             let v = get(this, varPath);
-            let pathStr = toUpdatePath(varPath);
+            let pathStr = _toUpdatePath(varPath);
             if (pathStr === "#slots") {
                 pathStr = 'slots';
             }
@@ -2508,7 +2527,12 @@ function state(options) {
 }
 function defineState(target, stateKey, options) {
     if (!has(target.constructor, "__deco_states")) {
-        target.constructor.__deco_states = isEmpty(target.constructor.__deco_states) ? {} : cloneDeep(target.constructor.__deco_states);
+        const mixinStates = {};
+        let parentCtor = target.constructor;
+        while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
+            merge(mixinStates, parentCtor.__deco_states ? cloneDeep(parentCtor.__deco_states) : {});
+        }
+        target.constructor.__deco_states = mixinStates;
     }
     target.constructor.__deco_states[stateKey] = options;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compelem",
-  "version": "0.2.0-beta",
+  "version": "0.2.1-beta",
   "description": "A modern, reactive, fast, lightweight and flexible lib for building web components",
   "main": "index.js",
   "module": "index.js",

package/utils.d.ts

@@ -1,5 +1,7 @@
+import { CompElem } from "./CompElem";
 export declare function showError(msg: string): void;
 export declare function showTagError(tagName: string, msg: string): void;
 export declare function showWarn(...args: unknown[]): void;
 export declare function showTagWarn(tagName: string, msg: string): void;
-export declare function toUpdatePath(varPath: string[]): string;
+export declare function _toUpdatePath(varPath: string[]): string;
+export declare function _getSuper(cls: CompElem): any;