@dooboostore/simple-web-component 1.0.0 → 1.0.2

package/src/elements/SwcChoose.ts

@@ -0,0 +1,83 @@
+import { elementDefind, template, style } from '../index';
+
+@elementDefind({ tagName: 'swc-choose', useShadow: true })
+export class SwcChoose extends HTMLElement {
+  private _observer: MutationObserver | null = null;
+  private _value: any = undefined;
+
+  set value(val: any) {
+    this._value = val;
+    this.evaluate();
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  @style
+  styles() {
+    return `:host { display: contents; }`;
+  }
+
+  @template
+  render() {
+    return `<slot id="choose-slot"></slot>`;
+  }
+
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+
+  disconnectedCallback() {
+    this._observer?.disconnect();
+  }
+
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('swc-when'));
+    const other = this.querySelector('swc-other');
+    let matched = false;
+
+    // 현재 choose에 설정된 value (문자열인 경우 "null", "undefined" 등 처리)
+    const chooseValue = this.getAttribute('value') ?? this._value;
+
+    whens.forEach(when => {
+      if (matched) {
+        (when as HTMLElement).style.display = 'none';
+        return;
+      }
+
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null) return;
+      if (testAttr.includes('{{')) return; // 아직 치환 전이면 스킵
+
+      let isConditionMet = false;
+
+      if (chooseValue !== undefined && chooseValue !== null) {
+        // 1. 매칭 모드: choose의 value와 when의 test값이 같은지 비교
+        isConditionMet = String(chooseValue) === String(testAttr);
+      } else {
+        // 2. 표현식 모드: testAttr 자체가 실행 가능한 코드인 경우
+        try {
+          if (testAttr === 'true') isConditionMet = true;
+          else if (testAttr === 'false') isConditionMet = false;
+          else isConditionMet = !!new Function(`return ${testAttr}`)();
+        } catch (e) {
+          isConditionMet = false;
+        }
+      }
+
+      if (isConditionMet) {
+        (when as HTMLElement).style.display = '';
+        matched = true;
+      } else {
+        (when as HTMLElement).style.display = 'none';
+      }
+    });
+
+    if (other) {
+      (other as HTMLElement).style.display = matched ? 'none' : '';
+    }
+  }
+}

package/src/elements/SwcForOf.ts

@@ -0,0 +1,95 @@
+import { elementDefind, template, style } from '../index';
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+
+@elementDefind({ tagName: 'swc-for-of', useShadow: true })
+export class SwcForOf extends SwcHTMLElementBase {
+  private _value: any[] = [];
+
+  constructor() {
+    super();
+  }
+
+  set value(val: any[]) {
+    if (!Array.isArray(val)) val = [];
+    this._value = this.createReactiveProxy(
+      val,
+      () => this.renderAll(),
+      (idx, v) => this.updateSingleRow(idx, v)
+    );
+    this.renderAll();
+  }
+
+  get value(): any[] {
+    return this._value;
+  }
+
+  @style
+  styles() {
+    return `:host { display: contents; }`;
+  }
+
+  @template
+  renderTemplate() {
+    return `<slot id="tpl-slot" style="display:none;"></slot>`;
+  }
+
+  connectedCallback() {
+    this.initCore();
+    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 renderRow(item: any, index: number) {
+    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;
+
+    const slotName = `row-${index}`;
+    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();
+      }
+    });
+
+    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/SwcHTMLElementBase.ts

@@ -0,0 +1,93 @@
+import { getTemplateMethod } from '../decorators/template';
+import { getStyleMethod } from '../decorators/style';
+
+export abstract class SwcHTMLElementBase extends HTMLElement {
+  protected _masterTplNodes: Node[] = [];
+  protected _asKey: string = 'value';
+  protected _asIndexKey: string = 'index';
+
+  constructor() {
+    super();
+  }
+
+  protected initCore() {
+    this._asKey = this.getAttribute('as') || 'value';
+    this._asIndexKey = this.getAttribute('as-index') || 'index';
+    const tplSlot = this.shadowRoot?.getElementById('tpl-slot') as HTMLSlotElement;
+    if (tplSlot) {
+      this._masterTplNodes = tplSlot.assignedNodes().map(n => n.cloneNode(true));
+    }
+  }
+
+  protected getValueByPath(obj: any, path: string) {
+    if (path === this._asKey) return obj;
+    if (path.startsWith(`${this._asKey}.`)) {
+      return path
+        .split('.')
+        .slice(1)
+        .reduce((acc, part) => acc && acc[part], obj);
+    }
+    return undefined;
+  }
+
+  protected applyData(node: Node, data: any, index?: number) {
+    const context: Record<string, any> = {};
+    if (index !== undefined) {
+      context[this._asIndexKey] = index.toString();
+    }
+
+    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 (context[path] !== undefined) return context[path];
+          const val = this.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 (context[path] !== undefined) return context[path];
+            const v = this.getValueByPath(data, path);
+            return v !== undefined ? v : match;
+          });
+          if (a.value !== val) a.value = val;
+        });
+        el.childNodes.forEach(walk);
+      }
+    };
+    walk(node);
+  }
+
+  /**
+   * 객체/배열의 변경을 감지하는 Proxy 생성 유틸리티
+   */
+  protected createReactiveProxy(target: any, onChange: () => void, onIndexChange?: (index: number, val: any) => void) {
+    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;
+      }
+    });
+  }
+}

package/src/elements/SwcIf.ts

@@ -0,0 +1,92 @@
+import { elementDefind, template, style } from '../index';
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+
+@elementDefind({ tagName: 'swc-if', useShadow: true })
+export class SwcIf extends SwcHTMLElementBase {
+  private _value: any = false;
+  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() {
+    this.initCore();
+    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;
+
+    let displayValue = attrValue !== null ? attrValue : this._value;
+    let isTruthy = !!displayValue;
+    if (typeof displayValue === 'string') {
+      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
+      else {
+        try {
+          isTruthy = !!new Function(`return ${displayValue}`)();
+        } catch (e) {
+          isTruthy = true;
+        }
+      }
+    }
+
+    Array.from(this.children).forEach(c => {
+      if (c.getAttribute('slot') === 'if-content') {
+        c.remove();
+      }
+    });
+
+    const existingSlot = this.shadowRoot.querySelector('slot[name="if-content"]');
+    if (existingSlot) existingSlot.remove();
+
+    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');
+        } 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/SwcObject.ts

@@ -0,0 +1,78 @@
+import { elementDefind, template, style } from '../index';
+import { SwcHTMLElementBase } from './SwcHTMLElementBase';
+
+@elementDefind({ tagName: 'swc-object', useShadow: true })
+export class SwcObject extends SwcHTMLElementBase {
+  private _value: any = {};
+  private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
+  set value(val: any) {
+    if (typeof val !== 'object' || val === null) val = {};
+    this._value = this.createReactiveProxy(val, () => this.updateUI());
+    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() {
+    this.initCore();
+    this.render();
+  }
+
+  private updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._value);
+    });
+  }
+
+  private render() {
+    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;
+
+    this._renderedNodes.forEach(n => {
+      if (n.parentElement === this) this.removeChild(n);
+    });
+    this._renderedNodes = [];
+
+    let slot = this.shadowRoot.querySelector('slot[name="obj-content"]');
+    if (!slot) {
+      slot = document.createElement('slot');
+      (slot as HTMLSlotElement).name = 'obj-content';
+      this.shadowRoot.appendChild(slot);
+    }
+
+    this._masterTplNodes.forEach(tplNode => {
+      const clone = tplNode.cloneNode(true);
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        (clone as HTMLElement).setAttribute('slot', 'obj-content');
+      } else if (clone.nodeType === Node.TEXT_NODE) {
+        if (clone.textContent?.trim().length === 0) return;
+        const span = document.createElement('span');
+        span.setAttribute('slot', 'obj-content');
+        span.appendChild(clone);
+        this.appendChild(span);
+        this._renderedNodes.push(span);
+        this.applyData(span, this._value);
+        return;
+      }
+      this.appendChild(clone);
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._value);
+    });
+  }
+}

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,14 @@
-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';
+export * from './elements/SwcObject';
+export * from './elements/SwcHTMLElementBase';

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"}