compelem 0.1.0-beta → 0.2.0-beta

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.d.ts

@@ -1,4 +1,4 @@
-import { createRef, html, RefObject, Template } from "./render/render";
+import { buildHTML, createRef, html, RefObject, Template } from "./render/render";
 export * from "./decorator/Decorator";
 export * from "./decorator/index";
 export * from "./decorators/computed";
@@ -21,6 +21,6 @@ export * from "./directives/Slot";
 export * from "./directives/Styles";
 export * from "./directives/Sync";
 export * from "./directives/When";
-export { createRef, html, RefObject, Template };
+export { buildHTML, createRef, html, RefObject, Template };
 export * from './CompElem';
 export * from './types';

package/index.js

@@ -1,10 +1,10 @@
 /**
-   * compelem v0.1.0-beta.1730553615
+   * compelem v0.2.0-beta.1731509434
    * 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, 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';
 
 function showError(msg) {
     console.error(`[CompElem]`, msg);
@@ -127,6 +127,62 @@ 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`);
+    }
+    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;
+    }
+    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);
+    }
+    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
@@ -820,7 +876,6 @@ class CompElem extends RenderContext(HTMLElement) {
     #slotHooks = {};
     #slotNodes = {};
     #mounted = false;
-    #observedAttrs = new Set();
     #instanceCss = new CSSStyleSheet();
     /**
      * 是否自动插入插槽，如果需要控制插槽类型时，可以设置为false
@@ -888,15 +943,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",
@@ -1618,7 +1664,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 +2436,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;
-}
-
 /**
  * 缓存策略
  */
@@ -2492,6 +2512,15 @@ function defineState(target, stateKey, options) {
     }
     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 +3145,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, 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.0-beta",
+  "version": "0.2.0-beta",
   "description": "A modern, reactive, fast, lightweight and flexible lib for building web components",
   "main": "index.js",
   "module": "index.js",