@dooboostore/simple-web-component 1.0.15 → 1.0.17

package/src/elements/SwcLoop.ts

@@ -0,0 +1,215 @@
+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-loop', extends: 'template' })
+export class SwcLoop extends HTMLTemplateElement {
+  private _value: any[] = [];
+  private _nodes: (Node[] | null)[] = [];
+  private _defaultNodes: Node[] = [];
+
+  get value(): any[] {
+    return this._value;
+  }
+
+  set value(nv: any[]) {
+    this._value = Array.isArray(nv) ? [...nv] : [];
+    this.render();
+  }
+
+  getNodes(index: number): Node[] | null {
+    return this._nodes[index] || null;
+  }
+
+  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('[SwcLoop] Portal target error:', e);
+    }
+    return null;
+  }
+
+  append(...items: any[]) {
+    if (!items.length || !this.parentElement) return;
+    if (this._defaultNodes.length > 0) this._cleanupDefault();
+
+    const fragment = document.createDocumentFragment();
+    const startIndex = this._value.length;
+
+    items.forEach((item, i) => {
+      const index = startIndex + i;
+      const nodes = this._createItemNodes(item, index);
+      if (nodes) {
+        this._nodes.push(nodes);
+        nodes.forEach(n => fragment.appendChild(n));
+        this._value.push(item);
+      } else {
+        this._nodes.push(null);
+        this._value.push(null);
+      }
+    });
+
+    const target = this._getTarget();
+    if (target) {
+      target.appendChild(fragment);
+    } else {
+      const lastValidIdx = this._nodes.length - items.length - 1;
+      let refNode: Node = this;
+      for (let i = lastValidIdx; i >= 0; i--) {
+        const group = this._nodes[i];
+        if (group && group.length > 0) {
+          refNode = group[group.length - 1];
+          break;
+        }
+      }
+      this.parentElement.insertBefore(fragment, refNode.nextSibling);
+    }
+  }
+
+  remove(index?: number) {
+    const targetIdx = index !== undefined ? index : this._nodes.length - 1;
+    if (targetIdx < 0 || targetIdx >= this._nodes.length) return;
+
+    const nodes = this._nodes[targetIdx];
+    if (nodes) {
+      nodes.forEach(n => {
+        if (n.parentElement) n.parentElement.removeChild(n);
+      });
+      this._nodes[targetIdx] = null;
+      this._value[targetIdx] = null;
+    }
+
+    const activeRows = this._value.filter(v => v !== null);
+    if (activeRows.length === 0) {
+      this.render();
+    }
+  }
+
+  private _createItemNodes(item: any, index: number): Node[] {
+    const clone = this.content.cloneNode(true) as DocumentFragment;
+    Array.from(clone.querySelectorAll('template[is="swc-default"]')).forEach(t => t.remove());
+
+    const nodes = Array.from(clone.childNodes);
+    const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];
+
+    const groupCtx = {
+      $index: index,
+      $item: item,
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1],
+      $isFirst: index === 0,
+      $isLast: index === this._value.length - 1,
+      $isEven: index % 2 === 0,
+      $isOdd: index % 2 !== 0,
+      $count: this._value.length
+    };
+
+    this._executeCallback('on-clone-nodes', groupCtx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement) (node as any).__swc_host = this;
+      this._executeCallback('on-clone-node', { ...groupCtx, $node: node, $nodeIndex: nodeIndex, $isElement: node.nodeType === 1 });
+    });
+
+    return nodes;
+  }
+
+  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(`[SwcLoop] Error in ${attrName}:`, e);
+    }
+  }
+
+  @changedAttribute('on-get-value')
+  private refreshValue(newValue?: string | null) {
+    const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');
+    if (!script) {
+      this.value = [];
+      return;
+    }
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const res = FunctionUtils.executeReturn({ script, context: this, args: helperHostSet });
+      if (Array.isArray(res)) {
+        this.value = res;
+      }
+    } catch (e) {
+      console.error('[SwcLoop] Failed to get value from on-get-value script:', e);
+      this.value = [];
+    }
+  }
+
+  render() {
+    this._cleanup();
+    if (!this.parentElement) return;
+
+    const activeRows = this._value.filter(v => v !== null);
+    const target = this._getTarget();
+
+    if (activeRows.length === 0) {
+      const t = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
+      if (t) {
+        const clone = t.content.cloneNode(true) as DocumentFragment;
+        this._defaultNodes = Array.from(clone.childNodes);
+        this._defaultNodes.forEach(n => {
+          if (n instanceof HTMLElement) (n as any).__swc_host = this;
+        });
+        if (target) target.appendChild(clone);
+        else this.parentElement.insertBefore(clone, this.nextSibling);
+      }
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+    this._value.forEach((item, index) => {
+      if (item === null) {
+        this._nodes.push(null);
+        return;
+      }
+      const nodes = this._createItemNodes(item, index);
+      this._nodes.push(nodes);
+      nodes.forEach(n => fragment.appendChild(n));
+    });
+
+    if (target) target.appendChild(fragment);
+    else this.parentElement.insertBefore(fragment, this.nextSibling);
+  }
+
+  private _cleanup() {
+    this._nodes.forEach(group => {
+      if (group) group.forEach(node => node.parentElement?.removeChild(node));
+    });
+    this._nodes = [];
+    this._cleanupDefault();
+  }
+
+  private _cleanupDefault() {
+    this._defaultNodes.forEach(n => n.parentElement?.removeChild(n));
+    this._defaultNodes = [];
+  }
+
+  connectedCallback() {
+    this.refreshValue();
+  }
+  disconnectedCallback() {
+    this._cleanup();
+  }
+}

package/src/elements/SwcSubTemplates.ts

@@ -0,0 +1,19 @@
+import { elementDefine } from '../decorators/elementDefine';
+
+@elementDefine({ name: 'swc-loading', extends: 'template' })
+export class SwcLoading extends HTMLTemplateElement {}
+
+@elementDefine({ name: 'swc-error', extends: 'template' })
+export class SwcError extends HTMLTemplateElement {}
+
+@elementDefine({ name: 'swc-success', extends: 'template' })
+export class SwcSuccess extends HTMLTemplateElement {}
+
+@elementDefine({ name: 'swc-when', extends: 'template' })
+export class SwcWhen extends HTMLTemplateElement {}
+
+@elementDefine({ name: 'swc-otherwise', extends: 'template' })
+export class SwcOtherwise extends HTMLTemplateElement {}
+
+@elementDefine({ name: 'swc-default', extends: 'template' })
+export class SwcDefault extends HTMLTemplateElement {}

package/src/elements/index.ts

@@ -1,3 +1,8 @@
-// import {SwcHTMLElement} from "./SwcHTMLElement";
-
-export * from './is'
+export * from './is';
+export * from './SwcSubTemplates';
+export * from './SwcLoop';
+export * from './SwcIf';
+export * from './SwcChoose';
+export * from './SwcAsync';
+export * from './SwcApp';
+export * from './SwcAppEngine';

package/src/index.ts

@@ -15,7 +15,7 @@ export * from './decorators/addEventListener';
 export * from './types';
 
 // Apps (Customized Built-in Elements)
-export * from './elements/is';
+export * from './elements';
 
 // Utilities
 export * from './utils/Utils';

package/src/types.ts

@@ -6,24 +6,34 @@ export enum InjectSituationType {
   APP_HOST = 'SIMPLE_WEB_COMPONENT://APPHOST',
   APP_HOSTS = 'SIMPLE_WEB_COMPONENT://APPHOSTS',
   HOST = 'SIMPLE_WEB_COMPONENT://HOST',
+  PARENT_HOST = 'SIMPLE_WEB_COMPONENT://PARENTHOST',
   HOSTS = 'SIMPLE_WEB_COMPONENT://HOSTS',
   FIRST_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTHOST',
   LAST_HOST = 'SIMPLE_WEB_COMPONENT://LASTHOST',
   FIRST_APP_HOST = 'SIMPLE_WEB_COMPONENT://FIRSTAPPHOST',
   LAST_APP_HOST = 'SIMPLE_WEB_COMPONENT://LASTAPPHOST'
 }
-
+export type HelperSet = {
+  $d: Document;
+  $w: Window;
+  $q: (selector: string,  root?: Element | Document | ShadowRoot) => HTMLElement | null;
+  $qa: (selector: string,  root?: Element | Document | ShadowRoot) => HTMLElement[];
+  $qi: (selector: string,  root?: Element | Document | ShadowRoot) => HTMLElement | null;
+}
 export type HostSet = {
-  $host: HTMLElement | null;
-  $hosts: HTMLElement[];
-  $firstHost: HTMLElement | null;
-  $lastHost: HTMLElement | null;
+  $host: HTMLElement; // Current component itself
+  $parentHost: HTMLElement | null; // Nearest parent SWC component
+  $hosts: HTMLElement[]; // [self, parent, ..., top]
+  $firstHost: HTMLElement | null; // Top-most SWC ancestor
+  $lastHost: HTMLElement | null; // Same as $parentHost (for backward compatibility or clarity)
   $appHost: SwcAppInterface | null;
   $appHosts: SwcAppInterface[];
   $firstAppHost: SwcAppInterface | null;
   $lastAppHost: SwcAppInterface | null;
 };
 
+export type HelperHostSet = HelperSet & HostSet;
+
 export interface SwcAppInterface extends HTMLElement {
   simpleApplication?: SimpleApplication;
   router?: Router;

package/src/utils/Utils.ts

@@ -1,223 +1,137 @@
-import {HostSet, SwcAppInterface} from '../types';
+import { SwcAppInterface, HostSet, HelperSet, HelperHostSet } from '../types';
+import { getElementConfig } from '../decorators/elementDefine';
 
 export const SWC_NOT_FOUND = Symbol('SWC_NOT_FOUND');
 
-export class SwcUtils {
-  static getValueByPath(obj: any, path: string, rootName: string) {
+export namespace SwcUtils {
+  export const getHelperSet = (win: Window): HelperSet => {
+    const doc: Document = win.document;
+    return {
+      $d: doc,
+      $w: win,
+      $q: (sel: string, root?: Element | Document | ShadowRoot) => (root ?? doc).querySelector(sel),
+      $qa: (sel: string, root?: Element | Document | ShadowRoot) => Array.from((root ?? doc).querySelectorAll(sel)) as HTMLElement[],
+      $qi: (id: string, root?: Document | ShadowRoot) => (root ?? doc).getElementById(id) as HTMLElement
+    } as const;
+  };
+
+  export const getHelperAndHostSet = (win: Window, el: HTMLElement): HelperHostSet => {
+    const helperSet = getHelperSet(win);
+    const hostSet = getHostSet(el);
+    return {
+      ...helperSet,
+      ...hostSet
+    };
+  };
+
+  export const getValueByPath = (obj: any, path: string, rootName: string) => {
     if (!obj || !path) return SWC_NOT_FOUND;
 
     const parts = path.split('.');
+    let current = obj;
 
-    // 1. If the path starts with the rootName (alias), strip it and resolve within obj
-    if (parts[0] === rootName && parts.length > 1) {
-      const subParts = parts.slice(1);
-      let subResult = obj;
-      for (const part of subParts) {
-        if (subResult === null || typeof subResult !== 'object' || !(part in subResult)) return SWC_NOT_FOUND;
-        subResult = subResult[part];
-      }
-      return subResult;
-    }
-
-    // 2. Fallback: resolve directly on obj (standard behavior)
-    let result = obj;
     for (const part of parts) {
-      if (result === null || typeof result !== 'object' || !(part in result)) {
-        return SWC_NOT_FOUND;
-      }
-      result = result[part];
+      if (current === null || current === undefined) return SWC_NOT_FOUND;
+      current = current[part];
     }
-
-    // Safety: don't return the instance itself or a DOM element as a template value
-    if (result !== obj && !(result instanceof HTMLElement)) {
-      return result;
+    return current;
+  };
+
+  /**
+   * Finds the nearest logical SWC host for an element.
+   * Checks __swc_host property first, then climbs the DOM tree.
+   */
+  export const findNearestSwcHost = (el: HTMLElement | Node): HTMLElement | undefined => {
+    if ((el as any).__swc_host) return (el as any).__swc_host;
+
+    let current: any = el.parentElement || (el.getRootNode?.() as any)?.host;
+    while (current && current !== document && current !== window) {
+      if (current.__swc_host) return current.__swc_host;
+      if (getElementConfig(current)) return current as HTMLElement;
+      current = current.parentElement || (current.getRootNode?.() as any)?.host;
     }
-
-    return SWC_NOT_FOUND;
-  }
-
-  static evalExpression(expr: string, context: Record<string, any>): any {
-    try {
-      const keys = Object.keys(context);
-      const values = Object.values(context);
-      // eslint-disable-next-line no-new-func
-      return new Function(...keys, `return (${expr})`).apply(null, values);
-    } catch {
-      return SWC_NOT_FOUND;
-    }
-  }
-
-  static applyData(
-    node: Node,
-    data: any,
-    options: {
-      asKey: string;
-      asIndexKey: string;
-      index?: number;
-      hostContext?: Record<string, any>;
-    }
-  ) {
-    const { asKey, asIndexKey, index, hostContext } = options;
-    const context: Record<string, any> = {};
-    if (index !== undefined) {
-      context[asIndexKey] = index;
-    }
-    if (data !== null && data !== undefined) {
-      context[asKey] = data;
-      context['value'] = data; // Always provide 'value' as well
-    }
-    const fullContext: Record<string, any> = { ...(hostContext || {}), ...context };
-
-    const resolveExpr = (expr: string, match: string): string => {
-      expr = expr.trim();
-      // 1. Local path resolve
-      const simpleVal = SwcUtils.getValueByPath(data, expr, asKey);
-      if (simpleVal !== SWC_NOT_FOUND && typeof simpleVal !== 'symbol') {
-        return simpleVal === null || simpleVal === undefined ? '' : String(simpleVal);
-      }
-      // 2. Full context eval (alias, host states, etc.)
-      const exprVal = SwcUtils.evalExpression(expr, fullContext);
-      if (exprVal !== SWC_NOT_FOUND && typeof exprVal !== 'symbol') {
-        return exprVal === null || exprVal === undefined ? '' : String(exprVal);
-      }
-      return match;
-    };
-
-    const walk = (n: Node) => {
-      if (n.nodeType === Node.TEXT_NODE) {
-        if (!(n as any)._original) (n as any)._original = n.textContent;
-        let text = (n as any)._original;
-        text = text.replace(/{{(.*?)}}/g, (match: string, path: string) => {
-          return resolveExpr(path, match);
-        });
-        if (n.textContent !== text) n.textContent = text;
-      } else if (n.nodeType === Node.ELEMENT_NODE) {
-        const el = n as HTMLElement;
-        Array.from(el.attributes).forEach(a => {
-          if (!(a as any)._original) (a as any)._original = a.value;
-          let val = (a as any)._original;
-          val = val.replace(/{{(.*?)}}/g, (match: string, path: string) => {
-            return resolveExpr(path, match);
-          });
-          if (a.value !== val) a.value = val;
-        });
-        el.childNodes.forEach(walk);
-      }
-    };
-    walk(node);
-  }
-
-  static createReactiveProxy(target: any, onChange: () => void, onIndexChange?: (index: number, val: any) => void) {
-    const makeRecursiveProxy = (obj: any): any => {
-      if (typeof obj !== 'object' || obj === null || obj instanceof Node) return obj;
-      if ((obj as any).__swc_is_proxy) return obj;
-
-      const IS_PROXY_KEY = '__swc_is_proxy';
-
-      const proxy = new Proxy(obj, {
-        get: (t, prop) => {
-          if (prop === IS_PROXY_KEY) return true;
-          if (typeof prop === 'symbol') return t[prop];
-          return t[prop];
-        },
-        set: (t, prop, val) => {
-          if (prop === IS_PROXY_KEY) return true;
-          if (typeof prop === 'symbol') {
-            t[prop] = val;
-            return true;
-          }
-          const oldVal = t[prop];
-          if (oldVal === val) return true;
-          t[prop] = makeRecursiveProxy(val);
-          const isIndex = !isNaN(Number(prop)) && Array.isArray(t);
-          if (isIndex && onIndexChange) {
-            onIndexChange(Number(prop), val);
-          } else {
-            onChange();
-          }
-          return true;
-        },
-        deleteProperty: (t, prop) => {
-          delete t[prop];
-          onChange();
-          return true;
-        }
-      });
-      return proxy;
-    };
-
-    return makeRecursiveProxy(target);
-  }
-
-  static findNearestSwcHost(el: HTMLElement | Node): any {
-    const hosts = this.findAllSwcHosts(el);
-    return hosts.length > 0 ? hosts[hosts.length - 1] : null;
-  }
-
-  static findAllSwcHosts(el: HTMLElement | Node): any[] {
-    const hosts: any[] = [];
-    let curr: any = el instanceof Node && !(el instanceof HTMLElement) ? (el as any).host : el;
-    curr = curr?.parentElement || (curr?.getRootNode() as any)?.host;
-
-    while (curr) {
-      if (curr._swcId) hosts.push(curr);
-      curr = curr.parentElement || (curr?.getRootNode() as any)?.host;
+    return undefined;
+  };
+
+  /**
+   * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.
+   */
+  export const findAllSwcHosts = (el: HTMLElement | Node): HTMLElement[] => {
+    const hosts: HTMLElement[] = [];
+    let current = findNearestSwcHost(el);
+    while (current) {
+      hosts.push(current);
+      // To find the next ancestor, we must start searching from the PARENT of the found host
+      current = findNearestSwcHost(current);
     }
     return hosts.reverse();
-  }
+  };
 
-  static getHosts(el: HTMLElement): HTMLElement[] {
-    return this.findAllSwcHosts(el);
-  }
+  export const getHosts = (el: HTMLElement): HTMLElement[] => {
+    const ancestors = findAllSwcHosts(el);
+    if (getElementConfig(el)) return [...ancestors, el];
+    return ancestors;
+  };
 
-  static getHost(el: HTMLElement): HTMLElement | undefined {
-    const hosts = this.getHosts(el);
-    return hosts.length > 0 ? hosts[hosts.length - 1] : undefined;
-  }
+  export const getHost = (el: HTMLElement): HTMLElement | undefined => {
+    if (getElementConfig(el)) return el;
+    return findNearestSwcHost(el);
+  };
 
-  static getFirstHost(el: HTMLElement): HTMLElement | undefined {
-    const hosts = this.getHosts(el);
-    return hosts.length > 0 ? hosts[0] : undefined;
-  }
-
-  static getAppHosts(el: HTMLElement): SwcAppInterface[] {
-    const hosts = this.getHosts(el);
+  export const getAppHosts = (el: HTMLElement): SwcAppInterface[] => {
+    const hosts = getHosts(el);
     return hosts.filter(host => host.tagName.toLowerCase() === 'swc-app' || host.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
-  }
-
-  static getAppHost(el: HTMLElement): SwcAppInterface | undefined {
-    const appHosts = this.getAppHosts(el);
-    return appHosts.length > 0 ? appHosts[appHosts.length - 1] : undefined;
-  }
-
-  static getFirstAppHost(el: HTMLElement): SwcAppInterface | undefined {
-    const appHosts = this.getAppHosts(el);
-    return appHosts.length > 0 ? appHosts[0] : undefined;
-  }
-
-  static getLastAppHost(el: HTMLElement): SwcAppInterface | undefined {
-    return this.getAppHost(el);
-  }
+  };
+
+  export const getAppHost = (el: HTMLElement): SwcAppInterface | undefined => {
+    const appHosts = getAppHosts(el);
+    const appHostsWithoutSelf = appHosts.filter(h => h !== el);
+    return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : undefined;
+  };
+
+  export const getHostSet = (el: HTMLElement): HostSet => {
+    const isSwc = !!getElementConfig(el);
+    const ancestors = findAllSwcHosts(el); // [root, ..., parent]
+
+    let $host: HTMLElement;
+    let $parentHost: HTMLElement | null;
+
+    if (isSwc) {
+      $host = el;
+      $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
+    } else {
+      $host = ancestors.length > 0 ? ancestors[ancestors.length - 1] : el;
+      $parentHost = ancestors.length > 1 ? ancestors[ancestors.length - 2] : null;
+    }
 
-  static getHostSet(el: HTMLElement): HostSet {
-    const $hosts = this.getHosts(el);
-    const $appHosts = this.getAppHosts(el);
+    const $hosts = isSwc ? [...ancestors, el] : ancestors;
+    const $firstHost = $hosts.length > 0 ? $hosts[0] : null;
 
-    const $firstHost = $hosts[0] || null;
-    const $lastHost = $hosts[$hosts.length - 1] || null;
+    // Collect loop contexts
+    const loopContext: Record<string, any> = {};
+    let curr: any = el;
+    while (curr && curr !== document.documentElement) {
+      if (curr.__swc_loop_context) {
+        Object.assign(loopContext, curr.__swc_loop_context);
+      }
+      curr = curr.parentElement || (curr.getRootNode() as any).host;
+    }
 
-    const $firstAppHost = $appHosts[0] || null;
-    const $lastAppHost = $appHosts[$appHosts.length - 1] || null;
+    const $appHosts = $hosts.filter(h => h.tagName.toLowerCase() === 'swc-app' || h.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
+    const $appHost = $appHosts.length > 0 ? ($appHosts[$appHosts.length - 1] === el ? ($appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null) : $appHosts[$appHosts.length - 1]) : null;
+    const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;
 
     return {
-      $host: $lastHost,
+      $host,
+      $parentHost,
       $hosts,
       $firstHost,
-      $lastHost,
-      $appHost: $lastAppHost,
+      $lastHost: $parentHost,
+      $appHost,
       $appHosts,
       $firstAppHost,
-      $lastAppHost
-    };
-  }
+      $lastAppHost: $appHost,
+      ...loopContext
+    } as any;
+  };
 }