mount-observer 0.0.40 → 0.0.42

package/MountObserver.js

@@ -1,8 +1,10 @@
 import { RootMutObs } from './RootMutObs.js';
+export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 const mutationObserverLookup = new WeakMap();
 const refCount = new WeakMap();
 export class MountObserver extends EventTarget {
     #mountInit;
+    #options;
     //#rootMutObs: RootMutObs | undefined;
     #abortController;
     mountedElements;
@@ -21,7 +23,7 @@ export class MountObserver extends EventTarget {
             isComplex = reducedMatch.includes(' ') || (reducedMatch.includes(':') && reducedMatch.includes('('));
         }
         this.#isComplex = isComplex;
-        if (whereElementIntersectsWith || whereMediaMatches)
+        if (whereElementIntersectsWith)
             throw 'NI'; //not implemented
         this.#mountInit = init;
         this.#abortController = new AbortController();
@@ -111,7 +113,35 @@ export class MountObserver extends EventTarget {
         }
         this.dispatchEvent(new Event('disconnectedCallback'));
     }
-    async observe(within) {
+    async observe(within, options) {
+        this.#options = options;
+        const init = this.#mountInit;
+        const { whereMediaMatches } = init;
+        if (whereMediaMatches === undefined) {
+            await this.#observe2(within);
+            return;
+        }
+        const mql = window.matchMedia(whereMediaMatches);
+        if (mql.matches) {
+            await this.#observe2(within);
+        }
+        mql.addEventListener('change', async (e) => {
+            if (e.matches) {
+                if (this.objNde === undefined) {
+                    await this.#observe2(within);
+                }
+                else {
+                    await this.#mountAll();
+                }
+            }
+            else {
+                if (this.objNde !== undefined) {
+                    await this.#dismountAll();
+                }
+            }
+        });
+    }
+    async #observe2(within) {
         await this.#selector();
         this.objNde = new WeakRef(within);
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within;
@@ -222,6 +252,7 @@ export class MountObserver extends EventTarget {
         const mount = this.#mountInit.do?.mount;
         const { import: imp } = this.#mountInit;
         const me = this.mountedElements;
+        const options = this.#options;
         for (const match of matching) {
             if (alreadyMounted.has(match))
                 continue;
@@ -253,6 +284,12 @@ export class MountObserver extends EventTarget {
                     initializing
                 });
             }
+            if (options?.LeaveBreadcrumb) {
+                if (match[guid] === undefined) {
+                    match[guid] = new Set();
+                }
+                match[guid].add(this);
+            }
             this.dispatchEvent(new MountEvent(match, initializing));
             //should we automatically call readAttrs?
             //the thinking is it might make more sense to call that after mounting
@@ -319,6 +356,19 @@ export class MountObserver extends EventTarget {
             this.dispatchEvent(new DismountEvent(unmatch));
         }
     }
+    async #dismountAll() {
+        const mounted = this.#mountedList;
+        if (mounted === undefined)
+            return;
+        this.#dismount(mounted.map(x => x.deref()).filter(x => x !== undefined));
+    }
+    async #mountAll() {
+        //TODO:  copilot created, check if needed
+        const { whereSatisfies, whereInstanceOf } = this.#mountInit;
+        const match = await this.#selector();
+        const els = Array.from(document.querySelectorAll(match));
+        this.#filterAndMount(els, false, true);
+    }
     async #filterAndDismount() {
         const returnSet = new Set();
         if (this.#mountedList !== undefined) {

package/MountObserver.ts

@@ -2,16 +2,19 @@ import {MountInit, IMountObserver, AddMutationEventListener,
     MutationEvent, dismountEventName, mountEventName, IMountEvent, IDismountEvent,
     disconnectedEventName, IDisconnectEvent, IAttrChangeEvent, attrChangeEventName, AttrChangeInfo, loadEventName, ILoadEvent,
     AttrParts,
-    MOSE, WeakDual
+    MOSE, WeakDual,
+    MountObserverOptions
 } from './ts-refs/mount-observer/types';
 import {RootMutObs} from './RootMutObs.js';
 export {MOSE} from './ts-refs/mount-observer/types';
+export const guid = '5Pv6bHOVH0ae07opRZ8N/g';
 
 const mutationObserverLookup = new WeakMap<Node, RootMutObs>();
 const refCount = new WeakMap<Node, number>();
 export class MountObserver extends EventTarget implements IMountObserver{
     
     #mountInit: MountInit;
+    #options: MountObserverOptions | undefined;
     //#rootMutObs: RootMutObs | undefined;
     #abortController: AbortController;
     mountedElements: WeakDual<Element>;
@@ -31,7 +34,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
             isComplex = reducedMatch.includes(' ') || (reducedMatch.includes(':') && reducedMatch.includes('('));
         }
         this.#isComplex = isComplex;
-        if(whereElementIntersectsWith || whereMediaMatches) throw 'NI'; //not implemented
+        if(whereElementIntersectsWith) throw 'NI'; //not implemented
         this.#mountInit = init;
         this.#abortController = new AbortController();
         this.mountedElements = {
@@ -120,7 +123,34 @@ export class MountObserver extends EventTarget implements IMountObserver{
                 
     }
 
-    async observe(within: Node){
+    async observe(within: Node, options?: MountObserverOptions){
+        this.#options = options;
+        const init = this.#mountInit;
+        const {whereMediaMatches} = init;
+        if(whereMediaMatches === undefined){
+            await this.#observe2(within);
+            return;
+        }
+        const mql = window.matchMedia(whereMediaMatches);
+        if(mql.matches){
+            await this.#observe2(within);  
+        }
+        mql.addEventListener('change', async (e) => {
+            if(e.matches){
+                if(this.objNde === undefined){
+                    await this.#observe2(within);
+                }else{
+                    await this.#mountAll();
+                }
+            }else{
+                if(this.objNde !== undefined){
+                    await this.#dismountAll();
+                }
+            }
+        });
+    }
+
+    async #observe2(within: Node){
         await this.#selector();
         this.objNde = new WeakRef(within);
         const nodeToMonitor = this.#isComplex ? (within instanceof ShadowRoot ? within : within.getRootNode()) : within; 
@@ -204,7 +234,6 @@ export class MountObserver extends EventTarget implements IMountObserver{
         }, {signal: this.#abortController.signal});
         
         await this.#inspectWithin(within, true);
-        
     }
 
     static synthesize(within: Document | ShadowRoot, customElement: {new(): HTMLElement}, mose: MOSE){
@@ -236,6 +265,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
         const mount = this.#mountInit.do?.mount; 
         const {import: imp} = this.#mountInit;
         const me = this.mountedElements;
+        const options = this.#options;
         for(const match of matching){
             if(alreadyMounted.has(match)) continue;
             if(!me.weakSet.has(match)){
@@ -266,6 +296,12 @@ export class MountObserver extends EventTarget implements IMountObserver{
                     initializing
                 }) 
             }
+            if(options?.LeaveBreadcrumb){
+                if((<any>match)[guid] === undefined){
+                    (<any>match)[guid] = new Set();
+                }
+                (<any>match)[guid].add(this);
+            }
             this.dispatchEvent(new MountEvent(match, initializing));
             //should we automatically call readAttrs?
             //the thinking is it might make more sense to call that after mounting
@@ -338,6 +374,20 @@ export class MountObserver extends EventTarget implements IMountObserver{
         }
     }
 
+    async #dismountAll(){
+        const mounted = this.#mountedList;
+        if(mounted === undefined) return;
+        this.#dismount(mounted.map(x => x.deref()).filter(x => x !== undefined) as Array<Element>);
+    }
+
+    async #mountAll(){
+        //TODO:  copilot created, check if needed
+        const {whereSatisfies, whereInstanceOf} = this.#mountInit;
+        const match = await this.#selector();
+        const els = Array.from(document.querySelectorAll(match));
+        this.#filterAndMount(els, false, true);
+    }
+
     async #filterAndDismount(): Promise<Set<Element>>{
         const returnSet = new Set<Element>();
         if(this.#mountedList !== undefined){

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "devDependencies": {
-    "@playwright/test": "1.49.1",
+    "@playwright/test": "1.50.0",
     "ssi-server": "0.0.1"
   },
   "exports": {

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

@@ -26,6 +26,7 @@ export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
      */
     beOosoom?: string;
     js?: string;
+    transitional: boolean;
 }
 
 export interface AllProps extends EndUserProps{
@@ -69,9 +70,15 @@ export interface TwoValueSwitch{
     withinSpecifier?: Specifier,
     req?: boolean,
     op?: Op,
-    negate?: boolean,
+    //negate?: boolean,
     lhs?: ISide,
     rhs?: ISide,
+    onOrOff: 
+        | 'on' 
+        | 'On' 
+        | 'off' 
+        | 'Off',
+
 }
 
 export interface Dependency extends Specifier{}
@@ -128,12 +135,12 @@ export interface Elevate {
 
 export interface EventForNValueSwitch {
     ctx: NValueScriptSwitch,
-    factors: {[key: string] : SignalRefType},
+    factors: {[key: string] : any},
     switchOn?: boolean,
     elevate?: Elevate
 }
 
-export interface SignalAndEvent {
-    signal?: WeakRef<SignalRefType>,
-    eventSuggestion?: string
-}
+// export interface SignalAndEvent {
+//     signal?: WeakRef<SignalRefType>,
+//     eventSuggestion?: string
+// }

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

@@ -32,6 +32,10 @@ export interface MountInit extends JSONSerializableMountInit{
     // readonly ignoreInitialMatches?: boolean,
 }
 
+export interface MountObserverOptions{
+    LeaveBreadcrumb?: boolean,
+}
+
 export interface MountObserverCallbacks{
     readonly mount?: PipelineProcessor,
     readonly dismount?: PipelineProcessor,
@@ -131,7 +135,7 @@ interface AttrChangeInfo{
 
 //#region mount event
 export type mountEventName = 'mount';
-export interface IMountEvent{
+export interface IMountEvent extends Event{
     mountedElement: Element,
 }
 export type mountEventHandler = (e: IMountEvent) => void;

package/ts-refs/mt-si/types.d.ts

@@ -0,0 +1,21 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+export interface EndUserProps extends IEnhancement{
+    doEval: boolean;
+}
+
+export interface AllProps extends EndUserProps{
+    //enhKey: 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;
+}

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

@@ -356,8 +356,7 @@ export type roundaboutOptions<TProps = any, TActions = TProps, ETProps = TProps>
     //onsets?: Onsets<TProps, TActions>,
     handlers?: Handlers<ETProps, TActions>,
     hitch?: Hitches<TProps, TActions>,
-    positractions?: Positractions<TProps>
-    //do?:  Partial<{[key in `${keyof TActions & string}_on`]: Keysh<TProps> }>
+    positractions?: Positractions<TProps>,
 }
 
 export type PropsToPartialProps<TProps = any> = 

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

@@ -60,6 +60,7 @@ export interface TransformOptions{
     propagator?: MarkedUpEventTarget,
     propagatorIsReady?: boolean,
     skipInit?: boolean,
+    useViewTransition?: boolean,
 }
 
 export type Derivative<TProps, TMethods, TElement = {}> = 
@@ -467,11 +468,19 @@ export interface MntCfg<TProps = any, TActions = TProps, ETProps = TProps> exten
      */
     lcXform?: XForm<TProps, TActions>,
 
+
+    /**
+     * transforms within ShadowRoot if applicable that uses view transitions 
+     */
+    xxform?: XForm<TProps, TActions>
+
     styles?: /*CSSStyleSheet[] |*/ string | string[] | CSSStyleSheet | Array<CSSStyleSheet>;
 
     shadowRootInit?: ShadowRootInit,
 
-    assumeCSR?: boolean
+    assumeCSR?: boolean,
+
+
 }
 
 export interface MountProps<TProps = any, TActions = TProps, ETProps = TProps>{
@@ -480,7 +489,7 @@ export interface MountProps<TProps = any, TActions = TProps, ETProps = TProps>{
     readonly hydrated?: boolean;
     readonly csr?: boolean;
     readonly xform?: XForm<TProps, TActions>,
-    
+    readonly xxform?: XForm<TProps, TActions>,
 }
 export type PMP<TProps = any, TActions = TProps, ETProps = TProps> = Partial<MountProps<TProps, TActions, ETProps>>;
 export type ProPMP<TProps = any, TActions = TProps, ETProps = TProps> = Promise<PMP<TProps, TActions, ETProps>>