mount-observer 0.1.30 → 0.1.32

package/README.md

@@ -682,7 +682,7 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
 
 1. **Syndicator** (in document root): Watches for `script[type="mountobserver"]` and `script[type="emc"]` elements and broadcasts them to subscribers
 2. **Subscriber** (in shadow roots): Receives and clones script elements from the syndicator
-3. **Automatic activation**: Both syndicator and subscriber activate 5 built-in handlers in their respective root nodes
+3. **Automatic activation**: Both syndicator and subscriber activate 7 built-in handlers in their respective root nodes
 
 **Basic usage:**
 
@@ -730,12 +730,31 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
 
 **What happens:**
 
-1. The syndicator (`<app-synthesizer>` in document root) activates 5 built-in handlers:
-   - `builtIns.mountObserverScript`
-   - `builtIns.scriptExport`
-   - `builtIns.HTMLInclude`
-   - `builtIns.hoistTemplate`
-   - `builtIns.emcScript`
+1. The syndicator (`<app-synthesizer>` in document root) activates 7 built-in handlers:
+   - `builtIns.mountObserverScript` - Process MOSE scripts
+   - `builtIns.scriptExport` - Expose module exports from script elements
+   - `builtIns.HTMLInclude` - Enable intra-document HTML includes
+   - `builtIns.hoistTemplate` - Optimize template usage
+   - `builtIns.generateIds` - Auto-generate unique IDs
+   - `builtIns.emcParserScript` - Load parsers for EMC scripts
+   - `builtIns.emcScript` - Process EMC scripts
+
+<details>
+<summary>Why these handlers?</summary>
+
+These handlers form the core infrastructure for declarative progressive enhancement:
+
+- **mountObserverScript**: Enables fully declarative mount observer configuration via `<script type="mountobserver">` elements
+- **scriptExport**: Makes ES module exports accessible from script elements, enabling configuration sharing
+- **HTMLInclude**: Allows template reuse and inheritance patterns with `<template src="#id">`
+- **hoistTemplate**: Optimizes memory usage by centralizing template content
+- **generateIds**: Automates ID generation for forms and accessibility features
+- **emcParserScript**: Enables lazy-loading of complex parsers for enhancement attributes
+- **emcScript**: Processes enhancement configurations for progressive enhancement
+
+Together, these handlers enable a complete HTML-first development workflow where behaviors, enhancements, and configurations can be declared in HTML and automatically propagated across shadow DOM boundaries.
+
+</details>
 
 2. The syndicator watches for script elements being added to its light children
 
@@ -749,7 +768,7 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
    - Subscribe to `addedscriptelement` events for new scripts
    - Clone each script element and copy its `export` property
    - Append cloned scripts to their own light children
-   - Activate the same 5 built-in handlers in their shadow root
+   - Activate the same 7 built-in handlers in their shadow root
 
 **Syndicator vs Subscriber:**
 
@@ -775,6 +794,12 @@ await this.getRootNode().mount({
 await this.getRootNode().mount({
     do: 'builtIns.hoistTemplate'
 });
+await this.getRootNode().mount({
+    do: 'builtIns.generateIds'
+});
+await this.getRootNode().mount({
+    do: 'builtIns.emcParserScript'
+});
 await this.getRootNode().mount({
     do: 'builtIns.emcScript'
 });
@@ -785,6 +810,8 @@ This ensures that:
 - Script exports are available
 - HTML includes work within each shadow root
 - Templates are hoisted for performance
+- IDs are auto-generated in forms and components
+- Parsers are loaded for EMC scripts
 - EMC scripts enhance elements in each scope
 
 **Script processing:**

package/Synthesizer.js

@@ -1,6 +1,7 @@
 import './ElementMountExtension.js';
 import { waitForEvent } from 'assign-gingerly/waitForEvent.js';
 import { AddedScriptElementEvent } from './Events.js';
+import { registryItem as inferRegistryItem } from 'assign-gingerly/Infer.js';
 import 'mount-observer/handlers/MountObserverScript.js';
 import { mos } from 'mount-observer/handlers/MountObserverScript.js';
 import 'mount-observer/handlers/ScriptExport.js';
@@ -13,6 +14,8 @@ import { emc } from 'mount-observer/handlers/EMCScript.js';
 import 'mount-observer/handlers/EMCScript.js';
 import 'mount-observer/handlers/EMCParserScript.js';
 import { emcParser } from 'mount-observer/handlers/EMCParserScript.js';
+import 'mount-observer/handlers/GenIds.js';
+import { genIds } from 'mount-observer/handlers/GenIds.js';
 /**
  * Track which root nodes have already had handlers activated.
  * Uses WeakSet to avoid memory leaks when nodes are garbage collected.
@@ -55,11 +58,16 @@ export class Synthesizer extends HTMLElement {
      * List of built-in handlers to activate.
      */
     static builtInHandlers = [
-        mos, scriptExport, include, hoist, emcParser, emc
+        mos, scriptExport, include, hoist, genIds, emcParser, emc
     ];
     connectedCallback() {
         // Synthesizer elements are infrastructure, not UI
         this.hidden = true;
+        // Register the Infer enhancement in the appropriate registry
+        const registry = this.customElementRegistry || customElements;
+        if (registry.enhancementRegistry) {
+            registry.enhancementRegistry.push(inferRegistryItem);
+        }
         // Identify the root node
         const rootNode = this.getRootNode();
         // Determine if this is a syndicator or subscriber

package/Synthesizer.ts

@@ -1,6 +1,7 @@
 import './ElementMountExtension.js';
 import { waitForEvent } from 'assign-gingerly/waitForEvent.js';
 import { AddedScriptElementEvent } from './Events.js';
+import { registryItem as inferRegistryItem } from 'assign-gingerly/Infer.js';
 
 import 'mount-observer/handlers/MountObserverScript.js';
 import {mos} from 'mount-observer/handlers/MountObserverScript.js';
@@ -14,6 +15,8 @@ import {emc} from 'mount-observer/handlers/EMCScript.js';
 import 'mount-observer/handlers/EMCScript.js';
 import 'mount-observer/handlers/EMCParserScript.js';
 import {emcParser} from 'mount-observer/handlers/EMCParserScript.js';
+import 'mount-observer/handlers/GenIds.js';
+import {genIds} from 'mount-observer/handlers/GenIds.js';
 
 /**
  * Track which root nodes have already had handlers activated.
@@ -59,13 +62,19 @@ export abstract class Synthesizer extends HTMLElement {
      * List of built-in handlers to activate.
      */
     protected static builtInHandlers = [
-        mos, scriptExport, include, hoist, emcParser, emc
+        mos, scriptExport, include, hoist, genIds, emcParser, emc
     ];
 
     connectedCallback(): void {
         // Synthesizer elements are infrastructure, not UI
         this.hidden = true;
         
+        // Register the Infer enhancement in the appropriate registry
+        const registry = (this as any).customElementRegistry || customElements;
+        if (registry.enhancementRegistry) {
+            registry.enhancementRegistry.push(inferRegistryItem);
+        }
+        
         // Identify the root node
         const rootNode = this.getRootNode();
         

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mount-observer",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.28",
+    "assign-gingerly": "0.0.30",
     "id-generation": "0.0.4"
   },
   "devDependencies": {

package/types/do-inc/types.d.ts

@@ -0,0 +1,55 @@
+import { StatementsResult } from "../nested-regex-groups/types";
+
+export interface EndUserProps{
+    parsedStatements: StatementsResult<IncParameters>,
+}
+
+export interface AllProps extends EndUserProps{
+    enhancedElement: Element;
+    resolved: boolean;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP  = Promise<PAP>
+
+export interface Actions{
+    hydrate(self: AP & Actions): ProPAP;
+    handleEvent(self: AP, event: Event, incParameters: IncParameters): void;
+    init(self: AP, enhancedElement: Element, initVals: PAP): Promise<void>
+}
+
+export type asOptions = 
+    | 'number'
+    | 'boolean'
+    | 'string' 
+    | 'object'
+    | 'regexp' 
+    | 'urlpattern'
+    | 'boolean|number'
+;
+
+export type SubPropPath = string;
+export type EventName = string;
+
+export interface Specifier {
+    id?: string,
+    prop?: string,
+    path?: SubPropPath,
+    evtName?: EventName,
+    as?: asOptions,
+    constVal?: any;
+    enhKey?: string;
+    ish?: boolean;
+    host?: boolean;
+}
+
+export interface IncParameters {
+    prop: string,
+    byAmtS?: string,
+    byAmtN?: number,
+    targetElementId?: string,
+    localEventType?: string,
+}

package/types/do-invoke/types.d.ts

@@ -1,15 +1,17 @@
+import { StatementsResult } from "../nested-regex-groups/types";
+
 export interface Specifier {
     selector?: string;
     prop?: string;
 }
 
 export interface EndUserProps{
-    invokeParamSets: Array<InvokingParameters>,
+    invokeParamSet: StatementsResult<InvokingParameters>,
 }
 
 export interface AllProps extends EndUserProps{
     enhancedElement: Element;
-    rawStatements: Array<string>,
+    resolved: boolean;
 }
 
 export type AP = AllProps;
@@ -20,9 +22,16 @@ export type ProPAP  = Promise<PAP>
 
 export interface Actions{
     hydrate(self: AP): ProPAP;
+    init(self: AP, enhancedElement: Element, initVals: PAP): Promise<void>
 }
 
+
+
 export interface InvokingParameters {
-    remoteSpecifier: Specifier,
-    localEventType?: string,
+    targetSpecifier: {
+        hostOrPeerMethodName: string,
+        targetElementId?: string,
+    },
+    //defaults to "click" if not specified
+    localEventType: string,
 }

package/types/do-toggle/types.d.ts

@@ -0,0 +1,26 @@
+import { StatementsResult } from "../nested-regex-groups/types";
+
+export interface EndUserProps{}
+
+export interface AllProps extends EndUserProps{
+    enhancedElement: Element;
+    parsedStatements: StatementsResult<TogglingParameters>;
+    resolved?: boolean;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP  = Promise<PAP>
+
+export interface Actions{
+    init(self: AllProps, enhancedElement: Element, initVals: PAP): void;
+    hydrate(self: AP): ProPAP;
+    handleEvent(self: AP, e: Event, parsedStatement: TogglingParameters): void;
+}
+
+export interface TogglingParameters {
+    prop: string;
+    localEventType?: string;
+}

package/types/nested-regex-groups/types.d.ts

@@ -54,6 +54,12 @@ export interface PatternConfig {
   name: string;
   pattern: string;
   description?: string;
+  /**
+   * Default values to merge into the parsed result
+   * Keys can use dot notation for nested values
+   * Example: { trigger: 'on', 'lhs.id': '#lhs' }
+   */
+  defaultVals?: Record<string, string>;
 }
 
 /**