mount-observer 0.0.3 → 0.0.4

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':

package/README.md

@@ -1,3 +1,8 @@
+[![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
@@ -179,7 +184,7 @@ If an element that is in "mounted" state according to a MountObserver instance i
 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. 
 
-## Special support for attributes
+## Special support for observable attributes
 
 Extra support is provided for monitoring attributes.
 

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "mount-observer",
-  "version": "0.0.3",
-  "description": "",
+  "version": "0.0.4",
+  "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/.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"
-	]
-
-}