@dooboostore/simple-web-component 1.0.27 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "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-web": "1.0.10",
-    "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/simple-boot": "1.0.54"
+    "@dooboostore/core-node": "1.0.12"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -1,5 +1,5 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export interface AddEventListenerBaseOptions extends EventListenerOptions {
   capture?: boolean;
@@ -10,6 +10,7 @@ export interface AddEventListenerBaseOptions extends EventListenerOptions {
   preventDefault?: boolean;
   removeOnDisconnected?: boolean;
   delegate?: boolean;
+  filter?: (target: Event | CustomEvent, helper: HelperHostSet) => boolean;
 }
 
 export interface AddEventListenerMetadata {
@@ -53,3 +54,12 @@ export const getAddEventListenerMetadata = (target: any): AddEventListenerMetada
 export function addEventListenerHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
   return addEventListener(':host', type, options);
 }
+
+/**
+ * @addEventListenerAppHost decorator - simplified version of @addEventListener for :appHost selector
+ * Usage: @addEventListenerAppHost('click')
+ * Usage: @addEventListenerAppHost('click', { stopPropagation: true })
+ */
+export function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
+  return addEventListener(':appHost', type, options);
+}

package/src/decorators/attribute.ts

@@ -92,6 +92,7 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
 
     const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
       targets.forEach(it => {
+        // console.log('sssssssssssss', it, attrName, nv);
         if (it && typeof (it as any).setAttribute === 'function') {
           if (nv === null) {
             (it as any).removeAttribute(attrName);
@@ -112,6 +113,7 @@ 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);
@@ -136,7 +138,9 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
               return null;
             }
 
-            return convertValue(this[privateKey], targetType);
+            const data =  convertValue(this[privateKey], targetType);
+          // console.log('get rrr', data);
+            return data;
           // } catch (err) {
           //   console.error('Error in getter:', err);
           //   throw err;
@@ -144,6 +148,7 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
         },
         set(this: any, nv: any) {
           // this[propertyKey] = nv;
+          // console.log('------>??settttt', this, nv, propertyKey);
           const attrName = options.name || String(propertyKey);
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);

package/src/decorators/elementDefine.ts

@@ -172,14 +172,15 @@ const setupPrototype = (proto: any) => {
     return (typeof window !== 'undefined' ? window : undefined) as Window;
   };
 
-  proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet: HostSet, extraArgs: any[] = []) {
+  proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet?: HostSet, extraArgs: any[] = []) {
     ensureInit(this);
     if (typeof (this as any)[methodName] !== 'function') return;
-    const app = hostSet.$appHost?.simpleApplication;
-
+    const useHostSet = hostSet ?? SwcUtils.getHostSet(this);
+    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: hostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: hostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: hostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: hostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: hostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: hostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: hostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: hostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: hostSet.$lastAppHost })]);
+      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(
@@ -396,6 +397,13 @@ export const elementDefine =
               const { selector, options } = meta;
               const matchedEl = (event.target as HTMLElement).closest(selector);
               if (matchedEl && (br as any).contains(matchedEl)) {
+                // Apply filter if specified
+                if (options.filter) {
+                  const helper = SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
+                  if (!options.filter(event, helper)) {
+                    continue;  // Skip this listener if filter returns false
+                  }
+                }
                 if (options.stopPropagation) event.stopPropagation();
                 if (options.stopImmediatePropagation) event.stopImmediatePropagation();
                 if (options.preventDefault) event.preventDefault();
@@ -454,6 +462,13 @@ export const elementDefine =
 
         bindTargets.forEach(t => {
           const handler = async (event: Event) => {
+            // Apply filter if specified
+            if (options.filter) {
+              const helper = SwcUtils.getHelperAndHostSet(currentWin, t as HTMLElement);
+              if (!options.filter(event, helper)) {
+                return;  // Skip if filter returns false
+              }
+            }
             if (options.stopPropagation) event.stopPropagation();
             if (options.stopImmediatePropagation) event.stopImmediatePropagation();
             if (options.preventDefault) event.preventDefault();
@@ -481,6 +496,9 @@ export const elementDefine =
       // Register to appHost LAST when all lifecycle completed
       if (appHost && typeof (appHost as any)._connected === 'function') {
         (appHost as any)._connected(this);
+      } else if (appHost && typeof (appHost as any)) {
+        (appHost as any)._connected_safari ??= [];
+        (appHost as any)._connected_safari.push(this);
       }
     };
 

package/src/decorators/lifecycles.ts

@@ -8,6 +8,7 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-compone
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:on-add-event-listener');
+export const ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for('simple-web-component:on-connected-swc-app');
 export const INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-html');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
@@ -48,6 +49,8 @@ export const onAdopted = onAfterAdopted;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
+export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
+
 /**
  * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
  */

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, firstUrl: this._config.path });
+        this.router = new PathRouter({ window: this._config.window });
       } else if (this._config.routeType === 'hash') {
-        this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });
+        this.router = new HashRouter({ window: this._config.window });
       } else if (this._config.routeType === 'element') {
-        this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });
+        this.router = new ElementRouter({ window: this._config.window });
       }
 
       // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)

package/src/elements/SwcAppMixin.ts

@@ -2,16 +2,25 @@ import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from './SwcAppEng
 import { SwcAppInterface } from '../types';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, Subscription } from '@dooboostore/core';
-import { RouterEventType } from '@dooboostore/core-web';
+import { Router, RouterEventType } from '@dooboostore/core-web';
+import { ON_CONNECTED_SWC_APP_METADATA_KEY, findAllLifecycleMetadata } from '../decorators/lifecycles';
 import { getSubscribeSwcAppRouteChangeMetadata } from '../decorators/subscribeSwcAppRouteChange';
 
 export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {
+  //@ts-ignore
   return class extends Base implements SwcAppInterface {
     __swc_engine = new SwcAppEngine(this as any);
     _swc_connected_instance = new Set<any>();
     _routerSubscription?: Subscription;
     _lastRouterEvent?: RouterEventType;
 
+    /*
+      사파리 is 일경우
+    <script src="https://unpkg.com/@ungap/custom-elements"></script>
+    이걸사용하는데 is 대응하는거다 그런데 이때 처리되는 순서가  크롬이나 표준에서는 부모부터 만들어지고 자식들이 만들어지는데
+     저 polyfill에서는 자식부터 만들어지고 부모가 만들어진다 is일때 아 .. 이문제때문에 자식이 _connected_safari 에 강제로 자기자식넣어준다
+     */
+    _connected_safari = [];
     get simpleApplication() {
       return this.__swc_engine.simpleApplication;
     }
@@ -19,6 +28,11 @@ 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)) {
@@ -63,13 +77,15 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     }
 
     _connected(instance: any) {
-      // console.log('------------------>', instance);
+      // console.log('appmixin--> connected', instance);
       if (instance) {
         this._swc_connected_instance.add(instance);
-
-        // Notify current route subscribers immediately after connection
-        if (this.router && this._lastRouterEvent) {
-          this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+        if (this.simpleApplication) {
+          this._invokeOnConnectedSwcAppStarted(instance);
+          // Notify current route subscribers immediately after connection
+          if (this.router && this._lastRouterEvent) {
+            this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+          }
         }
       }
     }
@@ -127,19 +143,54 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
         }
       }
 
-      // console.log('vvvvvvv222222', this.router);
+      // 사파리일떄 예외이다 is 일때 polyfill되는데 이떄 부모부터 만들어지는게 아니라 자식부터 만들어진다 그래서 부모가 만들어질때 자식들이 이미 만들어져있어서 부모가 자식들을 등록해주는 형태로 강제로 등록해준다
+      this._connected_safari.forEach((instance: any) => {
+        this._swc_connected_instance.add(instance);
+      });
+      // Invoke @onConnectedSwcApp lifecycle methods on all connected component instances
+      // const hostSet = SwcUtils.getHostSet(this as any);
+      this._swc_connected_instance.forEach((instance: any) => {
+        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);
           this._handleRouteChange(route);
         });
-
         // Navigate to initial path if specified
-        // const config = this.__swc_engine.config;
-        // if (config?.path) {
-        //   this.router.go(config.path);
-        // }
+        const config = this.__swc_engine.config;
+        if (config?.path) {
+          this.router.go(config.path);
+        }
+      }
+    }
+
+    _invokeOnConnectedSwcAppStarted(instance: any) {
+      const startedMethods = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY);
+      if (startedMethods) {
+        for (const m of startedMethods) {
+          instance._invokeLifecycleMethod(m);
+        }
       }
     }
 
@@ -177,7 +228,19 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     }
 
     async routing(path: string) {
-      await this.__swc_engine.router?.go(path);
+      await this.router?.go(path);
+    }
+
+    back(): void {
+      this.router?.back();
+    }
+
+    forward(): void {
+      this.router?.forward();
+    }
+
+    reload(): void {
+      this.router?.reload();
     }
   };
 }

package/src/types.ts

@@ -48,4 +48,7 @@ export interface SwcAppInterface extends HTMLElement {
   router?: Router;
   connect(config?: SwcAttributeConfigType): Promise<void>;
   routing(path: string): Promise<void>;
+  reload(): void;
+  back(): void;
+  forward(): void;
 }

package/src/utils/Utils.ts

@@ -236,6 +236,56 @@ export namespace SwcUtils {
     return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : undefined;
   };
 
+  /**
+   * Find parent app host by traversing DOM tree directly.
+   * Only checks tagName and is attribute - no SWC host discovery.
+   * Useful for Safari polyfill compatibility where is="" elements upgrade in child-first order.
+   */
+  export const findParentAppHostDirect = (el: HTMLElement): SwcAppInterface | null => {
+    const appHosts = findAllParentAppHostsDirect(el);
+    return appHosts.length > 0 ? appHosts[appHosts.length - 1] : null;
+  };
+
+  /**
+   * Find all parent app hosts by traversing DOM tree directly.
+   * Returns array of all parent app hosts in [closest-parent, ..., root] order.
+   * Only checks tagName and is attribute - no SWC host discovery.
+   * Useful for Safari polyfill compatibility where is="" elements upgrade in child-first order.
+   */
+  export const findAllParentAppHostsDirect = (el: HTMLElement): SwcAppInterface[] => {
+    const appHosts: SwcAppInterface[] = [];
+    
+    // Start from shadow root's host if el is inside shadow DOM, otherwise from parentElement
+    let current: HTMLElement | null = null;
+    const rootNode = el.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      // Element is inside shadow DOM, start from shadow root's host
+      current = (rootNode as any).host as HTMLElement;
+    } else {
+      // Element is in light DOM, start from parent
+      current = el.parentElement;
+    }
+    
+    while (current) {
+      // console.log('vvvvvvv');
+      // alert(1)
+      // debugger;
+      const isAppHost =
+        current.tagName.toLowerCase() === 'swc-app' || 
+        current.getAttribute('is')?.startsWith('swc-app-');
+      if (isAppHost) {
+        appHosts.push(current as SwcAppInterface);
+      }
+      // Handle shadow DOM
+      if (current.shadowRoot) {
+        current = ((current.shadowRoot as any).host as HTMLElement).parentElement;
+      } else {
+        current = current.parentElement;
+      }
+    }
+    return appHosts.reverse(); // [root, ..., closest-parent]
+  };
+
   export const getHostSet = (el: HTMLElement): HostSet => {
     const isSwc = !!getElementConfig(el);
     const ancestors = findAllSwcHosts(el); // [root, ..., parent]
@@ -265,7 +315,7 @@ export namespace SwcUtils {
       curr = curr.parentElement || (curr.getRootNode() as any).host;
     }
 
-    const $appHosts = $hosts.filter(h => h.tagName.toLowerCase() === 'swc-app' || h.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
+    const $appHosts = SwcUtils.findAllParentAppHostsDirect(el); //$hosts.filter(h => h.tagName.toLowerCase() === 'swc-app' || h.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
     const $appHost = $appHosts.length > 0 ? ($appHosts[$appHosts.length - 1] === el ? ($appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null) : $appHosts[$appHosts.length - 1]) : null;
     const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;