mount-observer 0.0.3 → 0.0.5

package/MountObserver.js

@@ -136,7 +136,8 @@ export class MountObserver extends EventTarget {
                         break;
                     case 'object':
                         if (Array.isArray(imp)) {
-                            this.module = await import(imp[0], imp[1]);
+                            throw 'NI: Firefox';
+                            //this.module = await import(imp[0], imp[1]);
                         }
                         break;
                     case 'function':
@@ -229,8 +230,8 @@ export class MountObserver extends EventTarget {
         const els = Array.from(within.querySelectorAll(this.#selector));
         this.#filterAndMount(els, false);
     }
-    unobserve() {
-        throw 'NI';
+    unobserve(within) {
+        //mutationObserverLookup
     }
 }
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080

package/README.md

@@ -1,10 +1,16 @@
+[![Playwright Tests](https://github.com/bahrus/mount-observer/actions/workflows/CI.yml/badge.svg)](https://github.com/bahrus/mount-observer/actions/workflows/CI.yml)
+[![NPM version](https://badge.fury.io/js/mount-observer.png)](http://badge.fury.io/js/mount-observer)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/mount-observer?style=for-the-badge)](https://bundlephobia.com/result?p=mount-observer)
+<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/mount-observer?compression=gzip">
+
+
 # The MountObserver api.
 
 Author:  Bruce B. Anderson
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: 2023-11-18
+Last Update: 2023-11-23
 
 ## Benefits of this API
 
@@ -128,13 +134,16 @@ const observer = new MountObserver({
       },
       onDismount: ...,
       onDisconnect: ...,
+      onOutsideRootNode: ...,
       onReconnect: ...,
-      onReconfirm: ...
+      onReconfirm: ...,
       onOutOfScope: ...,
    }
 })
 ```
 
+Callbacks like we see above are useful for tight coupling, and probably are unmatched in terms of performance.  However, since these rules may be of interest to multiple parties, it is usesful to also provide the ability for multiple parties to subscribe to these css rules.  This can be done via:
+
 ## Subscribing
 
 Subscribing can be done via:
@@ -173,13 +182,13 @@ The moment a MountObserver instance's "observe" method is called (passing in a r
 
 If an element that is in "mounted" state according to a MountObserver instance is moved from one parent DOM element to another:
 
-1)  "disconnect" event is dispatched from the MountObserver instance the moment the element is disconnected from the DOM fragment.
+1)  "disconnect" event is dispatched from the MountObserver instance the moment the mounted element is disconnected from the DOM fragment.
 2)  If/when the element is added somewhere else in the DOM tree, the mountObserver instance will dispatch event "reconnect", regardless of where. [Note:  can't polyfill this very easily]
-3)  If the element is added outside the rootNode being observed, the mountObserver instance will dispatch event "outside-root-node", and the MountObserver instance will relinquish any further responsibility for this element.  Ideally this would also be dispatched when the platform garbage collects the element as well after all hard references are relinquished.
-4)  If the new place it was added remains within the original rootNode and remains either dismounted or mounted, the MountObserver instance dispatches event "reconfirmed".
-5)  If the element no longer satisfies the criteria of the MountObserver instance, the MountObserver instance will dispatch event "dismount".  The same is done in reverse for moved elements that started out in a "dismounted" state. 
+3)  If the mounted element is added outside the rootNode being observed, the mountObserver instance will dispatch event "outside-root-node", and the MountObserver instance will relinquish any further responsibility for this element.  Ideally this would also be dispatched when the platform garbage collects the element as well after all hard references are relinquished.
+4)  If the new place it was added remains within the original rootNode and remains mounted, the MountObserver instance dispatches event "reconfirmed".
+5)  If the element no longer satisfies the criteria of the MountObserver instance, the MountObserver instance will dispatch event "dismount".  
 
-## Special support for attributes
+## Special support for observable attributes
 
 Extra support is provided for monitoring attributes.
 
@@ -201,6 +210,14 @@ Example:
    });
    mo.addEventListener('attr-change', e => {
       console.log(e);
+      // {
+      //    attrChangeInfo:{
+      //       name: 'test-1',
+      //       oldValue: null,
+      //       newValue: 'hello'
+      //       idx: 0,
+      //    }
+      // }
    });
    mo.observe(div);
    setTimeout(() => {

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "mount-observer",
-  "version": "0.0.3",
-  "description": "",
+  "version": "0.0.5",
+  "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "devDependencies": {
     "@playwright/test": "1.39.0",
     "may-it-serve": "0.0.6"
   },
+  "exports": {
+    ".": "./MountObserver.js",
+    "./MountObserver.js": "./MountObserver.js"
+  },
+  "files": [
+    "*.js",
+    "types.d.ts"
+  ],
+  "types": "types.d.ts",
   "scripts": {
     "serve": "node node_modules/may-it-serve",
     "test": "playwright test",

package/types.d.ts

@@ -7,11 +7,11 @@ export interface MountInit{
     readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
     readonly do?: {
-        readonly onMount: PipelineProcessor,
-        readonly onDismount: PipelineProcessor,
-        readonly onDisconnect: PipelineProcessor,
-        readonly onReconfirmed: PipelineProcessor,
-        readonly onOutsideRootNode: PipelineProcessor,
+        readonly onMount?: PipelineProcessor,
+        readonly onDismount?: PipelineProcessor,
+        readonly onDisconnect?: PipelineProcessor,
+        readonly onReconfirmed?: PipelineProcessor,
+        readonly onOutsideRootNode?: PipelineProcessor,
     }
     
 }
@@ -32,7 +32,7 @@ export interface MountContext {
     // readonly mountedRefs:  WeakRef<Element>[],
     // readonly dismountedRefs: WeakRef<Element>[],
     observe(within: Node): void;
-    unobserve(): void;
+    unobserve(within: Node): void;
     module?: any;
 } 
 

package/.github/workflows/CI.yml

@@ -1,18 +0,0 @@
-name: Playwright Tests
-on: [push]
-jobs:
-  test:
-    timeout-minutes: 10
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-      with:
-        node-version: '16.x'
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npm run test
-      

package/MountObserver.ts

@@ -1,282 +0,0 @@
-import {MountInit, MountContext, AddMutationEventListener, 
-    MutationEvent, dismountEventName, mountEventName, IMountEvent, IDismountEvent,
-    disconnectedEventName, IDisconnectEvent, IAttrChangeEvent, attrChangeEventName, AttrChangeInfo
-} from './types';
-import {RootMutObs} from './RootMutObs.js';
-
-
-const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
-export class MountObserver extends EventTarget implements MountContext{
-    
-    #mountInit: MountInit;
-    #rootMutObs: RootMutObs | undefined;
-    #abortController: AbortController;
-    #mounted: WeakSet<Element>;
-    #mountedList: Array<WeakRef<Element>> | undefined;
-    #disconnected: WeakSet<Element>;
-    //#unmounted: WeakSet<Element>;
-    #isComplex: boolean;
-
-    constructor(init: MountInit){
-        super();
-        const {match, whereElementIntersectsWith, whereMediaMatches} = init;
-        let isComplex = false;
-        if(match !== undefined){
-            const reducedMatch = match.replaceAll(':not(', '');
-            isComplex = reducedMatch.includes(' ') || reducedMatch.includes(':');
-        }
-        this.#isComplex = isComplex;
-        if(whereElementIntersectsWith || whereMediaMatches) throw 'NI'; //not implemented
-        this.#mountInit = init;
-        this.#abortController = new AbortController();
-        this.#mounted = new WeakSet();
-        this.#disconnected = new WeakSet();
-        //this.#unmounted = new WeakSet();
-    }
-
-    #calculatedSelector: string | undefined;
-    get #selector(){
-        if(this.#calculatedSelector !== undefined) return this.#calculatedSelector;
-        const {match, attribMatches} = this.#mountInit;
-        const base = match || '*';
-        if(attribMatches === undefined) return base;
-        const matches: Array<string> = [];
-        attribMatches.forEach(x => {
-            const {names} = x;
-            names.forEach(y => {
-                matches.push(`${base}[${y}]`)
-            });
-        });
-        this.#calculatedSelector = matches.join(',');
-        return this.#calculatedSelector;
-    }
-
-    async observe(within: Node){
-        const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within; 
-        if(!mutationObserverLookup.has(nodeToMonitor)){
-            mutationObserverLookup.set(nodeToMonitor, new RootMutObs(nodeToMonitor));
-        }
-        const rootMutObs = mutationObserverLookup.get(within)!;
-        const {attribMatches} = this.#mountInit;
-        (rootMutObs as any as AddMutationEventListener).addEventListener('mutation-event', (e: MutationEvent) => {
-            //TODO:  disconnected
-            if(this.#isComplex){
-                this.#inspectWithin(within);
-                return;
-            }
-            const {mutationRecords} = e;
-            const elsToInspect: Array<Element> = [];
-            //const elsToDisconnect: Array<Element> = [];
-            const doDisconnect = this.#mountInit.do?.onDisconnect;
-            for(const mutationRecord of mutationRecords){
-                const {addedNodes, type, removedNodes} = mutationRecord;
-                //console.log(mutationRecord);
-                const addedElements = Array.from(addedNodes).filter(x => x instanceof Element) as Array<Element>;
-                addedElements.forEach(x => elsToInspect.push(x));
-                if(type === 'attributes'){
-                    const {target, attributeName, oldValue} = mutationRecord;
-                    if(target instanceof Element && attributeName !== null &&  attribMatches !== undefined && this.#mounted.has(target)){
-                        let idx = 0;
-                        for(const attrMatch of attribMatches){
-                            const {names} = attrMatch;
-                            if(names.includes(attributeName)){
-                                const newValue = target.getAttribute(attributeName);
-                                // let parsedNewValue = undefined;
-                                // switch(type){
-                                //     case 'boolean':
-                                //         parsedNewValue = newValue === 'true' ? true : newValue === 'false' ? false : null;
-                                //         break;
-                                //     case 'date':
-                                //         parsedNewValue = newValue === null ? null : new Date(newValue);
-                                //         break;
-                                //     case ''
-
-                                // }
-                                const attrChangeInfo: AttrChangeInfo = {
-                                    name: attributeName,
-                                    oldValue,
-                                    newValue,
-                                    idx
-                                };
-                                this.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
-                            }
-                            idx++;
-                        }
-                    }
-                    elsToInspect.push(target as Element);
-                }
-                const deletedElements = Array.from(removedNodes).filter(x => x instanceof Element) as Array<Element>;
-                for(const deletedElement of deletedElements){
-                    // if(!this.#mounted.has(deletedElement)) continue;
-                    // this.#mounted.delete(deletedElement);
-                    // this.#mountedList = this.#mountedList?.filter(x => x.deref() !== deletedElement);
-                    this.#disconnected.add(deletedElement);
-                    if(doDisconnect !== undefined){
-                        doDisconnect(deletedElement, this);
-                    }
-                    this.dispatchEvent(new DisconnectEvent(deletedElement));
-                }
-
-            }
-            this.#filterAndMount(elsToInspect, true);
-        }, {signal: this.#abortController.signal});
-        await this.#inspectWithin(within);
-    }
-
-    #confirmInstanceOf(el: Element, whereInstanceOf: Array<typeof Node>){
-        for(const test of whereInstanceOf){
-            if(el instanceof test) return true;
-        }
-        return false;
-    }
-
-    async #mount(matching: Array<Element>){
-        //first unmount non matching
-        const alreadyMounted = this.#filterAndDismount();
-        const onMount = this.#mountInit.do?.onMount; 
-        const {import: imp, attribMatches} = this.#mountInit;
-        for(const match of matching){
-            if(alreadyMounted.has(match)) continue;
-            this.#mounted.add(match);
-            if(imp !== undefined){
-                switch(typeof imp){
-                    case 'string':
-                        this.module =  await import(imp);
-                        break;
-                    case 'object':
-                        if(Array.isArray(imp)){
-                            this.module = await import(imp[0], imp[1]);
-                        }
-                        break;
-                    case 'function':
-                        this.module = await imp(match, this, 'Import');
-                        break;
-                }
-            }
-            if(onMount !== undefined) onMount(match, this, 'PostImport');
-            this.dispatchEvent(new MountEvent(match));
-            if(attribMatches !== undefined){
-                let idx = 0;
-                for(const attribMatch of attribMatches){
-                    let newValue = null;
-                    const {names} = attribMatch;
-                    let nonNullName = names[0];
-                    for(const name of names){
-                        const attrVal = match.getAttribute(name);
-                        if(attrVal !== null) nonNullName = name;
-                        newValue = newValue || attrVal;
-                    }
-                    const attribInfo: AttrChangeInfo = {
-                        oldValue: null,
-                        newValue,
-                        idx,
-                        name: nonNullName
-                    };
-                    this.dispatchEvent(new AttrChangeEvent(match, attribInfo));
-                    idx++;
-                }
-            }
-            this.#mountedList?.push(new WeakRef(match));
-            //if(this.#unmounted.has(match)) this.#unmounted.delete(match);
-        }
-    }
-
-    async #dismount(unmatching: Array<Element>){
-        const onDismount = this.#mountInit.do?.onDismount
-        for(const unmatch of unmatching){
-            if(onDismount !== undefined){
-                onDismount(unmatch, this);
-            }
-            this.dispatchEvent(new DismountEvent(unmatch));
-        }
-    }
-
-    #filterAndDismount(): Set<Element>{
-        const returnSet = new Set<Element>();
-        if(this.#mountedList !== undefined){
-            const previouslyMounted = this.#mountedList.map(x => x.deref());
-            const {whereSatisfies, whereInstanceOf} = this.#mountInit;
-            const match = this.#selector;
-            const elsToUnMount = previouslyMounted.filter(x => {
-                if(x === undefined) return false;
-                if(!x.matches(match)) return true;
-                if(whereSatisfies !== undefined){
-                    if(!whereSatisfies(x, this, 'Inspecting')) return true;
-                }
-                returnSet.add(x);
-                return false;
-            }) as Array<Element>;
-            this.#dismount(elsToUnMount);
-        }
-        this.#mountedList = Array.from(returnSet).map(x => new WeakRef(x));
-        return returnSet;
-    }
-
-    async #filterAndMount(els: Array<Element>, checkMatch: boolean){
-        const {whereSatisfies, whereInstanceOf} = this.#mountInit;
-        const match = this.#selector;
-        const elsToMount = els.filter(x => {
-            if(checkMatch){
-                if(!x.matches(match)) return false;
-            }
-            if(whereSatisfies !== undefined){
-                if(!whereSatisfies(x, this, 'Inspecting')) return false;
-            }
-            if(whereInstanceOf !== undefined){
-                if(!this.#confirmInstanceOf(x, whereInstanceOf)) return false;
-            }
-            return true;
-        });
-        this.#mount(elsToMount);
-    }
-
-    async #inspectWithin(within: Node){
-        const els = Array.from((within as Element).querySelectorAll(this.#selector));
-        this.#filterAndMount(els, false);
-    }
-
-    unobserve(){
-        throw 'NI';
-    }
-
-}
-
-export interface MountObserver extends MountContext{}
-
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class MountEvent extends Event implements IMountEvent {
-    static eventName: mountEventName = 'mount';
-  
-    constructor(public mountedElement: Element) {
-      super(MountEvent.eventName);
-      
-    }
-}
-
-export class DismountEvent extends Event implements IDismountEvent{
-    static eventName: dismountEventName = 'dismount';
-
-    constructor(public dismountedElement: Element){
-        super(DismountEvent.eventName)
-    }
-}
-
-export class DisconnectEvent extends Event implements IDisconnectEvent{
-    static eventName: disconnectedEventName = 'disconnect';
-
-    constructor(public disconnectedElement: Element){
-        super(DisconnectEvent.eventName);
-    }
-}
-
-export class AttrChangeEvent extends Event implements IAttrChangeEvent{
-    static eventName: attrChangeEventName = 'attr-change';
-    constructor(public mountedElement: Element, public attrChangeInfo: AttrChangeInfo){
-        super(AttrChangeEvent.eventName);
-    }
-}
-

package/RootMutObs.ts

@@ -1,37 +0,0 @@
-import {mutationEventName, AddMutationEventListener} from './types';
-
-export class RootMutObs extends EventTarget{
-    constructor(rootNode: Node ){
-        super();
-        this.#mutationObserver = new MutationObserver(mutationRecords => {
-            this.dispatchEvent(new MutationEvent(mutationRecords))
-        })
-        this.#mutationObserver.observe(rootNode, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            attributeOldValue: true,
-        });
-    }
-    #mutationObserver: MutationObserver;
-}
-
-
-
-// https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
-
-/**
- * The `mutation-event` event represents something that happened.
- * We can document it here.
- */
-export class MutationEvent extends Event implements MutationEvent {
-    static eventName: mutationEventName = 'mutation-event';
-  
-    constructor(public mutationRecords: Array<MutationRecord>) {
-      // Since these are hard-coded, dispatchers can't get them wrong
-      super(MutationEvent.eventName);
-    }
-}
-
-
-

package/demo/test1.html

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id=div>
-        <span id=span></span>
-    </div>
-    <script type=module>
-        import {MountObserver} from '../MountObserver.js';
-        const mo = new MountObserver({
-            match: '#span',
-            do:{
-                onMount: (el, ctx) => {
-                    console.log({el, ctx});
-                }
-            }
-        });
-        mo.addEventListener('mount', e => {
-            console.log(e);
-        });
-        mo.observe(div);
-    </script>
-</body>
-</html>

package/playwright.config.ts

@@ -1,29 +0,0 @@
-// playwright.config.ts
-import { PlaywrightTestConfig, devices } from '@playwright/test';
-const config: PlaywrightTestConfig = {
-  webServer: {
-    command: 'npm run serve',
-    url: 'http://localhost:3030/',
-    timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI,
-  },
-  use: {
-    baseURL: 'http://localhost:3030/',
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    //firefox lacks support for import assertions
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-  ],
-};
-export default config;

package/tests/test1.html

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id=div>
-        <span id=span></span>
-    </div>
-    <div id=target></div>
-    <script type=module>
-        import {MountObserver} from '../MountObserver.js';
-        const mo = new MountObserver({
-            match: '#span',
-            do:{
-                onMount: (el, ctx) => {
-                    console.log({el, ctx});
-                    target.setAttribute('mark', 'good');
-                }
-            }
-        });
-        mo.addEventListener('mount', e => {
-            console.log(e);
-        });
-        mo.observe(div);
-    </script>
-</body>
-</html>

package/tests/test1.spec.mjs

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-test('test1', async ({ page }) => {
-    await page.goto('./tests/test1.html');
-    // wait for 1 second
-    await page.waitForTimeout(1000);
-    const editor = page.locator('#target');
-    await expect(editor).toHaveAttribute('mark', 'good');
-});

package/tests/test2.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id=div>
-    </div>
-    <div id=target></div>
-    <script type=module>
-        import {MountObserver} from '../MountObserver.js';
-        const mo = new MountObserver({
-            match: '#span',
-            do:{
-                onMount: (el, ctx) => {
-                    console.log({el, ctx});
-                    target.setAttribute('mark', 'good');
-                }
-            }
-        });
-        mo.addEventListener('mount', e => {
-            console.log(e);
-        });
-        mo.observe(div);
-        setTimeout(() => {
-            const span = document.createElement('span');
-            span.id = 'span';
-            div.appendChild(span);
-        }, 500);
-    </script>
-</body>
-</html>

package/tests/test2.spec.mjs

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-test('test1', async ({ page }) => {
-    await page.goto('./tests/test2.html');
-    // wait for 1 second
-    await page.waitForTimeout(1000);
-    const editor = page.locator('#target');
-    await expect(editor).toHaveAttribute('mark', 'good');
-});

package/tests/test3.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id=div>
-            <span></span>
-    </div>
-    <div id=target></div>
-    <script type=module>
-        import {MountObserver} from '../MountObserver.js';
-        const mo = new MountObserver({
-            match: '#span',
-            do:{
-                onMount: (el, ctx) => {
-                    console.log({el, ctx});
-                    target.setAttribute('mark', 'good');
-                }
-            }
-        });
-        mo.addEventListener('mount', e => {
-            console.log(e);
-        });
-        mo.observe(div);
-        setTimeout(() => {
-            const span = div.querySelector('span');
-            span.id = 'span';
-        }, 500);
-    </script>
-</body>
-</html>

package/tests/test3.spec.mjs

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-test('test1', async ({ page }) => {
-    await page.goto('./tests/test3.html');
-    // wait for 1 second
-    await page.waitForTimeout(1000);
-    const editor = page.locator('#target');
-    await expect(editor).toHaveAttribute('mark', 'good');
-});

package/tests/test4.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id=div>
-        <span id=span></span>
-    </div>
-    <div id=target></div>
-    <script type=module>
-        import {MountObserver} from '../MountObserver.js';
-        const mo = new MountObserver({
-            match: '#span',
-            do:{
-                onMount: (el, ctx) => {
-                    console.log({el, ctx});
-                    
-                }
-            }
-        });
-        mo.addEventListener('mount', e => {
-            console.log(e);
-            target.setAttribute('mark', 'good');
-        });
-        mo.observe(div);
-    </script>
-</body>
-</html>

package/tests/test4.spec.mjs

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-test('test1', async ({ page }) => {
-    await page.goto('./tests/test4.html');
-    // wait for 1 second
-    await page.waitForTimeout(1000);
-    const editor = page.locator('#target');
-    await expect(editor).toHaveAttribute('mark', 'good');
-});

package/tests/test5.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id=div>
-        <span id=span></span>
-    </div>
-    <div id=target></div>
-    <script type=module>
-        import {MountObserver} from '../MountObserver.js';
-        const mo = new MountObserver({
-            match: '#span',
-            do:{
-                onDisconnect: (el, ctx) => {
-                    console.log({el, ctx});
-                    
-                }
-            }
-        });
-        mo.addEventListener('disconnect', e => {
-            console.log(e);
-            target.setAttribute('mark', 'good');
-        });
-        mo.observe(div);
-        setTimeout(() => {
-            span.remove();
-        }, 1000);
-    </script>
-</body>
-</html>

package/tests/test5.spec.mjs

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-test('test1', async ({ page }) => {
-    await page.goto('./tests/test5.html');
-    // wait for 1 second
-    await page.waitForTimeout(1000);
-    const editor = page.locator('#target');
-    await expect(editor).toHaveAttribute('mark', 'good');
-});

package/tests/test6.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <div id=div>
-        <span id=span></span>
-    </div>
-    <div id=target></div>
-    <script type=module>
-        import {MountObserver} from '../MountObserver.js';
-        const mo = new MountObserver({
-            match: '#span',
-            attribMatches:[
-                {
-                    names: ['test-1']
-                }
-            ]
-        });
-        mo.addEventListener('attr-change', e => {
-            console.log(e);
-            target.setAttribute('mark', 'good');
-        });
-        mo.observe(div);
-        setTimeout(() => {
-            span.setAttribute('test-1', 'hello')
-        }, 1000);
-    </script>
-</body>
-</html>

package/tests/test6.spec.mjs

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-test('test1', async ({ page }) => {
-    await page.goto('./tests/test6.html');
-    // wait for 1 second
-    await page.waitForTimeout(1000);
-    const editor = page.locator('#target');
-    await expect(editor).toHaveAttribute('mark', 'good');
-});

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ESNext",
-		"module": "ESNext",
-		"sourceMap": false,
-		"experimentalDecorators": false,
-		"newLine": "LF",
-		"strict": true,
-	},
-	"files": [
-		"MountObserver.ts",
-	],
-	"exclude":[
-		"node_modules"
-	]
-
-}