mount-observer 0.1.23 → 0.1.25

package/Synthesizer.js

@@ -101,6 +101,44 @@ export class Synthesizer extends HTMLElement {
             }
         }
     }
+    /**
+     * Check if a script element should be processed based on include/exclude attributes.
+     *
+     * Rules:
+     * - If passthrough attribute exists, return false (don't process any scripts)
+     * - If include or exclude attributes exist and script has no id, return false (security)
+     * - If include attribute exists, only process scripts with IDs in the include list
+     * - If exclude attribute exists, don't process scripts with IDs in the exclude list
+     * - Otherwise, return true (process the script)
+     *
+     * Made protected so subscribers can check if syndicator would allow a script.
+     */
+    checkIfAllowed(scriptElement) {
+        // Passthrough mode - don't process any scripts
+        if (this.hasAttribute('passthrough')) {
+            return false;
+        }
+        const scriptId = scriptElement.getAttribute('id');
+        // Security: If include or exclude attributes exist, script must have an ID
+        if ((this.hasAttribute('include') || this.hasAttribute('exclude')) && !scriptId) {
+            return false;
+        }
+        // Include list - only process scripts with IDs in the list
+        if (this.hasAttribute('include')) {
+            const includeList = this.getAttribute('include').split(' ').filter(s => s.trim());
+            if (!includeList.includes(scriptId)) {
+                return false;
+            }
+        }
+        // Exclude list - don't process scripts with IDs in the list
+        if (this.hasAttribute('exclude')) {
+            const excludeList = this.getAttribute('exclude').split(' ').filter(s => s.trim());
+            if (excludeList.includes(scriptId)) {
+                return false;
+            }
+        }
+        return true;
+    }
     /**
      * Initialize as syndicator (in document root).
      * Watches for script elements and broadcasts them to subscribers.
@@ -109,7 +147,9 @@ export class Synthesizer extends HTMLElement {
         // Process existing script elements
         const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
         scripts.forEach(script => {
-            this.#broadcastScript(script);
+            if (this.checkIfAllowed(script)) {
+                this.#broadcastScript(script);
+            }
         });
         // Watch for new script elements
         this.#mutationObserver = new MutationObserver((mutations) => {
@@ -118,7 +158,9 @@ export class Synthesizer extends HTMLElement {
                     if (node instanceof HTMLScriptElement) {
                         const type = node.getAttribute('type');
                         if (type === 'mountobserver' || type === 'emc') {
-                            this.#broadcastScript(node);
+                            if (this.checkIfAllowed(node)) {
+                                this.#broadcastScript(node);
+                            }
                         }
                     }
                 }
@@ -147,9 +189,12 @@ export class Synthesizer extends HTMLElement {
             return;
         }
         // Process existing scripts from syndicator
+        // Only process scripts that pass the syndicator's filtering
         const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
         scripts.forEach(script => {
-            this.#processScript(script);
+            if (syndicator.checkIfAllowed(script)) {
+                this.#processScript(script);
+            }
         });
         // Subscribe to new scripts
         syndicator.addEventListener(AddedScriptElementEvent.eventName, (e) => {

package/Synthesizer.ts

@@ -114,6 +114,50 @@ export abstract class Synthesizer extends HTMLElement {
         }
     }
 
+    /**
+     * Check if a script element should be processed based on include/exclude attributes.
+     * 
+     * Rules:
+     * - If passthrough attribute exists, return false (don't process any scripts)
+     * - If include or exclude attributes exist and script has no id, return false (security)
+     * - If include attribute exists, only process scripts with IDs in the include list
+     * - If exclude attribute exists, don't process scripts with IDs in the exclude list
+     * - Otherwise, return true (process the script)
+     * 
+     * Made protected so subscribers can check if syndicator would allow a script.
+     */
+    protected checkIfAllowed(scriptElement: HTMLScriptElement): boolean {
+        // Passthrough mode - don't process any scripts
+        if (this.hasAttribute('passthrough')) {
+            return false;
+        }
+        
+        const scriptId = scriptElement.getAttribute('id');
+        
+        // Security: If include or exclude attributes exist, script must have an ID
+        if ((this.hasAttribute('include') || this.hasAttribute('exclude')) && !scriptId) {
+            return false;
+        }
+        
+        // Include list - only process scripts with IDs in the list
+        if (this.hasAttribute('include')) {
+            const includeList = this.getAttribute('include')!.split(' ').filter(s => s.trim());
+            if (!includeList.includes(scriptId!)) {
+                return false;
+            }
+        }
+        
+        // Exclude list - don't process scripts with IDs in the list
+        if (this.hasAttribute('exclude')) {
+            const excludeList = this.getAttribute('exclude')!.split(' ').filter(s => s.trim());
+            if (excludeList.includes(scriptId!)) {
+                return false;
+            }
+        }
+        
+        return true;
+    }
+
     /**
      * Initialize as syndicator (in document root).
      * Watches for script elements and broadcasts them to subscribers.
@@ -122,7 +166,9 @@ export abstract class Synthesizer extends HTMLElement {
         // Process existing script elements
         const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
         scripts.forEach(script => {
-            this.#broadcastScript(script as HTMLScriptElement);
+            if (this.checkIfAllowed(script as HTMLScriptElement)) {
+                this.#broadcastScript(script as HTMLScriptElement);
+            }
         });
         
         // Watch for new script elements
@@ -132,7 +178,9 @@ export abstract class Synthesizer extends HTMLElement {
                     if (node instanceof HTMLScriptElement) {
                         const type = node.getAttribute('type');
                         if (type === 'mountobserver' || type === 'emc') {
-                            this.#broadcastScript(node);
+                            if (this.checkIfAllowed(node)) {
+                                this.#broadcastScript(node);
+                            }
                         }
                     }
                 }
@@ -166,9 +214,12 @@ export abstract class Synthesizer extends HTMLElement {
         }
         
         // Process existing scripts from syndicator
+        // Only process scripts that pass the syndicator's filtering
         const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"]');
         scripts.forEach(script => {
-            this.#processScript(script as HTMLScriptElement);
+            if (syndicator.checkIfAllowed(script as HTMLScriptElement)) {
+                this.#processScript(script as HTMLScriptElement);
+            }
         });
         
         // Subscribe to new scripts

package/nudge.js

@@ -0,0 +1,23 @@
+import { arr } from './arr.js';
+/**
+ * Decrement "disabled" counter, remove when reaches 0
+ * @param el
+ * Optional select the attribute or attributes to remove or decrement
+ * @param attr
+ */
+export function nudge(el, attr = 'disabled') {
+    const attrs = arr(attr);
+    for (const attr of attrs) {
+        const da = el.getAttribute(attr);
+        if (da !== null) {
+            if (da.length === 0 || da === "1") {
+                el.removeAttribute(attr);
+                if (attr === 'disabled')
+                    el.disabled = false;
+            }
+            else {
+                el.setAttribute(attr, (parseInt(da) - 1).toString());
+            }
+        }
+    }
+}

package/nudge.ts

@@ -0,0 +1,23 @@
+import {arr} from './arr.js';
+/**
+ * Decrement "disabled" counter, remove when reaches 0
+ * @param el
+ * Optional select the attribute or attributes to remove or decrement
+ * @param attr 
+ */
+ export function nudge(el: Element, attr: string | Array<string> = 'disabled') { //TODO:  Share with be-observant
+    const attrs = arr(attr);
+    for(const attr of attrs){
+        const da = el.getAttribute(attr);
+        if (da !== null) {
+            if (da.length === 0 || da === "1") {
+                el.removeAttribute(attr);
+                if(attr === 'disabled') (<any>el).disabled = false;
+            }
+            else {
+                el.setAttribute(attr, (parseInt(da) - 1).toString());
+            }
+        }
+    }
+
+}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "mount-observer",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.23",
+    "assign-gingerly": "0.0.24",
     "id-generation": "0.0.4"
   },
   "devDependencies": {
-    "@playwright/test": "1.59.0-alpha-2026-02-28",
+    "@playwright/test": "1.59.1",
     "spa-ssi": "0.0.27"
   },
   "exports": {
@@ -33,6 +33,10 @@
       "default": "./arr.js",
       "types": "./arr.ts"
     },
+    "./nudge.js": {
+      "default": "./nudge.js",
+      "types": "./nudge.ts"
+    },
     "./EvtRt.js": {
       "default": "./EvtRt.js",
       "types": "./EvtRt.ts"

package/types/be-committed/types.d.ts

@@ -0,0 +1,26 @@
+export interface EndUserProps{
+    to: string;
+    nudges: boolean;
+    on: string;
+}
+
+export interface AllProps extends EndUserProps {
+    enhancedElement: Element;
+    resolved: boolean;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AllProps // & BEAllProps & RoundaboutReady;
+
+export interface Actions{
+    
+    hydrate(self: BAP): ProPAP;
+    init(self: BAP, initVals: PAP): Promise<void>
+    // findTarget(self: this): Promise<void>;
+    // handleCommit(self: this, e: KeyboardEvent): Promise<void>;
+}

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

@@ -1,6 +1,6 @@
 // Core types for MountObserver v2 - Polyfill Supported Scenario I
 
-import {Spawner, EnhancementConfigBase, EnhKey} from '../assign-gingerly/types';
+import {Spawner, EnhancementConfigBase, EnhKey, AttrPatterns} from '../assign-gingerly/types';
 
 export type Constructor = new (...args: any[]) => any;
 
@@ -53,7 +53,7 @@ export interface EnhConfig<T = any, Obj = Element> extends EnhancementConfigBase
  * 
  * @template TKeys - String literal type for sub-observer keys when using the `with` property
  */
-export interface MountConfig<TKeys extends string = string> {
+export interface MountConfig<TKeys extends string = string, TCustomData = unknown> {
     /**
      * CSS selector string to match elements.
      * Only elements matching this selector will be considered for mounting.
@@ -216,7 +216,7 @@ export interface MountConfig<TKeys extends string = string> {
      * Allows handlers to receive additional context-specific information.
      * Not used by MountObserver itself, but available in MountContext.
      */
-    customData?: unknown;
+    customData?: TCustomData;
     
     /**
      * Sub-observer configurations for hierarchical composition.
@@ -246,8 +246,8 @@ export interface MountConfig<TKeys extends string = string> {
 
 export interface EMC<
     TKeys extends string = string,
-    T = any, Obj = Element
-> extends MountConfig<TKeys>{
+    T = unknown, Obj = Element, TCustomData = unknown
+> extends MountConfig<TKeys, TCustomData>{
     enhConfig: EnhConfig<T, Obj>
 }
 

package/types/roundabout/types.d.ts

@@ -0,0 +1,150 @@
+export type Key<T = any> = keyof T & string;
+
+export type Keysh<T = any> = Key<T> | Array<Key<T>>;
+
+type PropsToProps<Props> = (x: Props) => (Promise<Partial<Props>> | Partial<Props>)
+
+export interface LogicOp<Props = any, TActions = Props>{
+    /**
+     * Supported by trans-render
+     */
+    ifAllOf?: Keysh<Props>,
+
+    ifKeyIn?: Keysh<Props>,  
+
+    ifNoneOf?: Keysh<Props>,
+
+    ifEquals?: Array<Key<Props>>,
+
+    ifAtLeastOneOf?: Keysh<Props>,
+
+    ifNotAllOf?: Keysh<Props>,
+
+    debug?: boolean,
+
+    delay?: number,
+
+    do?:
+        | Function
+        | (keyof TActions & string)
+        | PropsToProps<Props>
+
+}
+
+export type Actions<TProps = any, TActions = TProps> = 
+    Partial<{[key in keyof TActions & string]: LogicOp<TProps>}>
+    //& Partial<{[key in `do_${keyof TActions & string}_on`]: Key<TActions> | Array<Key<TActions>> }> 
+;
+
+export type Compacts<TProps = any, TActions = TProps> = 
+    //| Partial<{[key in `${keyof TProps & string}_to_${keyof TProps & string}` & string]: Operation<TProps> }>
+    | Partial<{[key in `negate_${keyof TProps & string}_to_${keyof TProps & string}`]: number}>
+    | Partial<{[key in `pass_length_of_${keyof TProps & string}_to_${keyof TProps & string}`]: number}>
+    | Partial<{[key in `echo_${keyof TProps & string}_to_${keyof TProps & string}`]: number}>
+    | Partial<{[key in `echo_${keyof TProps & string}_to_${keyof TProps & string}_after`]: keyof TProps}>
+    | Partial<{[key in `when_${keyof TProps & string}_changes_call_${keyof TActions & string}`]: number}>
+    | Partial<{[key in `when_${keyof TProps & string}_changes_toggle_${keyof TProps & string}`]: number}>
+    | Partial<{[key in `when_${keyof TProps & string}_changes_inc_${keyof TProps & string}_by`]: number}>
+    | Partial<{[key in `when_${keyof TProps & string}_changes_dispatch`]: string}> //TODO
+;
+
+export type Hitches<TProps = any, TActions = TProps> = 
+    | Partial<{[key in `when_${keyof TProps & string}_emits_${keyof TProps & string}_inc_${keyof TProps & string}_by`]: number}>   
+;
+
+export type Handlers<ETProps = any, TActions = ETProps> = 
+    | Partial<{[key in `${keyof ETProps & string}_to_${keyof TActions & string}_on` & string]: string }>;
+
+    export type Positractions<TProps = any, TActions = TProps> = 
+    | Array<Positraction<TProps, TActions>>;
+
+export interface Positraction<TProps = any, TActions = TProps> extends LogicOp<TProps, TActions> {
+    do: 
+        | Function 
+        | (keyof TActions & string)
+        | PropsToProps<TProps>
+    ifKeyIn?: Array<keyof TProps & string>,
+    ifAllOf?: Array<keyof TProps & string>,
+    //ifNoneOf: Array<keyof TProps & string>,
+    
+    pass?: Array<(keyof TProps & string) | number | boolean | '$0' | '$0+' | `\`${string}\``>,
+    assignTo?: Array<null | (keyof TProps & string)>
+}
+
+export interface RAConfig<TProps = unknown, TActions = TProps, ETProps = TProps> {
+    actions?: Actions<TProps,TActions>,
+    compacts?: Compacts<TProps, TActions>,
+    //onsets?: Onsets<TProps, TActions>,
+    handlers?: Handlers<ETProps, TActions>,
+    hitch?: Hitches<TProps, TActions>,
+    positractions?: Positractions<TProps>,
+}
+
+export interface RoundaboutOptions<TProps = unknown, TActions = TProps, ETProps = TProps> extends RAConfig<TProps, TActions, ETProps> {
+    vm?: TProps & TActions & RoundaboutReady,
+    //for enhanced elements, pass in the container, referenced via $0.
+    container?: EventTarget,
+    propagate?: keyof TProps & string | Array<keyof TProps & string>,
+    
+    //mountObservers?: Set<IMountObserver>
+    
+    /**
+     * Enable internal routing optimization for actions (default: false)
+     * 
+     * When true: Action results are batched and cascaded before firing events.
+     * - Eliminates redundant action calls in diamond dependency patterns
+     * - More predictable: actions run once per logical change
+     * - Best for: Complex cascades, multiple properties returned from actions
+     * 
+     * When false: Uses traditional approach with immediate event firing.
+     * - Simpler execution model, easier to debug
+     * - Slightly faster for simple linear cascades
+     * - Best for: Simple cascades, performance-critical paths
+     * 
+     * Enable if you have:
+     * - Actions that return multiple properties
+     * - Multiple actions monitoring the same properties
+     * - Diamond dependencies (A→B, A→C, B→D, C→D)
+     */
+    internalRouting?: boolean,
+}
+
+export interface RoundaboutReady{
+    /**
+     * Allow for assigning to read only props via the "backdoor"
+     * Bypasses getters / setters, sets directly to (private) memory slots
+     * Doesn't do any notification
+     * Allows for nested property setting
+    */
+    covertAssignment(obj: any): Promise<void>;
+
+    /**
+     * fires event with name matching the name of the property when the value changes (but not via covertAssignment)
+     * when property is set via public interface, not (immediately) via an action method's return object
+     */
+    readonly propagator : EventTarget | undefined;
+
+    /**
+     * 
+     * https://github.com/whatwg/dom/issues/1296
+     */
+    //readonly disconnectedSignal: AbortSignal
+
+    RAController: AbortController;
+
+    /**
+     * During this time, queues/buses continue to perform "bookkeeping"
+     * but doesn't process the queue until sleep property becomes falsy.
+     * If truthy, can call await awake() before processing should resume
+     * [TODO]
+     */  
+    readonly sleep?: number | undefined;
+
+    awake(): Promise<void>;
+
+    //make the value sleep 1 step closer to be falsy
+    nudge(): void;
+
+    //make the value of sleep 1 step further away from being falsy
+    rock(): void;
+}