@dooboostore/simple-web-component 1.0.35 → 1.0.37

package/src/elements/{SwcAppMixin.ts → SwcApp.ts}

@@ -1,14 +1,28 @@
-import {SwcAppEngine, SwcAttributeConfigType, SwcConfigType} from './SwcAppEngine';
-import {SwcAppInterface, SwcAppMessage} from '../types';
-import {SwcUtils} from '../utils/Utils';
-import {debounceTimeIntervalLock, FunctionUtils, Subscription} from '@dooboostore/core';
-import {RouterEventType} from '@dooboostore/core-web';
-import {getSubscribeSwcAppRouteChangeWhileConnectedMetadata} from '../decorators/subscribeSwcAppRouteChangeWhileConnected';
-import {getSubscribeSwcAppMessageWhileConnectedMetadata} from '../decorators/subscribeSwcAppMessageWhileConnected';
-
-export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base: T) {
-  //@ts-ignore
-  return class extends Base implements SwcAppInterface {
+import {SwcAppInterface, SwcAppMessage} from "../types";
+import {elementDefine, findAllLifecycleMetadata, getSubscribeSwcAppMessageWhileConnectedMetadata, getSubscribeSwcAppRouteChangeWhileConnectedMetadata,  ON_CONNECTED_SWC_APP_METADATA_KEY} from "../decorators";
+import {SwcAppEngine, SwcAttributeConfigType, SwcConfigType} from "../SwcAppEngine";
+import {debounceTimeIntervalLock, FunctionUtils, Subscription} from "@dooboostore/core";
+import {RouterEventType} from "@dooboostore/core-web";
+import {SwcUtils} from "../utils/Utils";
+
+export const isSSR = (i: HTMLElement) => {
+  return i.hasAttribute('swc-use-ssr');
+}
+export const setSSRAttribute = (i: HTMLElement) => {
+  i.setAttribute('swc-use-ssr', (i as any)._swcId ?? '');
+}
+export const removeSSRAttribute = (i: HTMLElement) => {
+  i.removeAttribute('swc-use-ssr');
+}
+
+
+export const tagName = 'swc-app';
+export default async (w: Window) => {
+  const existing = w.customElements.get(tagName);
+  if (existing) return existing;
+
+  @elementDefine(tagName, {window: w})
+  class SwcApp extends w.HTMLElement implements SwcAppInterface {
     __swc_engine = new SwcAppEngine(this as any);
     _swc_connected_instance = new Set<any>();
     // _swc_notified_routes = new WeakMap<any, RouterEventType>();
@@ -26,7 +40,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
     이걸사용하는데 is 대응하는거다 그런데 이때 처리되는 순서가  크롬이나 표준에서는 부모부터 만들어지고 자식들이 만들어지는데
      저 polyfill에서는 자식부터 만들어지고 부모가 만들어진다 is일때 아 .. 이문제때문에 자식이 _connected_safari 에 강제로 자기자식넣어준다
      */
-    _connected_safari = [];
+    _connected_safari_and_standby = [];
 
     get simpleApplication() {
       return this.__swc_engine.simpleApplication;
@@ -40,22 +54,23 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       return this.__swc_engine?.router;
     }
 
-    async _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
+    async _invokeRouteChangeSubscribers(instance: HTMLElement, re: RouterEventType) {
       if (instance.isConnected === false) return;
 
       this._routeChangeInvocations++;
 
       if (this._childrenRouteChangedInterval) {
-        clearInterval(this._childrenRouteChangedInterval);
+        this.config.window.clearInterval(this._childrenRouteChangedInterval);
       }
+      const intervalConfig = {setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window)};
       this._childrenRouteChangedInterval = debounceTimeIntervalLock(
         () => this._routeChangeInvocations === 0,
         () => {
           this._childrenRouteChangedInterval = null;
-          this.config.onChildrenRouteChanged(re, this)
+          this.config.onChildrenRouteChanged?.(re, this)
         },
         this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
-        {setInterval: window.setInterval, clearInterval: window.clearInterval}
+        intervalConfig
         // {setInterval: window.setInterval, clearInterval: window.clearInterval}
       );
 
@@ -118,28 +133,50 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
           await Promise.allSettled(ps);
         }
       } finally {
-        this._routeChangeInvocations--;
+        if (this.config?.ssr) {
+          setSSRAttribute(instance);
+        } else {
+          removeSSRAttribute(instance);
+        }
+        this._routeChangeInvocations = Math.max(0, this._routeChangeInvocations - 1);
       }
     }
 
-    async _connected(instance: any) {
+    async _connected(instance: HTMLElement, option?: { noIncrements: boolean }) {
       if (instance) {
-        this._connectedInvocations++;
+        // console.log('_connected-->', instance.tagName, this._connectedInvocations)
+
+        if (!this.simpleApplication && !this.config) {
+          this._connected_safari_and_standby.push(instance);
+          return;
+        }
+
+        this.config.onConnectedChildBefore?.(instance);
+        if (!option?.noIncrements) {
+          this._connectedInvocations++;
+        }
         this._swc_connected_instance.add(instance);
 
+        const connectedSwcAppCallBacks = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY) ?? [];
+        for (let connectedSwcAppCallBack of connectedSwcAppCallBacks) {
+          await (instance as any)?._invokeLifecycleMethod?.(connectedSwcAppCallBack);
+        }
+
         if (this._childrenConnectedDoneInterval) {
-          clearInterval(this._childrenConnectedDoneInterval);
+          this.config.window.clearInterval(this._childrenConnectedDoneInterval);
         }
+        const intervalConfig = {setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window)};
         this._childrenConnectedDoneInterval = debounceTimeIntervalLock(
           () => this._connectedInvocations === 0,
           () => {
             this._childrenConnectedDoneInterval = null;
-            this.config.onChildrenConnectedDone(this)
+            this.config.onChildrenConnectedDone?.(this)
           },
           this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
-          {setInterval: window.setInterval, clearInterval: window.clearInterval}
+          intervalConfig
         );
 
+        // console.log('onChildConnectedDone-->')
 
         if (this.simpleApplication) {
           try {
@@ -152,14 +189,25 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
             throw e;
           }
         }
+
+        if (this.config?.ssr) {
+          setSSRAttribute(instance);
+        } else {
+          removeSSRAttribute(instance);
+        }
       }
+
+
+      this.config.onConnectedChildAfter?.(instance);
+      return this;
     }
 
     async _connectedDone(instance: any) {
       try {
         // 내부 연결 처리 로직이 있다면 여기에 추가
+        // console.log('_connectedDone-->', instance, this._connectedInvocations)
       } finally {
-        this._connectedInvocations--;
+        this._connectedInvocations = Math.max(0, this._connectedInvocations - 1);
       }
     }
 
@@ -167,6 +215,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       // console.log('_disconnected', instance);
       if (instance) {
         this._swc_connected_instance.delete(instance);
+        this.config?.onDisconnectedChildAfter?.(instance);
         // this._swc_notified_routes.delete(instance);
       }
     }
@@ -184,6 +233,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
     }
 
     async connect(config?: SwcAttributeConfigType) {
+      console.log('[SWC] connect')
       const swcConfig = {
         routeType: 'element',
         window: config?.window,
@@ -192,9 +242,9 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
 
       const mode = config?.connectMode || 'direct';
 
-      if (mode === 'direct') {
+      if (mode === 'direct' || mode === 'hydrate') {
+        this.setAttribute('swc-connect-mode', mode);
         await this.__swc_engine.connect(swcConfig);
-        this.setAttribute('swc-connect-mode', 'direct');
       } else if (mode === 'swap' || mode === 'clear-swap') {
         if (!this.parentNode) {
           // 부모가 없으면 swap을 할 수 없으므로 direct로 폴백합니다.
@@ -233,9 +283,9 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       }
 
       // 사파리일떄 예외이다 is 일때 polyfill되는데 이떄 부모부터 만들어지는게 아니라 자식부터 만들어진다 그래서 부모가 만들어질때 자식들이 이미 만들어져있어서 부모가 자식들을 등록해주는 형태로 강제로 등록해준다
-      this._connected_safari.forEach((instance: any) => {
+      this._connected_safari_and_standby.forEach((instance: any) => {
         // console.log('safari!!!!!!!!!!', instance)
-        this._connected(instance);
+        this._connected(instance, {noIncrements: true});
         // this._swc_connected_instance.add(instance);
       });
       // Invoke @onConnectedSwcApp lifecycle methods on all connected component instances
@@ -253,7 +303,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
         const config = this.__swc_engine.config;
 
         this._routerSubscription = this.router.observable.subscribe(async (route: RouterEventType) => {
-          // console.log('[SWC] Router event received:', route.triggerPoint);
+          console.log('[SWC] Router event received:', route.triggerPoint);
           if (route.triggerPoint === 'end') {
             // 1. 모든 기존 연결된 자식들에게 라우트 이벤트 알림
             await this._handleRouteChange(route);
@@ -262,8 +312,8 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
 
         // Navigate to initial path if specified
         if (config?.path) {
-          // console.log('[DEBUG] Navigating to initial path:', config.path);
-          this.router.go(config.path);
+          console.log('[DEBUG] Navigating to initial path:', config.path);
+          // this.router.go(config.path);
         }
       }
     }
@@ -306,7 +356,10 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
         }
       }
 
+      // 자기자신은 apphost로 포함이 도지않으니(부모)  내자신은 self로 넣는다
+      this._connected(this);
       this.__swc_engine?.config?.onConnected?.(this);
+      this._connectedDone(this);
     }
 
     disconnectedCallback() {
@@ -317,6 +370,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       this._lastRouterEvent = undefined;
       this.__swc_engine.disconnect();
       this.__swc_engine?.config?.onDisconnected?.(this);
+      this._disconnected(this);
     }
 
     async routing(path: string) {
@@ -335,6 +389,14 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       this.router?.reload();
     }
 
+    // async completedSwcApp() {
+    //   const ss = Array.from(this._swc_connected_instance).flatMap((it) => {
+    //     const ms = findAllLifecycleMetadata(it, ON_CONNECTED_COMPLETED_SWC_APP_METADATA_KEY) ?? [];
+    //     return ms.map((sit) => it[sit](this));
+    //   });
+    //   await Promise.allSettled(ss);
+    // }
+
     publishMessage(message: SwcAppMessage): void {
       // 메시지를 모든 connected component instances로 분배
       this._swc_connected_instance.forEach((instance: any) => {
@@ -373,4 +435,9 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       }
     }
   };
-}
+
+
+  return w.customElements.whenDefined(tagName);
+
+
+}

package/src/elements/index.ts

@@ -1 +1,11 @@
-export * from './register';
+// export * from './tt/register';
+import swcAppFactory from './SwcApp'
+// import swcAsyncFactory from './SwcAsync'
+// import swcLoopFactory from './SwcLoop'
+// import swcIfFactory from './SwcIf'
+export const registerSwcApp = swcAppFactory;
+// export const registerSwcAsync = swcAsyncFactory;
+// export const registerSwcLoop = swcLoopFactory;
+// export const registerSwcIf = swcIfFactory;
+
+export const register = [swcAppFactory];

package/src/elements/tt/SwcAppMixin.ts

@@ -0,0 +1,13 @@
+// import {SwcAppEngine, SwcAttributeConfigType, SwcConfigType} from '../../SwcAppEngine';
+// import {SwcAppInterface, SwcAppMessage} from '../../types';
+// import {SwcUtils} from '../../utils/Utils';
+// import {debounceTimeIntervalLock, FunctionUtils, Subscription} from '@dooboostore/core';
+// import {RouterEventType} from '@dooboostore/core-web';
+// import {getSubscribeSwcAppRouteChangeWhileConnectedMetadata} from '../../decorators/subscribeSwcAppRouteChangeWhileConnected';
+// import {getSubscribeSwcAppMessageWhileConnectedMetadata} from '../../decorators/subscribeSwcAppMessageWhileConnected';
+// import {findAllLifecycleMetadata, ON_CONNECTED_COMPLETED_SWC_APP_METADATA_KEY, ON_CONNECTED_INNER_HTML_METADATA_KEY, ON_CONNECTED_SWC_APP_METADATA_KEY} from "../../decorators";
+//
+// export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base: T) {
+//   //@ts-ignore
+//   return
+// }

package/src/elements/tt/SwcAsync.ts

@@ -0,0 +1,139 @@
+// import {SwcUtils} from '../../utils/Utils';
+// import {ActionExpression, FunctionUtils} from '@dooboostore/core';
+// import {ConvertUtils} from '@dooboostore/core-web';
+// import {elementDefine} from "../../decorators";
+//
+// export default async (w: Window) => {
+//   const tagName = 'swc-async';
+//   const existing = w.customElements.get(tagName);
+//   if (existing) return existing;
+//
+//   @elementDefine(tagName, { window: w })
+//   class SwcAsync extends w.HTMLElement {
+//     private _value: any;
+//     private _replaceWrapStart: string | null = null;
+//     private _replaceWrapEnd: string | null = null;
+//     private _nodes: Node[] = [];
+//     resultValue?: any;
+//
+//     static get observedAttributes() {
+//       return ['value', 'replace-wrap-start', 'replace-wrap-end'];
+//     }
+//
+//     get value(): boolean {
+//       return this._value;
+//     }
+//
+//     set value(nv: any) {
+//       this.executeAsync(nv);
+//     }
+//
+//     connectedCallback() {
+//       if (this.hasAttribute('value')) {
+//         this.executeAsync(this._value);
+//       }
+//     }
+//
+//     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+//       switch (name) {
+//         case 'value':
+//           this._value = newValue;
+//           this.executeAsync(this._value);
+//           break;
+//         case 'replace-wrap-start':
+//           this._replaceWrapStart = newValue;
+//           break;
+//         case 'replace-wrap-end':
+//           this._replaceWrapEnd = newValue;
+//           break;
+//       }
+//     }
+//
+//     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;
+//       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') {
+//       this.cleanup();
+//       const portal = SwcUtils.getParentContainer(this);
+//       if (!portal) return;
+//       const win = this.ownerDocument?.defaultView || window;
+//       const helperSet = SwcUtils.getHelperAndHostSet(win, this);
+//       // HTMLElement에서는 children에서 template[is=swc-...] 찾기
+//       const t = Array.from(this.children).find(
+//         (el): el is HTMLTemplateElement => el.tagName === 'TEMPLATE' && el.getAttribute('is') === `swc-${state}`
+//       );
+//       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();
+//     }
+//   }
+//
+//   return w.customElements.whenDefined(tagName);
+// }

package/src/elements/tt/SwcAsyncTemplate.ts

@@ -0,0 +1,126 @@
+// 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';
+//
+// export class SwcAsyncTemplate 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();
+//   }
+// }