@dooboostore/simple-web-component 1.0.44 → 1.0.46

package/src/decorators/applyNode.ts

@@ -15,6 +15,8 @@ import {ElementApply} from "@dooboostore/core-web";
  */
 export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove' | 'clearChildren';
 
+export type ApplyNodeSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface ApplyNodeOptions {
   position?: ApplyNodePosition;
   root?: SwcRootType;
@@ -37,12 +39,39 @@ export interface ApplyNodeOptions {
 
 export interface ApplyNodeMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: ApplyNodeSelector;
   options: ApplyNodeOptions;
 }
 
 export const APPLY_NODE_METADATA_KEY = Symbol.for('simple-web-component:apply-node');
 
+/**
+ * Resolve selector to string or elements
+ * Handles function-based selectors and returns elements if applicable
+ */
+const resolveSelector = (selector: ApplyNodeSelector, inst: any, win: Window): string | HTMLElement | null => {
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    
+    if (result instanceof win.Element) {
+      return result as HTMLElement;
+    }
+    if (result instanceof win.NodeList) {
+      return result.length > 0 ? (result[0] as HTMLElement) : null;
+    }
+    if (Array.isArray(result)) {
+      return result.length > 0 ? (result[0] as HTMLElement) : null;
+    }
+    if (result === null) {
+      return null;
+    }
+    // result must be a string at this point
+    return result as unknown as string;
+  }
+  return selector as string;
+};
+
 // const normalizeNodes = (res: any, doc: Document): Node[] => {
 //   const items = Array.isArray(res) ? res : [res];
 //   return items.map(it => {
@@ -66,7 +95,9 @@ const applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string,
 
   const nodes: Node[] = [];
 
-  if (typeof res === 'string' && pos === 'innerHtml') {
+  if (res instanceof win.Node) {
+    nodes.push(res);
+  } else if (typeof res === 'string' && pos === 'innerHtml') {
     const t = win.document.createElement('template');
     t.innerHTML = res;
     nodes.push(...Array.from(t.content.childNodes));
@@ -110,14 +141,14 @@ const applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string,
  * - applyNode(selector, options) - Apply to specific selector
  * - applyNode(options) - Apply to $this (current element)
  */
-export function applyNode(selector: string, options?: ApplyNodeOptions): MethodDecorator;
+export function applyNode(selector: ApplyNodeSelector, options?: ApplyNodeOptions): MethodDecorator;
 export function applyNode(options: ApplyNodeOptions): MethodDecorator;
-export function applyNode(selectorOrOptions: string | ApplyNodeOptions, maybeOptions?: ApplyNodeOptions): MethodDecorator {
+export function applyNode(selectorOrOptions: ApplyNodeSelector | ApplyNodeOptions, maybeOptions?: ApplyNodeOptions): MethodDecorator {
   // Determine selector and options based on overload
-  let selector: string;
+  let selector: ApplyNodeSelector;
   let options: ApplyNodeOptions;
 
-  if (typeof selectorOrOptions === 'string') {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
     // First overload: applyNode(selector, options)
     selector = selectorOrOptions;
     options = maybeOptions || {position: 'replaceChildren'};
@@ -156,15 +187,29 @@ export function applyNode(selectorOrOptions: string | ApplyNodeOptions, maybeOpt
           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);
+        // Resolve selector if it's a function
+        const resolved = resolveSelector(selector, this, currentWin);
+        
+        // If selector function returned an element directly, use it
+        if (resolved instanceof currentWin.Element) {
+          return applyRoot(resolved);
+        }
+        if (resolved === null) {
+          return null;
+        }
+
+        // Handle string selector
+        const stringSelector = resolved as string;
+
+        if (stringSelector === '$this') return applyRoot(this);
+        if (stringSelector === '$host') return applyRoot(hostSet.$host);
+        if (stringSelector === '$parentHost') return applyRoot(hostSet.$parentHost);
+        if (stringSelector === '$appHost') return applyRoot(hostSet.$appHost);
+        if (stringSelector === '$firstHost') return applyRoot(hostSet.$firstHost);
+        if (stringSelector === '$lastHost') return applyRoot(hostSet.$lastHost);
 
         const targetRoot = applyRoot(this);
-        return targetRoot ? targetRoot.querySelector(selector) : null;
+        return targetRoot ? targetRoot.querySelector(stringSelector) : null;
       };
 
       const targetEl = getTarget();
@@ -233,17 +278,17 @@ export function applyNode(selectorOrOptions: string | ApplyNodeOptions, maybeOpt
  * - replaceChildrenNode(options) - Replace children of $this (current element)
  * - @replaceChildrenNode - Bare decorator, replaces children of $this
  */
-export function replaceChildren(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function replaceChildren(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function replaceChildren(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function replaceChildren(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function replaceChildren(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function replaceChildren(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @replaceChildrenNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'replaceChildren'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'replaceChildren'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'replaceChildren'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'replaceChildren'});
 }
@@ -256,17 +301,17 @@ export function replaceChildren(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - clearChildrenNode(options) - Clear children of $this (current element)
  * - @clearChildrenNode - Bare decorator, clears children of $this
  */
-export function clearChildrenNode(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function clearChildrenNode(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function clearChildrenNode(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function clearChildrenNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function clearChildrenNode(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function clearChildrenNode(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @clearChildrenNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'clearChildren'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'clearChildren'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'clearChildren'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'clearChildren'});
 }
@@ -282,17 +327,17 @@ export const clearNode = clearChildrenNode;
  * - innerHtmlNode(options) - Set innerHTML of $this (current element)
  * - @innerHtmlNode - Bare decorator, sets innerHTML of $this
  */
-export function innerHtml(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function innerHtml(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerHtml(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerHtml(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerHtml(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerHtmlNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerHtml'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerHtml'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerHtml'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerHtml'});
 }
@@ -308,17 +353,17 @@ export function innerHtml(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'p
  * - innerHtmlLightNode(options) - Set innerHTML of $this in light DOM
  * - @innerHtmlLightNode - Bare decorator, sets innerHTML of $this in light DOM
  */
-export function innerHtmlLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerHtmlLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerHtmlLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerHtmlLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerHtmlLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerHtml', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'light'});
 }
@@ -332,17 +377,17 @@ export function innerHtmlLight(selectorOrOptions?: string | Omit<ApplyNodeOption
  * - innerHtmlShadowNode(options) - Set innerHTML of $this in shadow DOM
  * - @innerHtmlShadowNode - Bare decorator, sets innerHTML of $this in shadow DOM
  */
-export function innerHtmlShadow(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerHtmlShadow(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlShadow(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerHtmlShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerHtmlShadow(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerHtmlShadow(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerHtmlShadowNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerHtml', root: 'shadow'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'shadow'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'shadow'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerHtml', root: 'shadow'});
 }
@@ -356,17 +401,17 @@ export function innerHtmlShadow(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - innerTextNode(options) - Set innerText of $this (current element)
  * - @innerTextNode - Bare decorator, sets innerText of $this
  */
-export function innerText(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function innerText(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerText(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function innerText(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerText(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerText(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerTextNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerText'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerText'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerText'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'innerText'});
 }
@@ -380,17 +425,17 @@ export function innerText(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'p
  * - innerTextLightNode(options) - Set innerText of $this in light DOM
  * - @innerTextLightNode - Bare decorator, sets innerText of $this in light DOM
  */
-export function innerTextLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerTextLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerTextLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerTextLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerTextLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerText', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'light'});
 }
@@ -403,17 +448,17 @@ export function innerTextLight(selectorOrOptions?: string | Omit<ApplyNodeOption
  * - innerTextShadowNode(options) - Set innerText of $this in shadow DOM
  * - @innerTextShadowNode - Bare decorator, sets innerText of $this in shadow DOM
  */
-export function innerTextShadow(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerTextShadow(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextShadow(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function innerTextShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function innerTextShadow(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function innerTextShadow(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @innerTextShadowNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'innerText', root: 'shadow'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'shadow'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'shadow'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'innerText', root: 'shadow'});
 }
@@ -426,17 +471,17 @@ export function innerTextShadow(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - beforeEndNode(options) - Append to $this (current element)
  * - @beforeEndNode - Bare decorator, appends to $this
  */
-export function insertBeforeEnd(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function insertBeforeEnd(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertBeforeEnd(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertBeforeEnd(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertBeforeEnd(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertBeforeEnd(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @beforeEndNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'beforeEnd'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'beforeEnd'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'beforeEnd'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'beforeEnd'});
 }
@@ -450,17 +495,17 @@ export function insertBeforeEnd(selectorOrOptions?: string | Omit<ApplyNodeOptio
  * - beforeEndLightNode(options) - Append to $this in light DOM
  * - @beforeEndLightNode - Bare decorator, appends to $this in light DOM
  */
-export function insertBeforeEndLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function insertBeforeEndLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertBeforeEndLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertBeforeEndLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @beforeEndLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'beforeEnd', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'light'});
 }
@@ -474,17 +519,17 @@ export function insertBeforeEndLight(selectorOrOptions?: string | Omit<ApplyNode
  * - beforeEndShadowNode(options) - Append to $this in shadow DOM
  * - @beforeEndShadowNode - Bare decorator, appends to $this in shadow DOM
  */
-export function insertBeforeEndShadow(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function insertBeforeEndShadow(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndShadow(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertBeforeEndShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertBeforeEndShadow(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertBeforeEndShadow(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @beforeEndShadowNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'beforeEnd', root: 'shadow'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'shadow'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'shadow'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'beforeEnd', root: 'shadow'});
 }
@@ -498,17 +543,17 @@ export function insertBeforeEndShadow(selectorOrOptions?: string | Omit<ApplyNod
  * - afterBeginNode(options) - Prepend to $this (current element)
  * - @afterBeginNode - Bare decorator, prepends to $this
  */
-export function insertAfterBegin(selector: string, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function insertAfterBegin(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertAfterBegin(options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
 export function insertAfterBegin(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertAfterBegin(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertAfterBegin(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @afterBeginNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'afterBegin'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'afterBegin'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'afterBegin'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'afterBegin'});
 }
@@ -522,17 +567,17 @@ export function insertAfterBegin(selectorOrOptions?: string | Omit<ApplyNodeOpti
  * - afterBeginLightNode(options) - Prepend to $this in light DOM
  * - @afterBeginLightNode - Bare decorator, prepends to $this in light DOM
  */
-export function insertAfterBeginLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function insertAfterBeginLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertAfterBeginLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function insertAfterBeginLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function insertAfterBeginLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function insertAfterBeginLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @afterBeginLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'afterBegin', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'afterBegin', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'afterBegin', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'afterBegin', root: 'light'});
 }
@@ -546,17 +591,17 @@ export function insertAfterBeginLight(selectorOrOptions?: string | Omit<ApplyNod
  * - replaceChildrenLightNode(options) - Replace children of $this in light DOM
  * - @replaceChildrenLightNode - Bare decorator, replaces children of $this in light DOM
  */
-export function replaceChildrenLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function replaceChildrenLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function replaceChildrenLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function replaceChildrenLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function replaceChildrenLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function replaceChildrenLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @replaceChildrenLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'replaceChildren', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'replaceChildren', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'replaceChildren', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'replaceChildren', root: 'light'});
 }
@@ -569,17 +614,17 @@ export function replaceChildrenLight(selectorOrOptions?: string | Omit<ApplyNode
  * - clearChildrenLightNode(options) - Clear children of $this in light DOM
  * - @clearChildrenLightNode - Bare decorator, clears children of $this in light DOM
  */
-export function clearChildrenLight(selector: string, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function clearChildrenLight(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function clearChildrenLight(options?: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
 export function clearChildrenLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function clearChildrenLight(selectorOrOptions?: string | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+export function clearChildrenLight(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position' | 'root'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position' | 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
   // Bare decorator usage: @clearChildrenLightNode
   if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
     return applyNode({position: 'clearChildren', root: 'light'})(selectorOrOptions, maybeOptions, descriptor);
   }
   
-  if (typeof selectorOrOptions === 'string') {
-    return applyNode(selectorOrOptions, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'clearChildren', root: 'light'});
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as ApplyNodeSelector, {...maybeOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'clearChildren', root: 'light'});
   }
   return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position' | 'root'>, position: 'clearChildren', root: 'light'});
 }