@dooboostore/simple-web-component 1.0.0

package/README.md

@@ -0,0 +1,102 @@
+# @dooboostore/simple-web-component
+
+`@dooboostore/simple-web-component` is a lightweight, decorator-driven library for building Web Components. It allows you to define standard Custom Elements using classes and decorators without complex configurations, providing powerful features like Shadow DOM management, attribute observation, and seamless template/style injection.
+
+## Key Features
+
+- **Decorator-based**: Declarative development using `@element`, `@template`, `@style`, and `@attributeChanged`.
+- **Standards Compliant**: Built on top of native browser Web Components (Custom Elements) technology.
+- **Automatic Registration**: The `@element` decorator automatically registers your component with the browser using the provided `tagName`.
+- **Built-in Element Extension**: Easily inherit and extend standard HTML tags like `ul`, `button`, or `a` using the `extends` option.
+- **Automatic Attribute Observation**: Use the `@attributeChanged` decorator to automatically register attributes for observation and handle changes via callbacks.
+
+## Installation
+
+```bash
+pnpm add @dooboostore/simple-web-component
+```
+
+## Usage
+
+### 1. Basic Autonomous Custom Element
+
+This is the most common way to create an encapsulated component using Shadow DOM.
+
+```typescript
+import { element, template, style, attributeChanged } from '@dooboostore/simple-web-component';
+
+@element({
+  tagName: 'my-profile',
+  useShadow: true, // Defaults to false (Light DOM)
+  observedAttributes: ['status'] // Manual registration is also possible
+})
+class MyProfile extends HTMLElement {
+  
+  @style
+  styles() {
+    return `
+      .card { border: 1px solid #ccc; padding: 10px; }
+      .name { font-weight: bold; color: blue; }
+    `;
+  }
+
+  @template
+  render() {
+    return `
+      <div class="card">
+        <div class="name">Hello, Visitor!</div>
+        <div id="status">Status: Pending</div>
+      </div>
+    `;
+  }
+
+  // Called automatically when the 'status' attribute changes
+  @attributeChanged('status')
+  onStatusChange(newVal: string, oldVal: string) {
+    console.log(`Status changed: ${oldVal} -> ${newVal}`);
+    this.shadowRoot.getElementById('status').innerText = `Status: ${newVal}`;
+  }
+}
+```
+
+### 2. Extending Built-in Elements (Customized Built-in Element)
+
+Inherit properties and behaviors from existing HTML tags while adding your custom logic.
+
+```typescript
+import { element, template } from '@dooboostore/simple-web-component';
+
+@element({
+  tagName: 'special-list',
+  extends: 'ul' // Specifies that this component extends the <ul> tag
+})
+class SpecialList extends HTMLUListElement {
+  @template
+  render() {
+    return `<li>Initial item of the extended list</li>`;
+  }
+}
+```
+
+## API Reference
+
+### Decorators
+
+| Decorator | Target | Description |
+| :--- | :--- | :--- |
+| `@element(config)` | Class | Configures the tag name, inheritance, Shadow DOM usage, and registers it to the browser. |
+| `@template` | Method | Identifies the method that returns the component's HTML structure. |
+| `@style` | Method | Identifies the method that returns the component's CSS styles. |
+| `@attributeChanged(name)`| Method | Defines an attribute to monitor and the handler to execute when it changes. |
+
+### ElementConfig Options
+
+- `tagName`: (Required) The name for the custom element (e.g., `my-button`).
+- `useShadow`: (Optional) Whether to use Shadow DOM (default: `false`).
+- `extends`: (Optional) The name of the built-in tag to extend (e.g., `ul`, `button`, `a`).
+- `observedAttributes`: (Optional) An array of attributes to monitor manually. (Automatically populated if `@attributeChanged` is used).
+- `customElementRegistry`: (Optional) A specific registry to use for registration (defaults to global `customElements`).
+
+## License
+
+MIT

package/dist/cjs/bundle-entry.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var bundle_entry_exports = {};
+module.exports = __toCommonJS(bundle_entry_exports);
+__reExport(bundle_entry_exports, require("./index"), module.exports);
+//# sourceMappingURL=bundle-entry.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/bundle-entry.ts"],
+  "sourcesContent": ["export * from './index';\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,iCAAc,oBAAd;",
+  "names": []
+}

package/dist/cjs/decorators/attributeChanged.js

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var attributeChanged_exports = {};
+__export(attributeChanged_exports, {
+  ATTRIBUTE_CHANGED_METADATA_KEY: () => ATTRIBUTE_CHANGED_METADATA_KEY,
+  attributeChanged: () => attributeChanged,
+  getAttributeChangedMap: () => getAttributeChangedMap
+});
+module.exports = __toCommonJS(attributeChanged_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+const ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:attribute-changed");
+const attributeChanged = (attributeName) => {
+  return (target, propertyKey, descriptor) => {
+    const constructor = target.constructor;
+    let meta = import_ReflectUtils.ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      import_ReflectUtils.ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    }
+    meta.set(attributeName, propertyKey);
+  };
+};
+const getAttributeChangedMap = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+};
+//# sourceMappingURL=attributeChanged.js.map

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

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

package/dist/cjs/decorators/element.js

@@ -0,0 +1,183 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var element_exports = {};
+__export(element_exports, {
+  ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
+  element: () => element,
+  getElementConfig: () => getElementConfig
+});
+module.exports = __toCommonJS(element_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+var import_attributeChanged = require("./attributeChanged");
+var import_template = require("./template");
+var import_style = require("./style");
+const ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+const BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
+const 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));
+const 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 = (0, import_attributeChanged.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 = (0, import_template.getTemplateMethod)(this);
+      const styleMethod = (0, import_style.getStyleMethod)(this);
+      const template = templateMethod ? await this[templateMethod]() : void 0;
+      const style = styleMethod ? await this[styleMethod]() : void 0;
+      if (!this.shadowRoot && template === void 0 && style === void 0) {
+        return;
+      }
+      let content = "";
+      if (style !== void 0 && style.trim().length > 0) {
+        content += `<style>${style}</style>`;
+      }
+      if (template !== void 0) {
+        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, 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);
+  }
+  import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
+  return NewClass;
+};
+const getElementConfig = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
+};
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": ";;;;;;;;;;;;;;;;;AAAA;;;;;;;0BAA6B;AAC7B,8BAAuC;AACvC,sBAAkC;AAClC,mBAA+B;AAUxB,MAAM,qBAAqB,OAAO,qCAAqC;AAE9E,MAAM,mBAAmB,oBAAI,IAAG;AAEhC,MAAM,cAAc,CAAC,WAAmB,YAAmB;AACzD,MAAI,OAAO,eAAe,eAAgB,WAAmB,SAAS,GAAG;AACvE,qBAAiB,IAAK,WAAmB,SAAS,GAAG,OAAO;EAC9D;AACF;AAGA;EACE,CAAC,qBAAqB,GAAG;EACzB,CAAC,mBAAmB,MAAM;EAC1B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,mBAAmB,MAAM;EAC1B,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,mBAAmB,MAAM;EAC1B,CAAC,uBAAuB,UAAU;EAClC,CAAC,sBAAsB,SAAS;EAChC,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,kBAAkB,KAAK;EACxB,CAAC,oBAAoB,IAAI;EACzB,CAAC,oBAAoB,OAAO;EAC5B,CAAC,uBAAuB,UAAU;EAClC,CAAC,mBAAmB,MAAM;EAC1B,CAAC,iBAAiB,IAAI;EACtB,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,oBAAoB,KAAK;EAC1B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,iBAAiB,IAAI;EACtB,CAAC,mBAAmB,MAAM;EAC1B,CAAC,kBAAkB,KAAK;EACxB,CAAC,mBAAmB,MAAM;EAC1B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,kBAAkB,KAAK;EACxB,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,oBAAoB,IAAI;EACzB,CAAC,uBAAuB,UAAU;EAClC,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,wBAAwB,GAAG;EAC5B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,sBAAsB,SAAS;EAChC,CAAC,kBAAkB,KAAK;EACxB,CAAC,uBAAuB,UAAU;EAClC,CAAC,oBAAoB,YAAY;EACjC,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,mBAAmB,MAAM;EAC1B,CAAC,qBAAqB,QAAQ;EAC9B,CAAC,mBAAmB,MAAM;EAC1B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,2BAA2B,OAAO;EACnC,CAAC,wBAAwB,IAAI;EAC7B,CAAC,uBAAuB,UAAU;EAClC,CAAC,uBAAuB,UAAU;EAClC,CAAC,mBAAmB,MAAM;EAC1B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,uBAAuB,IAAI;EAC5B,CAAC,oBAAoB,OAAO;EAC5B,CAAC,oBAAoB,IAAI;EACzB,CAAC,oBAAoB,OAAO;EAC5B,CAAC,sBAAsB,IAAI;EAC3B,QAAQ,CAAC,CAAC,KAAK,GAAG,MAAM,YAAY,KAAK,GAAG,CAAC;AAExC,MAAM,UACX,CAAC,aACD,CAAC,gBAAoB;AACnB,QAAM,SAAwB,OAAO,aAAa,WAAW,EAAE,SAAS,SAAQ,IAAK;AAGrF,MAAI,iBAAiB,OAAO;AAC5B,MAAI,CAAC,gBAAgB;AACnB,QAAI,QAAQ,OAAO,eAAe,WAAW;AAC7C,WAAO,SAAS,UAAU,eAAe,UAAU,SAAS,WAAW;AACrE,uBAAiB,iBAAiB,IAAI,KAAK;AAC3C,UAAI;AAAgB;AACpB,cAAQ,OAAO,eAAe,KAAK;IACrC;EACF;AAGA,QAAM,0BAAsB,gDAAuB,WAAW;AAC9D,QAAM,yBAAyB,sBAAsB,MAAM,KAAK,oBAAoB,KAAI,CAAE,IAAI,CAAA;AAC9F,QAAM,2BAA2B,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAI,OAAO,sBAAsB,CAAA,GAAK,GAAG,sBAAsB,CAAC,CAAC;AAG/G,QAAM,WAAW,cAAe,YAAmB;IACjD,WAAW,qBAAkB;AAC3B,aAAO;IACT;IAEA,eAAe,MAAW;AACxB,YAAM,GAAG,IAAI;AACb,UAAI,OAAO,cAAc,QAAQ,CAAC,KAAK,YAAY;AACjD,aAAK,aAAa,EAAE,MAAM,OAAM,CAAE;MACpC;IACF;IAEA,uBAAoB;AAClB,UAAI,MAAM,sBAAsB;AAC9B,cAAM,qBAAoB;MAC5B;IACF;IAEA,wBAAqB;AACnB,UAAI,MAAM,uBAAuB;AAC/B,cAAM,sBAAqB;MAC7B;IACF;IAEA,kBAAe;AACb,UAAI,MAAM,iBAAiB;AACzB,cAAM,gBAAe;MACvB;IACF;IAEA,MAAM,oBAAiB;AACrB,UAAI,MAAM,mBAAmB;AAC3B,cAAM,MAAM,kBAAiB;MAC/B;AAEA,YAAM,qBAAiB,mCAAkB,IAAI;AAC7C,YAAM,kBAAc,6BAAe,IAAI;AAEvC,YAAM,WAAW,iBAAiB,MAAO,KAAa,cAAc,EAAC,IAAK;AAC1E,YAAM,QAAQ,cAAc,MAAO,KAAa,WAAW,EAAC,IAAK;AAGjE,UAAI,CAAC,KAAK,cAAc,aAAa,UAAa,UAAU,QAAW;AACrE;MACF;AAEA,UAAI,UAAU;AACd,UAAI,UAAU,UAAa,MAAM,KAAI,EAAG,SAAS,GAAG;AAClD,mBAAW,UAAU,KAAK;MAC5B;AAEA,UAAI,aAAa,QAAW;AAC1B,mBAAW;MACb,WAAW,CAAC,KAAK,YAAY;AAC3B,mBAAW,KAAK;MAClB;AAEA,UAAI,KAAK,YAAY;AACnB,aAAK,WAAW,YAAY;MAC9B,OAAO;AACL,aAAK,YAAY;MACnB;IACF;;IAGA,yBAAyB,MAAc,UAAyB,UAAuB;AAErF,UAAI,MAAM,0BAA0B;AAClC,cAAM,yBAAyB,MAAM,UAAU,QAAQ;MACzD;AAGA,YAAM,YAAY,qBAAqB,IAAI,IAAI;AAC/C,UAAI,aAAa,OAAQ,KAAa,SAAS,MAAM,YAAY;AAC9D,aAAa,SAAS,EAAE,UAAU,QAAQ;MAC7C;IACF;;AAIF,QAAM,WAAW,OAAO,0BAA0B,OAAO,mBAAmB,cAAc,iBAAiB;AAC3G,MAAI,YAAY,CAAC,SAAS,IAAI,OAAO,OAAO,GAAG;AAC7C,UAAM,UAAU,iBAAiB,EAAE,SAAS,eAAc,IAAK;AAC/D,aAAS,OAAO,OAAO,SAAS,UAAiB,OAAO;EAC1D;AAGA,mCAAa,eAAe,oBAAoB,QAAQ,QAAQ;AAEhE,SAAO;AACT;AAEK,MAAM,mBAAmB,CAAC,WAA0C;AACzE,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,oBAAoB,WAAW;AACjE;",
+  "names": []
+}

package/dist/cjs/decorators/style.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var style_exports = {};
+__export(style_exports, {
+  STYLE_METHOD_KEY: () => STYLE_METHOD_KEY,
+  getStyleMethod: () => getStyleMethod,
+  style: () => style
+});
+module.exports = __toCommonJS(style_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+const STYLE_METHOD_KEY = Symbol("simple-web-component:style-method");
+const style = (target, propertyKey, descriptor) => {
+  import_ReflectUtils.ReflectUtils.defineMetadata(STYLE_METHOD_KEY, propertyKey, target.constructor);
+};
+const getStyleMethod = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(STYLE_METHOD_KEY, constructor);
+};
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/style.ts"],
+  "sourcesContent": ["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"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAEtB,MAAM,mBAAmB,OAAO,mCAAmC;AAEnE,MAAM,QAAyB,CAAC,QAAgB,aAA8B,eAAmC;AACtH,mCAAa,eAAe,kBAAkB,aAAa,OAAO,WAAW;AAC/E;AAEO,MAAM,iBAAiB,CAAC,WAA6C;AAC1E,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,kBAAkB,WAAW;AAC/D;",
+  "names": []
+}

package/dist/cjs/decorators/template.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var template_exports = {};
+__export(template_exports, {
+  TEMPLATE_METHOD_KEY: () => TEMPLATE_METHOD_KEY,
+  getTemplateMethod: () => getTemplateMethod,
+  template: () => template
+});
+module.exports = __toCommonJS(template_exports);
+var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
+const TEMPLATE_METHOD_KEY = Symbol("simple-web-component:template-method");
+const template = (target, propertyKey, descriptor) => {
+  import_ReflectUtils.ReflectUtils.defineMetadata(TEMPLATE_METHOD_KEY, propertyKey, target.constructor);
+};
+const getTemplateMethod = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_ReflectUtils.ReflectUtils.getMetadata(TEMPLATE_METHOD_KEY, constructor);
+};
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/decorators/template.ts"],
+  "sourcesContent": ["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"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAEtB,MAAM,sBAAsB,OAAO,sCAAsC;AAEzE,MAAM,WAA4B,CAAC,QAAgB,aAA8B,eAAmC;AAEzH,mCAAa,eAAe,qBAAqB,aAAa,OAAO,WAAW;AAClF;AAEO,MAAM,oBAAoB,CAAC,WAA6C;AAC7E,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AAEjE,SAAO,iCAAa,YAAY,qBAAqB,WAAW;AAClE;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./decorators/element"), module.exports);
+__reExport(src_exports, require("./decorators/template"), module.exports);
+__reExport(src_exports, require("./decorators/style"), module.exports);
+__reExport(src_exports, require("./decorators/attributeChanged"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './decorators/element';\nexport * from './decorators/template';\nexport * from './decorators/style';\nexport * from './decorators/attributeChanged';"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,kCADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0CAHd;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@dooboostore/simple-web-component-cjs-internal",
+  "private": true,
+  "type": "commonjs"
+}

package/dist/esm/bundle-entry.js

@@ -0,0 +1,2 @@
+export * from "./index.js";
+//# sourceMappingURL=bundle-entry.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/bundle-entry.ts"],
+  "sourcesContent": ["export * from './index';\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/esm/decorators/attributeChanged.js

@@ -0,0 +1,23 @@
+import { ReflectUtils } from "@dooboostore/core/reflect/ReflectUtils";
+const ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:attribute-changed");
+const 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);
+  };
+};
+const getAttributeChangedMap = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+};
+export {
+  ATTRIBUTE_CHANGED_METADATA_KEY,
+  attributeChanged,
+  getAttributeChangedMap
+};
+//# sourceMappingURL=attributeChanged.js.map

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

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