mount-observer 0.0.40 → 0.0.41

package/MountObserver.js

@@ -21,7 +21,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();
@@ -112,6 +112,33 @@ export class MountObserver extends EventTarget {
         this.dispatchEvent(new Event('disconnectedCallback'));
     }
     async observe(within) {
+        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;
@@ -319,6 +346,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

@@ -31,7 +31,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 = {
@@ -121,6 +121,32 @@ export class MountObserver extends EventTarget implements IMountObserver{
     }
 
     async observe(within: Node){
+        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 +230,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){
@@ -338,6 +363,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,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",

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/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>>