@dooboostore/simple-web-component 1.0.36 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -94,7 +94,7 @@
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.31",
     "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/core-web": "1.0.10",
+    "@dooboostore/core-web": "1.0.11",
     "@dooboostore/simple-boot": "1.0.55"
   },
   "scripts": {

package/src/{elements/SwcAppEngine.ts → SwcAppEngine.ts}

@@ -1,22 +1,27 @@
-import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
+import { SimpleApplication } from '@dooboostore/simple-boot';
 import { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/core-web';
-import { ElementRouter } from '../router/ElementRouter';
-import { SimOption } from '@dooboostore/simple-boot/SimOption';
+import { ElementRouter } from './router/ElementRouter';
+import { SimOption } from '@dooboostore/simple-boot';
 import { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';
 
-import { SwcAppInterface } from '../types';
+import { SwcAppInterface } from './types';
 import { SimConfig } from '@dooboostore/simple-boot';
 
 export type SwcConfigType = {
   routeType: 'path' | 'hash' | 'element';
-  connectMode?: 'direct' | 'swap' | 'clear-swap';
+  connectMode?: 'direct' | 'swap' | 'clear-swap' | 'hydrate'; // hydrate 아직 개발중
   container?: symbol;
   otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;
   path?: string;
   window: Window;
-  onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => void;
+  onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => Promise<void> | void;
+  onConnectedChildAfter?: (swcEl: HTMLElement) => void;
+  onConnectedChildBefore?: (swcEl: HTMLElement) => void;
+  onDisconnectedChildAfter?: (swcEl: HTMLElement) => void;
+  onDisconnectedChildBefore?: (swcEl: HTMLElement) => void;
   onConnected?: (app: SwcAppInterface) => void;
   onDisconnected?: (app: SwcAppInterface) => void;
+  ssr?: boolean;
 
   onChildrenConnectedDone?: (app: SwcAppInterface) => void;
   // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;
@@ -71,7 +76,7 @@ export class SwcAppEngine {
       this.simpleApplication.run(otherInstanceSim);
 
       if (this._config.onEngineStarted) {
-        this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);
+        await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);
       }
     } catch (e) {
       console.error('[SWC-APP-ENGINE] Init failed:', e, this._config);

package/src/decorators/applyNode.ts

@@ -4,7 +4,7 @@ import { HelperHostSet, SwcRootType } from '../types';
 import { SwcUtils } from "../utils/Utils";
 /*
 <!-- beforebegin -->
-<p>
+<p> <-- it's me
   <!-- afterbegin -->
   foo
   <!-- beforeend -->
@@ -43,8 +43,10 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
   });
 };
 
-const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, doc: Document) => {
+const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, win: Window) => {
     if (!targetEl) return;
+
+    const doc = win.document;
     
     if (pos === 'innerHtml') {
         targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
@@ -58,7 +60,7 @@ const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, doc: Docume
         return;
     }
 
-    const isShadowRoot = targetEl instanceof ShadowRoot;
+    const isShadowRoot = targetEl instanceof win.ShadowRoot;
     const nodes = normalizeNodes(res, doc);
     if (pos === 'replace') {
       if (!isShadowRoot) targetEl.replaceWith(...nodes);
@@ -124,7 +126,7 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
         
         // 사용자가 filter를 명시하면 그 조건으로, 아니면 항상 적용
         if (!options.filter || options.filter(target, val, {currentThis: this, helper: hostSet})) {
-            applyToDom(target, val, pos, currentDoc);
+            applyToDom(target, val, pos, currentWin);
         }
       };
 
@@ -166,30 +168,30 @@ export function applyNodeThis(targetOrOptions?: any, propertyKey?: string | symb
   return applyNode('$this', { position: 'beforeEnd', ...opt });
 }
 
-export function applyReplaceChildrenNodeThis(options: ApplyNodeOptions): MethodDecorator;
-export function applyReplaceChildrenNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyReplaceChildrenNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function applyNodeThisReplaceChildren(options: ApplyNodeOptions): MethodDecorator;
+export function applyNodeThisReplaceChildren(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisReplaceChildren(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   if (propertyKey !== undefined) return applyNode('$this', { position: 'replaceChildren' })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', { position: 'replaceChildren', ...opt });
 }
 
-export function applyInnerHtmlNodeThis(options: ApplyNodeOptions): MethodDecorator;
-export function applyInnerHtmlNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyInnerHtmlNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function applyThisInnerHtmlNode(options: ApplyNodeOptions): MethodDecorator;
+export function applyThisInnerHtmlNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyThisInnerHtmlNode(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   if (propertyKey !== undefined) return applyNode('$this', { position: 'innerHtml' })(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', { position: 'innerHtml', ...opt });
 }
 
-export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+export function applyNodeReplaceChildren(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'replaceChildren' });
 }
 
-export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+export function applyNodeInnerHtml(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'innerHtml' });
 }
 
-export function applyInnerTextNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+export function applyNodeInnerText(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'innerText' });
 }

package/src/decorators/applySlot.ts

@@ -0,0 +1,228 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { HelperHostSet, SwcRootType } from '../types';
+import { SwcUtils } from "../utils/Utils";
+import {NodeSlot} from "@dooboostore/core-web";
+/*
+<!-- beforebegin -->
+<p> <-- it's me
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ */
+export type ApplySlotPosition = 'prependHtml' | 'prependText' | 'appendHtml' | 'appendText' | 'replaceChildrenHtml' | 'replaceChildrenText' | 'clear';
+
+export interface ApplySlotOptions {
+  position?: ApplySlotPosition;
+  // root?: SwcRootType;
+  /**
+   * Filter function to determine whether to perform DOM operation.
+   * If it returns false, the operation is skipped.
+   */
+  // filter?: (target: HTMLElement | ShadowRoot, newValue: any, meta:{currentThis: any,helper: HelperHostSet}) => boolean;
+  /**
+   * Optional loading content to display while an async method is executing.
+   */
+  // loading?: (helper: HelperHostSet) => any;
+}
+
+export interface ApplySlotMetadata {
+  propertyKey: string | symbol;
+  id: string;
+  type: 'method' | 'property';
+  options: ApplySlotOptions;
+}
+
+export const APPLY_SLOT_METADATA_KEY = Symbol.for('simple-web-component:apply-slot');
+
+// const normalizeNodes = (res: any, doc: Document): Node[] => {
+//   const items = Array.isArray(res) ? res : [res];
+//   return items.map(it => {
+//     if (it instanceof Node) return it;
+//     return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
+//   });
+// };
+
+// const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, win: Window) => {
+//     if (!targetEl) return;
+//
+//     const doc = win.document;
+//
+//     if (pos === 'innerHtml') {
+//         targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
+//         return;
+//     }
+//
+//     if (pos === 'innerText') {
+//         if (targetEl.innerText !== undefined) {
+//             targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
+//         }
+//         return;
+//     }
+//
+//     const isShadowRoot = targetEl instanceof win.ShadowRoot;
+//     const nodes = normalizeNodes(res, doc);
+//     if (pos === 'replace') {
+//       if (!isShadowRoot) targetEl.replaceWith(...nodes);
+//     } else if (pos === 'replaceChildren') {
+//       targetEl.replaceChildren(...nodes);
+//     } else {
+//       if (pos === 'beforeEnd') targetEl.append(...nodes);
+//       else if (pos === 'afterBegin') targetEl.prepend(...nodes);
+//       else if (pos === 'beforeBegin' && !isShadowRoot) targetEl.before(...nodes);
+//       else if (pos === 'afterEnd' && !isShadowRoot) targetEl.after(...nodes);
+//     }
+// };
+
+/**
+ * @applyNode decorator to surgically add/replace nodes to a target element.
+ */
+export function applySlot(id: string, options: ApplySlotOptions = { position: 'replaceChildrenHtml' }): MethodDecorator & PropertyDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+    const type = descriptor === undefined ? 'property' : 'method';
+
+    if (type === 'property') {
+            Object.defineProperty(targetObj, propertyKey, {
+              get(this: any) {
+                const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
+                return nodeSlot;
+              },
+              configurable: true,
+              enumerable: true,
+            })
+     // return nodeSlot;
+     //  return;
+    }
+
+    const constructor = targetObj.constructor;
+    let metaList = ReflectUtils.getOwnMetadata(APPLY_SLOT_METADATA_KEY, constructor) as ApplySlotMetadata[];
+    if (!metaList) {
+      metaList = []
+      ReflectUtils.defineMetadata(APPLY_SLOT_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({ propertyKey, id, type, options });
+
+
+
+    if (type === 'method') {
+      const original = descriptor.value;
+      descriptor.value = function (...args: any[]) {
+        ensureInit(this);
+
+        const conf = getElementConfig(this);
+        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+        const currentDoc = currentWin.document;
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+
+
+        // const getTarget = () => {
+        //   const r = options.root || 'auto';
+        //   const applyRoot = (t: any) => {
+        //     if (!t) return t;
+        //     if (r === 'auto') return t.shadowRoot || t;
+        //     if (r === 'shadow') return t.shadowRoot;
+        //     if (r === 'light') return t;
+        //     if (r === 'all') return t.shadowRoot || t;
+        //     return t;
+        //   };
+        //
+        //   if (selector === '$this') return applyRoot(this);
+        //   if (selector === '$host') return applyRoot(hostSet.$host);
+        //   if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
+        //   if (selector === '$appHost') return applyRoot(hostSet.$appHost);
+        //   if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
+        //   if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
+        //
+        //   const targetRoot = applyRoot(this);
+        //   return targetRoot ? targetRoot.querySelector(selector) : null;
+        // };
+
+        // const targetEl = getTarget();
+        const res = original.apply(this, args);
+
+        // const runApply = (target: any, val: any) => {
+        //   const pos = options.position || 'beforeEnd';
+        //
+        //   // 사용자가 filter를 명시하면 그 조건으로, 아니면 항상 적용
+        //   if (!options.filter || options.filter(target, val, {currentThis: this, helper: hostSet})) {
+        //       applyToDom(target, val, pos, currentWin);
+        //   }
+        // };
+
+        // if (res instanceof Promise) {
+        //     // 비동기일 때만 로딩 표시
+        //     if (targetEl && options.loading) {
+        //         const loadingRes = options.loading.call(this, hostSet);
+        //         applyToDom(targetEl, loadingRes, options.position || 'beforeEnd', currentDoc);
+        //     }
+        //
+        //     return res.then(finalRes => {
+        //         if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
+        //         return finalRes;
+        //     });
+        // } else {
+        //     if (res !== undefined && targetEl) runApply(targetEl, res);
+        //     return res;
+        // }
+        if (res) {
+          const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
+          const pos = options.position || 'replaceChildrenHtml';
+          const doc = currentWin.document;
+
+
+          // const isShadowRoot = targetEl instanceof win.ShadowRoot;
+          // const nodes = normalizeNodes(res, doc);
+          if (pos === 'replaceChildrenHtml') {
+            nodeSlot.replaceChildrenHtml(res);
+          } else if (pos === 'replaceChildrenText') {
+            nodeSlot.replaceChildrenText(res);
+          } else if (pos === 'appendHtml') {
+            nodeSlot.appendHtml(res);
+          } else if (pos === 'appendText') {
+            nodeSlot.appendText(res);
+          } else if (pos === 'prependHtml') {
+            nodeSlot.prependHtml(res);
+          } else if (pos === 'prependText') {
+            nodeSlot.prependText(res);
+          } else if (pos === 'clear') {
+            nodeSlot.clear();
+          }
+        }
+        return res;
+      };
+    }
+  };
+}
+
+// export const findAllApplySlotMetadata = (target: any): Map<string | symbol, ApplySlotMetadata> => {
+export const findAllApplySlotMetadata = (target: any): ApplySlotMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(APPLY_SLOT_METADATA_KEY, constructor);
+};
+
+export function applySlotClear(id: string): MethodDecorator {
+  return applySlot(id, { position: 'clear' });
+}
+export function applySlotPrependHtml(id: string): MethodDecorator {
+  return applySlot(id, { position: 'prependHtml' });
+}
+export const applySlotPrepend = applySlotPrependHtml;
+export function applySlotPrependText(id: string): MethodDecorator {
+  return applySlot(id, { position: 'prependText' });
+}
+export function applySlotAppendHtml(id: string): MethodDecorator {
+  return applySlot(id, { position: 'appendHtml' });
+}
+export function applySlotAppendText(id: string): MethodDecorator {
+  return applySlot(id, { position: 'appendText' });
+}
+export const applySlotAppend = applySlotAppendHtml;
+export function applySlotReplaceChildrenHtml(id: string): MethodDecorator {
+  return applySlot(id, { position: 'replaceChildrenHtml' });
+}
+export const applySlotReplaceChildren = applySlotReplaceChildrenHtml;
+export function applySlotReplaceChildrenText(id: string): MethodDecorator {
+  return applySlot(id, { position: 'replaceChildrenText' });
+}

package/src/decorators/elementDefine.ts

@@ -1,6 +1,6 @@
 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 {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, getOnConnectedBeforeMetadata, getOnConnectedAfterMetadata, ON_CONNECTED_COMPLETED_METADATA_KEY} from './lifecycles';
 import {getEmitCustomEventMetadataList} from './emitCustomEvent';
 import {findAllAttributeChangedMetadata, convertAttributeValue} from './changedAttributeThis';
 import {findAllAttributeApplyMetadata} from './applyAttribute';
@@ -10,8 +10,10 @@ import {getQueryAllMetadata} from './queryAll';
 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, HelperHostSet} from '../types';
-import {ConvertUtils} from '@dooboostore/core-web';
+import {InjectSituationType, HostSet, HelperHostSet, SwcAppInterface} from '../types';
+import {ConvertUtils, NodeSlot} from '@dooboostore/core-web';
+import {isSSR} from "../elements/SwcApp";
+import {findAllApplySlotMetadata} from "./applySlot";
 
 // --- Core Interfaces & Types ---
 
@@ -35,9 +37,9 @@ export const getElementConfig = (target: any): ElementMetadata | undefined => {
   return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
 
-export const ensureInit = (inst: any) => {
+export const ensureInit = (inst: any) => { // HTMLElement
   if (!inst.__swc_initialized) {
-    inst._swcId = Math.random().toString(36).substring(2, 11);
+    inst._swcId = inst?.getAttribute?.('swc-use-ssr') ?? Math.random().toString(36).substring(2, 11);
     inst._emitHandlers = new Map();
     inst._boundListeners = [];
     inst.__swc_initialized = true;
@@ -89,6 +91,12 @@ export const ensureInit = (inst: any) => {
         delete (inst as any)[meta.propertyKey];
       });
     }
+    const slotAllList = findAllApplySlotMetadata(target);
+    if (slotAllList) {
+      slotAllList.filter(it=>it.type === 'property').forEach(meta => {
+        delete (inst as any)[meta.propertyKey];
+      });
+    }
 
     // Call constructor script if present
     const hostSet = SwcUtils.getHostSet(inst);
@@ -143,7 +151,7 @@ const getHandlers = (inst: any) => {
   return inst.__swc_attributeEventHandlers;
 };
 
-const setupPrototype = (proto: any) => {
+const setupPrototype = (proto: any, win: Window) => {
   if (proto.__swc_proto_setup) return;
   proto.__swc_proto_setup = true;
 
@@ -177,7 +185,7 @@ const setupPrototype = (proto: any) => {
   proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet?: HostSet, extraArgs: any[] = []) {
     ensureInit(this);
     if (typeof (this as any)[methodName] !== 'function') return;
-    const useHostSet = hostSet ?? SwcUtils.getHostSet(this);
+    const useHostSet = hostSet ?? SwcUtils.getHelperAndHostSet(win, this);
     const app = useHostSet?.$appHost?.simpleApplication;
     // console.log('---->hh',app, this, methodName);
     if (app) {
@@ -301,10 +309,10 @@ export const elementDefine =
       // Get original static observedAttributes before they're overwritten by Object.defineProperty
       const originalStaticObservedAttributes = (constructor.observedAttributes ?? []) as string[];
       const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
-      const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
+      // const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
       const proto = constructor.prototype;
-      setupPrototype(proto);
+      setupPrototype(proto, win);
 
       // 값을 기대하지않는다.
       let helperHostSet: HelperHostSet | null = null;
@@ -314,61 +322,69 @@ export const elementDefine =
         // connected 됐을시 최신화
         helperHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
         const appHost = helperHostSet.$appHost;
+        const useSsr = isSSR(this);
+        // console.log('isSsr', useSsr, this);
+        // console.log('----helperHostSet--->', this, helperHostSet, useSsr)
+        // let connectedApp: SwcAppInterface |undefined;
         try {
           if (appHost && typeof (appHost as any)._connected === 'function') {
-           await (appHost as any)._connected(this);
+            await (appHost as any)._connected(this);
           } else if (appHost && typeof (appHost as any)) {
-            (appHost as any)._connected_safari ??= [];
-            (appHost as any)._connected_safari.push(this);
+            (appHost as any)._connected_safari_and_standby ??= [];
+            (appHost as any)._connected_safari_and_standby.push(this);
           }
 
           // const hostSet = SwcUtils.getHostSet(this as any);
           const conf = getElementConfig(this);
           const currentWin = (this as any)._resolveWindow(conf);
 
-          const shadowMode = conf?.useShadow || connectedInnerHtmlList.find(it => it.options.useShadow)?.options.useShadow;
+          const bMethods = getOnConnectedBeforeMetadata(this).filter(it => useSsr ? !it.options.ssrFirst : true);
+          // console.log('beforeConnected', bMethods)
+          if (bMethods) {
+            for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+          }
+          (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
+
+          // console.log('vvvvvvvvvvvvvvvu-seSsr-vvvvvvvvvv>', useSsr, this.tagName, this.getAttribute('seq'))
+          //   // ssr 처리라서 이미 내려준거그대로 상요하면된다 따라서 호출안한다
+          const targetConnectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const shadowMode = conf?.useShadow || targetConnectedInnerHtmlList.find(it => it.options.useShadow)?.options.useShadow;
           if (shadowMode && !this.shadowRoot) {
             const mode = shadowMode === true ? 'open' : shadowMode;
             this.attachShadow({mode: mode as ShadowRootMode});
           }
 
-          const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
-          if (bMethods) {
-            for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m, helperHostSet);
-          }
-          (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
-
-          if (connectedInnerHtmlList.length > 0) {
+          if (targetConnectedInnerHtmlList.length > 0) {
             let sContent = '',
               lContent = '';
-            for (const meta of connectedInnerHtmlList) {
+            for (const meta of targetConnectedInnerHtmlList) {
               // const res = (this as any)[meta.propertyKey]();
               let res = await (this as any)._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
               const actionExpression = new ActionExpression(res, {
                 expression: {
                   replace: {
-                    start: meta.options.replaceWrap?.start || '{%{',
-                    end: meta.options.replaceWrap?.end || '}%}'
+                    start: meta.options.replaceWrap?.start || '[[',
+                    end: meta.options.replaceWrap?.end || ']]'
                   },
                   callReturn: {
-                    start: meta.options.replaceWrap?.start || '{%{=',
-                    end: meta.options.replaceWrap?.end || '}%}'
+                    start: meta.options.replaceWrap?.start || '[[=',
+                    end: meta.options.replaceWrap?.end || ']]'
                   },
                   call: {
-                    start: meta.options.replaceWrap?.start || '{%{@',
-                    end: meta.options.replaceWrap?.end || '}%}'
+                    start: meta.options.replaceWrap?.start || '[[@',
+                    end: meta.options.replaceWrap?.end || ']]'
                   }
                 }
               });
 
               actionExpression.getExpressions().filter(it => it.type === 'replace').forEach(it => {
-                try {
-                  // const helperHostSet22 = SwcUtils.getHelperAndHostSet(win, this as any);
-                  const sr = FunctionUtils.executeReturn({script: it.script, context: this, args: helperHostSet});
-                  actionExpression.replace(it, sr);
-                } catch (e) {
-                  console.error(`[SWC] Failed to execute connectedInnerHTML:`, e);
-                }
+                actionExpression.replace(it, NodeSlot.slot(`${this._swcId}-${it.script}`));
+                // try {
+                //   const sr = FunctionUtils.executeReturn({script: it.script, context: this, args: helperHostSet});
+                //   actionExpression.replace(it, sr);
+                // } catch (e) {
+                //   console.error(`[SWC] Failed to execute connectedInnerHTML:`, e);
+                // }
               });
               res = actionExpression.getUnprocessedTemplate();
 
@@ -534,9 +550,12 @@ export const elementDefine =
 
           if (originalConnected) await (originalConnected.apply(this));
 
-          const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+          const aMethods = getOnConnectedAfterMetadata(this).filter(it => {
+            return useSsr ? !it.options.ssrFirst : true;
+          });
+          // console.log('afterConnected', this.tagName, aMethods,  getOnConnectedAfterMetadata(this))
           if (aMethods) {
-            for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m, helperHostSet);
+            for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           }
           (this as any)._executeSwcScript('swc-on-connected', helperHostSet);
           (this as any)._executeSwcScript('swc-on-after-connected', helperHostSet);
@@ -554,6 +573,9 @@ export const elementDefine =
             }
           }
         } finally {
+          for (let mPropertyKey of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) {
+            await (this as any)._invokeLifecycleMethod(mPropertyKey, helperHostSet);
+          }
           if (appHost && typeof (appHost as any)._connectedDone === 'function') {
             await (appHost as any)._connectedDone(this);
           }
@@ -564,7 +586,7 @@ export const elementDefine =
       proto.disconnectedCallback = function () {
         // const helperHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
         // Remove from appHost LAST when disconnected
-        console.log('disconnnnnnnnnnnnnnnnnnn', helperHostSet, this)
+        // console.log('disconnnnnnnnnnnnnnnnnnn', helperHostSet, this)
         const appHost = helperHostSet.$appHost;
         if (appHost && typeof (appHost as any)._disconnected === 'function') {
           (appHost as any)._disconnected(this);

package/src/decorators/index.ts

@@ -14,3 +14,4 @@ export * from './setProperty';
 export * from './subscribeSwcAppRouteChangeWhileConnected';
 export * from './subscribeSwcAppMessageWhileConnected';
 export * from './publishSwcAppMessage';
+export * from './applySlot';