@dooboostore/simple-web-component 1.0.36 → 1.0.37

package/src/elements/SwcAsync.ts

@@ -1,126 +0,0 @@
-import { changedAttributeThis } from '../decorators/changedAttributeThis';
-import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils, ActionExpression } from '@dooboostore/core';
-import { ConvertUtils } from '@dooboostore/core-web';
-import { attributeThis } from '../decorators';
-
-class SwcAsync extends HTMLTemplateElement {
-  @attributeThis('value')
-  _value: any;
-  @attributeThis('replace-wrap-start')
-  _replaceWrapStart: string | null;
-  @attributeThis('replace-wrap-end')
-  _replaceWrapEnd: string | null;  resultValue?: any;
-
-  get value(): boolean {
-    return this._value;
-  }
-
-  set value(nv: any) {
-    this.executeAsync(nv);
-  }
-
-  private _nodes: Node[] = [];
-
-  @changedAttributeThis('value')
-  private setValue(valueAttr?: string | null) {
-    this.executeAsync(this._value);
-  }
-
-  // @changedAttributeThis('replace-wrap')
-  // private setReplaceWrap() {
-  //   this.executeAsync(this._value);
-  // }
-
-  private executeAsync(result: any = this._value) {
-    if (result === undefined || result === null) {
-      this.refresh('default');
-      return;
-    }
-
-    if (result instanceof Promise) {
-      this.refresh('loading');
-      result
-        .then(v => {
-          this.resultValue = v;
-          this.refresh('success');
-        })
-        .catch(e => {
-          console.error('[SWC-ASYNC] Promise rejected:', e);
-          this.resultValue = e;
-          this.refresh('error');
-        });
-    } else {
-      this.resultValue = result;
-      this.refresh('success');
-    }
-  }
-
-  private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {
-    let config: any = undefined;
-    if (wrap) {
-      config = {
-        expression: {
-          replace: { start: `${wrap.start}`, end: `${wrap.end}` },
-          callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
-          call: { start: `${wrap.start}@`, end: `${wrap.end}` }
-        }
-      };
-    }
-    const ae = new ActionExpression(html, config);
-    const win = this.ownerDocument?.defaultView || window;
-
-    // @ts-ignore
-    for (const expr of ae.getExpressions('replace')) {
-      try {
-        const value = FunctionUtils.executeReturn({
-          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
-          context,
-          args: groupArgs
-        });
-        ae.replace(expr, String(value));
-      } catch (e) {
-        console.error(`[SWC] Failed to execute ${expr.original}:`, e);
-      }
-    }
-    return ae.getUnprocessedTemplate();
-  }
-
-  refresh(state: string = 'default') {
-    // console.log('rrrrrrrrrrrrrrrrr', state);
-    this.cleanup();
-    const portal = SwcUtils.getParentContainer(this);
-    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) {
-      let htmlString = t.innerHTML;
-      const groupArgs = { ...helperSet, $value: this._value, $state: state, $templateHost: this };
-
-      htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
-
-      const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
-      temp.innerHTML = htmlString;
-      const content = temp.content;
-
-      this._nodes = Array.from(content.childNodes);
-      this._nodes.forEach((node: any) => {
-        if (node instanceof HTMLElement)  (node as any).__template_swc_host = this;
-      });
-
-      portal.insertBefore(content, this.nextSibling);
-    }
-  }
-
-  private cleanup() {
-    this._nodes.forEach(n => n.parentElement?.removeChild(n));
-    this._nodes = [];
-  }
-
-  disconnectedCallback() {
-    this.cleanup();
-  }
-}

package/src/elements/SwcChoose.ts

@@ -1,190 +0,0 @@
-import { changedAttributeThis } from '../decorators/changedAttributeThis';
-import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils, ActionExpression } from '@dooboostore/core';
-import { ConvertUtils } from '@dooboostore/core-web';
-import { SwcChooseInterface } from '../types';
-import { attributeThis, getAttributeValue, getElementConfig } from '../decorators';
-
-class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
-  _value: any;
-
-  @attributeThis('replace-wrap-start')
-  _replaceWrapStart: string | null;
-  @attributeThis('replace-wrap-end')
-  _replaceWrapEnd: string | null;
-
-  private _nodes: Node[] = [];
-  private _previousTemplate: HTMLTemplateElement | null = null;
-
-  get value(): any {
-    return this._value;
-  }
-
-  set value(nv: any) {
-    this._value = nv;
-    this.refresh(this._value);
-  }
-
-  constructor() {
-    super();
-    // console.log('swc chooooooooooooooooooooooooose constructor called!');
-    // console.log('swc cccccccss', this.getAttribute('value'));
-  }
-
-  // static get observedAttributes() {
-  //   return ['value'];
-  // }
-
-  attributeChangedCallback(na, o, n) {
-    // console.log('-----------------choooooooose attr origin', na, o, n);
-  }
-
-  @changedAttributeThis('value')
-  private setValue(value: any, o: string, n: string) {
-    console.log('chooooooose value', value)
-    this._value = value;
-    this.refresh(this._value);
-  }
-
-  // @changedAttributeThis('replace-wrap')
-  // private setReplaceWrap(replaceWrapAttr?: string | null) {
-  //   this.refresh();
-  // }
-
-  private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {
-    let config: any = undefined;
-    if (wrap) {
-      config = {
-        expression: {
-          replace: { start: `${wrap.start}`, end: `${wrap.end}` },
-          callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
-          call: { start: `${wrap.start}@`, end: `${wrap.end}` }
-        }
-      };
-    }
-    const ae = new ActionExpression(html, config);
-    const win = this.ownerDocument?.defaultView || window;
-
-    // @ts-ignore
-    for (const expr of ae.getExpressions('replace')) {
-      try {
-        const value = FunctionUtils.executeReturn({
-          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
-          context,
-          args: groupArgs
-        });
-        ae.replace(expr, String(value));
-      } catch (e) {
-        console.error(`[SWC] Failed to execute ${expr.original}:`, e);
-      }
-    }
-    return ae.getUnprocessedTemplate();
-  }
-
-  refresh(value?: any) {
-    value = getAttributeValue(this, 'value') ?? this._value;
-    console.log('[DEBUG] SwcChoose.refresh called, value:', value);
-    const portal = SwcUtils.getParentContainer(this);
-    if (!portal) {
-      console.log('[DEBUG] SwcChoose portal is null!');
-      return;
-    }
-
-    const win = (getElementConfig(this).window ?? this.ownerDocument?.defaultView) || window;
-    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-    const groupArgs = { ...helperSet, $value: value, $templateHost: this };
-
-    const templates = Array.from(this.content.querySelectorAll('template'));
-    let selected: HTMLTemplateElement | null = null;
-
-    for (const t of templates) {
-      if (t.getAttribute('is') === 'swc-when') {
-        const attrVal = t.getAttribute('test') || '';
-        let matches = false;
-
-
-
-        const result = FunctionUtils.executeReturn({
-          script: attrVal,
-          context: t,
-          args: groupArgs
-        });
-        matches = !!result;
-        // Use ActionExpression to parse and extract script from value attribute
-        // const ae = new ActionExpression(attrVal);
-        // const expr = ae.getFirstExpression('replace');
-
-        // if (expr) {
-        //   const decodedScript = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
-        //   const result = FunctionUtils.executeReturn({
-        //     script: decodedScript,
-        //     context: t,
-        //     args: groupArgs
-        //   });
-        //   matches = !!result;
-        // } else {
-        //   matches = String(attrVal) === String(value);
-        // }
-
-        if (matches) {
-          selected = t;
-          break;
-        }
-      }
-    }
-
-    const target = selected || (this.content.querySelector('template[is="swc-otherwise"]') as HTMLTemplateElement);
-
-    const skipValue = target?.getAttribute?.('skip-if-same');
-    const skipValue2 = this._previousTemplate?.getAttribute?.('skip-if-same');
-    const hasSkipIfSame = target?.hasAttribute?.('skip-if-same');
-    const isSame = this._previousTemplate === target;
-    // console.log('---rrrr---', this._previousTemplate, target, hasSkipIfSame, isSame, skipValue, skipValue2);
-    if (hasSkipIfSame && isSame) {
-      return;
-    }
-
-    this.cleanup();
-    this._previousTemplate = target;
-
-    if (target) {
-      let htmlString = target.innerHTML;
-      htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
-
-      const result = this.ownerDocument?.createElement('template') || document.createElement('template');
-      result.innerHTML = htmlString;
-      const processedFragment = result.content;
-
-      // console.log('[DEBUG] SwcChoose processedFragment children:', processedFragment._childNodesInternal?.length);
-      this._nodes = Array.from(processedFragment.childNodes);
-      
-      const setTemplateHost = (element: HTMLElement) => {
-        (element as any).__swc_template_host = this;
-        Array.from(element.children).forEach((child: any) => {
-          if (child instanceof HTMLElement) {
-            setTemplateHost(child);
-          }
-        });
-      };
-      
-      this._nodes.forEach((node: any) => {
-        if (node instanceof HTMLElement) {
-          setTemplateHost(node as HTMLElement);
-        }
-      });
-
-      console.log(`[DEBUG] SwcChoose before insertBefore, portal: ${portal?.tagName}, isConnected: ${(portal as any)?.isConnected}`);
-      portal.insertBefore(processedFragment, this.nextSibling);
-      console.log('[DEBUG] SwcChoose after insertBefore');
-    }
-  }
-
-  private cleanup() {
-    this._nodes.forEach(n => n.parentElement?.removeChild(n));
-    this._nodes = [];
-  }
-
-  disconnectedCallback() {
-    this.cleanup();
-  }
-}

package/src/elements/SwcIf.ts

@@ -1,124 +0,0 @@
-import { changedAttributeThis } from '../decorators/changedAttributeThis';
-import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils, ActionExpression } from '@dooboostore/core';
-import { ConvertUtils } from '@dooboostore/core-web';
-import { SwcIfInterface } from '../types';
-import { attributeThis, getAttributeValue } from '../decorators';
-
-class SwcIf extends HTMLTemplateElement implements SwcIfInterface {
-  // id =
-  // @attributeThis('value')
-  _value: any;
-
-  @attributeThis('replace-wrap-start')
-  _replaceWrapStart: string | null;
-  @attributeThis('replace-wrap-end')
-  _replaceWrapEnd: string | null;
-
-  @attributeThis('skip-if-same')
-  _skipIfSame: string | null;
-
-  private _nodes: Node[] = [];
-
-  get value(): boolean {
-    return this._value;
-  }
-
-  set value(nv: any) {
-    // this._value = nv;
-    this.refresh(nv);
-  }
-
-  constructor() {
-    super();
-  }
-
-  @changedAttributeThis('value')
-  private setValue(value: any, o: string, n: string) {
-    this._value = value;
-    this.refresh(this._value);
-  }
-
-  // @changedAttributeThis('replace-wrap')
-  // private setReplaceWrap(replaceWrapAttr?: string | null) {
-  //   this.refresh();
-  // }
-
-  private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {
-    let config: any = undefined;
-    if (wrap) {
-      config = {
-        expression: {
-          replace: { start: `${wrap.start}`, end: `${wrap.end}` },
-          callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
-          call: { start: `${wrap.start}@`, end: `${wrap.end}` }
-        }
-      };
-    }
-    const ae = new ActionExpression(html, config);
-    const win = this.ownerDocument?.defaultView || window;
-
-    // @ts-ignore
-    for (const expr of ae.getExpressions('replace')) {
-      try {
-        const value = FunctionUtils.executeReturn({
-          script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
-          context,
-          args: groupArgs
-        });
-        ae.replace(expr, String(value));
-      } catch (e) {
-        console.error(`[SWC] Failed to execute ${expr.original}:`, e);
-      }
-    }
-    return ae.getUnprocessedTemplate();
-  }
-
-  refresh(value?: any) {
-    const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value);
-
-    // skip-if-same 속성이 존재하고(true/빈 문자열), 이전 값과 새로운 값이 완전히 동일하면 렌더링 스킵!
-    if (this.hasAttribute('skip-if-same') && this._value === targetValue && this._nodes.length > 0) {
-      return;
-    }
-
-    this.cleanup();
-    this._value = targetValue;
-
-    const portal = this.parentElement;
-    if (!portal || !this._value) return;
-
-    const win = this.ownerDocument?.defaultView || window;
-    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-
-    let htmlString = this.innerHTML;
-    const groupArgs = { ...helperSet, $value: this._value, $templateHost: this };
-
-    htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
-
-    const result = this.ownerDocument?.createElement('template') || document.createElement('template');
-    result.innerHTML = htmlString;
-    const processedFragment = result.content;
-
-    this._nodes = Array.from(processedFragment.childNodes);
-    this._nodes.forEach((node: any) => {
-      if (node instanceof HTMLElement) (node as any).__swc_template_host = this;
-    });
-
-    portal.insertBefore(processedFragment, this.nextSibling);
-  }
-
-  private cleanup() {
-    this._nodes.forEach(n => {
-      const realNode = (n as any).__upgraded_instance || n;
-      if (realNode.parentElement) {
-        realNode.parentElement.removeChild(realNode);
-      }
-    });
-    this._nodes = [];
-  }
-
-  disconnectedCallback() {
-    this.cleanup();
-  }
-}

package/src/elements/SwcLoop.ts

@@ -1,205 +0,0 @@
-import { changedAttributeThis } from '../decorators/changedAttributeThis';
-import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils, ActionExpression } from '@dooboostore/core';
-import { ConvertUtils } from '@dooboostore/core-web';
-import { attributeThis, getAttributeValue } from '../decorators';
-
-class SwcLoop extends HTMLTemplateElement {
-  _value: any[] = [];
-
-  @attributeThis('replace-wrap-start')
-  _replaceWrapStart: string | null;
-  @attributeThis('replace-wrap-end')
-  _replaceWrapEnd: string | null;
-
-  private _nodeGroups: Node[][] = [];
-
-  get value(): any[] {
-    return this._value;
-  }
-
-  set value(nv: any[]) {
-    this._value = nv;
-    this.refresh(nv);
-  }
-
-  getValue(index: number) {
-    return this._value?.[index];
-  }
-
-  constructor() {
-    super();
-    // console.log('swc SwcLoop constructor called!');
-    // console.log('swc SwcLoop', this.getAttribute('value'));
-  }
-
-  @changedAttributeThis('value')
-  private setValue(value: any, o: string, n: string) {
-    this._value = value;
-    this.refresh(this._value);
-  }
-
-  // @changedAttributeThis('replace-wrap')
-  // private setReplaceWrap(replaceWrapAttr?: string | null) {
-  //   this.refresh();
-  // }
-
-  private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {
-    let config: any = undefined;
-    config = {
-      expression: {
-        replace: { start: `${wrap.start}`, end: `${wrap.end}` },
-        callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
-        call: { start: `${wrap.start}@`, end: `${wrap.end}` }
-      }
-    };
-    const ae = new ActionExpression(html, config);
-    const win = this.ownerDocument?.defaultView || window;
-
-    // @ts-ignore
-    const expressions = ae.getExpressions('replace');
-    for (const expr of expressions) {
-      const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
-      try {
-        const value = FunctionUtils.executeReturn({
-          script: script,
-          context,
-          args: groupArgs
-        });
-        ae.replace(expr, String(value));
-      } catch (e) {
-        console.error(`[SWC] Failed to execute ${expr.original}:`, e);
-      }
-    }
-    return ae.getUnprocessedTemplate();
-  }
-
-  private createFragmentAndNodes(items: any[], helperSet: any, startIndex: number = 0): { fragment: DocumentFragment; newNodesGroup: Node[][] } {
-    const win = this.ownerDocument?.defaultView || window;
-    const fragment = win.document.createDocumentFragment();
-    const newNodesGroup: Node[][] = [];
-
-    items.forEach((item, i) => {
-      const index = startIndex + i;
-      let htmlString = this.innerHTML;
-      const groupArgs = { ...helperSet, $item: item, $index: index, $value: this._value };
-
-      htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
-
-      const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
-      temp.innerHTML = htmlString;
-
-      const content = temp.content;
-      const nodes = Array.from(content.childNodes);
-
-      const setTemplateHost = (element: HTMLElement) => {
-        (element as any).__swc_template_host = this;
-        Array.from(element.children).forEach((child: any) => {
-          if (child instanceof HTMLElement) {
-            setTemplateHost(child);
-          }
-        });
-      };
-
-      nodes.forEach((node: any) => {
-        if (node instanceof HTMLElement) {
-          setTemplateHost(node as HTMLElement);
-        }
-      });
-      newNodesGroup.push(nodes);
-      fragment.appendChild(content);
-    });
-
-    return { fragment, newNodesGroup };
-  }
-
-  appendItem(...items: any[]) {
-    if (!items || items.length <= 0) return;
-    const portal = SwcUtils.getParentContainer(this);
-    if (!portal) return;
-
-    const win = this.ownerDocument?.defaultView || window;
-    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-
-    const startIndex = this._value ? this._value.length : 0;
-
-    // 내부 상태(value) 업데이트 (기존 배열에 새 아이템 추가)
-    if (this._value !== items) {
-      this._value = [...(this._value || []), ...items];
-    }
-
-    const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, startIndex);
-    this._nodeGroups.push(...newNodesGroup);
-
-    console.log('뭐야 씨발');
-    // append 위치 계산: 기존에 그려진 마지막 노드 뒤에 삽입, 없으면 템플릿 바로 뒤에 삽입
-    let insertReference: Node | null = this.nextSibling;
-    if (this._nodeGroups.length > items.length) {
-      const lastExistingGroup = this._nodeGroups[this._nodeGroups.length - items.length - 1];
-      if (lastExistingGroup && lastExistingGroup.length > 0) {
-        const lastNode = lastExistingGroup[lastExistingGroup.length - 1];
-        insertReference = lastNode.nextSibling;
-      }
-    }
-
-    portal.insertBefore(fragment, insertReference);
-  }
-
-  async prependItem(...items: any[]) {
-    if (!items || items.length <= 0) return;
-    const portal = SwcUtils.getParentContainer(this);
-    if (!portal) return;
-
-    const win = this.ownerDocument?.defaultView || window;
-    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-
-    // 내부 상태(value) 업데이트 (기존 배열의 앞쪽에 새 아이템 추가)
-    if (this._value !== items) {
-      this._value = [...items, ...(this._value || [])];
-    }
-
-    const { fragment, newNodesGroup } = this.createFragmentAndNodes(items, helperSet, 0);
-
-    // 기존의 nodeGroups 배열 맨 앞에 새로운 그룹들을 추가
-    this._nodeGroups = [...newNodesGroup, ...this._nodeGroups];
-
-    // prepend 위치: 이 템플릿(SwcLoop) 노드의 바로 다음 위치 (가장 위)
-    portal.insertBefore(fragment, this.nextSibling);
-  }
-
-  refresh(value?: any) {
-    // 1. 그릴 대상 확정
-    const targetValue = value !== undefined ? value : (getAttributeValue(this, 'value') ?? this._value ?? []);
-
-    // 2. 화면 정리
-    this.cleanup();
-
-    // 3. 상태 완전 교체 (이어붙이지 않음!)
-    this._value = targetValue;
-
-    if (!this._value || this._value.length <= 0) return;
-
-    // 4. 화면 다시 그리기 (appendItem을 쓰지 않고 바로 그리기)
-    const win = this.ownerDocument?.defaultView || window;
-    const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-    helperSet.$templateHost = this;
-    const { fragment, newNodesGroup } = this.createFragmentAndNodes(this._value, helperSet, 0);
-
-    this._nodeGroups = newNodesGroup;
-    const portal = SwcUtils.getParentContainer(this);
-    if (portal) {
-      // console.log('append????!~~~~~!?',fragment)
-      portal.insertBefore(fragment, this.nextSibling);
-    }
-  }
-
-  private cleanup() {
-    console.log('누가 cleanup');
-    this._nodeGroups.forEach(nodes => nodes.forEach(n => n.parentElement?.removeChild(n)));
-    this._nodeGroups = [];
-  }
-
-  disconnectedCallback() {
-    this.cleanup();
-  }
-}

package/src/elements/SwcSubTemplates.ts

@@ -1,6 +0,0 @@
-class SwcLoading extends HTMLTemplateElement {}
-class SwcError extends HTMLTemplateElement {}
-class SwcSuccess extends HTMLTemplateElement {}
-class SwcWhen extends HTMLTemplateElement {}
-class SwcOtherwise extends HTMLTemplateElement {}
-class SwcDefault extends HTMLTemplateElement {}