@dooboostore/simple-web-component 1.0.14 → 1.0.16

package/src/elements/SwcChoose.ts

@@ -1,120 +0,0 @@
-import { attribute, elementDefine, onAttributeChanged } from '../index';
-import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
-
-interface Branch {
-  tpl: DocumentFragment;
-  test: string | null;
-}
-
-@elementDefine({ name: 'swc-choose', extends: 'template' })
-export class SwcChoose extends SwcHTMLTemplateElementBase {
-  private _endMarker = document.createComment('swc-choose-end');
-
-  @attribute('value')
-  _value: any = undefined;
-
-  private _branches: Branch[] = [];
-  private _otherBranch: Branch | null = null;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('value')
-  onValueChange() {
-    this.evaluate();
-  }
-
-  set value(val: any) {
-    this._value = val;
-    this.onValueChange();
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-
-    if (this.nextSibling !== this._endMarker) {
-      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
-    }
-    this._initBranches();
-    this.evaluate();
-  }
-
-  private _initBranches() {
-    const content = this.content;
-    Array.from(content.children).forEach(c => {
-      const tagName = c.localName.toLowerCase();
-      const isAttr = (c.getAttribute('is') || '').toLowerCase();
-
-      const isWhen = tagName === 'swc-when' || isAttr.includes('swc-when');
-      const isOther = tagName === 'swc-other' || isAttr.includes('swc-other');
-
-      if (isWhen || isOther) {
-        const branch: Branch = {
-          tpl: document.createDocumentFragment(),
-          test: c.getAttribute('test')
-        };
-
-        const source = c instanceof HTMLTemplateElement ? c.content : c;
-        Array.from(source.childNodes).forEach(child => branch.tpl.appendChild(child.cloneNode(true)));
-
-        if (isWhen) this._branches.push(branch);
-        else this._otherBranch = branch;
-      }
-    });
-  }
-
-  private evaluate() {
-    if (!this.isConnected) return;
-
-    let curr = this.nextSibling;
-    while (curr && curr !== this._endMarker) {
-      const next = curr.nextSibling;
-      curr.parentElement?.removeChild(curr);
-      curr = next;
-    }
-
-    let matchedBranch: Branch | null = null;
-    const chooseValue = this.getAttribute('value') ?? this._value;
-
-    for (const branch of this._branches) {
-      const testAttr = branch.test;
-      if (testAttr === null || testAttr.includes('{{')) continue;
-
-      let isMet = false;
-      if (chooseValue !== undefined && chooseValue !== null) {
-        isMet = String(chooseValue) === String(testAttr);
-      } else {
-        try {
-          if (testAttr === 'true') isMet = true;
-          else if (testAttr === 'false') isMet = false;
-          else isMet = !!new Function(`return ${testAttr}`)();
-        } catch (e) {
-          isMet = false;
-        }
-      }
-
-      if (isMet) {
-        matchedBranch = branch;
-        break;
-      }
-    }
-
-    if (!matchedBranch && this._otherBranch) {
-      matchedBranch = this._otherBranch;
-    }
-
-    if (matchedBranch) {
-      const clone = matchedBranch.tpl.cloneNode(true);
-      Array.from(clone.childNodes).forEach(node => {
-        this.applyData(node, this._value);
-      });
-      this.parentNode?.insertBefore(clone, this._endMarker);
-    }
-  }
-}

package/src/elements/SwcForOf.ts

@@ -1,76 +0,0 @@
-import { attribute, elementDefine, onAttributeChanged } from '../index';
-import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
-
-@elementDefine({ name: 'swc-for-of', extends: 'template' })
-export class SwcForOf extends SwcHTMLTemplateElementBase {
-  private _endMarker = document.createComment('swc-for-of-end');
-  private _rowNodes: Node[][] = [];
-
-  @attribute('value')
-  _value: any[] = [];
-
-  @onAttributeChanged('value')
-  onValueChange() {
-    if (!Array.isArray(this._value)) this._value = [];
-    if (!(this._value as any).__swc_is_proxy) {
-      this._value = this.createReactiveProxy(
-        this._value,
-        () => this.render(),
-        (idx, v) => this.updateSingleRow(idx, v)
-      );
-    }
-    this.render();
-  }
-
-  set value(val: any[]) {
-    this._value = val;
-    this.onValueChange();
-  }
-
-  get value(): any[] {
-    return this._value;
-  }
-
-  connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-
-    if (this.nextSibling !== this._endMarker) {
-      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
-    }
-    this.render();
-  }
-
-  public updateSingleRow(index: number, newValue: any) {
-    const nodes = this._rowNodes[index];
-    if (nodes && nodes.length > 0) {
-      nodes.forEach(node => {
-        this.applyData(node, newValue, index);
-      });
-    } else {
-      this.render();
-    }
-  }
-
-  private render() {
-    if (!this.isConnected) return;
-
-    // Remove existing rows
-    this._rowNodes.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));
-    this._rowNodes = [];
-
-    if (Array.isArray(this._value)) {
-      this._value.forEach((item, index) => {
-        const clone = this.content.cloneNode(true);
-        const currentNodes: Node[] = Array.from(clone.childNodes);
-
-        currentNodes.forEach(node => {
-          this.applyData(node, item, index);
-        });
-
-        this.parentNode?.insertBefore(clone, this._endMarker);
-        this._rowNodes[index] = currentNodes;
-      });
-    }
-  }
-}

package/src/elements/SwcIf.ts

@@ -1,68 +0,0 @@
-import { attribute, elementDefine, onAttributeChanged } from '../index';
-import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
-
-@elementDefine({ name: 'swc-if', extends: 'template' })
-export class SwcIf extends SwcHTMLTemplateElementBase {
-  private _endMarker = document.createComment('swc-if-end');
-
-  @attribute('value')
-  _value: any = false;
-
-  @onAttributeChanged('value')
-  onValueChange() {
-    this.render();
-  }
-
-  set value(val: any) {
-    this._value = val;
-    this.onValueChange();
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-
-    if (this.nextSibling !== this._endMarker) {
-      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
-    }
-    this.render();
-  }
-
-  private render() {
-    if (!this.isConnected) return;
-
-    let curr = this.nextSibling;
-    while (curr && curr !== this._endMarker) {
-      const next = curr.nextSibling;
-      curr.parentElement?.removeChild(curr);
-      curr = next;
-    }
-
-    const attrValue = this.getAttribute('value');
-    let displayValue = attrValue !== null ? attrValue : this._value;
-    let isTruthy = !!displayValue;
-
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function(`return ${displayValue}`)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    if (isTruthy) {
-      const clone = this.content.cloneNode(true);
-      Array.from(clone.childNodes).forEach(node => {
-        this.applyData(node, this._value);
-      });
-      this.parentNode?.insertBefore(clone, this._endMarker);
-    }
-  }
-}

package/src/elements/SwcInterfaces.ts

@@ -1,53 +0,0 @@
-import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { ConstructorType, Optional } from '@dooboostore/core/types';
-import { Router } from '@dooboostore/core-web/routers/Router';
-
-export enum InjectSituationType {
-  HOST_SET = 'SIMPLE_WEB_COMPONENT://HOSTSET',
-  APP_HOST = 'SIMPLE_WEB_COMPONENT://APPHOST',
-  APP_HOSTS = 'SIMPLE_WEB_COMPONENT://APPHOSTS',
-  HOST = 'SIMPLE_WEB_COMPONENT://HOST',
-  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 HostSet = {
-  $host: SwcHTMLElementInterface | null;
-  $hosts: SwcHTMLElementInterface[];
-  $firstHost: SwcHTMLElementInterface | null;
-  $lastHost: SwcHTMLElementInterface | null;
-  $appHost: SwcAppInterface | null;
-  $appHosts: SwcAppInterface[];
-  $firstAppHost: SwcAppInterface | null;
-  $lastAppHost: SwcAppInterface | null;
-};
-
-export interface SwcHTMLElementInterface extends HTMLElement {
-  getAppHost(): SwcAppInterface | undefined;
-  getAppHosts(): SwcAppInterface[];
-  getFirstAppHost(): SwcAppInterface | undefined;
-  getLastAppHost(): SwcAppInterface | undefined;
-  getHosts(): SwcHTMLElementInterface[];
-  getHost(): SwcHTMLElementInterface | undefined;
-  getFirstHost(): SwcHTMLElementInterface | undefined;
-  getLastHost(): SwcHTMLElementInterface | undefined;
-  getHostSet(): HostSet;
-}
-
-export type SwcConfigType = {
-  rootRouter: ConstructorType<any>;
-  routeType: 'path' | 'hash' | 'element';
-  path?: string;
-  window: Window;
-};
-
-export type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;
-
-export interface SwcAppInterface extends SwcHTMLElementInterface {
-  simpleApplication?: SimpleApplication;
-  router?: Router;
-  routing(path: string): Promise<void>;
-}

package/src/elements/SwcObject.ts

@@ -1,65 +0,0 @@
-import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
-
-@elementDefine({ name: 'swc-object', extends: 'template' })
-export class SwcObject extends SwcHTMLTemplateElementBase {
-  private _endMarker = document.createComment('swc-object-end');
-  private _renderedNodes: Node[] = [];
-
-  @attribute('value')
-  _value: any = {};
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('value')
-  onValueChange() {
-    if (typeof this._value !== 'object' || this._value === null) this._value = {};
-    this._value = this.createReactiveProxy(this._value, () => {
-      this.updateUI();
-    });
-    this.render();
-  }
-
-  set value(val: any) {
-    this._value = val;
-    this.onValueChange();
-  }
-
-  get value(): any {
-    return this._value;
-  }
-
-  connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-
-    if (this.nextSibling !== this._endMarker) {
-      this.parentNode?.insertBefore(this._endMarker, this.nextSibling);
-    }
-    this.render();
-  }
-
-  private updateUI() {
-    this._renderedNodes.forEach(node => {
-      this.applyData(node, this._value);
-    });
-  }
-
-  private render() {
-    if (!this.isConnected) return;
-
-    this._renderedNodes.forEach(node => node.parentElement?.removeChild(node));
-    this._renderedNodes = [];
-
-    const clone = this.content.cloneNode(true);
-    this._renderedNodes = Array.from(clone.childNodes);
-
-    this._renderedNodes.forEach(node => {
-      this.applyData(node, this._value);
-    });
-
-    this.parentNode?.insertBefore(clone, this._endMarker);
-  }
-}

package/src/elements/SwcOther.ts

@@ -1,5 +0,0 @@
-import { elementDefine } from '../index';
-import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
-
-@elementDefine({ name: 'swc-other', extends: 'template' })
-export class SwcOther extends SwcHTMLTemplateElementBase {}

package/src/elements/SwcWhen.ts

@@ -1,5 +0,0 @@
-import { elementDefine } from '../index';
-import { SwcHTMLTemplateElementBase } from './base/SwcHTMLTemplateElementBase';
-
-@elementDefine({ name: 'swc-when', extends: 'template' })
-export class SwcWhen extends SwcHTMLTemplateElementBase {}

package/src/elements/apps/SwcApp.ts

@@ -1,96 +0,0 @@
-import { SwcHTMLElementBase } from '../base';
-import { elementDefine } from '../../decorators/elementDefine';
-import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
-import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
-import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
-import { ElementRouter } from '../../router/ElementRouter';
-import { SimOption } from '@dooboostore/simple-boot/SimOption';
-import { ConstructorType } from '@dooboostore/core/types';
-import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
-import { Subscription } from '@dooboostore/core/message/Subscription';
-
-@elementDefine({ name: 'swc-app', extends: undefined })
-export class SwcApp extends SwcHTMLElementBase implements SwcAppInterface {
-  public simpleApplication?: SimpleApplication;
-  public router?: Router;
-  private routerSubscription?: Subscription;
-
-  constructor() {
-    super();
-  }
-
-  async connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-
-    // Push to the end of the event loop to ensure global scripts are evaluated
-    await new Promise(resolve => setTimeout(resolve, 0));
-
-    const applicationConfigStr = this.getAttribute('swc-get-application-config');
-    if (applicationConfigStr) {
-      try {
-        const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
-        if (userConfig) {
-          const _config: SwcConfigType = {
-            routeType: 'element',
-            window: window,
-            ...userConfig
-          };
-
-          if (_config.routeType === 'path') {
-            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
-          } else if (_config.routeType === 'hash') {
-            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
-          } else {
-            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
-          }
-
-          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
-            if (route.triggerPoint === 'end') {
-              this.routingProcess(route.path);
-            }
-          });
-          const option = new SimOption({
-            excludeProxys: [Node],
-            rootRouter: _config.rootRouter
-          });
-
-          this.simpleApplication = new SimpleApplication(option);
-
-          // Use 'any' key for Map to allow Abstract classes like Router
-          const otherInstanceSim = new Map<any, any>();
-          if (this.router) {
-            otherInstanceSim.set(Router, this.router);
-          }
-          this.simpleApplication.run(otherInstanceSim);
-          const data = this.simpleApplication.sim(_config.rootRouter);
-          if (data instanceof Node) {
-            if (this.shadowRoot) {
-              this.shadowRoot.replaceChildren(data);
-            } else if (!this.contains(data)) {
-              this.replaceChildren(data);
-            }
-          }
-          if (_config.path) {
-            await this.router?.go(_config.path);
-          }
-        }
-      } catch (e) {
-        console.error('[SWC-APP] Failed to execute swc-get-application-config script:', e);
-      }
-    }
-  }
-
-  disconnectedCallback() {
-    this.routerSubscription?.unsubscribe();
-  }
-
-  async routing(path: string) {
-    await this.router?.go(path);
-  }
-
-  private async routingProcess(path: string) {
-    await this.simpleApplication?.routing(path);
-  }
-}

package/src/elements/apps/SwcAppAnchor.ts

@@ -1,96 +0,0 @@
-import { SwcHTMLAnchorElementBase } from '../base/SwcHTMLAnchorElementBase';
-import { elementDefine } from '../../decorators/elementDefine';
-import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
-import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
-import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
-import { ElementRouter } from '../../router/ElementRouter';
-import { SimOption } from '@dooboostore/simple-boot/SimOption';
-import { ConstructorType } from '@dooboostore/core/types';
-import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
-import { Subscription } from '@dooboostore/core/message/Subscription';
-
-@elementDefine({ name: 'swc-app-a', extends: 'a' })
-export class SwcAppAnchor extends SwcHTMLAnchorElementBase implements SwcAppInterface {
-  public simpleApplication?: SimpleApplication;
-  public router?: Router;
-  private routerSubscription?: Subscription;
-
-  constructor() {
-    super();
-  }
-
-  async connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-
-    // Push to the end of the event loop to ensure global scripts are evaluated
-    await new Promise(resolve => setTimeout(resolve, 0));
-
-    const applicationConfigStr = this.getAttribute('swc-get-application-config');
-    if (applicationConfigStr) {
-      try {
-        const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
-        if (userConfig) {
-          const _config: SwcConfigType = {
-            routeType: 'element',
-            window: window,
-            ...userConfig
-          };
-
-          if (_config.routeType === 'path') {
-            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
-          } else if (_config.routeType === 'hash') {
-            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
-          } else {
-            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
-          }
-
-          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
-            if (route.triggerPoint === 'end') {
-              this.routingProcess(route.path);
-            }
-          });
-          const option = new SimOption({
-            excludeProxys: [Node],
-            rootRouter: _config.rootRouter
-          });
-
-          this.simpleApplication = new SimpleApplication(option);
-
-          // Use 'any' key for Map to allow Abstract classes like Router
-          const otherInstanceSim = new Map<any, any>();
-          if (this.router) {
-            otherInstanceSim.set(Router, this.router);
-          }
-          this.simpleApplication.run(otherInstanceSim);
-          const data = this.simpleApplication.sim(_config.rootRouter);
-          if (data instanceof Node) {
-            if (this.shadowRoot) {
-              this.shadowRoot.replaceChildren(data);
-            } else if (!this.contains(data)) {
-              this.replaceChildren(data);
-            }
-          }
-          if (_config.path) {
-            await this.router?.go(_config.path);
-          }
-        }
-      } catch (e) {
-        console.error('[SWC-APP] Failed to execute swc-get-application-config script:', e);
-      }
-    }
-  }
-
-  disconnectedCallback() {
-    this.routerSubscription?.unsubscribe();
-  }
-
-  async routing(path: string) {
-    await this.router?.go(path);
-  }
-
-  private async routingProcess(path: string) {
-    await this.simpleApplication?.routing(path);
-  }
-}

package/src/elements/apps/SwcAppArea.ts

@@ -1,96 +0,0 @@
-import { SwcHTMLAreaElementBase } from '../base/SwcHTMLAreaElementBase';
-import { elementDefine } from '../../decorators/elementDefine';
-import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
-import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
-import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
-import { ElementRouter } from '../../router/ElementRouter';
-import { SimOption } from '@dooboostore/simple-boot/SimOption';
-import { ConstructorType } from '@dooboostore/core/types';
-import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
-import { Subscription } from '@dooboostore/core/message/Subscription';
-
-@elementDefine({ name: 'swc-app-area', extends: 'area' })
-export class SwcAppArea extends SwcHTMLAreaElementBase implements SwcAppInterface {
-  public simpleApplication?: SimpleApplication;
-  public router?: Router;
-  private routerSubscription?: Subscription;
-
-  constructor() {
-    super();
-  }
-
-  async connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-
-    // Push to the end of the event loop to ensure global scripts are evaluated
-    await new Promise(resolve => setTimeout(resolve, 0));
-
-    const applicationConfigStr = this.getAttribute('swc-get-application-config');
-    if (applicationConfigStr) {
-      try {
-        const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
-        if (userConfig) {
-          const _config: SwcConfigType = {
-            routeType: 'element',
-            window: window,
-            ...userConfig
-          };
-
-          if (_config.routeType === 'path') {
-            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
-          } else if (_config.routeType === 'hash') {
-            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
-          } else {
-            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
-          }
-
-          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
-            if (route.triggerPoint === 'end') {
-              this.routingProcess(route.path);
-            }
-          });
-          const option = new SimOption({
-            excludeProxys: [Node],
-            rootRouter: _config.rootRouter
-          });
-
-          this.simpleApplication = new SimpleApplication(option);
-
-          // Use 'any' key for Map to allow Abstract classes like Router
-          const otherInstanceSim = new Map<any, any>();
-          if (this.router) {
-            otherInstanceSim.set(Router, this.router);
-          }
-          this.simpleApplication.run(otherInstanceSim);
-          const data = this.simpleApplication.sim(_config.rootRouter);
-          if (data instanceof Node) {
-            if (this.shadowRoot) {
-              this.shadowRoot.replaceChildren(data);
-            } else if (!this.contains(data)) {
-              this.replaceChildren(data);
-            }
-          }
-          if (_config.path) {
-            await this.router?.go(_config.path);
-          }
-        }
-      } catch (e) {
-        console.error('[SWC-APP] Failed to execute swc-get-application-config script:', e);
-      }
-    }
-  }
-
-  disconnectedCallback() {
-    this.routerSubscription?.unsubscribe();
-  }
-
-  async routing(path: string) {
-    await this.router?.go(path);
-  }
-
-  private async routingProcess(path: string) {
-    await this.simpleApplication?.routing(path);
-  }
-}