@dooboostore/simple-web-component 1.0.0 → 1.0.1

package/README.md

@@ -1,14 +1,14 @@
 # @dooboostore/simple-web-component
 
-`@dooboostore/simple-web-component` is a lightweight, decorator-driven library for building Web Components. It allows you to define standard Custom Elements using classes and decorators without complex configurations, providing powerful features like Shadow DOM management, attribute observation, and seamless template/style injection.
+`@dooboostore/simple-web-component` is a lightweight, decorator-driven library for building high-performance Web Components. It leverages native browser features like **Shadow DOM**, **Slots**, and **MutationObserver** to provide a declarative development experience without the overhead of a Virtual DOM.
 
 ## Key Features
 
-- **Decorator-based**: Declarative development using `@element`, `@template`, `@style`, and `@attributeChanged`.
-- **Standards Compliant**: Built on top of native browser Web Components (Custom Elements) technology.
-- **Automatic Registration**: The `@element` decorator automatically registers your component with the browser using the provided `tagName`.
-- **Built-in Element Extension**: Easily inherit and extend standard HTML tags like `ul`, `button`, or `a` using the `extends` option.
-- **Automatic Attribute Observation**: Use the `@attributeChanged` decorator to automatically register attributes for observation and handle changes via callbacks.
+- **Decorator-driven**: Use `@elementDefind`, `@template`, `@style`, `@query`, and more to define components.
+- **Surgical Updates**: High-performance rendering using the "Slot-per-Row" pattern.
+- **Auto-Sync**: Decorators automatically re-bind when the DOM changes (via MutationObserver).
+- **Native-First**: No Virtual DOM, just pure Custom Elements.
+- **Built-in Logic Components**: Includes `swc-for-of`, `swc-if`, and `swc-choose`.
 
 ## Installation
 
@@ -16,87 +16,84 @@
 pnpm add @dooboostore/simple-web-component
 ```
 
-## Usage
+## API Reference
+
+### Core Decorators
+
+| Decorator | Target | Description |
+| :--- | :--- | :--- |
+| `@elementDefind(config)` | Class | Registers the component. Supports `tagName`, `useShadow`, `extends`. |
+| `@template` | Method | Defines the HTML template. |
+| `@style` | Method | Defines the CSS styles. |
+| `@attributeChanged(names)`| Method | Handles attribute changes. Supports single string, array, or wildcard (`*`). |
+| `@query(selector, options)`| Prop/Method | Queries a single element. Supports `{ useShadow: boolean }`. |
+| `@queryAll(selector, options)`| Prop/Method | Queries multiple elements. |
+| `@addEventListener(opts)`| Method | Declaratively binds events. Automatically re-binds on DOM changes. |
+
+### Built-in Components
+
+#### `swc-for-of` (Looping)
+A high-performance list renderer that uses slots to update only changed items.
+```html
+<ul>
+  <swc-for-of id="my-list">
+    <li>{{index}}: {{value.name}}</li>
+  </swc-for-of>
+</ul>
+<script>
+  const el = document.getElementById('my-list');
+  el.value = [{name: 'Kim'}, {name: 'Lee'}];
+  el.value.push({name: 'Park'}); // Automatically updates UI
+</script>
+```
+
+#### `swc-if` (Conditional)
+Conditionally renders content based on a truthy value or expression.
+```html
+<swc-if value="{{value.age >= 19}}">
+  <div>Adult Content</div>
+</swc-if>
+```
 
-### 1. Basic Autonomous Custom Element
+#### `swc-choose` (Branching)
+Provides a switch-case style branching logic.
+```html
+<swc-choose value="{{value.status}}">
+  <swc-when test="active">Online</swc-when>
+  <swc-when test="pending">Away</swc-when>
+  <swc-other>Offline</swc-other>
+</swc-choose>
+```
 
-This is the most common way to create an encapsulated component using Shadow DOM.
+## Example Usage
 
 ```typescript
-import { element, template, style, attributeChanged } from '@dooboostore/simple-web-component';
+import { elementDefind, template, style, query, addEventListener } from '@dooboostore/simple-web-component';
 
-@element({
-  tagName: 'my-profile',
-  useShadow: true, // Defaults to false (Light DOM)
-  observedAttributes: ['status'] // Manual registration is also possible
+@elementDefind({
+  tagName: 'my-component',
+  useShadow: true
 })
-class MyProfile extends HTMLElement {
-  
+class MyComponent extends HTMLElement {
+  @query('.title') titleEl: HTMLElement;
+
   @style
-  styles() {
-    return `
-      .card { border: 1px solid #ccc; padding: 10px; }
-      .name { font-weight: bold; color: blue; }
-    `;
+  css() {
+    return `:host { display: block; } .title { color: blue; }`;
   }
 
   @template
   render() {
-    return `
-      <div class="card">
-        <div class="name">Hello, Visitor!</div>
-        <div id="status">Status: Pending</div>
-      </div>
-    `;
+    return `<h1 class="title">Hello World</h1><button id="btn">Click</button>`;
   }
 
-  // Called automatically when the 'status' attribute changes
-  @attributeChanged('status')
-  onStatusChange(newVal: string, oldVal: string) {
-    console.log(`Status changed: ${oldVal} -> ${newVal}`);
-    this.shadowRoot.getElementById('status').innerText = `Status: ${newVal}`;
+  @addEventListener({ selector: '#btn', eventName: 'click' })
+  onClick(e: Event) {
+    this.titleEl.textContent = 'Button Clicked!';
   }
 }
 ```
 
-### 2. Extending Built-in Elements (Customized Built-in Element)
-
-Inherit properties and behaviors from existing HTML tags while adding your custom logic.
-
-```typescript
-import { element, template } from '@dooboostore/simple-web-component';
-
-@element({
-  tagName: 'special-list',
-  extends: 'ul' // Specifies that this component extends the <ul> tag
-})
-class SpecialList extends HTMLUListElement {
-  @template
-  render() {
-    return `<li>Initial item of the extended list</li>`;
-  }
-}
-```
-
-## API Reference
-
-### Decorators
-
-| Decorator | Target | Description |
-| :--- | :--- | :--- |
-| `@element(config)` | Class | Configures the tag name, inheritance, Shadow DOM usage, and registers it to the browser. |
-| `@template` | Method | Identifies the method that returns the component's HTML structure. |
-| `@style` | Method | Identifies the method that returns the component's CSS styles. |
-| `@attributeChanged(name)`| Method | Defines an attribute to monitor and the handler to execute when it changes. |
-
-### ElementConfig Options
-
-- `tagName`: (Required) The name for the custom element (e.g., `my-button`).
-- `useShadow`: (Optional) Whether to use Shadow DOM (default: `false`).
-- `extends`: (Optional) The name of the built-in tag to extend (e.g., `ul`, `button`, `a`).
-- `observedAttributes`: (Optional) An array of attributes to monitor manually. (Automatically populated if `@attributeChanged` is used).
-- `customElementRegistry`: (Optional) A specific registry to use for registration (defaults to global `customElements`).
-
 ## License
 
 MIT

package/dist/cjs/decorators/addEventListener.js

@@ -0,0 +1,42 @@
+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 addEventListener_exports = {};
+__export(addEventListener_exports, {
+  ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
+  addEventListener: () => addEventListener,
+  getAddEventListenerMetadata: () => getAddEventListenerMetadata
+});
+module.exports = __toCommonJS(addEventListener_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+const ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
+const addEventListener = (options) => {
+  return (target, propertyKey, descriptor) => {
+    const constructor = target.constructor;
+    let listeners = import_ReflectUtils.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+    if (!listeners) {
+      listeners = [];
+      import_ReflectUtils.ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
+    }
+    listeners.push({ options, propertyKey });
+  };
+};
+const getAddEventListenerMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+};
+//# sourceMappingURL=addEventListener.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/addEventListener.ts"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  selector?: string;\n  eventName: string;\n  useShadow?: boolean;\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport const addEventListener = (options: AddEventListenerOptions): MethodDecorator => {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n};\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAgBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAExF,MAAM,mBAAmB,CAAC,YAAsD;AACrF,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAE3B,QAAI,YAAY,iCAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,uCAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,SAAS,YAAY,CAAC;AAAA,EACzC;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,iCAAiC,WAAW;AAC9E;",
+  "names": []
+}

package/dist/cjs/decorators/attributeChanged.js

@@ -18,23 +18,43 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var attributeChanged_exports = {};
 __export(attributeChanged_exports, {
   ATTRIBUTE_CHANGED_METADATA_KEY: () => ATTRIBUTE_CHANGED_METADATA_KEY,
+  ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
   attributeChanged: () => attributeChanged,
   getAttributeChangedMap: () => getAttributeChangedMap
 });
 module.exports = __toCommonJS(attributeChanged_exports);
 var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
 const ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:attribute-changed");
-const attributeChanged = (attributeName) => {
-  return (target, propertyKey, descriptor) => {
+const ATTRIBUTE_CHANGED_WILDCARD = "*";
+function attributeChanged(arg1, arg2, arg3) {
+  const decorator = (attributeName, target, propertyKey) => {
     const constructor = target.constructor;
     let meta = import_ReflectUtils.ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
     if (!meta) {
       meta = /* @__PURE__ */ new Map();
       import_ReflectUtils.ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
     }
-    meta.set(attributeName, propertyKey);
+    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 getAttributeChangedMap = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return import_ReflectUtils.ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/attributeChanged.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport const ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:attribute-changed');\n\nexport const attributeChanged = (attributeName: string): MethodDecorator => {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    let meta = ReflectUtils.getMetadata<Map<string, string | symbol>>(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n    if (!meta) {\n      meta = new Map<string, string | symbol>();\n      ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);\n    }\n    meta.set(attributeName, propertyKey);\n  };\n};\n\nexport const getAttributeChangedMap = (target: any): Map<string, string | symbol> | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAEtB,MAAM,iCAAiC,OAAO,wCAAwC;AAEtF,MAAM,mBAAmB,CAAC,kBAA2C;AAC1E,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,iCAAa,YAA0C,gCAAgC,WAAW;AAC7G,QAAI,CAAC,MAAM;AACT,aAAO,oBAAI,IAA6B;AACxC,uCAAa,eAAe,gCAAgC,MAAM,WAAW;AAAA,IAC/E;AACA,SAAK,IAAI,eAAe,WAAW;AAAA,EACrC;AACF;AAEO,MAAM,yBAAyB,CAAC,WAA0D;AAC/F,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,gCAAgC,WAAW;AAC7E;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport const ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:attribute-changed');\nexport const ATTRIBUTE_CHANGED_WILDCARD = '*';\n\nexport function attributeChanged(attributeName: string | string[]): MethodDecorator;\nexport function attributeChanged(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;\nexport function attributeChanged(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)[]>>(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n    if (!meta) {\n      meta = new Map<string, (string | symbol)[]>();\n      ReflectUtils.defineMetadata(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 getAttributeChangedMap = (target: any): Map<string, string | symbol> | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAEtB,MAAM,iCAAiC,OAAO,wCAAwC;AACtF,MAAM,6BAA6B;AAInC,SAAS,iBAAiB,MAAkC,MAAwB,MAAmD;AAC5I,QAAM,YAAY,CAAC,eAAuB,QAAgB,gBAAiC;AACzF,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,iCAAa,YAA8C,gCAAgC,WAAW;AACjH,QAAI,CAAC,MAAM;AACT,aAAO,oBAAI,IAAiC;AAC5C,uCAAa,eAAe,gCAAgC,MAAM,WAAW;AAAA,IAC/E;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,yBAAyB,CAAC,WAA0D;AAC/F,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,gCAAgC,WAAW;AAC7E;",
   "names": []
 }

package/dist/cjs/decorators/{element.js → elementDefind.js}

@@ -15,17 +15,20 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var element_exports = {};
-__export(element_exports, {
+var elementDefind_exports = {};
+__export(elementDefind_exports, {
   ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
-  element: () => element,
+  elementDefind: () => elementDefind,
   getElementConfig: () => getElementConfig
 });
-module.exports = __toCommonJS(element_exports);
+module.exports = __toCommonJS(elementDefind_exports);
 var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
 var import_attributeChanged = require("./attributeChanged");
 var import_template = require("./template");
 var import_style = require("./style");
+var import_query = require("./query");
+var import_queryAll = require("./queryAll");
+var import_addEventListener = require("./addEventListener");
 const ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
 const BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
 const registerTag = (className, tagName) => {
@@ -91,7 +94,7 @@ const registerTag = (className, tagName) => {
   ["HTMLVideoElement", "video"],
   ["HTMLHeadingElement", "h1"]
 ].forEach(([cls, tag]) => registerTag(cls, tag));
-const element = (inConfig) => (constructor) => {
+const elementDefind = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { tagName: inConfig } : inConfig;
   let extendsTagName = config.extends;
   if (!extendsTagName) {
@@ -104,7 +107,7 @@ const element = (inConfig) => (constructor) => {
     }
   }
   const attributeChangedMap = (0, import_attributeChanged.getAttributeChangedMap)(constructor);
-  const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()) : [];
+  const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()).filter((it) => it !== import_attributeChanged.ATTRIBUTE_CHANGED_WILDCARD) : [];
   const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromDecorators])];
   const NewClass = class extends constructor {
     static get observedAttributes() {
@@ -112,11 +115,68 @@ const element = (inConfig) => (constructor) => {
     }
     constructor(...args) {
       super(...args);
+      this._observer = null;
+      this._boundElements = /* @__PURE__ */ new WeakMap();
       if (config.useShadow === true && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
+    _syncDecorators() {
+      const queryMetadata = (0, import_query.getQueryMetadata)(this);
+      if (queryMetadata) {
+        queryMetadata.filter((it) => it.isMethod).forEach((it) => {
+          const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          const element = root.querySelector(it.selector);
+          if (element) {
+            let bound = this._boundElements.get(element);
+            if (!bound) {
+              bound = /* @__PURE__ */ new Set();
+              this._boundElements.set(element, bound);
+            }
+            if (!bound.has(it.propertyKey)) {
+              this[it.propertyKey](element);
+              bound.add(it.propertyKey);
+            }
+          }
+        });
+      }
+      const queryAllMetadata = (0, import_queryAll.getQueryAllMetadata)(this);
+      if (queryAllMetadata) {
+        queryAllMetadata.filter((it) => it.isMethod).forEach((it) => {
+          const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          const elements = root.querySelectorAll(it.selector);
+          this[it.propertyKey](elements);
+        });
+      }
+      const eventListeners = (0, import_addEventListener.getAddEventListenerMetadata)(this);
+      if (eventListeners) {
+        eventListeners.forEach((it) => {
+          const { selector, eventName, useShadow, ...options } = it.options;
+          const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          const targetElements = selector ? root.querySelectorAll(selector) : [this];
+          targetElements.forEach((targetElement) => {
+            if (targetElement) {
+              let bound = this._boundElements.get(targetElement);
+              if (!bound) {
+                bound = /* @__PURE__ */ new Set();
+                this._boundElements.set(targetElement, bound);
+              }
+              const eventKey = `event:${String(it.propertyKey)}:${eventName}`;
+              if (!bound.has(eventKey)) {
+                targetElement.addEventListener(eventName, (event) => {
+                  this[it.propertyKey](event);
+                }, options);
+                bound.add(eventKey);
+              }
+            }
+          });
+        });
+      }
+    }
     disconnectedCallback() {
+      if (this._observer) {
+        this._observer.disconnect();
+      }
       if (super.disconnectedCallback) {
         super.disconnectedCallback();
       }
@@ -132,9 +192,6 @@ const element = (inConfig) => (constructor) => {
       }
     }
     async connectedCallback() {
-      if (super.connectedCallback) {
-        await super.connectedCallback();
-      }
       const templateMethod = (0, import_template.getTemplateMethod)(this);
       const styleMethod = (0, import_style.getStyleMethod)(this);
       const template = templateMethod ? await this[templateMethod]() : void 0;
@@ -156,15 +213,36 @@ const element = (inConfig) => (constructor) => {
       } else {
         this.innerHTML = content;
       }
+      this._syncDecorators();
+      this._observer = new MutationObserver(() => {
+        this._syncDecorators();
+      });
+      const target = this.shadowRoot || this;
+      this._observer.observe(target, { childList: true, subtree: true });
+      if (super.connectedCallback) {
+        await super.connectedCallback();
+      }
     }
     // 4. Handle attribute changes and route to decorated methods
     attributeChangedCallback(name, oldValue, newValue) {
       if (super.attributeChangedCallback) {
         super.attributeChangedCallback(name, oldValue, newValue);
       }
-      const methodKey = attributeChangedMap?.get(name);
-      if (methodKey && typeof this[methodKey] === "function") {
-        this[methodKey](newValue, oldValue);
+      const methodKeys = attributeChangedMap?.get(name);
+      if (methodKeys && Array.isArray(methodKeys)) {
+        methodKeys.forEach((key) => {
+          if (typeof this[key] === "function") {
+            this[key](newValue, oldValue, name);
+          }
+        });
+      }
+      const wildcardMethodKeys = attributeChangedMap?.get(import_attributeChanged.ATTRIBUTE_CHANGED_WILDCARD);
+      if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {
+        wildcardMethodKeys.forEach((key) => {
+          if (typeof this[key] === "function") {
+            this[key](newValue, oldValue, name);
+          }
+        });
       }
     }
   };
@@ -180,4 +258,4 @@ const getElementConfig = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return import_ReflectUtils.ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
-//# sourceMappingURL=element.js.map
+//# sourceMappingURL=elementDefind.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/elementDefind.ts"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\nimport { getAttributeChangedMap, ATTRIBUTE_CHANGED_WILDCARD } from './attributeChanged';\nimport { getTemplateMethod } from './template';\nimport { getStyleMethod } from './style';\nimport { getQueryMetadata } from './query';\nimport { getQueryAllMetadata } from './queryAll';\nimport { getAddEventListenerMetadata } from './addEventListener';\n\nexport interface ElementConfig {\n  tagName: string;\n  useShadow?: boolean;\n  extends?: string;\n  observedAttributes?: string[];\n  customElementRegistry?: CustomElementRegistry;\n}\n\nexport const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');\n\nconst BUILT_IN_TAG_MAP = new Map<any, string>();\n\nconst registerTag = (className: string, tagName: string) => {\n  if (typeof globalThis !== 'undefined' && (globalThis as any)[className]) {\n    BUILT_IN_TAG_MAP.set((globalThis as any)[className], tagName);\n  }\n};\n\n// Register comprehensive list of supported tags for automatic extends inference\n[\n  ['HTMLAnchorElement', 'a'],\n  ['HTMLAreaElement', 'area'],\n  ['HTMLAudioElement', 'audio'],\n  ['HTMLBaseElement', 'base'],\n  ['HTMLButtonElement', 'button'],\n  ['HTMLCanvasElement', 'canvas'],\n  ['HTMLDataElement', 'data'],\n  ['HTMLDataListElement', 'datalist'],\n  ['HTMLDetailsElement', 'details'],\n  ['HTMLDialogElement', 'dialog'],\n  ['HTMLDivElement', 'div'],\n  ['HTMLDListElement', 'dl'],\n  ['HTMLEmbedElement', 'embed'],\n  ['HTMLFieldSetElement', 'fieldset'],\n  ['HTMLFormElement', 'form'],\n  ['HTMLHRElement', 'hr'],\n  ['HTMLIFrameElement', 'iframe'],\n  ['HTMLImageElement', 'img'],\n  ['HTMLInputElement', 'input'],\n  ['HTMLLabelElement', 'label'],\n  ['HTMLLegendElement', 'legend'],\n  ['HTMLLIElement', 'li'],\n  ['HTMLLinkElement', 'link'],\n  ['HTMLMapElement', 'map'],\n  ['HTMLMetaElement', 'meta'],\n  ['HTMLMeterElement', 'meter'],\n  ['HTMLModElement', 'del'],\n  ['HTMLObjectElement', 'object'],\n  ['HTMLOListElement', 'ol'],\n  ['HTMLOptGroupElement', 'optgroup'],\n  ['HTMLOptionElement', 'option'],\n  ['HTMLOutputElement', 'output'],\n  ['HTMLParagraphElement', 'p'],\n  ['HTMLParamElement', 'param'],\n  ['HTMLPictureElement', 'picture'],\n  ['HTMLPreElement', 'pre'],\n  ['HTMLProgressElement', 'progress'],\n  ['HTMLQuoteElement', 'blockquote'],\n  ['HTMLScriptElement', 'script'],\n  ['HTMLSelectElement', 'select'],\n  ['HTMLSlotElement', 'slot'],\n  ['HTMLSourceElement', 'source'],\n  ['HTMLSpanElement', 'span'],\n  ['HTMLStyleElement', 'style'],\n  ['HTMLTableElement', 'table'],\n  ['HTMLTableSectionElement', 'tbody'],\n  ['HTMLTableCellElement', 'td'],\n  ['HTMLTemplateElement', 'template'],\n  ['HTMLTextAreaElement', 'textarea'],\n  ['HTMLTimeElement', 'time'],\n  ['HTMLTitleElement', 'title'],\n  ['HTMLTableRowElement', 'tr'],\n  ['HTMLTrackElement', 'track'],\n  ['HTMLUListElement', 'ul'],\n  ['HTMLVideoElement', 'video'],\n  ['HTMLHeadingElement', 'h1']\n].forEach(([cls, tag]) => registerTag(cls, tag));\n\nexport const elementDefind =\n  (inConfig: ElementConfig | string): ClassDecorator =>\n  (constructor: any) => {\n    const config: ElementConfig = typeof inConfig === 'string' ? { tagName: inConfig } : inConfig;\n\n    // 1. Automatically derive extendsTagName from prototype chain if not provided\n    let extendsTagName = config.extends;\n    if (!extendsTagName) {\n      let proto = Object.getPrototypeOf(constructor);\n      while (proto && proto !== HTMLElement && proto !== Function.prototype) {\n        extendsTagName = BUILT_IN_TAG_MAP.get(proto);\n        if (extendsTagName) break;\n        proto = Object.getPrototypeOf(proto);\n      }\n    }\n\n    // 2. Automatically collect observed attributes from @attributeChanged decorators\n    const attributeChangedMap = getAttributeChangedMap(constructor);\n    const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()).filter(it => it !== ATTRIBUTE_CHANGED_WILDCARD) : [];\n    const mergedObservedAttributes = [...new Set([...(config.observedAttributes ?? []), ...observedFromDecorators])];\n\n    // 3. Create a new anonymous class that extends the original constructor\n    const NewClass = class extends (constructor as any) {\n      private _observer: MutationObserver | null = null;\n      private _boundElements = new WeakMap<Element, Set<string | symbol>>();\n\n      static get observedAttributes() {\n        return mergedObservedAttributes;\n      }\n\n      constructor(...args: any[]) {\n        super(...args);\n        if (config.useShadow === true && !this.shadowRoot) {\n          this.attachShadow({ mode: 'open' });\n        }\n      }\n\n      private _syncDecorators() {\n        // 5. Execute @query and @queryAll methods\n        const queryMetadata = getQueryMetadata(this);\n        if (queryMetadata) {\n          queryMetadata\n            .filter(it => it.isMethod)\n            .forEach(it => {\n              const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;\n              const element = root.querySelector(it.selector);\n\n              // 중복 호출 방지: 해당 selector로 찾은 요소가 이전과 다를 때만 호출하거나,\n              // 또는 매번 호출할지 결정해야 함. 여기서는 새로운 요소가 발견되면 호출하는 방식으로 처리.\n              if (element) {\n                let bound = this._boundElements.get(element);\n                if (!bound) {\n                  bound = new Set();\n                  this._boundElements.set(element, bound);\n                }\n                if (!bound.has(it.propertyKey)) {\n                  (this as any)[it.propertyKey](element);\n                  bound.add(it.propertyKey);\n                }\n              }\n            });\n        }\n\n        const queryAllMetadata = getQueryAllMetadata(this);\n        if (queryAllMetadata) {\n          queryAllMetadata\n            .filter(it => it.isMethod)\n            .forEach(it => {\n              const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;\n              const elements = root.querySelectorAll(it.selector);\n\n              // queryAll은 목록이 바뀔 수 있으므로 일단 호출하되,\n              // 내부 로직은 사용자에게 맡기거나 좀 더 정교한 비교가 필요할 수 있음.\n              // 여기서는 단순하게 호출만 다시 함. (사용자가 요청한 '다시 호출' 반영)\n              (this as any)[it.propertyKey](elements);\n            });\n        }\n\n        // 6. Register @addEventListener methods\n        const eventListeners = getAddEventListenerMetadata(this);\n        if (eventListeners) {\n          eventListeners.forEach(it => {\n            const { selector, eventName, useShadow, ...options } = it.options;\n            const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;\n            const targetElements = selector ? root.querySelectorAll(selector) : [this as any as Element];\n\n            targetElements.forEach(targetElement => {\n              if (targetElement) {\n                let bound = this._boundElements.get(targetElement);\n                if (!bound) {\n                  bound = new Set();\n                  this._boundElements.set(targetElement, bound);\n                }\n\n                // 중복 바인딩 방지: (요소, 이벤트, 메서드) 조합 확인\n                const eventKey = `event:${String(it.propertyKey)}:${eventName}`;\n                if (!bound.has(eventKey)) {\n                  targetElement.addEventListener(\n                    eventName,\n                    event => {\n                      (this as any)[it.propertyKey](event);\n                    },\n                    options\n                  );\n                  bound.add(eventKey);\n                }\n              }\n            });\n          });\n        }\n      }\n\n      disconnectedCallback() {\n        if (this._observer) {\n          this._observer.disconnect();\n        }\n        if (super.disconnectedCallback) {\n          super.disconnectedCallback();\n        }\n      }\n\n      connectedMoveCallback() {\n        //default logic...\n        if (super.connectedMoveCallback) {\n          super.connectedMoveCallback();\n        }\n      }\n\n      adoptedCallback() {\n        //default logic...\n        if (super.adoptedCallback) {\n          super.adoptedCallback();\n        }\n      }\n\n      async connectedCallback() {\n        const templateMethod = getTemplateMethod(this);\n        const styleMethod = getStyleMethod(this);\n\n        const template = templateMethod ? await (this as any)[templateMethod]() : undefined;\n        const style = styleMethod ? await (this as any)[styleMethod]() : undefined;\n\n        // If not using shadow DOM and no decorators are present, do nothing\n        if (!this.shadowRoot && template === undefined && style === undefined) {\n          return;\n        }\n\n        let content = '';\n        if (style !== undefined && style.trim().length > 0) {\n          content += `<style>${style}</style>`;\n        }\n\n        if (template !== undefined) {\n          content += template;\n        } else if (!this.shadowRoot) {\n          content += this.innerHTML;\n        }\n\n        if (this.shadowRoot) {\n          this.shadowRoot.innerHTML = content;\n        } else {\n          this.innerHTML = content;\n        }\n\n        // 초기 동기화\n        (this as any)._syncDecorators();\n\n        // 7. Watch for DOM changes (MutationObserver)\n        this._observer = new MutationObserver(() => {\n          (this as any)._syncDecorators();\n        });\n        const target = this.shadowRoot || this;\n        this._observer.observe(target, { childList: true, subtree: true });\n\n        if (super.connectedCallback) {\n          await super.connectedCallback();\n        }\n      }\n\n      // 4. Handle attribute changes and route to decorated methods\n      attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n        // Call the original callback if it exists\n        if (super.attributeChangedCallback) {\n          super.attributeChangedCallback(name, oldValue, newValue);\n        }\n\n        // Call all methods associated with @attributeChanged\n        const methodKeys = attributeChangedMap?.get(name);\n        if (methodKeys && Array.isArray(methodKeys)) {\n          methodKeys.forEach(key => {\n            if (typeof (this as any)[key] === 'function') {\n              (this as any)[key](newValue, oldValue, name);\n            }\n          });\n        }\n\n        // Call the wildcard methods if they exist\n        const wildcardMethodKeys = attributeChangedMap?.get(ATTRIBUTE_CHANGED_WILDCARD);\n        if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {\n          wildcardMethodKeys.forEach(key => {\n            if (typeof (this as any)[key] === 'function') {\n              (this as any)[key](newValue, oldValue, name);\n            }\n          });\n        }\n      }\n    };\n\n    // 5. Register Custom Element using specified or default registry\n    const registry = config.customElementRegistry || (typeof customElements !== 'undefined' ? customElements : undefined);\n    if (registry && !registry.get(config.tagName)) {\n      const options = extendsTagName ? { extends: extendsTagName } : undefined;\n      registry.define(config.tagName, NewClass as any, options);\n    }\n\n    // 6. Save metadata\n    ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);\n\n    return NewClass as any;\n  };\n\nexport const getElementConfig = (target: any): ElementConfig | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/decorators/query.js

@@ -0,0 +1,53 @@
+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 query_exports = {};
+__export(query_exports, {
+  QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
+  getQueryMetadata: () => getQueryMetadata,
+  query: () => query
+});
+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) => {
+    const isMethod = !!descriptor;
+    const constructor = target.constructor;
+    let queries = import_ReflectUtils.ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
+    if (!queries) {
+      queries = [];
+      import_ReflectUtils.ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
+    }
+    queries.push({ selector, options, propertyKey, isMethod });
+    if (!isMethod) {
+      Object.defineProperty(target, propertyKey, {
+        get() {
+          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          return root.querySelector(selector);
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  };
+};
+const getQueryMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
+};
+//# sourceMappingURL=query.js.map

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

@@ -0,0 +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 elementDefind\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;",
+  "names": []
+}

package/dist/cjs/decorators/queryAll.js

@@ -0,0 +1,53 @@
+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 queryAll_exports = {};
+__export(queryAll_exports, {
+  QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
+  getQueryAllMetadata: () => getQueryAllMetadata,
+  queryAll: () => queryAll
+});
+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) => {
+    const isMethod = !!descriptor;
+    const constructor = target.constructor;
+    let queries = import_ReflectUtils.ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
+    if (!queries) {
+      queries = [];
+      import_ReflectUtils.ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
+    }
+    queries.push({ selector, options, propertyKey, isMethod });
+    if (!isMethod) {
+      Object.defineProperty(target, propertyKey, {
+        get() {
+          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          return root.querySelectorAll(selector);
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  };
+};
+const getQueryAllMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
+};
+//# sourceMappingURL=queryAll.js.map

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

@@ -0,0 +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 elementDefind\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;",
+  "names": []
+}