mount-observer 0.0.75 → 0.0.77

package/MountObserver.js

@@ -434,6 +434,7 @@ export class MountObserver extends EventTarget {
                     return false;
                 if (!x.matches(match))
                     return true;
+                //TODO:  add check for outside
                 if (whereSatisfies !== undefined) {
                     if (!whereSatisfies(x, this, { stage: 'Inspecting', initializing: false }))
                         return true;
@@ -446,13 +447,26 @@ export class MountObserver extends EventTarget {
         this.#mountedList = Array.from(returnSet).map(x => new WeakRef(x));
         return returnSet;
     }
+    #outsideCheck(oElement, matchCandidate, outside) {
+        const elementsToExclude = Array.from(oElement.querySelectorAll(outside));
+        for (const elementToExclude of elementsToExclude) {
+            if (elementToExclude === matchCandidate || elementToExclude.contains(matchCandidate))
+                return false;
+        }
+        return true;
+    }
     async #filterAndMount(els, target, checkMatch, initializing) {
-        const { whereSatisfies, whereInstanceOf, assigner } = this.#mountInit;
+        const { whereSatisfies, whereInstanceOf, assigner, outside } = this.#mountInit;
         const match = await this.#selector();
         const elsToMount = els.filter(x => {
             if (checkMatch) {
                 if (!x.matches(match))
                     return false;
+                //TODO:  check for outside
+            }
+            if (outside !== undefined) {
+                if (!this.#outsideCheck(target, x, outside))
+                    return false;
             }
             if (whereSatisfies !== undefined) {
                 if (!whereSatisfies(x, this, { stage: 'Inspecting', initializing }))

package/MountObserver.ts

@@ -466,6 +466,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
             const elsToUnMount = previouslyMounted.filter(x => {
                 if(x === undefined) return false;
                 if(!x.matches(match)) return true;
+                //TODO:  add check for outside
                 if(whereSatisfies !== undefined){
                     if(!whereSatisfies(x, this, {stage: 'Inspecting', initializing: false})) return true;
                 }
@@ -478,12 +479,25 @@ export class MountObserver extends EventTarget implements IMountObserver{
         return returnSet;
     }
 
+    #outsideCheck(oElement: Element, matchCandidate: Element, outside: string){
+        const elementsToExclude = Array.from(oElement.querySelectorAll(outside));
+        for(const elementToExclude of elementsToExclude){
+            if(elementToExclude === matchCandidate || elementToExclude.contains(matchCandidate)) return false;
+        }
+        return true;
+    }
+
     async #filterAndMount(els: Array<Element>, target: Node, checkMatch: boolean, initializing: boolean){
-        const {whereSatisfies, whereInstanceOf, assigner} = this.#mountInit;
+        const {whereSatisfies, whereInstanceOf, assigner, outside} = this.#mountInit;
         const match = await this.#selector();
         const elsToMount = els.filter(x => {
             if(checkMatch){
                 if(!x.matches(match)) return false;
+
+                //TODO:  check for outside
+            }
+            if(outside !== undefined){
+                if(!this.#outsideCheck(target as Element, x, outside)) return false;
             }
             if(whereSatisfies !== undefined){
                 if(!whereSatisfies(x, this, {stage: 'Inspecting', initializing})) return false;

package/README.md

@@ -48,6 +48,8 @@ There is quite a bit of functionality this proposal would open up, that is excee
 
 3.  Knowing when an element, previously being monitored for, passes totally "out-of-scope", so that no more hard references to the element remain.  This would allow for cleanup of no longer needed weak references without requiring polling.
 
+4.  Some css selectors, such as the [scope donut hole range](https://css-tricks.com/solved-by-css-donuts-scopes/#aa-donut-scoping-with-scope) aren't supported by oEl.querySelectorAll(...) or oEl.matches(...).
+
 ###  Most significant use cases.
 
 The amount of code necessary to accomplish these common tasks designed to improve the user experience is significant.  Building it into the platform would potentially:
@@ -439,6 +441,48 @@ So I believe the prudent thing to do is wait for all the conditions to be satisf
 
 The alternative to providing this feature, which I'm leaning towards, is to just ask the developer to create "specialized" mountObserver construction arguments, that turn on and off precisely when the developer needs to know.
 
+
+## Support for "donut hole scoping"
+
+While browsers are getting support for css based donut hole scoping, such support appears to be elusive for oElement.querySelectorAll(...) and oElement.matches(...).  In fact it is unclear how oElement.matches(...) would ever support it.  Such support would be quite useful. for microdata-based binding.
+
+Ideally, should this proposal be built into the browser, it would as a matter of course support donut hole scoping.
+
+For the polyfill, we need to support it as follows:
+
+```html
+<div id=myTest itemscope>
+   <span itemprop=name>
+</div>
+```
+
+```JavaScript
+const oElement = document.getElementById('myTest');
+const observer = new MountObserver({
+   on:'[itemprop]',
+   outside: '[itemscope]'
+   do: {
+      mount: ({localName}, {modules, observer}) => {
+        ...
+      },
+   },
+   disconnectedSignal: new AbortController().signal
+});
+observer.observe(oElement);
+```
+
+The check for "outside" is done via script:
+
+```JavaScript
+outsideCheck(oElement: Element, matchCandidate: Element, outside: string){
+   const elementsToExclude = Array.from(oElement.querySelectorAll(outside));
+   for(const elementToExclude of elementsToExclude){
+      if(elementToExclude === matchCandidate || elementToExclude.contains(matchCandidate)) return false;
+   }
+   return true;
+}
+```
+
 ## A tribute to attributes
 
 Attributes of DOM elements are tricky.  They've been around since the get-go of the Web, and they've survived multiple eras of web development, where different philosophies have prevailed, so prepare yourself for some esoteric discussions in what follows.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "devDependencies": {
-    "@playwright/test": "1.53.2",
+    "@playwright/test": "1.54.1",
     "ssi-server": "0.0.1"
   },
   "exports": {
@@ -65,6 +65,10 @@
       "default": "./slotkin/beKindred.js",
       "types": "./slotkin/beKindred.ts"
     },
+    "./slotkin/getBreadth.js": {
+      "default": "./slotkin/getBreadth.js",
+      "types": "./slotkin/getBreadth.ts"
+    },
     "./slotkin/getFrag.js": {
       "default": "./slotkin/getFrag.js",
       "types": "./slotkin/getFrag.ts"

package/slotkin/getBreadth.js

@@ -0,0 +1,19 @@
+export function getBreadth(innerEl, base) {
+    const priors = [];
+    let ps = innerEl.previousSibling;
+    while (ps !== null && !(ps.nodeType === Node.COMMENT_NODE && ps.data.includes(` ${base} `))) {
+        priors.push(ps);
+        ps = ps.previousSibling;
+    }
+    if (ps !== null)
+        priors.push(ps);
+    const nexts = [];
+    let ns = innerEl.nextSibling;
+    while (ns !== null && !(ns.nodeType === Node.COMMENT_NODE && ns.data.includes(` /${base} `))) {
+        nexts.push(ns);
+        ns = ns.nextSibling;
+    }
+    if (ns !== null)
+        nexts.push(ns);
+    return [...priors.reverse(), ...nexts];
+}

package/slotkin/getBreadth.ts

@@ -0,0 +1,21 @@
+export function getBreadth(
+    innerEl: Element, 
+    base: string,
+){
+    const priors: Array<Node> = [];
+    let ps = innerEl.previousSibling as Comment | null;
+    while(ps !== null && !(ps.nodeType === Node.COMMENT_NODE && (ps as Comment).data.includes( ` ${base} `))){
+        priors.push(ps);
+        ps = ps.previousSibling as Comment | null;
+    }
+    if(ps !== null) priors.push(ps);
+    const nexts: Array<Node> = [];
+    let ns = innerEl.nextSibling as Comment | null; 
+    while(ns !== null && !(ns.nodeType === Node.COMMENT_NODE && (ns as Comment).data.includes( ` /${base} `))){
+        nexts.push(ns);
+        ns = ns.nextSibling as Comment | null;
+    }
+    if(ns !== null) nexts.push(ns);
+    return [...priors.reverse(), ...nexts];
+        
+}

package/slotkin/getFrag.js

@@ -1,10 +1,17 @@
 export function getFrag(templ, base) {
     let openComment = templ.nextSibling;
-    if (openComment === null || openComment.nodeType !== Node.COMMENT_NODE || openComment.data.includes(` ${base} `))
+    if (openComment === null || openComment.nodeType !== Node.COMMENT_NODE)
         return null;
+    if (base !== undefined && !openComment.data.includes(` ${base} `))
+        return null;
+    if (base === undefined) {
+        base = openComment.data.trim().split(' ')[1];
+        if (base === undefined)
+            return null;
+    }
     const returnArr = [openComment];
     let ns = openComment.nextSibling;
-    while (ns !== null && !(ns.nodeType === Node.COMMENT_NODE && !ns.data.includes(` /${base} `))) {
+    while (ns !== null && !(ns.nodeType === Node.COMMENT_NODE && ns.data.includes(` /${base} `))) {
         returnArr.push(ns);
         ns = ns.nextSibling;
     }

package/slotkin/getFrag.ts

@@ -1,12 +1,17 @@
 export function getFrag(
     templ: HTMLTemplateElement, 
-    base: string,
+    base?: string,
 ){
     let openComment = templ.nextSibling as Comment | null;
-    if(openComment === null || openComment.nodeType !== Node.COMMENT_NODE || openComment.data.includes(` ${base} `)) return null;
+    if(openComment === null || openComment.nodeType !== Node.COMMENT_NODE) return null;
+    if(base !== undefined && !openComment.data.includes(` ${base} `)) return null;
+    if(base === undefined){
+        base = openComment.data.trim().split(' ')[1];
+        if(base === undefined) return null;
+    }
     const returnArr: Array<Node> = [openComment];
     let ns = openComment.nextSibling;
-    while(ns !== null && !(ns.nodeType === Node.COMMENT_NODE && !(ns as Comment).data.includes( ` /${base} `))){
+    while(ns !== null && !(ns.nodeType === Node.COMMENT_NODE && (ns as Comment).data.includes( ` /${base} `))){
         returnArr.push(ns);
         ns = ns.nextSibling;
     }

package/slotkin/wrap.js

@@ -4,9 +4,9 @@ export function wrap(templ, base, force = false) {
     if (!wasWrapped) {
         templ[wrapped] = base;
         if (force || templ.content.childElementCount > 1) {
-            const start = document.createComment(base);
+            const start = document.createComment(` ${base} `);
             templ.content.prepend(start);
-            const end = document.createComment(`/${base}`);
+            const end = document.createComment(` /${base} `);
             templ.content.appendChild(end);
         }
     }

package/slotkin/wrap.ts

@@ -9,9 +9,9 @@ export function wrap(
     if (!wasWrapped) {
         (<any>templ)[wrapped] = base;
         if (force || templ.content.childElementCount > 1) {
-            const start = document.createComment(base);
+            const start = document.createComment(` ${base} `);
             templ.content.prepend(start);
-            const end = document.createComment(`/${base}`);
+            const end = document.createComment(` /${base} `);
             templ.content.appendChild(end);
         }
     }

package/ts-refs/be-directive/types.d.ts

@@ -0,0 +1,43 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+/**
+ * 
+ */
+export interface DirectoryPickerOptions {
+    /**
+     * By specifying an ID, the browser can remember different directories for different IDs. If the same ID is used for another picker, the picker opens in the same directory.
+     */
+    id?: string;
+
+    /**
+     * A string that defaults to "read" for read-only access or "readwrite" for read and write access to the directory.
+     */
+    mode?: 'read' | 'readwrite';
+
+    /**
+     * A FileSystemHandle or a well known directory ("desktop", "documents", "downloads", "music", "pictures", or "videos") to open the dialog in.
+     * 
+     */
+    startIn?: 'documents' | 'downloads' | 'music' | 'pictures' | 'videos' | 'home' | 'desktop' | File;
+}
+export interface EndUserProps extends IEnhancement{
+    options: DirectoryPickerOptions;
+    noNudge: boolean;
+}
+
+export interface AllProps extends EndUserProps{
+    directoryHandle?: FileSystemDirectoryHandle;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    hydrate(self: BAP): ProPAP;
+}
+

package/ts-refs/be-switched/types.d.ts

@@ -20,6 +20,7 @@ export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
     hiddenStyle?: string;
     toggleInert?: boolean;
     deferRendering?: boolean;
+    /** delete content when condition evaluates to false */
     minMem?: boolean;
     /**
      * Works with beOosoom decorator, so becomes inert when out of view
@@ -27,6 +28,10 @@ export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
     beOosoom?: string;
     js?: string;
     transitional: boolean;
+    /**
+     * Use comments rather a DOM element to wrap multiple elements
+     */
+    cmtWrap?: boolean;
 }
 
 export interface AllProps extends EndUserProps{

package/ts-refs/mount-observer/types.d.ts

@@ -1,6 +1,7 @@
 
 export interface JSONSerializableMountInit{
     readonly on?: CSSMatch,
+    readonly outside?: CSSMatch,
     readonly observedAttrsWhenMounted?: (string | ObservedSourceOfTruthAttribute)[],
     readonly whereAttr?: WhereAttr,  
     readonly whereElementIntersectsWith?: IntersectionObserverInit,

package/ts-refs/trans-render/dss/types.d.ts

@@ -29,6 +29,10 @@ export type DirectionalScopeSigils =
      * itemscoped host
      */
     |'$'
+    /**
+     * comment scope
+     */
+    |'/**/'
     ;
 
 export type AttrSigils =
@@ -129,12 +133,21 @@ export interface Specifier {
      */
     modulo?: Modulo;
 
+    /**
+     * is a scope query within comments
+     */
+    cmtWrap?: boolean;
+
     /**
      * itemscope hierarchy domain specifier
      */
     is$cope?: boolean;
 
-    $copeDetail?: $copeDetail
+    $copeDetail?: $copeDetail;
+
+    constVal?: any;
+
+    enhBase?: string;
 }
 
 export type Modulo = 'aria-rowindex' | 'aria-colindex' | 'aria-rowindextext'

package/ts-refs/trans-render/types.d.ts

@@ -405,7 +405,8 @@ export interface AttrMap{
 export interface QueryInfo{
     isRootQry?: boolean,
     localPropCamelCase?: string,
-    cssQuery?: string,
+    cssQuery?: CSSQuery,
+    outside?: CSSQuery,
     o?: string[],
     s?: string[],
     localName?: string,

package/ts-refs/when-resolved/types.d.ts

@@ -0,0 +1,29 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import { Specifier } from "../trans-render/dss/types";
+
+export interface EndUserProps extends IEnhancement{
+}
+
+export interface AllProps extends EndUserProps{
+    parsedStatements: Array<ResolvingParameters>,
+    rawStatements?: Array<string>
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    hydrate(self: BAP): ProPAP;
+}
+
+export interface ResolvingParameters{
+    remoteSpecifierString: string;
+    remoteSpecifier: Specifier;
+    localSpecifierString: string;
+    localSpecifier: Specifier;
+}