mount-observer 0.1.20 → 0.1.22

package/Events.js

@@ -76,3 +76,12 @@ export class ResolvedEvent extends Event {
         this.export = exportValue;
     }
 }
+export const addedScriptElementEventName = 'addedscriptelement';
+export class AddedScriptElementEvent extends Event {
+    scriptElement;
+    static eventName = addedScriptElementEventName;
+    constructor(scriptElement) {
+        super(AddedScriptElementEvent.eventName, { bubbles: false, composed: false });
+        this.scriptElement = scriptElement;
+    }
+}

package/Events.ts

@@ -73,3 +73,13 @@ export class ResolvedEvent extends Event {
         this.export = exportValue;
     }
 }
+
+export const addedScriptElementEventName = 'addedscriptelement';
+
+export class AddedScriptElementEvent extends Event {
+    static eventName: typeof addedScriptElementEventName = addedScriptElementEventName;
+    
+    constructor(public scriptElement: HTMLScriptElement) {
+        super(AddedScriptElementEvent.eventName, { bubbles: false, composed: false });
+    }
+}

package/README.md

@@ -666,6 +666,203 @@ export default class MyEnhancement {
 
 [Implemented as EMCScript requirement](requirements/Done/EMCScript.md)
 
+## Syndicating Mount Observers with Synthesizer
+
+The `Synthesizer` abstract base class enables automatic propagation of mount observer configurations across shadow DOM boundaries. It acts as a "syndicator-subscriber" pattern where a syndicator in the document root broadcasts script elements to subscribers in shadow roots.
+
+**Why use Synthesizer?**
+
+- Automatically share mount observer configurations across shadow roots
+- Eliminates manual observer setup in each shadow root
+- Ensures consistent behavior across component boundaries
+- Works with both MOSE and EMC script elements
+- Provides a declarative, inheritance-based approach
+
+**How it works:**
+
+1. **Syndicator** (in document root): Watches for `script[type="mountobserver"]` and `script[type="emc"]` elements and broadcasts them to subscribers
+2. **Subscriber** (in shadow roots): Receives and clones script elements from the syndicator
+3. **Automatic activation**: Both syndicator and subscriber activate 5 built-in handlers in their respective root nodes
+
+**Basic usage:**
+
+```html
+<!-- Define your Synthesizer custom element -->
+<script type="module">
+    import { Synthesizer } from 'mount-observer/Synthesizer.js';
+    
+    class AppSynthesizer extends Synthesizer {}
+    customElements.define('app-synthesizer', AppSynthesizer);
+</script>
+
+<!-- Syndicator in document root with mount observer scripts -->
+<app-synthesizer>
+    <script type="mountobserver">
+    {
+        "matching": "button.primary",
+        "import": "./primary-button.js",
+        "do": "builtIns.defineCustomElement"
+    }
+    </script>
+    
+    <script type="emc">
+    {
+        "matching": ".interactive",
+        "enhConfig": {
+            "spawn": "./interactive.js",
+            "enhKey": "interactive"
+        }
+    }
+    </script>
+</app-synthesizer>
+
+<!-- Component with shadow root -->
+<my-component>
+    #shadow
+        <!-- Subscriber automatically receives scripts from syndicator -->
+        <app-synthesizer></app-synthesizer>
+        
+        <!-- These elements will be enhanced by the syndicated observers -->
+        <button class="primary">Click me</button>
+        <div class="interactive">Interactive content</div>
+</my-component>
+```
+
+**What happens:**
+
+1. The syndicator (`<app-synthesizer>` in document root) activates 5 built-in handlers:
+   - `builtIns.mountObserverScript`
+   - `builtIns.scriptExport`
+   - `builtIns.HTMLInclude`
+   - `builtIns.hoistTemplate`
+   - `builtIns.emcScript`
+
+2. The syndicator watches for script elements being added to its light children
+
+3. When a script is added, it waits for the `resolved` event (ensuring the script is parsed)
+
+4. The syndicator dispatches an `AddedScriptElementEvent` with the script element
+
+5. Subscribers in shadow roots:
+   - Find the syndicator in the document root (matching localName)
+   - Process existing scripts from the syndicator
+   - Subscribe to `addedscriptelement` events for new scripts
+   - Clone each script element and copy its `export` property
+   - Append cloned scripts to their own light children
+   - Activate the same 5 built-in handlers in their shadow root
+
+**Syndicator vs Subscriber:**
+
+The Synthesizer automatically determines its role based on its root node:
+- **Document root** → Acts as syndicator (broadcasts scripts)
+- **Shadow root** → Acts as subscriber (receives scripts)
+
+**Activation of built-in handlers:**
+
+Both syndicator and subscriber call `element.mount()` to activate handlers in their respective scopes:
+
+```javascript
+// Activated in both syndicator and subscriber root nodes
+await this.getRootNode().mount({
+    do: 'builtIns.mountObserverScript'
+});
+await this.getRootNode().mount({
+    do: 'builtIns.scriptExport'
+});
+await this.getRootNode().mount({
+    do: 'builtIns.HTMLInclude'
+});
+await this.getRootNode().mount({
+    do: 'builtIns.hoistTemplate'
+});
+await this.getRootNode().mount({
+    do: 'builtIns.emcScript'
+});
+```
+
+This ensures that:
+- MOSE scripts are processed in each scope
+- Script exports are available
+- HTML includes work within each shadow root
+- Templates are hoisted for performance
+- EMC scripts enhance elements in each scope
+
+**Script processing:**
+
+When a subscriber receives a script element:
+
+1. Checks if the script has an `export` property (parsed configuration)
+2. If not, waits for the `resolved` event (with 5-second timeout)
+3. Clones the script element
+4. Copies the `export` property from source to clone (by reference)
+5. Appends the cloned script to the subscriber's light children
+6. The activated handlers process the cloned script in the shadow root's scope
+
+**Benefits:**
+
+- **Declarative**: Define observers once in the document root
+- **Automatic**: Scripts propagate to all shadow roots automatically
+- **Scoped**: Each shadow root gets its own observer instances
+- **Efficient**: Parsed configurations are shared (not re-parsed)
+- **Maintainable**: Update observers in one place, changes propagate everywhere
+
+**Example - Multiple components:**
+
+```html
+<!-- Syndicator with shared observers -->
+<app-synthesizer>
+    <script type="mountobserver">
+    {
+        "matching": "button",
+        "import": "./button-enhancement.js",
+        "do": "builtIns.enhanceMountedElement"
+    }
+    </script>
+</app-synthesizer>
+
+<!-- Component 1 -->
+<my-header>
+    #shadow
+        <app-synthesizer></app-synthesizer>
+        <button>Header Button</button>  <!-- Enhanced -->
+</my-header>
+
+<!-- Component 2 -->
+<my-footer>
+    #shadow
+        <app-synthesizer></app-synthesizer>
+        <button>Footer Button</button>  <!-- Enhanced -->
+</my-footer>
+```
+
+Both components receive the button enhancement observer automatically.
+
+**Error handling:**
+
+- Logs errors if handler activation fails
+- Logs errors if script processing fails
+- Continues processing other scripts even if one fails
+- Provides 5-second timeout for waiting on `resolved` events
+
+**Requirements:**
+
+- Must extend the `Synthesizer` abstract class
+- Must be defined as a custom element
+- Syndicator must be in the document root
+- Subscribers must be in shadow roots
+- All handlers must be imported and registered before use
+
+**Comparison with `mountGlobally()`:**
+
+Unlike `mountGlobally()`, which discovers shadow roots by observing custom elements, Synthesizer:
+- Uses explicit syndicator-subscriber pattern
+- Provides more control over which scripts are syndicated
+- Works with any shadow root structure
+- Doesn't rely on custom element discovery
+- Allows for selective script propagation
+
+[Implemented as Syndicating Mount Observers With Synthesizer requirement](requirements/Done/Syndicating Mount Observers With Synthesizer.md)
+
 ## Intra-Document HTML Includes with HTMLInclude
 
 The `builtIns.HTMLInclude` handler enables declarative HTML fragment reuse within a document using `<template src="#id">` syntax. Think of it as "constants for HTML" - define content once with an ID, then reference it multiple times throughout your document.

package/Synthesizer.js

@@ -0,0 +1,180 @@
+import './ElementMountExtension.js';
+import { waitForEvent } from 'assign-gingerly/waitForEvent.js';
+import { AddedScriptElementEvent } from './Events.js';
+/**
+ * Track which root nodes have already had handlers activated.
+ * Uses WeakSet to avoid memory leaks when nodes are garbage collected.
+ */
+const activatedRootNodes = new WeakSet();
+/**
+ * Abstract base class for syndicating mount observer and EMC script elements across shadow roots.
+ *
+ * Synthesizer instances act as either:
+ * - Syndicator (in document root): Broadcasts script elements to subscribers
+ * - Subscriber (in shadow roots): Receives and clones script elements from syndicator
+ *
+ * Ensures that handlers are only activated once per root node, even if multiple
+ * Synthesizer instances exist in the same root.
+ *
+ * Usage:
+ * ```javascript
+ * class MySynthesizer extends Synthesizer {}
+ * customElements.define('my-synthesizer', MySynthesizer);
+ * ```
+ *
+ * ```html
+ * <!-- Syndicator in document -->
+ * <my-synthesizer>
+ *   <script type="mountobserver">...</script>
+ *   <script type="emc">...</script>
+ * </my-synthesizer>
+ *
+ * <!-- Subscriber in shadow root -->
+ * <my-component>
+ *   #shadow-root
+ *     <my-synthesizer></my-synthesizer>
+ * </my-component>
+ * ```
+ */
+export class Synthesizer extends HTMLElement {
+    #mutationObserver;
+    #isSyndicator = false;
+    /**
+     * List of built-in handlers to activate.
+     */
+    static builtInHandlers = [
+        'builtIns.mountObserverScript',
+        'builtIns.scriptExport',
+        'builtIns.HTMLInclude',
+        'builtIns.hoistTemplate',
+        'builtIns.emcScript'
+    ];
+    connectedCallback() {
+        // Synthesizer elements are infrastructure, not UI
+        this.hidden = true;
+        // Identify the root node
+        const rootNode = this.getRootNode();
+        // Determine if this is a syndicator or subscriber
+        this.#isSyndicator = rootNode === document;
+        // Activate handlers on the root node
+        this.#activateHandlers(rootNode);
+        if (this.#isSyndicator) {
+            // Act as syndicator
+            this.#initializeSyndicator();
+        }
+        else {
+            // Act as subscriber
+            this.#initializeSubscriber();
+        }
+    }
+    disconnectedCallback() {
+        if (this.#mutationObserver) {
+            this.#mutationObserver.disconnect();
+        }
+    }
+    /**
+     * Activate mount observer handlers in the specified root node.
+     * Only activates once per root node, even if multiple Synthesizer instances exist.
+     */
+    async #activateHandlers(rootNode) {
+        // Check if handlers have already been activated for this root node
+        if (activatedRootNodes.has(rootNode)) {
+            return;
+        }
+        // Mark this root node as activated
+        activatedRootNodes.add(rootNode);
+        const constructor = this.constructor;
+        for (const handlerName of constructor.builtInHandlers) {
+            try {
+                await rootNode.mount({
+                    do: handlerName
+                });
+            }
+            catch (error) {
+                console.error(`Synthesizer: Failed to activate handler ${handlerName}:`, error);
+            }
+        }
+    }
+    /**
+     * Initialize as syndicator (in document root).
+     * Watches for script elements and broadcasts them to subscribers.
+     */
+    #initializeSyndicator() {
+        // Process existing script elements
+        const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
+        scripts.forEach(script => {
+            this.#broadcastScript(script);
+        });
+        // Watch for new script elements
+        this.#mutationObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                for (const node of mutation.addedNodes) {
+                    if (node instanceof HTMLScriptElement) {
+                        const type = node.getAttribute('type');
+                        if (type === 'mountobserver' || type === 'emc') {
+                            this.#broadcastScript(node);
+                        }
+                    }
+                }
+            }
+        });
+        this.#mutationObserver.observe(this, {
+            childList: true,
+            subtree: false
+        });
+    }
+    /**
+     * Broadcast a script element to subscribers.
+     */
+    #broadcastScript(scriptElement) {
+        this.dispatchEvent(new AddedScriptElementEvent(scriptElement));
+    }
+    /**
+     * Initialize as subscriber (in shadow root).
+     * Subscribes to syndicator and processes script elements.
+     */
+    #initializeSubscriber() {
+        // Find the syndicator in document root
+        const syndicator = document.querySelector(this.localName);
+        if (!syndicator) {
+            console.warn(`Synthesizer: No syndicator found in document for ${this.localName}`);
+            return;
+        }
+        // Process existing scripts from syndicator
+        const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
+        scripts.forEach(script => {
+            this.#processScript(script);
+        });
+        // Subscribe to new scripts
+        syndicator.addEventListener(AddedScriptElementEvent.eventName, (e) => {
+            const event = e;
+            this.#processScript(event.scriptElement);
+        });
+    }
+    /**
+     * Process a script element from the syndicator.
+     * Waits for export property, then clones and appends.
+     */
+    async #processScript(scriptElement) {
+        try {
+            // Check if export property exists
+            let exportValue = scriptElement.export;
+            if (!exportValue) {
+                // Wait for resolved event with timeout
+                const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout waiting for resolved event')), 5000));
+                const eventPromise = waitForEvent(scriptElement, 'resolved');
+                const event = await Promise.race([eventPromise, timeoutPromise]);
+                exportValue = event.export;
+            }
+            // Clone the script element
+            const clonedScript = scriptElement.cloneNode(true);
+            // Copy the export property
+            clonedScript.export = exportValue;
+            // Append to this element's children
+            this.appendChild(clonedScript);
+        }
+        catch (error) {
+            console.error('Synthesizer: Failed to process script element:', error);
+        }
+    }
+}

package/Synthesizer.ts

@@ -0,0 +1,207 @@
+import './ElementMountExtension.js';
+import { waitForEvent } from 'assign-gingerly/waitForEvent.js';
+import { AddedScriptElementEvent } from './Events.js';
+
+/**
+ * Track which root nodes have already had handlers activated.
+ * Uses WeakSet to avoid memory leaks when nodes are garbage collected.
+ */
+const activatedRootNodes = new WeakSet<Node>();
+
+/**
+ * Abstract base class for syndicating mount observer and EMC script elements across shadow roots.
+ * 
+ * Synthesizer instances act as either:
+ * - Syndicator (in document root): Broadcasts script elements to subscribers
+ * - Subscriber (in shadow roots): Receives and clones script elements from syndicator
+ * 
+ * Ensures that handlers are only activated once per root node, even if multiple
+ * Synthesizer instances exist in the same root.
+ * 
+ * Usage:
+ * ```javascript
+ * class MySynthesizer extends Synthesizer {}
+ * customElements.define('my-synthesizer', MySynthesizer);
+ * ```
+ * 
+ * ```html
+ * <!-- Syndicator in document -->
+ * <my-synthesizer>
+ *   <script type="mountobserver">...</script>
+ *   <script type="emc">...</script>
+ * </my-synthesizer>
+ * 
+ * <!-- Subscriber in shadow root -->
+ * <my-component>
+ *   #shadow-root
+ *     <my-synthesizer></my-synthesizer>
+ * </my-component>
+ * ```
+ */
+export abstract class Synthesizer extends HTMLElement {
+    #mutationObserver: MutationObserver | undefined;
+    #isSyndicator: boolean = false;
+
+    /**
+     * List of built-in handlers to activate.
+     */
+    protected static builtInHandlers = [
+        'builtIns.mountObserverScript',
+        'builtIns.scriptExport',
+        'builtIns.HTMLInclude',
+        'builtIns.hoistTemplate',
+        'builtIns.emcScript'
+    ];
+
+    connectedCallback(): void {
+        // Synthesizer elements are infrastructure, not UI
+        this.hidden = true;
+        
+        // Identify the root node
+        const rootNode = this.getRootNode();
+        
+        // Determine if this is a syndicator or subscriber
+        this.#isSyndicator = rootNode === document;
+        
+        // Activate handlers on the root node
+        this.#activateHandlers(rootNode);
+        
+        if (this.#isSyndicator) {
+            // Act as syndicator
+            this.#initializeSyndicator();
+        } else {
+            // Act as subscriber
+            this.#initializeSubscriber();
+        }
+    }
+
+    disconnectedCallback(): void {
+        if (this.#mutationObserver) {
+            this.#mutationObserver.disconnect();
+        }
+    }
+
+    /**
+     * Activate mount observer handlers in the specified root node.
+     * Only activates once per root node, even if multiple Synthesizer instances exist.
+     */
+    async #activateHandlers(rootNode: Node): Promise<void> {
+        // Check if handlers have already been activated for this root node
+        if (activatedRootNodes.has(rootNode)) {
+            return;
+        }
+        
+        // Mark this root node as activated
+        activatedRootNodes.add(rootNode);
+        
+        const constructor = this.constructor as typeof Synthesizer;
+        
+        for (const handlerName of constructor.builtInHandlers) {
+            try {
+                await (rootNode as any).mount({
+                    do: handlerName
+                });
+            } catch (error) {
+                console.error(`Synthesizer: Failed to activate handler ${handlerName}:`, error);
+            }
+        }
+    }
+
+    /**
+     * Initialize as syndicator (in document root).
+     * Watches for script elements and broadcasts them to subscribers.
+     */
+    #initializeSyndicator(): void {
+        // Process existing script elements
+        const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
+        scripts.forEach(script => {
+            this.#broadcastScript(script as HTMLScriptElement);
+        });
+        
+        // Watch for new script elements
+        this.#mutationObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                for (const node of mutation.addedNodes) {
+                    if (node instanceof HTMLScriptElement) {
+                        const type = node.getAttribute('type');
+                        if (type === 'mountobserver' || type === 'emc') {
+                            this.#broadcastScript(node);
+                        }
+                    }
+                }
+            }
+        });
+        
+        this.#mutationObserver.observe(this, {
+            childList: true,
+            subtree: false
+        });
+    }
+
+    /**
+     * Broadcast a script element to subscribers.
+     */
+    #broadcastScript(scriptElement: HTMLScriptElement): void {
+        this.dispatchEvent(new AddedScriptElementEvent(scriptElement));
+    }
+
+    /**
+     * Initialize as subscriber (in shadow root).
+     * Subscribes to syndicator and processes script elements.
+     */
+    #initializeSubscriber(): void {
+        // Find the syndicator in document root
+        const syndicator = document.querySelector(this.localName) as Synthesizer | null;
+        
+        if (!syndicator) {
+            console.warn(`Synthesizer: No syndicator found in document for ${this.localName}`);
+            return;
+        }
+        
+        // Process existing scripts from syndicator
+        const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
+        scripts.forEach(script => {
+            this.#processScript(script as HTMLScriptElement);
+        });
+        
+        // Subscribe to new scripts
+        syndicator.addEventListener(AddedScriptElementEvent.eventName, (e) => {
+            const event = e as AddedScriptElementEvent;
+            this.#processScript(event.scriptElement);
+        });
+    }
+
+    /**
+     * Process a script element from the syndicator.
+     * Waits for export property, then clones and appends.
+     */
+    async #processScript(scriptElement: HTMLScriptElement): Promise<void> {
+        try {
+            // Check if export property exists
+            let exportValue = (scriptElement as any).export;
+            
+            if (!exportValue) {
+                // Wait for resolved event with timeout
+                const timeoutPromise = new Promise((_, reject) => 
+                    setTimeout(() => reject(new Error('Timeout waiting for resolved event')), 5000)
+                );
+                
+                const eventPromise = waitForEvent(scriptElement, 'resolved');
+                
+                const event = await Promise.race([eventPromise, timeoutPromise]);
+                exportValue = (event as any).export;
+            }
+            
+            // Clone the script element
+            const clonedScript = scriptElement.cloneNode(true) as HTMLScriptElement;
+            
+            // Copy the export property
+            (clonedScript as any).export = exportValue;
+            
+            // Append to this element's children
+            this.appendChild(clonedScript);
+        } catch (error) {
+            console.error('Synthesizer: Failed to process script element:', error);
+        }
+    }
+}

package/handlers/EMCScript.js

@@ -1,5 +1,4 @@
 import { EvtRt } from '../EvtRt.js';
-import { MountObserver } from '../MountObserver.js';
 import '../ElementMountExtension.js';
 import 'assign-gingerly/object-extension.js';
 /**
@@ -68,15 +67,9 @@ export class EMCScriptHandler extends EvtRt {
         if (!scriptElement.id && scriptElement.parentElement) {
             scriptElement.id = `${scriptElement.parentElement.localName}.${enhKey}`;
         }
-        // Construct MountConfig from EMC config
+        // Construct MountConfig from EMC config and mount it
         const mountConfig = await this.buildMountConfig(emcConfig);
-        // Create a MountObserver to watch for elements matching the config
-        const observer = new MountObserver(mountConfig);
-        // Store observer reference for cleanup
-        scriptElement.emcObserver = observer;
-        // Observe from the script element's parent or root node
-        const observeTarget = scriptElement.parentElement || scriptElement.getRootNode();
-        await observer.observe(observeTarget);
+        await scriptElement.mount(mountConfig);
     }
     /**
      * Build a MountConfig from an EMC config.
@@ -174,5 +167,6 @@ export class EMCScriptHandler extends EvtRt {
     }
 }
 // Register built-in handler
+import { MountObserver } from '../MountObserver.js';
 export const emc = 'builtIns.emcScript';
 MountObserver.define(emc, EMCScriptHandler);

package/handlers/EMCScript.ts

@@ -1,6 +1,5 @@
 import { EvtRt } from '../EvtRt.js';
 import { EMC, MountConfig, MountContext } from '../types/mount-observer/types.js';
-import { MountObserver } from '../MountObserver.js';
 import '../ElementMountExtension.js';
 import 'assign-gingerly/object-extension.js';
 
@@ -80,18 +79,9 @@ export class EMCScriptHandler extends EvtRt {
             scriptElement.id = `${scriptElement.parentElement.localName}.${enhKey}`;
         }
         
-        // Construct MountConfig from EMC config
+        // Construct MountConfig from EMC config and mount it
         const mountConfig = await this.buildMountConfig(emcConfig);
-        
-        // Create a MountObserver to watch for elements matching the config
-        const observer = new MountObserver(mountConfig);
-        
-        // Store observer reference for cleanup
-        (scriptElement as any).emcObserver = observer;
-        
-        // Observe from the script element's parent or root node
-        const observeTarget = scriptElement.parentElement || scriptElement.getRootNode() as Node;
-        await observer.observe(observeTarget);
+        await scriptElement.mount(mountConfig);
     }
     
     /**
@@ -211,6 +201,8 @@ export class EMCScriptHandler extends EvtRt {
 }
 
 // Register built-in handler
+import { MountObserver } from '../MountObserver.js';
+
 export const emc = 'builtIns.emcScript';
 
 MountObserver.define(emc, EMCScriptHandler);

package/index.js

@@ -1,5 +1,6 @@
 // Main entry point for MountObserver v2
 export { MountObserver } from './MountObserver.js';
+export { Synthesizer } from './Synthesizer.js';
 export { withScopePerimeter } from './withScopePerimeter.js';
 export { emitMountedElementEvents } from './emitEvents.js';
 export { arr } from './arr.js';
@@ -12,7 +13,7 @@ export { EMCScriptHandler } from './handlers/EMCScript.js';
 export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
 export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
 export { upShadowSearch } from './upShadowSearch.js';
-export { mountEventName, dismountEventName, disconnectEventName, loadEventName, mediamatchEventName, mediaunmatchEventName } from './Events.js';
+export { mountEventName, dismountEventName, disconnectEventName, loadEventName, mediamatchEventName, mediaunmatchEventName, addedScriptElementEventName } from './Events.js';
 // Register built-in handlers
 import './EvtRt.js';
 import './handlers/DefineCustomElement.js';

package/index.ts

@@ -1,5 +1,6 @@
 // Main entry point for MountObserver v2
 export { MountObserver } from './MountObserver.js';
+export { Synthesizer } from './Synthesizer.js';
 export { withScopePerimeter } from './withScopePerimeter.js';
 export { emitMountedElementEvents } from './emitEvents.js';
 export { arr } from './arr.js';
@@ -29,7 +30,8 @@ export {
     disconnectEventName,
     loadEventName,
     mediamatchEventName,
-    mediaunmatchEventName
+    mediaunmatchEventName,
+    addedScriptElementEventName
 } from './Events.js';
 
 // Register built-in handlers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",