@dooboostore/simple-web-component 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -92,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.31",
+    "@dooboostore/core": "1.0.32",
     "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/core-web": "1.0.10",
-    "@dooboostore/simple-boot": "1.0.55"
+    "@dooboostore/core-web": "1.0.12",
+    "@dooboostore/simple-boot": "1.0.56"
   },
   "scripts": {
     "clean": "rm -rf dist",

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 아직 개발중
   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;
+  onStartedLazyDefineComponent?: ((w: Window)=> Promise<CustomElementConstructor> | void | string | any | CustomElementConstructor)[];
 
   onChildrenConnectedDone?: (app: SwcAppInterface) => void;
   // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;
@@ -70,8 +75,12 @@ export class SwcAppEngine {
       if (this.router) otherInstanceSim.set(Router, this.router);
       this.simpleApplication.run(otherInstanceSim);
 
+
+      if (this._config.onStartedLazyDefineComponent) {
+        await Promise.all(this._config.onStartedLazyDefineComponent.map(it => it(this._config.window)))
+      }
       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/addEventListener.ts

@@ -8,7 +8,7 @@ export interface AddEventListenerBaseOptions extends EventListenerOptions {
   stopPropagation?: boolean;
   stopImmediatePropagation?: boolean;
   preventDefault?: boolean;
-  removeOnDisconnected?: boolean;
+  // removeOnDisconnected?: boolean;
   delegate?: boolean;
   filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;
 }
@@ -41,10 +41,20 @@ export function addEventListener(selectorOrTarget: string, type: string, options
   };
 }
 
-export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
-};
+
+export function addEventListenerDelegateLightDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'light', delegate: true});
+}
+
+export function addEventListenerDelegateShadowDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'shadow', delegate: true});
+}
+export function addEventListenerDelegateAllDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'all', delegate: true});
+}
+export function addEventListenerDelegate(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
+  return addEventListener(selector, type, {...options??{}, root:'auto', delegate: true});
+}
 
 /**
  * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector
@@ -59,9 +69,15 @@ export function addEventListenerThis(type: string, options?: AddEventListenerBas
 export function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
   return addEventListener('$appHost', type, options);
 }
+
 export function addEventListenerWindow(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
   return addEventListener('$window', type, options);
 }
 export function addEventListenerDocument(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
   return addEventListener('$document', type, options);
 }
+
+export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+};

package/src/decorators/applyAttribute.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions, HelperHostSet } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export type AttributeAction = 'set' | 'update' | 'remove';
 

package/src/decorators/applyClass.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions, HelperHostSet } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export const CLASS_METADATA_KEY = Symbol.for('simple-web-component:class');
 

package/src/decorators/applyNode.ts

@@ -1,10 +1,12 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
-import { HelperHostSet, SwcRootType } from '../types';
-import { SwcUtils } from "../utils/Utils";
+import {SpecialSelector, SwcQueryOptions, HelperHostSet, SwcRootType} from '../types';
+import { SwcUtils} from "../utils/Utils";
+import {findAllStateMetadata} from "./state";
+import {ElementApply} from "@dooboostore/core-web";
 /*
 <!-- beforebegin -->
-<p>
+<p> <-- it's me
   <!-- afterbegin -->
   foo
   <!-- beforeend -->
@@ -20,11 +22,11 @@ export interface ApplyNodeOptions {
    * 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;
+  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;
+  fallback?: (helper: HelperHostSet) => any;
 }
 
 export interface ApplyNodeMetadata {
@@ -43,39 +45,67 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
   });
 };
 
-const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, doc: Document) => {
-    if (!targetEl) return;
-    
-    if (pos === 'innerHtml') {
-        targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
-        return;
+const applyToDom = (currentThis: any, targetEl: HTMLElement, res: any, pos: ApplyNodePosition, win: Window, host?: any) => {
+  if (!targetEl) return;
+
+  // console.log('------------',currentThis.tagName, res)
+  const doc = win.document;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, currentThis);
+  const id = currentThis._swcId;
+  // Allow processHtml to run here so all DOM insertions go through a single
+  // processing point. processHtml may mutate Node[] in-place or return a
+  // transformed string result for text processing.
+  try {
+    if (typeof res === 'string') {
+      const processed = SwcUtils.projectProcessHtml(id, res as string, doc);
+      if (processed !== undefined) res = processed;
+    } else if (res) {
+      SwcUtils.projectProcessHtml(id, res, doc);
     }
-    
-    if (pos === 'innerText') {
-        if (targetEl.innerText !== undefined) {
-            targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
-        }
-        return;
+  } catch (e) {
+    // swallow and proceed with original res
+  }
+
+  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 stateContext: any = {...hostSet};
+  findAllStateMetadata(currentThis).forEach(it => {
+    stateContext[it.name] = currentThis[it.propertyKey]
+  })
+  new ElementApply(currentThis, {id: currentThis._swcId}).apply({target: 'noInitialized', context: stateContext, bind: currentThis});
 
-    const isShadowRoot = targetEl instanceof 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);
+
+  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') {
+      console.log('tarbbbbbbbbbbbbbb')
+      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 applyNode(selector: string, options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
+export function applyNode(selector: string, options: ApplyNodeOptions = {position: 'replaceChildren'}): MethodDecorator {
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = targetObj.constructor;
     let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor) as Map<string | symbol, ApplyNodeMetadata>;
@@ -83,17 +113,17 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
       metaList = new Map<string | symbol, ApplyNodeMetadata>();
       ReflectUtils.defineMetadata(APPLY_NODE_METADATA_KEY, metaList, constructor);
     }
-    metaList.set(propertyKey, { propertyKey, selector, options });
+    metaList.set(propertyKey, {propertyKey, selector, options});
 
     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) => {
@@ -111,37 +141,45 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
         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;
       };
 
+
+      console.log('fffffffffff')
       const targetEl = getTarget();
       const res = original.apply(this, args);
 
       const runApply = (target: any, val: any) => {
         const pos = options.position || 'beforeEnd';
-        
+        // Delegate HTML/node processing to applyToDom which centralizes
+        // processing. runApply should not call processHtml itself to avoid
+        // duplicate processing.
+        const processedVal = val;
+
         // 사용자가 filter를 명시하면 그 조건으로, 아니면 항상 적용
-        if (!options.filter || options.filter(target, val, {currentThis: this, helper: hostSet})) {
-            applyToDom(target, val, pos, currentDoc);
+        if (!options.filter || options.filter(target, processedVal, {currentThis: this, helper: hostSet})) {
+          applyToDom(this, target, processedVal, 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;
-          });
+        // 비동기일 때만 로딩 표시
+        if (targetEl && options.fallback) {
+          const loadingRes = options.fallback.call(this, hostSet);
+          // applyToDom expects a Window as the 4th argument
+          applyToDom(this, targetEl, loadingRes, options.position || 'beforeEnd', currentWin);
+        }
+
+        return res.then(finalRes => {
+          console.log('amnkj')
+          if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
+          return finalRes;
+        });
       } else {
-          if (res !== undefined && targetEl) runApply(targetEl, res);
-          return res;
+        if (res !== undefined && targetEl) runApply(targetEl, res);
+        return res;
       }
     };
   };
@@ -161,35 +199,117 @@ export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, Appl
 export function applyNodeThis(options: ApplyNodeOptions): MethodDecorator;
 export function applyNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function applyNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) return applyNode('$this', { position: 'beforeEnd' })(targetOrOptions, propertyKey, descriptor);
+  const option: ApplyNodeOptions = {position: 'replaceChildren'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...option, ...opt});
+}
+
+export function applyNodeThisReplaceChildren(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyNodeThisReplaceChildren(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisReplaceChildren(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'replaceChildren'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyNodeThisReplaceChildrenLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisReplaceChildrenLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisReplaceChildrenLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const options: ApplyNodeOptions = {position: 'replaceChildren', root: 'light'};
+  if (propertyKey !== undefined) return applyNode('$this', options)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode('$this', { position: 'beforeEnd', ...opt });
+  return applyNode('$this', {...opt, ...options});
 }
 
-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 {
-  if (propertyKey !== undefined) return applyNode('$this', { position: 'replaceChildren' })(targetOrOptions, propertyKey, descriptor);
+export function applyNodeThisBeforeEnd(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyNodeThisBeforeEnd(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisBeforeEnd(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const options: ApplyNodeOptions = {position: 'beforeEnd'};
+  if (propertyKey !== undefined) return applyNode('$this', options)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode('$this', { position: 'replaceChildren', ...opt });
+  return applyNode('$this', {...opt, ...options});
 }
 
-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 {
-  if (propertyKey !== undefined) return applyNode('$this', { position: 'innerHtml' })(targetOrOptions, propertyKey, descriptor);
+export function applyNodeThisBeforeEndLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisBeforeEndLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisBeforeEndLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'beforeEnd', root: 'light'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
-  return applyNode('$this', { position: 'innerHtml', ...opt });
+  return applyNode('$this', {...opt, ...option});
+}
+export function applyNodeThisBeforeEndShadow(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisBeforeEndShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisBeforeEndShadow(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'beforeEnd', root: 'shadow'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyNodeThisAfterBegin(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyNodeThisAfterBegin(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisAfterBegin(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'afterBegin'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
 }
 
-export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
-    return applyNode(selector, { ...options, position: 'replaceChildren' });
+export function applyNodeThisAfterBeginLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyNodeThisAfterBeginLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisAfterBeginLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'afterBegin', root: 'light'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
 }
 
-export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
-    return applyNode(selector, { ...options, position: 'innerHtml' });
+export function applyThisInnerHtmlNode(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyThisInnerHtmlNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyThisInnerHtmlNode(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'innerHtml'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
 }
 
-export function applyInnerTextNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
-    return applyNode(selector, { ...options, position: 'innerText' });
+export function applyThisInnerHtmlNodeLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyThisInnerHtmlNodeLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyThisInnerHtmlNodeLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'innerHtml', root: 'light'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
 }
+
+export function applyThisReplaceChildrenNodeLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function applyThisReplaceChildrenNodeLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyThisReplaceChildrenNodeLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'replaceChildren', root: 'light'};
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function applyNodeReplaceChildren(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'replaceChildren'});
+}
+
+export function applyNodeInnerHtml(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerHtml'});
+}
+
+// export function applyNodeInnerHtmlLightDom(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+//   return applyNode(selector, {...options, position: 'innerHtml', root: 'light'});
+// }
+
+export function applyNodeInnerText(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerText'});
+}
+
+// export function applyNodeInnerTextLightDom(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+//   return applyNode(selector, {...options, position: 'innerText', root: 'light'});
+// }