@dooboostore/simple-web-component 1.0.16 → 1.0.18

package/src/decorators/queryAll.ts

@@ -1,4 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
 
 export interface QueryAllOptions {
   root?: 'light' | 'shadow' | 'all' | 'auto';
@@ -14,8 +16,6 @@ export const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');
 
 /**
  * @queryAll decorator to inject a list of elements into a class property.
- * Usage: @queryAll('.items') list!: NodeListOf<HTMLElement>;
- * Usage: @queryAll('li', { root: 'shadow' }) list!: HTMLElement[];
  */
 export function queryAll(selector: string, options: QueryAllOptions = {}): PropertyDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
@@ -33,7 +33,21 @@ export function queryAll(selector: string, options: QueryAllOptions = {}): Prope
 
     Object.defineProperty(target, propertyKey, {
       get(this: HTMLElement) {
+        // --- Special Selectors: HostSet ---
+        const hostSet = SwcUtils.getHostSet(this);
+        if (selector === ':hosts') return hostSet.$hosts;
+        if (selector === ':appHosts') return hostSet.$appHosts;
+
+        // --- Special Selectors: Env ---
+        const config = getElementConfig(this);
+        const win = config?.window || window;
+        const doc = win.document;
+
+        if (selector === ':window') return [win];
+        if (selector === ':document') return [doc];
         if (!selector || selector === ':host') return [this];
+
+        // --- Standard Selectors ---
         const r = options.root || 'auto';
 
         if (r === 'shadow') {
@@ -51,6 +65,22 @@ export function queryAll(selector: string, options: QueryAllOptions = {}): Prope
         const root = this.shadowRoot || this;
         return root.querySelectorAll(selector);
       },
+      set(this: HTMLElement, nv: any) {
+        if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
+          const r = options.root || 'auto';
+          let targets: (Element | Node)[] = [];
+          if (r === 'shadow') targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          else if (r === 'light') targets = Array.from(this.querySelectorAll(selector));
+          else if (r === 'all') {
+            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+            const lNodes = Array.from(this.querySelectorAll(selector));
+            targets = [...sNodes, ...lNodes];
+          } else {
+            targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+          }
+          targets.forEach(t => (t as Element).remove());
+        }
+      },
       enumerable: true,
       configurable: true
     });

package/src/decorators/replaceChildren.ts

@@ -0,0 +1,35 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export const REPLACE_CHILDREN_METADATA_KEY = Symbol('simple-web-component:replace-children');
+
+/**
+ * @replaceChildren decorator to surgically replace children of a target element.
+ * Usage: @replaceChildren('#container') renderPart() { return '<div>New Content</div>'; }
+ */
+export function replaceChildren(selector: string): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor) as Map<string | symbol, string>;
+    if (!meta) {
+      meta = new Map<string | symbol, string>();
+      ReflectUtils.defineMetadata(REPLACE_CHILDREN_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, selector);
+  };
+}
+
+export const getReplaceChildrenMetadata = (target: any): Map<string | symbol, string> | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
+};
+
+export const findAllReplaceChildrenMetadata = (target: any): Map<string | symbol, string> => {
+  const result = new Map<string | symbol, string>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, string>>(REPLACE_CHILDREN_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};

package/src/elements/SwcAppEngine.ts

@@ -6,6 +6,7 @@ import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
 import { Subscription } from '@dooboostore/core/message/Subscription';
 import { ConstructorType, Optional } from '@dooboostore/core/types';
+import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
 
 export type SwcConfigType = {
   rootRouter: ConstructorType<any>;
@@ -35,7 +36,7 @@ export class SwcAppEngine {
     if (!configStr) return;
 
     try {
-      const userConfig: SwcAttributeConfigType = new Function(`return ${configStr}`).apply(this.host);
+      const userConfig: SwcAttributeConfigType = FunctionUtils.executeReturn({ script: configStr, context: this.host });
       if (userConfig && userConfig.rootRouter) {
         const _config: SwcConfigType = {
           routeType: 'element',

package/src/elements/SwcAsync.ts

@@ -0,0 +1,163 @@
+import { elementDefine } from '../decorators/elementDefine';
+import { changedAttribute } from '../decorators/changedAttribute';
+import { SwcUtils } from '../utils/Utils';
+import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { SwcLoading, SwcError, SwcSuccess, SwcDefault } from './SwcSubTemplates';
+
+@elementDefine({ name: 'swc-async', extends: 'template' })
+export class SwcAsync extends HTMLTemplateElement {
+  private _nodes: Node[] = [];
+  private _currentPromise: Promise<any> | null = null;
+  private _value: any = null;
+
+  get value(): any {
+    return this._value;
+  }
+
+  set value(nv: any) {
+    if (nv instanceof Promise) {
+      this.handlePromise(nv);
+    } else {
+      this._value = nv;
+      this.render(nv === null ? 'default' : 'success', nv);
+    }
+  }
+
+  @changedAttribute('on-get-value')
+  private refresh(newValue?: string | null) {
+    const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');
+    if (!script) {
+      this.value = null; // Triggers default render
+      return;
+    }
+    if (!this.parentElement) return;
+
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+
+      if (result instanceof Promise) {
+        this.handlePromise(result);
+      } else {
+        this.value = result;
+      }
+    } catch (e) {
+      this.render('error', e);
+    }
+  }
+
+  private async handlePromise(promise: Promise<any>) {
+    this._currentPromise = promise;
+    this.render('loading');
+
+    try {
+      const result = await promise;
+      if (this._currentPromise !== promise) return;
+      this._value = result;
+      this.render('success', result);
+    } catch (e) {
+      if (this._currentPromise !== promise) return;
+      this.render('error', e);
+    }
+  }
+
+  private render(state: 'loading' | 'error' | 'success' | 'default', data?: any) {
+    this.cleanup();
+    if (!this.parentElement) return;
+
+    let fragment: DocumentFragment;
+    const ctx: any = {
+      $nodes: [],
+      $elements: [],
+      $state: state,
+      $value: null,
+      $error: null
+    };
+
+    if (state === 'default') {
+      const t = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
+      fragment = t ? (t.content.cloneNode(true) as DocumentFragment) : document.createDocumentFragment();
+    } else if (state === 'loading') {
+      const t = this.content.querySelector('template[is="swc-loading"]') as HTMLTemplateElement;
+      fragment = t ? (t.content.cloneNode(true) as DocumentFragment) : document.createDocumentFragment();
+    } else if (state === 'error') {
+      const t = this.content.querySelector('template[is="swc-error"]') as HTMLTemplateElement;
+      ctx.$error = data;
+      fragment = t ? (t.content.cloneNode(true) as DocumentFragment) : document.createDocumentFragment();
+    } else {
+      // Success
+      const t = this.content.querySelector('template[is="swc-success"]') as HTMLTemplateElement;
+      ctx.$value = data;
+      if (t) {
+        fragment = t.content.cloneNode(true) as DocumentFragment;
+      } else {
+        const clone = this.content.cloneNode(true) as DocumentFragment;
+        Array.from(clone.querySelectorAll('template[is="swc-loading"], template[is="swc-error"], template[is="swc-success"], template[is="swc-default"]')).forEach(tmp => tmp.remove());
+        fragment = clone;
+      }
+    }
+
+    this.mount(fragment, ctx);
+  }
+
+  private mount(fragment: DocumentFragment, ctx: any) {
+    const nodes = Array.from(fragment.childNodes);
+    const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];
+
+    Object.assign(ctx, {
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1]
+    });
+
+    // Execution Callbacks
+    this._executeCallback('on-clone-nodes', ctx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement) {
+        (node as any).__swc_host = this;
+      }
+      this._executeCallback('on-clone-node', {
+        ...ctx,
+        $node: node,
+        $nodeIndex: nodeIndex,
+        $isElement: node.nodeType === 1
+      });
+    });
+
+    this._nodes = nodes;
+    this.parentElement?.insertBefore(fragment, this.nextSibling);
+  }
+
+  private _executeCallback(attrName: string, extraArgs: Record<string, any>) {
+    const script = this.getAttribute(attrName);
+    if (!script) return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcAsync] Error in ${attrName}:`, e);
+    }
+  }
+
+  private cleanup() {
+    this._nodes.forEach(n => {
+      if (n.parentElement) n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+
+  connectedCallback() {
+    this.refresh();
+  }
+
+  disconnectedCallback() {
+    this.cleanup();
+  }
+}

package/src/elements/SwcChoose.ts

@@ -0,0 +1,127 @@
+import { elementDefine } from '../decorators/elementDefine';
+import { changedAttribute } from '../decorators/changedAttribute';
+import { SwcUtils } from '../utils/Utils';
+import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { SwcWhen, SwcOtherwise } from './SwcSubTemplates';
+
+@elementDefine({ name: 'swc-choose', extends: 'template' })
+export class SwcChoose extends HTMLTemplateElement {
+  private _nodes: Node[] = [];
+  private _value: any = null;
+
+  get value(): any {
+    return this._value;
+  }
+
+  set value(nv: any) {
+    this._value = nv;
+    this.render();
+  }
+
+  private _executeCallback(attrName: string, extraArgs: Record<string, any>) {
+    const script = this.getAttribute(attrName);
+    if (!script) return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcChoose] Error in ${attrName}:`, e);
+    }
+  }
+
+  @changedAttribute('on-get-value')
+  private refresh(newValue?: string | null) {
+    const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement) return;
+
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      this.value = result;
+    } catch (e) {
+      console.error('[SwcChoose] Error in on-get-value:', e);
+    }
+  }
+
+  private render() {
+    this.cleanup();
+    if (!this.parentElement) return;
+
+    const templates = Array.from(this.content.querySelectorAll('template'));
+    let selected: HTMLTemplateElement | null = null;
+    let otherwise: HTMLTemplateElement | null = null;
+    let defaultTmp: HTMLTemplateElement | null = null;
+
+    for (const t of templates) {
+      const is = t.getAttribute('is');
+      if (is === 'swc-when') {
+        const whenVal = t.getAttribute('value');
+        if (String(whenVal) === String(this._value)) {
+          selected = t;
+          break;
+        }
+      } else if (is === 'swc-otherwise') {
+        otherwise = t;
+      } else if (is === 'swc-default') {
+        defaultTmp = t;
+      }
+    }
+
+    const targetTemplate = (this._value == null ? defaultTmp : selected) || otherwise || defaultTmp;
+    if (targetTemplate) {
+      const clone = targetTemplate.content.cloneNode(true) as DocumentFragment;
+      const nodes = Array.from(clone.childNodes);
+      const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];
+
+      const ctx = {
+        $value: this._value,
+        $nodes: nodes,
+        $elements: elements,
+        $firstNode: nodes[0],
+        $lastNode: nodes[nodes.length - 1],
+        $firstElement: elements[0],
+        $lastElement: elements[elements.length - 1]
+      };
+
+      // Execution Callbacks
+      this._executeCallback('on-clone-nodes', ctx);
+      nodes.forEach((node, nodeIndex) => {
+        if (node instanceof HTMLElement) {
+          (node as any).__swc_host = this;
+        }
+        this._executeCallback('on-clone-node', {
+          ...ctx,
+          $node: node,
+          $nodeIndex: nodeIndex,
+          $isElement: node.nodeType === 1
+        });
+      });
+
+      this._nodes = nodes;
+      this.parentElement.insertBefore(clone, this.nextSibling);
+    }
+  }
+
+  private cleanup() {
+    this._nodes.forEach(n => {
+      if (n.parentElement) n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+
+  connectedCallback() {
+    this.refresh();
+  }
+
+  disconnectedCallback() {
+    this.cleanup();
+  }
+}

package/src/elements/SwcIf.ts

@@ -0,0 +1,134 @@
+import { elementDefine } from '../decorators/elementDefine';
+import { changedAttribute } from '../decorators/changedAttribute';
+import { SwcUtils } from '../utils/Utils';
+import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+
+@elementDefine({ name: 'swc-if', extends: 'template' })
+export class SwcIf extends HTMLTemplateElement {
+  private _nodes: Node[] = [];
+  private _value: any = null;
+
+  get value(): any {
+    return this._value;
+  }
+
+  set value(nv: any) {
+    this._value = nv;
+    this.render();
+  }
+
+  private _getTarget(): Element | DocumentFragment | null {
+    const script = this.getAttribute('on-get-portal');
+    if (!script) return null;
+    try {
+      const res = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: SwcUtils.getHelperAndHostSet(window, this)
+      });
+      if (typeof res === 'string') return document.querySelector(res);
+      if (res instanceof Node) return res as any;
+    } catch (e) {
+      console.error('[SwcIf] Portal target error:', e);
+    }
+    return null;
+  }
+
+  private _executeCallback(attrName: string, extraArgs: Record<string, any>) {
+    const script = this.getAttribute(attrName);
+    if (!script) return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcIf] Error in ${attrName}:`, e);
+    }
+  }
+
+  @changedAttribute('on-get-value')
+  private refresh(newValue?: string | null) {
+    const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement) return;
+
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      this.value = result;
+    } catch (e) {
+      console.error('[SwcIf] Error in on-get-value:', e);
+      this.value = null;
+    }
+  }
+
+  private render() {
+    this.cleanup();
+    if (!this.parentElement) return;
+
+    let fragment: DocumentFragment | null = null;
+    const ctx: any = { $value: this._value, $nodes: [], $elements: [] };
+
+    if (this._value) {
+      const clone = this.content.cloneNode(true) as DocumentFragment;
+      Array.from(clone.querySelectorAll('template[is="swc-default"]')).forEach(t => t.remove());
+      fragment = clone;
+    } else {
+      const t = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
+      if (t) fragment = t.content.cloneNode(true) as DocumentFragment;
+    }
+
+    if (fragment) {
+      this.mount(fragment, ctx);
+    }
+  }
+
+  private mount(fragment: DocumentFragment, ctx: any) {
+    const nodes = Array.from(fragment.childNodes);
+    const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];
+
+    Object.assign(ctx, {
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1]
+    });
+
+    this._executeCallback('on-clone-nodes', ctx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement) (node as any).__swc_host = this;
+      this._executeCallback('on-clone-node', { ...ctx, $node: node, $nodeIndex: nodeIndex, $isElement: node.nodeType === 1 });
+    });
+
+    this._nodes = nodes;
+    const target = this._getTarget();
+    if (target) {
+      target.appendChild(fragment);
+    } else {
+      this.parentElement?.insertBefore(fragment, this.nextSibling);
+    }
+  }
+
+  private cleanup() {
+    this._nodes.forEach(n => {
+      if (n.parentElement) n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+
+  connectedCallback() {
+    this.refresh();
+  }
+
+  disconnectedCallback() {
+    this.cleanup();
+  }
+}