@dooboostore/simple-web-component 1.0.18 → 1.0.21

package/src/elements/SwcAppEngine.ts

@@ -1,21 +1,23 @@
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
-import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { PathRouter } from '@dooboostore/core-web';
+import { HashRouter } from '@dooboostore/core-web';
 import { ElementRouter } from '../router/ElementRouter';
 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';
+import { Router, RouterEventType } from '@dooboostore/core-web';
+import { Subscription } from '@dooboostore/core';
+import { ConstructorType, OptionalType } from '@dooboostore/core';
+import { FunctionUtils } from '@dooboostore/core';
+import { SwcUtils } from '../utils/Utils';
 
 export type SwcConfigType = {
-  rootRouter: ConstructorType<any>;
+  rootRouter: ConstructorType<any> | symbol;
   routeType: 'path' | 'hash' | 'element';
+  connectMode?: 'direct' | 'swap';
   path?: string;
   window: Window;
 };
 
-export type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;
+export type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;
 
 export class SwcAppEngine {
   public simpleApplication?: SimpleApplication;
@@ -25,22 +27,35 @@ export class SwcAppEngine {
 
   constructor(private host: HTMLElement) {}
 
-  async connect() {
+  async connect(config?: SwcAttributeConfigType) {
     if (this._isInitialized) return;
-    this._isInitialized = true;
 
-    // Wait for event loop to ensure attributes and global scripts are ready
-    await new Promise(resolve => setTimeout(resolve, 0));
+    let userConfig = config;
+    const win = this.host.ownerDocument?.defaultView || window;
+    const Node = (win as any).Node as typeof globalThis.Node;
+    if (!userConfig) {
+      const configStr = this.host.getAttribute('swc-get-application-config');
+      if (configStr) {
+        try {
+          userConfig = FunctionUtils.executeReturn({
+            script: configStr,
+            context: this.host,
+            args: SwcUtils.getHelperAndHostSet(win, this.host)
+          });
+        } catch (e) {
+          console.error('[SWC-APP-ENGINE] Script execution failed:', e);
+        }
+      }
+    }
 
-    const configStr = this.host.getAttribute('swc-get-application-config');
-    if (!configStr) return;
+    if (!userConfig) return;
+    this._isInitialized = true;
 
     try {
-      const userConfig: SwcAttributeConfigType = FunctionUtils.executeReturn({ script: configStr, context: this.host });
-      if (userConfig && userConfig.rootRouter) {
+      if (userConfig.rootRouter) {
         const _config: SwcConfigType = {
           routeType: 'element',
-          window: window,
+          window: win,
           ...userConfig
         } as SwcConfigType;
 
@@ -62,6 +77,7 @@ export class SwcAppEngine {
           });
         }
 
+
         // App start
         this.simpleApplication = new SimpleApplication(new SimOption({ excludeProxys: [Node], rootRouter: _config.rootRouter }));
 
@@ -76,7 +92,7 @@ export class SwcAppEngine {
           else this.host.replaceChildren(data);
         }
 
-        if (_config.path) await this.router?.go(_config.path);
+        if (_config.path) this.router?.go(_config.path);
       }
     } catch (e) {
       console.error('[SWC-APP-ENGINE] Init failed:', e);

package/src/elements/SwcAppMixin.ts

@@ -0,0 +1,65 @@
+import { SwcAppEngine, SwcAttributeConfigType } from './SwcAppEngine';
+
+export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {
+  return class extends Base {
+    __swc_engine = new SwcAppEngine(this as any);
+
+    get simpleApplication() {
+      return this.__swc_engine.simpleApplication;
+    }
+    get router() {
+      return this.__swc_engine.router;
+    }
+
+    async connect(config?: SwcAttributeConfigType) {
+      const mode = config?.connectMode || 'direct';
+
+      if (mode !== 'swap') {
+        await this.__swc_engine.connect(config);
+        this.setAttribute('swc-connect-mode', 'direct');
+        return;
+      }
+
+      const parent = this.parentNode;
+      if (!parent) {
+        await this.__swc_engine.connect(config);
+        this.setAttribute('swc-connect-mode', 'direct');
+        return;
+      }
+
+      const clonedApp = this.cloneNode(true) as any;
+      clonedApp.style.display = 'none';
+      parent.insertBefore(clonedApp, this.nextSibling);
+
+      try {
+        await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });
+        if (this.parentNode) {
+          this.parentNode.removeChild(this);
+        }
+        clonedApp.setAttribute('swc-connect-mode', 'swap');
+        clonedApp.style.display = '';
+      } catch (e) {
+        if (clonedApp.parentNode) {
+          clonedApp.parentNode.removeChild(clonedApp);
+        }
+        throw e;
+      }
+    }
+
+    connectedCallback() {
+      // @ts-ignore
+      if (super.connectedCallback) super.connectedCallback();
+      this.connect();
+    }
+
+    disconnectedCallback() {
+      // @ts-ignore
+      if (super.disconnectedCallback) super.disconnectedCallback();
+      this.__swc_engine.disconnect();
+    }
+
+    async routing(path: string) {
+      await this.__swc_engine.router?.go(path);
+    }
+  };
+}

package/src/elements/SwcAsync.ts

@@ -1,162 +1,92 @@
-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';
+import { FunctionUtils } from '@dooboostore/core';
 
-@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);
-    }
-  }
+  private _resolvePortal(): Element | null {
+    const portalScript = this.getAttribute('on-get-portal');
+    if (!portalScript) return this.parentElement;
 
-  @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
-      });
+    const win = this.ownerDocument?.defaultView || window;
+    const res = FunctionUtils.executeReturn({
+      script: portalScript,
+      context: this,
+      args: SwcUtils.getHelperAndHostSet(win, this)
+    });
 
-      if (result instanceof Promise) {
-        this.handlePromise(result);
-      } else {
-        this.value = result;
-      }
-    } catch (e) {
-      this.render('error', e);
-    }
+    if (res instanceof HTMLElement) return res;
+    if (typeof res === 'string') return win.document.querySelector(res);
+    return this.parentElement;
   }
 
-  private async handlePromise(promise: Promise<any>) {
-    this._currentPromise = promise;
-    this.render('loading');
+  private _executeCloneCallback(attr: string, args: any) {
+    const script = this.getAttribute(attr);
+    if (!script) return;
+    FunctionUtils.execute({ script, context: this, args });
+  }
 
-    try {
-      const result = await promise;
-      if (this._currentPromise !== promise) return;
+  @changedAttribute('on-get-value')
+  private refresh() {
+    const script = this.getAttribute('on-get-value');
+    if (!script) return;
+    const win = this.ownerDocument?.defaultView || window;
+    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
+
+    if (result instanceof Promise) {
+      this.render('loading');
+      result
+        .then(v => {
+          this._value = v;
+          this.render('success');
+        })
+        .catch(e => this.render('error'));
+    } else {
       this._value = result;
-      this.render('success', result);
-    } catch (e) {
-      if (this._currentPromise !== promise) return;
-      this.render('error', e);
+      this.render('success');
     }
   }
 
-  private render(state: 'loading' | 'error' | 'success' | 'default', data?: any) {
+  private render(state: string) {
     this.cleanup();
-    if (!this.parentElement) return;
+    const portal = this._resolvePortal();
+    if (!portal) return;
+
+    const win = this.ownerDocument?.defaultView || window;
+    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+
+    const t = this.content.querySelector(`template[is="swc-${state}"]`) as HTMLTemplateElement;
+    if (t) {
+      const clone = t.content.cloneNode(true) as DocumentFragment;
+      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], $state: state };
+
+      this._nodes.forEach((n, nodeIdx) => {
+        if (n instanceof HTMLElement) (n as any).__swc_host = this;
+        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+      });
 
-    let fragment: DocumentFragment;
-    const ctx: any = {
-      $nodes: [],
-      $elements: [],
-      $state: state,
-      $value: null,
-      $error: null
-    };
+      this._executeCloneCallback('on-clone-nodes', groupArgs);
 
-    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;
+      if (portal === this.parentElement) {
+        portal.insertBefore(clone, this.nextSibling);
       } 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;
+        portal.appendChild(clone);
       }
-      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.forEach(n => n.parentElement?.removeChild(n));
     this._nodes = [];
   }
 
   connectedCallback() {
     this.refresh();
   }
-
   disconnectedCallback() {
     this.cleanup();
   }

package/src/elements/SwcChoose.ts

@@ -1,10 +1,7 @@
-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';
+import { FunctionUtils } from '@dooboostore/core';
 
-@elementDefine({ name: 'swc-choose', extends: 'template' })
 export class SwcChoose extends HTMLTemplateElement {
   private _nodes: Node[] = [];
   private _value: any = null;
@@ -12,115 +9,92 @@ export class SwcChoose extends HTMLTemplateElement {
   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);
+  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 _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(`[SwcChoose] 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 refresh() {
+    const script = 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);
-    }
+    const win = this.ownerDocument?.defaultView || window;
+    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
+    this.value = result;
   }
 
   private render() {
     this.cleanup();
-    if (!this.parentElement) return;
+    const portal = this._resolvePortal();
+    if (!portal) return;
+
+    const win = this.ownerDocument?.defaultView || window;
+    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
 
     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;
+      if (t.getAttribute('is') === 'swc-when' && String(t.getAttribute('value')) === String(this._value)) {
+        selected = t;
+        break;
       }
     }
+    const target = selected || (this.content.querySelector('template[is="swc-otherwise"]') as HTMLTemplateElement);
+
+    if (target) {
+      const clone = target.content.cloneNode(true) as DocumentFragment;
+      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] };
 
-    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.forEach((n, nodeIdx) => {
+        if (n instanceof HTMLElement) (n as any).__swc_host = this;
+        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
       });
 
-      this._nodes = nodes;
-      this.parentElement.insertBefore(clone, 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();
   }
-
   disconnectedCallback() {
     this.cleanup();
   }