@dooboostore/simple-web-component 1.0.36 → 1.0.38

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 {}