mount-observer 0.1.14 → 0.1.16

package/{EnhanceMountedElementHandler.js → handlers/EnhanceMountedElement.js}

@@ -1,96 +1,109 @@
-import { EvtRt } from './EvtRt.js';
-//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
-import 'assign-gingerly/object-extension.js';
-/**
- * Handler for automatically enhancing mounted elements using assign-gingerly.
- * Searches the first imported module for an export with a "spawn" property
- * and uses element.enh.get() to spawn the enhancement.
- */
-export class EnhanceMountedElementHandler extends EvtRt {
-    async mount(mountedElement, MountConfig, context) {
-        this.abort();
-        // Check if modules are specified
-        if (!context.modules || context.modules.length === 0) {
-            throw new Error('Must specify an ES Module with import property');
-        }
-        const module = context.modules[0];
-        // Find registry item (object with spawn property)
-        const registryItem = await this._findRegistryItem(module, mountedElement);
-        if (!registryItem) {
-            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
-        }
-        // Validate spawn is a constructor
-        if (typeof registryItem.spawn !== 'function') {
-            throw new Error('Registry item "spawn" property must be a constructor function');
-        }
-        // Spawn the enhancement
-        this.#spawnEnhancement(mountedElement, registryItem, context);
-    }
-    /**
-     * Spawn the enhancement using element.enh.get().
-     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
-     */
-    #spawnEnhancement(element, registryItem, context) {
-        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
-        if (!element.customElementRegistry) {
-            Object.defineProperty(element, 'customElementRegistry', {
-                value: customElements,
-                writable: true,
-                enumerable: false,
-                configurable: true
-            });
-        }
-        // Use element.enh.get() to spawn the enhancement
-        const enh = element.enh;
-        if (!enh || typeof enh.get !== 'function') {
-            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
-        }
-        enh.get(registryItem, context);
-    }
-    /**
-     * Find a registry item in the module exports.
-     * A registry item is an object with a "spawn" property.
-     * @param module - The imported module
-     * @returns The registry item or null if not found
-     */
-    async _findRegistryItem(module, el) {
-        // Check default export first
-        if (module.default && await this._isRegistryItem(module.default, el)) {
-            return module.default;
-        }
-        // Search all exports for a registry item
-        const exports = Object.values(module);
-        const registryItems = [];
-        for (const e of exports) {
-            const isRegistryItem = await this._isRegistryItem(e, el);
-            if (isRegistryItem)
-                registryItems.push(e);
-        }
-        if (registryItems.length === 0) {
-            return null;
-        }
-        if (registryItems.length > 1) {
-            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
-        }
-        return registryItems[0];
-    }
-    /**
-     * Check if an export is a registry item (has a spawn property).
-     * @param exp - The export to check
-     * @returns True if the export is a registry item
-     */
-    async _isRegistryItem(exp, mountedElement) {
-        let test = exp !== null
-            && typeof exp === 'object'
-            && 'spawn' in exp
-            && typeof exp.spawn === 'function';
-        if (!test)
-            return false;
-        const emc = exp;
-        if (emc.withAttrs !== undefined) {
-            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
-            return mountedElement.matches(cssQuery);
-        }
-        return true;
-    }
-}
+import { EvtRt } from '../EvtRt.js';
+//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
+import 'assign-gingerly/object-extension.js';
+/**
+ * Handler for automatically enhancing mounted elements using assign-gingerly.
+ * Searches the first imported module for an export with a "spawn" property
+ * and uses element.enh.get() to spawn the enhancement.
+ */
+export class EnhanceMountedElementHandler extends EvtRt {
+    async mount(mountedElement, MountConfig, context) {
+        this.abort();
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module with import property');
+        }
+        const module = context.modules[0];
+        // Find registry item (object with spawn property)
+        const registryItem = await this._findRegistryItem(module, mountedElement);
+        if (!registryItem) {
+            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
+        }
+        // Validate spawn is a constructor
+        if (typeof registryItem.spawn !== 'function') {
+            throw new Error('Registry item "spawn" property must be a constructor function');
+        }
+        const tbd = context?.observer?.options?.mose;
+        if (tbd) {
+            const se = tbd.deref();
+            const { parentElement } = se;
+            const { enhKey } = registryItem;
+            if (!se.id && enhKey) {
+                se.id = `${parentElement?.localName}.${enhKey}`;
+            }
+        }
+        console.log({ tbd });
+        // Spawn the enhancement
+        this.#spawnEnhancement(mountedElement, registryItem, context);
+    }
+    /**
+     * Spawn the enhancement using element.enh.get().
+     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
+     */
+    #spawnEnhancement(element, registryItem, context) {
+        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
+        if (!element.customElementRegistry) {
+            Object.defineProperty(element, 'customElementRegistry', {
+                value: customElements,
+                writable: true,
+                enumerable: false,
+                configurable: true
+            });
+        }
+        // Use element.enh.get() to spawn the enhancement
+        const enh = element.enh;
+        if (!enh || typeof enh.get !== 'function') {
+            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
+        }
+        enh.get(registryItem, context);
+    }
+    /**
+     * Find a registry item in the module exports.
+     * A registry item is an object with a "spawn" property.
+     * @param module - The imported module
+     * @returns The registry item or null if not found
+     */
+    async _findRegistryItem(module, el) {
+        // Check default export first
+        if (module.default && await this._isRegistryItem(module.default, el)) {
+            return module.default;
+        }
+        // Search all exports for a registry item
+        const exports = Object.values(module);
+        const registryItems = [];
+        for (const e of exports) {
+            const isRegistryItem = await this._isRegistryItem(e, el);
+            if (isRegistryItem)
+                registryItems.push(e);
+        }
+        if (registryItems.length === 0) {
+            return null;
+        }
+        if (registryItems.length > 1) {
+            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
+        }
+        return registryItems[0];
+    }
+    /**
+     * Check if an export is a registry item (has a spawn property).
+     * @param exp - The export to check
+     * @returns True if the export is a registry item
+     */
+    async _isRegistryItem(exp, mountedElement) {
+        let test = exp !== null
+            && typeof exp === 'object'
+            && 'spawn' in exp
+            && typeof exp.spawn === 'function';
+        if (!test)
+            return false;
+        const emc = exp;
+        if (emc.withAttrs !== undefined) {
+            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
+            return mountedElement.matches(cssQuery);
+        }
+        return true;
+    }
+}
+// Register built-in handler
+import { MountObserver } from '../MountObserver.js';
+MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);

package/handlers/EnhanceMountedElement.ts

@@ -0,0 +1,126 @@
+import { EvtRt } from '../EvtRt.js';
+import {EnhancementConfig} from '../types/assign-gingerly/types.js';
+import { MountConfig, MountContext } from '../types/mount-observer/types.js';
+//import { buildCSSQuery } from 'assign-gingerly/buildCSSQuery.js';
+import 'assign-gingerly/object-extension.js';
+
+/**
+ * Handler for automatically enhancing mounted elements using assign-gingerly.
+ * Searches the first imported module for an export with a "spawn" property
+ * and uses element.enh.get() to spawn the enhancement.
+ */
+export class EnhanceMountedElementHandler extends EvtRt {
+    async mount(mountedElement: Element, MountConfig: MountConfig, context: MountContext){
+        this.abort();
+        // Check if modules are specified
+        if (!context.modules || context.modules.length === 0) {
+            throw new Error('Must specify an ES Module with import property');
+        }
+        
+        const module = context.modules[0];
+        
+        // Find registry item (object with spawn property)
+        const registryItem = await this._findRegistryItem(module, mountedElement);
+        
+        if (!registryItem) {
+            throw new Error('No registry item found in module. Expected an export with a "spawn" property.');
+        }
+        
+        // Validate spawn is a constructor
+        if (typeof registryItem.spawn !== 'function') {
+            throw new Error('Registry item "spawn" property must be a constructor function');
+        }
+        const tbd = context?.observer?.options?.mose;
+        if(tbd){
+            const se = tbd.deref() as HTMLScriptElement;
+            const {parentElement} = se;
+            const {enhKey} = registryItem;
+            if(!se.id && enhKey){
+                se.id = `${parentElement?.localName}.${ enhKey}`;
+            }
+        }
+        console.log({ tbd });
+        
+        // Spawn the enhancement
+        this.#spawnEnhancement(mountedElement, registryItem, context);
+    }
+    
+    /**
+     * Spawn the enhancement using element.enh.get().
+     * Polyfills customElementRegistry if needed for browsers without scoped registry support.
+     */
+    #spawnEnhancement(element: Element, registryItem: any, context: MountContext): void {
+        // Polyfill element.customElementRegistry if it doesn't exist (for browsers without scoped registries)
+        if (!(element as any).customElementRegistry) {
+            Object.defineProperty(element, 'customElementRegistry', {
+                value: customElements,
+                writable: true,
+                enumerable: false,
+                configurable: true
+            });
+        }
+        
+        // Use element.enh.get() to spawn the enhancement
+        const enh = (element as any).enh;
+        if (!enh || typeof enh.get !== 'function') {
+            throw new Error('Element does not have enh.get() method. Make sure assign-gingerly/object-extension.js is loaded.');
+        }
+        
+        enh.get(registryItem, context);
+    }
+    
+    /**
+     * Find a registry item in the module exports.
+     * A registry item is an object with a "spawn" property.
+     * @param module - The imported module
+     * @returns The registry item or null if not found
+     */
+    protected async _findRegistryItem(module: any, el: Element): Promise<any | null> {
+        // Check default export first
+        if (module.default && await this._isRegistryItem(module.default, el)) {
+            return module.default;
+        }
+        
+        // Search all exports for a registry item
+        const exports = Object.values(module);
+        const registryItems = [];
+        for(const e of exports){
+            const isRegistryItem = await this._isRegistryItem(e, el);
+            if(isRegistryItem) registryItems.push(e);
+        }
+        
+        if (registryItems.length === 0) {
+            return null;
+        }
+        
+        if (registryItems.length > 1) {
+            throw new Error('More than one registry item found in module. Expected exactly one export with a "spawn" property.');
+        }
+        
+        return registryItems[0];
+    }
+    
+    /**
+     * Check if an export is a registry item (has a spawn property).
+     * @param exp - The export to check
+     * @returns True if the export is a registry item
+     */
+    protected async  _isRegistryItem(exp: any, mountedElement: Element): Promise<boolean> {
+        let test = exp !== null 
+            && typeof exp === 'object' 
+            && 'spawn' in exp 
+            && typeof exp.spawn === 'function';
+        if(!test) return false;
+        const emc = exp as EnhancementConfig;
+        if(emc.withAttrs !== undefined){
+            const cssQuery = (await import('assign-gingerly/buildCSSQuery.js')).buildCSSQuery(emc);
+            return mountedElement.matches(cssQuery);
+        }
+        return true;
+    }
+}
+
+// Register built-in handler
+import { MountObserver } from '../MountObserver.js';
+
+MountObserver.define('builtIns.enhanceMountedElement', EnhanceMountedElementHandler);

package/handlers/Events.js

@@ -0,0 +1,110 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResolvedEvent = exports.MediaUnmatchEvent = exports.MediaMatchEvent = exports.LoadEvent = exports.DisconnectEvent = exports.DismountEvent = exports.MountEvent = exports.resolvedEventName = exports.mediaunmatchEventName = exports.mediamatchEventName = exports.disconnectEventName = exports.dismountEventName = exports.mountEventName = exports.loadEventName = void 0;
+// Event name constants
+exports.loadEventName = 'load';
+exports.mountEventName = 'mount';
+exports.dismountEventName = 'dismount';
+exports.disconnectEventName = 'disconnect';
+exports.mediamatchEventName = 'mediamatch';
+exports.mediaunmatchEventName = 'mediaunmatch';
+exports.resolvedEventName = 'resolved';
+var MountEvent = /** @class */ (function (_super) {
+    __extends(MountEvent, _super);
+    function MountEvent(mountedElement, modules, mountConfig, mountContext) {
+        var _this = _super.call(this, MountEvent.eventName) || this;
+        _this.mountedElement = mountedElement;
+        _this.modules = modules;
+        _this.mountConfig = mountConfig;
+        _this.mountContext = mountContext;
+        return _this;
+    }
+    MountEvent.eventName = exports.mountEventName;
+    return MountEvent;
+}(Event));
+exports.MountEvent = MountEvent;
+var DismountEvent = /** @class */ (function (_super) {
+    __extends(DismountEvent, _super);
+    function DismountEvent(mountedElement, reason, mountConfig) {
+        var _this = _super.call(this, DismountEvent.eventName) || this;
+        _this.mountedElement = mountedElement;
+        _this.reason = reason;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    DismountEvent.eventName = exports.dismountEventName;
+    return DismountEvent;
+}(Event));
+exports.DismountEvent = DismountEvent;
+var DisconnectEvent = /** @class */ (function (_super) {
+    __extends(DisconnectEvent, _super);
+    function DisconnectEvent(mountedElement, mountConfig) {
+        var _this = _super.call(this, DisconnectEvent.eventName) || this;
+        _this.mountedElement = mountedElement;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    DisconnectEvent.eventName = exports.disconnectEventName;
+    return DisconnectEvent;
+}(Event));
+exports.DisconnectEvent = DisconnectEvent;
+var LoadEvent = /** @class */ (function (_super) {
+    __extends(LoadEvent, _super);
+    function LoadEvent(modules, mountConfig) {
+        var _this = _super.call(this, LoadEvent.eventName) || this;
+        _this.modules = modules;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    LoadEvent.eventName = exports.loadEventName;
+    return LoadEvent;
+}(Event));
+exports.LoadEvent = LoadEvent;
+var MediaMatchEvent = /** @class */ (function (_super) {
+    __extends(MediaMatchEvent, _super);
+    function MediaMatchEvent(mountConfig) {
+        var _this = _super.call(this, MediaMatchEvent.eventName) || this;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    MediaMatchEvent.eventName = exports.mediamatchEventName;
+    return MediaMatchEvent;
+}(Event));
+exports.MediaMatchEvent = MediaMatchEvent;
+var MediaUnmatchEvent = /** @class */ (function (_super) {
+    __extends(MediaUnmatchEvent, _super);
+    function MediaUnmatchEvent(mountConfig) {
+        var _this = _super.call(this, MediaUnmatchEvent.eventName) || this;
+        _this.mountConfig = mountConfig;
+        return _this;
+    }
+    MediaUnmatchEvent.eventName = exports.mediaunmatchEventName;
+    return MediaUnmatchEvent;
+}(Event));
+exports.MediaUnmatchEvent = MediaUnmatchEvent;
+var ResolvedEvent = /** @class */ (function (_super) {
+    __extends(ResolvedEvent, _super);
+    function ResolvedEvent(exportValue) {
+        var _this = _super.call(this, ResolvedEvent.eventName) || this;
+        _this.export = exportValue;
+        return _this;
+    }
+    ResolvedEvent.eventName = exports.resolvedEventName;
+    return ResolvedEvent;
+}(Event));
+exports.ResolvedEvent = ResolvedEvent;

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);