@dooboostore/simple-web-component 1.0.16 → 1.0.17

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();
+  }
+}

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

@@ -13,7 +13,13 @@ export enum InjectSituationType {
   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; // Current component itself
   $parentHost: HTMLElement | null; // Nearest parent SWC component
@@ -26,6 +32,8 @@ export type HostSet = {
   $lastAppHost: SwcAppInterface | null;
 };
 
+export type HelperHostSet = HelperSet & HostSet;
+
 export interface SwcAppInterface extends HTMLElement {
   simpleApplication?: SimpleApplication;
   router?: Router;