mount-observer-script-element 0.0.1

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "mount-observer-script-element",
+  "version": "0.0.1",
+  "description": "A TypeScript mixin that enables declarative configuration of MountObserver instances through script elements with support for Scoped Custom Element Registries",
+  "homepage": "https://github.com/bahrus/mount-observer-script-element#readme",
+  "bugs": {
+    "url": "https://github.com/bahrus/mount-observer-script-element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bahrus/mount-observer-script-element.git"
+  },
+  "license": "MIT",
+  "author": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.ts",
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "default": "./index.js"
+    },
+    "./MOSE.js": {
+      "types": "./MOSE.ts",
+      "default": "./MOSE.js"
+    },
+    "./getHighestCERNode.js": {
+      "types": "./getHighestCERNode.ts",
+      "default": "./getHighestCERNode.js"
+    },
+    "./index.js": {
+      "types": "./index.ts",
+      "default": "./index.js"
+    }
+  },
+  "dependencies": {
+    "mount-observer": "0.1.4",
+    "assign-gingerly": "0.0.6"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.2",
+    "spa-ssi": "0.0.26"
+  },
+  "scripts": {
+    "serve": "node ./node_modules/spa-ssi/serve.js",
+    "test": "playwright test",
+    "safari": "npx playwright wk http://localhost:8000",
+    "update": "ncu -u && npm install"
+  }
+}

package/requirements/Requirement1.md

@@ -0,0 +1,14 @@
+# getHighestCERNode
+
+Chrome Canary now has support for Scoped Custom Element Registries.
+
+Because it is so cutting edge, we can't create and run playwright tests for now.
+
+However, it makes sense to create test html pages in the tests folder that can be used to test this functionality manually for now.
+
+See demo/scopedCustomElementRegistry.html as an example of such a page.
+
+Each element now has a property, "customElementRegistry". "Scoping" is allowed within a shadowRoot, meaning elements within a shadowRoot can have their own customElementRegistry.
+
+Define a module, 'getHighestCERNode.ts' with a function of the same name that takes as a parameter a Node, and recursively traverses up using parentElement and getRootNode(), checking if the customElementRegistry matches. Stop at the root node and return the highest node with a customElementRegistry that matches the passed in element.
+

package/requirements/Requirement2.md

@@ -0,0 +1,7 @@
+# mount-observer-script-element custom element mixin
+
+Please define a custom element mixin called MOSE that:
+
+1. Finds the highest CERNode containing the element using getHighestCERNode.ts
+2. Checks if there is already a custom element with the same localName as the current element within the highestCERNode scope by using querySelectorAll and filtering out the current element. If any matching elements are found, throws an error.
+3. After the duplicate check, calls `#getContainerMOSEs(highestCERNode)` to copy mountobserver script elements from parent containers (see Requirement 6).

package/requirements/Requirement3.md

@@ -0,0 +1,15 @@
+# Monitor for mount-observer-script-elements
+
+In the MOSE.ts mixin, after getting the highestCERNode, add a MountObserver observer, documented in node_modules/mount-observer/ReadME.md, that watches for elements of type:
+
+```JavaScript
+<script type="mountobserver"></script>
+```
+
+It should:
+
+1.  Check if the script element has a src attribute using getAttribute('src').  If so, use a JSON import with `import(src, {with: {type: 'json'}})` to read the JSON, and use response.default as the config.
+2.  If no src attribute found, start with empty object {}
+3.  If the script element contains non-trivial innerHTML, use JSON.parse on the script's innerHTML property.
+4.  Import assign-gingerly/assignGingerly.js (documented in node_modules/assign-gingerly/ReadMe.md) and use assignGingerly to merge the parsed JSON into the config object.
+5.  Apply MountObserver on the highestCERNode with the merged config object.

package/requirements/Requirement4.md

@@ -0,0 +1,9 @@
+# Unique mountobserver for mountobserver script elements
+
+Method #setupMountObserver() should only be invoked once per highestCERNode, regardless of how many custom elements utilize the MOSE mixin. 
+
+Implementation:
+
+1. Use `Symbol.for('cteH9dMG-UWwxVaMwFgvQA')` as the key to track if a MountObserver has been set up
+2. Store the actual MountObserver instance (not just a boolean) in `(highestCERNode as any)[MOUNT_OBSERVER_SETUP]`
+3. When an existing observer is found, subscribe to its mount events and re-dispatch them from the current element (see Requirement 5)

package/requirements/Requirement5.md

@@ -0,0 +1,16 @@
+# Notify of mount observer children
+
+In #setupMountObserver, if an observer is already found, instead of just returning, we need to add code that does the following:
+
+1. Import `MountEvent` and `mountEventName` from 'mount-observer/Events.js'
+2. Subscribe to the existing observer's mount event using `mountEventName`
+3. In the event handler, extract the `mountedElement` from the `MountEvent`
+4. Check if `this.contains(mountedElement)` - only proceed if the mounted element is within this custom element
+5. If the check passes, re-dispatch the event from this custom element instance using `this.dispatchEvent(e)`
+
+Additionally:
+
+6. Change the `MOUNT_OBSERVER_SETUP` symbol to use `Symbol.for('cteH9dMG-UWwxVaMwFgvQA')` instead of a regular Symbol
+7. Store the actual MountObserver instance (not just `true`) in `(highestCERNode as any)[MOUNT_OBSERVER_SETUP]`
+8. In `#processScriptElement`, when loading JSON from src, use `structuredClone(response.default)` instead of just `response.default`
+9. When calling `assignGingerly`, pass a third parameter with the registry: `{registry: (<any>scriptElement).customElementRegistry.assignGingerlyRegistry}`

package/requirements/Requirement6.md

@@ -0,0 +1,23 @@
+# Copy mountobserver script elements from container
+
+Add a method `#getContainerMOSEs(highestCERNode: Node)` that is called at the end of `#checkForDuplicateRegistration()`.
+
+What this method does:
+
+1. If highestCERNode is the document root, return early (don't do anything)
+2. Get the parent node:
+   - If highestCERNode is an Element, get its parentElement
+   - If highestCERNode is a ShadowRoot, get its host property
+3. Find the highestCERNode of the parent node obtained from step 2
+4. If the parent's highestCERNode exists and has a querySelector method, search for an element with the same localName as the current element instance. Call it "parentCE". If not found, exit.
+5. If the highestCERNode passed into the method contains the parentCE, exit quietly
+6. Call `#cloneAndAppendScripts(parentCE)` to clone all script elements with type="mountobserver" from parentCE
+7. Add an event listener to parentCE for the "mount" event (using mountEventName). When a mount event occurs, check if the mountedElement is an HTMLScriptElement with type="mountobserver", and if so, call `#cloneAndAppendScripts(parentCE)` again
+
+Create a helper method `#cloneAndAppendScripts(sourceElement: Element)`:
+
+1. Find all script elements with type="mountobserver" in the sourceElement
+2. For each script, get its src attribute
+3. Check if a script with the same src attribute already exists in the current element
+4. Only clone and append scripts that don't already exist (to avoid duplicates)
+

package/requirements/Requirement7.md

@@ -0,0 +1,3 @@
+# Exclude
+
+Before copying in a mountobserver script element, check if the custom element has property "exclude" or attribute "exclude" and if so, see if the script element matches that value, and if so, don't append the element

package/tests/MOSE.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test MOSE Mixin</title>
+    <!-- #include virtual="/imports.html" -->
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        .test-result {
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 4px;
+        }
+        .pass {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        .fail {
+            background-color: #f8d7da;
+            color: #721c24;
+        }
+        #test-container {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>MOSE Mixin Tests</h1>
+    <div id="results"></div>
+    <div id="test-container"></div>
+
+    <script type="module">
+        import { MOSE } from '../MOSE.js';
+
+        const results = document.getElementById('results');
+        const container = document.getElementById('test-container');
+
+        function logResult(testName, passed, message) {
+            const div = document.createElement('div');
+            div.className = `test-result ${passed ? 'pass' : 'fail'}`;
+            div.textContent = `${passed ? '✓' : '✗'} ${testName}: ${message}`;
+            results.appendChild(div);
+        }
+
+        // Test 1: Define a custom element using MOSE mixin
+        try {
+            class TestElement1 extends MOSE(HTMLElement) {
+                constructor() {
+                    super();
+                    this.innerHTML = '<p>Test Element 1</p>';
+                }
+            }
+            customElements.define('test-element-1', TestElement1);
+            
+            const el1 = document.createElement('test-element-1');
+            container.appendChild(el1);
+            
+            logResult(
+                'Test 1',
+                true,
+                'Successfully defined custom element with MOSE mixin'
+            );
+        } catch (error) {
+            logResult(
+                'Test 1',
+                false,
+                `Failed to define element: ${error.message}`
+            );
+        }
+
+        // Test 2: Try to create duplicate element in same registry (should not throw during creation)
+        try {
+            const el2 = document.createElement('test-element-1');
+            container.appendChild(el2);
+            
+            logResult(
+                'Test 2',
+                true,
+                'Can create multiple instances of same custom element'
+            );
+        } catch (error) {
+            logResult(
+                'Test 2',
+                false,
+                `Unexpected error: ${error.message}`
+            );
+        }
+
+        // Test 3: Define element with scoped registry
+        try {
+            const customRegistry = new CustomElementRegistry();
+            
+            class TestElement2 extends MOSE(HTMLElement) {
+                constructor() {
+                    super();
+                    this.innerHTML = '<p>Test Element 2 (Scoped)</p>';
+                }
+            }
+            
+            customRegistry.define('test-element-2', TestElement2);
+            
+            const el3 = document.createElement('test-element-2', {
+                customElementRegistry: customRegistry
+            });
+            container.appendChild(el3);
+            
+            logResult(
+                'Test 3',
+                true,
+                'Successfully defined element in scoped registry'
+            );
+        } catch (error) {
+            logResult(
+                'Test 3',
+                false,
+                `Failed with scoped registry: ${error.message}`
+            );
+        }
+
+        // Test 4: Test MountObserver script element processing
+        try {
+            class TestElement3 extends MOSE(HTMLElement) {
+                constructor() {
+                    super();
+                }
+            }
+            customElements.define('test-element-3', TestElement3);
+            
+            const el4 = document.createElement('test-element-3');
+            container.appendChild(el4);
+            
+            // Add a mount observer script element
+            const script = document.createElement('script');
+            script.type = 'mountobserver';
+            script.textContent = JSON.stringify({
+                whereElementMatches: 'div.test-target',
+                assignGingerly: {
+                    '?.dataset?.processed': 'true'
+                }
+            });
+            el4.appendChild(script);
+            
+            // Add a target element
+            setTimeout(() => {
+                const targetDiv = document.createElement('div');
+                targetDiv.className = 'test-target';
+                el4.appendChild(targetDiv);
+                
+                setTimeout(() => {
+                    const processed = targetDiv.dataset.processed === 'true';
+                    logResult(
+                        'Test 4',
+                        processed,
+                        processed ? 'MountObserver script element processed successfully' : 'MountObserver script element not processed'
+                    );
+                }, 100);
+            }, 100);
+        } catch (error) {
+            logResult(
+                'Test 4',
+                false,
+                `Error with MountObserver script: ${error.message}`
+            );
+        }
+
+        console.log('MOSE tests initiated. Check results above.');
+    </script>
+</body>
+</html>

package/tests/Requirement3.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Requirement 3 - MountObserver Script Elements</title>
+    <!-- #include virtual="/imports.html" -->
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        .test-result {
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 4px;
+        }
+        .pass {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        .fail {
+            background-color: #f8d7da;
+            color: #721c24;
+        }
+        .info {
+            background-color: #d1ecf1;
+            color: #0c5460;
+        }
+        #test-container {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Requirement 3: MountObserver Script Elements</h1>
+    <div id="results"></div>
+    <div id="test-container"></div>
+
+    <script type="module">
+        import { MOSE } from '../MOSE.js';
+
+        const results = document.getElementById('results');
+        const container = document.getElementById('test-container');
+
+        function logResult(testName, passed, message, isInfo = false) {
+            const div = document.createElement('div');
+            div.className = `test-result ${isInfo ? 'info' : (passed ? 'pass' : 'fail')}`;
+            div.textContent = `${isInfo ? 'ℹ' : (passed ? '✓' : '✗')} ${testName}: ${message}`;
+            results.appendChild(div);
+        }
+
+        logResult('Info', true, 'Testing MOSE mixin with MountObserver script elements', true);
+
+        // Test 1: Basic MOSE element with inline JSON config
+        try {
+            class MoseElement1 extends MOSE(HTMLElement) {
+                constructor() {
+                    super();
+                    this.attachShadow({ mode: 'open' });
+                    this.shadowRoot.innerHTML = '<div id="content"></div>';
+                }
+            }
+            customElements.define('mose-element-1', MoseElement1);
+            
+            const el1 = document.createElement('mose-element-1');
+            container.appendChild(el1);
+            
+            // Add a mount observer script with inline JSON
+            const script1 = document.createElement('script');
+            script1.type = 'mountobserver';
+            script1.textContent = JSON.stringify({
+                whereElementMatches: 'button.auto-disable',
+                assignGingerly: {
+                    disabled: true,
+                    '?.dataset?.autoDisabled': 'true'
+                }
+            });
+            el1.shadowRoot.appendChild(script1);
+            
+            // Add target button after a delay
+            setTimeout(() => {
+                const button = document.createElement('button');
+                button.className = 'auto-disable';
+                button.textContent = 'Test Button';
+                el1.shadowRoot.getElementById('content').appendChild(button);
+                
+                setTimeout(() => {
+                    const isDisabled = button.disabled === true;
+                    const hasDataset = button.dataset.autoDisabled === 'true';
+                    logResult(
+                        'Test 1',
+                        isDisabled && hasDataset,
+                        `Inline JSON config ${isDisabled && hasDataset ? 'applied successfully' : 'failed to apply'}`
+                    );
+                }, 150);
+            }, 100);
+        } catch (error) {
+            logResult(
+                'Test 1',
+                false,
+                `Failed: ${error.message}`
+            );
+        }
+
+        // Test 2: Empty config (no src, no innerHTML)
+        try {
+            class MoseElement2 extends MOSE(HTMLElement) {
+                constructor() {
+                    super();
+                }
+            }
+            customElements.define('mose-element-2', MoseElement2);
+            
+            const el2 = document.createElement('mose-element-2');
+            container.appendChild(el2);
+            
+            // Add empty script
+            const script2 = document.createElement('script');
+            script2.type = 'mountobserver';
+            el2.appendChild(script2);
+            
+            setTimeout(() => {
+                logResult(
+                    'Test 2',
+                    true,
+                    'Empty script element handled gracefully'
+                );
+            }, 300);
+        } catch (error) {
+            logResult(
+                'Test 2',
+                false,
+                `Failed: ${error.message}`
+            );
+        }
+
+        // Test 3: Multiple properties with assignGingerly
+        try {
+            class MoseElement3 extends MOSE(HTMLElement) {
+                constructor() {
+                    super();
+                    this.innerHTML = '<div id="target-container"></div>';
+                }
+            }
+            customElements.define('mose-element-3', MoseElement3);
+            
+            const el3 = document.createElement('mose-element-3');
+            container.appendChild(el3);
+            
+            const script3 = document.createElement('script');
+            script3.type = 'mountobserver';
+            script3.textContent = JSON.stringify({
+                whereElementMatches: 'input.styled-input',
+                assignGingerly: {
+                    placeholder: 'Enter text...',
+                    '?.style?.backgroundColor': '#f0f0f0',
+                    '?.style?.padding': '10px',
+                    '?.dataset?.styled': 'true'
+                }
+            });
+            el3.appendChild(script3);
+            
+            setTimeout(() => {
+                const input = document.createElement('input');
+                input.className = 'styled-input';
+                el3.querySelector('#target-container').appendChild(input);
+                
+                setTimeout(() => {
+                    const hasPlaceholder = input.placeholder === 'Enter text...';
+                    const hasBackground = input.style.backgroundColor === 'rgb(240, 240, 240)';
+                    const hasPadding = input.style.padding === '10px';
+                    const hasDataset = input.dataset.styled === 'true';
+                    
+                    const allPassed = hasPlaceholder && hasBackground && hasPadding && hasDataset;
+                    logResult(
+                        'Test 3',
+                        allPassed,
+                        `Multiple properties ${allPassed ? 'applied correctly' : 'not all applied'}`
+                    );
+                }, 150);
+            }, 400);
+        } catch (error) {
+            logResult(
+                'Test 3',
+                false,
+                `Failed: ${error.message}`
+            );
+        }
+
+        // Test 4: Scoped registry with MOSE
+        try {
+            const customRegistry = new CustomElementRegistry();
+            
+            class MoseElement4 extends MOSE(HTMLElement) {
+                constructor() {
+                    super();
+                    this.innerHTML = '<span class="target-span">Target</span>';
+                }
+            }
+            
+            customRegistry.define('mose-element-4', MoseElement4);
+            
+            const el4 = document.createElement('mose-element-4', {
+                customElementRegistry: customRegistry
+            });
+            container.appendChild(el4);
+            
+            const script4 = document.createElement('script');
+            script4.type = 'mountobserver';
+            script4.textContent = JSON.stringify({
+                whereElementMatches: 'span.target-span',
+                assignGingerly: {
+                    '?.dataset?.scopedRegistry': 'true'
+                }
+            });
+            el4.appendChild(script4);
+            
+            setTimeout(() => {
+                const span = el4.querySelector('.target-span');
+                const hasDataset = span?.dataset?.scopedRegistry === 'true';
+                logResult(
+                    'Test 4',
+                    hasDataset,
+                    `Scoped registry ${hasDataset ? 'works correctly' : 'failed'}`
+                );
+            }, 550);
+        } catch (error) {
+            logResult(
+                'Test 4',
+                false,
+                `Failed: ${error.message}`
+            );
+        }
+
+        console.log('Requirement 3 tests initiated. Results will appear above.');
+    </script>
+</body>
+</html>

package/tests/buttonMatch.json

@@ -0,0 +1,12 @@
+{
+   "whereElementMatches": "button",
+   "assignOnMount": {
+      "disabled": false,
+      "?.dataset?.action": "submit",
+      "?.dataset?.trackingId": "12345",
+      "?.style": {
+         "color": "green",
+         "height": "25px"
+      }
+   }
+}

package/tests/exclude.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exclude</title>
+    <!-- #include virtual="/imports.html" -->
+</head>
+<body>
+    <button>I am here</button>
+
+    <script type=module>
+        import { MOSE } from '../MOSE.js';
+        class MoseElement extends MOSE(HTMLElement){
+
+        }
+        customElements.define('mose-element', MoseElement);
+    </script>
+    <mose-element>
+        <script type=mountobserver src="mount-observer-script-element/tests/buttonMatch.json">
+        {
+            "?.assignOnMount?.style?.color": "red"
+        }
+    </script>
+    </mose-element>
+    <my-child-element>
+        <template shadowrootmode=open>
+            <button>You are here</button>
+            <mose-element exclude="[src='mount-observer-script-element/tests/buttonMatch.json']" id=child></mose-element>
+        </template>
+    </my-child-element>
+</body>
+</html>