@dooboostore/simple-web-component 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -92,8 +92,8 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core-web": "1.0.10",
     "@dooboostore/core": "1.0.30",
+    "@dooboostore/core-web": "1.0.10",
     "@dooboostore/core-node": "1.0.12",
     "@dooboostore/simple-boot": "1.0.54"
   },

package/src/decorators/applyNode.ts

@@ -1,10 +1,13 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcRootType } from '../types';
+import {SwcUtils} from "../utils/Utils";
 
-export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText';
+export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove';
 
 export interface ApplyNodeOptions {
   position?: ApplyNodePosition;
+  root?: SwcRootType;
 }
 
 export interface ApplyNodeMetadata {
@@ -31,6 +34,8 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
  *   @applyNode('#header', { position: 'afterBegin' }) prependItem() { return '<h1>Title</h1>'; }  // prepend at start
  *   @applyNode('#item', { position: 'replace' }) replaceItem() { return '<div>Replaced</div>'; }  // replace element
  *   @applyNode('#list', { position: 'replaceChildren' }) updateList() { return [item1, item2]; }  // replace all children
+ *   @applyNode('#notification', { position: 'remove' }) dismissNotification() { return shouldDismiss; }  // remove if truthy
+ *   @applyNode('.items', { position: 'remove', root: 'shadow' }) clearItems() { return true; }  // remove shadow DOM elements
  * 
  * Positions:
  *   - 'beforeEnd' (default): Append at end of target
@@ -41,6 +46,13 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
  *   - 'replaceChildren': Replace all children of target element
  *   - 'innerHtml': Set target's innerHTML
  *   - 'innerText': Set target's innerText
+ *   - 'remove': Remove target element if returned value is truthy
+ * 
+ * Root Options:
+ *   - 'auto' (default): Search shadow DOM first, then light DOM
+ *   - 'shadow': Search only in shadow DOM
+ *   - 'light': Search only in light DOM
+ *   - 'all': Use both (shadow preferred for query, both for remove)
  */
 export function applyNode(selector: string, options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
@@ -61,43 +73,101 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
         const currentDoc = currentWin.document;
 
-        let targetEl: HTMLElement | null = null;
-        if (selector === ':host' || !selector) {
-          targetEl = this as any;
+        const pos = options.position || 'beforeEnd';
+        const r = options.root || 'auto';
+        const applyRoot = (t: any) => {
+          if (!t || !(t instanceof HTMLElement)) return t;
+          if (r === 'auto') return t.shadowRoot || t;
+          if (r === 'shadow') return t.shadowRoot;
+          if (r === 'light') return t;
+          if (r === 'all') return t.shadowRoot || t; // query only returns one, so shadow preferred
+          return t;
+        };
+
+        const hostSet = SwcUtils.getHostSet(this);
+        // const getTargetRoot = () => {
+        //   if (r === 'shadow') return this.shadowRoot;
+        //   if (r === 'light') return this as any;
+        //   if (r === 'all') return this.shadowRoot || (this as any);
+        //   return this.shadowRoot || (this as any); // auto
+        // };
+
+        if (pos === 'remove') {
+          // Remove element(s) if returned value is truthy
+          if (res) {
+            if (selector === ':host' || !selector) {
+              if (r === 'shadow' && this.shadowRoot) {
+                // Remove all children from shadow DOM
+                this.shadowRoot.replaceChildren();
+              } else {
+                // Remove the component itself
+                (this as any).remove();
+              }
+            } else {
+              const targetRoot = applyRoot(this);
+              if (targetRoot) {
+                const targets = targetRoot.querySelectorAll(selector);
+                targets.forEach((el: Element) => el.remove());
+              }
+            }
+          }
         } else {
-          targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
-        }
+          let targetEl: any = null;
 
-        if (targetEl) {
-          const nodes = normalizeNodes(res, currentDoc);
-          const pos = options.position || 'beforeEnd';
-
-          if (pos === 'replace') {
-            // Replace the entire target element with new nodes
-            targetEl.replaceWith(...nodes);
-          } else if (pos === 'replaceChildren') {
-            // Replace all children of target element
-            targetEl.replaceChildren(...nodes);
-          } else if (pos === 'innerHtml') {
-            // Set innerHTML
-            targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
-          } else if (pos === 'innerText') {
-            // Set innerText
-            targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
+          if (selector === ':host') {
+            targetEl =  applyRoot(this)
+          } else if (selector === ':parentHost') {
+            targetEl =  applyRoot(hostSet.$parentHost)
+          } else if (selector === ':appHost') {
+            targetEl =  applyRoot(hostSet.$appHost)
+          } else if (selector === ':firstHost') {
+            targetEl =  applyRoot(hostSet.$firstHost)
+          } else if (selector === ':lastHost') {
+            targetEl =  applyRoot(hostSet.$lastHost)
+          } else if (selector === ':firstAppHost') {
+            targetEl =  applyRoot(hostSet.$firstHost)
+          } else if (selector === ':lastAppHost') {
+            targetEl =  applyRoot(hostSet.$lastAppHost);
           } else {
-            /*
-                  <!-- beforebegin -->
-                  <p>
-                    <!-- afterbegin -->
-                    foo
-                    <!-- beforeend -->
-                  </p>
-                  <!-- afterend -->
-             */
-            if (pos === 'beforeEnd') targetEl.append(...nodes);
-            else if (pos === 'afterBegin') targetEl.prepend(...nodes);
-            else if (pos === 'beforeBegin') targetEl.before(...nodes);
-            else if (pos === 'afterEnd') targetEl.after(...nodes);
+            const targetRoot = applyRoot(this);
+            targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
+          }
+
+          if (targetEl) {
+            const isShadowRoot = targetEl instanceof ShadowRoot;
+            const nodes = normalizeNodes(res, currentDoc);
+
+            if (pos === 'replace') {
+              // ShadowRoot doesn't support replaceWith
+              if (!isShadowRoot) {
+                targetEl.replaceWith(...nodes);
+              }
+            } else if (pos === 'replaceChildren') {
+              // Replace all children of target element
+              targetEl.replaceChildren(...nodes);
+            } else if (pos === 'innerHtml') {
+              // Set innerHTML
+              targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
+            } else if (pos === 'innerText') {
+              // Set innerText
+              if (targetEl.innerText !== undefined) {
+                targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
+              }
+            } else {
+              /*
+                    <!-- beforebegin -->
+                    <p>
+                      <!-- afterbegin -->
+                      foo
+                      <!-- beforeend -->
+                    </p>
+                    <!-- afterend -->
+               */
+              if (pos === 'beforeEnd') targetEl.append(...nodes);
+              else if (pos === 'afterBegin') targetEl.prepend(...nodes);
+              else if (pos === 'beforeBegin' && !isShadowRoot) targetEl.before(...nodes);
+              else if (pos === 'afterEnd' && !isShadowRoot) targetEl.after(...nodes);
+            }
           }
         }
       }
@@ -119,9 +189,221 @@ export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, Appl
 
 /**
  * @applyNodeHost decorator - simplified version of @applyNode for :host selector
+ * Usage: @applyNodeHost addItem() { return '<li>New Item</li>'; }
  * Usage: @applyNodeHost() addItem() { return '<li>New Item</li>'; }
  * Usage: @applyNodeHost({ position: 'afterBegin' }) prependItem() { return '<h1>Title</h1>'; }
  */
-export function applyNodeHost(options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
-  return applyNode(':host', options);
+export function applyNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeHost(): MethodDecorator;
+export function applyNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  // Direct decorator usage: @applyNodeHost (no parentheses)
+  console.log('vvvvv')
+  if (propertyKey !== undefined && typeof propertyKey === 'string' || typeof propertyKey === 'symbol') {
+    return applyNode(':host', { position: 'beforeEnd' })(targetOrOptions, propertyKey, descriptor);
+  }
+
+  // @applyNodeHost() or @applyNodeHost(options)
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    const options = targetOrOptions as ApplyNodeOptions;
+    return applyNode(':host', { ...options, position: options.position || 'beforeEnd' });
+  } else {
+    // @applyNodeHost() - use default position
+    return applyNode(':host', { position: 'beforeEnd' });
+  }
+}
+
+// Convenience decorators for specific positions
+
+/**
+ * @applyBeforeBeginNode - Insert before target element
+ */
+export function applyBeforeBeginNode(selector: string): MethodDecorator;
+export function applyBeforeBeginNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeBeginNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'beforeBegin' });
+}
+
+/**
+ * @applyAfterBeginNode - Prepend to target element
+ */
+export function applyAfterBeginNode(selector: string): MethodDecorator;
+export function applyAfterBeginNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterBeginNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'afterBegin' });
+}
+
+/**
+ * @applyBeforeEndNode - Append to target element (default)
+ */
+export function applyBeforeEndNode(selector: string): MethodDecorator;
+export function applyBeforeEndNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeEndNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'beforeEnd' });
+}
+
+/**
+ * @applyAfterEndNode - Insert after target element
+ */
+export function applyAfterEndNode(selector: string): MethodDecorator;
+export function applyAfterEndNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterEndNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'afterEnd' });
+}
+
+/**
+ * @applyReplaceNode - Replace entire target element
+ */
+export function applyReplaceNode(selector: string): MethodDecorator;
+export function applyReplaceNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'replace' });
+}
+
+/**
+ * @applyReplaceChildrenNode - Replace all children of target element
+ */
+export function applyReplaceChildrenNode(selector: string): MethodDecorator;
+export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceChildrenNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'replaceChildren' });
+}
+
+/**
+ * @applyInnerHtmlNode - Set target's innerHTML
+ */
+export function applyInnerHtmlNode(selector: string): MethodDecorator;
+export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerHtmlNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'innerHtml' });
+}
+
+/**
+ * @applyInnerTextNode - Set target's innerText
+ */
+export function applyInnerTextNode(selector: string): MethodDecorator;
+export function applyInnerTextNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerTextNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'innerText' });
+}
+
+/**
+ * @applyRemoveNode - Remove target element if truthy
+ */
+export function applyRemoveNode(selector: string): MethodDecorator;
+export function applyRemoveNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
+export function applyRemoveNode(selector: string, options?: ApplyNodeOptions): any {
+  return applyNode(selector, { ...options, position: 'remove' });
+}
+
+// Host versions
+
+/**
+ * @applyBeforeBeginNodeHost - Insert before :host
+ */
+export function applyBeforeBeginNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function applyBeforeBeginNodeHost(): MethodDecorator;
+export function applyBeforeBeginNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeBeginNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'beforeBegin' });
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(targetOrOptions as ApplyNodeOptions || {}), position: 'beforeBegin' });
+}
+
+/**
+ * @applyAfterBeginNodeHost - Prepend to :host
+ */export function applyAfterBeginNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyAfterBeginNodeHost(): MethodDecorator;
+export function applyAfterBeginNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterBeginNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'afterBegin' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'afterBegin' });
+}
+
+/**
+ * @applyBeforeEndNodeHost - Append to :host
+ */export function applyBeforeEndNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyBeforeEndNodeHost(): MethodDecorator;
+export function applyBeforeEndNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyBeforeEndNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'beforeEnd' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'beforeEnd' });
+}
+
+/**
+ * @applyAfterEndNodeHost - Insert after :host
+ */export function applyAfterEndNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyAfterEndNodeHost(): MethodDecorator;
+export function applyAfterEndNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyAfterEndNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'afterEnd' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'afterEnd' });
+}
+
+/**
+ * @applyReplaceNodeHost - Replace :host
+ */export function applyReplaceNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyReplaceNodeHost(): MethodDecorator;
+export function applyReplaceNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'replace' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'replace' });
+}
+
+/**
+ * @applyReplaceChildrenNodeHost - Replace children of :host
+ */export function applyReplaceChildrenNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyReplaceChildrenNodeHost(): MethodDecorator;
+export function applyReplaceChildrenNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyReplaceChildrenNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'replaceChildren' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'replaceChildren' });
+}
+
+/**
+ * @applyInnerHtmlNodeHost - Set :host innerHTML
+ */export function applyInnerHtmlNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyInnerHtmlNodeHost(): MethodDecorator;
+export function applyInnerHtmlNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerHtmlNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'innerHtml' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'innerHtml' });
+}
+
+/**
+ * @applyInnerTextNodeHost - Set :host innerText
+ */export function applyInnerTextNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyInnerTextNodeHost(): MethodDecorator;
+export function applyInnerTextNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyInnerTextNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'innerText' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'innerText' });
+}
+
+/**
+ * @applyRemoveNodeHost - Remove :host if truthy
+ */export function applyRemoveNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyRemoveNodeHost(): MethodDecorator;
+export function applyRemoveNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyRemoveNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = applyNode(':host', { position: 'remove' });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'remove' });
 }

package/src/decorators/attribute.ts

@@ -1,7 +1,7 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit, getElementConfig } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import {ReflectUtils} from '@dooboostore/core';
+import {ensureInit, getElementConfig} from './elementDefine';
+import {SwcUtils} from '../utils/Utils';
+import {SpecialSelector, SwcQueryOptions} from '../types';
 
 export interface AttributeOptions extends SwcQueryOptions {
   name?: string;
@@ -97,7 +97,7 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
       metaList = [];
       ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
     }
-    metaList.push({ propertyKey, selector, options, privateKey });
+    metaList.push({propertyKey, selector, options, privateKey});
 
     // Helper function to apply setAttribute to targets
     const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
@@ -143,7 +143,7 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
       },
       set(this: any, nv: any) {
         const targetType = options.type || designType;
-        console.log('---set', propertyKey, targetType, nv, this, this.__swc_syncing_init);
+        // console.log('---set', propertyKey, targetType, nv, this, this.__swc_syncing_init);
 
         const attrName = options.name || String(propertyKey);
         const conf = getElementConfig(this);
@@ -183,10 +183,43 @@ export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
 };
 
 /**
- * @hostAttribute decorator - simplified version of @attribute for :host selector
- * Usage: @hostAttribute('data-product-id')
- * Usage: @hostAttribute('disabled', { type: Boolean })
+ * @attributeHost decorator - simplified version of @attribute for :host selector
+ * Usage: @attributeHost - uses field name as attribute name
+ * Usage: @attributeHost() - uses field name as attribute name
+ * Usage: @attributeHost('data-id') - uses custom attribute name
+ * Usage: @attributeHost({ type: Boolean }) - uses field name with options
+ * Usage: @attributeHost('data-id', { type: Boolean }) - uses custom name with options
  */
-export function attributeHost(attrName: string, options: AttributeOptions = {}): PropertyDecorator {
-  return attribute(':host', { ...options, name: attrName });
+export function attributeHost(target: Object, propertyKey: string | symbol): void;
+export function attributeHost(): PropertyDecorator;
+export function attributeHost(options: AttributeOptions): PropertyDecorator;
+export function attributeHost(attrName: string): PropertyDecorator;
+export function attributeHost(attrName: string, options: AttributeOptions): PropertyDecorator;
+export function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
+  // Direct decorator usage: @attributeHost (no parentheses)
+  if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
+    const fieldName = String(propertyKeyOrOptions);
+    return attribute(':host', { name: fieldName })(targetOrAttrOrOptions, propertyKeyOrOptions);
+  }
+
+  // @attributeHost() or @attributeHost(options) or @attributeHost('name')
+  if (typeof targetOrAttrOrOptions === 'string') {
+    // @attributeHost('customName') or @attributeHost('customName', options)
+    const attrName = targetOrAttrOrOptions;
+    const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeOptions;
+    return attribute(':host', { ...options, name: attrName });
+  } else if (typeof targetOrAttrOrOptions === 'object') {
+    // @attributeHost(options) - use field name as attribute name
+    const options = targetOrAttrOrOptions as AttributeOptions;
+    return (target: Object, propertyKey: string | symbol) => {
+      const fieldName = String(propertyKey);
+      return attribute(':host', { ...options, name: fieldName })(target, propertyKey);
+    };
+  } else {
+    // @attributeHost() - use field name as attribute name
+    return (target: Object, propertyKey: string | symbol) => {
+      const fieldName = String(propertyKey);
+      return attribute(':host', { name: fieldName })(target, propertyKey);
+    };
+  }
 }

package/src/decorators/changedAttributeHost.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core';
+import {ReflectUtils} from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');