mount-observer 0.1.3 → 0.1.5

package/emitEvents.js

@@ -2,15 +2,15 @@
  * Emits events from a mounted element based on the mountedElemEmits configuration.
  * This module is dynamically loaded only when mountedElemEmits is configured.
  */
-export async function emitMountedElementEvents(element, mountInit, processedEventsForElement) {
-    const configs = Array.isArray(mountInit.mountedElemEmits)
-        ? mountInit.mountedElemEmits
-        : [mountInit.mountedElemEmits];
+export async function emitMountedElementEvents(element, MountConfig, processedEventsForElement) {
+    const configs = Array.isArray(MountConfig.mountedElemEmits)
+        ? MountConfig.mountedElemEmits
+        : [MountConfig.mountedElemEmits];
     for (const config of configs) {
-        await emitSingleEvent(element, mountInit, config, processedEventsForElement);
+        await emitSingleEvent(element, MountConfig, config, processedEventsForElement);
     }
 }
-async function emitSingleEvent(element, mountInit, config, processedEventsForElement) {
+async function emitSingleEvent(element, MountConfig, config, processedEventsForElement) {
     // Check if this event should only fire once per element
     if (config.oncePerMountedElement) {
         const eventId = getEventId(config);
@@ -28,7 +28,7 @@ async function emitSingleEvent(element, mountInit, config, processedEventsForEle
     const EventCtor = resolveEventConstructor(config.event);
     // Process args with magic string substitution
     const processedArgs = config.args !== undefined
-        ? processMagicStrings(config.args, element, mountInit)
+        ? processMagicStrings(config.args, element, MountConfig)
         : undefined;
     // Construct the event
     let event;
@@ -58,7 +58,7 @@ async function emitSingleEvent(element, mountInit, config, processedEventsForEle
     // Apply eventProps if specified
     if (config.eventProps) {
         const { assignGingerly } = await import('assign-gingerly/assignGingerly.js');
-        const processedProps = processMagicStrings(config.eventProps, element, mountInit);
+        const processedProps = processMagicStrings(config.eventProps, element, MountConfig);
         assignGingerly(event, processedProps);
     }
     // Dispatch the event from the mounted element
@@ -79,23 +79,23 @@ function getEventId(config) {
     const argsStr = JSON.stringify(config.args || '');
     return `${eventName}:${argsStr}`;
 }
-function processMagicStrings(value, element, mountInit) {
+function processMagicStrings(value, element, MountConfig) {
     if (typeof value === 'string') {
         if (value === '{{mountedElement}}') {
             return element;
         }
-        if (value === '{{mountInit}}') {
-            return mountInit;
+        if (value === '{{MountConfig}}') {
+            return MountConfig;
         }
         return value;
     }
     if (Array.isArray(value)) {
-        return value.map(item => processMagicStrings(item, element, mountInit));
+        return value.map(item => processMagicStrings(item, element, MountConfig));
     }
     if (value && typeof value === 'object') {
         const processed = {};
         for (const [key, val] of Object.entries(value)) {
-            processed[key] = processMagicStrings(val, element, mountInit);
+            processed[key] = processMagicStrings(val, element, MountConfig);
         }
         return processed;
     }

package/emitEvents.ts

@@ -1,4 +1,4 @@
-import type { EventConfig, EventConstructor, MountInit } from './types.d.ts';
+import type { EventConfig, EventConstructor, MountConfig } from './types.d.ts';
 
 /**
  * Emits events from a mounted element based on the mountedElemEmits configuration.
@@ -6,21 +6,21 @@ import type { EventConfig, EventConstructor, MountInit } from './types.d.ts';
  */
 export async function emitMountedElementEvents(
     element: Element,
-    mountInit: MountInit,
+    MountConfig: MountConfig,
     processedEventsForElement: WeakMap<Element, Set<string>>
 ): Promise<void> {
-    const configs = Array.isArray(mountInit.mountedElemEmits) 
-        ? mountInit.mountedElemEmits 
-        : [mountInit.mountedElemEmits!];
+    const configs = Array.isArray(MountConfig.mountedElemEmits) 
+        ? MountConfig.mountedElemEmits 
+        : [MountConfig.mountedElemEmits!];
 
     for (const config of configs) {
-        await emitSingleEvent(element, mountInit, config, processedEventsForElement);
+        await emitSingleEvent(element, MountConfig, config, processedEventsForElement);
     }
 }
 
 async function emitSingleEvent(
     element: Element,
-    mountInit: MountInit,
+    MountConfig: MountConfig,
     config: EventConfig,
     processedEventsForElement: WeakMap<Element, Set<string>>
 ): Promise<void> {
@@ -46,7 +46,7 @@ async function emitSingleEvent(
 
     // Process args with magic string substitution
     const processedArgs = config.args !== undefined 
-        ? processMagicStrings(config.args, element, mountInit)
+        ? processMagicStrings(config.args, element, MountConfig)
         : undefined;
 
     // Construct the event
@@ -74,7 +74,7 @@ async function emitSingleEvent(
     // Apply eventProps if specified
     if (config.eventProps) {
         const { assignGingerly } = await import('assign-gingerly/assignGingerly.js');
-        const processedProps = processMagicStrings(config.eventProps, element, mountInit);
+        const processedProps = processMagicStrings(config.eventProps, element, MountConfig);
         assignGingerly(event, processedProps);
     }
 
@@ -99,25 +99,25 @@ function getEventId(config: EventConfig): string {
     return `${eventName}:${argsStr}`;
 }
 
-function processMagicStrings(value: any, element: Element, mountInit: MountInit): any {
+function processMagicStrings(value: any, element: Element, MountConfig: MountConfig): any {
     if (typeof value === 'string') {
         if (value === '{{mountedElement}}') {
             return element;
         }
-        if (value === '{{mountInit}}') {
-            return mountInit;
+        if (value === '{{MountConfig}}') {
+            return MountConfig;
         }
         return value;
     }
 
     if (Array.isArray(value)) {
-        return value.map(item => processMagicStrings(item, element, mountInit));
+        return value.map(item => processMagicStrings(item, element, MountConfig));
     }
 
     if (value && typeof value === 'object') {
         const processed: any = {};
         for (const [key, val] of Object.entries(value)) {
-            processed[key] = processMagicStrings(val, element, mountInit);
+            processed[key] = processMagicStrings(val, element, MountConfig);
         }
         return processed;
     }

package/getRootRegistryContainer.js

@@ -0,0 +1,27 @@
+/**
+ * Finds the highest scoped container that has the same customElementRegistry as the given element.
+ * This is useful for scoped custom element registries where we want to observe within the correct scope.
+ *
+ * @param element - The element to find the root registry container for
+ * @returns The root node or highest parent element with the same customElementRegistry
+ */
+export function getRootRegistryContainer(element) {
+    const rn = element.getRootNode();
+    const { customElementRegistry } = element;
+    // If root node has the same registry, return it
+    if (rn.customElementRegistry === customElementRegistry) {
+        return rn;
+    }
+    // Walk up the parent chain to find the highest element with the same registry
+    let parent = element.parentElement;
+    while (parent) {
+        const prevParent = parent;
+        parent = parent.parentElement;
+        // If parent has a different registry, return the previous parent
+        if (parent && parent.customElementRegistry !== customElementRegistry) {
+            return prevParent;
+        }
+    }
+    // If we reached the top without finding a different registry, return the element itself
+    return element;
+}

package/getRootRegistryContainer.ts

@@ -0,0 +1,32 @@
+/**
+ * Finds the highest scoped container that has the same customElementRegistry as the given element.
+ * This is useful for scoped custom element registries where we want to observe within the correct scope.
+ * 
+ * @param element - The element to find the root registry container for
+ * @returns The root node or highest parent element with the same customElementRegistry
+ */
+export function getRootRegistryContainer(element: Element): Node {
+    const rn = element.getRootNode();
+    const { customElementRegistry } = element as any;
+    
+    // If root node has the same registry, return it
+    if ((rn as any).customElementRegistry === customElementRegistry) {
+        return rn;
+    }
+    
+    // Walk up the parent chain to find the highest element with the same registry
+    let parent = element.parentElement;
+    
+    while (parent) {
+        const prevParent = parent;
+        parent = parent.parentElement;
+        
+        // If parent has a different registry, return the previous parent
+        if (parent && (parent as any).customElementRegistry !== customElementRegistry) {
+            return prevParent;
+        }
+    }
+    
+    // If we reached the top without finding a different registry, return the element itself
+    return element;
+}

package/index.js

@@ -1,12 +1,11 @@
 // Main entry point for MountObserver v2
 export { MountObserver } from './MountObserver.js';
-export { whereOutside } from './whereOutside.js';
+export { withScopePerimeter } from './withScopePerimeter.js';
 export { emitMountedElementEvents } from './emitEvents.js';
-export { checkAttrChanges } from './attrChanges.js';
 export { arr } from './arr.js';
 export { EvtRt } from './EvtRt.js';
 export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
-export { mountEventName, dismountEventName, disconnectEventName, loadEventName, attrchangeEventName, mediamatchEventName, mediaunmatchEventName } from './Events.js';
+export { mountEventName, dismountEventName, disconnectEventName, loadEventName, mediamatchEventName, mediaunmatchEventName } from './Events.js';
 // Register built-in handlers
 import { MountObserver } from './MountObserver.js';
 import { EvtRt } from './EvtRt.js';

package/index.ts

@@ -1,13 +1,12 @@
 // Main entry point for MountObserver v2
 export { MountObserver } from './MountObserver.js';
-export { whereOutside } from './whereOutside.js';
+export { withScopePerimeter } from './withScopePerimeter.js';
 export { emitMountedElementEvents } from './emitEvents.js';
-export { checkAttrChanges } from './attrChanges.js';
 export { arr } from './arr.js';
 export { EvtRt } from './EvtRt.js';
 export { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
 export type {
-    MountInit,
+    MountConfig,
     MountObserverOptions,
     IMountObserver,
     MountContext,
@@ -21,7 +20,6 @@ export {
     dismountEventName,
     disconnectEventName,
     loadEventName,
-    attrchangeEventName,
     mediamatchEventName,
     mediaunmatchEventName
 } from './Events.js';
@@ -29,7 +27,8 @@ export {
 // Register built-in handlers
 import { MountObserver } from './MountObserver.js';
 import { EvtRt } from './EvtRt.js';
-import { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+import { DefineCustomElementHandler, DefineScopedCustomElementHandler } from './DefineCustomElementHandler.js';
 
 MountObserver.define('builtIns.logToConsole', EvtRt);
 MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);
+MountObserver.define('buildIns.defineScopedCustomElement', DefineScopedCustomElementHandler);

package/loadImports.js

@@ -1,5 +1,5 @@
 // Dynamic import loading utilities
-// Only loaded when MountInit.import is specified
+// Only loaded when MountConfig.import is specified
 import { arr } from './arr.js';
 export async function loadImports(imports) {
     const importArray = arr(imports);

package/loadImports.ts

@@ -1,5 +1,5 @@
 // Dynamic import loading utilities
-// Only loaded when MountInit.import is specified
+// Only loaded when MountConfig.import is specified
 
 import { ImportSpec } from './types.js';
 import { arr } from './arr.js';

package/mediaQuery.js

@@ -1,13 +1,13 @@
 import { MediaMatchEvent, MediaUnmatchEvent, DismountEvent } from './Events.js';
 export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, observer, processNode) {
-    const { whereMediaMatches } = init;
+    const { withMediaMatching } = init;
     // Create or use MediaQueryList
     let mediaQueryList;
-    if (typeof whereMediaMatches === 'string') {
-        mediaQueryList = window.matchMedia(whereMediaMatches);
+    if (typeof withMediaMatching === 'string') {
+        mediaQueryList = window.matchMedia(withMediaMatching);
     }
     else {
-        mediaQueryList = whereMediaMatches;
+        mediaQueryList = withMediaMatching;
     }
     // Track current state
     let mediaMatches = mediaQueryList.matches;
@@ -49,7 +49,7 @@ export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, obs
             modules,
             observer: observer,
             rootNode,
-            mountInit: init
+            MountConfig: init
         };
         // Get all mounted elements from the WeakDual setWeak
         const mountedElementsList = [];

package/mediaQuery.ts

@@ -1,9 +1,9 @@
 // Media query handling for MountObserver
-import type { MountInit, MountContext, WeakDual } from './types.js';
+import type { MountConfig, MountContext, WeakDual } from './types.js';
 import { MediaMatchEvent, MediaUnmatchEvent, DismountEvent } from './Events.js';
 
 export function setupMediaQuery(
-    init: MountInit,
+    init: MountConfig,
     rootNodeRef: WeakRef<Node>,
     mountedElements: WeakDual<Element>,
     modules: any[],
@@ -14,14 +14,14 @@ export function setupMediaQuery(
     mediaMatches: boolean;
     cleanup: () => void;
 } {
-    const { whereMediaMatches } = init;
+    const { withMediaMatching } = init;
     
     // Create or use MediaQueryList
     let mediaQueryList: MediaQueryList;
-    if (typeof whereMediaMatches === 'string') {
-        mediaQueryList = window.matchMedia(whereMediaMatches);
+    if (typeof withMediaMatching === 'string') {
+        mediaQueryList = window.matchMedia(withMediaMatching);
     } else {
-        mediaQueryList = whereMediaMatches!;
+        mediaQueryList = withMediaMatching!;
     }
     
     // Track current state
@@ -70,7 +70,7 @@ export function setupMediaQuery(
             modules,
             observer: observer as any,
             rootNode,
-            mountInit: init
+            MountConfig: init
         };
         
         // Get all mounted elements from the WeakDual setWeak

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.6"
+    "assign-gingerly": "0.0.12"
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
@@ -20,18 +20,14 @@
       "default": "./MountObserver.js",
       "types": "./MountObserver.ts"
     },
-    "./whereOutside.js": {
-      "default": "./whereOutside.js",
-      "types": "./whereOutside.ts"
+    "./withScopePerimeter.js": {
+      "default": "./withScopePerimeter.js",
+      "types": "./withScopePerimeter.ts"
     },
     "./emitEvents.js": {
       "default": "./emitEvents.js",
       "types": "./emitEvents.ts"
     },
-    "./attrChanges.js": {
-      "default": "./attrChanges.js",
-      "types": "./attrChanges.ts"
-    },
     "./arr.js": {
       "default": "./arr.js",
       "types": "./arr.ts"

package/playwright.config.ts

@@ -15,14 +15,14 @@ const config: PlaywrightTestConfig = {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
   ],
 };
 export default config;

package/types.d.ts

@@ -1,5 +1,7 @@
 // Core types for MountObserver v2 - Polyfill Supported Scenario I
 
+import {EnhancementConfig} from 'assign-gingerly/types.d.ts';
+
 export type Constructor = new (...args: any[]) => any;
 
 export type EventConstructor = {new(...args: any[]): Event};
@@ -13,51 +15,29 @@ export interface EventConfig {
 
 export type DismountReason = 
     | 'media-query-failed'
-    | 'where-element-matches-failed';
-
-export interface MountInit {
-    whereElementMatches: string;
-    whereAttr?: WhereAttr;
-    whereInstanceOf?: Constructor | Constructor[];
-    whereMediaMatches?: string | MediaQueryList;
-    whereOutside?: string;
+    | 'with-matching-failed';
+
+export interface MountConfig {
+    matching?: string;
+    withInstance?: Constructor | Constructor[];
+    withMediaMatching?: string | MediaQueryList;
+    withScopePerimeter?: string;
     import?: string | ImportSpec | Array<string | ImportSpec>;
     do?: string | DoCallback | (string | DoCallback)[];
     loadingEagerness?: 'eager' | 'lazy';
     assignOnMount?: Record<string, any>;
     assignOnDismount?: Record<string, any>;
-    map?: MapConfig;
+    stageOnMount?: Record<string, any>;
     getPlayByPlay?: boolean;
     mountedElemEmits?: EventConfig | EventConfig[];
     reference?: number | number[];
     //allow handler classes or functions
     //to be passed some custom information
     customData?: unknown;
+    enhancementConfig?: EnhancementConfig | EnhancementConfig[];
 }
 
-export interface MapConfig {
-    [coordinate: string]: MapEntry;
-}
-
-export interface MapEntry {
-    instanceOf?: string;
-    mapsTo?: string;
-    /**
-     * Only notify the presence of this attribute
-     * the first time it is seen
-     */
-    once?: boolean;
-    [key: string]: any;
-}
-
-export type BranchValue = string | { [key: string]: BranchValue[] };
 
-export interface WhereAttr {
-    hasBuiltInRootIn?: string[];
-    hasCERootIn?: string[];
-    hasBase: string;
-    hasBranchIn?: BranchValue[];
-}
 
 export interface ImportSpec {
     url: string;
@@ -68,7 +48,7 @@ export interface MountContext {
     modules: any[];
     observer: IMountObserver;
     rootNode: Node;
-    mountInit: MountInit
+    MountConfig: MountConfig
 }
 
 
@@ -82,8 +62,16 @@ export type DoCallback = (mountedElement: Element, context: MountContext) => voi
 //     reconnect?: (mountedElement: Element, context: MountContext) => void;
 // }
 
+export type MountScope = 
+    | 'registry'     // getRootRegistryContainer (default)
+    | 'self'         // this element
+    | 'root'         // getRootNode()
+    | 'shadow'       // shadowRoot (throws if none)
+    | Element;       // custom element to observe
+
 export interface MountObserverOptions {
     disconnectedSignal?: AbortSignal;
+    scope?: MountScope;
 }
 
 export interface WeakDual<T extends Object>{
@@ -102,26 +90,14 @@ export interface IMountObserver extends EventTarget {
 export interface IMountEvent extends Event {
     mountedElement: Element;
     modules: any[];
-    mountInit: MountInit;
+    MountConfig: MountConfig;
     mountContext: MountContext;
 }
 
 export interface IDismountEvent extends Event {
     mountedElement: Element;
     reason: DismountReason;
-    mountInit: MountInit;
+    MountConfig: MountConfig;
 }
 
-export interface IAttrChangeEvent extends Event {
-    changes: AttrChange[];
-    mountInit: MountInit;
-}
 
-export interface AttrChange {
-    value: string | null;
-    attrNode: Attr | null;
-    mapEntry: MapEntry | null;
-    attrName: string;
-    coordinate: string;
-    element: Element;
-}

package/{whereOutside.js → withScopePerimeter.js}

@@ -7,7 +7,7 @@
  * @param outside - CSS selector for excluding ancestors
  * @returns true if element is outside all matching ancestors, false otherwise
  */
-export function whereOutside(rootNode, matchCandidate, outside) {
+export function withScopePerimeter(rootNode, matchCandidate, outside) {
     let current = matchCandidate.parentElement;
     while (current && current !== rootNode) {
         if (current.matches(outside)) {

package/{whereOutside.ts → withScopePerimeter.ts}

@@ -7,7 +7,7 @@
  * @param outside - CSS selector for excluding ancestors
  * @returns true if element is outside all matching ancestors, false otherwise
  */
-export function whereOutside(
+export function withScopePerimeter(
     rootNode: Node,
     matchCandidate: Element,
     outside: string

package/attrChanges.js

@@ -1,70 +0,0 @@
-/**
- * Checks for attribute changes on a mounted element.
- * This module is dynamically loaded only when whereAttr is configured.
- */
-export function checkAttrChanges(element, mountInit, buildAttrCoordinateMapFn, elementAttrStates, elementOnceAttrs) {
-    if (!mountInit.whereAttr || !buildAttrCoordinateMapFn) {
-        return [];
-    }
-    const isCustomElement = element.tagName.toLowerCase().includes('-');
-    const attrCoordMap = buildAttrCoordinateMapFn(mountInit.whereAttr, isCustomElement);
-    // Get or create the attribute state for this element
-    let attrState = elementAttrStates.get(element);
-    if (!attrState) {
-        attrState = new Map();
-        elementAttrStates.set(element, attrState);
-    }
-    const changes = [];
-    const currentAttrs = new Set();
-    // Check all possible attributes from the coordinate map
-    for (const attrName of Object.keys(attrCoordMap)) {
-        const coordinate = attrCoordMap[attrName];
-        const currentValue = element.getAttribute(attrName);
-        const previousValue = attrState.get(attrName);
-        if (currentValue !== null) {
-            currentAttrs.add(attrName);
-        }
-        // Check if this attribute has "once: true" in its map entry
-        const mapEntry = mountInit.map?.[coordinate] || null;
-        const isOnce = mapEntry?.once === true;
-        // If "once" is true, check if we've already seen this attribute
-        if (isOnce) {
-            let onceAttrs = elementOnceAttrs.get(element);
-            if (!onceAttrs) {
-                onceAttrs = new Set();
-                elementOnceAttrs.set(element, onceAttrs);
-            }
-            // If we've already seen this attribute, skip it
-            if (onceAttrs.has(attrName)) {
-                continue;
-            }
-            // Mark this attribute as seen if it currently has a value
-            if (currentValue !== null) {
-                onceAttrs.add(attrName);
-            }
-        }
-        // Include if: currently has value OR previously had value but now removed
-        if (currentValue !== null || (previousValue !== undefined && currentValue === null)) {
-            // Check if value changed
-            if (currentValue !== previousValue) {
-                const attrNode = currentValue !== null ? element.getAttributeNode(attrName) : null;
-                changes.push({
-                    value: currentValue,
-                    attrNode,
-                    mapEntry,
-                    attrName,
-                    coordinate,
-                    element
-                });
-                // Update state
-                if (currentValue !== null) {
-                    attrState.set(attrName, currentValue);
-                }
-                else {
-                    attrState.delete(attrName);
-                }
-            }
-        }
-    }
-    return changes;
-}