@dooboostore/simple-web-component 1.0.0

package/dist/umd-bundle/dooboostore-simple-web-component.umd.js

@@ -0,0 +1,284 @@
+var dooboostoreSimpleWebComponent = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/bundle-entry.ts
+  var bundle_entry_exports = {};
+  __export(bundle_entry_exports, {
+    ATTRIBUTE_CHANGED_METADATA_KEY: () => ATTRIBUTE_CHANGED_METADATA_KEY,
+    ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
+    STYLE_METHOD_KEY: () => STYLE_METHOD_KEY,
+    TEMPLATE_METHOD_KEY: () => TEMPLATE_METHOD_KEY,
+    attributeChanged: () => attributeChanged,
+    element: () => element,
+    getAttributeChangedMap: () => getAttributeChangedMap,
+    getElementConfig: () => getElementConfig,
+    getStyleMethod: () => getStyleMethod,
+    getTemplateMethod: () => getTemplateMethod,
+    style: () => style,
+    template: () => template
+  });
+
+  // ../core/dist/esm/reflect/ReflectUtils.js
+  var ReflectUtils;
+  ((ReflectUtils2) => {
+    ReflectUtils2.getParameterTypes = (target, propertyKey) => {
+      if (propertyKey) {
+        return Reflect.getMetadata("design:paramtypes", target, propertyKey) || [];
+      } else {
+        return Reflect.getMetadata("design:paramtypes", target) || [];
+      }
+    };
+    ReflectUtils2.getReturnType = (target, propertyKey) => {
+      return Reflect.getMetadata("design:returntype", target, propertyKey);
+    };
+    ReflectUtils2.getType = (target, propertyKey) => {
+      if (propertyKey) {
+        return Reflect.getMetadata("design:type", target, propertyKey);
+      } else {
+        return Reflect.getMetadata("design:type", target);
+      }
+    };
+    ReflectUtils2.getMetadata = (metadataKey, target, propertyKey) => {
+      if (propertyKey) {
+        return Reflect.getMetadata(metadataKey, target, propertyKey);
+      } else {
+        return Reflect.getMetadata(metadataKey, target);
+      }
+    };
+    ReflectUtils2.getMetadataKeys = (target) => {
+      return Reflect.getMetadataKeys(target);
+    };
+    ReflectUtils2.getOwnMetadata = (metadataKey, target, propertyKey) => {
+      if (propertyKey) {
+        return Reflect.getOwnMetadata(metadataKey, target, propertyKey);
+      } else {
+        return Reflect.getOwnMetadata(metadataKey, target);
+      }
+    };
+    ReflectUtils2.getMetadatas = (target) => {
+      return ReflectUtils2.getMetadataKeys(target).map((it) => ReflectUtils2.getMetadata(it, target));
+    };
+    ReflectUtils2.metadata = (metadataKey, data) => {
+      return Reflect.metadata(metadataKey, data);
+    };
+    ReflectUtils2.defineMetadata = (metadataKey, value, target, propertyKey) => {
+      if (propertyKey && Reflect.defineMetadata) {
+        Reflect.defineMetadata(metadataKey, value, target, propertyKey);
+      } else if (Reflect.defineMetadata) {
+        Reflect.defineMetadata(metadataKey, value, target);
+      }
+    };
+  })(ReflectUtils || (ReflectUtils = {}));
+
+  // src/decorators/attributeChanged.ts
+  var ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:attribute-changed");
+  var attributeChanged = (attributeName) => {
+    return (target, propertyKey, descriptor) => {
+      const constructor = target.constructor;
+      let meta = ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+      if (!meta) {
+        meta = /* @__PURE__ */ new Map();
+        ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+      }
+      meta.set(attributeName, propertyKey);
+    };
+  };
+  var getAttributeChangedMap = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+  };
+
+  // src/decorators/template.ts
+  var TEMPLATE_METHOD_KEY = Symbol("simple-web-component:template-method");
+  var template = (target, propertyKey, descriptor) => {
+    ReflectUtils.defineMetadata(TEMPLATE_METHOD_KEY, propertyKey, target.constructor);
+  };
+  var getTemplateMethod = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(TEMPLATE_METHOD_KEY, constructor);
+  };
+
+  // src/decorators/style.ts
+  var STYLE_METHOD_KEY = Symbol("simple-web-component:style-method");
+  var style = (target, propertyKey, descriptor) => {
+    ReflectUtils.defineMetadata(STYLE_METHOD_KEY, propertyKey, target.constructor);
+  };
+  var getStyleMethod = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(STYLE_METHOD_KEY, constructor);
+  };
+
+  // src/decorators/element.ts
+  var ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+  var BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
+  var registerTag = (className, tagName) => {
+    if (typeof globalThis !== "undefined" && globalThis[className]) {
+      BUILT_IN_TAG_MAP.set(globalThis[className], tagName);
+    }
+  };
+  [
+    ["HTMLAnchorElement", "a"],
+    ["HTMLAreaElement", "area"],
+    ["HTMLAudioElement", "audio"],
+    ["HTMLBaseElement", "base"],
+    ["HTMLButtonElement", "button"],
+    ["HTMLCanvasElement", "canvas"],
+    ["HTMLDataElement", "data"],
+    ["HTMLDataListElement", "datalist"],
+    ["HTMLDetailsElement", "details"],
+    ["HTMLDialogElement", "dialog"],
+    ["HTMLDivElement", "div"],
+    ["HTMLDListElement", "dl"],
+    ["HTMLEmbedElement", "embed"],
+    ["HTMLFieldSetElement", "fieldset"],
+    ["HTMLFormElement", "form"],
+    ["HTMLHRElement", "hr"],
+    ["HTMLIFrameElement", "iframe"],
+    ["HTMLImageElement", "img"],
+    ["HTMLInputElement", "input"],
+    ["HTMLLabelElement", "label"],
+    ["HTMLLegendElement", "legend"],
+    ["HTMLLIElement", "li"],
+    ["HTMLLinkElement", "link"],
+    ["HTMLMapElement", "map"],
+    ["HTMLMetaElement", "meta"],
+    ["HTMLMeterElement", "meter"],
+    ["HTMLModElement", "del"],
+    ["HTMLObjectElement", "object"],
+    ["HTMLOListElement", "ol"],
+    ["HTMLOptGroupElement", "optgroup"],
+    ["HTMLOptionElement", "option"],
+    ["HTMLOutputElement", "output"],
+    ["HTMLParagraphElement", "p"],
+    ["HTMLParamElement", "param"],
+    ["HTMLPictureElement", "picture"],
+    ["HTMLPreElement", "pre"],
+    ["HTMLProgressElement", "progress"],
+    ["HTMLQuoteElement", "blockquote"],
+    ["HTMLScriptElement", "script"],
+    ["HTMLSelectElement", "select"],
+    ["HTMLSlotElement", "slot"],
+    ["HTMLSourceElement", "source"],
+    ["HTMLSpanElement", "span"],
+    ["HTMLStyleElement", "style"],
+    ["HTMLTableElement", "table"],
+    ["HTMLTableSectionElement", "tbody"],
+    ["HTMLTableCellElement", "td"],
+    ["HTMLTemplateElement", "template"],
+    ["HTMLTextAreaElement", "textarea"],
+    ["HTMLTimeElement", "time"],
+    ["HTMLTitleElement", "title"],
+    ["HTMLTableRowElement", "tr"],
+    ["HTMLTrackElement", "track"],
+    ["HTMLUListElement", "ul"],
+    ["HTMLVideoElement", "video"],
+    ["HTMLHeadingElement", "h1"]
+  ].forEach(([cls, tag]) => registerTag(cls, tag));
+  var element = (inConfig) => (constructor) => {
+    const config = typeof inConfig === "string" ? { tagName: inConfig } : inConfig;
+    let extendsTagName = config.extends;
+    if (!extendsTagName) {
+      let proto = Object.getPrototypeOf(constructor);
+      while (proto && proto !== HTMLElement && proto !== Function.prototype) {
+        extendsTagName = BUILT_IN_TAG_MAP.get(proto);
+        if (extendsTagName)
+          break;
+        proto = Object.getPrototypeOf(proto);
+      }
+    }
+    const attributeChangedMap = getAttributeChangedMap(constructor);
+    const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()) : [];
+    const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromDecorators])];
+    const NewClass = class extends constructor {
+      static get observedAttributes() {
+        return mergedObservedAttributes;
+      }
+      constructor(...args) {
+        super(...args);
+        if (config.useShadow === true && !this.shadowRoot) {
+          this.attachShadow({ mode: "open" });
+        }
+      }
+      disconnectedCallback() {
+        if (super.disconnectedCallback) {
+          super.disconnectedCallback();
+        }
+      }
+      connectedMoveCallback() {
+        if (super.connectedMoveCallback) {
+          super.connectedMoveCallback();
+        }
+      }
+      adoptedCallback() {
+        if (super.adoptedCallback) {
+          super.adoptedCallback();
+        }
+      }
+      async connectedCallback() {
+        if (super.connectedCallback) {
+          await super.connectedCallback();
+        }
+        const templateMethod = getTemplateMethod(this);
+        const styleMethod = getStyleMethod(this);
+        const template2 = templateMethod ? await this[templateMethod]() : void 0;
+        const style2 = styleMethod ? await this[styleMethod]() : void 0;
+        if (!this.shadowRoot && template2 === void 0 && style2 === void 0) {
+          return;
+        }
+        let content = "";
+        if (style2 !== void 0 && style2.trim().length > 0) {
+          content += `<style>${style2}</style>`;
+        }
+        if (template2 !== void 0) {
+          content += template2;
+        } else if (!this.shadowRoot) {
+          content += this.innerHTML;
+        }
+        if (this.shadowRoot) {
+          this.shadowRoot.innerHTML = content;
+        } else {
+          this.innerHTML = content;
+        }
+      }
+      // 4. Handle attribute changes and route to decorated methods
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (super.attributeChangedCallback) {
+          super.attributeChangedCallback(name, oldValue, newValue);
+        }
+        const methodKey = attributeChangedMap?.get(name);
+        if (methodKey && typeof this[methodKey] === "function") {
+          this[methodKey](newValue, oldValue);
+        }
+      }
+    };
+    const registry = config.customElementRegistry || (typeof customElements !== "undefined" ? customElements : void 0);
+    if (registry && !registry.get(config.tagName)) {
+      const options = extendsTagName ? { extends: extendsTagName } : void 0;
+      registry.define(config.tagName, NewClass, options);
+    }
+    ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
+    return NewClass;
+  };
+  var getElementConfig = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
+  };
+  return __toCommonJS(bundle_entry_exports);
+})();
+//# sourceMappingURL=dooboostore-simple-web-component.umd.js.map

package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/bundle-entry.ts", "../../../core/src/reflect/ReflectUtils.ts", "../../src/decorators/attributeChanged.ts", "../../src/decorators/template.ts", "../../src/decorators/style.ts", "../../src/decorators/element.ts"],
+  "sourcesContent": ["export * from './index';\n", "import { ConstructorType } from '../types';\nexport namespace  ReflectUtils {\n    export const getParameterTypes = (target: any, propertyKey?: string | symbol): ConstructorType<any>[] => {\n      // console.log('---------param')\n        if (propertyKey) {\n            return Reflect.getMetadata('design:paramtypes', target, propertyKey) || [];\n        } else {\n            return Reflect.getMetadata('design:paramtypes', target) || [];\n        }\n    }\n\n\n    export const getReturnType = (target: any, propertyKey: string | symbol): any  => {\n        return Reflect.getMetadata('design:returntype', target, propertyKey);\n    }\n\n    // @Reflect.metadata(\"design:type\", Point)\n    export const getType = (target: any, propertyKey?: string | symbol): any => {\n        if (propertyKey) {\n            return Reflect.getMetadata('design:type', target, propertyKey);\n        } else {\n            return Reflect.getMetadata('design:type', target);\n        }\n    }\n\n    export const getMetadata = <T = any>(metadataKey: any, target: any, propertyKey?: string | symbol): T | undefined => {\n        if (propertyKey) {\n            return Reflect.getMetadata(metadataKey, target, propertyKey);\n        } else {\n            return Reflect.getMetadata(metadataKey, target);\n        }\n\n\n        //\n        // let tt = target;\n        // // proxy \uAC78\uB9B0\uAC70\uB294 \uC624\uB9AC\uC9C0\uB110 constructor\uC5D0 \uB4E4\uC5B4\uAC00\uC788\uC744\uACBD\uC6B0\uB3C4\uC788\uC5B4\uC11C  reflect\uAC00 proxy\uC758 constructor\uC5D0\uC11C \uCC3E\uB294\uACBD\uC6B0\uB3C4\uC788\uB2E4,\n        // // \uC11C\uBC84\uB791 \uD504\uB860\uD2B8\uB791 \uB2E4\uB978\uB4EF.. \uADF8\uB798\uC11C \uC704\uB85C \uCC3E\uC544\uAC00\uBA74\uC11C\n        // while (tt) {\n        //     let meta: any = undefined;\n        //     if (propertyKey) {\n        //         meta = Reflect.getMetadata(metadataKey, tt, propertyKey);\n        //     } else {\n        //         meta = Reflect.getMetadata(metadataKey, tt);\n        //     }\n        //     if (meta) {\n        //         return meta;\n        //     }\n        //     tt = Reflect.getPrototypeOf(tt);\n        // }\n    }\n\n    export const getMetadataKeys = (target: any) => {\n        return Reflect.getMetadataKeys(target);\n    }\n\n    export const getOwnMetadata = (metadataKey: any, target: any, propertyKey?: string): number[] | any => {\n        if (propertyKey) {\n            return Reflect.getOwnMetadata(metadataKey, target, propertyKey);\n        } else {\n            return Reflect.getOwnMetadata(metadataKey, target);\n        }\n    }\n\n    export const getMetadatas = (target: any) => {\n        return ReflectUtils.getMetadataKeys(target).map(it => ReflectUtils.getMetadata(it, target));\n    }\n\n    export const metadata = (metadataKey: any, data: any) => {\n        return Reflect.metadata(metadataKey, data);\n    }\n\n    export const defineMetadata = (metadataKey: any, value: any, target: any, propertyKey?: string | symbol) => {\n        // console.log(\"Reflect:\",Reflect)\n        if (propertyKey && Reflect.defineMetadata) {\n            Reflect.defineMetadata(metadataKey, value, target, propertyKey);\n        } else if (Reflect.defineMetadata) {\n            Reflect.defineMetadata(metadataKey, value, target);\n            // Reflect.defineMetadata(\"design:paramtypes\", value, target);\n        }\n        // console.log(\"Reflect:\",Reflect.getMetadata(metadataKey, target))\n        // console.log(\"Reflect:\",Reflect.getMetadata('design:paramtypes', target))\n    }\n}\n", "import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport const ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:attribute-changed');\n\nexport const attributeChanged = (attributeName: string): MethodDecorator => {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    let meta = ReflectUtils.getMetadata<Map<string, string | symbol>>(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n    if (!meta) {\n      meta = new Map<string, string | symbol>();\n      ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);\n    }\n    meta.set(attributeName, propertyKey);\n  };\n};\n\nexport const getAttributeChangedMap = (target: any): Map<string, string | symbol> | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n", "import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport const TEMPLATE_METHOD_KEY = Symbol('simple-web-component:template-method');\n\nexport const template: MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n  // console.log('setTemplateMethod target.constructor', target.constructor)\n  ReflectUtils.defineMetadata(TEMPLATE_METHOD_KEY, propertyKey, target.constructor);\n};\n\nexport const getTemplateMethod = (target: any): string | symbol | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  // console.log('getTemplateMethod constructor', constructor)\n  return ReflectUtils.getMetadata(TEMPLATE_METHOD_KEY, constructor);\n};\n", "import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport const STYLE_METHOD_KEY = Symbol('simple-web-component:style-method');\n\nexport const style: MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n  ReflectUtils.defineMetadata(STYLE_METHOD_KEY, propertyKey, target.constructor);\n};\n\nexport const getStyleMethod = (target: any): string | symbol | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(STYLE_METHOD_KEY, constructor);\n};\n", "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": ["ReflectUtils", "template", "style"]
+}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@dooboostore/simple-web-component",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/types/*"
+      ]
+    }
+  },
+  "description": "Simple Web Component library based on dom-render philosophy",
+  "keywords": [
+    "front",
+    "web-components",
+    "view",
+    "template",
+    "simple-web-component",
+    "front-end"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "types.d.ts",
+    "LICENSE.md",
+    "tsconfig.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js"
+    }
+  },
+  "author": "dooboostore <dooboostore@gmail.com> (https://github.com/dooboostore)",
+  "peerDependencies": {
+    "reflect-metadata": "^0.2.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.24.0",
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
+    "@types/jest": "^26.0.22",
+    "raw-loader": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.0",
+    "html-webpack-plugin": "^5.6.3",
+    "ts-loader": "^9.5.1",
+    "tslib": "^2.8.1",
+    "@types/node": "^20",
+    "typescript": "^5.9.2",
+    "esbuild-plugin-tsc": "^0.5.0",
+    "esbuild": "^0.23.0",
+    "@dooboostore/core": "1.0.28",
+    "@dooboostore/core-web": "1.0.9",
+    "@dooboostore/core-node": "1.0.10"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build:esm": "node build.mjs esm",
+    "watch:esm": "pnpm run build:esm && node build.mjs esm --watch",
+    "build:cjs": "node build.mjs cjs",
+    "watch:cjs": "pnpm run build:cjs && node build.mjs cjs --watch",
+    "build": "pnpm run clean && node build.mjs all",
+    "build:umd-bundle": "node build.mjs umd-bundle",
+    "watch:umd-bundle": "pnpm run build:umd-bundle && node build.mjs umd-bundle --watch",
+    "build:esm-bundle": "node build.mjs esm-bundle",
+    "watch:esm-bundle": "pnpm run build:esm-bundle && node build.mjs esm-bundle --watch",
+    "watch": "node build.mjs all --watch",
+    "publish:npm": "pnpm run build && cp package.json package.json.back && pnpm pack && TARBALL_NAME=$(ls dooboostore-simple-web-component-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C . --strip-components=1 package/package.json && rm \"$TARBALL_NAME\" && (pnpm publish --no-git-checks || true) && cp package.json.back package.json && rm -rf package.json.back  ",
+    "ts:clean": "find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f",
+    "typecheck": "pnpm exec tsc --noEmit",
+    "test": "echo test"
+  }
+}

package/src/bundle-entry.ts

@@ -0,0 +1 @@
+export * from './index';

package/src/decorators/attributeChanged.ts

@@ -0,0 +1,20 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export const ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:attribute-changed');
+
+export const attributeChanged = (attributeName: string): MethodDecorator => {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getMetadata<Map<string, string | symbol>>(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = new Map<string, string | symbol>();
+      ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    }
+    meta.set(attributeName, propertyKey);
+  };
+};
+
+export const getAttributeChangedMap = (target: any): Map<string, string | symbol> | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+};

package/src/decorators/element.ts

@@ -0,0 +1,201 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { getAttributeChangedMap } from './attributeChanged';
+import { getTemplateMethod } from './template';
+import { getStyleMethod } from './style';
+
+export interface ElementConfig {
+  tagName: string;
+  useShadow?: boolean;
+  extends?: string;
+  observedAttributes?: string[];
+  customElementRegistry?: CustomElementRegistry;
+}
+
+export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
+
+const BUILT_IN_TAG_MAP = new Map<any, string>();
+
+const registerTag = (className: string, tagName: string) => {
+  if (typeof globalThis !== 'undefined' && (globalThis as any)[className]) {
+    BUILT_IN_TAG_MAP.set((globalThis as any)[className], tagName);
+  }
+};
+
+// Register comprehensive list of supported tags for automatic extends inference
+[
+  ['HTMLAnchorElement', 'a'],
+  ['HTMLAreaElement', 'area'],
+  ['HTMLAudioElement', 'audio'],
+  ['HTMLBaseElement', 'base'],
+  ['HTMLButtonElement', 'button'],
+  ['HTMLCanvasElement', 'canvas'],
+  ['HTMLDataElement', 'data'],
+  ['HTMLDataListElement', 'datalist'],
+  ['HTMLDetailsElement', 'details'],
+  ['HTMLDialogElement', 'dialog'],
+  ['HTMLDivElement', 'div'],
+  ['HTMLDListElement', 'dl'],
+  ['HTMLEmbedElement', 'embed'],
+  ['HTMLFieldSetElement', 'fieldset'],
+  ['HTMLFormElement', 'form'],
+  ['HTMLHRElement', 'hr'],
+  ['HTMLIFrameElement', 'iframe'],
+  ['HTMLImageElement', 'img'],
+  ['HTMLInputElement', 'input'],
+  ['HTMLLabelElement', 'label'],
+  ['HTMLLegendElement', 'legend'],
+  ['HTMLLIElement', 'li'],
+  ['HTMLLinkElement', 'link'],
+  ['HTMLMapElement', 'map'],
+  ['HTMLMetaElement', 'meta'],
+  ['HTMLMeterElement', 'meter'],
+  ['HTMLModElement', 'del'],
+  ['HTMLObjectElement', 'object'],
+  ['HTMLOListElement', 'ol'],
+  ['HTMLOptGroupElement', 'optgroup'],
+  ['HTMLOptionElement', 'option'],
+  ['HTMLOutputElement', 'output'],
+  ['HTMLParagraphElement', 'p'],
+  ['HTMLParamElement', 'param'],
+  ['HTMLPictureElement', 'picture'],
+  ['HTMLPreElement', 'pre'],
+  ['HTMLProgressElement', 'progress'],
+  ['HTMLQuoteElement', 'blockquote'],
+  ['HTMLScriptElement', 'script'],
+  ['HTMLSelectElement', 'select'],
+  ['HTMLSlotElement', 'slot'],
+  ['HTMLSourceElement', 'source'],
+  ['HTMLSpanElement', 'span'],
+  ['HTMLStyleElement', 'style'],
+  ['HTMLTableElement', 'table'],
+  ['HTMLTableSectionElement', 'tbody'],
+  ['HTMLTableCellElement', 'td'],
+  ['HTMLTemplateElement', 'template'],
+  ['HTMLTextAreaElement', 'textarea'],
+  ['HTMLTimeElement', 'time'],
+  ['HTMLTitleElement', 'title'],
+  ['HTMLTableRowElement', 'tr'],
+  ['HTMLTrackElement', 'track'],
+  ['HTMLUListElement', 'ul'],
+  ['HTMLVideoElement', 'video'],
+  ['HTMLHeadingElement', 'h1']
+].forEach(([cls, tag]) => registerTag(cls, tag));
+
+export const element =
+  (inConfig: ElementConfig | string): ClassDecorator =>
+  (constructor: any) => {
+    const config: ElementConfig = typeof inConfig === 'string' ? { tagName: inConfig } : inConfig;
+
+    // 1. Automatically derive extendsTagName from prototype chain if not provided
+    let extendsTagName = config.extends;
+    if (!extendsTagName) {
+      let proto = Object.getPrototypeOf(constructor);
+      while (proto && proto !== HTMLElement && proto !== Function.prototype) {
+        extendsTagName = BUILT_IN_TAG_MAP.get(proto);
+        if (extendsTagName) break;
+        proto = Object.getPrototypeOf(proto);
+      }
+    }
+
+    // 2. Automatically collect observed attributes from @attributeChanged decorators
+    const attributeChangedMap = getAttributeChangedMap(constructor);
+    const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()) : [];
+    const mergedObservedAttributes = [...new Set([...(config.observedAttributes ?? []), ...observedFromDecorators])];
+
+    // 3. Create a new anonymous class that extends the original constructor
+    const NewClass = class extends (constructor as any) {
+      static get observedAttributes() {
+        return mergedObservedAttributes;
+      }
+
+      constructor(...args: any[]) {
+        super(...args);
+        if (config.useShadow === true && !this.shadowRoot) {
+          this.attachShadow({ mode: 'open' });
+        }
+      }
+
+      disconnectedCallback() {
+        if (super.disconnectedCallback) {
+          super.disconnectedCallback();
+        }
+      }
+
+      connectedMoveCallback() {
+        if (super.connectedMoveCallback) {
+          super.connectedMoveCallback();
+        }
+      }
+
+      adoptedCallback() {
+        if (super.adoptedCallback) {
+          super.adoptedCallback();
+        }
+      }
+
+      async connectedCallback() {
+        if (super.connectedCallback) {
+          await super.connectedCallback();
+        }
+
+        const templateMethod = getTemplateMethod(this);
+        const styleMethod = getStyleMethod(this);
+
+        const template = templateMethod ? await (this as any)[templateMethod]() : undefined;
+        const style = styleMethod ? await (this as any)[styleMethod]() : undefined;
+
+        // If not using shadow DOM and no decorators are present, do nothing
+        if (!this.shadowRoot && template === undefined && style === undefined) {
+          return;
+        }
+
+        let content = '';
+        if (style !== undefined && style.trim().length > 0) {
+          content += `<style>${style}</style>`;
+        }
+
+        if (template !== undefined) {
+          content += template;
+        } else if (!this.shadowRoot) {
+          content += this.innerHTML;
+        }
+
+        if (this.shadowRoot) {
+          this.shadowRoot.innerHTML = content;
+        } else {
+          this.innerHTML = content;
+        }
+      }
+
+      // 4. Handle attribute changes and route to decorated methods
+      attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        // Call the original callback if it exists
+        if (super.attributeChangedCallback) {
+          super.attributeChangedCallback(name, oldValue, newValue);
+        }
+
+        // Call the method associated with @attributeChanged
+        const methodKey = attributeChangedMap?.get(name);
+        if (methodKey && typeof (this as any)[methodKey] === 'function') {
+          (this as any)[methodKey](newValue, oldValue);
+        }
+      }
+    };
+
+    // 5. Register Custom Element using specified or default registry
+    const registry = config.customElementRegistry || (typeof customElements !== 'undefined' ? customElements : undefined);
+    if (registry && !registry.get(config.tagName)) {
+      const options = extendsTagName ? { extends: extendsTagName } : undefined;
+      registry.define(config.tagName, NewClass as any, options);
+    }
+
+    // 6. Save metadata
+    ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
+
+    return NewClass as any;
+  };
+
+export const getElementConfig = (target: any): ElementConfig | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
+};

package/src/decorators/style.ts

@@ -0,0 +1,12 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export const STYLE_METHOD_KEY = Symbol('simple-web-component:style-method');
+
+export const style: MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+  ReflectUtils.defineMetadata(STYLE_METHOD_KEY, propertyKey, target.constructor);
+};
+
+export const getStyleMethod = (target: any): string | symbol | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(STYLE_METHOD_KEY, constructor);
+};