@dooboostore/simple-web-component 1.0.3 → 1.0.4

package/README.md

@@ -5,10 +5,11 @@
 ## Key Features
 
 - **Decorator-driven**: Use `@elementDefine`, `@template`, `@style`, `@query`, and more to define components.
-- **Surgical Updates**: High-performance rendering using the "Slot-per-Row" pattern.
+- **Surgical Updates**: High-performance rendering using Proxy-based reactivity.
 - **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`, `swc-choose`, and `swc-object`.
+- **Comprehensive `is` Support**: Logic variants for every standard HTML element (e.g., `swc-for-of-ul`, `swc-if-div`).
 - **Scoped Context**: Support for `as` and `as-index` to avoid naming collisions in nested structures.
 
 ## Installation
@@ -17,13 +18,21 @@
 pnpm add @dooboostore/simple-web-component
 ```
 
+### Safari Support (Essential Polyfill)
+
+Safari does not natively support "Customized Built-in Elements" (`is` attribute). To support Safari, you **must** include the following polyfill at the top of your application:
+
+```javascript
+import '@ungap/custom-elements';
+```
+
 ## API Reference
 
 ### Core Decorators
 
 | Decorator | Target | Description |
 | :--- | :--- | :--- |
-| `@elementDefine(config)` | Class | Registers the component. Supports `tagName`, `useShadow`, `extends`. |
+| `@elementDefine(config)` | Class | Registers the component. Supports `name`, `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 (`*`). |
@@ -31,64 +40,68 @@ pnpm add @dooboostore/simple-web-component
 | `@queryAll(selector, options)`| Prop/Method | Queries multiple elements. |
 | `@addEventListener(opts)`| Method | Declaratively binds events. Automatically re-binds on DOM changes. |
 
-### Built-in Components
-
-All built-in components extend `SwcHTMLElementBase` and support the `as` attribute for custom data scoping.
+### Built-in Logic Components (Autonomous)
 
-#### `swc-for-of` (Looping)
-A high-performance list renderer that uses slots to update only changed items.
-- `as`: (Optional) Alias for the item (default: `value`).
-- `as-index`: (Optional) Alias for the index (default: `index`).
+These are standalone custom elements that use Shadow DOM.
 
+#### `swc-for-of`
 ```html
-<ul>
-  <swc-for-of id="my-list" as="item" as-index="i">
-    <li>{{i}}: {{item.name}}</li>
-  </swc-for-of>
-</ul>
+<swc-for-of id="my-list" as="item">
+  <li>{{item.name}}</li>
+</swc-for-of>
 <script>
-  const el = document.getElementById('my-list');
-  el.value = [{name: 'Kim'}, {name: 'Lee'}];
-  el.value.push({name: 'Park'}); // Automatically updates UI
+  document.getElementById('my-list').swcValue = [{name: 'Kim'}, {name: 'Lee'}];
 </script>
 ```
 
-#### `swc-object` (Object Binding)
-Binds a single object and updates the UI surgically when properties change.
+#### `swc-object`
 ```html
-<swc-object id="user-profile" as="u">
+<swc-object id="my-obj" as="u">
   <div>Name: {{u.name}}</div>
-  <div>Age: {{u.age}}</div>
 </swc-object>
 <script>
-  const el = document.getElementById('user-profile');
-  el.value = { name: 'Kim', age: 20 };
-  el.value.name = 'Lee'; // Automatically updates UI via Proxy
+  const el = document.getElementById('my-obj');
+  el.swcValue = { name: 'Kim' };
+  el.swcValue.name = 'Lee'; // UI updates automatically
 </script>
 ```
 
-#### `swc-if` (Conditional)
-Conditionally renders content based on a truthy value or expression.
+### Customized Built-in Elements (`is` variants)
+
+For every standard HTML tag (e.g., `ul`, `div`, `button`), there are corresponding logic variants. The naming convention is `swc-[logic]-[tag]`.
+
+| Logic | Example Tag Name | Usage Example |
+| :--- | :--- | :--- |
+| **ForOf** | `swc-for-of-ul` | `<ul is="swc-for-of-ul">...</ul>` |
+| **If** | `swc-if-div` | `<div is="swc-if-div">...</div>` |
+| **Object** | `swc-object-span` | `<span is="swc-object-span">...</span>` |
+| **Choose** | `swc-choose-div` | `<div is="swc-choose-div">...</div>` |
+
+**Example (ul):**
 ```html
-<swc-if value="{{value.age >= 19}}">
-  <div>Adult Content</div>
-</swc-if>
+<ul is="swc-for-of-ul" as="item">
+  <li>{{item.name}}</li>
+</ul>
 ```
 
-#### `swc-choose` (Branching)
-Provides a switch-case style branching logic.
+## Advanced Usage
+
+### Scoped Context (`as`)
+Use the `as` attribute to define a custom variable name for your data, preventing collisions in nested loops or objects.
+
 ```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>
+<swc-object swc-value="{{user}}" as="u">
+  <h3>{{u.name}}</h3>
+  <swc-for-of swc-value="{{u.friends}}" as="f">
+    <li>Friend: {{f.name}}</li>
+  </swc-for-of>
+</swc-object>
 ```
 
-## Advanced: Extending SwcHTMLElementBase
-
-You can create your own high-performance components by extending `SwcHTMLElementBase`. It provides `applyData`, `createReactiveProxy`, and automatic `as` handling.
+### Extending Base Classes
+You can create your own specialized components by extending one of the many base classes provided:
+- `SwcHTMLElementBase` (for autonomous elements)
+- `SwcHTMLDivElementBase`, `SwcHTMLUListElementBase`, etc. (for `is` variants)
 
 ## License
-
 MIT

package/dist/cjs/bundle-entry.js

@@ -14,5 +14,6 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var bundle_entry_exports = {};
 module.exports = __toCommonJS(bundle_entry_exports);
+var import_reflect_metadata = require("reflect-metadata");
 __reExport(bundle_entry_exports, require("./index"), module.exports);
 //# sourceMappingURL=bundle-entry.js.map

package/dist/cjs/bundle-entry.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/bundle-entry.ts"],
-  "sourcesContent": ["export * from './index';\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,iCAAc,oBAAd;",
+  "sourcesContent": ["import 'reflect-metadata';\nexport * from './index';\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAO;AACP,iCAAc,oBADd;",
   "names": []
 }

package/dist/cjs/decorators/elementDefine.js

@@ -95,7 +95,7 @@ const registerTag = (className, tagName) => {
   ["HTMLHeadingElement", "h1"]
 ].forEach(([cls, tag]) => registerTag(cls, tag));
 const elementDefine = (inConfig) => (constructor) => {
-  const config = typeof inConfig === "string" ? { tagName: inConfig } : inConfig;
+  const config = typeof inConfig === "string" ? { name: inConfig } : inConfig;
   let extendsTagName = config.extends;
   if (!extendsTagName) {
     let proto = Object.getPrototypeOf(constructor);
@@ -247,9 +247,15 @@ const elementDefine = (inConfig) => (constructor) => {
     }
   };
   const registry = config.customElementRegistry || (typeof customElements !== "undefined" ? customElements : void 0);
-  if (registry && !registry.get(config.tagName)) {
+  if (registry && !registry.get(config.name)) {
     const options = extendsTagName ? { extends: extendsTagName } : void 0;
-    registry.define(config.tagName, NewClass, options);
+    if (extendsTagName && typeof document !== "undefined") {
+      const isSupported = document.createElement(extendsTagName, { is: "any" }).outerHTML.indexOf("is=") !== -1;
+      if (!isSupported) {
+        console.warn(`[SWC] Browser does not support 'is' attribute (Customized Built-in Elements). If you are on Safari, please include '@ungap/custom-elements' polyfill.`);
+      }
+    }
+    registry.define(config.name, NewClass, options);
   }
   import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
   return NewClass;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/elementDefine.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 elementDefine =\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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",
+  "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  name: 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 elementDefine =\n  (inConfig: ElementConfig | string): ClassDecorator =>\n  (constructor: any) => {\n    const config: ElementConfig = typeof inConfig === 'string' ? { name: inConfig } : inConfig;\n\n    // 1. Automatically derive extendsTagName from prototype chain if not provided\n\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.name)) {\n      const options = extendsTagName ? { extends: extendsTagName } : undefined;\n\n      // Safari support check for Customized Built-in Elements\n      if (extendsTagName && typeof document !== 'undefined') {\n        const isSupported = document.createElement(extendsTagName, { is: 'any' }).outerHTML.indexOf('is=') !== -1;\n        if (!isSupported) {\n          console.warn(`[SWC] Browser does not support 'is' attribute (Customized Built-in Elements). ` + `If you are on Safari, please include '@ungap/custom-elements' polyfill.`);\n        }\n      }\n\n      registry.define(config.name, 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/elements/SwcChoose.js

@@ -34,14 +34,14 @@ let SwcChoose = class SwcChoose2 extends HTMLElement {
   constructor() {
     super(...arguments);
     this._observer = null;
-    this._value = void 0;
+    this._swcValue = void 0;
   }
-  set value(val) {
-    this._value = val;
+  set swcValue(val) {
+    this._swcValue = val;
     this.evaluate();
   }
-  get value() {
-    return this._value;
+  get swcValue() {
+    return this._swcValue;
   }
   styles() {
     return `:host { display: contents; }`;
@@ -61,7 +61,7 @@ let SwcChoose = class SwcChoose2 extends HTMLElement {
     const whens = Array.from(this.querySelectorAll("swc-when"));
     const other = this.querySelector("swc-other");
     let matched = false;
-    const chooseValue = this.getAttribute("value") ?? this._value;
+    const chooseValue = this.getAttribute("swc-value") ?? this.getAttribute("value") ?? this._swcValue;
     whens.forEach((when) => {
       if (matched) {
         when.style.display = "none";
@@ -112,6 +112,6 @@ __decorate([
   __metadata("design:returntype", void 0)
 ], SwcChoose.prototype, "render", null);
 SwcChoose = __decorate([
-  (0, import__.elementDefine)({ tagName: "swc-choose", useShadow: true })
+  (0, import__.elementDefine)({ name: "swc-choose", useShadow: true })
 ], SwcChoose);
 //# sourceMappingURL=SwcChoose.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcChoose.ts"],
-  "sourcesContent": ["import { elementDefine, template, style } from '../index';\n\n@elementDefine({ tagName: 'swc-choose', useShadow: true })\nexport class SwcChoose extends HTMLElement {\n  private _observer: MutationObserver | null = null;\n  private _value: any = undefined;\n\n  set value(val: any) {\n    this._value = val;\n    this.evaluate();\n  }\n\n  get value() {\n    return this._value;\n  }\n\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  render() {\n    return `<slot id=\"choose-slot\"></slot>`;\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 (문자열인 경우 \"null\", \"undefined\" 등 처리)\n    const chooseValue = this.getAttribute('value') ?? this._value;\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,eAA+C;;;;;;;;;;AAGxC,IAAM,YAAN,MAAMA,mBAAkB,YAAW;EAAnC,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,SAAc;EA6ExB;EA3EE,IAAI,MAAM,KAAQ;AAChB,SAAK,SAAS;AACd,SAAK,SAAQ;EACf;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,SAAM;AACJ,WAAO;EACT;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,OAAO,KAAK,KAAK;AAEvD,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;;AAhEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AAlBU,YAAS,WAAA;MADrB,wBAAc,EAAE,SAAS,cAAc,WAAW,KAAI,CAAE;GAC5C,SAAS;",
+  "sourcesContent": ["import { elementDefine, template, style } from '../index';\n\n@elementDefine({ name: 'swc-choose', useShadow: true })\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  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  render() {\n    return `<slot id=\"choose-slot\"></slot>`;\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,eAA+C;;;;;;;;;;AAGxC,IAAM,YAAN,MAAMA,mBAAkB,YAAW;EAAnC,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;EA6E3B;EA3EE,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,SAAK,SAAQ;EACf;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,SAAM;AACJ,WAAO;EACT;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;;AAhEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AAlBU,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,cAAc,WAAW,KAAI,CAAE;GACzC,SAAS;",
   "names": ["SwcChoose"]
 }

package/dist/cjs/elements/SwcForOf.js

@@ -34,16 +34,16 @@ var __metadata = function(k, v) {
 let SwcForOf = class SwcForOf2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
   constructor() {
     super();
-    this._value = [];
+    this._swcValue = [];
   }
-  set value(val) {
+  set swcValue(val) {
     if (!Array.isArray(val))
       val = [];
-    this._value = this.createReactiveProxy(val, () => this.renderAll(), (idx, v) => this.updateSingleRow(idx, v));
+    this._swcValue = this.createReactiveProxy(val, () => this.renderAll(), (idx, v) => this.updateSingleRow(idx, v));
     this.renderAll();
   }
-  get value() {
-    return this._value;
+  get swcValue() {
+    return this._swcValue;
   }
   styles() {
     return `:host { display: contents; }`;
@@ -104,7 +104,7 @@ let SwcForOf = class SwcForOf2 extends import_SwcHTMLElementBase.SwcHTMLElementB
       if (s.id !== "tpl-slot")
         s.remove();
     });
-    this._value.forEach((item, index) => this.renderRow(item, index));
+    this._swcValue.forEach((item, index) => this.renderRow(item, index));
   }
 };
 __decorate([
@@ -120,7 +120,7 @@ __decorate([
   __metadata("design:returntype", void 0)
 ], SwcForOf.prototype, "renderTemplate", null);
 SwcForOf = __decorate([
-  (0, import__.elementDefine)({ tagName: "swc-for-of", useShadow: true }),
+  (0, import__.elementDefine)({ name: "swc-for-of", useShadow: true }),
   __metadata("design:paramtypes", [])
 ], SwcForOf);
 //# sourceMappingURL=SwcForOf.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcForOf.ts"],
-  "sourcesContent": ["import { elementDefine, template, style } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ tagName: 'swc-for-of', useShadow: true })\nexport class SwcForOf extends SwcHTMLElementBase {\n  private _value: any[] = [];\n\n  constructor() {\n    super();\n  }\n\n  set value(val: any[]) {\n    if (!Array.isArray(val)) val = [];\n    this._value = this.createReactiveProxy(\n      val,\n      () => this.renderAll(),\n      (idx, v) => this.updateSingleRow(idx, v)\n    );\n    this.renderAll();\n  }\n\n  get value(): any[] {\n    return this._value;\n  }\n\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\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._value.forEach((item, index) => this.renderRow(item, index));\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAA+C;AAC/C,gCAAmC;;;;;;;;;;AAG5B,IAAM,WAAN,MAAMA,kBAAiB,6CAAkB;EAG9C,cAAA;AACE,UAAK;AAHC,SAAA,SAAgB,CAAA;EAIxB;EAEA,IAAI,MAAM,KAAU;AAClB,QAAI,CAAC,MAAM,QAAQ,GAAG;AAAG,YAAM,CAAA;AAC/B,SAAK,SAAS,KAAK,oBACjB,KACA,MAAM,KAAK,UAAS,GACpB,CAAC,KAAK,MAAM,KAAK,gBAAgB,KAAK,CAAC,CAAC;AAE1C,SAAK,UAAS;EAChB;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,iBAAc;AACZ,WAAO;EACT;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,OAAO,QAAQ,CAAC,MAAM,UAAU,KAAK,UAAU,MAAM,KAAK,CAAC;EAClE;;AAnEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AA1BU,WAAQ,WAAA;MADpB,wBAAc,EAAE,SAAS,cAAc,WAAW,KAAI,CAAE;;GAC5C,QAAQ;",
+  "sourcesContent": ["import { elementDefine, template, style } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-for-of', useShadow: true })\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  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\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,eAA+C;AAC/C,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,SAAM;AACJ,WAAO;EACT;EAGA,iBAAc;AACZ,WAAO;EACT;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;;AAnEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AA1BU,WAAQ,WAAA;MADpB,wBAAc,EAAE,MAAM,cAAc,WAAW,KAAI,CAAE;;GACzC,QAAQ;",
   "names": ["SwcForOf"]
 }

package/dist/cjs/elements/SwcHTMLElementBase.js

@@ -20,6 +20,7 @@ __export(SwcHTMLElementBase_exports, {
   SwcHTMLElementBase: () => SwcHTMLElementBase
 });
 module.exports = __toCommonJS(SwcHTMLElementBase_exports);
+var import_Utils = require("../utils/Utils");
 class SwcHTMLElementBase extends HTMLElement {
   constructor() {
     super();
@@ -30,73 +31,23 @@ class SwcHTMLElementBase extends HTMLElement {
   initCore() {
     this._asKey = this.getAttribute("as") || "value";
     this._asIndexKey = this.getAttribute("as-index") || "index";
+    if (this._masterTplNodes.length > 0) return;
     const tplSlot = this.shadowRoot?.getElementById("tpl-slot");
     if (tplSlot) {
       this._masterTplNodes = tplSlot.assignedNodes().map((n) => n.cloneNode(true));
+    } else if (this.childNodes.length > 0) {
+      this._masterTplNodes = Array.from(this.childNodes).map((n) => n.cloneNode(true));
     }
   }
-  getValueByPath(obj, path) {
-    if (path === this._asKey) return obj;
-    if (path.startsWith(`${this._asKey}.`)) {
-      return path.split(".").slice(1).reduce((acc, part) => acc && acc[part], obj);
-    }
-    return void 0;
-  }
   applyData(node, data, index) {
-    const context = {};
-    if (index !== void 0) {
-      context[this._asIndexKey] = index.toString();
-    }
-    const walk = (n) => {
-      if (n.nodeType === Node.TEXT_NODE) {
-        if (!n._original) n._original = n.textContent;
-        let text = n._original;
-        text = text.replace(/{{(.*?)}}/g, (match, path) => {
-          path = path.trim();
-          if (context[path] !== void 0) return context[path];
-          const val = this.getValueByPath(data, path);
-          return val !== void 0 ? val : match;
-        });
-        if (n.textContent !== text) n.textContent = text;
-      } else if (n.nodeType === Node.ELEMENT_NODE) {
-        const el = n;
-        Array.from(el.attributes).forEach((a) => {
-          if (!a._original) a._original = a.value;
-          let val = a._original;
-          val = val.replace(/{{(.*?)}}/g, (match, path) => {
-            path = path.trim();
-            if (context[path] !== void 0) return context[path];
-            const v = this.getValueByPath(data, path);
-            return v !== void 0 ? v : match;
-          });
-          if (a.value !== val) a.value = val;
-        });
-        el.childNodes.forEach(walk);
-      }
-    };
-    walk(node);
+    import_Utils.SwcUtils.applyData(node, data, {
+      asKey: this._asKey,
+      asIndexKey: this._asIndexKey,
+      index
+    });
   }
-  /**
-   * 객체/배열의 변경을 감지하는 Proxy 생성 유틸리티
-   */
   createReactiveProxy(target, onChange, onIndexChange) {
-    return new Proxy(target, {
-      set: (t, prop, val) => {
-        const isIndex = !isNaN(Number(prop));
-        t[prop] = val;
-        if (isIndex && onIndexChange) {
-          onIndexChange(Number(prop), val);
-        } else {
-          onChange();
-        }
-        return true;
-      },
-      deleteProperty: (t, prop) => {
-        delete t[prop];
-        onChange();
-        return true;
-      }
-    });
+    return import_Utils.SwcUtils.createReactiveProxy(target, onChange, onIndexChange);
   }
 }
 //# sourceMappingURL=SwcHTMLElementBase.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcHTMLElementBase.ts"],
-  "sourcesContent": ["import { getTemplateMethod } from '../decorators/template';\nimport { getStyleMethod } from '../decorators/style';\n\nexport abstract class SwcHTMLElementBase extends HTMLElement {\n  protected _masterTplNodes: Node[] = [];\n  protected _asKey: string = 'value';\n  protected _asIndexKey: string = 'index';\n\n  constructor() {\n    super();\n  }\n\n  protected initCore() {\n    this._asKey = this.getAttribute('as') || 'value';\n    this._asIndexKey = this.getAttribute('as-index') || 'index';\n    const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;\n    if (tplSlot) {\n      this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));\n    }\n  }\n\n  protected getValueByPath(obj: any, path: string) {\n    if (path === this._asKey) return obj;\n    if (path.startsWith(`${this._asKey}.`)) {\n      return path\n        .split('.')\n        .slice(1)\n        .reduce((acc, part) => acc && acc[part], obj);\n    }\n    return undefined;\n  }\n\n  protected applyData(node: Node, data: any, index?: number) {\n    const context: Record<string, any> = {};\n    if (index !== undefined) {\n      context[this._asIndexKey] = index.toString();\n    }\n\n    const walk = (n: Node) => {\n      if (n.nodeType === Node.TEXT_NODE) {\n        if (!(n as any)._original) (n as any)._original = n.textContent;\n        let text = (n as any)._original;\n\n        text = text.replace(/{{(.*?)}}/g, (match: string, path: string) => {\n          path = path.trim();\n          if (context[path] !== undefined) return context[path];\n          const val = this.getValueByPath(data, path);\n          return val !== undefined ? val : match;\n        });\n        if (n.textContent !== text) n.textContent = text;\n      } else if (n.nodeType === Node.ELEMENT_NODE) {\n        const el = n as Element;\n        Array.from(el.attributes).forEach(a => {\n          if (!(a as any)._original) (a as any)._original = a.value;\n          let val = (a as any)._original;\n\n          val = val.replace(/{{(.*?)}}/g, (match: string, path: string) => {\n            path = path.trim();\n            if (context[path] !== undefined) return context[path];\n            const v = this.getValueByPath(data, path);\n            return v !== undefined ? v : match;\n          });\n          if (a.value !== val) a.value = val;\n        });\n        el.childNodes.forEach(walk);\n      }\n    };\n    walk(node);\n  }\n\n  /**\n   * \uAC1D\uCCB4/\uBC30\uC5F4\uC758 \uBCC0\uACBD\uC744 \uAC10\uC9C0\uD558\uB294 Proxy \uC0DD\uC131 \uC720\uD2F8\uB9AC\uD2F0\n   */\n  protected createReactiveProxy(target: any, onChange: () => void, onIndexChange?: (index: number, val: any) => void) {\n    return new Proxy(target, {\n      set: (t, prop, val) => {\n        const isIndex = !isNaN(Number(prop));\n        t[prop] = val;\n        if (isIndex && onIndexChange) {\n          onIndexChange(Number(prop), val);\n        } else {\n          onChange();\n        }\n        return true;\n      },\n      deleteProperty: (t, prop) => {\n        delete t[prop];\n        onChange();\n        return true;\n      }\n    });\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAe,2BAA2B,YAAY;AAAA,EAK3D,cAAc;AACZ,UAAM;AALR,SAAU,kBAA0B,CAAC;AACrC,SAAU,SAAiB;AAC3B,SAAU,cAAsB;AAAA,EAIhC;AAAA,EAEU,WAAW;AACnB,SAAK,SAAS,KAAK,aAAa,IAAI,KAAK;AACzC,SAAK,cAAc,KAAK,aAAa,UAAU,KAAK;AACpD,UAAM,UAAU,KAAK,YAAY,eAAe,UAAU;AAC1D,QAAI,SAAS;AACX,WAAK,kBAAkB,QAAQ,cAAc,EAAE,IAAI,OAAK,EAAE,UAAU,IAAI,CAAC;AAAA,IAC3E;AAAA,EACF;AAAA,EAEU,eAAe,KAAU,MAAc;AAC/C,QAAI,SAAS,KAAK,OAAQ,QAAO;AACjC,QAAI,KAAK,WAAW,GAAG,KAAK,MAAM,GAAG,GAAG;AACtC,aAAO,KACJ,MAAM,GAAG,EACT,MAAM,CAAC,EACP,OAAO,CAAC,KAAK,SAAS,OAAO,IAAI,IAAI,GAAG,GAAG;AAAA,IAChD;AACA,WAAO;AAAA,EACT;AAAA,EAEU,UAAU,MAAY,MAAW,OAAgB;AACzD,UAAM,UAA+B,CAAC;AACtC,QAAI,UAAU,QAAW;AACvB,cAAQ,KAAK,WAAW,IAAI,MAAM,SAAS;AAAA,IAC7C;AAEA,UAAM,OAAO,CAAC,MAAY;AACxB,UAAI,EAAE,aAAa,KAAK,WAAW;AACjC,YAAI,CAAE,EAAU,UAAW,CAAC,EAAU,YAAY,EAAE;AACpD,YAAI,OAAQ,EAAU;AAEtB,eAAO,KAAK,QAAQ,cAAc,CAAC,OAAe,SAAiB;AACjE,iBAAO,KAAK,KAAK;AACjB,cAAI,QAAQ,IAAI,MAAM,OAAW,QAAO,QAAQ,IAAI;AACpD,gBAAM,MAAM,KAAK,eAAe,MAAM,IAAI;AAC1C,iBAAO,QAAQ,SAAY,MAAM;AAAA,QACnC,CAAC;AACD,YAAI,EAAE,gBAAgB,KAAM,GAAE,cAAc;AAAA,MAC9C,WAAW,EAAE,aAAa,KAAK,cAAc;AAC3C,cAAM,KAAK;AACX,cAAM,KAAK,GAAG,UAAU,EAAE,QAAQ,OAAK;AACrC,cAAI,CAAE,EAAU,UAAW,CAAC,EAAU,YAAY,EAAE;AACpD,cAAI,MAAO,EAAU;AAErB,gBAAM,IAAI,QAAQ,cAAc,CAAC,OAAe,SAAiB;AAC/D,mBAAO,KAAK,KAAK;AACjB,gBAAI,QAAQ,IAAI,MAAM,OAAW,QAAO,QAAQ,IAAI;AACpD,kBAAM,IAAI,KAAK,eAAe,MAAM,IAAI;AACxC,mBAAO,MAAM,SAAY,IAAI;AAAA,UAC/B,CAAC;AACD,cAAI,EAAE,UAAU,IAAK,GAAE,QAAQ;AAAA,QACjC,CAAC;AACD,WAAG,WAAW,QAAQ,IAAI;AAAA,MAC5B;AAAA,IACF;AACA,SAAK,IAAI;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKU,oBAAoB,QAAa,UAAsB,eAAmD;AAClH,WAAO,IAAI,MAAM,QAAQ;AAAA,MACvB,KAAK,CAAC,GAAG,MAAM,QAAQ;AACrB,cAAM,UAAU,CAAC,MAAM,OAAO,IAAI,CAAC;AACnC,UAAE,IAAI,IAAI;AACV,YAAI,WAAW,eAAe;AAC5B,wBAAc,OAAO,IAAI,GAAG,GAAG;AAAA,QACjC,OAAO;AACL,mBAAS;AAAA,QACX;AACA,eAAO;AAAA,MACT;AAAA,MACA,gBAAgB,CAAC,GAAG,SAAS;AAC3B,eAAO,EAAE,IAAI;AACb,iBAAS;AACT,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import { SwcUtils } from '../utils/Utils';\n\nexport abstract class SwcHTMLElementBase extends HTMLElement {\n  protected _masterTplNodes: Node[] = [];\n  protected _asKey: string = 'value';\n  protected _asIndexKey: string = 'index';\n\n  constructor() {\n    super();\n  }\n\n  protected initCore() {\n    this._asKey = this.getAttribute('as') || 'value';\n    this._asIndexKey = this.getAttribute('as-index') || 'index';\n\n    if (this._masterTplNodes.length > 0) return; // \uC774\uBBF8 \uCD08\uAE30\uD654\uB428\n\n    const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;\n    if (tplSlot) {\n      this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));\n    } else if (this.childNodes.length > 0) {\n      // Light DOM\uC5D0\uC11C \uD15C\uD50C\uB9BF \uCD94\uCD9C\n      this._masterTplNodes = Array.from(this.childNodes).map(n => n.cloneNode(true));\n    }\n  }\n\n  protected applyData(node: Node, data: any, index?: number) {\n    SwcUtils.applyData(node, data, {\n      asKey: this._asKey,\n      asIndexKey: this._asIndexKey,\n      index\n    });\n  }\n\n  protected createReactiveProxy(target: any, onChange: () => void, onIndexChange?: (index: number, val: any) => void) {\n    return SwcUtils.createReactiveProxy(target, onChange, onIndexChange);\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAElB,MAAe,2BAA2B,YAAY;AAAA,EAK3D,cAAc;AACZ,UAAM;AALR,SAAU,kBAA0B,CAAC;AACrC,SAAU,SAAiB;AAC3B,SAAU,cAAsB;AAAA,EAIhC;AAAA,EAEU,WAAW;AACnB,SAAK,SAAS,KAAK,aAAa,IAAI,KAAK;AACzC,SAAK,cAAc,KAAK,aAAa,UAAU,KAAK;AAEpD,QAAI,KAAK,gBAAgB,SAAS,EAAG;AAErC,UAAM,UAAU,KAAK,YAAY,eAAe,UAAU;AAC1D,QAAI,SAAS;AACX,WAAK,kBAAkB,QAAQ,cAAc,EAAE,IAAI,OAAK,EAAE,UAAU,IAAI,CAAC;AAAA,IAC3E,WAAW,KAAK,WAAW,SAAS,GAAG;AAErC,WAAK,kBAAkB,MAAM,KAAK,KAAK,UAAU,EAAE,IAAI,OAAK,EAAE,UAAU,IAAI,CAAC;AAAA,IAC/E;AAAA,EACF;AAAA,EAEU,UAAU,MAAY,MAAW,OAAgB;AACzD,0BAAS,UAAU,MAAM,MAAM;AAAA,MAC7B,OAAO,KAAK;AAAA,MACZ,YAAY,KAAK;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEU,oBAAoB,QAAa,UAAsB,eAAmD;AAClH,WAAO,sBAAS,oBAAoB,QAAQ,UAAU,aAAa;AAAA,EACrE;AACF;",
   "names": []
 }

package/dist/cjs/elements/SwcIf.js

@@ -34,15 +34,15 @@ var __metadata = function(k, v) {
 let SwcIf = class SwcIf2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
   constructor() {
     super();
-    this._value = false;
+    this._swcValue = false;
     this._observer = null;
   }
-  set value(val) {
-    this._value = val;
+  set swcValue(val) {
+    this._swcValue = val;
     this.render();
   }
-  get value() {
-    return this._value;
+  get swcValue() {
+    return this._swcValue;
   }
   styles() {
     return `:host { display: contents; }`;
@@ -62,10 +62,10 @@ let SwcIf = class SwcIf2 extends import_SwcHTMLElementBase.SwcHTMLElementBase {
   render() {
     if (!this.shadowRoot)
       return;
-    const attrValue = this.getAttribute("value");
+    const attrValue = this.getAttribute("swc-value") || this.getAttribute("value");
     if (attrValue !== null && attrValue.includes("{{"))
       return;
-    let displayValue = attrValue !== null ? attrValue : this._value;
+    let displayValue = attrValue !== null ? attrValue : this._swcValue;
     let isTruthy = !!displayValue;
     if (typeof displayValue === "string") {
       if (displayValue === "false" || displayValue === "0" || displayValue === "")
@@ -121,7 +121,7 @@ __decorate([
   __metadata("design:returntype", void 0)
 ], SwcIf.prototype, "renderTemplate", null);
 SwcIf = __decorate([
-  (0, import__.elementDefine)({ tagName: "swc-if", useShadow: true }),
+  (0, import__.elementDefine)({ name: "swc-if", useShadow: true }),
   __metadata("design:paramtypes", [])
 ], SwcIf);
 //# sourceMappingURL=SwcIf.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcIf.ts"],
-  "sourcesContent": ["import { elementDefine, template, style } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ tagName: 'swc-if', useShadow: true })\nexport class SwcIf extends SwcHTMLElementBase {\n  private _value: any = false;\n  private _observer: MutationObserver | null = null;\n\n  constructor() {\n    super();\n  }\n\n  set value(val: any) {\n    this._value = val;\n    this.render();\n  }\n\n  get value(): any {\n    return this._value;\n  }\n\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this._observer = new MutationObserver(() => this.render());\n    this._observer.observe(this, { attributes: true });\n    this.render();\n  }\n\n  disconnectedCallback() {\n    this._observer?.disconnect();\n  }\n\n  private render() {\n    if (!this.shadowRoot) return;\n\n    const attrValue = this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._value;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function(`return ${displayValue}`)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    Array.from(this.children).forEach(c => {\n      if (c.getAttribute('slot') === 'if-content') {\n        c.remove();\n      }\n    });\n\n    const existingSlot = this.shadowRoot.querySelector('slot[name=\"if-content\"]');\n    if (existingSlot) existingSlot.remove();\n\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      const contentSlot = document.createElement('slot');\n      contentSlot.name = 'if-content';\n      this.shadowRoot.appendChild(contentSlot);\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', 'if-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', 'if-content');\n          span.appendChild(clone);\n          this.appendChild(span);\n          return;\n        }\n        this.appendChild(clone);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAA+C;AAC/C,gCAAmC;;;;;;;;;;AAG5B,IAAM,QAAN,MAAMA,eAAc,6CAAkB;EAI3C,cAAA;AACE,UAAK;AAJC,SAAA,SAAc;AACd,SAAA,YAAqC;EAI7C;EAEA,IAAI,MAAM,KAAQ;AAChB,SAAK,SAAS;AACd,SAAK,OAAM;EACb;EAEA,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,OAAM,CAAE;AACzD,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,SAAK,OAAM;EACb;EAEA,uBAAoB;AAClB,SAAK,WAAW,WAAU;EAC5B;EAEQ,SAAM;AACZ,QAAI,CAAC,KAAK;AAAY;AAEtB,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,UAAU,YAAY,EAAE,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,OAAI;AACpC,UAAI,EAAE,aAAa,MAAM,MAAM,cAAc;AAC3C,UAAE,OAAM;MACV;IACF,CAAC;AAED,UAAM,eAAe,KAAK,WAAW,cAAc,yBAAyB;AAC5E,QAAI;AAAc,mBAAa,OAAM;AAErC,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,YAAM,cAAc,SAAS,cAAc,MAAM;AACjD,kBAAY,OAAO;AACnB,WAAK,WAAW,YAAY,WAAW;AAEvC,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM,aAAa,KAAK,cAAc;AACvC,gBAAsB,aAAa,QAAQ,YAAY;QAC1D,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,cAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,gBAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,eAAK,aAAa,QAAQ,YAAY;AACtC,eAAK,YAAY,KAAK;AACtB,eAAK,YAAY,IAAI;AACrB;QACF;AACA,aAAK,YAAY,KAAK;MACxB,CAAC;IACH;EACF;;AApEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AAtBU,QAAK,WAAA;MADjB,wBAAc,EAAE,SAAS,UAAU,WAAW,KAAI,CAAE;;GACxC,KAAK;",
+  "sourcesContent": ["import { elementDefine, template, style } from '../index';\nimport { SwcHTMLElementBase } from './SwcHTMLElementBase';\n\n@elementDefine({ name: 'swc-if', useShadow: true })\nexport class SwcIf extends SwcHTMLElementBase {\n  private _swcValue: any = false;\n  private _observer: MutationObserver | null = null;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @style\n  styles() {\n    return `:host { display: contents; }`;\n  }\n\n  @template\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    this._observer = new MutationObserver(() => this.render());\n    this._observer.observe(this, { attributes: true });\n    this.render();\n  }\n\n  disconnectedCallback() {\n    this._observer?.disconnect();\n  }\n\n  private render() {\n    if (!this.shadowRoot) return;\n\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function(`return ${displayValue}`)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    Array.from(this.children).forEach(c => {\n      if (c.getAttribute('slot') === 'if-content') {\n        c.remove();\n      }\n    });\n\n    const existingSlot = this.shadowRoot.querySelector('slot[name=\"if-content\"]');\n    if (existingSlot) existingSlot.remove();\n\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      const contentSlot = document.createElement('slot');\n      contentSlot.name = 'if-content';\n      this.shadowRoot.appendChild(contentSlot);\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', 'if-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', 'if-content');\n          span.appendChild(clone);\n          this.appendChild(span);\n          return;\n        }\n        this.appendChild(clone);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAA+C;AAC/C,gCAAmC;;;;;;;;;;AAG5B,IAAM,QAAN,MAAMA,eAAc,6CAAkB;EAI3C,cAAA;AACE,UAAK;AAJC,SAAA,YAAiB;AACjB,SAAA,YAAqC;EAI7C;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,SAAM;AACJ,WAAO;EACT;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,OAAM,CAAE;AACzD,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,SAAK,OAAM;EACb;EAEA,uBAAoB;AAClB,SAAK,WAAW,WAAU;EAC5B;EAEQ,SAAM;AACZ,QAAI,CAAC,KAAK;AAAY;AAEtB,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,UAAU,YAAY,EAAE,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,UAAM,KAAK,KAAK,QAAQ,EAAE,QAAQ,OAAI;AACpC,UAAI,EAAE,aAAa,MAAM,MAAM,cAAc;AAC3C,UAAE,OAAM;MACV;IACF,CAAC;AAED,UAAM,eAAe,KAAK,WAAW,cAAc,yBAAyB;AAC5E,QAAI;AAAc,mBAAa,OAAM;AAErC,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,YAAM,cAAc,SAAS,cAAc,MAAM;AACjD,kBAAY,OAAO;AACnB,WAAK,WAAW,YAAY,WAAW;AAEvC,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM,aAAa,KAAK,cAAc;AACvC,gBAAsB,aAAa,QAAQ,YAAY;QAC1D,WAAW,MAAM,aAAa,KAAK,WAAW;AAC5C,cAAI,MAAM,aAAa,KAAI,EAAG,WAAW;AAAG;AAC5C,gBAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,eAAK,aAAa,QAAQ,YAAY;AACtC,eAAK,YAAY,KAAK;AACtB,eAAK,YAAY,IAAI;AACrB;QACF;AACA,aAAK,YAAY,KAAK;MACxB,CAAC;IACH;EACF;;AApEA,WAAA;EADC;;;;;AAMD,WAAA;EADC;;;;;AAtBU,QAAK,WAAA;MADjB,wBAAc,EAAE,MAAM,UAAU,WAAW,KAAI,CAAE;;GACrC,KAAK;",
   "names": ["SwcIf"]
 }