assign-gingerly 0.0.65 → 0.0.66

package/handlers/addEventListener.js

@@ -0,0 +1,153 @@
+/**
+ * handlers/addEventListener.ts — Event binding handler for += operator.
+ *
+ * Dynamically imported when assignGingerly/assignFrom detects an += with
+ * an object RHS containing an `on` property on a DOM Element LHS.
+ *
+ * Attaches an event listener that executes assign vectors on event fire.
+ */
+import assignGingerly from '../assignGingerly.js';
+/**
+ * WeakMap for dedup: Element → Map<key, AbortController>
+ */
+const keyMap = new WeakMap();
+/**
+ * Reserved keys that are not shorthand assign patterns.
+ */
+const RESERVED_KEYS = new Set([
+    'on', 'get', 'fromLHS', 'fromHost', 'fromEvent', 'fromTarget',
+    'toTarget', 'toHost', 'toLHS', 'withOptions', 'toTargetOptions',
+    'toHostOptions', 'toLHSOptions', 'dispatch', 'nudge'
+]);
+/**
+ * Extract shorthand keys (implicit toHost) from a vector config.
+ * Any key not in RESERVED_KEYS that starts with '?.' or contains an operator is shorthand.
+ */
+function extractShorthand(config) {
+    const shorthand = {};
+    let hasAny = false;
+    for (const key of Object.keys(config)) {
+        if (!RESERVED_KEYS.has(key)) {
+            shorthand[key] = config[key];
+            hasAny = true;
+        }
+    }
+    return hasAny ? shorthand : null;
+}
+/**
+ * Process a single AssignDispatchVector — execute all toTarget/toHost/toLHS assignments.
+ */
+function processVector(vector, source, target, host, lhs, inheritedOptions, useAssignFrom) {
+    const destinations = [
+        { key: 'toTarget', dest: target },
+        { key: 'toHost', dest: host },
+        { key: 'toLHS', dest: lhs },
+    ];
+    for (const { key, dest } of destinations) {
+        const pattern = vector[key];
+        if (!pattern || Object.keys(pattern).length === 0)
+            continue;
+        if (useAssignFrom && source != null) {
+            // Dynamic import assignFrom on demand (fire-and-forget context, already async)
+            import('../assignFrom.js').then(({ assignFrom }) => {
+                assignFrom(dest, pattern, { from: source, ...inheritedOptions, ...vector.withOptions });
+            });
+        }
+        else {
+            assignGingerly(dest, pattern, inheritedOptions);
+        }
+    }
+    // Handle shorthand (implicit toHost)
+    const shorthand = extractShorthand(vector);
+    if (shorthand) {
+        if (useAssignFrom && source != null) {
+            import('../assignFrom.js').then(({ assignFrom }) => {
+                assignFrom(host, shorthand, { from: source, ...inheritedOptions, ...vector.withOptions });
+            });
+        }
+        else {
+            assignGingerly(host, shorthand, inheritedOptions);
+        }
+    }
+}
+/**
+ * Attach an event listener based on AddEventListenerConfig.
+ *
+ * @param lhs - The DOM element to attach the listener to
+ * @param config - The event handler configuration
+ * @param target - The assignFrom target (first arg)
+ * @param host - The options.from (source/view model)
+ * @param inheritedOptions - Parent assignFrom options (withMethods, aka, etc.)
+ */
+export function attachEventListener(lhs, config, target, host, inheritedOptions) {
+    const { on: eventName, get: getConfig, fromLHS, fromHost, fromTarget, fromEvent, dispatch } = config;
+    // Resolve get config values
+    const { abortController, key, nudge, options: listenerOptions, stopPropagation, preventDefault, dispatch: getDispatch } = getConfig ?? {};
+    // Handle dedup via key
+    let controller;
+    if (key) {
+        let elMap = keyMap.get(lhs);
+        if (!elMap) {
+            elMap = new Map();
+            keyMap.set(lhs, elMap);
+        }
+        // Abort previous listener with same key
+        const prev = elMap.get(key);
+        if (prev)
+            prev.abort();
+        // Create new controller for this key
+        controller = new AbortController();
+        elMap.set(key, controller);
+    }
+    else if (abortController instanceof AbortController) {
+        controller = abortController;
+    }
+    else {
+        controller = new AbortController();
+    }
+    // Attach the listener
+    lhs.addEventListener(eventName, (event) => {
+        if (stopPropagation)
+            event.stopPropagation();
+        if (preventDefault)
+            event.preventDefault();
+        // Static assignments (no from) — top-level toTarget/toHost/toLHS + shorthand
+        processVector(config, null, target, host, lhs, inheritedOptions, false);
+        // fromLHS assignments
+        if (fromLHS) {
+            processVector(fromLHS, lhs, target, host, lhs, inheritedOptions, true);
+        }
+        // fromHost assignments
+        if (fromHost) {
+            processVector(fromHost, host, target, host, lhs, inheritedOptions, true);
+        }
+        // fromTarget assignments
+        if (fromTarget) {
+            processVector(fromTarget, target, target, host, lhs, inheritedOptions, true);
+        }
+        // fromEvent assignments
+        if (fromEvent) {
+            processVector(fromEvent, event, target, host, lhs, inheritedOptions, true);
+        }
+        // Dispatch custom event if configured
+        const dispatchConfig = dispatch || getDispatch;
+        if (dispatchConfig && dispatchConfig.type) {
+            const EventCtr = (typeof dispatchConfig.eventCtr === 'function'
+                ? dispatchConfig.eventCtr
+                : CustomEvent);
+            const evt = new EventCtr(dispatchConfig.type, {
+                detail: dispatchConfig.detail,
+                bubbles: dispatchConfig.bubbles ?? true,
+                cancelable: dispatchConfig.cancelable ?? false,
+                composed: dispatchConfig.composed ?? true,
+            });
+            lhs.dispatchEvent(evt);
+        }
+    }, { signal: controller.signal, ...listenerOptions });
+    // Nudge: remove disabled, add interaction hints
+    if (nudge) {
+        import('./nudge.js').then(({ nudge: nudgeFn }) => {
+            nudgeFn(lhs);
+        });
+    }
+}

package/handlers/addEventListener.ts

@@ -0,0 +1,178 @@
+/**
+ * handlers/addEventListener.ts — Event binding handler for += operator.
+ * 
+ * Dynamically imported when assignGingerly/assignFrom detects an += with
+ * an object RHS containing an `on` property on a DOM Element LHS.
+ * 
+ * Attaches an event listener that executes assign vectors on event fire.
+ */
+
+import assignGingerly from '../assignGingerly.js';
+import type { AddEventListenerConfig, AssignDispatchVector } from '../types/assign-gingerly/types.js';
+
+/**
+ * WeakMap for dedup: Element → Map<key, AbortController>
+ */
+const keyMap = new WeakMap<Element, Map<string, AbortController>>();
+
+/**
+ * Reserved keys that are not shorthand assign patterns.
+ */
+const RESERVED_KEYS = new Set([
+    'on', 'get', 'fromLHS', 'fromHost', 'fromEvent', 'fromTarget',
+    'toTarget', 'toHost', 'toLHS', 'withOptions', 'toTargetOptions',
+    'toHostOptions', 'toLHSOptions', 'dispatch', 'nudge'
+]);
+
+/**
+ * Extract shorthand keys (implicit toHost) from a vector config.
+ * Any key not in RESERVED_KEYS that starts with '?.' or contains an operator is shorthand.
+ */
+function extractShorthand(config: Record<string, any>): Record<string, any> | null {
+    const shorthand: Record<string, any> = {};
+    let hasAny = false;
+    for (const key of Object.keys(config)) {
+        if (!RESERVED_KEYS.has(key)) {
+            shorthand[key] = config[key];
+            hasAny = true;
+        }
+    }
+    return hasAny ? shorthand : null;
+}
+
+/**
+ * Process a single AssignDispatchVector — execute all toTarget/toHost/toLHS assignments.
+ */
+function processVector(
+    vector: AssignDispatchVector,
+    source: any,
+    target: any,
+    host: any,
+    lhs: Element,
+    inheritedOptions: any,
+    useAssignFrom: boolean
+): void {
+    const destinations = [
+        { key: 'toTarget' as const, dest: target },
+        { key: 'toHost' as const, dest: host },
+        { key: 'toLHS' as const, dest: lhs },
+    ];
+
+    for (const { key, dest } of destinations) {
+        const pattern = vector[key];
+        if (!pattern || Object.keys(pattern).length === 0) continue;
+        if (useAssignFrom && source != null) {
+            // Dynamic import assignFrom on demand (fire-and-forget context, already async)
+            import('../assignFrom.js').then(({ assignFrom }) => {
+                assignFrom(dest, pattern, { from: source, ...inheritedOptions, ...vector.withOptions });
+            });
+        } else {
+            assignGingerly(dest, pattern, inheritedOptions);
+        }
+    }
+
+    // Handle shorthand (implicit toHost)
+    const shorthand = extractShorthand(vector as Record<string, any>);
+    if (shorthand) {
+        if (useAssignFrom && source != null) {
+            import('../assignFrom.js').then(({ assignFrom }) => {
+                assignFrom(host, shorthand, { from: source, ...inheritedOptions, ...vector.withOptions });
+            });
+        } else {
+            assignGingerly(host, shorthand, inheritedOptions);
+        }
+    }
+}
+
+/**
+ * Attach an event listener based on AddEventListenerConfig.
+ * 
+ * @param lhs - The DOM element to attach the listener to
+ * @param config - The event handler configuration
+ * @param target - The assignFrom target (first arg)
+ * @param host - The options.from (source/view model)
+ * @param inheritedOptions - Parent assignFrom options (withMethods, aka, etc.)
+ */
+export function attachEventListener(
+    lhs: Element,
+    config: AddEventListenerConfig,
+    target: any,
+    host: any,
+    inheritedOptions: any
+): void {
+    const { on: eventName, get: getConfig, fromLHS, fromHost, fromTarget, fromEvent, dispatch } = config;
+
+    // Resolve get config values
+    const { abortController, key, nudge, options: listenerOptions, stopPropagation, preventDefault, dispatch: getDispatch } = getConfig ?? {} as any;
+
+    // Handle dedup via key
+    let controller: AbortController;
+    if (key) {
+        let elMap = keyMap.get(lhs);
+        if (!elMap) {
+            elMap = new Map();
+            keyMap.set(lhs, elMap);
+        }
+        // Abort previous listener with same key
+        const prev = elMap.get(key);
+        if (prev) prev.abort();
+        // Create new controller for this key
+        controller = new AbortController();
+        elMap.set(key, controller);
+    } else if (abortController instanceof AbortController) {
+        controller = abortController;
+    } else {
+        controller = new AbortController();
+    }
+
+    // Attach the listener
+    lhs.addEventListener(eventName, (event: Event) => {
+        if (stopPropagation) event.stopPropagation();
+        if (preventDefault) event.preventDefault();
+
+        // Static assignments (no from) — top-level toTarget/toHost/toLHS + shorthand
+        processVector(config, null, target, host, lhs, inheritedOptions, false);
+
+        // fromLHS assignments
+        if (fromLHS) {
+            processVector(fromLHS, lhs, target, host, lhs, inheritedOptions, true);
+        }
+
+        // fromHost assignments
+        if (fromHost) {
+            processVector(fromHost, host, target, host, lhs, inheritedOptions, true);
+        }
+
+        // fromTarget assignments
+        if (fromTarget) {
+            processVector(fromTarget, target, target, host, lhs, inheritedOptions, true);
+        }
+
+        // fromEvent assignments
+        if (fromEvent) {
+            processVector(fromEvent, event, target, host, lhs, inheritedOptions, true);
+        }
+
+        // Dispatch custom event if configured
+        const dispatchConfig = dispatch || getDispatch;
+        if (dispatchConfig && dispatchConfig.type) {
+            const EventCtr = (typeof dispatchConfig.eventCtr === 'function' 
+                ? dispatchConfig.eventCtr 
+                : CustomEvent) as typeof CustomEvent;
+            const evt = new EventCtr(dispatchConfig.type, {
+                detail: dispatchConfig.detail,
+                bubbles: dispatchConfig.bubbles ?? true,
+                cancelable: dispatchConfig.cancelable ?? false,
+                composed: dispatchConfig.composed ?? true,
+            });
+            lhs.dispatchEvent(evt);
+        }
+    }, { signal: controller.signal, ...listenerOptions });
+
+    // Nudge: remove disabled, add interaction hints
+    if (nudge) {
+        import('./nudge.js').then(({ nudge: nudgeFn }) => {
+            nudgeFn(lhs);
+        });
+    }
+}

package/handlers/lazyLoad.js

@@ -217,10 +217,10 @@ export class LazyLoadHandler {
             const len = Math.min(elements.length, assign.configs.length);
             for (let j = 0; j < len; j++) {
                 const cfg = assign.configs[j];
-                assignFrom(elements[j], cfg.assignToFragment ?? {}, { from, ...cfg.withOptions });
+                assignFrom(elements[j], cfg.toClone ?? {}, { from, ...cfg.withOptions });
             }
-        } else if (assign.assignToFragment) {
-            assignFrom(elements[0], assign.assignToFragment, { from, ...assign.withOptions });
+        } else if (assign.toClone) {
+            assignFrom(elements[0], assign.toClone, { from, ...assign.withOptions });
         }
     }
     async onCloneInserted(nodes, lhsTarget, resolvedParams) {

package/handlers/lazyLoad.ts

@@ -317,10 +317,10 @@ export class LazyLoadHandler implements AssignFromHandler {
             const len = Math.min(elements.length, assign.configs.length);
             for (let j = 0; j < len; j++) {
                 const cfg = assign.configs[j];
-                assignFrom(elements[j], cfg.assignToFragment ?? {}, { from, ...cfg.withOptions });
+                assignFrom(elements[j], cfg.toClone ?? {}, { from, ...cfg.withOptions });
             }
-        } else if (assign.assignToFragment) {
-            assignFrom(elements[0], assign.assignToFragment, { from, ...assign.withOptions });
+        } else if (assign.toClone) {
+            assignFrom(elements[0], assign.toClone, { from, ...assign.withOptions });
         }
     }
 

package/handlers/manageTemplateList.js

@@ -17,7 +17,7 @@
  *             instantiate: 'globalThis://country-ranking',
  *         },
  *         fromEachItem: {
- *             assignToFragment: { '?.querySelector?.tr?.ish': '?.' },
+ *             '?.querySelector?.tr?.ish': '?.',
  *             withOptions: { withMethods: ['querySelector'], infer: true },
  *             resolve: { key: '?.rank' }
  *         }
@@ -28,6 +28,24 @@ import { findMarkers, createMarkers } from '../markerUtils.js';
 import { resolveValue } from '../resolveValues.js';
 import { assignFrom } from '../assignFrom.js';
 import { processInferredAssignments } from '../inferredAssignments.js';
+/**
+ * Reserved keys in fromEachItem config — not treated as shorthand patterns.
+ */
+const RESERVED_KEYS = new Set(['toClone', 'withOptions', 'resolve', 'get', 'configs']);
+/**
+ * Extract shorthand patterns from fromEachItem config (non-reserved keys → toClone).
+ */
+function extractToClone(config) {
+    if (!config)
+        return {};
+    const result = {};
+    for (const key of Object.keys(config)) {
+        if (!RESERVED_KEYS.has(key)) {
+            result[key] = config[key];
+        }
+    }
+    return result;
+}
 const listStateMap = new WeakMap();
 /**
  * ManageTemplateListHandler — clones a template per iterable item with keyed reconciliation.
@@ -46,20 +64,23 @@ export class ManageTemplateListHandler {
         if (!items || typeof items[Symbol.iterator] !== 'function') {
             return; // Nothing to iterate
         }
-        const fromEachItem = this.config.fromEachItem;
+        const { fromEachItem, fromHost: fromHostConfig, fromTarget: fromTargetConfig } = this.config;
         const configs = fromEachItem?.configs; // Array form for multi-element templates
-        const assignToFragment = fromEachItem?.assignToFragment ?? {};
         const withOptions = fromEachItem?.withOptions ?? {};
-        const perItemResolve = fromEachItem?.resolve ?? {};
-        const keyPath = perItemResolve.key; // e.g., '?.rank'
-        // fromSource config — assigns from the outer `from` (parent VM) to each clone
-        const fromSource = this.config.fromSource;
-        const sourceAssignToFragment = fromSource?.assignToFragment;
-        const sourceWithOptions = fromSource?.withOptions ?? {};
-        // Detect fast path: no assignToFragment patterns, just infer (only for non-configs mode)
-        const hasAssignPatterns = !configs && Object.keys(assignToFragment).length > 0;
+        const perItemResolve = fromEachItem?.resolve ?? fromEachItem?.get ?? {};
+        const { key: keyPath } = perItemResolve; // e.g., '?.rank'
+        // Resolve toClone patterns: explicit `toClone` key, or shorthand (non-reserved keys)
+        const toClone = fromEachItem?.toClone ?? extractToClone(fromEachItem);
+        // fromHost config — assigns from options.from (host/VM) to each clone
+        const hostToClone = fromHostConfig ? (fromHostConfig.toClone ?? extractToClone(fromHostConfig)) : undefined;
+        const hostWithOptions = fromHostConfig?.withOptions ?? {};
+        // fromTarget config — assigns from the target element to each clone
+        const targetToClone = fromTargetConfig ? (fromTargetConfig.toClone ?? extractToClone(fromTargetConfig)) : undefined;
+        const targetWithOptions = fromTargetConfig?.withOptions ?? {};
+        // Detect fast path: no toClone patterns, just infer (only for non-configs mode)
+        const hasAssignPatterns = !configs && Object.keys(toClone).length > 0;
         const inferredConfig = !configs && withOptions.infer;
-        const useFastPath = !configs && !hasAssignPatterns && inferredConfig && !sourceAssignToFragment;
+        const useFastPath = !configs && !hasAssignPatterns && inferredConfig && !hostToClone && !targetToClone;
         const name = markerName ?? getMarkerName(instantiate) ?? 'templateList';
         // Find or create markers
         let [startMarker, endMarker] = findMarkers(lhsTarget, name);
@@ -122,7 +143,7 @@ export class ManageTemplateListHandler {
                     const len = Math.min(elements.length, configs.length);
                     for (let j = 0; j < len; j++) {
                         const cfg = configs[j];
-                        assignFrom(elements[j], cfg.assignToFragment ?? {}, { from: item, ...cfg.withOptions });
+                        assignFrom(elements[j], cfg.toClone ?? {}, { from: item, ...cfg.withOptions });
                     }
                 }
                 else {
@@ -132,10 +153,13 @@ export class ManageTemplateListHandler {
                             processInferred(rootEl, item, inferredConfig === true ? { byItemprop: true } : inferredConfig);
                         }
                         else {
-                            assignFrom(rootEl, assignToFragment, { from: item, ...withOptions });
+                            assignFrom(rootEl, toClone, { from: item, ...withOptions });
                         }
-                        if (sourceAssignToFragment && options?.from) {
-                            assignFrom(rootEl, sourceAssignToFragment, { from: options.from, ...sourceWithOptions });
+                        if (hostToClone && options?.from) {
+                            assignFrom(rootEl, hostToClone, { from: options.from, ...hostWithOptions });
+                        }
+                        if (targetToClone) {
+                            assignFrom(rootEl, targetToClone, { from: lhsTarget, ...targetWithOptions });
                         }
                     }
                 }
@@ -168,7 +192,7 @@ export class ManageTemplateListHandler {
                     const len = Math.min(elements.length, configs.length);
                     for (let j = 0; j < len; j++) {
                         const cfg = configs[j];
-                        assignFrom(elements[j], cfg.assignToFragment ?? {}, { from: item, ...cfg.withOptions });
+                        assignFrom(elements[j], cfg.toClone ?? {}, { from: item, ...cfg.withOptions });
                     }
                 }
                 else {
@@ -180,10 +204,13 @@ export class ManageTemplateListHandler {
                             processInferred(rootEl, item, inferredConfig === true ? { byItemprop: true } : inferredConfig);
                         }
                         else {
-                            assignFrom(rootEl, assignToFragment, { from: item, ...withOptions });
+                            assignFrom(rootEl, toClone, { from: item, ...withOptions });
+                        }
+                        if (hostToClone && options?.from) {
+                            assignFrom(rootEl, hostToClone, { from: options.from, ...hostWithOptions });
                         }
-                        if (sourceAssignToFragment && options?.from) {
-                            assignFrom(rootEl, sourceAssignToFragment, { from: options.from, ...sourceWithOptions });
+                        if (targetToClone) {
+                            assignFrom(rootEl, targetToClone, { from: lhsTarget, ...targetWithOptions });
                         }
                     }
                 }

package/handlers/manageTemplateList.ts

@@ -17,7 +17,7 @@
  *             instantiate: 'globalThis://country-ranking',
  *         },
  *         fromEachItem: {
- *             assignToFragment: { '?.querySelector?.tr?.ish': '?.' },
+ *             '?.querySelector?.tr?.ish': '?.',
  *             withOptions: { withMethods: ['querySelector'], infer: true },
  *             resolve: { key: '?.rank' }
  *         }
@@ -32,6 +32,25 @@ import { resolveValue } from '../resolveValues.js';
 import { assignFrom } from '../assignFrom.js';
 import { processInferredAssignments } from '../inferredAssignments.js';
 
+/**
+ * Reserved keys in fromEachItem config — not treated as shorthand patterns.
+ */
+const RESERVED_KEYS = new Set(['toClone', 'withOptions', 'resolve', 'get', 'configs']);
+
+/**
+ * Extract shorthand patterns from fromEachItem config (non-reserved keys → toClone).
+ */
+function extractToClone(config: any): Record<string, any> {
+    if (!config) return {};
+    const result: Record<string, any> = {};
+    for (const key of Object.keys(config)) {
+        if (!RESERVED_KEYS.has(key)) {
+            result[key] = config[key];
+        }
+    }
+    return result;
+}
+
 /**
  * State stored per list instance (keyed by start marker).
  * Tracks the mapping of keys to their cloned DOM nodes.
@@ -74,22 +93,27 @@ export class ManageTemplateListHandler implements AssignFromHandler {
             return; // Nothing to iterate
         }
 
-        const fromEachItem = this.config.fromEachItem;
+        const { fromEachItem, fromHost: fromHostConfig, fromTarget: fromTargetConfig } = this.config;
         const configs = fromEachItem?.configs; // Array form for multi-element templates
-        const assignToFragment = fromEachItem?.assignToFragment ?? {};
         const withOptions = fromEachItem?.withOptions ?? {};
-        const perItemResolve = fromEachItem?.resolve ?? {};
-        const keyPath = perItemResolve.key; // e.g., '?.rank'
+        const perItemResolve = fromEachItem?.resolve ?? fromEachItem?.get ?? {};
+        const { key: keyPath } = perItemResolve; // e.g., '?.rank'
+
+        // Resolve toClone patterns: explicit `toClone` key, or shorthand (non-reserved keys)
+        const toClone = fromEachItem?.toClone ?? extractToClone(fromEachItem);
 
-        // fromSource config — assigns from the outer `from` (parent VM) to each clone
-        const fromSource = this.config.fromSource;
-        const sourceAssignToFragment = fromSource?.assignToFragment;
-        const sourceWithOptions = fromSource?.withOptions ?? {};
+        // fromHost config — assigns from options.from (host/VM) to each clone
+        const hostToClone = fromHostConfig ? (fromHostConfig.toClone ?? extractToClone(fromHostConfig)) : undefined;
+        const hostWithOptions = fromHostConfig?.withOptions ?? {};
 
-        // Detect fast path: no assignToFragment patterns, just infer (only for non-configs mode)
-        const hasAssignPatterns = !configs && Object.keys(assignToFragment).length > 0;
+        // fromTarget config — assigns from the target element to each clone
+        const targetToClone = fromTargetConfig ? (fromTargetConfig.toClone ?? extractToClone(fromTargetConfig)) : undefined;
+        const targetWithOptions = fromTargetConfig?.withOptions ?? {};
+
+        // Detect fast path: no toClone patterns, just infer (only for non-configs mode)
+        const hasAssignPatterns = !configs && Object.keys(toClone).length > 0;
         const inferredConfig = !configs && withOptions.infer;
-        const useFastPath = !configs && !hasAssignPatterns && inferredConfig && !sourceAssignToFragment;
+        const useFastPath = !configs && !hasAssignPatterns && inferredConfig && !hostToClone && !targetToClone;
 
         const name = markerName ?? getMarkerName(instantiate) ?? 'templateList';
 
@@ -159,7 +183,7 @@ export class ManageTemplateListHandler implements AssignFromHandler {
                     const len = Math.min(elements.length, configs.length);
                     for (let j = 0; j < len; j++) {
                         const cfg = configs[j];
-                        assignFrom(elements[j], cfg.assignToFragment ?? {}, { from: item, ...cfg.withOptions });
+                        assignFrom(elements[j], cfg.toClone ?? {}, { from: item, ...cfg.withOptions });
                     }
                 } else {
                     const rootEl = existingNodes.find(n => n instanceof Element) as Element | undefined;
@@ -167,10 +191,13 @@ export class ManageTemplateListHandler implements AssignFromHandler {
                         if (processInferred) {
                             processInferred(rootEl, item, inferredConfig === true ? { byItemprop: true } : inferredConfig);
                         } else {
-                            assignFrom(rootEl, assignToFragment, { from: item, ...withOptions });
+                            assignFrom(rootEl, toClone, { from: item, ...withOptions });
+                        }
+                        if (hostToClone && options?.from) {
+                            assignFrom(rootEl, hostToClone, { from: options.from, ...hostWithOptions });
                         }
-                        if (sourceAssignToFragment && options?.from) {
-                            assignFrom(rootEl, sourceAssignToFragment, { from: options.from, ...sourceWithOptions });
+                        if (targetToClone) {
+                            assignFrom(rootEl, targetToClone, { from: lhsTarget, ...targetWithOptions });
                         }
                     }
                 }
@@ -201,7 +228,7 @@ export class ManageTemplateListHandler implements AssignFromHandler {
                     const len = Math.min(elements.length, configs.length);
                     for (let j = 0; j < len; j++) {
                         const cfg = configs[j];
-                        assignFrom(elements[j], cfg.assignToFragment ?? {}, { from: item, ...cfg.withOptions });
+                        assignFrom(elements[j], cfg.toClone ?? {}, { from: item, ...cfg.withOptions });
                     }
                 } else {
                     const rootEl = clonedNodes.find(n => n instanceof Element) as Element | undefined;
@@ -212,11 +239,14 @@ export class ManageTemplateListHandler implements AssignFromHandler {
                         if (processInferred) {
                             processInferred(rootEl, item, inferredConfig === true ? { byItemprop: true } : inferredConfig);
                         } else {
-                            assignFrom(rootEl, assignToFragment, { from: item, ...withOptions });
+                            assignFrom(rootEl, toClone, { from: item, ...withOptions });
                         }
 
-                        if (sourceAssignToFragment && options?.from) {
-                            assignFrom(rootEl, sourceAssignToFragment, { from: options.from, ...sourceWithOptions });
+                        if (hostToClone && options?.from) {
+                            assignFrom(rootEl, hostToClone, { from: options.from, ...hostWithOptions });
+                        }
+                        if (targetToClone) {
+                            assignFrom(rootEl, targetToClone, { from: lhsTarget, ...targetWithOptions });
                         }
                     }
                 }