element-vir 8.0.2 → 9.0.0

package/README.md

@@ -596,16 +596,18 @@ export const MyWithRenderIfElement = defineElement<{shouldRender: boolean}>()({
 });
 ```
 
-### renderAsyncProp
+### asyncState
 
-Use the `renderAsyncProp` directive in conjunction with the `asyncProp` property definer and the `ensureAsyncProp` render callback property to seamlessly render and update element state:
+Use the `renderAsyncState` directive in conjunction with the `asyncState` property definer to seamlessly render and update element state based on async values:
 
 <!-- example-link: src/readme-examples/my-with-async-prop.element.ts -->
 
 ```TypeScript
-import {asyncProp, defineElement, html, renderAsyncProp} from 'element-vir';
+import {asyncState, defineElement, html, listen, renderAsyncState} from 'element-vir';
 
-async function loadSomething(endpoint: string) {
+type EndpointData = number[];
+
+async function loadSomething(endpoint: string): Promise<EndpointData> {
     // load something from the network
     const data = await (
         await fetch(
@@ -619,35 +621,44 @@ async function loadSomething(endpoint: string) {
     return data;
 }
 
-export const MyWithAsyncPropElement = defineElement<{endpointToHit: string}>()({
+export const MyWithAsyncStateElement = defineElement<{endpoint: string}>()({
     tagName: 'my-simple-with-render-if',
     stateInit: {
-        data: asyncProp(),
+        data: asyncState<EndpointData>(),
     },
-    renderCallback: ({inputs, state, ensureAsyncProp}) => {
+    renderCallback: ({inputs, state, updateState}) => {
         /**
          * This creates a promise which automatically updates the state.loadsLater prop once the
-         * promise resolves.
+         * promise resolves. It only creates a new promise if the "trigger" value changes.
          */
-        ensureAsyncProp({
+        updateState({
             data: {
-                createPromise: () => loadSomething(inputs.endpointToHit),
-                updateIfThisChanges: inputs.endpointToHit,
+                createPromise: () => loadSomething(inputs.endpoint),
+                trigger: inputs.endpoint,
             },
         });
 
         return html`
             Here's the data:
             <br />
-            ${renderAsyncProp({
-                asyncProp: state.data,
-                fallback: 'Loading...',
-                resolutionRender: (loadedData) => {
-                    return html`
-                        Got the data: ${loadedData}
-                    `;
-                },
+            ${renderAsyncState(state.data, 'Loading...', (loadedData) => {
+                return html`
+                    Got the data: ${loadedData}
+                `;
             })}
+            <br />
+            <button
+                ${listen('click', () => {
+                    updateState({
+                        data: {
+                            /** You can force asyncState to update by passing in forceUpdate: true. */
+                            forceUpdate: true,
+                        },
+                    });
+                })}
+            >
+                Refresh
+            </button>
         `;
     },
 });

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

@@ -1,5 +1,6 @@
 import { CSSResult } from 'lit';
 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';
@@ -7,7 +8,7 @@ import { HostClassesInitMap } from './properties/host-classes';
 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, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string> = {
+export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitMaybeAsyncGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
@@ -16,7 +17,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?: StateInitGeneric;
+    stateInit?: StateInitMaybeAsyncGeneric;
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */
     events?: EventsInitGeneric;
     /**
@@ -24,7 +25,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, StateInitGeneric>;
+    hostClasses?: HostClassesInitMap<HostClassKeysGeneric, InputsGeneric, MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>>;
     /**
      * 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
@@ -37,9 +38,9 @@ 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, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
-    renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
-    cleanupCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    initCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    cleanupCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };
 //# sourceMappingURL=declarative-element-init.d.ts.map

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

@@ -1,16 +1,17 @@
 import { RequiredAndNotNullBy, RequiredBy } from '@augment-vir/common';
 import { CSSResult, LitElement } from 'lit';
 import { CustomElementTagName, DeclarativeElementInit } from './declarative-element-init';
+import { AsyncStateProperties, 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 { RenderCallback, RenderOutput } from './render-callback';
-export type HostInstanceType<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = RequiredAndNotNullBy<DeclarativeElement<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, '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> = (new () => HostInstanceType<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys> & {
-    instanceType: HostInstanceType<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+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>, '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> = (new () => HostInstanceType<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys> & {
+    instanceType: HostInstanceType<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 };
-export declare abstract class DeclarativeElement<TagNameGeneric extends CustomElementTagName = CustomElementTagName, InputsGeneric extends PropertyInitMapBase = any, StateInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> extends LitElement {
+export declare abstract class DeclarativeElement<TagNameGeneric extends CustomElementTagName = CustomElementTagName, InputsGeneric extends PropertyInitMapBase = any, StateInitMaybeAsyncGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> extends LitElement {
     static readonly tagName: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['tagName'];
     static readonly styles: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['styles'];
     static readonly isStrictInstance: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['isStrictInstance'];
@@ -24,22 +25,23 @@ export declare abstract class DeclarativeElement<TagNameGeneric extends CustomEl
     static readonly cssVarNames: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarNames'];
     static readonly cssVarValues: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarValues'];
     abstract render(): RenderOutput;
-    abstract readonly instanceState: StateInitGeneric;
+    abstract readonly instanceState: MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>;
+    abstract readonly asyncStateProperties: AsyncStateProperties<keyof StateInitMaybeAsyncGeneric>;
     abstract readonly instanceInputs: InputsGeneric;
     abstract assignInputs(inputs: InputsGeneric): void;
     abstract readonly haveInputsBeenSet: boolean;
     abstract markInputsAsHavingBeenSet(): void;
-    abstract readonly definition: DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    abstract readonly definition: DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 }
-export interface StaticDeclarativeElementProperties<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> {
+export interface StaticDeclarativeElementProperties<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitMaybeAsyncGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> {
     /** Pass through the render callback for direct unit testability */
-    readonly renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    readonly renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
     events: EventDescriptorMap<EventsInitGeneric>;
-    stateInit: ElementPropertyDescriptorMap<StateInitGeneric>;
-    init: RequiredBy<DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'stateInit' | 'events'>;
+    stateInit: ElementPropertyDescriptorMap<StateInitMaybeAsyncGeneric>;
+    init: RequiredBy<DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'stateInit' | 'events'>;
     inputsType: InputsGeneric;
-    stateType: StateInitGeneric;
-    isStrictInstance: (element: unknown) => element is DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    stateType: MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>;
+    isStrictInstance: (element: unknown) => element is DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
     hostClasses: HostClassNamesMap<string, HostClassKeys>;
     cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
     cssVarValues: CssVarNameOrValueMap<CssVarKeys>;

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

@@ -2,5 +2,5 @@ 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 = {}, StateInitGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = ''>(initInput: DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+export declare function defineElementNoInputs<TagNameGeneric extends CustomElementTagName = '-', InputsGeneric extends PropertyInitMapBase = {}, MaybeAsyncStateInitGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = ''>(initInput: DeclarativeElementInit<TagNameGeneric, InputsGeneric, MaybeAsyncStateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, MaybeAsyncStateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 //# sourceMappingURL=define-element-no-inputs.d.ts.map

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

@@ -6,6 +6,7 @@ import { DeclarativeElement, } from './declarative-element';
 import { defaultDeclarativeElementDefinitionOptions, IgnoreInputsNotBeenSetBeforeRenderWarningSymbol, } from './definition-options';
 import { assign } from './directives/assign.directive';
 import { hasDeclarativeElementParent } from './has-declarative-element-parent';
+import { mapToAsyncStateProperties, } from './properties/async-state';
 import { createCssVarNamesMap, createCssVarValuesMap } from './properties/css-vars';
 import { createEventDescriptorMap } from './properties/element-events';
 import { createElementUpdaterProxy } from './properties/element-updater-proxy';
@@ -26,6 +27,7 @@ export function defineElementNoInputs(initInput) {
         ? initInput.styles(hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues }))
         : initInput.styles || css ``;
     const typedRenderCallback = initInput.renderCallback;
+    const asyncStateProperties = mapToAsyncStateProperties(initInput.stateInit);
     const anonymousClass = (_a = class extends DeclarativeElement {
             createRenderParams() {
                 return createRenderParams(this, eventsMap);
@@ -89,12 +91,24 @@ export function defineElementNoInputs(initInput) {
                 this.haveInputsBeenSet = false;
                 // this is set below in Object.defineProperties
                 this.definition = {};
+                this.asyncStateProperties = asyncStateProperties;
                 this.instanceInputs = createElementUpdaterProxy(this, false);
                 this.instanceState = createElementUpdaterProxy(this, true);
-                const stateInit = initInput.stateInit || {};
-                Object.keys(stateInit).forEach((propName) => {
-                    property()(this, propName);
-                    this.instanceState[propName] = stateInit[propName];
+                const stateInit = initInput.stateInit ||
+                    {};
+                getObjectTypedKeys(stateInit).forEach((stateKey) => {
+                    property()(this, stateKey);
+                    const asyncStateClassInstance = asyncStateProperties[stateKey];
+                    if (asyncStateClassInstance) {
+                        this.instanceState[stateKey] = asyncStateClassInstance.getValue();
+                        asyncStateClassInstance.addSettleListener(() => {
+                            this[stateKey] =
+                                asyncStateClassInstance.getValue();
+                        });
+                    }
+                    else {
+                        this.instanceState[stateKey] = stateInit[stateKey];
+                    }
                 });
                 this.definition = anonymousClass;
             }
@@ -129,7 +143,7 @@ export function defineElementNoInputs(initInput) {
         },
     });
     if (window.customElements.get(initInput.tagName)) {
-        console.warn(`Tried to define custom element ${initInput.tagName} but it is already defined.`);
+        console.warn(`Tried to define custom element '${initInput.tagName}' but it is already defined.`);
     }
     else {
         window.customElements.define(initInput.tagName, anonymousClass);

package/dist/declarative-element/directives/render-async-state.directive.d.ts

@@ -0,0 +1,6 @@
+import { UnPromise } from '@augment-vir/common';
+import { AsyncState } from '../properties/async-state';
+export declare function renderAsyncState<T>(asyncState: AsyncState<T>, 
+/** This value will be rendered if the async state has not settled yet. */
+fallback: unknown, resolutionRender?: ((resolved: UnPromise<T>) => unknown) | undefined, errorRender?: ((error: Error) => unknown) | undefined): unknown;
+//# sourceMappingURL=render-async-state.directive.d.ts.map

package/dist/declarative-element/directives/render-async-state.directive.js

@@ -0,0 +1,14 @@
+import { extractErrorMessage, isPromiseLike } from '@augment-vir/common';
+export function renderAsyncState(asyncState, 
+/** This value will be rendered if the async state has not settled yet. */
+fallback, resolutionRender, errorRender) {
+    if (asyncState instanceof Error) {
+        return errorRender ? errorRender(asyncState) : extractErrorMessage(asyncState);
+    }
+    else if (isPromiseLike(asyncState)) {
+        return fallback;
+    }
+    else {
+        return resolutionRender ? resolutionRender(asyncState) : asyncState;
+    }
+}

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

@@ -0,0 +1,50 @@
+import { UnPromise } from '@augment-vir/common';
+import { JsonValue, Promisable } from 'type-fest';
+import { PropertyInitMapBase } from './element-properties';
+export type AsyncState<ValueGeneric> = Error | Promisable<UnPromise<ValueGeneric>>;
+export type AsyncStateSetValue<ValueGeneric> = {
+    createPromise: () => Promise<UnPromise<ValueGeneric>>;
+    /**
+     * When trigger changes (according to deep equality checking through JSON stringify), the
+     * createPromise callback will be called and the element's state will be updated again.
+     * Otherwise, the createPromise callback will only be called the first time.
+     *
+     * Set this to undefined to disabled automatic updating. Meaning, createPromise will only
+     * be called the first time.
+     */
+    trigger: JsonValue | Readonly<JsonValue> | undefined;
+    newPromise?: never;
+    forceUpdate?: never;
+} | {
+    createPromise?: never;
+    trigger?: never;
+    forceUpdate?: never;
+    newPromise: Promise<UnPromise<ValueGeneric>>;
+} | {
+    createPromise?: never;
+    trigger?: never;
+    newPromise?: never;
+    /**
+     * Clear the current value and trigger createPromise to get called again on the next
+     * render.
+     */
+    forceUpdate: true;
+};
+export type MaybeAsyncStateToSync<PropertyMapInit extends PropertyInitMapBase> = {
+    [Prop in keyof PropertyMapInit]: PropertyMapInit[Prop] extends AsyncStateHandler<infer ValueGeneric> ? AsyncState<ValueGeneric> : PropertyMapInit[Prop];
+};
+export type AsyncStateInputs<PropertyMapInit extends PropertyInitMapBase> = {
+    [Prop in keyof PropertyMapInit]: PropertyMapInit[Prop] extends AsyncStateHandler<infer ValueGeneric> ? AsyncStateSetValue<ValueGeneric> : PropertyMapInit[Prop];
+};
+export type AsyncStateProperties<KeysGeneric extends keyof PropertyInitMapBase> = Partial<Record<KeysGeneric, AsyncStateHandler<any>>>;
+export declare function mapToAsyncStateProperties(propertyInitMap?: PropertyInitMapBase | undefined): AsyncStateProperties<keyof PropertyInitMapBase>;
+export declare class AsyncStateHandler<ValueGeneric> {
+    #private;
+    constructor(initialValue: Promise<UnPromise<ValueGeneric>> | undefined);
+    setValue(setInputs: AsyncStateSetValue<ValueGeneric>): void;
+    getValue(): AsyncState<ValueGeneric>;
+    addSettleListener(callback: () => void): void;
+    removeSettleListener(callback: (value: AsyncState<ValueGeneric>) => void): void;
+}
+export declare function asyncState<ValueGeneric>(initialValue?: Promise<UnPromise<ValueGeneric>> | undefined): AsyncStateHandler<ValueGeneric>;
+//# sourceMappingURL=async-state.d.ts.map

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

@@ -0,0 +1,124 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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;
+import { areJsonEqual, createDeferredPromiseWrapper, ensureError, filterObject, } from '@augment-vir/common';
+export function mapToAsyncStateProperties(propertyInitMap) {
+    if (!propertyInitMap) {
+        return {};
+    }
+    const asyncStateProperties = filterObject(propertyInitMap, (key, value) => {
+        return value instanceof AsyncStateHandler;
+    });
+    return asyncStateProperties;
+}
+const notSetSymbol = Symbol('not set');
+export class AsyncStateHandler {
+    constructor(initialValue) {
+        _AsyncStateHandler_instances.add(this);
+        _AsyncStateHandler_lastTrigger.set(this, notSetSymbol);
+        _AsyncStateHandler_resolutionValue.set(this, void 0);
+        _AsyncStateHandler_rejectionError.set(this, void 0);
+        _AsyncStateHandler_listeners.set(this, []);
+        _AsyncStateHandler_lastSetPromise.set(this, void 0);
+        _AsyncStateHandler_waitingForValuePromise.set(this, createDeferredPromiseWrapper());
+        if (initialValue) {
+            this.setValue({ newPromise: initialValue });
+        }
+    }
+    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");
+                const newValue = setInputs.createPromise();
+                __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_setPromise).call(this, newValue);
+            }
+        }
+        else if ('newPromise' in setInputs) {
+            __classPrivateFieldGet(this, _AsyncStateHandler_lastTrigger, "f") === notSetSymbol;
+            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_setPromise).call(this, setInputs.newPromise);
+            // force a re-render
+            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
+        }
+        else {
+            if (setInputs.forceUpdate) {
+                __classPrivateFieldSet(this, _AsyncStateHandler_lastTrigger, notSetSymbol, "f");
+                __classPrivateFieldSet(this, _AsyncStateHandler_resolutionValue, undefined, "f");
+                if (!__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
+                    __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").reject('Canceled by force update');
+                }
+                __classPrivateFieldSet(this, _AsyncStateHandler_waitingForValuePromise, createDeferredPromiseWrapper(), "f");
+                // force a re-render
+                __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
+            }
+        }
+    }
+    getValue() {
+        if (__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
+            if (__classPrivateFieldGet(this, _AsyncStateHandler_rejectionError, "f")) {
+                return __classPrivateFieldGet(this, _AsyncStateHandler_rejectionError, "f");
+            }
+            else
+                return __classPrivateFieldGet(this, _AsyncStateHandler_resolutionValue, "f");
+        }
+        else {
+            return __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").promise;
+        }
+    }
+    addSettleListener(callback) {
+        __classPrivateFieldGet(this, _AsyncStateHandler_listeners, "f").push(callback);
+    }
+    removeSettleListener(callback) {
+        __classPrivateFieldSet(this, _AsyncStateHandler_listeners, __classPrivateFieldGet(this, _AsyncStateHandler_listeners, "f").filter((listener) => listener !== callback), "f");
+    }
+}
+_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();
+    });
+}, _AsyncStateHandler_setPromise = function _AsyncStateHandler_setPromise(newPromise) {
+    if (newPromise === __classPrivateFieldGet(this, _AsyncStateHandler_lastSetPromise, "f")) {
+        // abort setting the promise if we already have set this promise
+        return;
+    }
+    __classPrivateFieldSet(this, _AsyncStateHandler_lastSetPromise, newPromise, "f");
+    if (__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
+        __classPrivateFieldSet(this, _AsyncStateHandler_waitingForValuePromise, createDeferredPromiseWrapper(), "f");
+    }
+    newPromise
+        .then((value) => {
+        // make sure we're still actually waiting for this promise
+        if (__classPrivateFieldGet(this, _AsyncStateHandler_lastSetPromise, "f") === newPromise) {
+            __classPrivateFieldSet(this, _AsyncStateHandler_rejectionError, undefined, "f");
+            __classPrivateFieldSet(this, _AsyncStateHandler_resolutionValue, value, "f");
+            __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").resolve(value);
+            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
+        }
+    })
+        .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(() => {
+                /**
+                 * 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);
+        }
+    });
+};
+export function asyncState(initialValue) {
+    return new AsyncStateHandler(initialValue);
+}

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

@@ -1,9 +1,9 @@
 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()}`);
+        throw new Error(`Property name must be a string, got type '${typeof propKey}' from: '${String(propKey)}' for '${elementTagName.toLowerCase()}'`);
     }
     if (!(propKey in element)) {
-        throw new Error(`Property "${String(propKey)}" does not exist on ${elementTagName.toLowerCase()}.`);
+        throw new Error(`Property '${String(propKey)}' does not exist on '${elementTagName.toLowerCase()}'.`);
     }
 }
 export function createElementUpdaterProxy(element, verifyExists) {
@@ -13,13 +13,20 @@ export function createElementUpdaterProxy(element, verifyExists) {
      * back in here.
      */
     const elementAsProps = element;
-    const propsProxy = new Proxy({}, {
-        get: (target, propertyName) => {
-            if (verifyExists) {
-                assertValidPropertyName(propertyName, element, element.tagName);
-            }
+    function valueGetter(target, propertyName) {
+        if (verifyExists) {
+            assertValidPropertyName(propertyName, element, element.tagName);
+        }
+        const asyncState = element.asyncStateProperties[propertyName];
+        if (asyncState) {
+            return asyncState.getValue();
+        }
+        else {
             return elementAsProps[propertyName];
-        },
+        }
+    }
+    const propsProxy = new Proxy({}, {
+        get: valueGetter,
         set: (target, propertyName, newValue) => {
             if (verifyExists) {
                 assertValidPropertyName(propertyName, element, element.tagName);
@@ -30,7 +37,13 @@ export function createElementUpdaterProxy(element, verifyExists) {
              * "getOwnPropertyDescriptor".
              */
             target[propertyName] = undefined;
-            elementAsProps[propertyName] = newValue;
+            const asyncState = element.asyncStateProperties[propertyName];
+            if (asyncState) {
+                asyncState.setValue(newValue);
+            }
+            else {
+                elementAsProps[propertyName] = newValue;
+            }
             return true;
         },
         ownKeys: (target) => {
@@ -40,7 +53,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
             if (propertyName in target) {
                 return {
                     get value() {
-                        return elementAsProps[propertyName];
+                        return valueGetter(target, propertyName);
                     },
                     configurable: true,
                     enumerable: true,

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

@@ -2,28 +2,20 @@ import { TemplateResult } from 'lit';
 import { TypedEvent } from '../typed-event/typed-event';
 import { DeclarativeElement, HostInstanceType } from './declarative-element';
 import { CustomElementTagName } from './declarative-element-init';
-import { AsyncProp, SetAsyncPropInputs } from './properties/async-prop';
+import { AsyncStateInputs, MaybeAsyncStateToSync } from './properties/async-state';
 import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './properties/element-events';
 import { PropertyInitMapBase } from './properties/element-properties';
 export type RenderOutput = TemplateResult | string | ReadonlyArray<TemplateResult> | ReadonlyArray<string>;
 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> = (params: RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => RenderOutput;
 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<StateGeneric>) => void;
+export type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<AsyncStateInputs<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<StateInitGeneric>;
+    state: Readonly<MaybeAsyncStateToSync<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;
-    /**
-     * Updates async props in the state if they have not already been set. Once promises settle,
-     * this automatically updates the state. In order to re-trigger an async prop, set it to
-     * undefined first.
-     */
-    ensureAsyncProp: (values: Partial<{
-        [StateKey in keyof StateInitGeneric as StateInitGeneric[StateKey] extends AsyncProp<any> ? StateKey : never]: StateInitGeneric[StateKey] extends AsyncProp<infer ValueGeneric> ? SetAsyncPropInputs<ValueGeneric> : never;
-    }>) => void;
 };
 export declare function createRenderParams<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string>(element: DeclarativeElement<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 //# sourceMappingURL=render-callback.d.ts.map

package/dist/declarative-element/render-callback.js

@@ -1,9 +1,15 @@
 import { getObjectTypedKeys } from '@augment-vir/common';
-import { ensureAsyncProp } from './properties/async-prop';
 export function createRenderParams(element, eventsMap) {
-    function updateState(partialProps) {
-        getObjectTypedKeys(partialProps).forEach((propKey) => {
-            element.instanceState[propKey] = partialProps[propKey];
+    function updateState(newStatePartial) {
+        getObjectTypedKeys(newStatePartial).forEach((stateKey) => {
+            const newValue = newStatePartial[stateKey];
+            const asyncState = element.asyncStateProperties[stateKey];
+            if (asyncState) {
+                asyncState.setValue(newValue);
+            }
+            else {
+                element.instanceState[stateKey] = newValue;
+            }
         });
     }
     const renderParams = {
@@ -13,19 +19,6 @@ export function createRenderParams(element, eventsMap) {
         host: element,
         state: element.instanceState,
         events: eventsMap,
-        ensureAsyncProp: (values) => {
-            Object.entries(values).forEach(([stateKey, newSet,]) => {
-                if (!(stateKey in element.instanceState)) {
-                    throw new Error(`Invalid key given to ensureAsyncProp: ${stateKey}`);
-                }
-                ensureAsyncProp({
-                    state: element.instanceState,
-                    updateState: updateState,
-                    stateProp: stateKey,
-                    ...newSet,
-                });
-            });
-        },
     };
     return renderParams;
 }

package/dist/index.d.ts

@@ -9,9 +9,9 @@ export * from './declarative-element/directives/directive-helpers';
 export * from './declarative-element/directives/listen.directive';
 export * from './declarative-element/directives/on-dom-created.directive';
 export * from './declarative-element/directives/on-resize.directive';
-export * from './declarative-element/directives/render-async-prop.directive';
+export * from './declarative-element/directives/render-async-state.directive';
 export * from './declarative-element/directives/render-if.directive';
-export * from './declarative-element/properties/async-prop';
+export * from './declarative-element/properties/async-state';
 export * from './declarative-element/properties/css-vars';
 export * from './declarative-element/properties/element-events';
 export * from './declarative-element/properties/element-properties';

package/dist/index.js

@@ -8,9 +8,9 @@ export * from './declarative-element/directives/directive-helpers';
 export * from './declarative-element/directives/listen.directive';
 export * from './declarative-element/directives/on-dom-created.directive';
 export * from './declarative-element/directives/on-resize.directive';
-export * from './declarative-element/directives/render-async-prop.directive';
+export * from './declarative-element/directives/render-async-state.directive';
 export * from './declarative-element/directives/render-if.directive';
-export * from './declarative-element/properties/async-prop';
+export * from './declarative-element/properties/async-state';
 export * from './declarative-element/properties/css-vars';
 export * from './declarative-element/properties/element-events';
 export * from './declarative-element/properties/element-properties';

package/dist/template-transforms/vir-html/html-transform.js

@@ -13,7 +13,7 @@ const htmlChecksAndTransforms = [
                 currentLitString,
                 currentValue,
             });
-            throw new Error(`Got interpolated tag name but it wasn't of type VirElement: ${currentValue.prototype.constructor.name}`);
+            throw new Error(`Got interpolated tag name but it wasn't of type VirElement: '${currentValue.prototype.constructor.name}'`);
         }
         return shouldHaveTagNameHere && staticTagName;
     }, (input) => 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "8.0.2",
+    "version": "9.0.0",
     "keywords": [
         "custom",
         "web",
@@ -30,7 +30,7 @@
         "format": "virmator format",
         "publish": "virmator publish \"npm run compile && npm run test:all\"",
         "start": "npm install && virmator frontend",
-        "test": "npm run test:types && virmator test-web",
+        "test": "virmator test-web",
         "test:all": "npm run test:types && npm run test:coverage && npm run test:spelling && npm run test:format && npm run test:docs",
         "test:coverage": "virmator test-web coverage",
         "test:docs": "virmator code-in-markdown check",
@@ -39,13 +39,13 @@
         "test:types": "tsc --noEmit"
     },
     "dependencies": {
-        "@augment-vir/browser": "^11.0.0",
-        "@augment-vir/common": "^11.0.0",
+        "@augment-vir/browser": "^11.1.2",
+        "@augment-vir/common": "^11.1.2",
         "lit": "2.6.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^11.0.0",
-        "@augment-vir/node-js": "^11.0.0",
+        "@augment-vir/browser-testing": "^11.1.2",
+        "@augment-vir/node-js": "^11.1.2",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^3.1.7",
         "@types/mocha": "^10.0.1",

package/dist/declarative-element/directives/render-async-prop.directive.d.ts

@@ -1,10 +0,0 @@
-import { UnPromise } from '@augment-vir/common';
-import { AsyncProp } from '../properties/async-prop';
-export declare function renderAsyncProp<T>({ asyncProp, fallback, resolutionRender, errorRender, }: {
-    asyncProp: AsyncProp<T>;
-    /** This value will be rendered if the async state has not settled yet. */
-    fallback: unknown;
-    resolutionRender?: ((resolved: UnPromise<T>) => unknown) | undefined;
-    errorRender?: ((error: Error) => unknown) | undefined;
-}): unknown;
-//# sourceMappingURL=render-async-prop.directive.d.ts.map

package/dist/declarative-element/directives/render-async-prop.directive.js

@@ -1,12 +0,0 @@
-import { extractErrorMessage } from '@augment-vir/common';
-export function renderAsyncProp({ asyncProp, fallback, resolutionRender, errorRender, }) {
-    if (asyncProp === null || asyncProp === void 0 ? void 0 : asyncProp.error) {
-        return errorRender ? errorRender(asyncProp.error) : extractErrorMessage(asyncProp.error);
-    }
-    else if (asyncProp === null || asyncProp === void 0 ? void 0 : asyncProp.resolution) {
-        return resolutionRender ? resolutionRender(asyncProp.resolution) : asyncProp.resolution;
-    }
-    else {
-        return fallback;
-    }
-}

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

@@ -1,27 +0,0 @@
-import { UnPromise } from '@augment-vir/common';
-import { JsonValue } from 'type-fest';
-export type AsyncProp<ValueGeneric> = {
-    error?: Error;
-    promise?: Promise<UnPromise<ValueGeneric>>;
-    resolution?: UnPromise<ValueGeneric>;
-    isChainedAlready?: true;
-    lastTrigger?: JsonValue;
-} | undefined | null;
-declare const unsetSymbol: unique symbol;
-export declare function asyncProp<ValueGeneric>(initialValue?: UnPromise<ValueGeneric> | Promise<UnPromise<ValueGeneric>> | typeof unsetSymbol): AsyncProp<ValueGeneric>;
-export type SetAsyncPropInputs<ValueGeneric> = {
-    updateIfThisChanges?: JsonValue;
-} & ({
-    createPromise: () => Promise<UnPromise<ValueGeneric>>;
-} | {
-    resolution: UnPromise<ValueGeneric>;
-} | {
-    promise: Promise<UnPromise<ValueGeneric>>;
-});
-export declare function ensureAsyncProp<ValueGeneric, StatePropGeneric extends PropertyKey>({ state, stateProp, updateState: inputUpdateState, ...newValue }: {
-    state: Record<StatePropGeneric, AsyncProp<ValueGeneric>>;
-    stateProp: StatePropGeneric;
-    updateState: (newState: Record<StatePropGeneric, AsyncProp<ValueGeneric>>) => void;
-} & SetAsyncPropInputs<ValueGeneric>): void;
-export {};
-//# sourceMappingURL=async-prop.d.ts.map

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

@@ -1,102 +0,0 @@
-import { areJsonEqual, ensureError, isPromiseLike, typedHasProperty, } from '@augment-vir/common';
-const unsetSymbol = Symbol('unset');
-export function asyncProp(initialValue = unsetSymbol) {
-    if (initialValue === unsetSymbol) {
-        return undefined;
-    }
-    else if (isPromiseLike(initialValue)) {
-        return {
-            promise: initialValue,
-        };
-    }
-    else {
-        return {
-            resolution: initialValue,
-        };
-    }
-}
-function shouldForceUpdate(newValue, currentValue) {
-    if (!currentValue) {
-        return true;
-    }
-    if (typedHasProperty(newValue, 'updateIfThisChanges')) {
-        if (typedHasProperty(currentValue, 'lastTrigger')) {
-            return !areJsonEqual(currentValue.lastTrigger, newValue.updateIfThisChanges);
-        }
-        else {
-            return true;
-        }
-    }
-    return false;
-}
-export function ensureAsyncProp({ state, stateProp, updateState: inputUpdateState, ...newValue }) {
-    function updateState(newStateValue) {
-        /**
-         * As cast needed here because the RecordGeneric type isn't strong enough to narrow its keys
-         * to StatePropGeneric, it just thinks they're all strings
-         */
-        inputUpdateState({ [stateProp]: newStateValue });
-    }
-    const forceUpdate = shouldForceUpdate(newValue, state[stateProp]);
-    const currentValue = forceUpdate ? undefined : state[stateProp];
-    if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.error) {
-        // abort if there's an error
-        return;
-    }
-    if (currentValue && 'resolution' in currentValue) {
-        // abort if the async value has already been resolved
-        return;
-    }
-    const lastTriggerObject = typedHasProperty(newValue, 'updateIfThisChanges')
-        ? { lastTrigger: newValue.updateIfThisChanges }
-        : {};
-    // if given a resolution value, set that
-    if ('resolution' in newValue) {
-        return updateState({
-            resolution: newValue.resolution,
-            ...lastTriggerObject,
-        });
-    }
-    // if there is no promise or resolution, set a promise
-    const needsNewPromise = currentValue == undefined || !('promise' in currentValue);
-    const needsChaining = currentValue == undefined || !currentValue.isChainedAlready;
-    if (!needsNewPromise && !needsChaining) {
-        // abort, there is nothing to do
-        return;
-    }
-    const newPromise = needsNewPromise
-        ? 'promise' in newValue
-            ? newValue.promise
-            : 'createPromise' in newValue
-                ? newValue.createPromise()
-                : undefined
-        : undefined;
-    if (needsNewPromise && !newPromise) {
-        throw new Error(`Was not able to create a new promise for state.${String(stateProp)}: missing "promise" or "createPromise" key for ${ensureAsyncProp.name}`);
-    }
-    const promiseToChain = newPromise !== null && newPromise !== void 0 ? newPromise : currentValue === null || currentValue === void 0 ? void 0 : currentValue.promise;
-    if (!promiseToChain) {
-        // at this point there is definitely a promise to chain
-        throw new Error('Failed to find promise to chain.');
-    }
-    promiseToChain
-        .then((value) => {
-        updateState({
-            promise: promiseToChain,
-            resolution: value,
-            ...lastTriggerObject,
-        });
-    })
-        .catch((error) => {
-        updateState({
-            promise: promiseToChain,
-            error: ensureError(error),
-            ...lastTriggerObject,
-        });
-    });
-    updateState({
-        promise: promiseToChain,
-        isChainedAlready: true,
-        ...lastTriggerObject,
-    });
-}