element-vir 12.3.1 → 12.4.0

package/README.md

@@ -219,7 +219,7 @@ export const MyWithAssignmentCleanupCallbackElement = defineElementNoInputs({
     },
     initCallback: ({updateState}) => {
         updateState({
-            intervalId: window.setInterval(() => console.log('hi'), 1000),
+            intervalId: window.setInterval(() => console.info('hi'), 1000),
         });
     },
     renderCallback: () => html`

package/dist/declarative-element/declarative-element-init.d.ts

@@ -1,15 +1,15 @@
 import { CSSResult } from 'lit';
 import { RequireNonVoidReturn } from '../augments/type';
 import { DeclarativeElementDefinitionOptions } from './definition-options';
-import { MaybeAsyncStateToSync } from './properties/async-state';
 import { CssVarsInitMap } from './properties/css-vars';
 import { EventsInitMap } from './properties/element-events';
 import { PropertyInitMapBase } from './properties/element-properties';
 import { HostClassesInitMap } from './properties/host-classes';
+import { FlattenObservablePropertyGetters } from './properties/observable-property/observable-property-handler';
 import { StylesCallback } from './properties/styles';
 import { InitCallback, RenderCallback } from './render-callback';
 export type CustomElementTagName = `${string}-${string}`;
-export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitMaybeAsyncGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string, RenderOutputGeneric> = {
+export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string, RenderOutputGeneric> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
@@ -18,7 +18,7 @@ export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName,
     /** Static styles. These should not and cannot change. */
     styles?: CSSResult | StylesCallback<HostClassKeysGeneric, CssVarKeysGeneric>;
     /** Element properties. (These can be thought of as "inputs".) */
-    stateInit?: StateInitMaybeAsyncGeneric;
+    stateInit?: StateInitGeneric;
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */
     events?: EventsInitGeneric;
     /**
@@ -26,7 +26,7 @@ export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName,
      * based on current instance state or inputs, or just undefined to indicate that the host class
      * will only be manually set.
      */
-    hostClasses?: HostClassesInitMap<HostClassKeysGeneric, InputsGeneric, MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>>;
+    hostClasses?: HostClassesInitMap<HostClassKeysGeneric, FlattenObservablePropertyGetters<InputsGeneric>, FlattenObservablePropertyGetters<StateInitGeneric>>;
     /**
      * CSS Vars for the component. Keys of this object should be camelCased (or whatever your casing
      * convention is). They will be transformed, at runtime, to CSS vars with kebab-casing, to match
@@ -39,8 +39,8 @@ export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName,
      */
     cssVars?: CssVarsInitMap<CssVarKeysGeneric>;
     /** Called as part of the first renderCallback call, before the first renderCallback call. */
-    initCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
-    renderCallback: RequireNonVoidReturn<RenderOutputGeneric, RenderCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric, RenderOutputGeneric>>;
-    cleanupCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    initCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    renderCallback: RequireNonVoidReturn<RenderOutputGeneric, RenderCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric, RenderOutputGeneric>>;
+    cleanupCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };

package/dist/declarative-element/declarative-element.d.ts

@@ -1,17 +1,17 @@
 import { RequiredAndNotNullBy, RequiredBy } from '@augment-vir/common';
 import { CSSResult, LitElement } from 'lit';
 import { CustomElementTagName, DeclarativeElementInit } from './declarative-element-init';
-import { AsyncStateHandlerMap, MaybeAsyncStateToSync } from './properties/async-state';
 import { CssVarNameOrValueMap } from './properties/css-vars';
 import { EventDescriptorMap, EventsInitMap } from './properties/element-events';
 import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './properties/element-properties';
 import { HostClassNamesMap } from './properties/host-classes';
+import { AllowObservablePropertySetter, FlattenObservablePropertyGetters, ObservablePropertyHandlerMap } from './properties/observable-property/observable-property-handler';
 import { RenderCallback, RenderParams } from './render-callback';
-export type HostInstanceType<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitMaybeAsyncGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = RequiredAndNotNullBy<DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, any>, 'shadowRoot'>;
-export type DeclarativeElementDefinition<TagNameGeneric extends CustomElementTagName = any, InputsGeneric extends PropertyInitMapBase = any, StateInitMaybeAsyncGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string, RenderOutputGeneric = any> = (new () => HostInstanceType<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric> & {
-    instanceType: HostInstanceType<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+export type HostInstanceType<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = RequiredAndNotNullBy<DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, any>, 'shadowRoot'>;
+export type DeclarativeElementDefinition<TagNameGeneric extends CustomElementTagName = any, InputsGeneric extends PropertyInitMapBase = any, StateInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string, RenderOutputGeneric = any> = (new () => HostInstanceType<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric> & {
+    instanceType: HostInstanceType<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 };
-export declare abstract class DeclarativeElement<TagNameGeneric extends CustomElementTagName = any, InputsGeneric extends PropertyInitMapBase = any, StateInitMaybeAsyncGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string, RenderOutputGeneric = any> extends LitElement {
+export declare abstract class DeclarativeElement<TagNameGeneric extends CustomElementTagName = any, InputsGeneric extends PropertyInitMapBase = any, StateInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string, RenderOutputGeneric = any> extends LitElement {
     static readonly tagName: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string, unknown>['tagName'];
     static readonly styles: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string, unknown>['styles'];
     static readonly isStrictInstance: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string, unknown>['isStrictInstance'];
@@ -24,25 +24,25 @@ export declare abstract class DeclarativeElement<TagNameGeneric extends CustomEl
     static readonly hostClasses: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string, unknown>['hostClasses'];
     static readonly cssVarNames: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string, unknown>['cssVarNames'];
     static readonly cssVarValues: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string, unknown>['cssVarValues'];
-    abstract lastRenderedProps: Pick<RenderParams<any, InputsGeneric, StateInitMaybeAsyncGeneric, any, any, any>, 'inputs' | 'state'>;
+    abstract lastRenderedProps: Pick<RenderParams<any, InputsGeneric, StateInitGeneric, any, any, any>, 'inputs' | 'state'>;
     abstract render(): unknown;
-    abstract readonly instanceState: MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>;
-    abstract readonly asyncStateHandlerMap: AsyncStateHandlerMap<StateInitMaybeAsyncGeneric>;
-    abstract readonly instanceInputs: InputsGeneric;
+    abstract readonly instanceState: FlattenObservablePropertyGetters<StateInitGeneric>;
+    abstract readonly observablePropertyHandlerMap: ObservablePropertyHandlerMap<StateInitGeneric>;
+    abstract readonly instanceInputs: FlattenObservablePropertyGetters<InputsGeneric>;
     abstract assignInputs(inputs: {} extends Required<InputsGeneric> ? never : Partial<InputsGeneric>): void;
     abstract haveInputsBeenSet: boolean;
     abstract markInputsAsHavingBeenSet(): void;
-    abstract readonly definition: DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;
+    abstract readonly definition: DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;
 }
-export interface StaticDeclarativeElementProperties<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitMaybeAsyncGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string, RenderOutputGeneric> {
+export interface StaticDeclarativeElementProperties<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string, RenderOutputGeneric> {
     /** Pass through the render callback for direct unit testability */
-    readonly renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;
+    readonly renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
-    stateInit: ElementPropertyDescriptorMap<StateInitMaybeAsyncGeneric>;
-    init: RequiredBy<DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>, 'stateInit' | 'events'>;
-    inputsType: InputsGeneric;
-    stateType: MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>;
-    isStrictInstance: (element: unknown) => element is DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;
+    stateInit: ElementPropertyDescriptorMap<StateInitGeneric>;
+    init: RequiredBy<DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>, 'stateInit' | 'events'>;
+    inputsType: AllowObservablePropertySetter<InputsGeneric>;
+    stateType: FlattenObservablePropertyGetters<StateInitGeneric>;
+    isStrictInstance: (element: unknown) => element is DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;
     hostClasses: HostClassNamesMap<string, HostClassKeys>;
     cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
     cssVarValues: CssVarNameOrValueMap<CssVarKeys>;

package/dist/declarative-element/define-element-no-inputs.d.ts

@@ -2,4 +2,4 @@ import { DeclarativeElementDefinition } from './declarative-element';
 import { CustomElementTagName, DeclarativeElementInit } from './declarative-element-init';
 import { EventsInitMap } from './properties/element-events';
 import { PropertyInitMapBase } from './properties/element-properties';
-export declare function defineElementNoInputs<TagNameGeneric extends CustomElementTagName = '-', InputsGeneric extends PropertyInitMapBase = {}, StateInitMaybeAsyncGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = '', RenderOutputGeneric = any>(initInput: DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>): DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;
+export declare function defineElementNoInputs<TagNameGeneric extends CustomElementTagName = '-', InputsGeneric extends PropertyInitMapBase = {}, StateInitGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = '', RenderOutputGeneric = any>(initInput: DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>): DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>;

package/dist/declarative-element/define-element-no-inputs.js

@@ -113,7 +113,7 @@ export function defineElementNoInputs(initInput) {
                 this.haveInputsBeenSet = false;
                 // this is set below in Object.defineProperties
                 this.definition = {};
-                this.asyncStateHandlerMap = {};
+                this.observablePropertyHandlerMap = {};
                 this.instanceInputs = createElementUpdaterProxy(this, false);
                 this.instanceState = createElementUpdaterProxy(this, true);
                 const stateInit = initInput.stateInit ||

package/dist/declarative-element/directives/assign.directive.d.ts

@@ -1,7 +1,8 @@
 import { DirectiveResult } from 'lit/directive.js';
 import { PropertyInitMapBase } from '../properties/element-properties';
+import { AllowObservablePropertySetter } from '../properties/observable-property/observable-property-handler';
 export type ElementDefinitionWithInputsType<InputsType extends PropertyInitMapBase = PropertyInitMapBase> = {
-    inputsType: InputsType;
+    inputsType: AllowObservablePropertySetter<InputsType>;
 };
 /** Assign an object matching an element's inputs to its inputs. */
 export declare function assign<DeclarativeElementGeneric extends ElementDefinitionWithInputsType>(declarativeElement: DeclarativeElementGeneric, inputsObject: {} extends Required<DeclarativeElementGeneric['inputsType']> ? never : DeclarativeElementGeneric['inputsType']): DirectiveResult;

package/dist/declarative-element/directives/is-render-ready.directive.d.ts

@@ -0,0 +1,3 @@
+import { UnPromise } from '@augment-vir/common';
+import { AsyncState } from '../properties/async-state';
+export declare function isRenderReady<T>(asyncStateInput: AsyncState<T>): asyncStateInput is UnPromise<T>;

package/dist/declarative-element/directives/is-render-ready.directive.js

@@ -0,0 +1,12 @@
+import { isPromiseLike } from '@augment-vir/common';
+export function isRenderReady(asyncStateInput) {
+    if (asyncStateInput instanceof Error) {
+        return false;
+    }
+    else if (isPromiseLike(asyncStateInput)) {
+        return false;
+    }
+    else {
+        return true;
+    }
+}

package/dist/declarative-element/properties/async-state.d.ts

@@ -1,9 +1,8 @@
 import { JsonCompatibleValue, UnPromise } from '@augment-vir/common';
 import { PickAndBlockOthers } from '../../augments/type';
-import { PropertyInitMapBase } from './element-properties';
+import { ObservablePropertyHandler, observablePropertyHandlerMarkerKey, ObservablePropertyListener } from './observable-property/observable-property-handler';
 export type AsyncState<ValueGeneric> = Error | UnPromise<ValueGeneric> | Promise<UnPromise<ValueGeneric>>;
 declare const notSetSymbol: unique symbol;
-export declare function isRenderReady<T>(asyncStateInput: AsyncState<T>): asyncStateInput is UnPromise<T>;
 type AllSetValueProperties<ValueGeneric> = {
     /** Set a new value directly without using any promises. */
     resolvedValue: UnPromise<ValueGeneric>;
@@ -22,28 +21,19 @@ type AllSetValueProperties<ValueGeneric> = {
     forceUpdate: true;
 };
 export type AsyncStateSetValue<ValueGeneric> = PickAndBlockOthers<AllSetValueProperties<ValueGeneric>, 'createPromise' | 'trigger'> | PickAndBlockOthers<AllSetValueProperties<ValueGeneric>, 'newPromise'> | PickAndBlockOthers<AllSetValueProperties<ValueGeneric>, 'forceUpdate'> | PickAndBlockOthers<AllSetValueProperties<ValueGeneric>, 'resolvedValue'>;
-export type MaybeAsyncStateToSync<PropertyMapInit extends PropertyInitMapBase> = {
-    [Prop in keyof PropertyMapInit]: PropertyMapInit[Prop] extends AsyncStateHandler<infer ValueGeneric> | AsyncStateInit<infer ValueGeneric> ? AsyncState<ValueGeneric> : PropertyMapInit[Prop];
-};
-export type AsyncStateInputs<PropertyMapInit extends PropertyInitMapBase> = {
-    [Prop in keyof PropertyMapInit]: PropertyMapInit[Prop] extends AsyncStateHandler<infer ValueGeneric> | AsyncStateInit<infer ValueGeneric> ? AsyncStateSetValue<ValueGeneric> : PropertyMapInit[Prop];
-};
-export type AsyncStateHandlerMap<OriginalObjectGeneric extends PropertyInitMapBase> = Partial<Record<keyof OriginalObjectGeneric, AsyncStateHandler<any>>>;
-export type AsyncStateHandlerListener<ValueGeneric> = (handler: AsyncStateHandler<ValueGeneric>) => void;
-export declare class AsyncStateHandler<ValueGeneric> {
+export declare class AsyncObservablePropertyHandler<ValueGeneric> implements asyncObservablePropertyHandler<ValueGeneric> {
     #private;
-    readonly asyncMarkerSymbol: symbol;
-    constructor(initialValue: Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric | typeof notSetSymbol | AsyncStateInit<ValueGeneric>, listener: AsyncStateHandlerListener<ValueGeneric>);
-    resetValue(rawValue: Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric | typeof notSetSymbol | AsyncStateInit<ValueGeneric>): void;
+    [observablePropertyHandlerMarkerKey]: true;
+    constructor(initialValue: Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric | typeof notSetSymbol);
+    resetValue(rawValue: Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric | typeof notSetSymbol): void;
     setValue(setInputs: AsyncStateSetValue<ValueGeneric>): void;
     getValue(): AsyncState<ValueGeneric>;
-    addSettleListener(callback: AsyncStateHandlerListener<ValueGeneric>): void;
-    removeSettleListener(callback: AsyncStateHandlerListener<ValueGeneric>): void;
-}
-export declare class AsyncStateInit<ValueGeneric> {
-    readonly initialValue: Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric | typeof notSetSymbol;
-    constructor(initialValue: Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric | typeof notSetSymbol);
-    readonly asyncMarkerSymbol: symbol;
+    addListener(fireImmediately: boolean, listener: ObservablePropertyListener<AsyncState<ValueGeneric>>): void;
+    addMultipleListeners(listeners: ReadonlySet<ObservablePropertyListener<AsyncState<ValueGeneric>>>): void;
+    getAllListeners(): Set<ObservablePropertyListener<AsyncState<ValueGeneric>>>;
+    removeListener(listener: ObservablePropertyListener<AsyncState<ValueGeneric>>): boolean;
+    removeAllListeners(): number;
 }
-export declare function asyncState<ValueGeneric>(...args: [Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric] | []): AsyncStateInit<ValueGeneric>;
+export type asyncObservablePropertyHandler<ValueGeneric> = ObservablePropertyHandler<AsyncStateSetValue<ValueGeneric>, AsyncState<ValueGeneric>>;
+export declare function asyncState<ValueGeneric>(...args: [Promise<UnPromise<ValueGeneric>> | UnPromise<ValueGeneric> | ValueGeneric] | []): AsyncObservablePropertyHandler<ValueGeneric>;
 export {};

package/dist/declarative-element/properties/async-state.js

@@ -9,39 +9,24 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _AsyncStateHandler_instances, _AsyncStateHandler_lastTrigger, _AsyncStateHandler_resolutionValue, _AsyncStateHandler_rejectionError, _AsyncStateHandler_listeners, _AsyncStateHandler_lastSetPromise, _AsyncStateHandler_waitingForValuePromise, _AsyncStateHandler_fireListeners, _AsyncStateHandler_setPromise, _AsyncStateHandler_resolveValue, _AsyncStateHandler_resetWaitingForValuePromise;
-import { areJsonEqual, createDeferredPromiseWrapper, ensureError, isLengthAtLeast, isPromiseLike, } from '@augment-vir/common';
-const asyncMarkerSymbol = Symbol('element-vir-async-state-marker');
+var _AsyncObservablePropertyHandler_instances, _AsyncObservablePropertyHandler_lastTrigger, _AsyncObservablePropertyHandler_resolutionValue, _AsyncObservablePropertyHandler_rejectionError, _AsyncObservablePropertyHandler_listeners, _AsyncObservablePropertyHandler_lastSetPromise, _AsyncObservablePropertyHandler_waitingForValuePromise, _AsyncObservablePropertyHandler_fireListeners, _AsyncObservablePropertyHandler_setPromise, _AsyncObservablePropertyHandler_resolveValue, _AsyncObservablePropertyHandler_resetWaitingForValuePromise, _a;
+import { areJsonEqual, createDeferredPromiseWrapper, ensureError, isLengthAtLeast, } from '@augment-vir/common';
+import { observablePropertyHandlerMarkerKey, } from './observable-property/observable-property-handler';
 const notSetSymbol = Symbol('not set');
-export function isRenderReady(asyncStateInput) {
-    if (asyncStateInput instanceof Error) {
-        return false;
-    }
-    else if (isPromiseLike(asyncStateInput)) {
-        return false;
-    }
-    else {
-        return true;
-    }
-}
-export class AsyncStateHandler {
-    constructor(initialValue, listener) {
-        _AsyncStateHandler_instances.add(this);
-        _AsyncStateHandler_lastTrigger.set(this, notSetSymbol);
-        _AsyncStateHandler_resolutionValue.set(this, notSetSymbol);
-        _AsyncStateHandler_rejectionError.set(this, notSetSymbol);
-        _AsyncStateHandler_listeners.set(this, []);
-        _AsyncStateHandler_lastSetPromise.set(this, void 0);
-        _AsyncStateHandler_waitingForValuePromise.set(this, createDeferredPromiseWrapper());
-        this.asyncMarkerSymbol = asyncMarkerSymbol;
-        this.addSettleListener(listener);
+export class AsyncObservablePropertyHandler {
+    constructor(initialValue) {
+        _AsyncObservablePropertyHandler_instances.add(this);
+        _AsyncObservablePropertyHandler_lastTrigger.set(this, notSetSymbol);
+        _AsyncObservablePropertyHandler_resolutionValue.set(this, notSetSymbol);
+        _AsyncObservablePropertyHandler_rejectionError.set(this, notSetSymbol);
+        _AsyncObservablePropertyHandler_listeners.set(this, new Set());
+        _AsyncObservablePropertyHandler_lastSetPromise.set(this, void 0);
+        _AsyncObservablePropertyHandler_waitingForValuePromise.set(this, createDeferredPromiseWrapper());
+        this[_a] = true;
         this.resetValue(initialValue);
     }
     resetValue(rawValue) {
-        if (rawValue instanceof AsyncStateInit) {
-            rawValue = rawValue.initialValue;
-        }
-        __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_resetWaitingForValuePromise).call(this);
+        __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_resetWaitingForValuePromise).call(this);
         if (rawValue !== notSetSymbol) {
             if (rawValue instanceof Promise) {
                 this.setValue({ newPromise: rawValue });
@@ -53,115 +38,135 @@ export class AsyncStateHandler {
     }
     setValue(setInputs) {
         if ('createPromise' in setInputs) {
-            if (__classPrivateFieldGet(this, _AsyncStateHandler_lastTrigger, "f") === notSetSymbol ||
-                !areJsonEqual(setInputs.trigger, __classPrivateFieldGet(this, _AsyncStateHandler_lastTrigger, "f"))) {
-                __classPrivateFieldSet(this, _AsyncStateHandler_lastTrigger, setInputs.trigger, "f");
+            if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_lastTrigger, "f") === notSetSymbol ||
+                !areJsonEqual(setInputs.trigger, __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_lastTrigger, "f"))) {
+                __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_lastTrigger, setInputs.trigger, "f");
                 const newValue = setInputs.createPromise();
-                __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_setPromise).call(this, newValue);
+                __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_setPromise).call(this, newValue);
+                __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_fireListeners).call(this);
             }
         }
         else if ('newPromise' in setInputs) {
-            __classPrivateFieldGet(this, _AsyncStateHandler_lastTrigger, "f") === notSetSymbol;
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_setPromise).call(this, setInputs.newPromise);
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_lastTrigger, "f") === notSetSymbol;
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_setPromise).call(this, setInputs.newPromise);
             // force a re-render
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_fireListeners).call(this);
         }
         else if ('resolvedValue' in setInputs) {
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_resolveValue).call(this, setInputs.resolvedValue);
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_resolveValue).call(this, setInputs.resolvedValue);
         }
         else if ('forceUpdate' in setInputs) {
-            __classPrivateFieldSet(this, _AsyncStateHandler_lastTrigger, notSetSymbol, "f");
-            __classPrivateFieldSet(this, _AsyncStateHandler_resolutionValue, notSetSymbol, "f");
-            if (!__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
-                __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").reject('Canceled by force update');
+            __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_lastTrigger, notSetSymbol, "f");
+            __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_resolutionValue, notSetSymbol, "f");
+            if (!__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").isSettled()) {
+                __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").reject('Canceled by force update');
             }
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_resetWaitingForValuePromise).call(this);
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_resetWaitingForValuePromise).call(this);
             // force a re-render
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_fireListeners).call(this);
         }
         else {
             this.resetValue(setInputs);
         }
     }
     getValue() {
-        if (__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
-            if (__classPrivateFieldGet(this, _AsyncStateHandler_rejectionError, "f") !== notSetSymbol) {
-                return __classPrivateFieldGet(this, _AsyncStateHandler_rejectionError, "f");
+        if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").isSettled()) {
+            if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_rejectionError, "f") !== notSetSymbol) {
+                return __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_rejectionError, "f");
             }
-            else if (__classPrivateFieldGet(this, _AsyncStateHandler_resolutionValue, "f") === notSetSymbol) {
+            else if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_resolutionValue, "f") === notSetSymbol) {
                 throw new Error('Promise says it has settled but resolution value was not set!');
             }
             else {
-                return __classPrivateFieldGet(this, _AsyncStateHandler_resolutionValue, "f");
+                return __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_resolutionValue, "f");
             }
         }
         else {
-            return __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").promise;
+            return __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").promise;
+        }
+    }
+    addListener(fireImmediately, listener) {
+        __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f").add(listener);
+        if (fireImmediately) {
+            listener(this.getValue());
         }
     }
-    addSettleListener(callback) {
-        __classPrivateFieldGet(this, _AsyncStateHandler_listeners, "f").push(callback);
+    addMultipleListeners(listeners) {
+        listeners.forEach((listener) => __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f").add(listener));
     }
-    removeSettleListener(callback) {
-        __classPrivateFieldSet(this, _AsyncStateHandler_listeners, __classPrivateFieldGet(this, _AsyncStateHandler_listeners, "f").filter((listener) => listener !== callback), "f");
+    getAllListeners() {
+        return __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f");
+    }
+    removeListener(listener) {
+        if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f").has(listener)) {
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f").delete(listener);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    removeAllListeners() {
+        const count = __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f").size;
+        __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f").clear();
+        return count;
     }
 }
-_AsyncStateHandler_lastTrigger = new WeakMap(), _AsyncStateHandler_resolutionValue = new WeakMap(), _AsyncStateHandler_rejectionError = new WeakMap(), _AsyncStateHandler_listeners = new WeakMap(), _AsyncStateHandler_lastSetPromise = new WeakMap(), _AsyncStateHandler_waitingForValuePromise = new WeakMap(), _AsyncStateHandler_instances = new WeakSet(), _AsyncStateHandler_fireListeners = function _AsyncStateHandler_fireListeners() {
-    __classPrivateFieldGet(this, _AsyncStateHandler_listeners, "f").forEach((listener) => {
-        listener(this);
+_AsyncObservablePropertyHandler_lastTrigger = new WeakMap(), _AsyncObservablePropertyHandler_resolutionValue = new WeakMap(), _AsyncObservablePropertyHandler_rejectionError = new WeakMap(), _AsyncObservablePropertyHandler_listeners = new WeakMap(), _AsyncObservablePropertyHandler_lastSetPromise = new WeakMap(), _AsyncObservablePropertyHandler_waitingForValuePromise = new WeakMap(), _AsyncObservablePropertyHandler_instances = new WeakSet(), _a = observablePropertyHandlerMarkerKey, _AsyncObservablePropertyHandler_fireListeners = function _AsyncObservablePropertyHandler_fireListeners() {
+    const value = this.getValue();
+    __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_listeners, "f").forEach((listener) => {
+        listener(value);
     });
-}, _AsyncStateHandler_setPromise = function _AsyncStateHandler_setPromise(newPromise) {
-    if (newPromise === __classPrivateFieldGet(this, _AsyncStateHandler_lastSetPromise, "f")) {
+}, _AsyncObservablePropertyHandler_setPromise = function _AsyncObservablePropertyHandler_setPromise(newPromise) {
+    if (newPromise === __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_lastSetPromise, "f")) {
         // abort setting the promise if we already have set this promise
         return;
     }
-    __classPrivateFieldSet(this, _AsyncStateHandler_resolutionValue, notSetSymbol, "f");
-    __classPrivateFieldSet(this, _AsyncStateHandler_rejectionError, notSetSymbol, "f");
-    __classPrivateFieldSet(this, _AsyncStateHandler_lastSetPromise, newPromise, "f");
-    if (__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
-        __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_resetWaitingForValuePromise).call(this);
+    __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_resolutionValue, notSetSymbol, "f");
+    __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_rejectionError, notSetSymbol, "f");
+    __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_lastSetPromise, newPromise, "f");
+    if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").isSettled()) {
+        __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_resetWaitingForValuePromise).call(this);
     }
     newPromise
         .then((value) => {
         // make sure we're still actually waiting for this promise
-        if (__classPrivateFieldGet(this, _AsyncStateHandler_lastSetPromise, "f") === newPromise) {
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_resolveValue).call(this, value);
+        if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_lastSetPromise, "f") === newPromise) {
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_resolveValue).call(this, value);
         }
     })
         .catch((reason) => {
         // make sure we're still actually waiting for this promise
-        if (__classPrivateFieldGet(this, _AsyncStateHandler_lastSetPromise, "f") === newPromise) {
-            __classPrivateFieldSet(this, _AsyncStateHandler_rejectionError, ensureError(reason), "f");
-            __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").promise.catch(() => {
+        if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_lastSetPromise, "f") === newPromise) {
+            __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_rejectionError, ensureError(reason), "f");
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").promise.catch(() => {
                 /**
                  * Don't actually do anything, we just want to make sure the error is
                  * handled so it doesn't throw errors in the browser.
                  */
             });
-            __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").reject(reason);
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").reject(reason);
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_fireListeners).call(this);
         }
     });
-}, _AsyncStateHandler_resolveValue = function _AsyncStateHandler_resolveValue(value) {
-    if (value !== __classPrivateFieldGet(this, _AsyncStateHandler_resolutionValue, "f")) {
-        __classPrivateFieldSet(this, _AsyncStateHandler_rejectionError, notSetSymbol, "f");
-        __classPrivateFieldSet(this, _AsyncStateHandler_resolutionValue, value, "f");
-        if (__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_resetWaitingForValuePromise).call(this);
+}, _AsyncObservablePropertyHandler_resolveValue = function _AsyncObservablePropertyHandler_resolveValue(value) {
+    if (value !== __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_resolutionValue, "f")) {
+        __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_rejectionError, notSetSymbol, "f");
+        __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_resolutionValue, value, "f");
+        if (__classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").isSettled()) {
+            __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_resetWaitingForValuePromise).call(this);
         }
-        __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").resolve(value);
-        __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
+        __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, "f").resolve(value);
+        __classPrivateFieldGet(this, _AsyncObservablePropertyHandler_instances, "m", _AsyncObservablePropertyHandler_fireListeners).call(this);
     }
-}, _AsyncStateHandler_resetWaitingForValuePromise = function _AsyncStateHandler_resetWaitingForValuePromise() {
-    __classPrivateFieldSet(this, _AsyncStateHandler_waitingForValuePromise, createDeferredPromiseWrapper(), "f");
+}, _AsyncObservablePropertyHandler_resetWaitingForValuePromise = function _AsyncObservablePropertyHandler_resetWaitingForValuePromise() {
+    __classPrivateFieldSet(this, _AsyncObservablePropertyHandler_waitingForValuePromise, createDeferredPromiseWrapper(), "f");
 };
-export class AsyncStateInit {
-    constructor(initialValue) {
-        this.initialValue = initialValue;
-        this.asyncMarkerSymbol = asyncMarkerSymbol;
-    }
-}
 export function asyncState(...args) {
+    /**
+     * Distinguish between an explicitly passed value of undefined or simply a lack of any arguments
+     * at all.
+     */
     const initValue = isLengthAtLeast(args, 1) ? args[0] : notSetSymbol;
-    return new AsyncStateInit(initValue);
+    return new AsyncObservablePropertyHandler(initValue);
 }

package/dist/declarative-element/properties/element-updater-proxy.js

@@ -1,4 +1,4 @@
-import { AsyncStateHandler, AsyncStateInit } from './async-state';
+import { isObservablePropertyHandler } from './observable-property/observable-property-handler';
 function assertValidPropertyName(propKey, element, elementTagName) {
     if (typeof propKey !== 'string' && typeof propKey !== 'number' && typeof propKey !== 'symbol') {
         throw new Error(`Property name must be a string, got type '${typeof propKey}' from: '${String(propKey)}' for '${elementTagName.toLowerCase()}'`);
@@ -18,13 +18,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
         if (verifyExists) {
             assertValidPropertyName(propertyKey, element, element.tagName);
         }
-        const asyncState = element.asyncStateHandlerMap[propertyKey];
-        if (asyncState) {
-            return asyncState.getValue();
-        }
-        else {
-            return elementAsProps[propertyKey];
-        }
+        return elementAsProps[propertyKey];
     }
     const propsProxy = new Proxy({}, {
         get: valueGetter,
@@ -32,33 +26,37 @@ export function createElementUpdaterProxy(element, verifyExists) {
             if (verifyExists) {
                 assertValidPropertyName(propertyKey, element, element.tagName);
             }
-            /**
-             * We need to at least set the property on target so we can detect it in "ownKeys" and
-             * "getOwnPropertyDescriptor". We don't need duplicates of the values stored in target
-             * but doing so makes console logging more effective it actually works).
-             */
-            target[propertyKey] = newValue;
-            const existingAsyncStateHandler = element.asyncStateHandlerMap[propertyKey];
-            // if we're creating a new async prop
-            if (newValue instanceof AsyncStateInit) {
-                if (existingAsyncStateHandler) {
-                    existingAsyncStateHandler.resetValue(newValue);
+            const existingObservablePropertyHandler = element.observablePropertyHandlerMap[propertyKey];
+            function setValueOnElement(value) {
+                /**
+                 * We need to at least set the property on target so we can detect it in "ownKeys"
+                 * and "getOwnPropertyDescriptor". We don't need duplicates of the values stored in
+                 * target but doing so makes console logging more effective it actually works).
+                 */
+                target[propertyKey] = value;
+                elementAsProps[propertyKey] = value;
+            }
+            /** If we're creating a new observable property */
+            if (isObservablePropertyHandler(newValue)) {
+                if (existingObservablePropertyHandler &&
+                    newValue !== existingObservablePropertyHandler) {
+                    newValue.addMultipleListeners(existingObservablePropertyHandler.getAllListeners());
+                    /** Remove listeners from old property handlers so they can be garbage collected. */
+                    existingObservablePropertyHandler.removeAllListeners();
                 }
                 else {
-                    const newHandler = new AsyncStateHandler(newValue, (handler) => {
-                        // set the prop directly on the element so that lit catches updates
-                        element[propertyKey] =
-                            handler.getValue();
+                    newValue.addListener(true, (newObservableValue) => {
+                        setValueOnElement(newObservableValue);
                     });
-                    element.asyncStateHandlerMap[propertyKey] = newHandler;
                 }
+                element.observablePropertyHandlerMap[propertyKey] = newValue;
             }
             else {
-                if (existingAsyncStateHandler) {
-                    existingAsyncStateHandler.setValue(newValue);
+                if (existingObservablePropertyHandler) {
+                    existingObservablePropertyHandler.setValue(newValue);
                 }
                 else {
-                    elementAsProps[propertyKey] = newValue;
+                    setValueOnElement(newValue);
                 }
             }
             return true;

package/dist/declarative-element/properties/observable-property/create-observable-property.d.ts

@@ -0,0 +1,2 @@
+import { ObservablePropertyHandler } from './observable-property-handler';
+export declare function createObservableProperty<ValueType>(initValue: ValueType): ObservablePropertyHandler<ValueType, ValueType>;

package/dist/declarative-element/properties/observable-property/create-observable-property.js

@@ -0,0 +1,41 @@
+import { observablePropertyHandlerMarkerKey, } from './observable-property-handler';
+export function createObservableProperty(initValue) {
+    const listeners = new Set();
+    let value = initValue;
+    function fireListeners() {
+        listeners.forEach((listener) => listener(value));
+    }
+    const propertyHandler = {
+        [observablePropertyHandlerMarkerKey]: true,
+        setValue(newValue) {
+            if (value !== newValue) {
+                value = newValue;
+                fireListeners();
+            }
+        },
+        getValue() {
+            return value;
+        },
+        addListener(fireImmediately, listener) {
+            listeners.add(listener);
+            if (fireImmediately) {
+                listener(value);
+            }
+        },
+        removeListener(listener) {
+            return listeners.delete(listener);
+        },
+        removeAllListeners() {
+            const size = listeners.size;
+            listeners.clear();
+            return size;
+        },
+        getAllListeners() {
+            return listeners;
+        },
+        addMultipleListeners(newListeners) {
+            newListeners.forEach((listener) => listeners.add(listener));
+        },
+    };
+    return propertyHandler;
+}

package/dist/declarative-element/properties/observable-property/observable-property-handler.d.ts

@@ -0,0 +1,34 @@
+import { PropertyInitMapBase } from '../element-properties';
+export declare const observablePropertyHandlerMarkerKey: "_is_element_vir_observable_property_handler";
+export type ObservablePropertyListener<T> = (value: T) => void;
+export type ObservablePropertyHandlerMap<OriginalPropertyMap extends PropertyInitMapBase> = Partial<Record<keyof OriginalPropertyMap, ObservablePropertyHandler<any, any>>>;
+export type AllowObservablePropertySetter<OriginalPropertyMap extends PropertyInitMapBase> = {
+    [Prop in keyof OriginalPropertyMap]: OriginalPropertyMap[Prop] | ObservablePropertyHandler<any, Required<OriginalPropertyMap>[Prop]>;
+};
+export type FlattenObservablePropertyGetters<OriginalPropertyMap extends PropertyInitMapBase> = {
+    [Prop in keyof OriginalPropertyMap]: OriginalPropertyMap[Prop] extends ObservablePropertyHandler<infer SetValue, infer GetValue> ? GetValue : OriginalPropertyMap[Prop];
+};
+export type FlattenObservablePropertySetters<OriginalPropertyMap extends PropertyInitMapBase> = {
+    [Prop in keyof OriginalPropertyMap]: OriginalPropertyMap[Prop] extends ObservablePropertyHandler<infer SetValue, infer GetValue> ? SetValue : OriginalPropertyMap[Prop];
+};
+export type ObservablePropertyHandler<SetValue, GetValue> = {
+    [observablePropertyHandlerMarkerKey]: true;
+    setValue(input: SetValue): void;
+    getValue(): GetValue;
+    /** Add the given listener. */
+    addListener(fireImmediately: boolean, listener: ObservablePropertyListener<GetValue>): void;
+    /**
+     * Remove the given listener by reference. If the listener indeed existed and was removed, this
+     * function will return true. Otherwise, it returns false.
+     */
+    removeListener(listener: ObservablePropertyListener<GetValue>): boolean;
+    /** Remove all previously added listeners. Returns the number of listeners removed. */
+    removeAllListeners(): number;
+    /**
+     * Get all currently attached listeners. This is used to attach listeners when a new handler
+     * needs to replace the current handler.
+     */
+    getAllListeners(): ReadonlySet<ObservablePropertyListener<GetValue>>;
+    addMultipleListeners(listeners: ReadonlySet<ObservablePropertyListener<GetValue>>): void;
+};
+export declare function isObservablePropertyHandler(input: unknown): input is ObservablePropertyHandler<any, any>;

package/dist/declarative-element/properties/observable-property/observable-property-handler.js

@@ -0,0 +1,6 @@
+import { typedHasProperty } from '@augment-vir/common';
+export const observablePropertyHandlerMarkerKey = '_is_element_vir_observable_property_handler';
+export function isObservablePropertyHandler(input) {
+    return (typedHasProperty(input, observablePropertyHandlerMarkerKey) &&
+        input[observablePropertyHandlerMarkerKey] === true);
+}

package/dist/declarative-element/render-callback.d.ts

@@ -1,18 +1,18 @@
 import { TypedEvent } from '../typed-event/typed-event';
 import { DeclarativeElement, HostInstanceType } from './declarative-element';
 import { CustomElementTagName } from './declarative-element-init';
-import { AsyncStateInputs, MaybeAsyncStateToSync } from './properties/async-state';
 import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './properties/element-events';
 import { PropertyInitMapBase } from './properties/element-properties';
+import { FlattenObservablePropertyGetters, FlattenObservablePropertySetters } from './properties/observable-property/observable-property-handler';
 export type RenderCallback<TagNameGeneric extends CustomElementTagName = any, InputsGeneric extends PropertyInitMapBase = any, StateGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = any, CssVarKeys extends string = any, RenderOutputGeneric = any> = (params: RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => RenderOutputGeneric;
 export type InitCallback<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = (params: RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => void;
-export type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<AsyncStateInputs<StateGeneric>>) => void;
+export type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<FlattenObservablePropertySetters<StateGeneric>>) => void;
 export type RenderParams<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
-    state: Readonly<MaybeAsyncStateToSync<StateInitGeneric>>;
+    state: Readonly<FlattenObservablePropertyGetters<StateInitGeneric>>;
     updateState: UpdateStateCallback<StateInitGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
     host: HostInstanceType<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
     dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>> | Event) => boolean;
-    inputs: InputsGeneric;
+    inputs: Readonly<FlattenObservablePropertyGetters<InputsGeneric>>;
 };
 export declare function createRenderParams<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string, RenderOutputGeneric>(element: DeclarativeElement<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys, RenderOutputGeneric>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export type { DeclarativeElementDefinitionOptions } from './declarative-element/
 export * from './declarative-element/directives/assign-with-clean-up.directive';
 export * from './declarative-element/directives/assign.directive';
 export * from './declarative-element/directives/directive-helpers';
+export * from './declarative-element/directives/is-render-ready.directive';
 export * from './declarative-element/directives/listen.directive';
 export * from './declarative-element/directives/on-dom-created.directive';
 export * from './declarative-element/directives/on-resize.directive';

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './declarative-element/define-element-no-inputs';
 export * from './declarative-element/directives/assign-with-clean-up.directive';
 export * from './declarative-element/directives/assign.directive';
 export * from './declarative-element/directives/directive-helpers';
+export * from './declarative-element/directives/is-render-ready.directive';
 export * from './declarative-element/directives/listen.directive';
 export * from './declarative-element/directives/on-dom-created.directive';
 export * from './declarative-element/directives/on-resize.directive';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "12.3.1",
+    "version": "12.4.0",
     "keywords": [
         "custom",
         "web",