compelem 0.1.1-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/decorators/prop.d.ts

@@ -55,3 +55,11 @@ export type PropOption = {
  */
 export declare function prop(options: PropOption): (target: any, propertyKey: any) => void;
 export declare function prop(target: any, propertyKey: any): void;
+/**
+ * 同@prop装饰器，但可用于构造器中调用
+ * @param ctor 类构造函数
+ * @param propertyKey prop名称
+ * @param options
+ */
+export declare function makeProp(ctor: Function, propertyKey: string, options?: PropOption): void;
+export declare function _getObservedAttrs(ctor: Function): Set<string>;

package/decorators/state.d.ts

@@ -17,3 +17,10 @@ export type StateOption = {
  */
 export declare function state(target: any, stateKey: any): void;
 export declare function state(options: StateOption): (target: any, stateKey: any) => void;
+/**
+ * 同@state装饰器，但可用于构造器中调用
+ * @param ctor 类构造函数
+ * @param stateKey state 名称
+ * @param options
+ */
+export declare function makeState(ctor: Function, stateKey: string, options?: StateOption): void;

package/index.js

@@ -1,10 +1,10 @@
 /**
-   * compelem v0.1.1-beta.1730562219
+   * 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, 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, kebabCase, closest, bind as bind$1, trim, omitBy, camelCase, isNil, some, isNull, fval, test, cloneDeep, 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;
@@ -127,6 +131,71 @@ function decorator(decoClass) {
     };
 }
 
+//每个类需要监控的属性
+const ObservedAttrsMap = new WeakMap;
+function prop(options) {
+    if (arguments.length === 1) {
+        return (target, propertyKey, descriptor) => {
+            options.required = options.required || false;
+            options.attribute = options.attribute === false ? false : true;
+            defineProp(target, propertyKey, options, descriptor);
+        };
+    }
+    let target = arguments[0], propertyKey = arguments[1], descriptor = arguments[2];
+    defineProp(target, propertyKey, { type: undefined, required: false, attribute: true }, descriptor);
+}
+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')) {
+        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)
+            options.getter = descriptor.get;
+        if (descriptor.set)
+            options.setter = descriptor.set;
+    }
+    if (options.attribute) {
+        let kbb = kebabCase(propertyKey);
+        attrSet?.add(kbb);
+    }
+    target.constructor.__deco_props[propertyKey] = options;
+}
+/**
+ * 同@prop装饰器，但可用于构造器中调用
+ * @param ctor 类构造函数
+ * @param propertyKey prop名称
+ * @param options
+ */
+function makeProp(ctor, propertyKey, options) {
+    if (options) {
+        options.required = options.required || false;
+        options.attribute = options.attribute === false ? false : true;
+    }
+    defineProp(ctor.prototype, propertyKey, options || { type: undefined, required: false, attribute: true });
+}
+//内部接口
+const emptySet = new Set;
+function _getObservedAttrs(ctor) {
+    return ObservedAttrsMap.get(ctor) ?? emptySet;
+}
+
 /**
  * 用于提供全局state状态管理
  * @author holyhigh2
@@ -223,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) {
@@ -820,7 +889,6 @@ class CompElem extends RenderContext(HTMLElement) {
     #slotHooks = {};
     #slotNodes = {};
     #mounted = false;
-    #observedAttrs = new Set();
     #instanceCss = new CSSStyleSheet();
     /**
      * 是否自动插入插槽，如果需要控制插槽类型时，可以设置为false
@@ -888,15 +956,6 @@ class CompElem extends RenderContext(HTMLElement) {
             });
             set(this.constructor, '_component_style_attached', styleSheets);
         }
-        //observAttrs
-        let propDefs = get(this.constructor, "__deco_props");
-        each(propDefs, (def, key) => {
-            let propDef = propDefs[key];
-            if (propDef.attribute) {
-                let kbb = kebabCase(key);
-                this.#observedAttrs.add(kbb);
-            }
-        });
         /////////////////////////////////////////////////// shadow
         this.#shadow = this.attachShadow({
             mode: "open",
@@ -1070,6 +1129,12 @@ class CompElem extends RenderContext(HTMLElement) {
      * props初始化完成回调
      */
     propsReady() { }
+    /**
+     * 每次更新时调用
+     */
+    render() {
+        throw Error(`[CompElem <${this.tagName}>] Missing render()`);
+    }
     /**
      * dom渲染完毕后调用，该回调内可以query注解初始化完成
      */
@@ -1193,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';
             }
@@ -1618,7 +1683,8 @@ class CompElem extends RenderContext(HTMLElement) {
     #attrChanged(name, oldValue, newValue) {
         if (!this.isMounted)
             return;
-        if (this.#observedAttrs.has(name)) {
+        let observedAttrs = _getObservedAttrs(this.constructor);
+        if (observedAttrs.has(name)) {
             if (isNull(newValue)) {
                 let propDefs = get(this.constructor, "__deco_props");
                 //使用默认值
@@ -2389,33 +2455,6 @@ function event(eventName, options) {
     };
 }
 
-function prop(options) {
-    if (arguments.length === 1) {
-        return (target, propertyKey, descriptor) => {
-            options.required = options.required || false;
-            options.attribute = options.attribute === false ? false : true;
-            defineProp(target, propertyKey, options, descriptor);
-        };
-    }
-    let target = arguments[0], propertyKey = arguments[1], descriptor = arguments[2];
-    defineProp(target, propertyKey, { type: undefined, required: false, attribute: true }, descriptor);
-}
-function defineProp(target, propertyKey, options, descriptor) {
-    if (!/[a-z]/.test(propertyKey[0])) {
-        showError(`Prop '${propertyKey}' must be in CamelCase`);
-    }
-    if (!has(target.constructor, '__deco_props')) {
-        target.constructor.__deco_props = isEmpty(target.constructor.__deco_props) ? {} : cloneDeep(target.constructor.__deco_props);
-    }
-    if (descriptor) {
-        if (descriptor.get)
-            options.getter = descriptor.get;
-        if (descriptor.set)
-            options.setter = descriptor.set;
-    }
-    target.constructor.__deco_props[propertyKey] = options;
-}
-
 /**
  * 缓存策略
  */
@@ -2488,10 +2527,24 @@ 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;
 }
+/**
+ * 同@state装饰器，但可用于构造器中调用
+ * @param ctor 类构造函数
+ * @param stateKey state 名称
+ * @param options
+ */
+function makeState(ctor, stateKey, options) {
+    defineState(ctor.prototype, stateKey, options || { prop: "" });
+}
 
 /**
  * class用注解，用于自动注册自定义组件
@@ -3116,4 +3169,4 @@ class When extends Directive {
 }
 const when = directive(When);
 
-export { CompElem, Decorator, DecoratorType, DecoratorWrapper, DecoratorsKey, Directive, DirectiveUpdateTag, DirectiveWrapper, EnterPoint, EnterPointType, ExpPos, GetKeyFnName, ModelTriggerType, QueryCache, Template, bind, buildHTML, classes, computed, createRef, decorator, directive, event, forEach, html, ifElse, ifTrue, model, prop, query, queryAll, show, slot, state, styles, sync, tag, watch, when };
+export { CompElem, Decorator, DecoratorType, DecoratorWrapper, DecoratorsKey, Directive, DirectiveUpdateTag, DirectiveWrapper, EnterPoint, EnterPointType, ExpPos, GetKeyFnName, ModelTriggerType, QueryCache, Template, _getObservedAttrs, bind, buildHTML, classes, computed, createRef, decorator, directive, event, forEach, html, ifElse, ifTrue, makeProp, makeState, model, prop, query, queryAll, show, slot, state, styles, sync, tag, watch, when };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compelem",
-  "version": "0.1.1-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;