mount-observer 0.0.111 → 0.1.0

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/package.json

@@ -1,133 +1,26 @@
 {
   "name": "mount-observer",
-  "version": "0.0.111",
+  "version": "0.1.0",
   "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"
-    },
-    "./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/via.js": {
-      "default": "./refid/via.js",
-      "types": "./refid/via.ts"
-    },
-    "./refid/splitRefs.js": {
-      "default": "./refid/splitRefs.js",
-      "types": "./refid/splitRefs.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",
   "scripts": {

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'] },

package/types.d.ts

@@ -0,0 +1,86 @@
+// Core types for MountObserver v2 - Polyfill Supported Scenario I
+
+export interface MountInit {
+    whereElementMatches: string;
+    whereAttr?: WhereAttr;
+    import?: string | ImportSpec | Array<string | ImportSpec>;
+    do?: DoCallback | DoCallbacks;
+    loadingEagerness?: 'eager' | 'lazy';
+    assignGingerly?: Record<string, any>;
+    map?: MapConfig;
+}
+
+export interface MapConfig {
+    [coordinate: string]: MapEntry;
+}
+
+export interface MapEntry {
+    instanceOf?: string;
+    mapsTo?: string;
+    [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;
+    type?: 'js' | 'css' | 'json' | 'html';
+}
+
+export interface MountContext {
+    modules: any[];
+    observer: IMountObserver;
+    observeInfo: ObserveInfo;
+}
+
+export interface ObserveInfo {
+    rootNode: Node;
+}
+
+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 interface MountObserverOptions {
+    disconnectedSignal?: AbortSignal;
+}
+
+export interface IMountObserver extends EventTarget {
+    observe(rootNode: Node): Promise<void>;
+    disconnect(): void;
+    disconnectedSignal: AbortSignal;
+}
+
+export interface IMountEvent extends Event {
+    matchingElement: Element;
+    modules: any[];
+}
+
+export interface IDismountEvent extends Event {
+    matchingElement: Element;
+}
+
+export interface IAttrChangeEvent extends Event {
+    changes: AttrChange[];
+}
+
+export interface AttrChange {
+    value: string | null;
+    attrNode: Attr | null;
+    mapEntry: MapEntry | null;
+    attrName: string;
+    coordinate: string;
+    element: Element;
+}

package/whereAttr.js

@@ -0,0 +1,174 @@
+const selectorCache = new WeakMap();
+/**
+ * Checks if an element matches the whereAttr configuration using CSS selector matching
+ */
+export function matchesWhereAttr(element, whereAttr) {
+    // Get or build the CSS selectors for this whereAttr config
+    let selectors = selectorCache.get(whereAttr);
+    if (!selectors) {
+        selectors = {
+            builtIn: buildWhereAttrSelector(false, whereAttr),
+            custom: buildWhereAttrSelector(true, whereAttr)
+        };
+        selectorCache.set(whereAttr, selectors);
+    }
+    // Determine which selector to use based on element type
+    const isCustomElement = element.tagName.toLowerCase().includes('-');
+    const selector = isCustomElement ? selectors.custom : selectors.builtIn;
+    // Use native CSS matching - optimized in Chrome/Blink
+    return element.matches(selector);
+}
+/**
+ * Builds a CSS selector string from the whereAttr configuration
+ * @param isCustomElement - Whether to build selector for custom elements (true) or built-in elements (false)
+ */
+function buildWhereAttrSelector(isCustomElement, whereAttr) {
+    const rootPrefixes = isCustomElement
+        ? (whereAttr.hasCERootIn || [])
+        : (whereAttr.hasBuiltInRootIn || []);
+    // Parse base attribute for custom delimiter
+    const { delimiter: baseDelimiter, name: baseName } = parseDelimiter(whereAttr.hasBase);
+    const selectors = [];
+    // Build selectors for each valid prefix
+    for (const prefix of rootPrefixes) {
+        const baseAttrName = buildAttributeName(prefix, baseName, baseDelimiter);
+        const escapedBaseAttr = escapeAttributeName(baseAttrName);
+        // If no branches specified, just having the base attribute is enough
+        if (!whereAttr.hasBranchIn || whereAttr.hasBranchIn.length === 0) {
+            selectors.push(`[${escapedBaseAttr}]`);
+            continue;
+        }
+        // Build selectors for each branch combination
+        for (const branch of whereAttr.hasBranchIn) {
+            if (branch === '') {
+                // Empty string means base attribute alone is valid (no branch attributes)
+                // This requires base attr AND none of the branch attrs
+                // For CSS, we can only check for base attr presence
+                // The "no branch attrs" check needs to be done separately
+                selectors.push(`[${escapedBaseAttr}]`);
+                continue;
+            }
+            if (typeof branch === 'object') {
+                // Build selectors for each branch path
+                for (const [key, subBranches] of Object.entries(branch)) {
+                    const branchSelectors = buildBranchSelectors(baseAttrName, key, subBranches);
+                    selectors.push(...branchSelectors);
+                }
+            }
+        }
+    }
+    // Join all selectors with comma (OR logic)
+    return selectors.join(',');
+}
+/**
+ * Builds CSS selectors for a branch and its sub-branches
+ */
+function buildBranchSelectors(baseAttrName, branchKey, subBranches) {
+    const { delimiter: branchDelimiter, name: branchName } = parseDelimiter(branchKey);
+    const branchAttrName = baseAttrName + branchDelimiter + branchName;
+    const escapedBranchAttr = escapeAttributeName(branchAttrName);
+    const selectors = [];
+    // If no sub-branches specified, just the branch attribute itself
+    if (!subBranches || subBranches.length === 0) {
+        selectors.push(`[${escapedBranchAttr}]`);
+        return selectors;
+    }
+    // Build selectors for each sub-branch - they form an OR condition
+    for (const subBranch of subBranches) {
+        if (subBranch === '') {
+            // Empty string means this branch level alone is valid
+            selectors.push(`[${escapedBranchAttr}]`);
+            continue;
+        }
+        if (typeof subBranch === 'string') {
+            // Simple string sub-branch - build the full path
+            const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
+            const subAttrName = branchAttrName + subDelimiter + subName;
+            const escapedSubAttr = escapeAttributeName(subAttrName);
+            selectors.push(`[${escapedSubAttr}]`);
+            continue;
+        }
+        if (typeof subBranch === 'object') {
+            // Nested object sub-branch - recursively build deeper paths
+            for (const [key, nestedBranches] of Object.entries(subBranch)) {
+                const nestedSelectors = buildNestedBranchSelectors(branchAttrName, key, nestedBranches);
+                selectors.push(...nestedSelectors);
+            }
+        }
+    }
+    return selectors;
+}
+/**
+ * Builds CSS selectors for nested branches recursively
+ */
+function buildNestedBranchSelectors(parentAttrName, branchKey, subBranches) {
+    const { delimiter, name } = parseDelimiter(branchKey);
+    const attrName = parentAttrName + delimiter + name;
+    const escapedAttr = escapeAttributeName(attrName);
+    const selectors = [];
+    // If no sub-branches specified, just this attribute
+    if (!subBranches || subBranches.length === 0) {
+        selectors.push(`[${escapedAttr}]`);
+        return selectors;
+    }
+    // Build selectors for each sub-branch - they form an OR condition
+    for (const subBranch of subBranches) {
+        if (subBranch === '') {
+            // Empty string means this level alone is valid
+            selectors.push(`[${escapedAttr}]`);
+            continue;
+        }
+        if (typeof subBranch === 'string') {
+            // Simple string sub-branch - build the full path
+            const { delimiter: subDelimiter, name: subName } = parseDelimiter(subBranch);
+            const subAttrName = attrName + subDelimiter + subName;
+            const escapedSubAttr = escapeAttributeName(subAttrName);
+            selectors.push(`[${escapedSubAttr}]`);
+            continue;
+        }
+        if (typeof subBranch === 'object') {
+            // Nested object - recursively build deeper paths
+            for (const [key, nestedBranches] of Object.entries(subBranch)) {
+                const nestedSelectors = buildNestedBranchSelectors(attrName, key, nestedBranches);
+                selectors.push(...nestedSelectors);
+            }
+        }
+    }
+    return selectors;
+}
+/**
+ * Escapes special characters in attribute names for CSS selectors
+ * Uses CSS.escape() API which handles all special characters including :
+ */
+function escapeAttributeName(attrName) {
+    // CSS.escape() is available in all modern browsers
+    // It properly escapes special characters like : . [ ] etc.
+    return CSS.escape(attrName);
+}
+/**
+ * Parses a key to extract custom delimiter and name
+ * Format: [delimiter]name
+ * Example: "[_]my-custom" returns { delimiter: "_", name: "my-custom" }
+ */
+function parseDelimiter(key) {
+    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, baseName, delimiter) {
+    if (prefix === '') {
+        return baseName;
+    }
+    return prefix + delimiter + baseName;
+}