@dooboostore/simple-web-component 1.0.5 → 1.0.7

package/dist/cjs/decorators/emitCustomEvent.js

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var emitCustomEvent_exports = {};
+__export(emitCustomEvent_exports, {
+  EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
+  emitCustomEvent: () => emitCustomEvent,
+  getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList
+});
+module.exports = __toCommonJS(emitCustomEvent_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol("simple-web-component:emit-custom-event");
+function emitCustomEvent(typeOrOptions) {
+  return (target, propertyKey, descriptor) => {
+    const constructor = target.constructor;
+    const options = typeof typeOrOptions === "string" ? { type: typeOrOptions } : typeOrOptions;
+    if (!options.attributeName) {
+      options.attributeName = `on${options.type}`;
+    }
+    if (options.bubbles === void 0) options.bubbles = true;
+    if (options.composed === void 0) options.composed = true;
+    let list = import_ReflectUtils.ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      import_ReflectUtils.ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+    const originalMethod = descriptor.value;
+    descriptor.value = function(...args) {
+      const detail = originalMethod.apply(this, args);
+      const event = new CustomEvent(options.type, {
+        detail,
+        bubbles: options.bubbles,
+        composed: options.composed,
+        cancelable: options.cancelable
+      });
+      this.dispatchEvent(event);
+      return detail;
+    };
+  };
+}
+const getEmitCustomEventMetadataList = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+};
+//# sourceMappingURL=emitCustomEvent.js.map

package/dist/cjs/decorators/emitCustomEvent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/emitCustomEvent.ts"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface EmitCustomEventOptions {\n  type: string;\n  attributeName?: string; // Default: on + type\n  bubbles?: boolean; // Default: true\n  composed?: boolean; // Default: true\n  cancelable?: boolean;\n}\n\nexport interface EmitCustomEventMetadata {\n  propertyKey: string | symbol;\n  options: EmitCustomEventOptions;\n}\n\nexport const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');\n\nexport function emitCustomEvent(typeOrOptions: string | EmitCustomEventOptions): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    const options: EmitCustomEventOptions = typeof typeOrOptions === 'string' ? { type: typeOrOptions } : typeOrOptions;\n\n    if (!options.attributeName) {\n      options.attributeName = `on${options.type}`;\n    }\n    if (options.bubbles === undefined) options.bubbles = true;\n    if (options.composed === undefined) options.composed = true;\n\n    let list = ReflectUtils.getMetadata<EmitCustomEventMetadata[]>(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n\n    // Wrap the original method to dispatch event after execution\n    const originalMethod = descriptor.value;\n    descriptor.value = function (this: HTMLElement, ...args: any[]) {\n      const detail = originalMethod.apply(this, args);\n\n      const event = new CustomEvent(options.type, {\n        detail,\n        bubbles: options.bubbles,\n        composed: options.composed,\n        cancelable: options.cancelable\n      });\n\n      this.dispatchEvent(event);\n      return detail;\n    };\n  };\n}\n\nexport const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAetB,MAAM,iCAAiC,OAAO,wCAAwC;AAEtF,SAAS,gBAAgB,eAAiE;AAC/F,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAC3B,UAAM,UAAkC,OAAO,kBAAkB,WAAW,EAAE,MAAM,cAAc,IAAI;AAEtG,QAAI,CAAC,QAAQ,eAAe;AAC1B,cAAQ,gBAAgB,KAAK,QAAQ,IAAI;AAAA,IAC3C;AACA,QAAI,QAAQ,YAAY,OAAW,SAAQ,UAAU;AACrD,QAAI,QAAQ,aAAa,OAAW,SAAQ,WAAW;AAEvD,QAAI,OAAO,iCAAa,YAAuC,gCAAgC,WAAW;AAC1G,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,uCAAa,eAAe,gCAAgC,MAAM,WAAW;AAAA,IAC/E;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAGlC,UAAM,iBAAiB,WAAW;AAClC,eAAW,QAAQ,YAAgC,MAAa;AAC9D,YAAM,SAAS,eAAe,MAAM,MAAM,IAAI;AAE9C,YAAM,QAAQ,IAAI,YAAY,QAAQ,MAAM;AAAA,QAC1C;AAAA,QACA,SAAS,QAAQ;AAAA,QACjB,UAAU,QAAQ;AAAA,QAClB,YAAY,QAAQ;AAAA,MACtB,CAAC;AAED,WAAK,cAAc,KAAK;AACxB,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,iCAAiC,CAAC,WAAuD;AACpG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,gCAAgC,WAAW;AAC7E;",
+  "names": []
+}

package/dist/cjs/decorators/lifecycles.js

@@ -17,17 +17,22 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var lifecycles_exports = {};
 __export(lifecycles_exports, {
+  ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
+  ON_ADD_EVENT_LISTENER_METADATA_KEY: () => ON_ADD_EVENT_LISTENER_METADATA_KEY,
   ON_AFTER_ADOPTED_METADATA_KEY: () => ON_AFTER_ADOPTED_METADATA_KEY,
   ON_AFTER_CONNECTED_METADATA_KEY: () => ON_AFTER_CONNECTED_METADATA_KEY,
   ON_AFTER_DISCONNECTED_METADATA_KEY: () => ON_AFTER_DISCONNECTED_METADATA_KEY,
+  ON_ATTRIBUTE_CHANGED_METADATA_KEY: () => ON_ATTRIBUTE_CHANGED_METADATA_KEY,
   ON_BEFORE_ADOPTED_METADATA_KEY: () => ON_BEFORE_ADOPTED_METADATA_KEY,
   ON_BEFORE_CONNECTED_METADATA_KEY: () => ON_BEFORE_CONNECTED_METADATA_KEY,
   ON_BEFORE_DISCONNECTED_METADATA_KEY: () => ON_BEFORE_DISCONNECTED_METADATA_KEY,
   getLifecycleMetadata: () => getLifecycleMetadata,
+  onAddEventListener: () => onAddEventListener,
   onAdopted: () => onAdopted,
   onAfterAdopted: () => onAfterAdopted,
   onAfterConnected: () => onAfterConnected,
   onAfterDisconnected: () => onAfterDisconnected,
+  onAttributeChanged: () => onAttributeChanged,
   onBeforeAdopted: () => onBeforeAdopted,
   onBeforeConnected: () => onBeforeConnected,
   onBeforeDisconnected: () => onBeforeDisconnected,
@@ -42,6 +47,9 @@ const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-befo
 const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-disconnected");
 const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-before-adopted");
 const ON_AFTER_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-after-adopted");
+const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:on-add-event-listener");
+const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:on-attribute-changed");
+const ATTRIBUTE_CHANGED_WILDCARD = "*";
 function createLifecycleDecorator(metadataKey) {
   return (target, propertyKey) => {
     const constructor = target.constructor;
@@ -62,6 +70,36 @@ const onDisconnected = onAfterDisconnected;
 const onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
 const onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
 const onAdopted = onAfterAdopted;
+const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+function onAttributeChanged(arg1, arg2, arg3) {
+  const decorator = (attributeName, target, propertyKey) => {
+    const constructor = target.constructor;
+    let meta = import_ReflectUtils.ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      import_ReflectUtils.ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    }
+    let methods = meta.get(attributeName);
+    if (!methods) {
+      methods = [];
+      meta.set(attributeName, methods);
+    }
+    if (!methods.includes(propertyKey)) {
+      methods.push(propertyKey);
+    }
+  };
+  if (typeof arg1 === "string") {
+    return (target, propertyKey) => {
+      decorator(arg1, target, propertyKey);
+    };
+  } else if (Array.isArray(arg1)) {
+    return (target, propertyKey) => {
+      arg1.forEach((name) => decorator(name, target, propertyKey));
+    };
+  } else if (arg1 && arg2) {
+    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
+  }
+}
 const getLifecycleMetadata = (target, metadataKey) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return import_ReflectUtils.ReflectUtils.getMetadata(metadataKey, constructor);

package/dist/cjs/decorators/lifecycles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/lifecycles.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-connected');\nexport const ON_AFTER_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-connected');\nexport const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-disconnected');\nexport const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-disconnected');\nexport const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');\nexport const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');\n\nfunction createLifecycleDecorator(metadataKey: symbol): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let list = ReflectUtils.getMetadata<(string | symbol)[]>(metadataKey, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(metadataKey, list, constructor);\n    }\n    list.push(propertyKey);\n  };\n}\n\nexport const onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);\nexport const onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);\nexport const onConnected = onAfterConnected; // Alias for backward compatibility\n\nexport const onBeforeDisconnected = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);\nexport const onAfterDisconnected = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);\nexport const onDisconnected = onAfterDisconnected; // Alias\n\nexport const onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);\nexport const onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);\nexport const onAdopted = onAfterAdopted; // Alias\n\nexport const getLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(metadataKey, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAEtB,MAAM,mCAAmC,OAAO,0CAA0C;AAC1F,MAAM,kCAAkC,OAAO,yCAAyC;AACxF,MAAM,sCAAsC,OAAO,6CAA6C;AAChG,MAAM,qCAAqC,OAAO,4CAA4C;AAC9F,MAAM,iCAAiC,OAAO,wCAAwC;AACtF,MAAM,gCAAgC,OAAO,uCAAuC;AAE3F,SAAS,yBAAyB,aAAsC;AACtE,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,iCAAa,YAAiC,aAAa,WAAW;AACjF,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,uCAAa,eAAe,aAAa,MAAM,WAAW;AAAA,IAC5D;AACA,SAAK,KAAK,WAAW;AAAA,EACvB;AACF;AAEO,MAAM,oBAAoB,yBAAyB,gCAAgC;AACnF,MAAM,mBAAmB,yBAAyB,+BAA+B;AACjF,MAAM,cAAc;AAEpB,MAAM,uBAAuB,yBAAyB,mCAAmC;AACzF,MAAM,sBAAsB,yBAAyB,kCAAkC;AACvF,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB,yBAAyB,8BAA8B;AAC/E,MAAM,iBAAiB,yBAAyB,6BAA6B;AAC7E,MAAM,YAAY;AAElB,MAAM,uBAAuB,CAAC,QAAa,gBAAyD;AACzG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,aAAa,WAAW;AAC1D;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-connected');\nexport const ON_AFTER_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-connected');\nexport const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-disconnected');\nexport const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-disconnected');\nexport const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');\nexport const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');\nexport const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');\nexport const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');\n\nexport const ATTRIBUTE_CHANGED_WILDCARD = '*';\n\nfunction createLifecycleDecorator(metadataKey: symbol): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let list = ReflectUtils.getMetadata<(string | symbol)[]>(metadataKey, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(metadataKey, list, constructor);\n    }\n    list.push(propertyKey);\n  };\n}\n\nexport const onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);\nexport const onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);\nexport const onConnected = onAfterConnected;\n\nexport const onBeforeDisconnected = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);\nexport const onAfterDisconnected = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);\nexport const onDisconnected = onAfterDisconnected;\n\nexport const onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);\nexport const onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);\nexport const onAdopted = onAfterAdopted;\n\nexport const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);\n\nexport function onAttributeChanged(attributeName: string | string[]): MethodDecorator;\nexport function onAttributeChanged(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;\nexport function onAttributeChanged(arg1: string | string[] | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {\n  const decorator = (attributeName: string, target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let meta = ReflectUtils.getMetadata<Map<string, (string | symbol)[]>>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n    if (!meta) {\n      meta = new Map<string, (string | symbol)[]>();\n      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);\n    }\n\n    let methods = meta.get(attributeName);\n    if (!methods) {\n      methods = [];\n      meta.set(attributeName, methods);\n    }\n    if (!methods.includes(propertyKey)) {\n      methods.push(propertyKey);\n    }\n  };\n\n  if (typeof arg1 === 'string') {\n    return (target: Object, propertyKey: string | symbol) => {\n      decorator(arg1, target, propertyKey);\n    };\n  } else if (Array.isArray(arg1)) {\n    return (target: Object, propertyKey: string | symbol) => {\n      arg1.forEach(name => decorator(name, target, propertyKey));\n    };\n  } else if (arg1 && arg2) {\n    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);\n  }\n}\n\nexport const getLifecycleMetadata = (target: any, metadataKey: symbol): any => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(metadataKey, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAEtB,MAAM,mCAAmC,OAAO,0CAA0C;AAC1F,MAAM,kCAAkC,OAAO,yCAAyC;AACxF,MAAM,sCAAsC,OAAO,6CAA6C;AAChG,MAAM,qCAAqC,OAAO,4CAA4C;AAC9F,MAAM,iCAAiC,OAAO,wCAAwC;AACtF,MAAM,gCAAgC,OAAO,uCAAuC;AACpF,MAAM,qCAAqC,OAAO,4CAA4C;AAC9F,MAAM,oCAAoC,OAAO,2CAA2C;AAE5F,MAAM,6BAA6B;AAE1C,SAAS,yBAAyB,aAAsC;AACtE,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,iCAAa,YAAiC,aAAa,WAAW;AACjF,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,uCAAa,eAAe,aAAa,MAAM,WAAW;AAAA,IAC5D;AACA,SAAK,KAAK,WAAW;AAAA,EACvB;AACF;AAEO,MAAM,oBAAoB,yBAAyB,gCAAgC;AACnF,MAAM,mBAAmB,yBAAyB,+BAA+B;AACjF,MAAM,cAAc;AAEpB,MAAM,uBAAuB,yBAAyB,mCAAmC;AACzF,MAAM,sBAAsB,yBAAyB,kCAAkC;AACvF,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB,yBAAyB,8BAA8B;AAC/E,MAAM,iBAAiB,yBAAyB,6BAA6B;AAC7E,MAAM,YAAY;AAElB,MAAM,qBAAqB,yBAAyB,kCAAkC;AAItF,SAAS,mBAAmB,MAAkC,MAAwB,MAAmD;AAC9I,QAAM,YAAY,CAAC,eAAuB,QAAgB,gBAAiC;AACzF,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,iCAAa,YAA8C,mCAAmC,WAAW;AACpH,QAAI,CAAC,MAAM;AACT,aAAO,oBAAI,IAAiC;AAC5C,uCAAa,eAAe,mCAAmC,MAAM,WAAW;AAAA,IAClF;AAEA,QAAI,UAAU,KAAK,IAAI,aAAa;AACpC,QAAI,CAAC,SAAS;AACZ,gBAAU,CAAC;AACX,WAAK,IAAI,eAAe,OAAO;AAAA,IACjC;AACA,QAAI,CAAC,QAAQ,SAAS,WAAW,GAAG;AAClC,cAAQ,KAAK,WAAW;AAAA,IAC1B;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,CAAC,QAAgB,gBAAiC;AACvD,gBAAU,MAAM,QAAQ,WAAW;AAAA,IACrC;AAAA,EACF,WAAW,MAAM,QAAQ,IAAI,GAAG;AAC9B,WAAO,CAAC,QAAgB,gBAAiC;AACvD,WAAK,QAAQ,UAAQ,UAAU,MAAM,QAAQ,WAAW,CAAC;AAAA,IAC3D;AAAA,EACF,WAAW,QAAQ,MAAM;AACvB,cAAU,4BAA4B,MAAM,IAAI;AAAA,EAClD;AACF;AAEO,MAAM,uBAAuB,CAAC,QAAa,gBAA6B;AAC7E,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,aAAa,WAAW;AAC1D;",
   "names": []
 }

package/dist/cjs/decorators/query.js

@@ -24,8 +24,8 @@ __export(query_exports, {
 module.exports = __toCommonJS(query_exports);
 var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
 const QUERY_METADATA_KEY = Symbol("simple-web-component:query");
-const query = (selector, options = { useShadow: true }) => {
-  return (target, propertyKey, descriptor) => {
+function query(arg1, arg2) {
+  const decorator = (selector, options, target, propertyKey, descriptor) => {
     const isMethod = !!descriptor;
     const constructor = target.constructor;
     let queries = import_ReflectUtils.ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
@@ -37,15 +37,37 @@ const query = (selector, options = { useShadow: true }) => {
     if (!isMethod) {
       Object.defineProperty(target, propertyKey, {
         get() {
-          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          return root.querySelector(selector);
+          if (!selector)
+            return this;
+          let searchRoot = this;
+          if (options.root === "shadow")
+            searchRoot = this.shadowRoot || this;
+          else if (options.root === "light")
+            searchRoot = this;
+          else
+            searchRoot = this.shadowRoot || this;
+          return searchRoot.querySelector(selector);
         },
         enumerable: true,
         configurable: true
       });
     }
   };
-};
+  if (arg1 && typeof arg2 === "string") {
+    return decorator("", {}, arg1, arg2);
+  }
+  return (target, propertyKey, descriptor) => {
+    let selector = "";
+    let options = {};
+    if (typeof arg1 === "string") {
+      selector = arg1;
+    } else if (typeof arg1 === "object") {
+      options = arg1;
+      selector = options.selector || "";
+    }
+    decorator(selector, options, target, propertyKey, descriptor);
+  };
+}
 const getQueryMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return import_ReflectUtils.ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);

package/dist/cjs/decorators/query.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/query.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface QueryOptions {\n  useShadow?: boolean;\n}\n\nexport interface QueryMetadata {\n  selector: string;\n  options: QueryOptions;\n  propertyKey: string | symbol;\n  isMethod: boolean;\n}\n\nexport const QUERY_METADATA_KEY = Symbol('simple-web-component:query');\n\nexport const query = (selector: string, options: QueryOptions = { useShadow: true }): any => {\n  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n    const isMethod = !!descriptor;\n    const constructor = target.constructor;\n\n    // \uBA54\uD0C0\uB370\uC774\uD130 \uC800\uC7A5 (\uB098\uC911\uC5D0 elementDefine\uC5D0\uC11C \uC0AC\uC6A9)\n    let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);\n    if (!queries) {\n      queries = [];\n      ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);\n    }\n    queries.push({ selector, options, propertyKey, isMethod });\n\n    if (!isMethod) {\n      // \uC18D\uC131 \uB370\uCF54\uB808\uC774\uD130\uC778 \uACBD\uC6B0: \uAE30\uC874\uCC98\uB7FC Lazy Getter \uC124\uC815\n      Object.defineProperty(target, propertyKey, {\n        get(this: HTMLElement) {\n          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;\n          return root.querySelector(selector);\n        },\n        enumerable: true,\n        configurable: true\n      });\n    }\n  };\n};\n\nexport const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAatB,MAAM,qBAAqB,OAAO,4BAA4B;AAE9D,MAAM,QAAQ,CAAC,UAAkB,UAAwB,EAAE,WAAW,KAAK,MAAW;AAC3F,SAAO,CAAC,QAAgB,aAA8B,eAAoC;AACxF,UAAM,WAAW,CAAC,CAAC;AACnB,UAAM,cAAc,OAAO;AAG3B,QAAI,UAAU,iCAAa,YAA6B,oBAAoB,WAAW;AACvF,QAAI,CAAC,SAAS;AACZ,gBAAU,CAAC;AACX,uCAAa,eAAe,oBAAoB,SAAS,WAAW;AAAA,IACtE;AACA,YAAQ,KAAK,EAAE,UAAU,SAAS,aAAa,SAAS,CAAC;AAEzD,QAAI,CAAC,UAAU;AAEb,aAAO,eAAe,QAAQ,aAAa;AAAA,QACzC,MAAuB;AACrB,gBAAM,OAAO,QAAQ,cAAc,SAAS,KAAK,aAAa,KAAK,aAAa;AAChF,iBAAO,KAAK,cAAc,QAAQ;AAAA,QACpC;AAAA,QACA,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB,CAAC,WAA6C;AAC5E,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,oBAAoB,WAAW;AACjE;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface QueryOptions {\n  selector?: string;\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n}\n\nexport interface QueryMetadata {\n  selector: string;\n  options: QueryOptions;\n  propertyKey: string | symbol;\n  isMethod: boolean;\n}\n\nexport const QUERY_METADATA_KEY = Symbol('simple-web-component:query');\n\nexport function query(selector: string): any;\nexport function query(options: QueryOptions): any;\nexport function query(target: Object, propertyKey: string | symbol): void;\nexport function query(arg1?: string | QueryOptions | Object, arg2?: string | symbol): any {\n  const decorator = (selector: string, options: QueryOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n    const isMethod = !!descriptor;\n    const constructor = target.constructor;\n\n    let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);\n    if (!queries) {\n      queries = [];\n      ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);\n    }\n    queries.push({ selector, options, propertyKey, isMethod });\n\n    if (!isMethod) {\n      Object.defineProperty(target, propertyKey, {\n        get(this: HTMLElement) {\n          if (!selector) return this;\n          let searchRoot: Node = this;\n          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;\n          else if (options.root === 'light') searchRoot = this;\n          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)\n\n          return (searchRoot as HTMLElement).querySelector(selector);\n        },\n        enumerable: true,\n        configurable: true\n      });\n    }\n  };\n\n  // Case: @query (parameterless decorator)\n  if (arg1 && typeof arg2 === 'string') {\n    return decorator('', {}, arg1 as Object, arg2 as string | symbol);\n  }\n\n  // Case: @query('selector') or @query({ selector: '...', ... })\n  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n    let selector = '';\n    let options: QueryOptions = {};\n\n    if (typeof arg1 === 'string') {\n      selector = arg1;\n    } else if (typeof arg1 === 'object') {\n      options = arg1 as QueryOptions;\n      selector = options.selector || '';\n    }\n\n    decorator(selector, options, target, propertyKey, descriptor);\n  };\n}\n\nexport const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;;;0BAA6B;AActB,MAAM,qBAAqB,OAAO,4BAA4B;AAK/D,SAAU,MAAM,MAAuC,MAAsB;AACjF,QAAM,YAAY,CAAC,UAAkB,SAAuB,QAAgB,aAA8B,eAAmC;AAC3I,UAAM,WAAW,CAAC,CAAC;AACnB,UAAM,cAAc,OAAO;AAE3B,QAAI,UAAU,iCAAa,YAA6B,oBAAoB,WAAW;AACvF,QAAI,CAAC,SAAS;AACZ,gBAAU,CAAA;AACV,uCAAa,eAAe,oBAAoB,SAAS,WAAW;IACtE;AACA,YAAQ,KAAK,EAAE,UAAU,SAAS,aAAa,SAAQ,CAAE;AAEzD,QAAI,CAAC,UAAU;AACb,aAAO,eAAe,QAAQ,aAAa;QACzC,MAAG;AACD,cAAI,CAAC;AAAU,mBAAO;AACtB,cAAI,aAAmB;AACvB,cAAI,QAAQ,SAAS;AAAU,yBAAa,KAAK,cAAc;mBACtD,QAAQ,SAAS;AAAS,yBAAa;;AAC3C,yBAAa,KAAK,cAAc;AAErC,iBAAQ,WAA2B,cAAc,QAAQ;QAC3D;QACA,YAAY;QACZ,cAAc;OACf;IACH;EACF;AAGA,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,WAAO,UAAU,IAAI,CAAA,GAAI,MAAgB,IAAuB;EAClE;AAGA,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,QAAI,WAAW;AACf,QAAI,UAAwB,CAAA;AAE5B,QAAI,OAAO,SAAS,UAAU;AAC5B,iBAAW;IACb,WAAW,OAAO,SAAS,UAAU;AACnC,gBAAU;AACV,iBAAW,QAAQ,YAAY;IACjC;AAEA,cAAU,UAAU,SAAS,QAAQ,aAAa,UAAU;EAC9D;AACF;AAEO,MAAM,mBAAmB,CAAC,WAA4C;AAC3E,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,oBAAoB,WAAW;AACjE;",
   "names": []
 }

package/dist/cjs/decorators/queryAll.js

@@ -24,8 +24,8 @@ __export(queryAll_exports, {
 module.exports = __toCommonJS(queryAll_exports);
 var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
 const QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
-const queryAll = (selector, options = { useShadow: true }) => {
-  return (target, propertyKey, descriptor) => {
+function queryAll(arg1, arg2) {
+  const decorator = (selector, options, target, propertyKey, descriptor) => {
     const isMethod = !!descriptor;
     const constructor = target.constructor;
     let queries = import_ReflectUtils.ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
@@ -37,15 +37,37 @@ const queryAll = (selector, options = { useShadow: true }) => {
     if (!isMethod) {
       Object.defineProperty(target, propertyKey, {
         get() {
-          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          return root.querySelectorAll(selector);
+          if (!selector)
+            return [this];
+          let searchRoot = this;
+          if (options.root === "shadow")
+            searchRoot = this.shadowRoot || this;
+          else if (options.root === "light")
+            searchRoot = this;
+          else
+            searchRoot = this.shadowRoot || this;
+          return searchRoot.querySelectorAll(selector);
         },
         enumerable: true,
         configurable: true
       });
     }
   };
-};
+  if (arg1 && typeof arg2 === "string") {
+    return decorator("", {}, arg1, arg2);
+  }
+  return (target, propertyKey, descriptor) => {
+    let selector = "";
+    let options = {};
+    if (typeof arg1 === "string") {
+      selector = arg1;
+    } else if (typeof arg1 === "object") {
+      options = arg1;
+      selector = options.selector || "";
+    }
+    decorator(selector, options, target, propertyKey, descriptor);
+  };
+}
 const getQueryAllMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return import_ReflectUtils.ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);

package/dist/cjs/decorators/queryAll.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/queryAll.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface QueryAllOptions {\n  useShadow?: boolean;\n}\n\nexport interface QueryAllMetadata {\n  selector: string;\n  options: QueryAllOptions;\n  propertyKey: string | symbol;\n  isMethod: boolean;\n}\n\nexport const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');\n\nexport const queryAll = (selector: string, options: QueryAllOptions = { useShadow: true }): any => {\n  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n    const isMethod = !!descriptor;\n    const constructor = target.constructor;\n\n    // \uBA54\uD0C0\uB370\uC774\uD130 \uC800\uC7A5 (\uB098\uC911\uC5D0 elementDefine\uC5D0\uC11C \uC0AC\uC6A9)\n    let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);\n    if (!queries) {\n      queries = [];\n      ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);\n    }\n    queries.push({ selector, options, propertyKey, isMethod });\n\n    if (!isMethod) {\n      // \uC18D\uC131 \uB370\uCF54\uB808\uC774\uD130\uC778 \uACBD\uC6B0: \uAE30\uC874\uCC98\uB7FC Lazy Getter \uC124\uC815\n      Object.defineProperty(target, propertyKey, {\n        get(this: HTMLElement) {\n          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;\n          return root.querySelectorAll(selector);\n        },\n        enumerable: true,\n        configurable: true\n      });\n    }\n  };\n};\n\nexport const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAatB,MAAM,yBAAyB,OAAO,gCAAgC;AAEtE,MAAM,WAAW,CAAC,UAAkB,UAA2B,EAAE,WAAW,KAAK,MAAW;AACjG,SAAO,CAAC,QAAgB,aAA8B,eAAoC;AACxF,UAAM,WAAW,CAAC,CAAC;AACnB,UAAM,cAAc,OAAO;AAG3B,QAAI,UAAU,iCAAa,YAAgC,wBAAwB,WAAW;AAC9F,QAAI,CAAC,SAAS;AACZ,gBAAU,CAAC;AACX,uCAAa,eAAe,wBAAwB,SAAS,WAAW;AAAA,IAC1E;AACA,YAAQ,KAAK,EAAE,UAAU,SAAS,aAAa,SAAS,CAAC;AAEzD,QAAI,CAAC,UAAU;AAEb,aAAO,eAAe,QAAQ,aAAa;AAAA,QACzC,MAAuB;AACrB,gBAAM,OAAO,QAAQ,cAAc,SAAS,KAAK,aAAa,KAAK,aAAa;AAChF,iBAAO,KAAK,iBAAiB,QAAQ;AAAA,QACvC;AAAA,QACA,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CAAC,WAAgD;AAClF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,wBAAwB,WAAW;AACrE;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface QueryAllOptions {\n  selector?: string;\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n}\n\nexport interface QueryAllMetadata {\n  selector: string;\n  options: QueryAllOptions;\n  propertyKey: string | symbol;\n  isMethod: boolean;\n}\n\nexport const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');\n\nexport function queryAll(selector: string): any;\nexport function queryAll(options: QueryAllOptions): any;\nexport function queryAll(target: Object, propertyKey: string | symbol): void;\nexport function queryAll(arg1?: string | QueryAllOptions | Object, arg2?: string | symbol): any {\n  const decorator = (selector: string, options: QueryAllOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n    const isMethod = !!descriptor;\n    const constructor = target.constructor;\n\n    let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);\n    if (!queries) {\n      queries = [];\n      ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);\n    }\n    queries.push({ selector, options, propertyKey, isMethod });\n\n    if (!isMethod) {\n      Object.defineProperty(target, propertyKey, {\n        get(this: HTMLElement) {\n          if (!selector) return [this];\n          let searchRoot: Node = this;\n          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;\n          else if (options.root === 'light') searchRoot = this;\n          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)\n\n          return (searchRoot as HTMLElement).querySelectorAll(selector);\n        },\n        enumerable: true,\n        configurable: true\n      });\n    }\n  };\n\n  // Case: @queryAll (parameterless decorator)\n  if (arg1 && typeof arg2 === 'string') {\n    return decorator('', {}, arg1 as Object, arg2 as string | symbol);\n  }\n\n  // Case: @queryAll('selector') or @queryAll({ selector: '...', ... })\n  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n    let selector = '';\n    let options: QueryAllOptions = {};\n\n    if (typeof arg1 === 'string') {\n      selector = arg1;\n    } else if (typeof arg1 === 'object') {\n      options = arg1 as QueryAllOptions;\n      selector = options.selector || '';\n    }\n\n    decorator(selector, options, target, propertyKey, descriptor);\n  };\n}\n\nexport const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;;;0BAA6B;AActB,MAAM,yBAAyB,OAAO,gCAAgC;AAKvE,SAAU,SAAS,MAA0C,MAAsB;AACvF,QAAM,YAAY,CAAC,UAAkB,SAA0B,QAAgB,aAA8B,eAAmC;AAC9I,UAAM,WAAW,CAAC,CAAC;AACnB,UAAM,cAAc,OAAO;AAE3B,QAAI,UAAU,iCAAa,YAAgC,wBAAwB,WAAW;AAC9F,QAAI,CAAC,SAAS;AACZ,gBAAU,CAAA;AACV,uCAAa,eAAe,wBAAwB,SAAS,WAAW;IAC1E;AACA,YAAQ,KAAK,EAAE,UAAU,SAAS,aAAa,SAAQ,CAAE;AAEzD,QAAI,CAAC,UAAU;AACb,aAAO,eAAe,QAAQ,aAAa;QACzC,MAAG;AACD,cAAI,CAAC;AAAU,mBAAO,CAAC,IAAI;AAC3B,cAAI,aAAmB;AACvB,cAAI,QAAQ,SAAS;AAAU,yBAAa,KAAK,cAAc;mBACtD,QAAQ,SAAS;AAAS,yBAAa;;AAC3C,yBAAa,KAAK,cAAc;AAErC,iBAAQ,WAA2B,iBAAiB,QAAQ;QAC9D;QACA,YAAY;QACZ,cAAc;OACf;IACH;EACF;AAGA,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,WAAO,UAAU,IAAI,CAAA,GAAI,MAAgB,IAAuB;EAClE;AAGA,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,QAAI,WAAW;AACf,QAAI,UAA2B,CAAA;AAE/B,QAAI,OAAO,SAAS,UAAU;AAC5B,iBAAW;IACb,WAAW,OAAO,SAAS,UAAU;AACnC,gBAAU;AACV,iBAAW,QAAQ,YAAY;IACjC;AAEA,cAAU,UAAU,SAAS,QAAQ,aAAa,UAAU;EAC9D;AACF;AAEO,MAAM,sBAAsB,CAAC,WAA+C;AACjF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,wBAAwB,WAAW;AACrE;",
   "names": []
 }

package/dist/cjs/decorators/state.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var state_exports = {};
+__export(state_exports, {
+  STATE_METADATA_KEY: () => STATE_METADATA_KEY,
+  getStateMetadataList: () => getStateMetadataList,
+  state: () => state
+});
+module.exports = __toCommonJS(state_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+const STATE_METADATA_KEY = Symbol("simple-web-component:state");
+function state(arg1, arg2) {
+  const decorator = (options, target, propertyKey) => {
+    const constructor = target.constructor;
+    if (!options.name) options.name = String(propertyKey);
+    let list = import_ReflectUtils.ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      import_ReflectUtils.ReflectUtils.defineMetadata(STATE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+  if (arg2) {
+    return decorator({}, arg1, arg2);
+  }
+  return (target, propertyKey) => {
+    const options = typeof arg1 === "string" ? { name: arg1 } : arg1 || {};
+    decorator(options, target, propertyKey);
+  };
+}
+const getStateMetadataList = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+};
+//# sourceMappingURL=state.js.map

package/dist/cjs/decorators/state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/state.ts"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface StateOptions {\n  name?: string;\n}\n\nexport interface StateMetadata {\n  propertyKey: string | symbol;\n  options: StateOptions;\n}\n\nexport const STATE_METADATA_KEY = Symbol('simple-web-component:state');\n\nexport function state(nameOrOptions?: string | StateOptions): PropertyDecorator;\nexport function state(target: Object, propertyKey: string | symbol): void;\nexport function state(arg1?: string | StateOptions | Object, arg2?: string | symbol): PropertyDecorator | void {\n  const decorator = (options: StateOptions, target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    if (!options.name) options.name = String(propertyKey);\n\n    let list = ReflectUtils.getMetadata<StateMetadata[]>(STATE_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(STATE_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n  };\n\n  if (arg2) {\n    // Used as @state\n    return decorator({}, arg1!, arg2);\n  }\n\n  // Used as @state(options)\n  return (target: Object, propertyKey: string | symbol) => {\n    const options: StateOptions = typeof arg1 === 'string' ? { name: arg1 } : (arg1 as StateOptions) || {};\n    decorator(options, target, propertyKey);\n  };\n}\n\nexport const getStateMetadataList = (target: any): StateMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAWtB,MAAM,qBAAqB,OAAO,4BAA4B;AAI9D,SAAS,MAAM,MAAuC,MAAkD;AAC7G,QAAM,YAAY,CAAC,SAAuB,QAAgB,gBAAiC;AACzF,UAAM,cAAc,OAAO;AAC3B,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO,OAAO,WAAW;AAEpD,QAAI,OAAO,iCAAa,YAA6B,oBAAoB,WAAW;AACpF,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,uCAAa,eAAe,oBAAoB,MAAM,WAAW;AAAA,IACnE;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAAA,EACpC;AAEA,MAAI,MAAM;AAER,WAAO,UAAU,CAAC,GAAG,MAAO,IAAI;AAAA,EAClC;AAGA,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,UAAwB,OAAO,SAAS,WAAW,EAAE,MAAM,KAAK,IAAK,QAAyB,CAAC;AACrG,cAAU,SAAS,QAAQ,WAAW;AAAA,EACxC;AACF;AAEO,MAAM,uBAAuB,CAAC,WAA6C;AAChF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,oBAAoB,WAAW;AACjE;",
+  "names": []
+}

package/dist/cjs/elements/SwcChoose.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcChoose.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\n\n@elementDefine({ name: 'swc-choose' })\nexport class SwcChoose extends HTMLElement {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    this.evaluate();\n  }\n\n  get swcValue() {\n    return this._swcValue;\n  }\n\n  @innerHtml({ useShadow: true })\n  render() {\n    return `\n      <style>:host { display: contents; }</style>\n      <slot id=\"choose-slot\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true, subtree: true, childList: true });\n    this.evaluate();\n  }\n\n  disconnectedCallback() {\n    this._observer?.disconnect();\n  }\n\n  private evaluate() {\n    const whens = Array.from(this.querySelectorAll('swc-when'));\n    const other = this.querySelector('swc-other');\n    let matched = false;\n\n    // 현재 choose에 설정된 value (swc-value 우선)\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n\n    whens.forEach(when => {\n      if (matched) {\n        (when as HTMLElement).style.display = 'none';\n        return;\n      }\n\n      const testAttr = when.getAttribute('test');\n      if (testAttr === null) return;\n      if (testAttr.includes('{{')) return; // 아직 치환 전이면 스킵\n\n      let isConditionMet = false;\n\n      if (chooseValue !== undefined && chooseValue !== null) {\n        // 1. 매칭 모드: choose의 value와 when의 test값이 같은지 비교\n        isConditionMet = String(chooseValue) === String(testAttr);\n      } else {\n        // 2. 표현식 모드: testAttr 자체가 실행 가능한 코드인 경우\n        try {\n          if (testAttr === 'true') isConditionMet = true;\n          else if (testAttr === 'false') isConditionMet = false;\n          else isConditionMet = !!new Function(`return ${testAttr}`)();\n        } catch (e) {\n          isConditionMet = false;\n        }\n      }\n\n      if (isConditionMet) {\n        (when as HTMLElement).style.display = '';\n        matched = true;\n      } else {\n        (when as HTMLElement).style.display = 'none';\n      }\n    });\n\n    if (other) {\n      (other as HTMLElement).style.display = matched ? 'none' : '';\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;;;;;;;;;;AAGlC,IAAM,YAAN,MAAMA,mBAAkB,YAAW;EAAnC,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;EA2E3B;EAzEE,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,SAAK,SAAQ;EACf;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;;;;EAIT;EAEA,oBAAiB;AACf,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,MAAM,SAAS,MAAM,WAAW,KAAI,CAAE;AACjF,SAAK,SAAQ;EACf;EAEA,uBAAoB;AAClB,SAAK,WAAW,WAAU;EAC5B;EAEQ,WAAQ;AACd,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,UAAU,CAAC;AAC1D,UAAM,QAAQ,KAAK,cAAc,WAAW;AAC5C,QAAI,UAAU;AAGd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AAEzF,UAAM,QAAQ,UAAO;AACnB,UAAI,SAAS;AACV,aAAqB,MAAM,UAAU;AACtC;MACF;AAEA,YAAM,WAAW,KAAK,aAAa,MAAM;AACzC,UAAI,aAAa;AAAM;AACvB,UAAI,SAAS,SAAS,IAAI;AAAG;AAE7B,UAAI,iBAAiB;AAErB,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAErD,yBAAiB,OAAO,WAAW,MAAM,OAAO,QAAQ;MAC1D,OAAO;AAEL,YAAI;AACF,cAAI,aAAa;AAAQ,6BAAiB;mBACjC,aAAa;AAAS,6BAAiB;;AAC3C,6BAAiB,CAAC,CAAC,IAAI,SAAS,UAAU,QAAQ,EAAE,EAAC;QAC5D,SAAS,GAAG;AACV,2BAAiB;QACnB;MACF;AAEA,UAAI,gBAAgB;AACjB,aAAqB,MAAM,UAAU;AACtC,kBAAU;MACZ,OAAO;AACJ,aAAqB,MAAM,UAAU;MACxC;IACF,CAAC;AAED,QAAI,OAAO;AACR,YAAsB,MAAM,UAAU,UAAU,SAAS;IAC5D;EACF;;AA9DA,WAAA;MADC,oBAAU,EAAE,WAAW,KAAI,CAAE;;;;;AAbnB,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,aAAY,CAAE;GACxB,SAAS;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\n\n@elementDefine({ name: 'swc-choose' })\nexport class SwcChoose extends HTMLElement {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    this.evaluate();\n  }\n\n  get swcValue() {\n    return this._swcValue;\n  }\n\n  @innerHtml({ useShadow: true })\n  render() {\n    return `\n      <style>:host { display: contents; }</style>\n      <slot id=\"choose-slot\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true, subtree: true, childList: true });\n    this.evaluate();\n  }\n\n  disconnectedCallback() {\n    this._observer?.disconnect();\n  }\n\n  private evaluate() {\n    const whens = Array.from(this.querySelectorAll('swc-when'));\n    const other = this.querySelector('swc-other');\n    let matched = false;\n\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n\n    whens.forEach(when => {\n      if (matched) {\n        (when as HTMLElement).style.display = 'none';\n        return;\n      }\n\n      const testAttr = when.getAttribute('test');\n      if (testAttr === null) return;\n      if (testAttr.includes('{{')) return;\n\n      let isConditionMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) {\n        isConditionMet = String(chooseValue) === String(testAttr);\n      } else {\n        try {\n          if (testAttr === 'true') isConditionMet = true;\n          else if (testAttr === 'false') isConditionMet = false;\n          else isConditionMet = !!new Function(`return ${testAttr}`)();\n        } catch (e) {\n          isConditionMet = false;\n        }\n      }\n\n      if (isConditionMet) {\n        (when as HTMLElement).style.display = '';\n        matched = true;\n      } else {\n        (when as HTMLElement).style.display = 'none';\n      }\n    });\n\n    if (other) {\n      (other as HTMLElement).style.display = matched ? 'none' : '';\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;;;;;;;;;;AAGlC,IAAM,YAAN,MAAMA,mBAAkB,YAAW;EAAnC,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;EAuE3B;EArEE,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,SAAK,SAAQ;EACf;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;;;;EAIT;EAEA,oBAAiB;AACf,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,MAAM,SAAS,MAAM,WAAW,KAAI,CAAE;AACjF,SAAK,SAAQ;EACf;EAEA,uBAAoB;AAClB,SAAK,WAAW,WAAU;EAC5B;EAEQ,WAAQ;AACd,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,UAAU,CAAC;AAC1D,UAAM,QAAQ,KAAK,cAAc,WAAW;AAC5C,QAAI,UAAU;AAEd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AAEzF,UAAM,QAAQ,UAAO;AACnB,UAAI,SAAS;AACV,aAAqB,MAAM,UAAU;AACtC;MACF;AAEA,YAAM,WAAW,KAAK,aAAa,MAAM;AACzC,UAAI,aAAa;AAAM;AACvB,UAAI,SAAS,SAAS,IAAI;AAAG;AAE7B,UAAI,iBAAiB;AACrB,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AACrD,yBAAiB,OAAO,WAAW,MAAM,OAAO,QAAQ;MAC1D,OAAO;AACL,YAAI;AACF,cAAI,aAAa;AAAQ,6BAAiB;mBACjC,aAAa;AAAS,6BAAiB;;AAC3C,6BAAiB,CAAC,CAAC,IAAI,SAAS,UAAU,QAAQ,EAAE,EAAC;QAC5D,SAAS,GAAG;AACV,2BAAiB;QACnB;MACF;AAEA,UAAI,gBAAgB;AACjB,aAAqB,MAAM,UAAU;AACtC,kBAAU;MACZ,OAAO;AACJ,aAAqB,MAAM,UAAU;MACxC;IACF,CAAC;AAED,QAAI,OAAO;AACR,YAAsB,MAAM,UAAU,UAAU,SAAS;IAC5D;EACF;;AA1DA,WAAA;MADC,oBAAU,EAAE,WAAW,KAAI,CAAE;;;;;AAbnB,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,aAAY,CAAE;GACxB,SAAS;",
   "names": ["SwcChoose"]
 }

package/dist/cjs/elements/SwcForOf.js

@@ -39,7 +39,9 @@ let SwcForOf = class SwcForOf2 extends import_SwcHTMLElementBase.SwcHTMLElementB
   set swcValue(val) {
     if (!Array.isArray(val))
       val = [];
-    this._swcValue = this.createReactiveProxy(val, () => this.renderAll(), (idx, v) => this.updateSingleRow(idx, v));
+    this._swcValue = this.createReactiveProxy(val, () => this._updateState(this._asKey), (idx, v) => this.updateSingleRow(idx, v));
+    if (this._masterTplNodes.length === 0)
+      this.initCore();
     this.renderAll();
   }
   get swcValue() {

package/dist/cjs/elements/SwcForOf.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcForOf.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-for-of' })\nexport class SwcForOf extends SwcHTMLElementBase {\n  private _swcValue: any[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any[]) {\n    if (!Array.isArray(val)) val = [];\n    this._swcValue = this.createReactiveProxy(\n      val,\n      () => this.renderAll(),\n      (idx, v) => this.updateSingleRow(idx, v)\n    );\n    this.renderAll();\n  }\n\n  get swcValue(): any[] {\n    return this._swcValue;\n  }\n\n  @innerHtml({ useShadow: true })\n  renderTemplate() {\n    return `\n      <style>:host { display: contents; }</style>\n      <slot id=\"tpl-slot\" style=\"display:none;\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this.renderAll();\n  }\n\n  public updateSingleRow(index: number, newValue: any) {\n    const targets = this.querySelectorAll(`[slot=\"row-${index}\"]`);\n    if (targets.length > 0) {\n      targets.forEach(target => this.applyData(target, newValue, index));\n    } else {\n      this.renderRow(newValue, index);\n    }\n  }\n\n  private renderRow(item: any, index: number) {\n    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;\n\n    const slotName = `row-${index}`;\n    if (!this.shadowRoot.querySelector(`slot[name=\"${slotName}\"]`)) {\n      const slot = document.createElement('slot');\n      slot.name = slotName;\n      this.shadowRoot.appendChild(slot);\n    }\n\n    this._masterTplNodes.forEach(tplNode => {\n      const clone = tplNode.cloneNode(true);\n      if (clone.nodeType === Node.ELEMENT_NODE) {\n        (clone as HTMLElement).setAttribute('slot', slotName);\n        (clone as HTMLElement).style.display = '';\n      } else if (clone.nodeType === Node.TEXT_NODE) {\n        if (clone.textContent?.trim().length === 0) return;\n        const span = document.createElement('span');\n        span.setAttribute('slot', slotName);\n        span.appendChild(clone);\n        this.appendChild(span);\n        this.applyData(span, item, index);\n        return;\n      }\n      this.appendChild(clone);\n      this.applyData(clone, item, index);\n    });\n  }\n\n  private renderAll() {\n    if (this._masterTplNodes.length === 0 || !this.shadowRoot) return;\n\n    Array.from(this.children).forEach(c => {\n      const slot = c.getAttribute('slot');\n      if (slot && slot.startsWith('row-')) {\n        c.remove();\n      }\n    });\n\n    Array.from(this.shadowRoot.querySelectorAll('slot')).forEach(s => {\n      if (s.id !== 'tpl-slot') s.remove();\n    });\n\n    this._swcValue.forEach((item, index) => this.renderRow(item, index));\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,gCAAmC;;;;;;;;;;AAG5B,IAAM,WAAN,MAAMA,kBAAiB,6CAAkB;EAG9C,cAAA;AACE,UAAK;AAHC,SAAA,YAAmB,CAAA;EAI3B;EAEA,IAAI,SAAS,KAAU;AACrB,QAAI,CAAC,MAAM,QAAQ,GAAG;AAAG,YAAM,CAAA;AAC/B,SAAK,YAAY,KAAK,oBACpB,KACA,MAAM,KAAK,UAAS,GACpB,CAAC,KAAK,MAAM,KAAK,gBAAgB,KAAK,CAAC,CAAC;AAE1C,SAAK,UAAS;EAChB;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;;;;EAIT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,UAAS;EAChB;EAEO,gBAAgB,OAAe,UAAa;AACjD,UAAM,UAAU,KAAK,iBAAiB,cAAc,KAAK,IAAI;AAC7D,QAAI,QAAQ,SAAS,GAAG;AACtB,cAAQ,QAAQ,YAAU,KAAK,UAAU,QAAQ,UAAU,KAAK,CAAC;IACnE,OAAO;AACL,WAAK,UAAU,UAAU,KAAK;IAChC;EACF;EAEQ,UAAU,MAAW,OAAa;AACxC,QAAI,CAAC,KAAK,cAAc,KAAK,gBAAgB,WAAW;AAAG;AAE3D,UAAM,WAAW,OAAO,KAAK;AAC7B,QAAI,CAAC,KAAK,WAAW,cAAc,cAAc,QAAQ,IAAI,GAAG;AAC9D,YAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,WAAK,OAAO;AACZ,WAAK,WAAW,YAAY,IAAI;IAClC;AAEA,SAAK,gBAAgB,QAAQ,aAAU;AACrC,YAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,UAAI,MAAM,aAAa,KAAK,cAAc;AACvC,cAAsB,aAAa,QAAQ,QAAQ;AACnD,cAAsB,MAAM,UAAU;MACzC,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,YAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,cAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,aAAa,QAAQ,QAAQ;AAClC,aAAK,YAAY,KAAK;AACtB,aAAK,YAAY,IAAI;AACrB,aAAK,UAAU,MAAM,MAAM,KAAK;AAChC;MACF;AACA,WAAK,YAAY,KAAK;AACtB,WAAK,UAAU,OAAO,MAAM,KAAK;IACnC,CAAC;EACH;EAEQ,YAAS;AACf,QAAI,KAAK,gBAAgB,WAAW,KAAK,CAAC,KAAK;AAAY;AAE3D,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,OAAI;AACpC,YAAM,OAAO,EAAE,aAAa,MAAM;AAClC,UAAI,QAAQ,KAAK,WAAW,MAAM,GAAG;AACnC,UAAE,OAAM;MACV;IACF,CAAC;AAED,UAAM,KAAK,KAAK,WAAW,iBAAiB,MAAM,CAAC,EAAE,QAAQ,OAAI;AAC/D,UAAI,EAAE,OAAO;AAAY,UAAE,OAAM;IACnC,CAAC;AAED,SAAK,UAAU,QAAQ,CAAC,MAAM,UAAU,KAAK,UAAU,MAAM,KAAK,CAAC;EACrE;;AAjEA,WAAA;MADC,oBAAU,EAAE,WAAW,KAAI,CAAE;;;;;AArBnB,WAAQ,WAAA;MADpB,wBAAc,EAAE,MAAM,aAAY,CAAE;;GACxB,QAAQ;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-for-of' })\nexport class SwcForOf extends SwcHTMLElementBase {\n  private _swcValue: any[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any[]) {\n    if (!Array.isArray(val)) val = [];\n    this._swcValue = this.createReactiveProxy(\n      val,\n      () => (this as any)._updateState((this as any)._asKey),\n      (idx, v) => this.updateSingleRow(idx, v)\n    );\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.renderAll();\n  }\n\n  get swcValue(): any[] {\n    return this._swcValue;\n  }\n\n  @innerHtml({ useShadow: true })\n  renderTemplate() {\n    return `\n      <style>:host { display: contents; }</style>\n      <slot id=\"tpl-slot\" style=\"display:none;\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this.renderAll();\n  }\n\n  public updateSingleRow(index: number, newValue: any) {\n    const targets = this.querySelectorAll(`[slot=\"row-${index}\"]`);\n    if (targets.length > 0) {\n      targets.forEach(target => this.applyData(target, newValue, index));\n    } else {\n      this.renderRow(newValue, index);\n    }\n  }\n\n  private renderRow(item: any, index: number) {\n    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;\n\n    const slotName = `row-${index}`;\n    if (!this.shadowRoot.querySelector(`slot[name=\"${slotName}\"]`)) {\n      const slot = document.createElement('slot');\n      slot.name = slotName;\n      this.shadowRoot.appendChild(slot);\n    }\n\n    this._masterTplNodes.forEach(tplNode => {\n      const clone = tplNode.cloneNode(true);\n      if (clone.nodeType === Node.ELEMENT_NODE) {\n        (clone as HTMLElement).setAttribute('slot', slotName);\n        (clone as HTMLElement).style.display = '';\n      } else if (clone.nodeType === Node.TEXT_NODE) {\n        if (clone.textContent?.trim().length === 0) return;\n        const span = document.createElement('span');\n        span.setAttribute('slot', slotName);\n        span.appendChild(clone);\n        this.appendChild(span);\n        this.applyData(span, item, index);\n        return;\n      }\n      this.appendChild(clone);\n      this.applyData(clone, item, index);\n    });\n  }\n\n  private renderAll() {\n    if (this._masterTplNodes.length === 0 || !this.shadowRoot) return;\n\n    Array.from(this.children).forEach(c => {\n      const slot = c.getAttribute('slot');\n      if (slot && slot.startsWith('row-')) {\n        c.remove();\n      }\n    });\n\n    Array.from(this.shadowRoot.querySelectorAll('slot')).forEach(s => {\n      if (s.id !== 'tpl-slot') s.remove();\n    });\n\n    this._swcValue.forEach((item, index) => this.renderRow(item, index));\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,gCAAmC;;;;;;;;;;AAG5B,IAAM,WAAN,MAAMA,kBAAiB,6CAAkB;EAG9C,cAAA;AACE,UAAK;AAHC,SAAA,YAAmB,CAAA;EAI3B;EAEA,IAAI,SAAS,KAAU;AACrB,QAAI,CAAC,MAAM,QAAQ,GAAG;AAAG,YAAM,CAAA;AAC/B,SAAK,YAAY,KAAK,oBACpB,KACA,MAAO,KAAa,aAAc,KAAa,MAAM,GACrD,CAAC,KAAK,MAAM,KAAK,gBAAgB,KAAK,CAAC,CAAC;AAE1C,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,UAAS;EAChB;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;;;;EAIT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,UAAS;EAChB;EAEO,gBAAgB,OAAe,UAAa;AACjD,UAAM,UAAU,KAAK,iBAAiB,cAAc,KAAK,IAAI;AAC7D,QAAI,QAAQ,SAAS,GAAG;AACtB,cAAQ,QAAQ,YAAU,KAAK,UAAU,QAAQ,UAAU,KAAK,CAAC;IACnE,OAAO;AACL,WAAK,UAAU,UAAU,KAAK;IAChC;EACF;EAEQ,UAAU,MAAW,OAAa;AACxC,QAAI,CAAC,KAAK,cAAc,KAAK,gBAAgB,WAAW;AAAG;AAE3D,UAAM,WAAW,OAAO,KAAK;AAC7B,QAAI,CAAC,KAAK,WAAW,cAAc,cAAc,QAAQ,IAAI,GAAG;AAC9D,YAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,WAAK,OAAO;AACZ,WAAK,WAAW,YAAY,IAAI;IAClC;AAEA,SAAK,gBAAgB,QAAQ,aAAU;AACrC,YAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,UAAI,MAAM,aAAa,KAAK,cAAc;AACvC,cAAsB,aAAa,QAAQ,QAAQ;AACnD,cAAsB,MAAM,UAAU;MACzC,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,YAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,cAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,aAAa,QAAQ,QAAQ;AAClC,aAAK,YAAY,KAAK;AACtB,aAAK,YAAY,IAAI;AACrB,aAAK,UAAU,MAAM,MAAM,KAAK;AAChC;MACF;AACA,WAAK,YAAY,KAAK;AACtB,WAAK,UAAU,OAAO,MAAM,KAAK;IACnC,CAAC;EACH;EAEQ,YAAS;AACf,QAAI,KAAK,gBAAgB,WAAW,KAAK,CAAC,KAAK;AAAY;AAE3D,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,OAAI;AACpC,YAAM,OAAO,EAAE,aAAa,MAAM;AAClC,UAAI,QAAQ,KAAK,WAAW,MAAM,GAAG;AACnC,UAAE,OAAM;MACV;IACF,CAAC;AAED,UAAM,KAAK,KAAK,WAAW,iBAAiB,MAAM,CAAC,EAAE,QAAQ,OAAI;AAC/D,UAAI,EAAE,OAAO;AAAY,UAAE,OAAM;IACnC,CAAC;AAED,SAAK,UAAU,QAAQ,CAAC,MAAM,UAAU,KAAK,UAAU,MAAM,KAAK,CAAC;EACrE;;AAjEA,WAAA;MADC,oBAAU,EAAE,WAAW,KAAI,CAAE;;;;;AAtBnB,WAAQ,WAAA;MADpB,wBAAc,EAAE,MAAM,aAAY,CAAE;;GACxB,QAAQ;",
   "names": ["SwcForOf"]
 }

package/dist/cjs/elements/SwcObject.js

@@ -40,7 +40,12 @@ let SwcObject = class SwcObject2 extends import_SwcHTMLElementBase.SwcHTMLElemen
   set swcValue(val) {
     if (typeof val !== "object" || val === null)
       val = {};
-    this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
+    this._swcValue = this.createReactiveProxy(val, () => {
+      if (typeof this._updateState === "function") {
+        this._updateState(this._asKey);
+      }
+      this.updateUI();
+    });
     if (this._masterTplNodes.length === 0)
       this.initCore();
     this.render();
@@ -64,13 +69,10 @@ let SwcObject = class SwcObject2 extends import_SwcHTMLElementBase.SwcHTMLElemen
     });
   }
   render() {
+    this.innerHTML = "";
+    this._renderedNodes = [];
     if (!this.shadowRoot || this._masterTplNodes.length === 0)
       return;
-    this._renderedNodes.forEach((n) => {
-      if (n.parentElement === this)
-        this.removeChild(n);
-    });
-    this._renderedNodes = [];
     let slot = this.shadowRoot.querySelector('slot[name="obj-content"]');
     if (!slot) {
       slot = document.createElement("slot");

package/dist/cjs/elements/SwcObject.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcObject.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-object' })\nexport class SwcObject extends SwcHTMLElementBase {\n  private _swcValue: any = {};\n  private _renderedNodes: Node[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    if (typeof val !== 'object' || val === null) val = {};\n    this._swcValue = this.createReactiveProxy(val, () => this.updateUI());\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml({ useShadow: true })\n  renderTemplate() {\n    return `\n      <style>:host { display: contents; }</style>\n      <slot id=\"tpl-slot\" style=\"display:none;\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this.render();\n  }\n\n  private updateUI() {\n    this._renderedNodes.forEach(node => {\n      this.applyData(node, this._swcValue);\n    });\n  }\n\n  private render() {\n    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;\n\n    this._renderedNodes.forEach(n => {\n      if (n.parentElement === this) this.removeChild(n);\n    });\n    this._renderedNodes = [];\n\n    let slot = this.shadowRoot.querySelector('slot[name=\"obj-content\"]');\n    if (!slot) {\n      slot = document.createElement('slot');\n      (slot as HTMLSlotElement).name = 'obj-content';\n      this.shadowRoot.appendChild(slot);\n    }\n\n    this._masterTplNodes.forEach(tplNode => {\n      const clone = tplNode.cloneNode(true);\n      if (clone.nodeType === Node.ELEMENT_NODE) {\n        (clone as HTMLElement).setAttribute('slot', 'obj-content');\n      } else if (clone.nodeType === Node.TEXT_NODE) {\n        if (clone.textContent?.trim().length === 0) return;\n        const span = document.createElement('span');\n        span.setAttribute('slot', 'obj-content');\n        span.appendChild(clone);\n        this.appendChild(span);\n        this._renderedNodes.push(span);\n        this.applyData(span, this._swcValue);\n        return;\n      }\n      this.appendChild(clone);\n      this._renderedNodes.push(clone);\n      this.applyData(clone, this._swcValue);\n    });\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,gCAAmC;;;;;;;;;;AAG5B,IAAM,YAAN,MAAMA,mBAAkB,6CAAkB;EAI/C,cAAA;AACE,UAAK;AAJC,SAAA,YAAiB,CAAA;AACjB,SAAA,iBAAyB,CAAA;EAIjC;EAEA,IAAI,SAAS,KAAQ;AACnB,QAAI,OAAO,QAAQ,YAAY,QAAQ;AAAM,YAAM,CAAA;AACnD,SAAK,YAAY,KAAK,oBAAoB,KAAK,MAAM,KAAK,SAAQ,CAAE;AACpE,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;;;;EAIT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,OAAM;EACb;EAEQ,WAAQ;AACd,SAAK,eAAe,QAAQ,UAAO;AACjC,WAAK,UAAU,MAAM,KAAK,SAAS;IACrC,CAAC;EACH;EAEQ,SAAM;AACZ,QAAI,CAAC,KAAK,cAAc,KAAK,gBAAgB,WAAW;AAAG;AAE3D,SAAK,eAAe,QAAQ,OAAI;AAC9B,UAAI,EAAE,kBAAkB;AAAM,aAAK,YAAY,CAAC;IAClD,CAAC;AACD,SAAK,iBAAiB,CAAA;AAEtB,QAAI,OAAO,KAAK,WAAW,cAAc,0BAA0B;AACnE,QAAI,CAAC,MAAM;AACT,aAAO,SAAS,cAAc,MAAM;AACnC,WAAyB,OAAO;AACjC,WAAK,WAAW,YAAY,IAAI;IAClC;AAEA,SAAK,gBAAgB,QAAQ,aAAU;AACrC,YAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,UAAI,MAAM,aAAa,KAAK,cAAc;AACvC,cAAsB,aAAa,QAAQ,aAAa;MAC3D,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,YAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,cAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,aAAa,QAAQ,aAAa;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,YAAY,IAAI;AACrB,aAAK,eAAe,KAAK,IAAI;AAC7B,aAAK,UAAU,MAAM,KAAK,SAAS;AACnC;MACF;AACA,WAAK,YAAY,KAAK;AACtB,WAAK,eAAe,KAAK,KAAK;AAC9B,WAAK,UAAU,OAAO,KAAK,SAAS;IACtC,CAAC;EACH;;AAnDA,WAAA;MADC,oBAAU,EAAE,WAAW,KAAI,CAAE;;;;;AAnBnB,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,aAAY,CAAE;;GACxB,SAAS;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-object' })\nexport class SwcObject extends SwcHTMLElementBase {\n  private _swcValue: any = {};\n  private _renderedNodes: Node[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    if (typeof val !== 'object' || val === null) val = {};\n    this._swcValue = this.createReactiveProxy(val, () => {\n      if (typeof (this as any)._updateState === 'function') {\n        (this as any)._updateState((this as any)._asKey);\n      }\n      this.updateUI();\n    });\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml({ useShadow: true })\n  renderTemplate() {\n    return `\n      <style>:host { display: contents; }</style>\n      <slot id=\"tpl-slot\" style=\"display:none;\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this.render();\n  }\n\n  private updateUI() {\n    this._renderedNodes.forEach(node => {\n      this.applyData(node, this._swcValue);\n    });\n  }\n\n  private render() {\n    this.innerHTML = '';\n    this._renderedNodes = [];\n    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;\n\n    let slot = this.shadowRoot.querySelector('slot[name=\"obj-content\"]');\n    if (!slot) {\n      slot = document.createElement('slot');\n      (slot as HTMLSlotElement).name = 'obj-content';\n      this.shadowRoot.appendChild(slot);\n    }\n\n    this._masterTplNodes.forEach(tplNode => {\n      const clone = tplNode.cloneNode(true);\n      if (clone.nodeType === Node.ELEMENT_NODE) {\n        (clone as HTMLElement).setAttribute('slot', 'obj-content');\n      } else if (clone.nodeType === Node.TEXT_NODE) {\n        if (clone.textContent?.trim().length === 0) return;\n        const span = document.createElement('span');\n        span.setAttribute('slot', 'obj-content');\n        span.appendChild(clone);\n        this.appendChild(span);\n        this._renderedNodes.push(span);\n        this.applyData(span, this._swcValue);\n        return;\n      }\n      this.appendChild(clone);\n      this._renderedNodes.push(clone);\n      this.applyData(clone, this._swcValue);\n    });\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,gCAAmC;;;;;;;;;;AAG5B,IAAM,YAAN,MAAMA,mBAAkB,6CAAkB;EAI/C,cAAA;AACE,UAAK;AAJC,SAAA,YAAiB,CAAA;AACjB,SAAA,iBAAyB,CAAA;EAIjC;EAEA,IAAI,SAAS,KAAQ;AACnB,QAAI,OAAO,QAAQ,YAAY,QAAQ;AAAM,YAAM,CAAA;AACnD,SAAK,YAAY,KAAK,oBAAoB,KAAK,MAAK;AAClD,UAAI,OAAQ,KAAa,iBAAiB,YAAY;AACnD,aAAa,aAAc,KAAa,MAAM;MACjD;AACA,WAAK,SAAQ;IACf,CAAC;AACD,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;;;;EAIT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,OAAM;EACb;EAEQ,WAAQ;AACd,SAAK,eAAe,QAAQ,UAAO;AACjC,WAAK,UAAU,MAAM,KAAK,SAAS;IACrC,CAAC;EACH;EAEQ,SAAM;AACZ,SAAK,YAAY;AACjB,SAAK,iBAAiB,CAAA;AACtB,QAAI,CAAC,KAAK,cAAc,KAAK,gBAAgB,WAAW;AAAG;AAE3D,QAAI,OAAO,KAAK,WAAW,cAAc,0BAA0B;AACnE,QAAI,CAAC,MAAM;AACT,aAAO,SAAS,cAAc,MAAM;AACnC,WAAyB,OAAO;AACjC,WAAK,WAAW,YAAY,IAAI;IAClC;AAEA,SAAK,gBAAgB,QAAQ,aAAU;AACrC,YAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,UAAI,MAAM,aAAa,KAAK,cAAc;AACvC,cAAsB,aAAa,QAAQ,aAAa;MAC3D,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,YAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,cAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,aAAa,QAAQ,aAAa;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,YAAY,IAAI;AACrB,aAAK,eAAe,KAAK,IAAI;AAC7B,aAAK,UAAU,MAAM,KAAK,SAAS;AACnC;MACF;AACA,WAAK,YAAY,KAAK;AACtB,WAAK,eAAe,KAAK,KAAK;AAC9B,WAAK,UAAU,OAAO,KAAK,SAAS;IACtC,CAAC;EACH;;AAhDA,WAAA;MADC,oBAAU,EAAE,WAAW,KAAI,CAAE;;;;;AAxBnB,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,aAAY,CAAE;;GACxB,SAAS;",
   "names": ["SwcObject"]
 }

package/dist/cjs/index.js

@@ -17,18 +17,17 @@ module.exports = __toCommonJS(src_exports);
 var import_reflect_metadata = require("reflect-metadata");
 __reExport(src_exports, require("./decorators/elementDefine"), module.exports);
 __reExport(src_exports, require("./decorators/innerHtml"), module.exports);
-__reExport(src_exports, require("./decorators/attributeChanged"), module.exports);
+__reExport(src_exports, require("./decorators/attribute"), module.exports);
+__reExport(src_exports, require("./decorators/state"), module.exports);
+__reExport(src_exports, require("./decorators/emitCustomEvent"), module.exports);
 __reExport(src_exports, require("./decorators/lifecycles"), module.exports);
 __reExport(src_exports, require("./decorators/query"), module.exports);
 __reExport(src_exports, require("./decorators/queryAll"), module.exports);
 __reExport(src_exports, require("./decorators/addEventListener"), module.exports);
-__reExport(src_exports, require("./elements/SwcForOf"), module.exports);
-__reExport(src_exports, require("./elements/SwcIf"), module.exports);
-__reExport(src_exports, require("./elements/SwcChoose"), module.exports);
-__reExport(src_exports, require("./elements/SwcWhen"), module.exports);
-__reExport(src_exports, require("./elements/SwcOther"), module.exports);
-__reExport(src_exports, require("./elements/SwcObject"), module.exports);
 __reExport(src_exports, require("./elements/SwcHTMLElementBase"), module.exports);
+__reExport(src_exports, require("./elements/SwcObject"), module.exports);
+__reExport(src_exports, require("./elements/SwcIf"), module.exports);
+__reExport(src_exports, require("./elements/SwcForOf"), module.exports);
 __reExport(src_exports, require("./utils/Utils"), module.exports);
 __reExport(src_exports, require("./is/SwcHTMLAnchorElementBase"), module.exports);
 __reExport(src_exports, require("./is/SwcForOfAnchor"), module.exports);