mount-observer 0.1.13 → 0.1.15

package/handlers/EvtRt.js

@@ -0,0 +1,59 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _EvtRt_ac;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EvtRt = void 0;
+var Events_js_1 = require("./Events.js");
+var MountObserver_js_1 = require("./MountObserver.js");
+var EvtRt = /** @class */ (function () {
+    function EvtRt(mountedElement, ctx) {
+        _EvtRt_ac.set(this, void 0);
+        var observer = ctx.observer, mountConfig = ctx.mountConfig;
+        __classPrivateFieldSet(this, _EvtRt_ac, new AbortController(), "f");
+        var et = observer.getNotifier(mountedElement);
+        et.addEventListener(Events_js_1.mountEventName, this, { signal: __classPrivateFieldGet(this, _EvtRt_ac, "f").signal });
+        et.addEventListener(Events_js_1.disconnectEventName, this, { signal: __classPrivateFieldGet(this, _EvtRt_ac, "f").signal });
+        et.addEventListener(Events_js_1.dismountEventName, this, { signal: __classPrivateFieldGet(this, _EvtRt_ac, "f").signal });
+        this.mount(mountedElement, mountConfig, ctx);
+    }
+    EvtRt.prototype.abort = function () {
+        __classPrivateFieldGet(this, _EvtRt_ac, "f").abort();
+    };
+    EvtRt.prototype.mount = function (mountedElement, mountConfig, context) {
+        console.log({ mountedElement: mountedElement, mountConfig: mountConfig, context: context });
+    };
+    EvtRt.prototype.disconnect = function (mountedElement, mountConfig) {
+        console.log({ mountedElement: mountedElement, mountConfig: mountConfig });
+    };
+    EvtRt.prototype.dismount = function (mountedElement, mountConfig) {
+        console.log({ mountedElement: mountedElement, mountConfig: mountConfig });
+    };
+    EvtRt.prototype.handleEvent = function (evt) {
+        if (evt instanceof Events_js_1.MountEvent) {
+            var mountedElement = evt.mountedElement, mountContext = evt.mountContext, mountConfig = evt.mountConfig;
+            this.mount(mountedElement, mountConfig, mountContext);
+        }
+        else if (evt instanceof Events_js_1.DismountEvent) {
+            var mountedElement = evt.mountedElement, mountConfig = evt.mountConfig;
+            this.dismount(mountedElement, mountConfig);
+        }
+        else if (evt instanceof Events_js_1.DisconnectEvent) {
+            var mountedElement = evt.mountedElement, mountConfig = evt.mountConfig;
+            this.disconnect(mountedElement, mountConfig);
+        }
+    };
+    return EvtRt;
+}());
+exports.EvtRt = EvtRt;
+_EvtRt_ac = new WeakMap();
+MountObserver_js_1.MountObserver.define('builtIns.logToConsole', EvtRt);

package/handlers/GenIds.js

@@ -0,0 +1,37 @@
+import { EvtRt } from '../EvtRt.js';
+/**
+ * Handler for automatically generating IDs when elements with -id attribute are mounted.
+ * This handler integrates with the id-generation package to provide automatic ID generation
+ * for elements within scoped containers (fieldset, [itemscope], or root).
+ *
+ * Usage:
+ * ```javascript
+ * document.mount({
+ *     do: 'builtIns.generateIds'
+ * });
+ * ```
+ *
+ * The handler will automatically:
+ * 1. Watch for elements with the -id attribute
+ * 2. Call genIds from id-generation package
+ * 3. Generate IDs for elements with data-id, #, @, or | attributes
+ * 4. Replace #{{name}} references with generated IDs
+ * 5. Remove -id and defer-* attributes after processing
+ */
+export class GenerateIdsHandler extends EvtRt {
+    // Static properties to define matching criteria
+    static matching = '[-id]';
+    static whereInstanceOf = Element;
+    async mount(mountedElement, mountConfig, context) {
+        this.abort();
+        // Dynamically import processScope from id-generation
+        const { genIds } = await import('id-generation/genIds.js');
+        // Get the root node for fallback container
+        const rootNode = context.rootNode || document;
+        // Process the scope starting from this trigger element
+        genIds(mountedElement, rootNode);
+    }
+}
+// Register built-in handler
+import { MountObserver } from '../MountObserver.js';
+MountObserver.define('builtIns.generateIds', GenerateIdsHandler);

package/handlers/GenIds.ts

@@ -0,0 +1,45 @@
+import { EvtRt } from '../EvtRt.js';
+import { MountConfig, MountContext } from '../types/mount-observer/types.js';
+
+/**
+ * Handler for automatically generating IDs when elements with -id attribute are mounted.
+ * This handler integrates with the id-generation package to provide automatic ID generation
+ * for elements within scoped containers (fieldset, [itemscope], or root).
+ * 
+ * Usage:
+ * ```javascript
+ * document.mount({
+ *     do: 'builtIns.generateIds'
+ * });
+ * ```
+ * 
+ * The handler will automatically:
+ * 1. Watch for elements with the -id attribute
+ * 2. Call genIds from id-generation package
+ * 3. Generate IDs for elements with data-id, #, @, or | attributes
+ * 4. Replace #{{name}} references with generated IDs
+ * 5. Remove -id and defer-* attributes after processing
+ */
+export class GenerateIdsHandler extends EvtRt {
+    // Static properties to define matching criteria
+    static matching = '[-id]';
+    static whereInstanceOf = Element;
+    
+    async mount(mountedElement: Element, mountConfig: MountConfig, context: MountContext) {
+        this.abort();
+        
+        // Dynamically import processScope from id-generation
+        const { genIds } = await import('id-generation/genIds.js');
+        
+        // Get the root node for fallback container
+        const rootNode = context.rootNode || document;
+        
+        // Process the scope starting from this trigger element
+        genIds(mountedElement, rootNode);
+    }
+}
+
+// Register built-in handler
+import { MountObserver } from '../MountObserver.js';
+
+MountObserver.define('builtIns.generateIds', GenerateIdsHandler);

package/handlers/HTMLInclude.js

@@ -0,0 +1,393 @@
+import { EvtRt } from '../EvtRt.js';
+import { upShadowSearch } from '../upShadowSearch.js';
+/**
+ * Cache for element lookups by ID.
+ * Maps root nodes to a map of ID -> WeakRef<Element> for performance.
+ */
+const idCache = new WeakMap();
+/**
+ * Tracks IDs currently being processed to detect circular references.
+ */
+const processingStack = new Set();
+/**
+ * Splits a space-separated string of attribute names into an array.
+ */
+function splitRefs(refs) {
+    return refs
+        .split(' ')
+        .map(s => s.trim())
+        .filter(s => !!s);
+}
+/**
+ * Creates a CSS selector from an element's attributes, classes, and tag name.
+ * Excludes the -i attribute and any attributes listed in -i from the selector.
+ */
+function toQuery(el) {
+    // Get the list of attributes to exclude from the selector
+    const insertAttrs = el.getAttribute('-i');
+    const excludeAttrs = new Set(['-i']); // Always exclude -i itself
+    if (insertAttrs !== null) {
+        const attrs = splitRefs(insertAttrs);
+        attrs.forEach(attr => excludeAttrs.add(attr));
+    }
+    const classes = Array.from(el.classList).map(c => `.${c}`).join('');
+    const parts = Array.from(el.part).map(p => `[part~="${p}"]`).join('');
+    const attributes = Array.from(el.attributes)
+        .filter(attr => !excludeAttrs.has(attr.name))
+        .map(attr => `[${attr.name}="${attr.value}"]`)
+        .join('');
+    const { localName } = el;
+    return `${localName}${classes}${parts}${attributes}`;
+}
+/**
+ * Prepares an element for insertion by extracting its children and insertion attributes.
+ * Returns a DocumentFragment with the children and a map of attributes to insert.
+ */
+function prepareForInsertion(el) {
+    const fragment = new DocumentFragment();
+    const clone = el.cloneNode(true);
+    // Move all children to the fragment
+    while (clone.firstChild) {
+        fragment.appendChild(clone.firstChild);
+    }
+    // Check for -i attribute which specifies which attributes to insert
+    const insertAttrs = el.getAttribute('-i');
+    let attributeMap = null;
+    if (insertAttrs !== null) {
+        const attrs = splitRefs(insertAttrs);
+        attributeMap = {};
+        for (const attr of attrs) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeMap[attr] = value;
+            }
+        }
+    }
+    return { fragment, attributeMap };
+}
+/**
+ * Applies insertion to a matched element by replacing its children and updating attributes.
+ */
+function applyInsertion(targetElement, sourceFragment, attributeMap) {
+    // Clone the fragment so it can be reused
+    const fragmentClone = sourceFragment.cloneNode(true);
+    // Replace all children of the target element
+    targetElement.replaceChildren(fragmentClone);
+    // Update attributes if specified
+    if (attributeMap !== null) {
+        for (const key in attributeMap) {
+            const value = attributeMap[key];
+            targetElement.setAttribute(key, value);
+        }
+    }
+}
+/**
+ * Handler that enables HTML fragment reuse via template[src="#id"] syntax.
+ *
+ * This handler allows declarative reuse of HTML fragments by cloning content from
+ * any element with an ID. It's similar to JavaScript constants for HTML.
+ *
+ * Features:
+ * - Clones content from templates (including hoisted templates with remoteContent)
+ * - Clones any element with an ID
+ * - Supports matching insertions: template children can match and modify cloned content
+ * - Caches lookups for performance (useful for repeated references like periodic tables)
+ * - Detects circular references
+ * - Searches across shadow DOM boundaries
+ *
+ * Matching Insertions:
+ * When a template has children, they are used to match elements in the cloned content
+ * and replace their children/attributes. This enables partial updates and "nulling out" content.
+ *
+ * The -i attribute specifies which attributes to insert/update on matched elements.
+ *
+ * @example Basic usage
+ * ```html
+ * <div id="reusable">
+ *   <p>This content can be reused</p>
+ * </div>
+ *
+ * <template src="#reusable"></template>
+ * <!-- Results in: <div><p>This content can be reused</p></div> -->
+ * ```
+ *
+ * @example Matching insertions
+ * ```html
+ * <div itemscope id="love">
+ *   <data value="false" itemprop="todayIsFriday">It's Thursday</data>
+ * </div>
+ *
+ * <template src="#love">
+ *   <data value="true" itemprop="todayIsFriday" -i="value"></data>
+ * </template>
+ * <!-- Results in:
+ * <div itemscope>
+ *   <data value="true" itemprop="todayIsFriday">It's Thursday</data>
+ * </div>
+ * The matched element's value attribute is updated, but children are replaced
+ * -->
+ * ```
+ */
+export class HTMLIncludeHandler extends EvtRt {
+    static matching = 'template[src^="#"]';
+    static whereInstanceOf = HTMLTemplateElement;
+    async mount(mountedElement) {
+        try {
+            const template = mountedElement;
+            const src = template.getAttribute('src');
+            if (!src || !src.startsWith('#')) {
+                console.warn('HTMLInclude: Invalid src attribute, must start with #');
+                return;
+            }
+            const id = src.substring(1);
+            // Try cache first
+            const rootNode = template.getRootNode();
+            let sourceElement = this.getCachedElement(rootNode, id);
+            if (!sourceElement) {
+                // Search up through shadow roots
+                sourceElement = upShadowSearch(template, id);
+                if (!sourceElement) {
+                    const error = `Element with id="${id}" not found`;
+                    template.setAttribute('data-include-error', error);
+                    console.warn(`HTMLInclude: ${error}`);
+                    return;
+                }
+                // Cache the result
+                this.cacheElement(rootNode, id, sourceElement);
+            }
+            // Check for circular references only if source is also a template with src
+            if (sourceElement instanceof HTMLTemplateElement && sourceElement.hasAttribute('src')) {
+                const sourceId = sourceElement.getAttribute('id');
+                if (sourceId && processingStack.has(sourceId)) {
+                    const error = `Circular reference detected: #${id}`;
+                    template.setAttribute('data-include-error', error);
+                    console.error(`HTMLInclude: ${error}`);
+                    return;
+                }
+            }
+            // Mark this template as processing (for circular reference detection)
+            const templateId = template.getAttribute('id');
+            if (templateId) {
+                processingStack.add(templateId);
+            }
+            try {
+                // Clone the content
+                const { clone, isLiveElement } = this.cloneContent(sourceElement);
+                if (!clone) {
+                    const error = `Unable to clone content from #${id}`;
+                    template.setAttribute('data-include-error', error);
+                    console.warn(`HTMLInclude: ${error}`);
+                    return;
+                }
+                // Optimization 4: Copy MOSE exports if cloning live element from different root
+                if (isLiveElement) {
+                    await this.copyMoseExports(sourceElement, clone, rootNode);
+                }
+                // Check if the template has children - if so, process matching insertions
+                const templateChildren = Array.from(template.content.children);
+                if (templateChildren.length > 0) {
+                    // Process matching insertions for each child in the template
+                    this.processMatchingInsertions(clone, templateChildren);
+                }
+                // Remove ID from cloned element to avoid duplicate IDs in the DOM
+                if (clone instanceof Element && clone.hasAttribute('id')) {
+                    clone.removeAttribute('id');
+                }
+                // Check for shadowRootModeOnLoad attribute
+                const shadowRootMode = template.getAttribute('shadowrootmodeonload');
+                if (shadowRootMode) {
+                    // Shadow DOM mode - attach to parent's shadow root
+                    const parent = template.parentElement;
+                    if (!parent) {
+                        console.warn('HTMLInclude: Cannot attach shadow root - template has no parent element');
+                        return;
+                    }
+                    // Validate shadow root mode
+                    if (shadowRootMode !== 'open' && shadowRootMode !== 'closed') {
+                        console.warn(`HTMLInclude: Invalid shadowRootModeOnLoad value "${shadowRootMode}", must be "open" or "closed"`);
+                        return;
+                    }
+                    // Get or create shadow root
+                    let shadowRoot = parent.shadowRoot;
+                    if (!shadowRoot) {
+                        try {
+                            shadowRoot = parent.attachShadow({ mode: shadowRootMode });
+                        }
+                        catch (error) {
+                            console.error('HTMLInclude: Failed to attach shadow root:', error);
+                            return;
+                        }
+                    }
+                    // Append clone to shadow root
+                    shadowRoot.appendChild(clone);
+                    template.remove();
+                }
+                else {
+                    // Normal mode - insert before template
+                    template.parentNode?.insertBefore(clone, template);
+                    template.remove();
+                }
+            }
+            finally {
+                // Always remove from processing stack
+                if (templateId) {
+                    processingStack.delete(templateId);
+                }
+            }
+        }
+        catch (error) {
+            console.error('HTMLInclude: Unexpected error:', error);
+        }
+    }
+    /**
+     * Gets a cached element reference if available and still valid.
+     */
+    getCachedElement(rootNode, id) {
+        const rootCache = idCache.get(rootNode);
+        if (!rootCache)
+            return null;
+        const weakRef = rootCache.get(id);
+        if (!weakRef)
+            return null;
+        const element = weakRef.deref();
+        if (!element) {
+            // Element was garbage collected, remove from cache
+            rootCache.delete(id);
+            return null;
+        }
+        return element;
+    }
+    /**
+     * Caches an element reference for future lookups.
+     */
+    cacheElement(rootNode, id, element) {
+        let rootCache = idCache.get(rootNode);
+        if (!rootCache) {
+            rootCache = new Map();
+            idCache.set(rootNode, rootCache);
+        }
+        rootCache.set(id, new WeakRef(element));
+    }
+    /**
+     * Processes matching insertions by finding elements in the cloned content that match
+     * the selectors from template children and applying insertions to them.
+     */
+    processMatchingInsertions(clonedContent, templateChildren) {
+        // For each child in the template, find matching elements in the cloned content
+        for (const templateChild of templateChildren) {
+            // Generate a selector from the template child
+            const selector = toQuery(templateChild);
+            // Prepare the insertion content and attribute map
+            const { fragment, attributeMap } = prepareForInsertion(templateChild);
+            // Find all matching elements in the cloned content
+            let matchingElements = [];
+            if (clonedContent instanceof Element) {
+                // Check if the cloned element itself matches
+                if (clonedContent.matches(selector)) {
+                    matchingElements.push(clonedContent);
+                }
+                // Find matching descendants
+                const descendants = Array.from(clonedContent.querySelectorAll(selector));
+                matchingElements = [...matchingElements, ...descendants];
+            }
+            else if (clonedContent instanceof DocumentFragment) {
+                // Search within the fragment
+                matchingElements = Array.from(clonedContent.querySelectorAll(selector));
+            }
+            // Apply insertion to each matching element
+            for (const matchingElement of matchingElements) {
+                applyInsertion(matchingElement, fragment, attributeMap);
+            }
+        }
+    }
+    /**
+     * Clones content from the source element.
+     * Priority: remoteContent (hoisted templates) > content (templates) > element itself
+     * Returns an object with the cloned node and whether it was cloned from a live element
+     */
+    cloneContent(sourceElement) {
+        // Check for remoteContent property (hoisted templates)
+        if ('remoteContent' in sourceElement) {
+            try {
+                const remoteContent = sourceElement.remoteContent;
+                return { clone: remoteContent.cloneNode(true), isLiveElement: false };
+            }
+            catch (e) {
+                console.warn('HTMLInclude: Failed to access remoteContent', e);
+            }
+        }
+        // Check for content property (regular templates)
+        if (sourceElement instanceof HTMLTemplateElement && sourceElement.content) {
+            return { clone: sourceElement.content.cloneNode(true), isLiveElement: false };
+        }
+        // Clone the element itself (live DOM element)
+        return { clone: sourceElement.cloneNode(true), isLiveElement: true };
+    }
+    /**
+     * Copies MOSE script exports from source to cloned scripts.
+     * This optimization avoids re-parsing JSON when cloning MOSE scripts across shadow boundaries.
+     */
+    async copyMoseExports(sourceElement, clone, templateRootNode) {
+        const sourceRootNode = sourceElement.getRootNode();
+        // Only process if source and template are in different root nodes
+        if (sourceRootNode === templateRootNode) {
+            return;
+        }
+        // Find all MOSE scripts in the source element
+        const sourceScripts = sourceElement.querySelectorAll('script[type="mountobserver"]');
+        if (sourceScripts.length === 0) {
+            return;
+        }
+        // Find all MOSE scripts in the clone
+        let cloneScripts;
+        if (clone instanceof Element) {
+            cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
+        }
+        else if (clone instanceof DocumentFragment) {
+            cloneScripts = clone.querySelectorAll('script[type="mountobserver"]');
+        }
+        else {
+            return;
+        }
+        // Copy exports from source scripts to cloned scripts (matching by ID)
+        for (let i = 0; i < sourceScripts.length; i++) {
+            const sourceScript = sourceScripts[i];
+            const sourceId = sourceScript.getAttribute('id');
+            if (!sourceId)
+                continue;
+            // Find matching clone script by ID
+            const cloneScript = Array.from(cloneScripts).find(s => s.getAttribute('id') === sourceId);
+            if (!cloneScript)
+                continue;
+            // Check if source script has export
+            let sourceExport = sourceScript.export;
+            if (!sourceExport) {
+                // Wait for the source script to resolve
+                try {
+                    // Create a promise that waits for the resolved event
+                    const event = await new Promise((resolve, reject) => {
+                        const timeout = setTimeout(() => {
+                            reject(new Error('Timeout'));
+                        }, 5000);
+                        sourceScript.addEventListener('resolved', (e) => {
+                            clearTimeout(timeout);
+                            resolve(e);
+                        }, { once: true });
+                    });
+                    sourceExport = event.export;
+                }
+                catch (error) {
+                    console.warn(`HTMLInclude: Timeout waiting for MOSE script #${sourceId} to resolve`);
+                    continue;
+                }
+            }
+            // Copy export to cloned script
+            if (sourceExport) {
+                cloneScript.export = sourceExport;
+            }
+        }
+    }
+}
+// Register the handler
+import { MountObserver } from '../MountObserver.js';
+MountObserver.define('builtIns.HTMLInclude', HTMLIncludeHandler);