mount-observer 0.1.2 → 0.1.3

package/SharedMutationObserver.js

@@ -14,6 +14,12 @@ const sharedObservers = new WeakMap();
 export function registerSharedObserver(rootNode, callback, config) {
     let sharedData = sharedObservers.get(rootNode);
     if (!sharedData) {
+        // Create shared data structure first
+        sharedData = {
+            observer: null, // Will be set immediately below
+            callbacks: new Set(),
+            config
+        };
         // Create new shared observer for this root node
         const observer = new MutationObserver((mutations) => {
             // Distribute mutations to all registered callbacks
@@ -22,13 +28,10 @@ export function registerSharedObserver(rootNode, callback, config) {
                 cb(mutations);
             }
         });
-        observer.observe(rootNode, config);
-        sharedData = {
-            observer,
-            callbacks: new Set(),
-            config
-        };
+        sharedData.observer = observer;
         sharedObservers.set(rootNode, sharedData);
+        // Start observing after everything is set up
+        observer.observe(rootNode, config);
     }
     else {
         // Verify config matches (for safety)

package/SharedMutationObserver.ts

@@ -29,6 +29,13 @@ export function registerSharedObserver(
     let sharedData = sharedObservers.get(rootNode);
     
     if (!sharedData) {
+        // Create shared data structure first
+        sharedData = {
+            observer: null as any, // Will be set immediately below
+            callbacks: new Set(),
+            config
+        };
+        
         // Create new shared observer for this root node
         const observer = new MutationObserver((mutations) => {
             // Distribute mutations to all registered callbacks
@@ -38,15 +45,11 @@ export function registerSharedObserver(
             }
         });
         
-        observer.observe(rootNode, config);
-        
-        sharedData = {
-            observer,
-            callbacks: new Set(),
-            config
-        };
-        
+        sharedData.observer = observer;
         sharedObservers.set(rootNode, sharedData);
+        
+        // Start observing after everything is set up
+        observer.observe(rootNode, config);
     } else {
         // Verify config matches (for safety)
         // In practice, all MountObservers should use the same config

package/arr.js

@@ -0,0 +1,13 @@
+/**
+ * Utility function to normalize a value to an array.
+ * - If undefined, returns empty array
+ * - If already an array, returns as-is
+ * - Otherwise, wraps the value in an array
+ *
+ * @param inp - Value to normalize to array
+ * @returns Array containing the value(s)
+ */
+export function arr(inp) {
+    return inp === undefined ? []
+        : Array.isArray(inp) ? inp : [inp];
+}

package/arr.ts

@@ -0,0 +1,13 @@
+/**
+ * Utility function to normalize a value to an array.
+ * - If undefined, returns empty array
+ * - If already an array, returns as-is
+ * - Otherwise, wraps the value in an array
+ * 
+ * @param inp - Value to normalize to array
+ * @returns Array containing the value(s)
+ */
+export function arr<T = any>(inp: T | T[] | undefined): T[] {
+    return inp === undefined ? []
+        : Array.isArray(inp) ? inp : [inp];
+}

package/emitEvents.js

@@ -57,7 +57,7 @@ async function emitSingleEvent(element, mountInit, config, processedEventsForEle
     }
     // Apply eventProps if specified
     if (config.eventProps) {
-        const { assignGingerly } = await import('assign-gingerly/index.js');
+        const { assignGingerly } = await import('assign-gingerly/assignGingerly.js');
         const processedProps = processMagicStrings(config.eventProps, element, mountInit);
         assignGingerly(event, processedProps);
     }

package/emitEvents.ts

@@ -73,7 +73,7 @@ async function emitSingleEvent(
 
     // Apply eventProps if specified
     if (config.eventProps) {
-        const { assignGingerly } = await import('assign-gingerly/index.js');
+        const { assignGingerly } = await import('assign-gingerly/assignGingerly.js');
         const processedProps = processMagicStrings(config.eventProps, element, mountInit);
         assignGingerly(event, processedProps);
     }

package/index.js

@@ -1,3 +1,15 @@
 // Main entry point for MountObserver v2
 export { MountObserver } from './MountObserver.js';
-export { mountEventName, dismountEventName, disconnectEventName, loadEventName } from './constants.js';
+export { whereOutside } from './whereOutside.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';
+// Register built-in handlers
+import { MountObserver } from './MountObserver.js';
+import { EvtRt } from './EvtRt.js';
+import { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+MountObserver.define('builtIns.logToConsole', EvtRt);
+MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);

package/index.ts

@@ -3,13 +3,15 @@ export { MountObserver } from './MountObserver.js';
 export { whereOutside } from './whereOutside.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,
     MountObserverOptions,
     IMountObserver,
     MountContext,
     DoCallback,
-    DoCallbacks,
     ImportSpec,
     IMountEvent,
     IDismountEvent
@@ -24,3 +26,10 @@ export {
     mediaunmatchEventName
 } from './Events.js';
 
+// Register built-in handlers
+import { MountObserver } from './MountObserver.js';
+import { EvtRt } from './EvtRt.js';
+import { DefineCustomElementHandler } from './DefineCustomElementHandler.js';
+
+MountObserver.define('builtIns.logToConsole', EvtRt);
+MountObserver.define('builtIns.defineCustomElement', DefineCustomElementHandler);

package/loadImports.js

@@ -1,7 +1,8 @@
 // Dynamic import loading utilities
 // Only loaded when MountInit.import is specified
+import { arr } from './arr.js';
 export async function loadImports(imports) {
-    const importArray = Array.isArray(imports) ? imports : [imports];
+    const importArray = arr(imports);
     const promises = importArray.map(imp => loadSingleImport(imp));
     return Promise.all(promises);
 }

package/loadImports.ts

@@ -2,11 +2,12 @@
 // Only loaded when MountInit.import is specified
 
 import { ImportSpec } from './types.js';
+import { arr } from './arr.js';
 
 export async function loadImports(
     imports: string | ImportSpec | Array<string | ImportSpec | [string, any]>
 ): Promise<any[]> {
-    const importArray = Array.isArray(imports) ? imports : [imports];
+    const importArray = arr(imports);
     const promises = importArray.map(imp => loadSingleImport(imp));
     return Promise.all(promises);
 }

package/mediaQuery.js

@@ -48,9 +48,8 @@ export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, obs
         const context = {
             modules,
             observer: observer,
-            observeInfo: {
-                rootNode
-            }
+            rootNode,
+            mountInit: init
         };
         // Get all mounted elements from the WeakDual setWeak
         const mountedElementsList = [];
@@ -70,10 +69,6 @@ export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, obs
                     break;
                 }
             }
-            // Call dismount callback
-            if (init.do && typeof init.do !== 'function' && init.do.dismount) {
-                init.do.dismount(element, context);
-            }
             // Dispatch dismount event with reason
             observer.dispatchEvent(new DismountEvent(element, 'media-query-failed', init));
         }

package/mediaQuery.ts

@@ -69,9 +69,8 @@ export function setupMediaQuery(
         const context: MountContext = {
             modules,
             observer: observer as any,
-            observeInfo: {
-                rootNode
-            }
+            rootNode,
+            mountInit: init
         };
         
         // Get all mounted elements from the WeakDual setWeak
@@ -94,10 +93,6 @@ export function setupMediaQuery(
                 }
             }
             
-            // Call dismount callback
-            if (init.do && typeof init.do !== 'function' && init.do.dismount) {
-                init.do.dismount(element, context);
-            }
             
             // Dispatch dismount event with reason
             observer.dispatchEvent(new DismountEvent(element, 'media-query-failed', init));

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "mount-observer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.2"
+    "assign-gingerly": "0.0.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.58.0",
+    "@playwright/test": "1.58.2",
     "spa-ssi": "0.0.26"
   },
   "exports": {
@@ -31,6 +31,18 @@
     "./attrChanges.js": {
       "default": "./attrChanges.js",
       "types": "./attrChanges.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"
     }
   },
   "files": [

package/types.d.ts

@@ -22,12 +22,17 @@ export interface MountInit {
     whereMediaMatches?: string | MediaQueryList;
     whereOutside?: string;
     import?: string | ImportSpec | Array<string | ImportSpec>;
-    do?: DoCallback | DoCallbacks;
+    do?: string | DoCallback | (string | DoCallback)[];
     loadingEagerness?: 'eager' | 'lazy';
-    assignGingerly?: Record<string, any>;
+    assignOnMount?: Record<string, any>;
+    assignOnDismount?: Record<string, any>;
     map?: MapConfig;
     getPlayByPlay?: boolean;
     mountedElemEmits?: EventConfig | EventConfig[];
+    reference?: number | number[];
+    //allow handler classes or functions
+    //to be passed some custom information
+    customData?: unknown;
 }
 
 export interface MapConfig {
@@ -62,21 +67,20 @@ export interface ImportSpec {
 export interface MountContext {
     modules: any[];
     observer: IMountObserver;
-    observeInfo: ObserveInfo;
-}
-
-export interface ObserveInfo {
     rootNode: Node;
+    mountInit: MountInit
 }
 
-export type DoCallback = (matchingElement: Element, context: MountContext) => void;
 
-export interface DoCallbacks {
-    mount?: (matchingElement: Element, context: MountContext) => void;
-    dismount?: (matchingElement: Element, context: MountContext) => void;
-    disconnect?: (matchingElement: Element, context: MountContext) => void;
-    reconnect?: (matchingElement: Element, context: MountContext) => void;
-}
+
+export type DoCallback = (mountedElement: Element, context: MountContext) => void;
+
+// export interface DoCallbacks {
+//     mount?: (mountedElement: Element, context: MountContext) => void;
+//     dismount?: (mountedElement: Element, context: MountContext) => void;
+//     disconnect?: (mountedElement: Element, context: MountContext) => void;
+//     reconnect?: (mountedElement: Element, context: MountContext) => void;
+// }
 
 export interface MountObserverOptions {
     disconnectedSignal?: AbortSignal;
@@ -92,16 +96,18 @@ export interface IMountObserver extends EventTarget {
     disconnect(): void;
     disconnectedSignal: AbortSignal;
     assignGingerly(config: Record<string, any> | undefined): Promise<void>;
+    getNotifier(element: Element): EventTarget;
 }
 
 export interface IMountEvent extends Event {
-    matchingElement: Element;
+    mountedElement: Element;
     modules: any[];
     mountInit: MountInit;
+    mountContext: MountContext;
 }
 
 export interface IDismountEvent extends Event {
-    matchingElement: Element;
+    mountedElement: Element;
     reason: DismountReason;
     mountInit: MountInit;
 }