mount-observer 0.0.22 → 0.0.23

package/MountObserver.js

@@ -181,7 +181,8 @@ export class MountObserver extends EventTarget {
         }, { signal: this.#abortController.signal });
         await this.#inspectWithin(within, true);
     }
-    synthesize(within, customElement, mose) {
+    static synthesize(within, customElement, mose) {
+        mose.type = 'mountobserver';
         const name = customElements.getName(customElement);
         if (name === null)
             throw 400;

package/Synthesizer.js

@@ -6,12 +6,12 @@ export class Synthesizer extends HTMLElement {
         for (const mutation of mutationList) {
             const { addedNodes } = mutation;
             for (const node of addedNodes) {
-                if (!(node instanceof HTMLScriptElement))
+                if (!(node instanceof HTMLScriptElement) || node.type !== 'mountobserver')
                     continue;
                 const mose = node;
                 this.mountObserverElements.push(mose);
-                this.#import(mose);
-                const e = new SyntheticEvent(mose);
+                this.activate(mose);
+                const e = new SynthetizeEvent(mose);
                 this.dispatchEvent(e);
             }
         }
@@ -21,25 +21,35 @@ export class Synthesizer extends HTMLElement {
         const init = {
             childList: true
         };
-        this.#mutationObserver = new MutationObserver(this.mutationCallback);
-        this.#mutationObserver.observe(this.getRootNode());
-        this.#inherit();
+        this.querySelectorAll('script[type="mountobserver"]').forEach(s => {
+            const mose = s;
+            this.mountObserverElements.push(mose);
+            this.activate(mose);
+        });
+        this.#mutationObserver = new MutationObserver(this.mutationCallback.bind(this));
+        this.#mutationObserver.observe(this, init);
+        this.inherit();
     }
-    #import(mose) {
+    activate(mose) {
         const { init, do: d, id } = mose;
-        const se = document.createElement('script');
-        se.init = init;
-        se.id = id;
-        se.do = d;
         const mi = {
             do: d,
             ...init
         };
         const mo = new MountObserver(mi);
-        se.observer = mo;
+        mose.observer = mo;
+        mo.observe(this.getRootNode());
+    }
+    import(mose) {
+        const { init, do: d, id, synConfig } = mose;
+        const se = document.createElement('script');
+        se.init = { ...init };
+        se.id = id;
+        se.do = { ...d };
+        se.synConfig = { ...synConfig };
         this.appendChild(se);
     }
-    #inherit() {
+    inherit() {
         const rn = this.getRootNode();
         const host = rn.host;
         if (!host)
@@ -49,11 +59,11 @@ export class Synthesizer extends HTMLElement {
         const parentScopeSynthesizer = parentShadowRealm.querySelector(localName);
         const { mountObserverElements } = parentScopeSynthesizer;
         for (const moe of mountObserverElements) {
-            this.#import(moe);
+            this.import(moe);
         }
         if (parentScopeSynthesizer !== null) {
-            parentScopeSynthesizer.addEventListener(SyntheticEvent.eventName, e => {
-                this.#import(e.mountObserverElement);
+            parentScopeSynthesizer.addEventListener(SynthetizeEvent.eventName, e => {
+                this.import(e.mountObserverElement);
             });
         }
     }
@@ -61,6 +71,9 @@ export class Synthesizer extends HTMLElement {
         if (this.#mutationObserver !== undefined) {
             this.#mutationObserver.disconnect();
         }
+        for (const mose of this.mountObserverElements) {
+            mose.observer.disconnect(this.getRootNode());
+        }
     }
 }
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
@@ -68,11 +81,11 @@ export class Synthesizer extends HTMLElement {
  * The `mutation-event` event represents something that happened.
  * We can document it here.
  */
-export class SyntheticEvent extends Event {
+export class SynthetizeEvent extends Event {
     mountObserverElement;
     static eventName = 'synthesize';
     constructor(mountObserverElement) {
-        super(SyntheticEvent.eventName);
+        super(SynthetizeEvent.eventName);
         this.mountObserverElement = mountObserverElement;
     }
 }

package/package.json

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

package/types.d.ts

@@ -170,11 +170,15 @@ export interface AddLoadEventListener{
 //#endregion
 
 //#region MountObserver Script Element
-export interface MountObserverScriptElement extends HTMLScriptElement{
+export interface MountObserverScriptElementEndUserProps<TSynConfig=any>{
     init: JSONSerializableMountInit;
-    //mountedElements: Array<WeakRef<Element>>;
     observer: IMountObserver;
     do: MountObserverCallbacks;
+    synConfig: TSynConfig;
+}
+export interface MountObserverScriptElement<TSynConfig=any> 
+    extends HTMLScriptElement, MountObserverScriptElementEndUserProps<TSynConfig>{
+
 }
 //#endregion