mount-observer-script-element 0.0.1

package/MOSE.ts

@@ -0,0 +1,228 @@
+import { getHighestCERNode } from './getHighestCERNode.js';
+import { MountObserver } from 'mount-observer/MountObserver.js';
+import { MountEvent, mountEventName } from 'mount-observer/Events.js'
+
+/**
+ * Type for a constructor that can be extended
+ */
+type Constructor<T = HTMLElement> = new (...args: any[]) => T;
+
+/**
+ * Symbol to track if MountObserver has been set up for an element
+ */
+const MOUNT_OBSERVER_SETUP = Symbol.for('cteH9dMG-UWwxVaMwFgvQA');
+
+/**
+ * MOSE (Mount Observer Script Element) Mixin
+ * 
+ * This mixin adds functionality to:
+ * 1. Check for duplicate custom element registrations within the same custom element registry scope
+ * 2. Monitor for <script type="mountobserver"> elements and apply their configurations
+ * 
+ * @param Base - The base class to extend
+ * @returns Extended class with MOSE functionality
+ */
+export function MOSE<T extends Constructor<HTMLElement>>(Base: T) {
+    return class extends Base {
+        #mountObserver: MountObserver | undefined;
+
+        constructor(...args: any[]) {
+            super(...args);
+            this.#checkForDuplicateRegistration();
+            this.#setupMountObserver();
+        }
+
+        #checkForDuplicateRegistration() {
+            // Get the tag name of this element
+            // const tagName = this.tagName.toLowerCase();
+            const {localName} = this;
+
+            // Find the highest node with the same custom element registry
+            const highestCERNode = getHighestCERNode(this) as DocumentFragment;
+
+            if (!highestCERNode) {
+                return;
+            }
+
+            // Get the custom element registry for this scope
+            // const registry = (highestCERNode as any).customElementRegistry as CustomElementRegistry | undefined;
+
+            // // If there's no custom registry, use the global one
+            // const targetRegistry = registry || customElements;
+
+            // Check if an element with this name is already defined in this registry
+            try {
+                const existingTags =Array.from(highestCERNode.querySelectorAll(localName)).filter(x => x !== this);
+                
+                if (existingTags.length > 0) {
+                    throw new Error(
+                        `Custom element "${localName}" is already defined in this custom element registry scope.`
+                    );
+                }
+            } catch (error) {
+                // If get() throws, it means the element isn't registered yet, which is fine
+                // But if it's our error, re-throw it
+                if (error instanceof Error && error.message.includes('already defined')) {
+                    throw error;
+                }
+            }
+
+            // Copy mountobserver script elements from container
+            this.#getContainerMOSEs(highestCERNode);
+        }
+
+        #getContainerMOSEs(highestCERNode: Node) {
+            // Step 1: Don't do anything if highestCERNode is the document root
+            if (highestCERNode === document) {
+                return;
+            }
+
+            // Step 2: Get parent element or host
+            let parentNode: Element | null = null;
+            if (highestCERNode instanceof Element) {
+                parentNode = highestCERNode.parentElement;
+            } else if (highestCERNode instanceof ShadowRoot) {
+                parentNode = highestCERNode.host;
+            }
+
+            if (!parentNode) {
+                return;
+            }
+
+            // Step 3: Find the highestCERNode of the parent
+            const parentHighestCERNode = getHighestCERNode(parentNode);
+
+            // Find parent custom element with same localName
+            if (!parentHighestCERNode || !('querySelector' in parentHighestCERNode)) {
+                return;
+            }
+
+            const parentCE = (parentHighestCERNode as DocumentFragment).querySelector(this.localName);
+            if (!parentCE) {
+                return;
+            }
+
+            // If highestCERNode contains parentCE, exit
+            if ((highestCERNode as DocumentFragment).contains?.(parentCE)) {
+                return;
+            }
+
+            // Clone and append script elements
+            this.#cloneAndAppendScripts(parentCE);
+
+            // Add event listener for future mount events
+            parentCE.addEventListener(mountEventName, (e: Event) => {
+                const mountedElement = (e as MountEvent).mountedElement;
+                if (mountedElement instanceof HTMLScriptElement && mountedElement.type === 'mountobserver') {
+                    this.#cloneAndAppendScripts(parentCE);
+                }
+            });
+        }
+
+        #cloneAndAppendScripts(sourceElement: Element) {
+            const scripts = Array.from(sourceElement.querySelectorAll('script[type="mountobserver"]')) as HTMLScriptElement[];
+            
+            // Get exclude value from property or attribute
+            const exclude = (this as any).exclude ?? this.getAttribute('exclude');
+            
+            for (const script of scripts) {
+                // Check if script matches exclude criteria
+                if (exclude && script.matches(exclude)) {
+                    continue;
+                }
+                
+                const src = script.getAttribute('src');
+                
+                // Check if we already have a script with the same src
+                const existingScripts = Array.from(this.querySelectorAll('script[type="mountobserver"]')) as HTMLScriptElement[];
+                const alreadyExists = existingScripts.some(existing => {
+                    const existingSrc = existing.getAttribute('src');
+                    return existingSrc === src;
+                });
+
+                if (!alreadyExists) {
+                    const clonedScript = script.cloneNode(true) as HTMLScriptElement;
+                    this.appendChild(clonedScript);
+                }
+            }
+        }
+
+        async #setupMountObserver() {
+            // Find the highest node with the same custom element registry
+            const highestCERNode = getHighestCERNode(this);
+
+            if (!highestCERNode) {
+                return;
+            }
+
+            // Check if MountObserver has already been set up for this element
+            const existingObserver = (highestCERNode as any)[MOUNT_OBSERVER_SETUP];
+            if (existingObserver) {
+                // Subscribe to the existing observer's mount event and re-dispatch from this element
+                existingObserver.addEventListener(mountEventName, (e: MountEvent) => {
+                    const {mountedElement} = e;
+                    if(this.contains(mountedElement)){
+                        this.dispatchEvent(e);
+                    }
+                });
+                return;
+            }
+
+            // Set up MountObserver to watch for <script type="mountobserver"> elements
+            this.#mountObserver = new MountObserver({
+                whereElementMatches: 'script[type="mountobserver"]',
+                do: async (scriptElement: Element) => {
+                    await this.#processScriptElement(scriptElement as HTMLScriptElement, highestCERNode);
+                }
+            });
+
+            // Mark that we've set up the MountObserver for this element
+            (highestCERNode as any)[MOUNT_OBSERVER_SETUP] = this.#mountObserver;
+
+            await this.#mountObserver.observe(highestCERNode);
+        }
+
+        async #processScriptElement(scriptElement: HTMLScriptElement, rootNode: Node) {
+            let config: any = {};
+
+            // Step 1: Check if script has src attribute and load JSON
+            const src = scriptElement.getAttribute('src')
+            if (src) {
+                try {
+                    const response = await import(src, {with: {type: 'json'}});
+                    config = structuredClone(response.default);
+                } catch (error) {
+                    console.error(`Failed to load JSON from ${scriptElement.src}:`, error);
+                    return;
+                }
+            }
+
+            // Step 2: If innerHTML is non-trivial, parse and merge it
+            const innerHTML = scriptElement.innerHTML.trim();
+            if (innerHTML) {
+                try {
+                    const parsedJSON = JSON.parse(innerHTML);
+                    
+                    // Step 3: Import assignGingerly and merge
+                    const { assignGingerly } = await import('assign-gingerly/assignGingerly.js');
+                    config = assignGingerly(config, parsedJSON, {
+                        registry: (<any>scriptElement).customElementRegistry.assignGingerlyRegistry
+                    });
+                } catch (error) {
+                    console.error('Failed to parse script innerHTML as JSON:', error);
+                    return;
+                }
+            }
+
+            // Step 4: Apply MountObserver with the merged config
+            if (Object.keys(config).length > 0) {
+                try {
+                    const observer = new MountObserver(config);
+                    observer.observe(rootNode);
+                } catch (error) {
+                    console.error('Failed to create MountObserver with config:', error);
+                }
+            }
+        }
+    };
+}

package/README.md

@@ -0,0 +1,303 @@
+# mount-observer-script-element
+
+A TypeScript mixin (MOSE) that enables declarative configuration of [MountObserver](https://www.npmjs.com/package/mount-observer) instances through `<script type="mountobserver">` elements, with support for Chrome's Scoped Custom Element Registries.
+
+## Overview
+
+The MOSE (Mount Observer Script Element) mixin provides:
+
+1. **Scoped Custom Element Registry Support**: Works with Chrome's scoped custom element registries
+2. **Declarative MountObserver Configuration**: Configure MountObserver instances using JSON in script elements
+3. **Script Inheritance**: Child custom elements automatically inherit mountobserver scripts from parent elements
+4. **Duplicate Prevention**: Ensures only one MountObserver is created per registry scope
+5. **Event Propagation**: Re-dispatches mount events from child elements
+
+## Installation
+
+```bash
+npm install mount-observer-script-element
+```
+
+## Basic Usage
+
+```typescript
+import { MOSE } from 'mount-observer-script-element/MOSE.js';
+
+class MyElement extends MOSE(HTMLElement) {
+    constructor() {
+        super();
+    }
+}
+
+customElements.define('my-element', MyElement);
+```
+
+```html
+<my-element>
+    <script type="mountobserver">
+    {
+        "whereElementMatches": "button",
+        "assignGingerly": {
+            "disabled": false,
+            "?.dataset?.action": "submit",
+            "?.style?.color": "green"
+        }
+    }
+    </script>
+    <button>Click me</button>
+</my-element>
+```
+
+## Features
+
+### 1. Declarative MountObserver Configuration
+
+Place `<script type="mountobserver">` elements inside your custom element to configure MountObserver behavior:
+
+```html
+<my-element>
+    <script type="mountobserver">
+    {
+        "whereElementMatches": "input",
+        "assignGingerly": {
+            "placeholder": "Enter text...",
+            "?.style?.backgroundColor": "#f0f0f0"
+        }
+    }
+    </script>
+</my-element>
+```
+
+### 2. External JSON Configuration
+
+Load configuration from external JSON files:
+
+```html
+<script type="mountobserver" src="./config.json"></script>
+```
+
+The JSON file will be loaded using JSON import with `import(src, {with: {type: 'json'}})`.
+
+### 3. Merging Configurations
+
+You can combine external and inline configurations. The inline JSON will be merged with the external configuration using [assignGingerly](https://www.npmjs.com/package/assign-gingerly):
+
+```html
+<script type="mountobserver" src="./base-config.json">
+{
+    "assignGingerly": {
+        "?.style?.color": "red"
+    }
+}
+</script>
+```
+
+### 4. Script Inheritance
+
+Child custom elements automatically inherit mountobserver scripts from parent elements of the same type:
+
+```html
+<my-element>
+    <script type="mountobserver" src="./shared-config.json"></script>
+    
+    <my-element>
+        <!-- This child element automatically inherits the parent's script -->
+        <button>I inherit the configuration</button>
+    </my-element>
+</my-element>
+```
+
+**How it works:**
+- When a MOSE element is created, it searches for a parent element with the same `localName`
+- It clones all `<script type="mountobserver">` elements from the parent
+- Scripts with duplicate `src` attributes are not cloned (avoiding duplicates)
+- The child element listens for mount events on the parent to inherit dynamically added scripts
+
+### 5. Excluding Inherited Scripts
+
+Use the `exclude` property or attribute to prevent specific scripts from being inherited:
+
+```html
+<my-element exclude="script[src*='unwanted']">
+    <!-- Scripts matching the exclude selector won't be inherited -->
+</my-element>
+```
+
+```typescript
+class MyElement extends MOSE(HTMLElement) {
+    exclude = "script[data-skip]";
+}
+```
+
+### 6. Scoped Custom Element Registry Support
+
+The mixin works with Chrome's scoped custom element registries:
+
+```typescript
+const customRegistry = new CustomElementRegistry();
+
+class ScopedElement extends MOSE(HTMLElement) {
+    constructor() {
+        super();
+    }
+}
+
+customRegistry.define('scoped-element', ScopedElement);
+
+const element = document.createElement('scoped-element', {
+    customElementRegistry: customRegistry
+});
+```
+
+### 7. Duplicate Element Detection
+
+The mixin prevents multiple instances of the same custom element within the same registry scope:
+
+```typescript
+// This will throw an error if another element with the same localName
+// already exists in the same highestCERNode scope
+```
+
+### 8. Event Propagation
+
+When multiple MOSE elements share the same highestCERNode, mount events are propagated:
+
+```typescript
+myElement.addEventListener('mount', (e) => {
+    // Receives mount events for elements within this element
+    console.log('Element mounted:', e.mountedElement);
+});
+```
+
+## API
+
+### MOSE Mixin
+
+```typescript
+function MOSE<T extends Constructor<HTMLElement>>(Base: T): T
+```
+
+A TypeScript mixin that adds MountObserver script element functionality to any HTMLElement class.
+
+### getHighestCERNode
+
+```typescript
+function getHighestCERNode(node: Node): Node | null
+```
+
+Utility function that finds the highest node in the DOM tree that shares the same `customElementRegistry` as the provided node.
+
+## How It Works
+
+1. **Initialization**: When a MOSE element is constructed:
+   - Checks for duplicate elements in the same registry scope
+   - Copies mountobserver scripts from parent elements (inheritance)
+   - Sets up a MountObserver to watch for `<script type="mountobserver">` elements
+
+2. **Script Processing**: When a mountobserver script is found:
+   - Loads external JSON if `src` attribute is present
+   - Parses inline JSON from `innerHTML`
+   - Merges configurations using assignGingerly
+   - Creates a MountObserver with the merged configuration
+
+3. **Registry Scoping**: 
+   - Uses `getHighestCERNode()` to find the appropriate scope
+   - Ensures only one MountObserver per highestCERNode
+   - Stores observer reference using `Symbol.for('cteH9dMG-UWwxVaMwFgvQA')`
+
+## Example: Complete Setup
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="importmap">
+    {
+        "imports": {
+            "mount-observer/": "/node_modules/mount-observer/",
+            "assign-gingerly/": "/node_modules/assign-gingerly/"
+        }
+    }
+    </script>
+</head>
+<body>
+    <script type="module">
+        import { MOSE } from './MOSE.js';
+
+        class MyElement extends MOSE(HTMLElement) {
+            constructor() {
+                super();
+            }
+        }
+
+        customElements.define('my-element', MyElement);
+    </script>
+
+    <my-element>
+        <script type="mountobserver">
+        {
+            "whereElementMatches": "button",
+            "assignGingerly": {
+                "disabled": false,
+                "?.dataset?.action": "submit",
+                "?.style": {
+                    "color": "green",
+                    "height": "25px"
+                }
+            }
+        }
+        </script>
+        <button>I am here</button>
+    </my-element>
+</body>
+</html>
+```
+
+Result:
+```html
+<button 
+    data-action="submit" 
+    style="color: green; height: 25px;">
+    I am here
+</button>
+```
+
+## Dependencies
+
+- [mount-observer](https://www.npmjs.com/package/mount-observer) - Core MountObserver functionality
+- [assign-gingerly](https://www.npmjs.com/package/assign-gingerly) - Property assignment with nested support
+
+## Browser Support
+
+Requires Chrome 146+ with Scoped Custom Element Registry support enabled.
+
+## Testing
+
+Manual test files are available in the `tests/` directory:
+
+- `tests/simple.html` - Basic usage example
+- `tests/inheritance.html` - Script inheritance example
+- `tests/exclude.html` - Exclude functionality example
+- `tests/getHighestCERNode.html` - Registry scoping tests
+
+Run the development server:
+
+```bash
+npm run serve
+```
+
+Then open test files in Chrome Canary with scoped custom element registries enabled.
+
+## TypeScript
+
+The package is written in TypeScript and includes type definitions. Both `.ts` and compiled `.js` files are included in the repository.
+
+To compile:
+
+```bash
+tsc
+```
+
+## License
+
+MIT

package/demo/scopedCustomElementRegistry.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scope Custom Element Registry</title>
+</head>
+<body>
+    <my-element>
+        <template shadowrootmode="open">
+            <div>
+            </div>
+        </template>
+    </my-element>
+    <script>
+        const div = document.querySelector('my-element').shadowRoot.querySelector('div');
+        const section = document.createElement('section', {
+            customElementRegistry: new CustomElementRegistry()
+        });
+        div.appendChild(section);
+    </script>
+</body>
+</html>

package/getHighestCERNode.js

@@ -0,0 +1,37 @@
+/**
+ * Recursively traverses up the DOM tree to find the highest node
+ * that shares the same customElementRegistry as the passed in element.
+ *
+ * @param {Node} node - The starting node to check
+ * @returns {Node | null} The highest node with matching customElementRegistry, or null if node is invalid
+ */
+export function getHighestCERNode(node) {
+    if (!node) {
+        return null;
+    }
+    const startRegistry = node.customElementRegistry;
+    let currentNode = node;
+    let highestMatch = node;
+    while (currentNode) {
+        // Check if current node has matching customElementRegistry
+        if (currentNode.customElementRegistry === startRegistry) {
+            highestMatch = currentNode;
+        }
+        // Try to get parent element first
+        const parent = currentNode.parentElement;
+        if (parent) {
+            currentNode = parent;
+            continue;
+        }
+        // If no parent element, check for rootNode (shadow root case)
+        const root = currentNode.getRootNode();
+        if (root && root !== currentNode && root !== document) {
+            return root;
+        }
+        else {
+            // Reached the top
+            break;
+        }
+    }
+    return highestMatch;
+}

package/getHighestCERNode.ts

@@ -0,0 +1,41 @@
+/**
+ * Recursively traverses up the DOM tree to find the highest node
+ * that shares the same customElementRegistry as the passed in element.
+ * 
+ * @param {Node} node - The starting node to check
+ * @returns {Node | null} The highest node with matching customElementRegistry, or null if node is invalid
+ */
+export function getHighestCERNode(node: Node): Node | null {
+    if (!node) {
+        return null;
+    }
+
+    const startRegistry = (node as any).customElementRegistry;
+    let currentNode: Node | null = node;
+    let highestMatch: Node = node;
+
+    while (currentNode) {
+        // Check if current node has matching customElementRegistry
+        if ((currentNode as any).customElementRegistry === startRegistry) {
+            highestMatch = currentNode;
+        }
+
+        // Try to get parent element first
+        const parent = (currentNode as any).parentElement as Element | null;
+        if (parent) {
+            currentNode = parent;
+            continue;
+        }
+
+        // If no parent element, check for rootNode (shadow root case)
+        const root = currentNode.getRootNode();
+        if (root && root !== currentNode && root !== document) {
+            return root;
+        } else {
+            // Reached the top
+            break;
+        }
+    }
+
+    return highestMatch;
+}

package/imports.html

@@ -0,0 +1,9 @@
+<script type=importmap>
+{
+    "imports": {
+        "assign-gingerly/": "/node_modules/assign-gingerly/",
+        "mount-observer/": "/node_modules/mount-observer/",
+        "mount-observer-script-element/": "/"
+    }
+}
+</script>

package/index.js

@@ -0,0 +1,2 @@
+export { getHighestCERNode } from './getHighestCERNode.js';
+export { MOSE } from './MOSE.js';

package/index.ts

@@ -0,0 +1,2 @@
+export {getHighestCERNode} from './getHighestCERNode.js';
+export {MOSE} from './MOSE.js';