@dooboostore/simple-web-component 1.0.17 → 1.0.19

package/src/elements/SwcIf.ts

@@ -1,133 +1,111 @@
-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 _value = false;
   private _nodes: Node[] = [];
-  private _value: any = null;
 
-  get value(): any {
+  get value(): boolean {
     return this._value;
   }
-
   set value(nv: any) {
-    this._value = nv;
+    this._value = Boolean(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 _resolvePortal(): Element | null {
+    const portalScript = this.getAttribute('on-get-portal');
+    if (!portalScript) return this.parentElement;
+
+    const win = this.ownerDocument?.defaultView || window;
+    const res = FunctionUtils.executeReturn({
+      script: portalScript,
+      context: this,
+      args: SwcUtils.getHelperAndHostSet(win, this)
+    });
+
+    if (res instanceof HTMLElement) return res;
+    if (typeof res === 'string') return win.document.querySelector(res);
+    return this.parentElement;
   }
 
-  private _executeCallback(attrName: string, extraArgs: Record<string, any>) {
-    const script = this.getAttribute(attrName);
+  private _executeCloneCallback(attr: string, args: any) {
+    const script = this.getAttribute(attr);
     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);
-    }
+    FunctionUtils.execute({ script, context: this, args });
   }
 
   @changedAttribute('on-get-value')
-  private refresh(newValue?: string | null) {
-    const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');
+  private refreshValue() {
+    const script = this.getAttribute('on-get-value');
     if (!script) {
-      this.value = null;
+      this.value = false;
       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;
+    const win = this.ownerDocument?.defaultView || window;
+    const res = FunctionUtils.executeReturn({
+      script,
+      context: this,
+      args: SwcUtils.getHelperAndHostSet(win, this)
+    });
+
+    if (res instanceof Promise) {
+      res.then(v => (this.value = v)).catch(() => (this.value = false));
+    } else {
+      this.value = res;
     }
   }
 
   private render() {
     this.cleanup();
-    if (!this.parentElement) return;
+    const portal = this._resolvePortal();
+    if (!portal) return;
 
-    let fragment: DocumentFragment | null = null;
-    const ctx: any = { $value: this._value, $nodes: [], $elements: [] };
+    const win = this.ownerDocument?.defaultView || window;
+    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
 
+    let targetTpl: HTMLTemplateElement | null = null;
     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;
+      targetTpl = this;
     } else {
-      const t = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
-      if (t) fragment = t.content.cloneNode(true) as DocumentFragment;
+      targetTpl = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
     }
 
-    if (fragment) {
-      this.mount(fragment, ctx);
-    }
-  }
+    if (targetTpl) {
+      const clone = targetTpl.content.cloneNode(true) as DocumentFragment;
+      // If it's the host template, remove sub-templates from clone
+      if (targetTpl === this) {
+        clone.querySelectorAll('template[is^="swc-"]').forEach(t => t.remove());
+      }
 
-  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._nodes = Array.from(clone.childNodes);
+      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];
+      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
 
-    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.forEach((node, nodeIdx) => {
+        if (node instanceof HTMLElement) (node as any).__swc_host = this;
+        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
+      });
 
-    this._nodes = nodes;
-    const target = this._getTarget();
-    if (target) {
-      target.appendChild(fragment);
-    } else {
-      this.parentElement?.insertBefore(fragment, this.nextSibling);
+      this._executeCloneCallback('on-clone-nodes', groupArgs);
+
+      if (portal === this.parentElement) {
+        portal.insertBefore(clone, this.nextSibling);
+      } else {
+        portal.appendChild(clone);
+      }
     }
   }
 
   private cleanup() {
-    this._nodes.forEach(n => {
-      if (n.parentElement) n.parentElement.removeChild(n);
-    });
+    this._nodes.forEach(n => n.parentElement?.removeChild(n));
     this._nodes = [];
   }
 
   connectedCallback() {
-    this.refresh();
+    this.refreshValue();
   }
-
   disconnectedCallback() {
     this.cleanup();
   }

package/src/elements/SwcLoop.ts

@@ -1,209 +1,112 @@
-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[] = [];
+  private _nodeGroups: 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;
-  }
+  private _resolvePortal(): Element | null {
+    const portalScript = this.getAttribute('on-get-portal');
+    if (!portalScript) return this.parentElement;
 
-  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 win = this.ownerDocument?.defaultView || window;
+    const res = FunctionUtils.executeReturn({
+      script: portalScript,
+      context: this,
+      args: SwcUtils.getHelperAndHostSet(win, this)
     });
 
-    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();
-    }
+    if (res instanceof HTMLElement) return res;
+    if (typeof res === 'string') return win.document.querySelector(res);
+    return this.parentElement;
   }
 
-  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 _executeCloneCallback(attr: string, args: any) {
+    const script = this.getAttribute(attr);
+    if (!script) return;
+    FunctionUtils.execute({ script, context: this, args });
   }
 
-  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);
-    }
+  private _cleanup() {
+    this._nodeGroups.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));
+    this._nodeGroups = [];
   }
 
   @changedAttribute('on-get-value')
-  private refreshValue(newValue?: string | null) {
-    const script = newValue !== undefined ? newValue : this.getAttribute('on-get-value');
+  private refreshValue() {
+    const script = 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 = [];
+    const win = this.ownerDocument?.defaultView || window;
+    const res = FunctionUtils.executeReturn({
+      script,
+      context: this,
+      args: SwcUtils.getHelperAndHostSet(win, this)
+    });
+
+    if (res instanceof Promise) {
+      res.then(v => (this.value = v)).catch(() => (this.value = []));
+    } else {
+      this.value = res;
     }
   }
 
   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);
+    const portal = this._resolvePortal();
+    if (!portal) return;
+
+    const win = this.ownerDocument?.defaultView || window;
+    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+    const fragment = win.document.createDocumentFragment();
+
+    if (this._value.length === 0) {
+      const defaultTpl = this.content.querySelector('template[is="swc-default"]') as HTMLTemplateElement;
+      if (defaultTpl) {
+        const clone = defaultTpl.content.cloneNode(true);
+        const nodes = Array.from(clone.childNodes);
+        this._nodeGroups.push(nodes);
+        fragment.appendChild(clone);
       }
-      return;
-    }
+    } else {
+      this._value.forEach((item, index) => {
+        const clone = this.content.cloneNode(true) as DocumentFragment;
+        // Filter out sub-templates
+        const subTemplates = clone.querySelectorAll('template[is^="swc-"]');
+        subTemplates.forEach(t => t.remove());
 
-    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));
-    });
+        const nodes = Array.from(clone.childNodes);
+        const elements = nodes.filter(n => n.nodeType === 1) as HTMLElement[];
 
-    if (target) target.appendChild(fragment);
-    else this.parentElement.insertBefore(fragment, this.nextSibling);
-  }
+        const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value, $nodes: nodes, $elements: elements, $firstElement: elements[0] };
 
-  private _cleanup() {
-    this._nodes.forEach(group => {
-      if (group) group.forEach(node => node.parentElement?.removeChild(node));
-    });
-    this._nodes = [];
-    this._cleanupDefault();
-  }
+        nodes.forEach((node, nodeIdx) => {
+          if (node instanceof HTMLElement) (node as any).__swc_host = this;
+          this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: node, $nodeIndex: nodeIdx, $isElement: node.nodeType === 1 });
+        });
 
-  private _cleanupDefault() {
-    this._defaultNodes.forEach(n => n.parentElement?.removeChild(n));
-    this._defaultNodes = [];
+        this._executeCloneCallback('on-clone-nodes', groupArgs);
+        this._nodeGroups.push(nodes);
+        fragment.appendChild(clone);
+      });
+    }
+
+    if (portal === this.parentElement) {
+      portal.insertBefore(fragment, this.nextSibling);
+    } else {
+      portal.appendChild(fragment);
+    }
   }
 
   connectedCallback() {

package/src/elements/SwcSubTemplates.ts

@@ -1,19 +1,6 @@
-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,8 +1 @@
-export * from './is';
-export * from './SwcSubTemplates';
-export * from './SwcLoop';
-export * from './SwcIf';
-export * from './SwcChoose';
-export * from './SwcAsync';
-export * from './SwcApp';
-export * from './SwcAppEngine';
+export * from './register';