assign-gingerly 0.0.56 → 0.0.57

package/handlers/lazyLoad.js

@@ -39,15 +39,27 @@ function getMarkerName(templateEl) {
  */
 export class LazyLoadHandler {
     config;
+    static #markerCounter = 0;
     constructor(config) {
         this.config = config;
     }
     async assign(lhsTarget, resolvedParams) {
-        const { if: condition, instantiate, method = 'appendChild', forget = false, transitional = false, hideClass = DEFAULT_HIDE_CLASS, markerName, toggleInert = false, toggleDisabled = false } = resolvedParams;
+        const { if: condition, instantiate, method = 'appendChild', forget = false, transitional = false, hideClass = DEFAULT_HIDE_CLASS, hideCss, markerName, toggleInert = false, toggleDisabled = false } = resolvedParams;
         if (!(lhsTarget instanceof Element)) {
             throw new Error('builtIns.lazyLoad: lhsTarget must be a DOM Element');
         }
-        const name = markerName ?? getMarkerName(instantiate) ?? (lhsTarget.id || 'anonymous');
+        let name = markerName ?? getMarkerName(instantiate) ?? (lhsTarget.id || 'anonymous');
+        if (name === 'anonymous' && method === 'after') {
+            const stored = lhsTarget.dataset?.agMarker;
+            if (stored) {
+                name = stored;
+            } else {
+                name = `_ag_${LazyLoadHandler.#markerCounter++}`;
+                if (lhsTarget.dataset) {
+                    lhsTarget.dataset.agMarker = name;
+                }
+            }
+        }
         let [startMarker, endMarker] = method === 'after'
             ? findMarkersSibling(lhsTarget, name)
             : findMarkers(lhsTarget, name);
@@ -99,7 +111,7 @@ export class LazyLoadHandler {
                 }
                 else {
                     withTransition(startMarker, 'hide', transitional, () => {
-                        this.hideNodes(nodes, lhsTarget, transitional, hideClass, toggleInert, toggleDisabled);
+                        this.hideNodes(nodes, lhsTarget, transitional, hideClass, hideCss, toggleInert, toggleDisabled);
                     });
                 }
             }
@@ -122,11 +134,11 @@ export class LazyLoadHandler {
             }
         }
     }
-    hideNodes(nodes, lhsTarget, transitional, hideClass, toggleInert, toggleDisabled) {
+    hideNodes(nodes, lhsTarget, transitional, hideClass, hideCss, toggleInert, toggleDisabled) {
         for (const node of nodes) {
             if (node instanceof Element) {
                 if (transitional) {
-                    ensureHideStyle(lhsTarget.getRootNode(), hideClass);
+                    ensureHideStyle(lhsTarget.getRootNode(), hideClass, hideCss);
                     node.classList.add(hideClass);
                 } else {
                     node.setAttribute('hidden', '');

package/handlers/lazyLoad.ts

@@ -46,6 +46,7 @@ function getMarkerName(templateEl: any): string {
  */
 export class LazyLoadHandler implements AssignFromHandler {
     config: any;
+    static #markerCounter = 0;
 
     constructor(config: any) {
         this.config = config;
@@ -59,6 +60,7 @@ export class LazyLoadHandler implements AssignFromHandler {
             forget = false,
             transitional = false,
             hideClass = DEFAULT_HIDE_CLASS,
+            hideCss,
             markerName,
             toggleInert = false,
             toggleDisabled = false,
@@ -68,7 +70,20 @@ export class LazyLoadHandler implements AssignFromHandler {
             throw new Error('builtIns.lazyLoad: lhsTarget must be a DOM Element');
         }
 
-        const name = markerName ?? getMarkerName(instantiate) ?? (lhsTarget.id || 'anonymous');
+        // Determine marker name — auto-generate for 'after' mode if would be 'anonymous'
+        let name = markerName ?? getMarkerName(instantiate) ?? (lhsTarget.id || 'anonymous');
+        if (name === 'anonymous' && method === 'after') {
+            // Check for previously stored name on the anchor
+            const stored = (lhsTarget as HTMLElement).dataset?.agMarker;
+            if (stored) {
+                name = stored;
+            } else {
+                name = `_ag_${LazyLoadHandler.#markerCounter++}`;
+                if ((lhsTarget as HTMLElement).dataset) {
+                    (lhsTarget as HTMLElement).dataset.agMarker = name;
+                }
+            }
+        }
 
         // Find or create markers based on method
         let [startMarker, endMarker] = method === 'after'
@@ -125,7 +140,7 @@ export class LazyLoadHandler implements AssignFromHandler {
                     });
                 } else {
                     withTransition(startMarker, 'hide', transitional, () => {
-                        this.hideNodes(nodes, lhsTarget, transitional, hideClass, toggleInert, toggleDisabled);
+                        this.hideNodes(nodes, lhsTarget, transitional, hideClass, hideCss, toggleInert, toggleDisabled);
                     });
                 }
             }
@@ -167,13 +182,14 @@ export class LazyLoadHandler implements AssignFromHandler {
         lhsTarget: Element,
         transitional: boolean,
         hideClass: string,
+        hideCss: string | undefined,
         toggleInert: boolean,
         toggleDisabled: boolean
     ): void {
         for (const node of nodes) {
             if (node instanceof Element) {
                 if (transitional) {
-                    ensureHideStyle(lhsTarget.getRootNode(), hideClass);
+                    ensureHideStyle(lhsTarget.getRootNode(), hideClass, hideCss);
                     node.classList.add(hideClass);
                 } else {
                     node.setAttribute('hidden', '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assign-gingerly",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "description": "This package provides a utility function for carefully merging one object into another.",
   "homepage": "https://github.com/bahrus/assign-gingerly#readme",
   "bugs": {

package/types/assign-gingerly/types.d.ts

@@ -546,6 +546,8 @@ export interface LazyLoadConfig extends HandlerConfig {
         transitional?: boolean | string;
         /** CSS class for hiding (default: 'ag-hide', only used when transitional: true) */
         hideClass?: string;
+        /** Custom CSS for the hide class (default: 'display: none') */
+        hideCss?: string;
         /** Optional async callback invoked after cloning, resolved from the VM */
         onInstantiated?: string;
         /** Override auto-derived marker name */
@@ -573,6 +575,8 @@ export interface LazyLoadResolvedParams {
     transitional?: boolean;
     /** CSS class for hiding (default: 'ag-hide', only used when transitional: true) */
     hideClass?: string;
+    /** Custom CSS for the hide class (default: 'display: none') */
+    hideCss?: string;
     /** Callback after clone+insert */
     onInstantiated?: (ctx: LazyLoadInstantiatedContext) => void | Promise<void>;
     /** Override auto-derived marker name */
@@ -597,7 +601,7 @@ export interface LazyLoadSwitchConfig extends HandlerConfig {
         rhs: string;
         /** Template element to clone (resolved via protocol or path) */
         instantiate: string;
-        /** Insert method: 'appendChild' (default) or 'prepend' */
+        /** Insert method: 'appendChild' (default), 'prepend', or 'after' */
         method?: string;
         /** If true, removes nodes when hiding instead of adding hidden attribute */
         forget?: boolean | string;
@@ -605,6 +609,8 @@ export interface LazyLoadSwitchConfig extends HandlerConfig {
         transitional?: boolean | string;
         /** CSS class for hiding (default: 'ag-hide', only used when transitional: true) */
         hideClass?: string;
+        /** Custom CSS for the hide class (default: 'display: none') */
+        hideCss?: string;
         /** Optional async callback invoked after cloning, resolved from the VM */
         onInstantiated?: string;
     };