mount-observer 0.0.112 → 0.1.1

package/attrCoordinates.ts

@@ -0,0 +1,122 @@
+import { WhereAttr, BranchValue } from './types.js';
+
+/**
+ * Represents a mapping from attribute name to coordinate
+ */
+export interface AttrCoordinateMap {
+    [attrName: string]: string;
+}
+
+/**
+ * Builds a map of attribute names to their coordinates based on whereAttr config
+ */
+export function buildAttrCoordinateMap(whereAttr: WhereAttr, isCustomElement: boolean): AttrCoordinateMap {
+    const map: AttrCoordinateMap = {};
+    const rootPrefixes = isCustomElement 
+        ? (whereAttr.hasCERootIn || [])
+        : (whereAttr.hasBuiltInRootIn || []);
+
+    // Parse base attribute for custom delimiter
+    const { delimiter: baseDelimiter, name: baseName } = parseDelimiter(whereAttr.hasBase);
+
+    // Build attribute names for each prefix
+    for (const prefix of rootPrefixes) {
+        const baseAttrName = buildAttributeName(prefix, baseName, baseDelimiter);
+
+        // If no branches specified, just the base attribute
+        if (!whereAttr.hasBranchIn || whereAttr.hasBranchIn.length === 0) {
+            map[baseAttrName] = '0';
+            continue;
+        }
+
+        // Process each branch
+        for (let i = 0; i < whereAttr.hasBranchIn.length; i++) {
+            const branch = whereAttr.hasBranchIn[i];
+            
+            if (branch === '') {
+                // Empty string means base attribute alone is valid
+                map[baseAttrName] = '0';
+                continue;
+            }
+
+            if (typeof branch === 'object') {
+                // Process branch object
+                processBranch(branch, baseAttrName, String(i), map);
+            }
+        }
+    }
+
+    return map;
+}
+
+/**
+ * Recursively processes a branch object to build attribute-coordinate mappings
+ */
+function processBranch(
+    branch: { [key: string]: BranchValue[] },
+    parentAttrName: string,
+    parentCoordinate: string,
+    map: AttrCoordinateMap
+): void {
+    for (const [key, subBranches] of Object.entries(branch)) {
+        const { delimiter, name } = parseDelimiter(key);
+        const attrName = parentAttrName + delimiter + name;
+
+        // Process sub-branches
+        if (!subBranches || subBranches.length === 0) {
+            map[attrName] = parentCoordinate;
+            continue;
+        }
+
+        for (let i = 0; i < subBranches.length; i++) {
+            const subBranch = subBranches[i];
+            const coordinate = `${parentCoordinate}.${i}`;
+
+            if (subBranch === '') {
+                // Empty string means this level alone is valid
+                map[attrName] = parentCoordinate;
+                continue;
+            }
+
+            if (typeof subBranch === 'string') {
+                // Simple string sub-branch
+                const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
+                const subAttrName = attrName + subDelimiter + subName;
+                map[subAttrName] = coordinate;
+                continue;
+            }
+
+            if (typeof subBranch === 'object') {
+                // Nested object - recursively process
+                processBranch(subBranch, attrName, coordinate, map);
+            }
+        }
+    }
+}
+
+/**
+ * Parses a key to extract custom delimiter and name
+ */
+function parseDelimiter(key: string): { delimiter: string; name: string } {
+    const match = key.match(/^\[(.+?)\](.+)$/);
+    if (match) {
+        return {
+            delimiter: match[1],
+            name: match[2]
+        };
+    }
+    return {
+        delimiter: '-',
+        name: key
+    };
+}
+
+/**
+ * Builds the full attribute name from prefix, base name, and delimiter
+ */
+function buildAttributeName(prefix: string, baseName: string, delimiter: string): string {
+    if (prefix === '') {
+        return baseName;
+    }
+    return prefix + delimiter + baseName;
+}

package/index.js

@@ -0,0 +1,3 @@
+// Main entry point for MountObserver v2
+export { MountObserver } from './MountObserver.js';
+export { mountEventName, dismountEventName, disconnectEventName, loadEventName } from './constants.js';

package/index.ts

@@ -0,0 +1,22 @@
+// Main entry point for MountObserver v2
+export { MountObserver } from './MountObserver.js';
+export type {
+    MountInit,
+    MountObserverOptions,
+    IMountObserver,
+    MountContext,
+    DoCallback,
+    DoCallbacks,
+    ImportSpec,
+    IMountEvent,
+    IDismountEvent
+} from './types.js';
+export {
+    mountEventName,
+    dismountEventName,
+    disconnectEventName,
+    loadEventName,
+    attrchangeEventName,
+    mediamatchEventName,
+    mediaunmatchEventName
+} from './Events.js';

package/loadImports.js

@@ -0,0 +1,47 @@
+// Dynamic import loading utilities
+// Only loaded when MountInit.import is specified
+export async function loadImports(imports) {
+    const importArray = Array.isArray(imports) ? imports : [imports];
+    const promises = importArray.map(imp => loadSingleImport(imp));
+    return Promise.all(promises);
+}
+async function loadSingleImport(imp) {
+    let url;
+    let type = 'js';
+    if (typeof imp === 'string') {
+        url = imp;
+    }
+    else if (Array.isArray(imp)) {
+        url = imp[0];
+        type = imp[1]?.type || 'js';
+    }
+    else {
+        url = imp.url;
+        type = imp.type || 'js';
+    }
+    switch (type) {
+        case 'css':
+            return loadCSS(url);
+        case 'json':
+            return loadJSON(url);
+        case 'html':
+            return loadHTML(url);
+        default:
+            return import(url);
+    }
+}
+async function loadCSS(url) {
+    const response = await fetch(url);
+    const text = await response.text();
+    const sheet = new CSSStyleSheet();
+    await sheet.replace(text);
+    return sheet;
+}
+async function loadJSON(url) {
+    const response = await fetch(url);
+    return response.json();
+}
+async function loadHTML(url) {
+    const response = await fetch(url);
+    return response.text();
+}

package/loadImports.ts

@@ -0,0 +1,56 @@
+// Dynamic import loading utilities
+// Only loaded when MountInit.import is specified
+
+import { ImportSpec } from './types.js';
+
+export async function loadImports(
+    imports: string | ImportSpec | Array<string | ImportSpec | [string, any]>
+): Promise<any[]> {
+    const importArray = Array.isArray(imports) ? imports : [imports];
+    const promises = importArray.map(imp => loadSingleImport(imp));
+    return Promise.all(promises);
+}
+
+async function loadSingleImport(imp: string | ImportSpec | [string, any]): Promise<any> {
+    let url: string;
+    let type: string = 'js';
+
+    if (typeof imp === 'string') {
+        url = imp;
+    } else if (Array.isArray(imp)) {
+        url = imp[0];
+        type = imp[1]?.type || 'js';
+    } else {
+        url = imp.url;
+        type = imp.type || 'js';
+    }
+
+    switch (type) {
+        case 'css':
+            return loadCSS(url);
+        case 'json':
+            return loadJSON(url);
+        case 'html':
+            return loadHTML(url);
+        default:
+            return import(url);
+    }
+}
+
+async function loadCSS(url: string): Promise<CSSStyleSheet> {
+    const response = await fetch(url);
+    const text = await response.text();
+    const sheet = new CSSStyleSheet();
+    await sheet.replace(text);
+    return sheet;
+}
+
+async function loadJSON(url: string): Promise<any> {
+    const response = await fetch(url);
+    return response.json();
+}
+
+async function loadHTML(url: string): Promise<string> {
+    const response = await fetch(url);
+    return response.text();
+}

package/mediaQuery.js

@@ -0,0 +1,86 @@
+import { MediaMatchEvent, MediaUnmatchEvent, DismountEvent } from './Events.js';
+export function setupMediaQuery(init, rootNodeRef, mountedElements, modules, observer, processNode) {
+    const { whereMediaMatches } = init;
+    // Create or use MediaQueryList
+    let mediaQueryList;
+    if (typeof whereMediaMatches === 'string') {
+        mediaQueryList = window.matchMedia(whereMediaMatches);
+    }
+    else {
+        mediaQueryList = whereMediaMatches;
+    }
+    // Track current state
+    let mediaMatches = mediaQueryList.matches;
+    // Set up change listener
+    const mediaChangeHandler = (e) => {
+        const previousMatches = mediaMatches;
+        mediaMatches = e.matches;
+        if (e.matches && !previousMatches) {
+            // Media query now matches - wake up and process elements
+            handleMediaMatch();
+        }
+        else if (!e.matches && previousMatches) {
+            // Media query no longer matches - dismount all elements
+            handleMediaUnmatch();
+        }
+    };
+    function handleMediaMatch() {
+        // Dispatch mediamatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaMatchEvent(init));
+        }
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    function handleMediaUnmatch() {
+        // Dispatch mediaunmatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaUnmatchEvent(init));
+        }
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        const context = {
+            modules,
+            observer: observer,
+            observeInfo: {
+                rootNode
+            }
+        };
+        // Get all mounted elements (we need to iterate through the DOM to find them)
+        const mountedElementsList = [];
+        const collectMountedElements = (node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node;
+                if (mountedElements.has(element)) {
+                    mountedElementsList.push(element);
+                }
+            }
+            node.childNodes.forEach(child => collectMountedElements(child));
+        };
+        collectMountedElements(rootNode);
+        // Dismount each element
+        for (const element of mountedElementsList) {
+            mountedElements.delete(element);
+            // 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));
+        }
+    }
+    mediaQueryList.addEventListener('change', mediaChangeHandler);
+    return {
+        mediaQueryList,
+        mediaMatches,
+        cleanup: () => {
+            mediaQueryList.removeEventListener('change', mediaChangeHandler);
+        }
+    };
+}

package/mediaQuery.ts

@@ -0,0 +1,113 @@
+// Media query handling for MountObserver
+import type { MountInit, MountContext } from './types.js';
+import { MediaMatchEvent, MediaUnmatchEvent, DismountEvent } from './Events.js';
+
+export function setupMediaQuery(
+    init: MountInit,
+    rootNodeRef: WeakRef<Node>,
+    mountedElements: WeakSet<Element>,
+    modules: any[],
+    observer: EventTarget,
+    processNode: (node: Node) => void
+): {
+    mediaQueryList: MediaQueryList;
+    mediaMatches: boolean;
+    cleanup: () => void;
+} {
+    const { whereMediaMatches } = init;
+    
+    // Create or use MediaQueryList
+    let mediaQueryList: MediaQueryList;
+    if (typeof whereMediaMatches === 'string') {
+        mediaQueryList = window.matchMedia(whereMediaMatches);
+    } else {
+        mediaQueryList = whereMediaMatches!;
+    }
+    
+    // Track current state
+    let mediaMatches = mediaQueryList.matches;
+    
+    // Set up change listener
+    const mediaChangeHandler = (e: MediaQueryListEvent) => {
+        const previousMatches = mediaMatches;
+        mediaMatches = e.matches;
+        
+        if (e.matches && !previousMatches) {
+            // Media query now matches - wake up and process elements
+            handleMediaMatch();
+        } else if (!e.matches && previousMatches) {
+            // Media query no longer matches - dismount all elements
+            handleMediaUnmatch();
+        }
+    };
+    
+    function handleMediaMatch(): void {
+        // Dispatch mediamatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaMatchEvent(init));
+        }
+        
+        // Process all elements in the observed node
+        const rootNode = rootNodeRef.deref();
+        if (rootNode) {
+            processNode(rootNode);
+        }
+    }
+    
+    function handleMediaUnmatch(): void {
+        // Dispatch mediaunmatch event if requested
+        if (init.getPlayByPlay) {
+            observer.dispatchEvent(new MediaUnmatchEvent(init));
+        }
+        
+        // Dismount all currently mounted elements
+        const rootNode = rootNodeRef.deref();
+        if (!rootNode) {
+            return;
+        }
+        
+        const context: MountContext = {
+            modules,
+            observer: observer as any,
+            observeInfo: {
+                rootNode
+            }
+        };
+        
+        // Get all mounted elements (we need to iterate through the DOM to find them)
+        const mountedElementsList: Element[] = [];
+        const collectMountedElements = (node: Node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node as Element;
+                if (mountedElements.has(element)) {
+                    mountedElementsList.push(element);
+                }
+            }
+            node.childNodes.forEach(child => collectMountedElements(child));
+        };
+        collectMountedElements(rootNode);
+        
+        // Dismount each element
+        for (const element of mountedElementsList) {
+            mountedElements.delete(element);
+            
+            // 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));
+        }
+    }
+    
+    mediaQueryList.addEventListener('change', mediaChangeHandler);
+    
+    return {
+        mediaQueryList,
+        mediaMatches,
+        cleanup: () => {
+            mediaQueryList.removeEventListener('change', mediaChangeHandler);
+        }
+    };
+}

package/package.json

@@ -1,145 +1,37 @@
 {
   "name": "mount-observer",
-  "version": "0.0.112",
+  "version": "0.1.1",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
+  "dependencies": {
+    "assign-gingerly": "0.0.2"
+  },
   "devDependencies": {
-    "@playwright/test": "1.57.0",
-    "spa-ssi": "0.0.25"
+    "@playwright/test": "1.58.0",
+    "spa-ssi": "0.0.26"
   },
   "exports": {
     ".": {
-      "default": "./MountObserver.js",
-      "types": "./MountObserver.ts"
+      "default": "./index.js",
+      "types": "./index.ts"
     },
     "./MountObserver.js": {
       "default": "./MountObserver.js",
       "types": "./MountObserver.ts"
-    },
-    "./Newish.js": {
-      "default": "./Newish.js",
-      "types": "./Newish.ts"
-    },
-    "./ObsAttr.js": {
-      "default": "./ObsAttr.js",
-      "types": "./ObsAttr.ts"
-    },
-    "./Synthesizer.js": {
-      "default": "./Synthesizer.js",
-      "types": "./Synthesizer.ts"
-    },
-    "./bindish.js": {
-      "default": "./bindish.js",
-      "types": "./bindish.ts"
-    },
-    "./compose.js": {
-      "default": "./compose.js",
-      "types": "./compose.ts"
-    },
-    "./doCleanup.js": {
-      "default": "./doCleanup.js",
-      "types": "./doCleanup.ts"
-    },
-    "./upShadowSearch.js": {
-      "default": "./upShadowSearch.js",
-      "types": "./upShadowSearch.ts"
-    },
-    "./waitForEvent.js": {
-      "default": "./waitForEvent.js",
-      "types": "./waitForEvent.ts"
-    },
-    "./waitForIsh.js": {
-      "default": "./waitForIsh.js",
-      "types": "./waitForIsh.ts"
-    },
-    "./refid/camelToKebab.js": {
-      "default": "./refid/camelToKebab.js",
-      "types": "./refid/camelToKebab.ts"
-    },
-    "./refid/refid/genIds.js": {
-      "default": "./refid/refid/genIds.js",
-      "types": "./refid/refid/genIds.ts"
-    },
-    "./refid/getAdjRefs.js": {
-      "default": "./refid/getAdjRefs.js",
-      "types": "./refid/getAdjRefs.ts"
-    },
-    "./refid/getContext.js": {
-      "default": "./refid/getContext.js",
-      "types": "./refid/getContext.ts"
-    },
-    "./refid/getCount.js": {
-      "default": "./refid/getCount.js",
-      "types": "./refid/getCount.ts"
-    },
-    "./refid/ism.js": {
-      "default": "./refid/ism.js",
-      "types": "./refid/ism.ts"
-    },
-    "./refid/itemprops.js": {
-      "default": "./refid/itemprops.js",
-      "types": "./refid/itemprops.ts"
-    },
-    "./refid/joinMatching.js": {
-      "default": "./refid/joinMatching.js",
-      "types": "./refid/joinMatching.ts"
-    },
-    "./refid/nudge.js": {
-      "default": "./refid/nudge.js",
-      "types": "./refid/nudge.ts"
-    },
-    "./refid/refs.js": {
-      "default": "./refid/refs.js",
-      "types": "./refid/refs.ts"
-    },
-    "./refid/regIsh.js": {
-      "default": "./refid/regIsh.js",
-      "types": "./refid/regIsh.ts"
-    },
-    "./refid/splitRefs.js": {
-      "default": "./refid/splitRefs.js",
-      "types": "./refid/splitRefs.ts"
-    },
-    "./refid/stdVal.js": {
-      "default": "./refid/stdVal.js",
-      "types": "./refid/stdVal.ts"
-    },
-    "./refid/via.js": {
-      "default": "./refid/via.js",
-      "types": "./refid/via.ts"
-    },
-    "./slotkin/beKindred.js": {
-      "default": "./slotkin/beKindred.js",
-      "types": "./slotkin/beKindred.ts"
-    },
-    "./slotkin/getBreadth.js": {
-      "default": "./slotkin/getBreadth.js",
-      "types": "./slotkin/getBreadth.ts"
-    },
-    "./slotkin/getFrag.js": {
-      "default": "./slotkin/getFrag.js",
-      "types": "./slotkin/getFrag.ts"
-    },
-    "./slotkin/wrap.js": {
-      "default": "./slotkin/wrap.js",
-      "types": "./slotkin/wrap.ts"
     }
   },
   "files": [
     "*.js",
-    "*.ts",
-    "./ts-refs/*",
-    "./refid/*",
-    "./slotkin/*"
+    "*.ts"
   ],
-  "types": "./ts-refs/mount-observer/types.d.ts",
+  "types": "./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": "",
+  "author": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
   "license": "MIT"
 }

package/playwright.config.ts

@@ -15,7 +15,6 @@ const config: PlaywrightTestConfig = {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-    //firefox lacks support for import assertions
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },