@dooboostore/simple-web-component 1.0.0 → 1.0.1

package/src/elements/SwcForOf.ts

@@ -0,0 +1,170 @@
+import { elementDefind, template, style } from '../index';
+
+@elementDefind({ tagName: 'swc-for-of', useShadow: true })
+export class SwcForOf extends HTMLElement {
+  private _value: any[] = [];
+  private _masterTplNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
+  set value(val: any[]) {
+    if (!Array.isArray(val)) val = [];
+    this._value = this.createProxy(val);
+    this.renderAll();
+  }
+
+  get value(): any[] {
+    return this._value;
+  }
+
+  private createProxy(arr: any[]) {
+    return new Proxy(arr, {
+      set: (target, prop, val) => {
+        const isIndex = !isNaN(Number(prop));
+        target[prop as any] = val;
+
+        if (isIndex) {
+          this.updateSingleRow(Number(prop), val);
+        } else if (prop === 'length' && val < target.length) {
+          this.renderAll();
+        }
+        return true;
+      },
+      deleteProperty: (target, prop) => {
+        const res = delete target[prop as any];
+        this.renderAll();
+        return res;
+      }
+    });
+  }
+
+  @style
+  styles() {
+    // display: contents를 통해 swc-for-of 태그 자체를 레이아웃에서 투명하게 만듭니다.
+    return `
+      :host { display: contents; }
+    `;
+  }
+
+  @template
+  renderTemplate() {
+    // 감싸는 div 없이 tpl-slot만 둡니다.
+    return `
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
+  }
+
+  connectedCallback() {
+    const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;
+    if (tplSlot) {
+      this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));
+    }
+    this.renderAll();
+  }
+
+  public updateSingleRow(index: number, newValue: any) {
+    const targets = this.querySelectorAll(`[slot="row-${index}"]`);
+    if (targets.length > 0) {
+      targets.forEach(target => this.applyData(target, newValue, index));
+    } else {
+      this.renderRow(newValue, index);
+    }
+  }
+
+  private applyData(node: Node, data: any, index: number) {
+    const getValueByPath = (obj: any, path: string) => {
+      if (path === 'value') return obj;
+      if (path.startsWith('value.')) {
+        return path
+          .split('.')
+          .slice(1)
+          .reduce((acc, part) => acc && acc[part], obj);
+      }
+      return undefined;
+    };
+
+    const walk = (n: Node) => {
+      if (n.nodeType === Node.TEXT_NODE) {
+        if (!(n as any)._original) (n as any)._original = n.textContent;
+        let text = (n as any)._original;
+
+        text = text.replace(/{{(.*?)}}/g, (match: string, path: string) => {
+          path = path.trim();
+          if (path === 'index') return index.toString();
+          const val = getValueByPath(data, path);
+          return val !== undefined ? val : match;
+        });
+        if (n.textContent !== text) n.textContent = text;
+      } else if (n.nodeType === Node.ELEMENT_NODE) {
+        const el = n as Element;
+        Array.from(el.attributes).forEach(a => {
+          if (!(a as any)._original) (a as any)._original = a.value;
+          let val = (a as any)._original;
+
+          val = val.replace(/{{(.*?)}}/g, (match: string, path: string) => {
+            path = path.trim();
+            if (path === 'index') return index.toString();
+            const v = getValueByPath(data, path);
+            return v !== undefined ? v : match;
+          });
+          if (a.value !== val) a.value = val;
+        });
+
+        // 중요: swc-choose 같은 커스텀 엘리먼트 내부의 자식들도 템플릿 치환이 필요함
+        el.childNodes.forEach(walk);
+      }
+    };
+    walk(node);
+  }
+
+  private renderRow(item: any, index: number) {
+    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;
+
+    const slotName = `row-${index}`;
+    // Shadow Root에 직접 슬롯 추가
+    if (!this.shadowRoot.querySelector(`slot[name="${slotName}"]`)) {
+      const slot = document.createElement('slot');
+      slot.name = slotName;
+      this.shadowRoot.appendChild(slot);
+    }
+
+    this._masterTplNodes.forEach(tplNode => {
+      const clone = tplNode.cloneNode(true);
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        (clone as HTMLElement).setAttribute('slot', slotName);
+        (clone as HTMLElement).style.display = '';
+      } else if (clone.nodeType === Node.TEXT_NODE) {
+        if (clone.textContent?.trim().length === 0) return;
+        const span = document.createElement('span');
+        span.setAttribute('slot', slotName);
+        span.appendChild(clone);
+        this.appendChild(span);
+        this.applyData(span, item, index);
+        return;
+      }
+      this.appendChild(clone);
+      this.applyData(clone, item, index);
+    });
+  }
+
+  private renderAll() {
+    if (this._masterTplNodes.length === 0 || !this.shadowRoot) return;
+
+    // 기존 데이터 노드 삭제
+    Array.from(this.children).forEach(c => {
+      const slot = c.getAttribute('slot');
+      if (slot && slot.startsWith('row-')) {
+        c.remove();
+      }
+    });
+
+    // Shadow Root의 기존 슬롯들 삭제 (tpl-slot 제외)
+    Array.from(this.shadowRoot.querySelectorAll('slot')).forEach(s => {
+      if (s.id !== 'tpl-slot') s.remove();
+    });
+
+    this._value.forEach((item, index) => this.renderRow(item, index));
+  }
+}

package/src/elements/SwcIf.ts

@@ -0,0 +1,111 @@
+import { elementDefind, template, style } from '../index';
+
+@elementDefind({ tagName: 'swc-if', useShadow: true })
+export class SwcIf extends HTMLElement {
+  private _value: any = false;
+  private _masterTplNodes: Node[] = [];
+  private _observer: MutationObserver | null = null;
+
+  constructor() {
+    super();
+  }
+
+  set value(val: any) {
+    this._value = val;
+    this.render();
+  }
+
+  get value(): any {
+    return this._value;
+  }
+
+  @style
+  styles() {
+    return `
+      :host { display: contents; }
+    `;
+  }
+
+  @template
+  renderTemplate() {
+    return `
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
+  }
+
+  connectedCallback() {
+    const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;
+    if (tplSlot) {
+      // 초기 자식들을 템플릿으로 보관
+      this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));
+    }
+
+    this._observer = new MutationObserver(() => this.render());
+    this._observer.observe(this, { attributes: true });
+
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this._observer?.disconnect();
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const attrValue = this.getAttribute('value');
+    if (attrValue !== null && attrValue.includes('{{')) return; // 치환 전이면 대기
+
+    // 로직 결정: attribute가 있으면 우선, 없으면 property 사용
+    let displayValue = attrValue !== null ? attrValue : this._value;
+
+    // "false", "null", "undefined" 문자열 처리 및 기본 truthy 체크
+    let isTruthy = !!displayValue;
+    if (typeof displayValue === 'string') {
+      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
+      else {
+        // 식인 경우 평가 시도 (예: "10 > 5")
+        try {
+          isTruthy = !!new Function(`return ${displayValue}`)();
+        } catch (e) {
+          // 단순 문자열이면 true로 간주
+          isTruthy = true;
+        }
+      }
+    }
+
+    // 1. 기존에 렌더링된 노드들 삭제
+    Array.from(this.children).forEach(c => {
+      if (c.getAttribute('slot') === 'if-content') {
+        c.remove();
+      }
+    });
+
+    // 2. Shadow DOM의 컨텐츠 슬롯 삭제
+    const existingSlot = this.shadowRoot.querySelector('slot[name="if-content"]');
+    if (existingSlot) existingSlot.remove();
+
+    // 3. 조건이 참일 때만 노드들을 복제해서 삽입
+    if (isTruthy && this._masterTplNodes.length > 0) {
+      const contentSlot = document.createElement('slot');
+      contentSlot.name = 'if-content';
+      this.shadowRoot.appendChild(contentSlot);
+
+      this._masterTplNodes.forEach(tplNode => {
+        const clone = tplNode.cloneNode(true);
+        if (clone.nodeType === Node.ELEMENT_NODE) {
+          (clone as HTMLElement).setAttribute('slot', 'if-content');
+          (clone as HTMLElement).style.display = '';
+        } else if (clone.nodeType === Node.TEXT_NODE) {
+          if (clone.textContent?.trim().length === 0) return;
+          const span = document.createElement('span');
+          span.setAttribute('slot', 'if-content');
+          span.appendChild(clone);
+          this.appendChild(span);
+          return;
+        }
+        this.appendChild(clone);
+      });
+    }
+  }
+}

package/src/elements/SwcOther.ts

@@ -0,0 +1,14 @@
+import { elementDefind, template, style } from '../index';
+
+@elementDefind({ tagName: 'swc-other', useShadow: true })
+export class SwcOther extends HTMLElement {
+  @style
+  styles() {
+    return `:host { display: contents; }`;
+  }
+
+  @template
+  render() {
+    return `<slot></slot>`;
+  }
+}

package/src/elements/SwcWhen.ts

@@ -0,0 +1,14 @@
+import { elementDefind, template, style } from '../index';
+
+@elementDefind({ tagName: 'swc-when', useShadow: true })
+export class SwcWhen extends HTMLElement {
+  @style
+  styles() {
+    return `:host { display: contents; }`;
+  }
+
+  @template
+  render() {
+    return `<slot></slot>`;
+  }
+}

package/src/index.ts

@@ -1,4 +1,12 @@
-export * from './decorators/element';
+export * from './decorators/elementDefind';
 export * from './decorators/template';
 export * from './decorators/style';
-export * from './decorators/attributeChanged';
+export * from './decorators/attributeChanged';
+export * from './decorators/query';
+export * from './decorators/queryAll';
+export * from './decorators/addEventListener';
+export * from './elements/SwcForOf';
+export * from './elements/SwcIf';
+export * from './elements/SwcChoose';
+export * from './elements/SwcWhen';
+export * from './elements/SwcOther';

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/element.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\nimport { getAttributeChangedMap } from './attributeChanged';\nimport { getTemplateMethod } from './template';\nimport { getStyleMethod } from './style';\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 element =\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()) : [];\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      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      disconnectedCallback() {\n        if (super.disconnectedCallback) {\n          super.disconnectedCallback();\n        }\n      }\n\n      connectedMoveCallback() {\n        if (super.connectedMoveCallback) {\n          super.connectedMoveCallback();\n        }\n      }\n\n      adoptedCallback() {\n        if (super.adoptedCallback) {\n          super.adoptedCallback();\n        }\n      }\n\n      async connectedCallback() {\n        if (super.connectedCallback) {\n          await super.connectedCallback();\n        }\n\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      // 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 the method associated with @attributeChanged\n        const methodKey = attributeChangedMap?.get(name);\n        if (methodKey && typeof (this as any)[methodKey] === 'function') {\n          (this as any)[methodKey](newValue, oldValue);\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/esm/decorators/element.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/element.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\nimport { getAttributeChangedMap } from './attributeChanged';\nimport { getTemplateMethod } from './template';\nimport { getStyleMethod } from './style';\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 element =\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()) : [];\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      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      disconnectedCallback() {\n        if (super.disconnectedCallback) {\n          super.disconnectedCallback();\n        }\n      }\n\n      connectedMoveCallback() {\n        if (super.connectedMoveCallback) {\n          super.connectedMoveCallback();\n        }\n      }\n\n      adoptedCallback() {\n        if (super.adoptedCallback) {\n          super.adoptedCallback();\n        }\n      }\n\n      async connectedCallback() {\n        if (super.connectedCallback) {\n          await super.connectedCallback();\n        }\n\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      // 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 the method associated with @attributeChanged\n        const methodKey = attributeChangedMap?.get(name);\n        if (methodKey && typeof (this as any)[methodKey] === 'function') {\n          (this as any)[methodKey](newValue, oldValue);\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/types/decorators/element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../src/decorators/element.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C;AAED,eAAO,MAAM,kBAAkB,eAAgD,CAAC;AAsEhF,eAAO,MAAM,OAAO,GACjB,UAAU,aAAa,GAAG,MAAM,KAAG,cA+GnC,CAAC;AAEJ,eAAO,MAAM,gBAAgB,GAAI,QAAQ,GAAG,KAAG,aAAa,GAAG,SAG9D,CAAC"}