mount-observer 0.1.36 → 0.1.38

package/handlers/elementIntersection.js

@@ -1,73 +1,73 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupElementIntersection = setupElementIntersection;
-exports.isElementIntersecting = isElementIntersecting;
-var Events_js_1 = require("./Events.js");
-function setupElementIntersection(init, rootNodeRef, mountedElements, modules, observer, matchesSelector, handleMatch) {
-    var whereElementIntersectsWith = init.whereElementIntersectsWith;
-    if (!whereElementIntersectsWith) {
-        throw new Error('whereElementIntersectsWith is required');
-    }
-    // Track which elements are currently intersecting
-    var intersectingElements = new WeakSet();
-    // Create IntersectionObserver with the provided options
-    var intersectionObserver = new IntersectionObserver(function (entries) {
-        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-            var entry = entries_1[_i];
-            var element = entry.target;
-            if (entry.isIntersecting) {
-                // Element is now intersecting
-                intersectingElements.add(element);
-                // Check if element matches all other conditions and mount if so
-                if (matchesSelector(element)) {
-                    handleMatch(element);
-                }
-            }
-            else {
-                // Element is no longer intersecting
-                intersectingElements.delete(element);
-                // Dismount if it was mounted
-                if (mountedElements.weakSet.has(element)) {
-                    dismountElement(element);
-                }
-            }
-        }
-    }, whereElementIntersectsWith);
-    function dismountElement(element) {
-        // Remove from mounted elements
-        mountedElements.weakSet.delete(element);
-        for (var _i = 0, _a = mountedElements.setWeak; _i < _a.length; _i++) {
-            var ref = _a[_i];
-            if (ref.deref() === element) {
-                mountedElements.setWeak.delete(ref);
-                break;
-            }
-        }
-        // Dispatch dismount event
-        observer.dispatchEvent(new Events_js_1.DismountEvent(element, 'intersection-failed', init));
-    }
-    function observeElement(element) {
-        intersectionObserver.observe(element);
-    }
-    return {
-        intersectionObserver: intersectionObserver,
-        observeElement: observeElement,
-        cleanup: function () {
-            intersectionObserver.disconnect();
-        }
-    };
-}
-/**
- * Check if an element is currently intersecting
- * This is called from #matchesSelector to determine if intersection condition is met
- */
-function isElementIntersecting(element, intersectionObserver) {
-    // If no intersection observer is set up, consider all elements as intersecting
-    if (!intersectionObserver) {
-        return true;
-    }
-    // When intersection observer is active, we can't synchronously determine intersection state
-    // The element will be observed and the callback will handle mounting when it intersects
-    // Return false here to prevent immediate mounting
-    return false;
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupElementIntersection = setupElementIntersection;
+exports.isElementIntersecting = isElementIntersecting;
+var Events_js_1 = require("./Events.js");
+function setupElementIntersection(init, rootNodeRef, mountedElements, modules, observer, matchesSelector, handleMatch) {
+    var whereElementIntersectsWith = init.whereElementIntersectsWith;
+    if (!whereElementIntersectsWith) {
+        throw new Error('whereElementIntersectsWith is required');
+    }
+    // Track which elements are currently intersecting
+    var intersectingElements = new WeakSet();
+    // Create IntersectionObserver with the provided options
+    var intersectionObserver = new IntersectionObserver(function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            var element = entry.target;
+            if (entry.isIntersecting) {
+                // Element is now intersecting
+                intersectingElements.add(element);
+                // Check if element matches all other conditions and mount if so
+                if (matchesSelector(element)) {
+                    handleMatch(element);
+                }
+            }
+            else {
+                // Element is no longer intersecting
+                intersectingElements.delete(element);
+                // Dismount if it was mounted
+                if (mountedElements.weakSet.has(element)) {
+                    dismountElement(element);
+                }
+            }
+        }
+    }, whereElementIntersectsWith);
+    function dismountElement(element) {
+        // Remove from mounted elements
+        mountedElements.weakSet.delete(element);
+        for (var _i = 0, _a = mountedElements.setWeak; _i < _a.length; _i++) {
+            var ref = _a[_i];
+            if (ref.deref() === element) {
+                mountedElements.setWeak.delete(ref);
+                break;
+            }
+        }
+        // Dispatch dismount event
+        observer.dispatchEvent(new Events_js_1.DismountEvent(element, 'intersection-failed', init));
+    }
+    function observeElement(element) {
+        intersectionObserver.observe(element);
+    }
+    return {
+        intersectionObserver: intersectionObserver,
+        observeElement: observeElement,
+        cleanup: function () {
+            intersectionObserver.disconnect();
+        }
+    };
+}
+/**
+ * Check if an element is currently intersecting
+ * This is called from #matchesSelector to determine if intersection condition is met
+ */
+function isElementIntersecting(element, intersectionObserver) {
+    // If no intersection observer is set up, consider all elements as intersecting
+    if (!intersectionObserver) {
+        return true;
+    }
+    // When intersection observer is active, we can't synchronously determine intersection state
+    // The element will be observed and the callback will handle mounting when it intersects
+    // Return false here to prevent immediate mounting
+    return false;
+}

package/index.js

@@ -12,6 +12,7 @@ export { MountObserverScriptHandler } from './handlers/MountObserverScript.js';
 export { EMCScriptHandler } from './handlers/EMCScript.js';
 export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
 export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
+export { CedeScriptHandler } from './handlers/CedeScript.js';
 export { upShadowSearch } from './upShadowSearch.js';
 export { mountEventName, dismountEventName, disconnectEventName, loadEventName, mediamatchEventName, mediaunmatchEventName, addedScriptElementEventName } from './Events.js';
 // Register built-in handlers
@@ -24,3 +25,4 @@ import './handlers/MountObserverScript.js';
 import './handlers/EMCScript.js';
 import './handlers/HoistTemplate.js';
 import './handlers/HTMLInclude.js';
+import './handlers/CedeScript.js';

package/index.ts

@@ -12,6 +12,7 @@ export { MountObserverScriptHandler } from './handlers/MountObserverScript.js';
 export { EMCScriptHandler } from './handlers/EMCScript.js';
 export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
 export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
+export { CedeScriptHandler } from './handlers/CedeScript.js';
 export { upShadowSearch } from './upShadowSearch.js';
 export type {
     MountConfig,
@@ -44,3 +45,4 @@ import './handlers/MountObserverScript.js';
 import './handlers/EMCScript.js';
 import './handlers/HoistTemplate.js';
 import './handlers/HTMLInclude.js';
+import './handlers/CedeScript.js';

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "mount-observer",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.38",
+    "assign-gingerly": "0.0.51",
     "id-generation": "0.0.4"
   },
   "devDependencies": {
-    "@playwright/test": "1.59.1",
+    "@playwright/test": "1.60.0",
     "spa-ssi": "0.0.27"
   },
   "exports": {

package/types/assign-gingerly/types.d.ts

@@ -179,13 +179,18 @@ export interface AttrConfig<T = unknown, TParserConfig = unknown> {
   //  * Defaults to true (initial read only)
   //  */
   // initialOnly?: boolean;
+
+  /**
+   * Should make sure it is added to static observedAttribrutes
+   */
+  sourceOfTruth?: boolean;
 }
 
 export type AttrPatterns<T = any> = {
   /**
    * Base prefix for attribute names
    */
-  base: string;
+  base?: string;
 
   /**
    * Configuration for the base pattern
@@ -321,3 +326,151 @@ export interface ElementEnhancement{
   dispose(registryItem: EnhancementConfig | string | symbol): void;
   whenResolved(registryItem: EnhancementConfig | string | symbol, mountCtx?: any): Promise<any>;
 }
+
+// =============================================================================
+// Custom Element Features types
+// =============================================================================
+
+/**
+ * Context passed to feature spawn constructors
+ */
+export interface FeatureSpawnContext {
+    /** The feature key (e.g., 'photoTaker') */
+    key: string;
+    /** The SupportedFeatureConfig from static supportedFeatures */
+    optIn: SupportedFeatureConfig;
+    /** The FeatureConfig from assignFeatures */
+    injection: FeatureConfig;
+    /** The features registry reference */
+    featuresRegistry: FeaturesRegistry;
+    /** Shared context from the host element (via getSharedContext callback) */
+    shared?: any;
+}
+
+/**
+ * Configuration for a supported feature slot declared via static supportedFeatures
+ */
+export interface SupportedFeatureConfig {
+    /**
+     * Optional fallback class (or async spawner) to use if no implementation is injected.
+     */
+    fallbackSpawn?:
+        | { new(hostElement: any, ctx: FeatureSpawnContext, initVals?: any): any }
+        | (() => Promise<{ new(hostElement: any, ctx: FeatureSpawnContext, initVals?: any): any }>);
+
+    /**
+     * Optional runtime shape validation for the spawned instance.
+     * Return true if the instance is valid, false to throw.
+     */
+    validateShape?: (spawnedInstance: any) => boolean;
+
+    /**
+     * Optional callback to provide shared context (e.g., ElementInternals, private state)
+     * to the feature at construction time.
+     */
+    getSharedContext?: (instance: any) => any;
+
+    /**
+     * Lifecycle callbacks that this feature requires.
+     * Serves as the default — the consumer can add more via FeatureConfig.callbackForwarding.
+     */
+    callbackForwarding?: string[];
+}
+
+/**
+ * Class-level configuration for the features system.
+ * Declared as `static featuresConfig` on the class.
+ */
+export interface FeaturesClassConfig {
+    /**
+     * Lifecycle method configuration.
+     * true = install 'whenFeatureReady' method.
+     * Object = custom method name.
+     */
+    lifecycleKeys?: true | {
+        whenFeatureReady?: string;
+    };
+}
+
+/**
+ * Configuration for a feature passed to assignFeatures.
+ */
+export interface FeatureConfig {
+    /**
+     * The class to instantiate, or an async function returning one.
+     */
+    spawn?:
+        | { new(hostElement: any, ctx: FeatureSpawnContext, initVals?: any): any }
+        | (() => Promise<{ new(hostElement: any, ctx: FeatureSpawnContext, initVals?: any): any }>);
+
+    /** Attribute patterns for parsing element attributes into initVals. */
+    withAttrs?: AttrPatterns<any>;
+
+    /** Pass-through custom configuration data (accessible via ctx.injection.customData). */
+    customData?: any;
+
+    /** Lifecycle callbacks to forward to this feature. */
+    callbackForwarding?: string[];
+}
+
+export type SupportedFeaturesMap = Record<string, SupportedFeatureConfig>;
+export type FeatureConfigsMap = Record<string, FeatureConfig>;
+
+/**
+ * Registry for feature configs, keyed by constructor.
+ */
+export declare class FeaturesRegistry {
+    has(ctr: Function): boolean;
+    get(ctr: Function): Map<string, FeatureConfig> | undefined;
+    set(ctr: Function, key: string, config: FeatureConfig): void;
+    hasKey(ctr: Function, key: string): boolean;
+}
+
+/**
+ * A suggestion from one feature to another.
+ */
+export interface FeatureInfoSuggestion {
+    from: Function;
+    withAttrs?: any;
+    customData?: any;
+}
+
+/**
+ * Core assignFeatures function.
+ */
+export declare function assignFeatures(
+    ctr: Function,
+    features: FeatureConfigsMap,
+    featuresRegistry: FeaturesRegistry
+): Promise<void> | undefined;
+
+/**
+ * Captures own-properties that shadow feature getters.
+ */
+export declare function captureFeatureInitVals(instance: any): void;
+
+/**
+ * Suggest configuration to another feature during registration.
+ */
+export declare function suggestFeatureInfo(
+    fromFeatureCtr: Function,
+    toFeatureSymbol: symbol,
+    featureInfo: { withAttrs?: any; customData?: any },
+    targetClass: Function
+): void;
+
+/**
+ * Retrieve suggestions made to a feature by other features.
+ */
+export declare function getFeatureInfoSuggestions(
+    toFeatureSymbol: symbol,
+    targetClass: Function
+): FeatureInfoSuggestion[];
+
+/**
+ * Base class for nested feature containers.
+ */
+export declare class PropertyBag {
+    customElementRegistry: any;
+    constructor(hostElement: any, ctx?: FeatureSpawnContext, initVals?: any);
+}

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

@@ -0,0 +1,80 @@
+import { SpawnContext } from "../assign-gingerly/types";
+
+/**
+ * Shared context passed via getSharedContext — contains everything
+ * the Reflector needs to self-activate on spawn.
+ */
+export interface ReflectorSharedContext {
+    /** The ElementInternals instance for custom state manipulation */
+    internals: ElementInternals;
+    /** The EventTarget the host dispatches property change events on */
+    hostPropagator: EventTarget;
+}
+
+/**
+ * Context passed to the Reflector feature constructor
+ */
+export interface FeatureSpawnContext extends SpawnContext {
+    key: string;
+    optIn: any;
+    injection: any;
+    featuresRegistry: any;
+    shared?: ReflectorSharedContext;
+}
+
+/**
+ * A single custom state export rule parsed from --custom-state-exports
+ */
+export interface CustomStateRule {
+    /** The custom state name to toggle (e.g. "disabled", "alertTypeIndicatesSuccess") */
+    stateName: string;
+    /** The property name to observe */
+    propName: string;
+    /** The condition type */
+    conditionType: 'boolean' | 'equals' | 'contains' | 'endsWith' | 'modulo' | 'lessThan' | 'greaterThan' | 'lessThanOrEqual' | 'greaterThanOrEqual';
+    /** The comparison value (for non-boolean conditions) */
+    compareValue?: string | number;
+    /** The modulo divisor (for modulo conditions) */
+    moduloDivisor?: number;
+}
+
+/**
+ * Properties that the Reflector feature exposes.
+ * With callbackForwarding, hostPropagator is provided via getSharedContext
+ * and the feature self-activates — but the setter remains for manual use cases.
+ */
+export interface ReflectorProps {
+    /**
+     * The EventTarget that the host element uses to propagate property change events.
+     * Provided via getSharedContext. Also settable post-spawn for reconnection.
+     */
+    hostPropagator: EventTarget | null;
+}
+
+/**
+ * Internal state
+ */
+export interface AllProps extends ReflectorProps {
+    /**
+     * WeakRef to the host custom element
+     */
+    hostRef: WeakRef<HTMLElement> | null;
+
+    /**
+     * The ElementInternals instance from the host (for custom state manipulation)
+     */
+    internals: ElementInternals | null;
+
+    /**
+     * Parsed custom state rules from --custom-state-exports CSS property
+     */
+    rules: CustomStateRule[];
+
+    /**
+     * AbortController for cleaning up event listeners
+     */
+    abortController: AbortController | null;
+}
+
+export type AP = AllProps;
+export type PAP = Partial<AP>;

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

@@ -1,4 +1,4 @@
-import { ElementEnhancementGateway } from "../assign-gingerly/types";
+import { ElementEnhancementGateway, SpawnContext } from "../assign-gingerly/types";
 import { StatementsResult } from "../nested-regex-groups/types";
 
 export interface EndUserProps{
@@ -19,7 +19,7 @@ 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>
+    init(self: AP, enhancedElement: Element, ctx: SpawnContext, initVals: PAP): Promise<void>;
 }
 
 export type asOptions = 

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

@@ -0,0 +1,28 @@
+import { ElementEnhancementGateway, SpawnContext, IAssignGingerlyOptions } from "../assign-gingerly/types";
+
+export interface MergeParameters {
+    assign: Record<string, any>;
+    on?: string;
+    options?: IAssignGingerlyOptions;
+    targetElementId?: string;
+}
+
+export interface EndUserProps {
+    mergeParamSets: MergeParameters | MergeParameters[];
+}
+
+export interface AllProps extends EndUserProps {
+    enhancedElement: Element & ElementEnhancementGateway;
+    resolved: boolean;
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export interface Actions {
+    init(self: AP, enhancedElement: Element, ctx: SpawnContext, initVals: PAP): Promise<void>;
+    hydrate(self: AP): ProPAP;
+}

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

@@ -1,4 +1,4 @@
-import { ElementEnhancementGateway } from "../assign-gingerly/types";
+import { ElementEnhancementGateway, SpawnContext } from "../assign-gingerly/types";
 import { StatementsResult } from "../nested-regex-groups/types";
 
 export interface EndUserProps{}
@@ -16,7 +16,7 @@ export type PAP = Partial<AP>;
 export type ProPAP  = Promise<PAP>
 
 export interface Actions{
-    init(self: AllProps, enhancedElement: Element, initVals: PAP): void;
+    init(self: AllProps, enhancedElement: Element, ctx: SpawnContext, initVals: PAP): Promise<void>;
     hydrate(self: AP): ProPAP;
     handleEvent(self: AP, e: Event, parsedStatement: TogglingParameters): void;
 }
@@ -24,4 +24,8 @@ export interface Actions{
 export interface TogglingParameters {
     prop?: string | null;
     localEventType?: string;
+    targetSpecifier: {
+        prop?: string;
+        targetElementId?: string;
+    };
 }

package/types/face-up/types.d.ts

@@ -0,0 +1,102 @@
+import { SpawnContext } from "../assign-gingerly/types";
+
+/**
+ * Shared context passed via getSharedContext — contains the
+ * ElementInternals instance needed for form control APIs.
+ */
+export interface FaceUpSharedContext {
+    /** The ElementInternals instance for form control APIs */
+    internals: ElementInternals;
+}
+
+/**
+ * Context passed to the FaceUp feature constructor
+ */
+export interface FeatureSpawnContext extends SpawnContext {
+    key: string;
+    optIn: any;
+    injection: any;
+    featuresRegistry: any;
+    shared?: FaceUpSharedContext;
+}
+
+/**
+ * Validation flags matching the ValidityStateFlags interface.
+ * Used with setValidity() to indicate the type of validation error.
+ */
+export interface ValidationFlags {
+    valueMissing?: boolean;
+    typeMismatch?: boolean;
+    patternMismatch?: boolean;
+    tooLong?: boolean;
+    tooShort?: boolean;
+    rangeUnderflow?: boolean;
+    rangeOverflow?: boolean;
+    stepMismatch?: boolean;
+    badInput?: boolean;
+    customError?: boolean;
+}
+
+/**
+ * Properties that the FaceUp feature exposes.
+ * These allow the host custom element to participate in HTML forms
+ * via the ElementInternals API.
+ *
+ * Because the feature is installed as a getter-only property,
+ * assignGingerly merges directly into the instance. The consumer
+ * simply sets properties (e.g., el.faceUp.value = x) and the
+ * setters handle syncing to ElementInternals automatically.
+ */
+export interface FaceUpProps {
+    /**
+     * The current form value of the control.
+     * Setting this calls setFormValue() on the internals.
+     */
+    value: string | File | FormData | null;
+
+    /**
+     * Internal state for form restoration (optional).
+     * If provided, passed as the second argument to setFormValue().
+     */
+    state: string | File | FormData | null;
+
+    /**
+     * Whether the control is currently disabled.
+     */
+    disabled: boolean;
+
+    /**
+     * Whether the control requires a value for form submission.
+     */
+    required: boolean;
+
+    /**
+     * Custom validation message. Setting a non-empty string
+     * marks the control as invalid with customError.
+     */
+    validationMessage: string;
+}
+
+/**
+ * Internal state
+ */
+export interface AllProps extends FaceUpProps {
+    /**
+     * WeakRef to the host custom element
+     */
+    hostRef: WeakRef<HTMLElement> | null;
+
+    /**
+     * The ElementInternals instance from the host (for form control APIs)
+     */
+    internals: ElementInternals | null;
+}
+
+export type AP = AllProps;
+export type PAP = Partial<AP>;
+
+
+
+export interface CustomData {
+    integrateWithRoundabout: boolean;
+}