@dooboostore/simple-web-component 1.0.31 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/decorators/applyStyle.ts

@@ -34,7 +34,7 @@ function createStyleDecorator(action: StyleAction) {
         if (res !== undefined) {
           const win = (this as any).ownerDocument?.defaultView || window;
           const host = this as unknown as HTMLElement;
-          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
+          const hostSet = SwcUtils.getHelperAndHostSet(win, host);
           const r = options.root || 'auto';
           const targetEls: HTMLElement[] = [];
 

package/src/decorators/attribute.ts

@@ -1,7 +1,8 @@
-import {ReflectUtils} from '@dooboostore/core';
+import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
 import {SpecialSelector, SwcQueryOptions} from '../types';
+import { ConvertUtils } from '@dooboostore/core-web';
 export interface AttributeFieldOptions extends SwcQueryOptions {
   name?: string;
   // connectedInitialize?: boolean;
@@ -113,38 +114,42 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
       
       Object.defineProperty(target, propertyKey, {
         get(this: any) {
-          // console.log('------>??gettttt', this,  propertyKey);
-          // try {
-            const attrName = options.name || String(propertyKey);
-            const conf = getElementConfig(this);
-            const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
-            const targetType = options.type || designType;
-          //
-            // connectedInitialize: true이면 privateKey 값만 반환 (DOM 무시)
-            // if (options.connectedInitialize === true && (this as any).__swc_syncing_init) {
-            //   console.log('cccccccc2');
-            //   return this[privateKey];
-            //   // return convertValue(this[privateKey], targetType);
-            // }
-
-            const targets = resolveTargetEls(this, selector, options, currentWin);
-            const primaryTarget = targets[0];
-
-            if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
-              if ((primaryTarget as any).hasAttribute(attrName)) {
-                const domVal = (primaryTarget as any).getAttribute(attrName);
-                return convertValue(domVal, targetType);
+          const attrName = options.name || String(propertyKey);
+          const conf = getElementConfig(this);
+          const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+          const targetType = options.type || designType;
+
+          const targets = resolveTargetEls(this, selector, options, currentWin);
+          const primaryTarget = targets[0];
+
+          if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
+            if ((primaryTarget as any).hasAttribute(attrName)) {
+              let domVal = (primaryTarget as any).getAttribute(attrName);
+              
+              // 표현식 체크
+              const ae = new ActionExpression(domVal);
+              const expr = ae.getFirstExpression('call-return');
+              if (expr) {
+                try {
+                  const result = FunctionUtils.executeReturn({
+                    script: ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
+                    context: this,
+                    args: SwcUtils.getHelperAndHostSet(currentWin, this)
+                  });
+                  return convertValue(result, targetType);
+                } catch (e) {
+                  console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
+                  return convertValue(domVal, targetType);
+                }
               }
-              return null;
+              
+              return convertValue(domVal, targetType);
             }
+            return null;
+          }
 
-            const data =  convertValue(this[privateKey], targetType);
-          // console.log('get rrr', data);
-            return data;
-          // } catch (err) {
-          //   console.error('Error in getter:', err);
-          //   throw err;
-          // }
+          const data = convertValue(this[privateKey], targetType);
+          return data;
         },
         set(this: any, nv: any) {
           // this[propertyKey] = nv;

package/src/decorators/elementDefine.ts

@@ -1,5 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { FunctionUtils } from '@dooboostore/core';
+import { ReflectUtils, FunctionUtils, ActionExpression } from '@dooboostore/core';
 import { getAddEventListenerMetadata } from './addEventListener';
 import { ON_INITIALIZE_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata } from './lifecycles';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
@@ -12,6 +11,7 @@ import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
 import { SituationTypeContainer, SituationTypeContainers } from '@dooboostore/simple-boot/decorators/inject/Inject';
 import { InjectSituationType, HostSet } from '../types';
+import { ConvertUtils } from '@dooboostore/core-web';
 
 // --- Core Interfaces & Types ---
 
@@ -214,8 +214,7 @@ const setupPrototype = (proto: any) => {
     if (oldHandler) el.removeEventListener(eventName, oldHandler);
 
     const handler = async (event: any) => {
-      const parent = SwcUtils.findNearestSwcHost(el);
-      const hostSet = SwcUtils.getHostSet(parent || el);
+      const hostSet = SwcUtils.getHostSet(el);
       const conf = getElementConfig(this);
       const currentWin = (this as any)._resolveWindow(conf);
       const helpers = SwcUtils.getHelperSet(currentWin);
@@ -237,8 +236,7 @@ const setupPrototype = (proto: any) => {
   proto.__swc_executeAttributeEvent = async function (el: HTMLElement, attrName: string, script: string, event: Event) {
     ensureInit(this);
 
-    const parent = SwcUtils.findNearestSwcHost(el);
-    const hostSet = SwcUtils.getHostSet(parent || el);
+    const hostSet = SwcUtils.getHostSet(el);
     const conf = getElementConfig(this);
     const currentWin = (this as any)._resolveWindow(conf);
     const currentHelpers = SwcUtils.getHelperSet(currentWin);
@@ -565,6 +563,27 @@ export const elementDefine =
 
       const hSet = SwcUtils.getHostSet(this as any);
 
+      // Process expression directive before passing to handlers
+      let processedVal = newVal;
+      if (newVal !== null) {
+        const ae = new ActionExpression(newVal);
+        const expr = ae.getFirstExpression('call-return');
+        if (expr) {
+          const win = (this as any)._resolveWindow?.() || ((typeof window !== 'undefined' ? window : undefined) as any);
+          try {
+            const result = FunctionUtils.executeReturn({
+              script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
+              context: this,
+              args: SwcUtils.getHelperAndHostSet(win,this as any)
+            });
+            processedVal = String(result);
+          } catch (e) {
+            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name}:`, e);
+            processedVal = newVal;
+          }
+        }
+      }
+
       if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
           const eventName = name.substring(7);
@@ -579,7 +598,7 @@ export const elementDefine =
 
       const mKeys = attrChangeMap.get(name);
       if (mKeys && Array.isArray(mKeys)) {
-        for (const key of mKeys) (this as any)[key](newVal, old, name, hSet);
+        for (const key of mKeys) (this as any)[key](processedVal, old, name, hSet);
       }
     };
 

package/src/elements/SwcAppMixin.ts

@@ -185,7 +185,7 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           const userConfig = FunctionUtils.executeReturn({
             script: configStr,
             context: this,
-            args: SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this))
+            args: SwcUtils.getHelperAndHostSet(win, this)
           });
           this.connect(userConfig);
         } catch (e) {

package/src/elements/SwcAsync.ts

@@ -1,58 +1,86 @@
 import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core';
+import { FunctionUtils, ActionExpression } from '@dooboostore/core';
+import { ConvertUtils } from '@dooboostore/core-web';
+import { attributeHost } from '../decorators';
 
 class SwcAsync extends HTMLTemplateElement {
-  private _nodes: Node[] = [];
-  private _value: any = null;
+  @attributeHost('value')
+  _value: any;
+
+  @attributeHost('replace-wrap')
+  _replaceWrap: string | null;
+
+  resultValue?: any;
 
-  private _executeCloneCallback(attr: string, args: any) {
-    const script = this.getAttribute(attr);
-    if (!script) return;
-    FunctionUtils.execute({ script, context: this, args });
+  get value(): boolean {
+    return this._value;
   }
 
+  set value(nv: any) {
+    this.executeAsync(nv);
+  }
+
+  private _nodes: Node[] = [];
+
   @changedAttributeHost('value')
-  private refresh(valueAttr?: string | null) {
-    valueAttr ??= this.getAttribute('value');
-    if (!valueAttr) {
-      this.render('default');
-      return;
-    }
+  private setValue(valueAttr?: string | null) {
+    this.executeAsync(this._value);
+  }
 
-    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
-    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {
-      const script = valueAttr.slice(2, -2).trim();
-      const win = this.ownerDocument?.defaultView || window;
-      const result = FunctionUtils.executeReturn({ 
-        script, 
-        context: this, 
-        args: SwcUtils.getHelperAndHostSet(win, this) 
-      });
-
-      this.executeAsync(result);
-    } else {
-      // 일반 문자열 값 또는 직접 Promise 속성
-      this.executeAsync(valueAttr);
-    }
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap() {
+    this.executeAsync(this._value);
   }
 
-  private executeAsync(result: any) {
+  private executeAsync(result: any = this._value) {
+    if (result === undefined || result === null) {
+      this.refresh('default');
+      return;
+    }
+
     if (result instanceof Promise) {
-      this.render('loading');
+      this.refresh('loading');
       result
         .then(v => {
-          this._value = v;
-          this.render('success');
+          this.resultValue = v;
+          this.refresh('success');
         })
-        .catch(e => this.render('error'));
+        .catch(e => {
+          console.error('[SWC-ASYNC] Promise rejected:', e);
+          this.resultValue = e;
+          this.refresh('error');
+        });
     } else {
-      this._value = result;
-      this.render('success');
+      this.resultValue = result;
+      this.refresh('success');
+    }
+  }
+
+  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {
+    const config = wrap ? { wrapExpression: wrap } : undefined;
+    const ae = new ActionExpression(html, config);
+    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';
+    const win = this.ownerDocument?.defaultView || window;
+
+    // @ts-ignore
+    for (const expr of ae.getExpressions(filterOptions)) {
+      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();
   }
 
-  private render(state: string) {
+  refresh(state: string = 'default') {
+    console.log('rrrrrrrrrrrrrrrrr', state);
     this.cleanup();
     const portal = this.parentElement;
     if (!portal) return;
@@ -62,36 +90,17 @@ class SwcAsync extends HTMLTemplateElement {
 
     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 };
-
-      // 부모 체인을 정상적으로 유지하기 위해 __swc_host 할당 제거
-      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 });
-
-        // Attribute {{ }} 치환 - SwcChoose처럼 동적 치환
-        if (n instanceof HTMLElement) {
-          Array.from(n.attributes).forEach(attr => {
-            const value = attr.value || '';
-            if (value.startsWith('{{') && value.endsWith('}}')) {
-              const script = value.slice(2, -2).trim();
-              const result = FunctionUtils.executeReturn({
-                script,
-                context: n,
-                args: groupArgs
-              });
-              n.setAttribute(attr.name, String(result));
-            }
-          });
-        }
-      });
-
-      this._executeCloneCallback('on-clone-nodes', groupArgs);
-
-      portal.insertBefore(clone, this.nextSibling);
+      let htmlString = t.innerHTML;
+      const groupArgs = { ...helperSet, $value: this._value, $state: state };
+
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+
+      const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
+      temp.innerHTML = htmlString;
+      const content = temp.content;
+
+      this._nodes = Array.from(content.childNodes);
+      portal.insertBefore(content, this.nextSibling);
     }
   }
 
@@ -100,9 +109,6 @@ class SwcAsync extends HTMLTemplateElement {
     this._nodes = [];
   }
 
-  connectedCallback() {
-    this.refresh();
-  }
   disconnectedCallback() {
     this.cleanup();
   }

package/src/elements/SwcChoose.ts

@@ -1,75 +1,90 @@
 import { changedAttributeHost } from '../decorators/changedAttributeHost';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core';
+import { FunctionUtils, ActionExpression } from '@dooboostore/core';
+import { ConvertUtils } from '@dooboostore/core-web';
 import { SwcChooseInterface } from '../types';
+import { attributeHost } from '../decorators';
 
 class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
+  @attributeHost('value')
+  _value: any;
+
+  @attributeHost('replace-wrap')
+  _replaceWrap: string | null;
+
   private _nodes: Node[] = [];
-  private _value: any = null;
   private _previousTemplate: HTMLTemplateElement | null = null;
 
   get value(): any {
     return this._value;
   }
+
   set value(nv: any) {
-    this._value = nv;
-    this.render();
+    this.refresh(nv);
   }
 
-  private _executeCloneCallback(attr: string, args: any) {
-    const script = this.getAttribute(attr);
-    if (!script) return;
-    FunctionUtils.execute({ script, context: this, args });
+  @changedAttributeHost('value')
+  private setValue() {
+    this.refresh();
   }
 
-  @changedAttributeHost('value')
-  refresh(valueAttr?: string | null) {
-    valueAttr ??= this.getAttribute('value');
-    if (valueAttr === null) {
-      this.value = null;
-      return;
-    }
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap(replaceWrapAttr?: string | null) {
+    this.refresh();
+  }
 
-    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
-    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {
-      const script = valueAttr.slice(2, -2).trim();
-      const win = this.ownerDocument?.defaultView || window;
-      const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this));
-      // console.log('vvvvvvvvvvvvvvvvvv323', helperAndHostSet);
-      const result = FunctionUtils.executeReturn({ script, context: this, args: helperAndHostSet });
-      this.value = result;
-      // console.log('----------vv', this.value);
-    } else {
-      // 일반 문자열 값
-      this.value = valueAttr;
+  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {
+    const config = wrap ? { wrapExpression: wrap } : undefined;
+    const ae = new ActionExpression(html, config);
+    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';
+    const win = this.ownerDocument?.defaultView || window;
+
+    // @ts-ignore
+    for (const expr of ae.getExpressions(filterOptions)) {
+      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();
   }
 
-  private render() {
-    // console.log('-------------', this.value);
+  refresh(value = this._value) {
+    const portal = this.parentElement;
+    if (!portal) return;
+
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+    const groupArgs = { ...helperSet, $value: value };
+
     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('value') || '';
         let matches = false;
-        const value = t.getAttribute('value') || '';
 
-        // {{ }} 브레이스로 감싸진 값은 스크립트 실행
-        if (value.startsWith('{{') && value.endsWith('}}')) {
-          const script = value.slice(2, -2).trim();
+        // 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,
+            script: decodedScript,
             context: t,
-            args: { ...helperSet, $value: this._value }
+            args: groupArgs
           });
-          // console.log('rrrrrrrrrrrrrr', result);
-          matches = result === true;
+          matches = !!result;
         } else {
-          // 일반 문자열 비교 (기존 방식)
-          matches = String(value) === String(this._value);
+          matches = String(attrVal) === String(value);
         }
 
         if (matches) {
@@ -81,11 +96,12 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
 
     const target = selected || (this.content.querySelector('template[is="swc-otherwise"]') as HTMLTemplateElement);
 
-    // skip-if-same attribute가 있고 이전과 같은 template이면 렌더링 스킵
-    // 최상위 skip-if-same 또는 각 when/otherwise의 skip-if-same 체크
-    const targetHasSkipIfSame = target?.hasAttribute('skip-if-same');
-    const shouldSkip = (this.hasAttribute('skip-if-same') || targetHasSkipIfSame) && this._previousTemplate === target;
-    if (shouldSkip) {
+    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;
     }
 
@@ -93,41 +109,15 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
     this._previousTemplate = target;
 
     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] };
-
-      // 복제된 최상위 요소들은 SwcChoose의 직접 자식이 될 것이므로 __swc_host 설정 안 함
-      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 });
-
-        // Attribute {{ }} 치환 - HTML string 차원에서 동적 치환
-        if (n instanceof HTMLElement) {
-          Array.from(n.attributes).forEach(attr => {
-            const value = attr.value || '';
-            if (value.startsWith('{{') && value.endsWith('}}')) {
-              const script = value.slice(2, -2).trim();
-              const result = FunctionUtils.executeReturn({
-                script,
-                context: n,
-                args: { ...groupArgs, $value: this._value }
-              });
-              n.setAttribute(attr.name, String(result));
-            }
-          });
-        }
-      });
+      let htmlString = target.innerHTML;
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
 
-      this._executeCloneCallback('on-clone-nodes', groupArgs);
+      const result = this.ownerDocument?.createElement('template') || document.createElement('template');
+      result.innerHTML = htmlString;
+      const processedFragment = result.content;
 
-      this.parentElement?.insertBefore(clone, this.nextSibling);
-      // if (portal === this.parentElement) {
-      //   portal.insertBefore(clone, this.nextSibling);
-      // } else {
-      //   portal.appendChild(clone);
-      // }
+      this._nodes = Array.from(processedFragment.childNodes);
+      portal.insertBefore(processedFragment, this.nextSibling);
     }
   }
 
@@ -136,9 +126,6 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
     this._nodes = [];
   }
 
-  connectedCallback() {
-    this.refresh();
-  }
   disconnectedCallback() {
     this.cleanup();
   }