element-vir 9.2.2 → 10.0.0

package/README.md

@@ -200,6 +200,36 @@ export const MyWithAssignmentElement = defineElementNoInputs({
 });
 ```
 
+## Rendering promises
+
+A handy directive is built in for rendering promises: `renderPromise`. See how it works below:
+
+<!-- example-link: src/readme-examples/my-async-render.element.ts -->
+
+```TypeScript
+import {defineElementNoInputs, html, renderPromise} from 'element-vir';
+
+export const MyAsyncRenderElement = defineElementNoInputs({
+    tagName: 'my-async-render',
+    stateInit: {
+        data: fetch('https://example.org'),
+    },
+    renderCallback: ({state}) => html`
+        ${renderPromise(state.data, ({promise, error, resolved}) => {
+            if (promise) {
+                return 'Still loading...';
+            } else if (resolved) {
+                return html`
+                    Load done!
+                `;
+            } else {
+                return `Load failed: ${error.message}`;
+            }
+        })}
+    `,
+});
+```
+
 ## Other callbacks
 
 There are two other callbacks you can define that are sort of similar to lifecycle callbacks. They are much simpler than lifecycle callbacks however.
@@ -594,74 +624,6 @@ export const MyWithRenderIfElement = defineElement<{shouldRender: boolean}>()({
 });
 ```
 
-### asyncState
-
-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 {asyncState, defineElement, html, listen, renderAsyncState} from 'element-vir';
-
-type EndpointData = number[];
-
-async function loadSomething(endpoint: string): Promise<EndpointData> {
-    // load something from the network
-    const data = await (
-        await fetch(
-            [
-                '',
-                'api',
-                endpoint,
-            ].join('/'),
-        )
-    ).json();
-    return data;
-}
-
-export const MyWithAsyncStateElement = defineElement<{endpoint: string}>()({
-    tagName: 'my-simple-with-render-if',
-    stateInit: {
-        data: asyncState<EndpointData>(),
-    },
-    renderCallback: ({inputs, state, updateState}) => {
-        /**
-         * This creates a promise which automatically updates the state.loadsLater prop once the
-         * promise resolves. It only creates a new promise if the "trigger" value changes.
-         */
-        updateState({
-            data: {
-                createPromise: () => loadSomething(inputs.endpoint),
-                trigger: inputs.endpoint,
-            },
-        });
-
-        return html`
-            Here's the data:
-            <br />
-            ${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>
-        `;
-    },
-});
-```
-
 ## Require all child custom elements to be declarative elements
 
 To require all child elements to be declarative elements defined by this package, call `requireAllCustomElementsToBeDeclarativeElements` anywhere in your app. This is a global setting so do not enable it unless you want it to be true _everywhere_ in your current run-time. This should not be used if you're using custom elements from other libraries (unless they happen to also use this package to define their custom elements).

package/dist/built-in-lit-directives.d.ts

@@ -0,0 +1,21 @@
+export * from 'lit/directives/async-append.js';
+export * from 'lit/directives/async-replace.js';
+export * from 'lit/directives/cache.js';
+export * from 'lit/directives/choose.js';
+export * from 'lit/directives/class-map.js';
+export * from 'lit/directives/guard.js';
+export * from 'lit/directives/if-defined.js';
+export * from 'lit/directives/join.js';
+export * from 'lit/directives/keyed.js';
+export * from 'lit/directives/live.js';
+export * from 'lit/directives/map.js';
+export * from 'lit/directives/range.js';
+export * from 'lit/directives/ref.js';
+export * from 'lit/directives/repeat.js';
+export * from 'lit/directives/style-map.js';
+export * from 'lit/directives/template-content.js';
+export * from 'lit/directives/unsafe-html.js';
+export * from 'lit/directives/unsafe-svg.js';
+export * from 'lit/directives/until.js';
+export * from 'lit/directives/when.js';
+//# sourceMappingURL=built-in-lit-directives.d.ts.map

package/dist/built-in-lit-directives.js

@@ -0,0 +1,20 @@
+export * from 'lit/directives/async-append.js';
+export * from 'lit/directives/async-replace.js';
+export * from 'lit/directives/cache.js';
+export * from 'lit/directives/choose.js';
+export * from 'lit/directives/class-map.js';
+export * from 'lit/directives/guard.js';
+export * from 'lit/directives/if-defined.js';
+export * from 'lit/directives/join.js';
+export * from 'lit/directives/keyed.js';
+export * from 'lit/directives/live.js';
+export * from 'lit/directives/map.js';
+export * from 'lit/directives/range.js';
+export * from 'lit/directives/ref.js';
+export * from 'lit/directives/repeat.js';
+export * from 'lit/directives/style-map.js';
+export * from 'lit/directives/template-content.js';
+export * from 'lit/directives/unsafe-html.js';
+export * from 'lit/directives/unsafe-svg.js';
+export * from 'lit/directives/until.js';
+export * from 'lit/directives/when.js';

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

@@ -1,6 +1,5 @@
 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';
@@ -8,7 +7,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, StateInitMaybeAsyncGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string> = {
+export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric 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.
@@ -17,7 +16,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;
     /**
@@ -25,7 +24,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, InputsGeneric, 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
@@ -38,9 +37,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, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
-    renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
-    cleanupCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    initCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    cleanupCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };
 //# sourceMappingURL=declarative-element-init.d.ts.map

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

@@ -1,17 +1,16 @@
 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 { RenderCallback, RenderOutput } 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>, '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 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>, '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 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 {
+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> 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'];
@@ -25,23 +24,22 @@ 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: MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>;
-    abstract readonly asyncStateHandlerMap: AsyncStateHandlerMap<StateInitMaybeAsyncGeneric>;
+    abstract readonly instanceState: StateInitGeneric;
     abstract readonly instanceInputs: InputsGeneric;
     abstract assignInputs(inputs: InputsGeneric): void;
     abstract readonly haveInputsBeenSet: boolean;
     abstract markInputsAsHavingBeenSet(): void;
-    abstract readonly definition: DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    abstract readonly definition: DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 }
-export interface StaticDeclarativeElementProperties<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitMaybeAsyncGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> {
+export interface StaticDeclarativeElementProperties<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric 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, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    readonly renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
     events: EventDescriptorMap<EventsInitGeneric>;
-    stateInit: ElementPropertyDescriptorMap<StateInitMaybeAsyncGeneric>;
-    init: RequiredBy<DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'stateInit' | 'events'>;
+    stateInit: ElementPropertyDescriptorMap<StateInitGeneric>;
+    init: RequiredBy<DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'stateInit' | 'events'>;
     inputsType: InputsGeneric;
-    stateType: MaybeAsyncStateToSync<StateInitMaybeAsyncGeneric>;
-    isStrictInstance: (element: unknown) => element is DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitMaybeAsyncGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    stateType: StateInitGeneric;
+    isStrictInstance: (element: unknown) => element is DeclarativeElement<TagNameGeneric, InputsGeneric, StateInitGeneric, 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 = {}, 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>;
+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>;
 //# sourceMappingURL=define-element-no-inputs.d.ts.map

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

@@ -1,12 +1,15 @@
-import { getObjectTypedKeys, kebabCaseToCamelCase } from '@augment-vir/common';
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+import { ensureError, getObjectTypedKeys, kebabCaseToCamelCase } from '@augment-vir/common';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { DeclarativeElementMarkerSymbol } from '../declarative-element-marker-symbol';
 import { DeclarativeElement, } from './declarative-element';
-import { defaultDeclarativeElementDefinitionOptions, IgnoreInputsNotBeenSetBeforeRenderWarningSymbol, } from './definition-options';
+import { IgnoreInputsNotBeenSetBeforeRenderWarningSymbol, defaultDeclarativeElementDefinitionOptions, } from './definition-options';
 import { assign } from './directives/assign.directive';
 import { hasDeclarativeElementParent } from './has-declarative-element-parent';
-import { toAsyncStateHandlerMap } from './properties/async-state';
 import { createCssVarNamesMap, createCssVarValuesMap } from './properties/css-vars';
 import { createEventDescriptorMap } from './properties/element-events';
 import { createElementUpdaterProxy } from './properties/element-updater-proxy';
@@ -46,29 +49,36 @@ export function defineElementNoInputs(initInput) {
                 }
             }
             render() {
-                if (
-                // This ignores elements at the root of a page, as they can't receive inputs from
-                // other elements (cause they have no custom element ancestors).
-                hasDeclarativeElementParent(this) &&
-                    !this.haveInputsBeenSet &&
-                    !elementOptions[IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]) {
-                    console.warn(this, `${initInput.tagName} got rendered before its input object was set. This was most likely caused by forgetting to use the "${assign.name}" directive on it. If no inputs are intended, use "${defineElementNoInputs.name}" to define ${initInput.tagName}.`);
+                try {
+                    if (
+                    // This ignores elements at the root of a page, as they can't receive inputs from
+                    // other elements (cause they have no custom element ancestors).
+                    hasDeclarativeElementParent(this) &&
+                        !this.haveInputsBeenSet &&
+                        !elementOptions[IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]) {
+                        console.warn(this, `${initInput.tagName} got rendered before its input object was set. This was most likely caused by forgetting to use the "${assign.name}" directive on it. If no inputs are intended, use "${defineElementNoInputs.name}" to define ${initInput.tagName}.`);
+                    }
+                    this.hasRendered = true;
+                    const renderParams = this.createRenderParams();
+                    if (!this.initCalled && initInput.initCallback) {
+                        this.initCalled = true;
+                        initInput.initCallback(renderParams);
+                    }
+                    const renderResult = initInput.renderCallback(renderParams);
+                    applyHostClasses({
+                        host: renderParams.host,
+                        hostClassesInit: initInput.hostClasses,
+                        hostClassNames,
+                        state: renderParams.state,
+                        inputs: renderParams.inputs,
+                    });
+                    return renderResult;
                 }
-                this.hasRendered = true;
-                const renderParams = this.createRenderParams();
-                if (!this.initCalled && initInput.initCallback) {
-                    this.initCalled = true;
-                    initInput.initCallback(renderParams);
+                catch (caught) {
+                    const error = ensureError(caught);
+                    error.message = `Failed to render '${initInput.tagName}': ${error.message}`;
+                    throw error;
                 }
-                const renderResult = initInput.renderCallback(renderParams);
-                applyHostClasses({
-                    host: renderParams.host,
-                    hostClassesInit: initInput.hostClasses,
-                    hostClassNames,
-                    state: renderParams.state,
-                    inputs: renderParams.inputs,
-                });
-                return renderResult;
             }
             connectedCallback() {
                 super.connectedCallback();
@@ -100,28 +110,17 @@ export function defineElementNoInputs(initInput) {
                 this.haveInputsBeenSet = false;
                 // this is set below in Object.defineProperties
                 this.definition = {};
-                this.asyncStateHandlerMap = toAsyncStateHandlerMap(initInput.stateInit);
                 this.instanceInputs = createElementUpdaterProxy(this, false);
                 this.instanceState = createElementUpdaterProxy(this, true);
-                const stateInit = initInput.stateInit ||
-                    {};
+                const stateInit = initInput.stateInit || {};
                 getObjectTypedKeys(stateInit).forEach((stateKey) => {
                     property()(this, stateKey);
-                    const asyncStateClassInstance = this.asyncStateHandlerMap[stateKey];
-                    if (asyncStateClassInstance) {
-                        this.instanceState[stateKey] = asyncStateClassInstance.getValue();
-                        asyncStateClassInstance.addSettleListener(() => {
-                            this[stateKey] =
-                                asyncStateClassInstance.getValue();
-                        });
-                    }
-                    else {
-                        this.instanceState[stateKey] = stateInit[stateKey];
-                    }
+                    this.instanceState[stateKey] = stateInit[stateKey];
                 });
                 this.definition = anonymousClass;
             }
         },
+        __setFunctionName(_a, "anonymousClass"),
         _a.tagName = initInput.tagName,
         _a.styles = calculatedStyles,
         // this gets set below in Object.defineProperties

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

@@ -3,8 +3,8 @@ import { DeclarativeElement, DeclarativeElementDefinition } from '../declarative
 /** Assign an object matching an element's inputs to its inputs. */
 export declare function assign<DeclarativeElementGeneric extends DeclarativeElementDefinition>(declarativeElement: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric['inputsType']): import("lit-html/directive").DirectiveResult<{
     new (partInfo: PartInfo): {
-        readonly element: DeclarativeElement<`${string}-${string}`, any, any, any, string, string>;
-        render(elementDefinition: DeclarativeElementDefinition<any, any, any, any, string, string>, inputsObject: Record<PropertyKey, unknown>): symbol;
+        readonly element: DeclarativeElement<any, any, any, any, string, string>;
+        render(elementDefinition: DeclarativeElementDefinition, inputsObject: Record<PropertyKey, unknown>): symbol;
         readonly _$isConnected: boolean;
         update(_part: import("lit-html").Part, props: unknown[]): unknown;
     };

package/dist/declarative-element/directives/listen.directive.js

@@ -24,7 +24,7 @@ const listenDirective = directive(class extends Directive {
         return {
             eventType,
             callback,
-            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
+            listener: (event) => this.lastListenerMetaData?.callback(event),
         };
     }
     render(eventTypeInput, callback) {

package/dist/declarative-element/directives/on-resize.directive.js

@@ -8,13 +8,12 @@ export const onResize = directive(class extends Directive {
         assertIsElementPartInfo(partInfo, directiveName);
     }
     fireCallback(entries) {
-        var _a;
         const resizeEntry = entries[0];
         if (!resizeEntry) {
             console.error(entries);
             throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
         }
-        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
+        this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect });
     }
     update(partInfo, [callback]) {
         assertIsElementPartInfo(partInfo, directiveName);

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

@@ -1,2 +1,2 @@
-export declare function renderIf(condition: boolean, ifTrue: unknown, ifFalse?: unknown): unknown;
+export declare function renderIf<TrueCondition = unknown, FalseCondition = undefined>(condition: boolean, ifTrue: TrueCondition, ifFalse?: FalseCondition): TrueCondition | FalseCondition;
 //# sourceMappingURL=render-if.directive.d.ts.map

package/dist/declarative-element/directives/render-if.directive.js

@@ -1,4 +1,5 @@
 import { when } from 'lit/directives/when.js';
+const notSetSymbol = Symbol('not set');
 export function renderIf(condition, ifTrue, ifFalse) {
     return when(condition, () => ifTrue, () => ifFalse);
 }

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

@@ -0,0 +1,15 @@
+import { CachedPromise, GetCachedPromiseInput } from '@electrovir/cached-promise';
+import { RequireExactlyOne } from 'type-fest';
+import { RenderOutput } from '../render-callback';
+export type RenderPromiseInput<T> = RequireExactlyOne<{
+    promise: Promise<T>;
+    resolved: T;
+    error: Error;
+}>;
+export declare function renderPromise<T>(maybePromise: Promise<T> | T, renderer: (input: RenderPromiseInput<T>) => RenderOutput): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/until").UntilDirective> | null | undefined;
+export type RenderCachedPromiseInputs<T> = {
+    cachedPromise: CachedPromise<T>;
+    render: (input: RenderPromiseInput<T>) => RenderOutput;
+} & GetCachedPromiseInput<T>;
+export declare function renderCachedPromise<T>({ cachedPromise, render, triggers, createPromise, }: RenderCachedPromiseInputs<T>): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/until").UntilDirective> | null | undefined;
+//# sourceMappingURL=render-promise.directive.d.ts.map

package/dist/declarative-element/directives/render-promise.directive.js

@@ -0,0 +1,27 @@
+import { ensureError } from '@augment-vir/common';
+import { until } from 'lit/directives/until.js';
+export function renderPromise(maybePromise, renderer) {
+    if (maybePromise instanceof Promise) {
+        return until(maybePromise
+            .catch((error) => {
+            return ensureError(error);
+        })
+            .then((resolved) => {
+            if (resolved instanceof Error) {
+                return renderer({ error: resolved });
+            }
+            else {
+                return renderer({ resolved });
+            }
+        }), renderer({ promise: maybePromise }));
+    }
+    else {
+        return renderer({ resolved: maybePromise });
+    }
+}
+export function renderCachedPromise({ cachedPromise, render, triggers, createPromise, }) {
+    return renderPromise(cachedPromise.get({
+        createPromise,
+        triggers,
+    }), render);
+}

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

@@ -17,13 +17,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
         if (verifyExists) {
             assertValidPropertyName(propertyName, element, element.tagName);
         }
-        const asyncState = element.asyncStateHandlerMap[propertyName];
-        if (asyncState) {
-            return asyncState.getValue();
-        }
-        else {
-            return elementAsProps[propertyName];
-        }
+        return elementAsProps[propertyName];
     }
     const propsProxy = new Proxy({}, {
         get: valueGetter,
@@ -37,13 +31,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
              * "getOwnPropertyDescriptor".
              */
             target[propertyName] = undefined;
-            const asyncState = element.asyncStateHandlerMap[propertyName];
-            if (asyncState) {
-                asyncState.setValue(newValue);
-            }
-            else {
-                elementAsProps[propertyName] = newValue;
-            }
+            elementAsProps[propertyName] = newValue;
             return true;
         },
         ownKeys: (target) => {

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

@@ -1,7 +1,7 @@
 import { CSSResult } from 'lit';
 import { CssVarNameOrValueMap } from './css-vars';
 import { PropertyInitMapBase } from './element-properties';
-import { HostClassesInitMap, HostClassNamesMap } from './host-classes';
+import { HostClassNamesMap, HostClassesInitMap } from './host-classes';
 export type StylesCallbackInput<HostClassKeys extends string, CssVarKeys extends string> = {
     hostClassSelectors: Record<HostClassKeys, CSSResult>;
     hostClassNames: Record<HostClassKeys, CSSResult>;

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

@@ -3,15 +3,14 @@ import { Primitive } from 'type-fest';
 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';
 export type RenderOutput = TemplateResult | Primitive | ReadonlyArray<TemplateResult> | ReadonlyArray<Primitive>;
 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<AsyncStateInputs<StateGeneric>>) => void;
+export type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<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<StateInitGeneric>;
     updateState: UpdateStateCallback<StateInitGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
     host: HostInstanceType<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

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

@@ -3,13 +3,7 @@ export function createRenderParams(element, eventsMap) {
     function updateState(newStatePartial) {
         getObjectTypedKeys(newStatePartial).forEach((stateKey) => {
             const newValue = newStatePartial[stateKey];
-            const asyncState = element.asyncStateHandlerMap[stateKey];
-            if (asyncState) {
-                asyncState.setValue(newValue);
-            }
-            else {
-                element.instanceState[stateKey] = newValue;
-            }
+            element.instanceState[stateKey] = newValue;
         });
     }
     const renderParams = {

package/dist/declarative-element/wrap-define-element.js

@@ -1,9 +1,8 @@
 import { defineElement, defineElementNoInputs, } from '..';
 export function wrapDefineElement(options) {
-    var _a, _b;
     const { assertInputs, transformInputs } = {
-        assertInputs: (_a = options === null || options === void 0 ? void 0 : options.assertInputs) !== null && _a !== void 0 ? _a : (() => { }),
-        transformInputs: (_b = options === null || options === void 0 ? void 0 : options.transformInputs) !== null && _b !== void 0 ? _b : ((inputs) => inputs),
+        assertInputs: options?.assertInputs ?? (() => { }),
+        transformInputs: options?.transformInputs ?? ((inputs) => inputs),
     };
     return {
         defineElement: () => {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './built-in-lit-directives';
 export * from './declarative-element/declarative-element';
 export * from './declarative-element/declarative-element-init';
 export * from './declarative-element/define-element';
@@ -9,9 +10,8 @@ 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-state.directive';
 export * from './declarative-element/directives/render-if.directive';
-export * from './declarative-element/properties/async-state';
+export * from './declarative-element/directives/render-promise.directive';
 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

@@ -1,3 +1,4 @@
+export * from './built-in-lit-directives';
 export * from './declarative-element/declarative-element';
 export * from './declarative-element/declarative-element-init';
 export * from './declarative-element/define-element';
@@ -8,9 +9,8 @@ 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-state.directive';
 export * from './declarative-element/directives/render-if.directive';
-export * from './declarative-element/properties/async-state';
+export * from './declarative-element/directives/render-promise.directive';
 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/nested-mapped-templates.js

@@ -20,13 +20,12 @@ function extractElementKeys(values) {
  */
 const transformedTemplateStrings = new WeakMap();
 export function getAlreadyMappedTemplate(templateStringsKey, values) {
-    var _a;
     const elementKeys = extractElementKeys(values);
     const nestedValue = getNestedValues(transformedTemplateStrings, [
         templateStringsKey,
         ...elementKeys,
     ]);
-    return (_a = nestedValue.value) === null || _a === void 0 ? void 0 : _a.template;
+    return nestedValue.value?.template;
 }
 export function setMappedTemplate(templateStringsKey, values, valueToSet) {
     const elementKeys = extractElementKeys(values);
@@ -75,12 +74,11 @@ function getCurrentKeyAndValue(map, keys, index) {
     return { currentKey, currentTemplateAndNested, reason: `key and value exists` };
 }
 function setNestedValues(map, keys, valueToSet, index = 0) {
-    var _a;
     const { currentTemplateAndNested, currentKey, reason } = getCurrentKeyAndValue(map, keys, index);
     if (!currentKey) {
         return { result: false, reason };
     }
-    const nestedAndTemplate = currentTemplateAndNested !== null && currentTemplateAndNested !== void 0 ? currentTemplateAndNested : { nested: undefined, template: undefined };
+    const nestedAndTemplate = currentTemplateAndNested ?? { nested: undefined, template: undefined };
     if (!currentTemplateAndNested) {
         map.set(currentKey, nestedAndTemplate);
     }
@@ -88,7 +86,7 @@ function setNestedValues(map, keys, valueToSet, index = 0) {
         nestedAndTemplate.template = valueToSet;
         return { result: true, reason: `set value at end of keys array` };
     }
-    const nestedWeakMap = (_a = nestedAndTemplate.nested) !== null && _a !== void 0 ? _a : new WeakMap();
+    const nestedWeakMap = nestedAndTemplate.nested ?? new WeakMap();
     if (!nestedAndTemplate.nested) {
         nestedAndTemplate.nested = nestedWeakMap;
     }

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

@@ -30,7 +30,7 @@ function extractElementValues(values) {
 }
 export function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
     const alreadyTransformedTemplateStrings = getAlreadyMappedTemplate(templateStringsKey, values);
-    const templateTransform = alreadyTransformedTemplateStrings !== null && alreadyTransformedTemplateStrings !== void 0 ? alreadyTransformedTemplateStrings : fallbackTransform();
+    const templateTransform = alreadyTransformedTemplateStrings ?? fallbackTransform();
     if (!alreadyTransformedTemplateStrings) {
         const result = setMappedTemplate(templateStringsKey, values, templateTransform);
         if (!result.result) {
@@ -48,7 +48,6 @@ export function transformTemplate(inputTemplateStrings, inputValues, checksAndTr
     const newRaws = [];
     const valueDeletions = [];
     inputTemplateStrings.forEach((currentTemplateString, index) => {
-        var _a;
         const lastNewStringsIndex = newStrings.length - 1;
         const lastNewString = newStrings[lastNewStringsIndex];
         const currentValueIndex = index - 1;
@@ -56,9 +55,9 @@ export function transformTemplate(inputTemplateStrings, inputValues, checksAndTr
         let validTransform;
         assertValidString && assertValidString(currentTemplateString);
         if (typeof lastNewString === 'string') {
-            validTransform = (_a = checksAndTransforms.find((checkAndTransform) => {
+            validTransform = checksAndTransforms.find((checkAndTransform) => {
                 return checkAndTransform.check(lastNewString, currentTemplateString, currentValue);
-            })) === null || _a === void 0 ? void 0 : _a.transform;
+            })?.transform;
             if (validTransform) {
                 newStrings[lastNewStringsIndex] =
                     lastNewString + validTransform(currentValue) + currentTemplateString;

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

@@ -5,7 +5,7 @@ import { makeCheckTransform, transformTemplate, } from '../transform-template';
 const htmlChecksAndTransforms = [
     makeCheckTransform('tag name interpolation', (lastNewString, currentLitString, currentValue) => {
         const shouldHaveTagNameHere = (lastNewString.trim().endsWith('<') && !!currentLitString.match(/^[\s\n>]/)) ||
-            ((lastNewString === null || lastNewString === void 0 ? void 0 : lastNewString.trim().endsWith('</')) && currentLitString.trim().startsWith('>'));
+            (lastNewString?.trim().endsWith('</') && currentLitString.trim().startsWith('>'));
         const staticTagName = hasStaticTagName(currentValue);
         if (shouldHaveTagNameHere && !staticTagName) {
             console.error({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "9.2.2",
+    "version": "10.0.0",
     "keywords": [
         "custom",
         "web",
@@ -39,27 +39,29 @@
         "test:types": "tsc --noEmit"
     },
     "dependencies": {
-        "@augment-vir/browser": "^12.11.2",
-        "@augment-vir/common": "^12.11.2",
-        "lit": "2.6.1"
+        "@augment-vir/browser": "^13.2.1",
+        "@augment-vir/common": "^13.2.1",
+        "@electrovir/cached-promise": "^0.0.1",
+        "lit": "2.7.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^12.11.2",
-        "@augment-vir/node-js": "^12.11.2",
+        "@augment-vir/browser-testing": "^13.2.1",
+        "@augment-vir/node-js": "^13.2.1",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^3.1.7",
         "@types/mocha": "^10.0.1",
-        "@web/dev-server-esbuild": "^0.3.3",
+        "@web/dev-server-esbuild": "^0.3.4",
         "@web/test-runner": "^0.15.1",
         "@web/test-runner-commands": "^0.6.5",
         "@web/test-runner-playwright": "^0.9.0",
+        "@web/test-runner-visual-regression": "^0.7.0",
         "ansi-colors": "^4.1.3",
-        "cspell": "^6.26.3",
+        "cspell": "^6.31.1",
         "istanbul-smart-text-reporter": "^1.1.1",
         "markdown-code-example-inserter": "^0.3.0",
         "mocha-spec-reporter-with-file-names": "^0.0.3",
         "nyc": "^15.1.0",
-        "prettier": "^2.8.4",
+        "prettier": "^2.8.7",
         "prettier-plugin-interpolated-html-tags": "^0.0.3",
         "prettier-plugin-jsdoc": "^0.4.2",
         "prettier-plugin-multiline-arrays": "^1.1.3",
@@ -68,9 +70,9 @@
         "prettier-plugin-sort-json": "^1.0.0",
         "prettier-plugin-toml": "^0.3.1",
         "ts-node": "^10.9.1",
-        "type-fest": "^3.6.0",
-        "typescript": "^4.9.5",
-        "virmator": "^5.5.0",
-        "vite": "^4.1.4"
+        "type-fest": "^3.7.0",
+        "typescript": "^5.0.2",
+        "virmator": "^6.2.2",
+        "vite": "^4.2.1"
     }
 }

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

@@ -1,7 +0,0 @@
-import { UnPromise } from '@augment-vir/common';
-import { AsyncState } from '../properties/async-state';
-export declare function renderAsyncState<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncState: AsyncState<T>, fallback: FallbackResult, resolutionRender: (resolved: UnPromise<T>) => ResolutionRenderResult, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | ResolutionRenderResult | ErrorRenderResult;
-export declare function renderAsyncState<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncState: AsyncState<T>, fallback: FallbackResult, resolutionRender: (resolved: UnPromise<T>) => ResolutionRenderResult, errorRender?: undefined): FallbackResult | ResolutionRenderResult | string;
-export declare function renderAsyncState<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncState: AsyncState<T>, fallback: FallbackResult, resolutionRender: undefined, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | UnPromise<T> | ErrorRenderResult;
-export declare function renderAsyncState<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncState: AsyncState<T>, fallback: FallbackResult, resolutionRender?: undefined, errorRender?: undefined): FallbackResult | UnPromise<T> | string;
-//# sourceMappingURL=render-async-state.directive.d.ts.map

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

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

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

@@ -1,49 +0,0 @@
-import { JsonCompatibleValue, UnPromise } from '@augment-vir/common';
-import { Promisable } from 'type-fest';
-import { PickAndBlockOthers } from '../../augments/type';
-import { PropertyInitMapBase } from './element-properties';
-export type AsyncState<ValueGeneric> = Error | Promisable<UnPromise<ValueGeneric>>;
-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>;
-    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: JsonCompatibleValue;
-    newPromise: Promise<UnPromise<ValueGeneric>>;
-    /** Clear the current value and trigger createPromise to get called again on the next render. */
-    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 declare function toAsyncStateHandlerMap(propertyInitMap?: PropertyInitMapBase | undefined): AsyncStateHandlerMap<PropertyInitMapBase>;
-export declare class AsyncStateHandler<ValueGeneric> {
-    #private;
-    readonly asyncMarkerSymbol: symbol;
-    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 class AsyncStateInit<ValueGeneric> {
-    readonly initialValue?: Promise<UnPromise<ValueGeneric>> | undefined;
-    constructor(initialValue?: Promise<UnPromise<ValueGeneric>> | undefined);
-    readonly asyncMarkerSymbol: symbol;
-}
-export declare function asyncState<ValueGeneric>(initialValue?: Promise<UnPromise<ValueGeneric>> | undefined): AsyncStateInit<ValueGeneric>;
-export {};
-//# sourceMappingURL=async-state.d.ts.map

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

@@ -1,158 +0,0 @@
-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, _AsyncStateHandler_resolveValue;
-import { areJsonEqual, createDeferredPromiseWrapper, ensureError, filterObject, isPromiseLike, mapObjectValues, } from '@augment-vir/common';
-const asyncMarkerSymbol = Symbol('element-vir-async-state-marker');
-export function isRenderReady(asyncStateInput) {
-    if (asyncStateInput instanceof Error) {
-        return false;
-    }
-    else if (isPromiseLike(asyncStateInput)) {
-        return false;
-    }
-    else {
-        return true;
-    }
-}
-export function toAsyncStateHandlerMap(propertyInitMap) {
-    if (!propertyInitMap) {
-        return {};
-    }
-    const asyncStateInit = filterObject(propertyInitMap, (key, value) => {
-        return value instanceof AsyncStateInit;
-    });
-    const asyncStateHandlers = mapObjectValues(asyncStateInit, (key, value) => {
-        return new AsyncStateHandler(value.initialValue);
-    });
-    return asyncStateHandlers;
-}
-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());
-        this.asyncMarkerSymbol = asyncMarkerSymbol;
-        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 ('resolvedValue' in setInputs) {
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_resolveValue).call(this, setInputs.resolvedValue);
-        }
-        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_resolutionValue, undefined, "f");
-    __classPrivateFieldSet(this, _AsyncStateHandler_rejectionError, undefined, "f");
-    __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) {
-            __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_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(() => {
-                /**
-                 * 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);
-        }
-    });
-}, _AsyncStateHandler_resolveValue = function _AsyncStateHandler_resolveValue(value) {
-    if (value !== __classPrivateFieldGet(this, _AsyncStateHandler_resolutionValue, "f")) {
-        __classPrivateFieldSet(this, _AsyncStateHandler_rejectionError, undefined, "f");
-        __classPrivateFieldSet(this, _AsyncStateHandler_resolutionValue, value, "f");
-        if (__classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").isSettled()) {
-            __classPrivateFieldSet(this, _AsyncStateHandler_waitingForValuePromise, createDeferredPromiseWrapper(), "f");
-        }
-        __classPrivateFieldGet(this, _AsyncStateHandler_waitingForValuePromise, "f").resolve(value);
-        __classPrivateFieldGet(this, _AsyncStateHandler_instances, "m", _AsyncStateHandler_fireListeners).call(this);
-    }
-};
-export class AsyncStateInit {
-    constructor(initialValue) {
-        this.initialValue = initialValue;
-        this.asyncMarkerSymbol = asyncMarkerSymbol;
-    }
-}
-export function asyncState(initialValue) {
-    return new AsyncStateInit(initialValue);
-}