@dooboostore/simple-web-component 1.0.19 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.19",
+  "version": "1.0.22",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -54,6 +54,11 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
+    "./bundle-entry": {
+      "types": "./dist/types/bundle-entry.d.ts",
+      "import": "./dist/esm/bundle-entry.js",
+      "require": "./dist/cjs/bundle-entry.js"
+    },
     "./*": {
       "types": "./dist/types/*.d.ts",
       "import": "./dist/esm/*.js",
@@ -87,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/simple-boot": "1.0.53"
+    "@dooboostore/core-web": "1.0.10",
+    "@dooboostore/core": "1.0.30",
+    "@dooboostore/core-node": "1.0.12",
+    "@dooboostore/simple-boot": "1.0.54"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { SpecialSelector, SwcQueryOptions } from '../types';
 
 export interface AddEventListenerBaseOptions extends EventListenerOptions {
@@ -44,3 +44,12 @@ export const getAddEventListenerMetadata = (target: any): AddEventListenerMetada
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
 };
+
+/**
+ * @addEventListenerHost decorator - simplified version of @addEventListener for :host selector
+ * Usage: @addEventListenerHost('click')
+ * Usage: @addEventListenerHost('click', { stopPropagation: true })
+ */
+export function addEventListenerHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
+  return addEventListener(':host', type, options);
+}

package/src/decorators/applyNode.ts

@@ -0,0 +1,127 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+
+export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText';
+
+export interface ApplyNodeOptions {
+  position?: ApplyNodePosition;
+}
+
+export interface ApplyNodeMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: ApplyNodeOptions;
+}
+
+export const APPLY_NODE_METADATA_KEY = Symbol('simple-web-component:apply-node');
+
+const normalizeNodes = (res: any, doc: Document): Node[] => {
+  const items = Array.isArray(res) ? res : [res];
+  return items.map(it => {
+    if (it instanceof Node) return it;
+    return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
+  });
+};
+
+/**
+ * @applyNode decorator to surgically add/replace nodes to a target element.
+ * 
+ * Usage examples:
+ *   @applyNode('#list') addItem() { return '<li>New Item</li>'; }  // append at end
+ *   @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
+ * 
+ * Positions:
+ *   - 'beforeEnd' (default): Append at end of target
+ *   - 'afterBegin': Prepend at start of target
+ *   - 'beforeBegin': Insert before target
+ *   - 'afterEnd': Insert after target
+ *   - 'replace': Replace the entire target element
+ *   - 'replaceChildren': Replace all children of target element
+ *   - 'innerHtml': Set target's innerHTML
+ *   - 'innerText': Set target's innerText
+ */
+export function applyNode(selector: string, options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor) as Map<string | symbol, ApplyNodeMetadata>;
+    if (!metaList) {
+      metaList = new Map<string | symbol, ApplyNodeMetadata>();
+      ReflectUtils.defineMetadata(APPLY_NODE_METADATA_KEY, metaList, constructor);
+    }
+    metaList.set(propertyKey, { propertyKey, selector, options });
+
+    const original = descriptor.value;
+    descriptor.value = async function (...args: any[]) {
+      ensureInit(this);
+      const res = await original.apply(this, args);
+      if (res !== undefined) {
+        const conf = getElementConfig(this);
+        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;
+        } else {
+          targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+        }
+
+        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) : '';
+          } 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);
+          }
+        }
+      }
+      return res;
+    };
+  };
+}
+
+export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, ApplyNodeMetadata> => {
+  const result = new Map<string | symbol, ApplyNodeMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ApplyNodeMetadata>>(APPLY_NODE_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};
+
+/**
+ * @applyNodeHost decorator - simplified version of @applyNode for :host selector
+ * 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);
+}

package/src/decorators/attribute.ts

@@ -0,0 +1,192 @@
+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;
+  connectedInitialize?: boolean;
+  type?: typeof Number | typeof Boolean | typeof String;
+}
+
+export interface AttributeMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: AttributeOptions;
+  privateKey: symbol; // Added to bypass getter during initialization
+}
+
+export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
+
+/**
+ * Helper to perform type conversion from string to target type
+ */
+const convertValue = (val: string | null, type: any): any => {
+  if (val === null || val === undefined) return val;
+  if (type === Number) return Number(val);
+  if (type === Boolean) return val === 'false' || val === '0' ? false : true;
+  return val;
+};
+
+/**
+ * Helper to resolve target elements based on selector and root options
+ */
+export const resolveTargetEls = (inst: any, selector: string, options: AttributeOptions, currentWin: any): HTMLElement[] => {
+  const r = options.root || 'auto';
+  const results: HTMLElement[] = [];
+
+  const applyRoot = (target: any) => {
+    if (!target) return;
+    if (r === 'auto') {
+      // Attributes belong to the ELEMENT, not the ShadowRoot.
+      // So for :host and direct attribute sync, we mostly want the element itself.
+      results.push(target);
+    } else {
+      if (r === 'light' || r === 'all') results.push(target);
+      if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);
+    }
+  };
+
+  if (selector === ':host' || !selector) {
+    applyRoot(inst);
+  } else if (selector === ':window') {
+    results.push(currentWin);
+  } else if (selector === ':document') {
+    results.push(currentWin.document);
+  } else {
+    const hostSet = SwcUtils.getHostSet(inst);
+    if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+    else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);
+    else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+    else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+    else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    else {
+      if (r === 'shadow') {
+        const found = inst.shadowRoot?.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'light') {
+        const found = inst.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'all') {
+        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
+        const lMatch = inst.querySelectorAll(selector);
+        if (sMatch) results.push(...sMatch);
+        if (lMatch) results.push(...lMatch);
+      } else {
+        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        if (found) results.push(...found);
+      }
+    }
+  }
+  return results;
+};
+
+/**
+ * @attribute decorator to sync a field value with an element's attribute.
+ */
+export function attribute(selector: string, options: AttributeOptions = {}): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    const privateKey = Symbol(String(propertyKey));
+
+    const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);
+
+    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_METADATA_KEY, constructor) as AttributeMetadata[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({ propertyKey, selector, options, privateKey });
+
+    // Helper function to apply setAttribute to targets
+    const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
+      targets.forEach(it => {
+        console.log('----->', it)
+        if (it && typeof (it as any).setAttribute === 'function') {
+          if (nv === null) {
+            (it as any).removeAttribute(attrName);
+          } else {
+            (it as any).setAttribute(attrName, String(nv));
+          }
+        } else {
+          inst[privateKey] = nv;
+        }
+      });
+    };
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: any) {
+        const attrName = options.name || String(propertyKey);
+        const conf = getElementConfig(this);
+        const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+        const targetType = options.type || designType;
+
+        console.log('type-->', propertyKey, targetType);
+        // During early init phase, if syncing memory to DOM, return memory.
+        if (this.__swc_syncing_init || (options.connectedInitialize && !this.__swc_connected)) {
+          return convertValue(this[privateKey], targetType);
+        }
+
+        const targets = resolveTargetEls(this, selector, options, currentWin);
+        const primaryTarget = targets[0];
+
+        if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
+          if ((primaryTarget as any).hasAttribute(attrName)) {
+            const domVal = (primaryTarget as any).getAttribute(attrName);
+            return convertValue(domVal, targetType);
+          }
+          return null;
+        }
+
+        return convertValue(this[privateKey], targetType);
+      },
+      set(this: any, nv: any) {
+        const targetType = options.type || designType;
+        console.log('---set', propertyKey, targetType, nv, this, this.__swc_syncing_init);
+
+        const attrName = options.name || String(propertyKey);
+        const conf = getElementConfig(this);
+        const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+
+        // During initialization/syncing phase
+        if (this.__swc_syncing_init) {
+          // If connectedInitialize is enabled, force setAttribute (JS -> DOM)
+          if (options.connectedInitialize === true) {
+            const targets = resolveTargetEls(this, selector, options, currentWin);
+            applySetAttribute(this, targets, attrName, nv);
+          } else {
+            // Otherwise just update memory
+            this[privateKey] = nv;
+          }
+          return;
+        }
+
+        // Before connected, save to memory only
+        if (!this.__swc_connected) {
+          this[privateKey] = nv;
+          return;
+        }
+
+        // After connected, normal setAttribute
+        const targets = resolveTargetEls(this, selector, options, currentWin);
+        applySetAttribute(this, targets, attrName, nv);
+      },
+      enumerable: true,
+      configurable: true
+    });
+  };
+}
+
+export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
+  return ReflectUtils.findAllMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target).flat();
+};
+
+/**
+ * @hostAttribute decorator - simplified version of @attribute for :host selector
+ * Usage: @hostAttribute('data-product-id')
+ * Usage: @hostAttribute('disabled', { type: Boolean })
+ */
+export function attributeHost(attrName: string, options: AttributeOptions = {}): PropertyDecorator {
+  return attribute(':host', { ...options, name: attrName });
+}

package/src/decorators/{changedAttribute.ts → changedAttributeHost.ts}

@@ -1,8 +1,12 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
 
-export function changedAttribute(attributeName?: string): MethodDecorator {
+/**
+ * @changedAttributeHost decorator - fires when any attribute on :host changes
+ * Usage: @changedAttributeHost('data-product-id')
+ */
+export function changedAttributeHost(attributeName?: string): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as Map<string, (string | symbol)[]>;

package/src/decorators/classList.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 
@@ -105,6 +105,38 @@ export const removeClassList = createClassListDecorator('remove');
  */
 export const toggleClassList = createClassListDecorator('toggle');
 
+// Host-specific versions (for :host selector)
+
+/**
+ * @setClassListHost decorator to set classes on :host element.
+ * Returns: string | string[]
+ */
+export const setClassListHost = createClassListDecorator('set').bind(null, ':host');
+
+/**
+ * @updateClassListHost decorator to update specific classes on :host.
+ * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
+ */
+export const updateClassListHost = createClassListDecorator('update').bind(null, ':host');
+
+/**
+ * @addClassListHost decorator to add classes to :host element.
+ * Returns: string | string[]
+ */
+export const addClassListHost = createClassListDecorator('add').bind(null, ':host');
+
+/**
+ * @removeClassListHost decorator to remove classes from :host element.
+ * Returns: string | string[]
+ */
+export const removeClassListHost = createClassListDecorator('remove').bind(null, ':host');
+
+/**
+ * @toggleClassListHost decorator to toggle classes on :host element.
+ * Returns: string | string[]
+ */
+export const toggleClassListHost = createClassListDecorator('toggle').bind(null, ':host');
+
 export const findAllClassListMetadata = (target: any): Map<string | symbol, ClassListMetadata> => {
   const result = new Map<string | symbol, ClassListMetadata>();
   const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ClassListMetadata>>(CLASS_LIST_METADATA_KEY, target);