mount-observer 0.1.12 → 0.1.13

package/package.json

@@ -1,61 +1,67 @@
-{
-  "name": "mount-observer",
-  "version": "0.1.12",
-  "description": "Observe and act on css matches.",
-  "main": "MountObserver.js",
-  "module": "MountObserver.js",
-  "dependencies": {
-    "assign-gingerly": "0.0.18"
-  },
-  "devDependencies": {
-    "@playwright/test": "1.58.2",
-    "spa-ssi": "0.0.27"
-  },
-  "exports": {
-    ".": {
-      "default": "./index.js",
-      "types": "./index.ts"
-    },
-    "./MountObserver.js": {
-      "default": "./MountObserver.js",
-      "types": "./MountObserver.ts"
-    },
-    "./withScopePerimeter.js": {
-      "default": "./withScopePerimeter.js",
-      "types": "./withScopePerimeter.ts"
-    },
-    "./emitEvents.js": {
-      "default": "./emitEvents.js",
-      "types": "./emitEvents.ts"
-    },
-    "./arr.js": {
-      "default": "./arr.js",
-      "types": "./arr.ts"
-    },
-    "./EvtRt.js": {
-      "default": "./EvtRt.js",
-      "types": "./EvtRt.ts"
-    },
-    "./DefineCustomElementHandler.js": {
-      "default": "./DefineCustomElementHandler.js",
-      "types": "./DefineCustomElementHandler.ts"
-    },
-    "./EnhanceMountedElementHandler.js": {
-      "default": "./EnhanceMountedElementHandler.js",
-      "types": "./EnhanceMountedElementHandler.ts"
-    }
-  },
-  "files": [
-    "*.js",
-    "*.ts"
-  ],
-  "types": "./types/mount-observer/types.d.ts",
-  "scripts": {
-    "serve": "node ./node_modules/spa-ssi/serve.js",
-    "test": "playwright test",
-    "safari": "npx playwright wk http://localhost:8000",
-    "update": "ncu -u && npm install"
-  },
-  "author": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
-  "license": "MIT"
-}
+{
+  "name": "mount-observer",
+  "version": "0.1.13",
+  "description": "Observe and act on css matches.",
+  "main": "MountObserver.js",
+  "module": "MountObserver.js",
+  "dependencies": {
+    "assign-gingerly": "0.0.22",
+    "id-generation": "0.0.4"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.59.0-alpha-2026-02-28",
+    "spa-ssi": "0.0.27"
+  },
+  "exports": {
+    ".": {
+      "default": "./index.js",
+      "types": "./index.ts"
+    },
+    "./MountObserver.js": {
+      "default": "./MountObserver.js",
+      "types": "./MountObserver.ts"
+    },
+    "./withScopePerimeter.js": {
+      "default": "./withScopePerimeter.js",
+      "types": "./withScopePerimeter.ts"
+    },
+    "./emitEvents.js": {
+      "default": "./emitEvents.js",
+      "types": "./emitEvents.ts"
+    },
+    "./arr.js": {
+      "default": "./arr.js",
+      "types": "./arr.ts"
+    },
+    "./EvtRt.js": {
+      "default": "./EvtRt.js",
+      "types": "./EvtRt.ts"
+    },
+    "./DefineCustomElementHandler.js": {
+      "default": "./DefineCustomElementHandler.js",
+      "types": "./DefineCustomElementHandler.ts"
+    },
+    "./EnhanceMountedElementHandler.js": {
+      "default": "./EnhanceMountedElementHandler.js",
+      "types": "./EnhanceMountedElementHandler.ts"
+    },
+    "./upShadowSearch.js": {
+      "default": "./upShadowSearch.js",
+      "types": "./upShadowSearch.ts"
+    }
+  },
+  "files": [
+    "*.js",
+    "*.ts"
+  ],
+  "types": "./types/mount-observer/types.d.ts",
+  "scripts": {
+    "serve": "node ./node_modules/spa-ssi/serve.js",
+    "test": "playwright test",
+    "safari": "npx playwright wk http://localhost:8000",
+    "chrome": "npx playwright cr http://localhost:8000",
+    "update": "ncu -u && npm install"
+  },
+  "author": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
+  "license": "MIT"
+}

package/playwright.config.ts

@@ -1,6 +1,7 @@
 // playwright.config.ts
 import { PlaywrightTestConfig, devices } from '@playwright/test';
 const config: PlaywrightTestConfig = {
+  testIgnore: '**/experimentalCrossScopeRegistering/**',
   webServer: {
     command: 'npm run serve',
     url: 'http://localhost:8000/',

package/rootSizeObserver.js

@@ -52,7 +52,7 @@ export function setupRootSizeObserver(init, rootNodeRef, mountedElements, module
             modules,
             observer: observer,
             rootNode,
-            MountConfig: init
+            mountConfig: init
         };
         // Get all mounted elements from the WeakDual setWeak
         const mountedElementsList = [];

package/rootSizeObserver.ts

@@ -75,7 +75,7 @@ export function setupRootSizeObserver(
             modules,
             observer: observer as any,
             rootNode,
-            MountConfig: init
+            mountConfig: init
         };
         
         // Get all mounted elements from the WeakDual setWeak

package/upShadowSearch.js

@@ -0,0 +1,64 @@
+/**
+ * Searches for an element by ID, traversing up through shadow DOM boundaries.
+ *
+ * This function searches for an element with the specified ID starting from the reference
+ * element's root node and continuing up through shadow DOM boundaries until the element
+ * is found or the document root is reached.
+ *
+ * Search order:
+ * 1. Check current root node using getElementById
+ * 2. If in shadow root, check host element's properties for the ID
+ * 3. Continue up to parent shadow root or document
+ * 4. Handle disconnected fragments via targetFragment property
+ *
+ * @param ref - The reference element to start searching from
+ * @param id - The ID of the element to find
+ * @returns The found element, or null if not found
+ *
+ * @example
+ * ```typescript
+ * const template = document.querySelector('template[src="#myId"]');
+ * const source = upShadowSearch(template, 'myId');
+ * if (source) {
+ *   const clone = source.cloneNode(true);
+ * }
+ * ```
+ */
+export function upShadowSearch(ref, id) {
+    let rn = ref.getRootNode();
+    while (rn) {
+        // Try getElementById on current root
+        if ('getElementById' in rn) {
+            const test = rn.getElementById(id);
+            if (test)
+                return test;
+        }
+        // If in shadow root, check host element
+        if ('host' in rn && rn.host) {
+            // Check if host has a property with this ID
+            const hostProp = rn.host[id];
+            if (hostProp instanceof HTMLElement)
+                return hostProp;
+            // Move up to host's root
+            rn = rn.host.getRootNode();
+        }
+        else if (rn === document) {
+            // Reached document root without finding element
+            return null;
+        }
+        else if (!('isConnected' in rn) || !rn.isConnected) {
+            // Handle disconnected fragments
+            if (rn.targetFragment) {
+                rn = rn.targetFragment;
+            }
+            else {
+                rn = document;
+            }
+        }
+        else {
+            // No more parents to check
+            return null;
+        }
+    }
+    return null;
+}

package/upShadowSearch.ts

@@ -0,0 +1,62 @@
+/**
+ * Searches for an element by ID, traversing up through shadow DOM boundaries.
+ * 
+ * This function searches for an element with the specified ID starting from the reference
+ * element's root node and continuing up through shadow DOM boundaries until the element
+ * is found or the document root is reached.
+ * 
+ * Search order:
+ * 1. Check current root node using getElementById
+ * 2. If in shadow root, check host element's properties for the ID
+ * 3. Continue up to parent shadow root or document
+ * 4. Handle disconnected fragments via targetFragment property
+ * 
+ * @param ref - The reference element to start searching from
+ * @param id - The ID of the element to find
+ * @returns The found element, or null if not found
+ * 
+ * @example
+ * ```typescript
+ * const template = document.querySelector('template[src="#myId"]');
+ * const source = upShadowSearch(template, 'myId');
+ * if (source) {
+ *   const clone = source.cloneNode(true);
+ * }
+ * ```
+ */
+export function upShadowSearch(ref: Element, id: string): Element | null {
+    let rn = ref.getRootNode() as DocumentFragment | ShadowRoot | Document;
+    
+    while (rn) {
+        // Try getElementById on current root
+        if ('getElementById' in rn) {
+            const test = rn.getElementById(id);
+            if (test) return test;
+        }
+        
+        // If in shadow root, check host element
+        if ('host' in rn && rn.host) {
+            // Check if host has a property with this ID
+            const hostProp = (rn.host as any)[id];
+            if (hostProp instanceof HTMLElement) return hostProp;
+            
+            // Move up to host's root
+            rn = rn.host.getRootNode() as DocumentFragment | ShadowRoot | Document;
+        } else if (rn === document) {
+            // Reached document root without finding element
+            return null;
+        } else if (!('isConnected' in rn) || !(rn as any).isConnected) {
+            // Handle disconnected fragments
+            if ((rn as any).targetFragment) {
+                rn = (rn as any).targetFragment;
+            } else {
+                rn = document;
+            }
+        } else {
+            // No more parents to check
+            return null;
+        }
+    }
+    
+    return null;
+}

package/DefineCustomElementHandler.ts

@@ -1,117 +0,0 @@
-import { EvtRt } from './EvtRt.js';
-import { MountConfig, MountContext } from './types/mount-observer/types.js';
-
-export class DefineCustomElementHandler extends EvtRt {
-    mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext): void {
-        this.abort();
-        // Check if modules are specified
-        if (!context.modules || context.modules.length === 0) {
-            throw new Error('Must specify an ES Module');
-        }
-        
-        const module = context.modules[0];
-        const tagName = mountedElement.localName;
-        
-        // Check if already defined
-        if (customElements.get(tagName)) {
-            return;
-        }
-        
-        // Find suitable class
-        const ElementClass = this.findSuitableClass(module);
-        
-        // Validate that ElementClass is a constructor
-        if (typeof ElementClass !== 'function') {
-            throw new Error(`Found class is not a constructor: ${typeof ElementClass}`);
-        }
-        
-        // Create wrapper class to allow reuse
-        // Use anonymous class expression which works across all browsers
-        const WrapperClass = class extends ElementClass {};
-        
-        // Define the custom element using the define method
-        this.define(tagName, WrapperClass, mountedElement);
-    }
-    
-    /**
-     * Define the custom element in the appropriate registry.
-     * Override this method in subclasses to use scoped registries.
-     * @param tagName - The custom element tag name
-     * @param ElementClass - The element class constructor
-     * @param mountedElement - The mounted element (used for scoped registry access)
-     */
-    protected define(tagName: string, ElementClass: CustomElementConstructor, mountedElement: Element): void {
-        customElements.define(tagName, ElementClass);
-    }
-    
-    private findSuitableClass(module: any): typeof HTMLElement {
-        // Check default export first
-        const defaultExport = module.default;
-        
-        if (defaultExport && this.extendsHTMLElement(defaultExport)) {
-            return defaultExport;
-        }
-        
-        // Find all exports that extend HTMLElement
-        const htmlElementClasses = Object.values(module)
-            .filter(exp => typeof exp === 'function' && this.extendsHTMLElement(exp));
-        
-        if (htmlElementClasses.length === 0) {
-            throw new Error('No suitable class found in module');
-        }
-        
-        if (htmlElementClasses.length > 1) {
-            throw new Error('More than one class found in module');
-        }
-        
-        return htmlElementClasses[0] as typeof HTMLElement;
-    }
-    
-    private extendsHTMLElement(cls: any): boolean {
-        try {
-            // Must be a function
-            if (typeof cls !== 'function') {
-                return false;
-            }
-            // Handle direct HTMLElement export
-            if (cls === HTMLElement) {
-                return true;
-            }
-            // Check if it has a prototype and extends HTMLElement
-            if (cls.prototype && cls.prototype instanceof HTMLElement) {
-                return true;
-            }
-            return false;
-        } catch {
-            return false;
-        }
-    }
-}
-
-/**
- * Handler for defining custom elements in scoped registries.
- * Uses the element's customElementRegistry property to define elements
- * in the appropriate scoped registry instead of the global registry.
- */
-export class DefineScopedCustomElementHandler extends DefineCustomElementHandler {
-    /**
-     * Define the custom element in the element's scoped registry.
-     * @param tagName - The custom element tag name
-     * @param ElementClass - The element class constructor
-     * @param mountedElement - The mounted element with customElementRegistry
-     */
-    protected define(tagName: string, ElementClass: CustomElementConstructor, mountedElement: Element): void {
-        const registry = (mountedElement as any).customElementRegistry;
-        
-        if (!registry) {
-            throw new Error('Element does not have a customElementRegistry. Scoped registries require Chrome 146+ or latest WebKit/Safari.');
-        }
-        
-        // Check if already defined in this scoped registry
-        if (registry.get(tagName)) {
-            return;
-        }
-        
-        registry.define(tagName, ElementClass);
-    }
-}

package/EnhanceMountedElementHandler.ts

@@ -1,111 +0,0 @@
-import { EvtRt } from './EvtRt.js';
-import {EnhancementConfig} from './types/assign-gingerly/types.js';
-import { MountConfig, MountContext } from './types/mount-observer/types.js';
-//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
-import 'assign-gingerly/object-extension.js';
-
-/**
- * Handler for automatically enhancing mounted elements using assign-gingerly.
- * Searches the first imported module for an export with a "spawn" property
- * and uses element.enh.get() to spawn the enhancement.
- */
-export class EnhanceMountedElementHandler extends EvtRt {
-    async mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
-        this.abort();
-        // Check if modules are specified
-        if (!context.modules || context.modules.length === 0) {
-            throw new Error('Must specify an ES Module with import property');
-        }
-        
-        const module = context.modules[0];
-        
-        // Find registry item (object with spawn property)
-        const registryItem = await this._findRegistryItem(module, mountedElement);
-        
-        if (!registryItem) {
-            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
-        }
-        
-        // Validate spawn is a constructor
-        if (typeof registryItem.spawn !== 'function') {
-            throw new Error('Registry item "spawn" property must be a constructor function');
-        }
-        
-        // Spawn the enhancement
-        this.#spawnEnhancement(mountedElement, registryItem, context);
-    }
-    
-    /**
-     * Spawn the enhancement using element.enh.get().
-     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
-     */
-    #spawnEnhancement(element: Element, registryItem: any, context: MountContext): void {
-        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
-        if (!(element as any).customElementRegistry) {
-            Object.defineProperty(element, 'customElementRegistry', {
-                value: customElements,
-                writable: true,
-                enumerable: false,
-                configurable: true
-            });
-        }
-        
-        // Use element.enh.get() to spawn the enhancement
-        const enh = (element as any).enh;
-        if (!enh || typeof enh.get !== 'function') {
-            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
-        }
-        
-        enh.get(registryItem, context);
-    }
-    
-    /**
-     * Find a registry item in the module exports.
-     * A registry item is an object with a "spawn" property.
-     * @param module - The imported module
-     * @returns The registry item or null if not found
-     */
-    protected async _findRegistryItem(module: any, el: Element): Promise<any | null> {
-        // Check default export first
-        if (module.default && await this._isRegistryItem(module.default, el)) {
-            return module.default;
-        }
-        
-        // Search all exports for a registry item
-        const exports = Object.values(module);
-        const registryItems = [];
-        for(const e of exports){
-            const isRegistryItem = await this._isRegistryItem(e, el);
-            if(isRegistryItem) registryItems.push(e);
-        }
-        
-        if (registryItems.length === 0) {
-            return null;
-        }
-        
-        if (registryItems.length > 1) {
-            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
-        }
-        
-        return registryItems[0];
-    }
-    
-    /**
-     * Check if an export is a registry item (has a spawn property).
-     * @param exp - The export to check
-     * @returns True if the export is a registry item
-     */
-    protected async  _isRegistryItem(exp: any, mountedElement: Element): Promise<boolean> {
-        let test = exp !== null 
-            && typeof exp === 'object' 
-            && 'spawn' in exp 
-            && typeof exp.spawn === 'function';
-        if(!test) return false;
-        const emc = exp as EnhancementConfig;
-        if(emc.withAttrs !== undefined){
-            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
-            return mountedElement.matches(cssQuery);
-        }
-        return true;
-    }
-}