@dooboostore/simple-web-component 1.0.30 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -93,9 +93,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.30",
-    "@dooboostore/simple-boot": "1.0.54",
+    "@dooboostore/core-node": "1.0.12",
     "@dooboostore/core-web": "1.0.10",
-    "@dooboostore/core-node": "1.0.12"
+    "@dooboostore/simple-boot": "1.0.54"
   },
   "scripts": {
     "clean": "rm -rf dist",

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 ---
 
@@ -177,14 +177,14 @@ const setupPrototype = (proto: any) => {
     ensureInit(this);
     if (typeof (this as any)[methodName] !== 'function') return;
     const useHostSet = hostSet ?? SwcUtils.getHostSet(this);
-    const app = useHostSet?.$appHost.simpleApplication;
+    const app = useHostSet?.$appHost?.simpleApplication;
     // console.log('---->hh',app, this, methodName);
     if (app) {
       const otherStorage = new Map<any, any>();
       const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: InjectSituationType.HOST_SET, data: useHostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: useHostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: useHostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: useHostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: useHostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: useHostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: useHostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: useHostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost })]);
       otherStorage.set(SituationTypeContainers, situations);
 
-      return app.simstanceManager.executeBindParameterSimPromise(
+      return app.simstanceManager.executeBindParameterSim(
         {
           target: this,
           targetKey: methodName,
@@ -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);
@@ -332,7 +330,10 @@ export const elementDefine =
         let sContent = '',
           lContent = '';
         for (const meta of connectedInnerHtmlList) {
-          const res = (this as any)[meta.propertyKey]();
+          // const res = (this as any)[meta.propertyKey]();
+          const res = (this as any)._invokeLifecycleMethod(meta.propertyKey, hostSet);
+          // console.log('------res0', res);
+          // console.log('------res1', res1);
           if (res !== undefined) {
             if (meta.options.useShadow) sContent += res;
             else lContent += res;
@@ -562,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);
@@ -576,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/SwcAppEngine.ts

@@ -42,11 +42,11 @@ export class SwcAppEngine {
 
       // Router Selection
       if (this._config.routeType === 'path') {
-        this.router = new PathRouter({ window: this._config.window });
+        this.router = new PathRouter({ window: this._config.window, firstUrl: this._config.path });
       } else if (this._config.routeType === 'hash') {
-        this.router = new HashRouter({ window: this._config.window });
+        this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });
       } else if (this._config.routeType === 'element') {
-        this.router = new ElementRouter({ window: this._config.window });
+        this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });
       }
 
       // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)

package/src/elements/SwcAppMixin.ts

@@ -28,11 +28,6 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       return this.__swc_engine.router;
     }
 
-    // constructor() {
-    //   super();
-    //   console.log('cccccccccccccccccccccc');
-    // }
-
     _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
       const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);
       if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
@@ -153,35 +148,19 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
         this._invokeOnConnectedSwcAppStarted(instance);
       });
 
-      // Safari fix: Manually scan DOM tree and register any SWC components that couldn't find parent
-      // This handles the case where is="" elements get upgraded in child-first order
-      // const allElements = (this as any).querySelectorAll('*');
-      // for (const el of allElements) {
-      //   const isConnected = (el as any).__swc_connected;
-      //   if (!isConnected && typeof (el as any)._resolveWindow === 'function') {
-      //     // Element is an SWC component but hasn't registered with app yet
-      //     try {
-      //       this._connected(el);
-      //       if ((el as any)._invokeOnConnectedSwcAppStarted) {
-      //         this._invokeOnConnectedSwcAppStarted(el);
-      //       }
-      //     } catch (e) {
-      //       console.warn('[SWC] Error registering discovered element:', el.tagName, e);
-      //     }
-      //   }
-      // }
 
       // Subscribe to router changes after connect
       if (!this._routerSubscription && this.router) {
         this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
-          // console.log('Route changed:', route);
+          //@ts-ignore
+          // console.log('Route changed:', route, this._swcId);
           this._handleRouteChange(route);
         });
         // Navigate to initial path if specified
         const config = this.__swc_engine.config;
-        if (config?.path) {
-          this.router.go(config.path);
-        }
+        // if (config?.path) {
+        //   this.router.go(config.path);
+        // }
       }
     }
 
@@ -206,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,60 +1,88 @@
 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';
 
-export class SwcAsync extends HTMLTemplateElement {
-  private _nodes: Node[] = [];
-  private _value: any = null;
+class SwcAsync extends HTMLTemplateElement {
+  @attributeHost('value')
+  _value: any;
 
-  private _resolvePortal(): Element | null {
-    const portalScript = this.getAttribute('on-get-portal');
-    if (!portalScript) return this.parentElement;
+  @attributeHost('replace-wrap')
+  _replaceWrap: string | null;
 
-    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;
+  resultValue?: any;
+
+  get value(): boolean {
+    return this._value;
   }
 
-  private _executeCloneCallback(attr: string, args: any) {
-    const script = this.getAttribute(attr);
-    if (!script) return;
-    FunctionUtils.execute({ script, context: this, args });
+  set value(nv: any) {
+    this.executeAsync(nv);
   }
 
-  @changedAttributeHost('on-get-value')
-  private refresh() {
-    const script = this.getAttribute('on-get-value');
-    if (!script) {
-      this.render('default');
+  private _nodes: Node[] = [];
+
+  @changedAttributeHost('value')
+  private setValue(valueAttr?: string | null) {
+    this.executeAsync(this._value);
+  }
+
+  @changedAttributeHost('replace-wrap')
+  private setReplaceWrap() {
+    this.executeAsync(this._value);
+  }
+
+  private executeAsync(result: any = this._value) {
+    if (result === undefined || result === null) {
+      this.refresh('default');
       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');
+      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 render(state: string) {
+  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();
+  }
+
+  refresh(state: string = 'default') {
+    console.log('rrrrrrrrrrrrrrrrr', state);
     this.cleanup();
-    const portal = this._resolvePortal();
+    const portal = this.parentElement;
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
@@ -62,23 +90,17 @@ export 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 };
-
-      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._executeCloneCallback('on-clone-nodes', groupArgs);
-
-      if (portal === this.parentElement) {
-        portal.insertBefore(clone, this.nextSibling);
-      } else {
-        portal.appendChild(clone);
-      }
+      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);
     }
   }
 
@@ -87,10 +109,6 @@ export class SwcAsync extends HTMLTemplateElement {
     this._nodes = [];
   }
 
-  connectedCallback() {
-    console.log('[SwcAsync] connectedCallback called');
-    this.refresh();
-  }
   disconnectedCallback() {
     this.cleanup();
   }