element-vir 6.3.4 → 7.0.1

package/README.md

@@ -317,7 +317,7 @@ import {MyCustomActionEvent} from './my-custom-action.event';
 
 export const MyWithCustomEventsElement = defineElementNoInputs({
     tagName: 'my-with-custom-events',
-    renderCallback: ({genericDispatch}) => html`
+    renderCallback: ({dispatch}) => html`
         <div
             ${listen(MyCustomActionEvent, (event) => {
                 console.info(`Got a number! ${event.detail}`);
@@ -325,7 +325,7 @@ export const MyWithCustomEventsElement = defineElementNoInputs({
         >
             <div
                 ${listen('click', () => {
-                    genericDispatch(new MyCustomActionEvent(Math.random()));
+                    dispatch(new MyCustomActionEvent(Math.random()));
                 })}
             ></div>
         </div>
@@ -534,6 +534,85 @@ export const MyWithCleanupElement = defineElementNoInputs({
 });
 ```
 
+### renderIf
+
+Use the `renderIf` directive to easily render a template if a given condition is true.
+
+<!-- example-link: src/readme-examples/my-with-render-if.element.ts -->
+
+```TypeScript
+import {defineElement, html, renderIf} from 'element-vir';
+
+export const MyWithRenderIfElement = defineElement<{shouldRender: boolean}>()({
+    tagName: 'my-simple-with-render-if',
+    renderCallback: ({inputs}) => html`
+        ${renderIf(
+            inputs.shouldRender,
+            html`
+                I'm conditionally rendered!
+            `,
+        )}
+    `,
+});
+```
+
+### renderAsyncProp
+
+Use the `renderAsyncProp` directive in conjunction with the `asyncProp` property definer and the `ensureAsyncProp` render callback property to seamlessly render and update element state:
+
+<!-- example-link: src/readme-examples/my-with-async-prop.element.ts -->
+
+```TypeScript
+import {asyncProp, defineElement, html, renderAsyncProp} from 'element-vir';
+
+async function loadSomething(endpoint: string) {
+    // load something from the network
+    const data = await (
+        await fetch(
+            [
+                '',
+                'api',
+                endpoint,
+            ].join('/'),
+        )
+    ).json();
+    return data;
+}
+
+export const MyWithAsyncPropElement = defineElement<{endpointToHit: string}>()({
+    tagName: 'my-simple-with-render-if',
+    stateInit: {
+        data: asyncProp(),
+    },
+    renderCallback: ({inputs, state, ensureAsyncProp}) => {
+        /**
+         * This creates a promise which automatically updates the state.loadsLater prop once the
+         * promise resolves.
+         */
+        ensureAsyncProp({
+            data: {
+                createPromise: () => loadSomething(inputs.endpointToHit),
+                updateIfThisChanges: inputs.endpointToHit,
+            },
+        });
+
+        return html`
+            Here's the data:
+            <br />
+            ${renderAsyncProp({
+                asyncProp: state.data,
+                fallback: 'Loading...',
+                resolutionRender: (loadedData) => {
+                    return html`
+                        Got the data: ${loadedData}
+                    `;
+                },
+            })}
+        `;
+    },
+});
+```
+
 ## 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).
@@ -551,3 +630,13 @@ requireAllCustomElementsToBeDeclarativeElements();
 ## markdown out of date
 
 If you see this: `Code in Markdown file(s) is out of date. Run without --check to update. code-in-markdown failed.`, run `npm run update-docs` to fix it.
+
+## Testing source map errors
+
+If you see
+
+```
+Error while reading source maps for ...
+```
+
+While running `npm test`, don't worry about it. Those only happen when tests fail.

package/dist/augments/array.d.ts

@@ -1 +1,2 @@
 export declare function filterOutArrayIndexes<T>(array: Readonly<T[]>, indexes: Readonly<number[]>): T[];
+//# sourceMappingURL=array.d.ts.map

package/dist/augments/type.d.ts

@@ -6,3 +6,4 @@ export type NonEmptyString<T> = T extends '' ? never : T;
  * testing packages.
  */
 export declare function ensureInstanceOf<T>(value: unknown, constructor: new (...args: any) => T, message?: string): asserts value is T;
+//# sourceMappingURL=type.d.ts.map

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

@@ -1,11 +1,11 @@
 import { CSSResult } from 'lit';
-import { CssVarsInitMap } from './css-vars';
 import { DeclarativeElementDefinitionOptions } from './definition-options';
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
-import { HostClassesInitMap } from './host-classes';
+import { CssVarsInitMap } from './properties/css-vars';
+import { EventsInitMap } from './properties/element-events';
+import { PropertyInitMapBase } from './properties/element-properties';
+import { HostClassesInitMap } from './properties/host-classes';
+import { StylesCallback } from './properties/styles';
 import { InitCallback, RenderCallback } from './render-callback';
-import { StylesCallback } from './styles';
 export type CustomElementTagName = `${string}-${string}`;
 export type DeclarativeElementInit<InputsGeneric extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
     /**
@@ -42,3 +42,4 @@ export type DeclarativeElementInit<InputsGeneric extends PropertyInitMapBase, St
     cleanupCallback?: InitCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };
+//# sourceMappingURL=declarative-element-init.d.ts.map

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

@@ -1,16 +1,16 @@
 import { RequiredAndNotNullBy, RequiredBy } from '@augment-vir/common';
 import { CSSResult, LitElement, TemplateResult } from 'lit';
-import { CssVarNameOrValueMap } from './css-vars';
 import { DeclarativeElementInit } from './declarative-element-init';
-import { EventDescriptorMap, EventsInitMap } from './element-events';
-import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
-import { HostClassNamesMap } from './host-classes';
+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 } from './render-callback';
 export type HostInstanceType<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = RequiredAndNotNullBy<DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'shadowRoot'>;
 export type DeclarativeElementDefinition<InputsGeneric extends PropertyInitMapBase = any, StateInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> = (new () => HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys> & {
     instanceType: HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 };
-export declare abstract class DeclarativeElement<InputsGeneric extends PropertyInitMapBase = any, PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> extends LitElement {
+export declare abstract class DeclarativeElement<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<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['tagName'];
     static readonly styles: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['styles'];
     static readonly isStrictInstance: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['isStrictInstance'];
@@ -24,12 +24,12 @@ export declare abstract class DeclarativeElement<InputsGeneric extends PropertyI
     static readonly cssVarNames: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarNames'];
     static readonly cssVarValues: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarValues'];
     abstract render(): TemplateResult | Promise<TemplateResult>;
-    abstract readonly instanceState: PropertyInitGeneric;
+    abstract readonly instanceState: StateInitGeneric;
     abstract readonly instanceInputs: InputsGeneric;
     abstract assignInputs(inputs: InputsGeneric): void;
     abstract readonly haveInputsBeenSet: boolean;
     abstract markInputsAsHavingBeenSet(): void;
-    abstract readonly definition: DeclarativeElementDefinition<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    abstract readonly definition: DeclarativeElementDefinition<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 }
 export interface StaticDeclarativeElementProperties<InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> {
     /** Pass through the render callback for direct unit testability */
@@ -46,3 +46,4 @@ export interface StaticDeclarativeElementProperties<InputsGeneric extends Proper
     tagName: string;
     styles: CSSResult;
 }
+//# sourceMappingURL=declarative-element.d.ts.map

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

@@ -1,5 +1,6 @@
 import { DeclarativeElementDefinition } from './declarative-element';
 import { DeclarativeElementInit } from './declarative-element-init';
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
+import { EventsInitMap } from './properties/element-events';
+import { PropertyInitMapBase } from './properties/element-properties';
 export declare function defineElementNoInputs<InputsGeneric extends PropertyInitMapBase = {}, StateGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = ''>(initInput: DeclarativeElementInit<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): DeclarativeElementDefinition<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+//# sourceMappingURL=define-element-no-inputs.d.ts.map

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

@@ -2,16 +2,16 @@ import { getObjectTypedKeys, kebabCaseToCamelCase } from '@augment-vir/common';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { DeclarativeElementMarkerSymbol } from '../declarative-element-marker-symbol';
-import { createCssVarNamesMap, createCssVarValuesMap } from './css-vars';
 import { DeclarativeElement, } from './declarative-element';
 import { defaultDeclarativeElementDefinitionOptions, IgnoreInputsNotBeenSetBeforeRenderWarningSymbol, } from './definition-options';
 import { assign } from './directives/assign.directive';
-import { createEventDescriptorMap } from './element-events';
-import { createElementUpdaterProxy } from './element-properties';
 import { hasDeclarativeElementParent } from './has-declarative-element-parent';
-import { createHostClassNamesMap } from './host-classes';
+import { createCssVarNamesMap, createCssVarValuesMap } from './properties/css-vars';
+import { createEventDescriptorMap } from './properties/element-events';
+import { createElementUpdaterProxy } from './properties/element-updater-proxy';
+import { createHostClassNamesMap } from './properties/host-classes';
+import { applyHostClasses, hostClassNamesToStylesInput } from './properties/styles';
 import { createRenderParams } from './render-callback';
-import { applyHostClasses, hostClassNamesToStylesInput } from './styles';
 export function defineElementNoInputs(initInput) {
     var _a;
     const eventsMap = createEventDescriptorMap(initInput.events);
@@ -94,7 +94,7 @@ export function defineElementNoInputs(initInput) {
                 const stateInit = initInput.stateInit || {};
                 Object.keys(stateInit).forEach((propName) => {
                     property()(this, propName);
-                    this[propName] = stateInit[propName];
+                    this.instanceState[propName] = stateInit[propName];
                 });
                 this.definition = anonymousClass;
             }

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

@@ -1,5 +1,6 @@
 import { DeclarativeElementDefinition } from './declarative-element';
 import { DeclarativeElementInit } from './declarative-element-init';
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
+import { EventsInitMap } from './properties/element-events';
+import { PropertyInitMapBase } from './properties/element-properties';
 export declare function defineElement<InputsGeneric extends PropertyInitMapBase = {}>(): <PropertyInitGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = "", CssVarKeys extends string = "">(initInput: DeclarativeElementInit<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => DeclarativeElementDefinition<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+//# sourceMappingURL=define-element.d.ts.map

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

@@ -3,3 +3,4 @@ export type DeclarativeElementDefinitionOptions = {
     [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: boolean;
 };
 export declare const defaultDeclarativeElementDefinitionOptions: DeclarativeElementDefinitionOptions;
+//# sourceMappingURL=definition-options.d.ts.map

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

@@ -21,3 +21,4 @@ declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
     render(elementDefinition: DeclarativeElementDefinition, inputsObject: Record<PropertyKey, unknown>, cleanupCallback: CleanupCallback<any>): symbol;
 }
 export {};
+//# sourceMappingURL=assign-with-clean-up.directive.d.ts.map

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

@@ -10,3 +10,4 @@ export declare function assign<DeclarativeElementGeneric extends DeclarativeElem
     };
 }>;
 export declare function assignInputsObject<DeclarativeElementInstanceGeneric extends DeclarativeElement, DeclarativeElementDefinitionGeneric extends DeclarativeElementDefinition>(expectedElementConstructor: DeclarativeElementDefinitionGeneric, element: DeclarativeElementInstanceGeneric, assignmentObject: DeclarativeElementDefinitionGeneric['inputsType']): void;
+//# sourceMappingURL=assign.directive.d.ts.map

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

@@ -11,4 +11,5 @@ export type ExtraPartInfoProperties = {
 };
 export declare function extractDeclarativeElement(partInfo: PartInfo, directiveName: string): DeclarativeElement;
 export declare function extractElement<ElementType = HTMLElement>(partInfo: PartInfo, directiveName: string, constructorClass: (new () => ElementType) | (abstract new () => ElementType)): ElementType;
-export declare function assertsIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;
+export declare function assertIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;
+//# sourceMappingURL=directive-helpers.d.ts.map

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

@@ -4,14 +4,14 @@ export function extractDeclarativeElement(partInfo, directiveName) {
     return extractElement(partInfo, directiveName, DeclarativeElement);
 }
 export function extractElement(partInfo, directiveName, constructorClass) {
-    assertsIsElementPartInfo(partInfo, directiveName);
+    assertIsElementPartInfo(partInfo, directiveName);
     const element = partInfo.element;
     if (!(element instanceof constructorClass)) {
         throw new Error(`${directiveName} attached to non ${constructorClass.name} element.`);
     }
     return element;
 }
-export function assertsIsElementPartInfo(partInfo, directiveName) {
+export function assertIsElementPartInfo(partInfo, directiveName) {
     if (partInfo.type !== PartType.ELEMENT) {
         throw new Error(`${directiveName} directive can only be attached directly to an element.`);
     }

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

@@ -12,3 +12,4 @@ import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
  */
 export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => void): DirectiveResult<any>;
 export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: NativeElementEventNameGeneric, listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => void): DirectiveResult<any>;
+//# sourceMappingURL=listen.directive.d.ts.map

package/dist/declarative-element/directives/on-dom-created.directive.d.ts

@@ -9,3 +9,4 @@ export declare const onDomCreated: (callback: OnDomCreatedCallback) => import("l
         readonly _$isConnected: boolean;
     };
 }>;
+//# sourceMappingURL=on-dom-created.directive.d.ts.map

package/dist/declarative-element/directives/on-dom-created.directive.js

@@ -1,14 +1,14 @@
 import { directive, Directive } from 'lit/directive.js';
-import { assertsIsElementPartInfo } from './directive-helpers';
+import { assertIsElementPartInfo } from './directive-helpers';
 const directiveName = 'onDomCreated';
 /** Only fires once, when the element has been created. */
 export const onDomCreated = directive(class extends Directive {
     constructor(partInfo) {
         super(partInfo);
-        assertsIsElementPartInfo(partInfo, directiveName);
+        assertIsElementPartInfo(partInfo, directiveName);
     }
     update(partInfo, [callback]) {
-        assertsIsElementPartInfo(partInfo, directiveName);
+        assertIsElementPartInfo(partInfo, directiveName);
         const newElement = partInfo.element;
         if (newElement !== this.element) {
             // use requestAnimationFrame here so it can fire property changes outside of a render loop

package/dist/declarative-element/directives/on-resize.directive.d.ts

@@ -13,3 +13,4 @@ export declare const onResize: (callback: OnResizeCallback) => import("lit-html/
         readonly _$isConnected: boolean;
     };
 }>;
+//# sourceMappingURL=on-resize.directive.d.ts.map

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

@@ -1,11 +1,11 @@
 import { directive, Directive } from 'lit/directive.js';
-import { assertsIsElementPartInfo } from './directive-helpers';
+import { assertIsElementPartInfo } from './directive-helpers';
 const directiveName = 'onResize';
 export const onResize = directive(class extends Directive {
     constructor(partInfo) {
         super(partInfo);
         this.resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
-        assertsIsElementPartInfo(partInfo, directiveName);
+        assertIsElementPartInfo(partInfo, directiveName);
     }
     fireCallback(entries) {
         var _a;
@@ -17,7 +17,7 @@ export const onResize = directive(class extends Directive {
         (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
     }
     update(partInfo, [callback]) {
-        assertsIsElementPartInfo(partInfo, directiveName);
+        assertIsElementPartInfo(partInfo, directiveName);
         this.callback = callback;
         const newElement = partInfo.element;
         // if the element changes we need to observe the new one

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

@@ -0,0 +1,10 @@
+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;
+    errorRender?: (error: Error) => unknown;
+}): unknown;
+//# sourceMappingURL=render-async-prop.directive.d.ts.map

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

@@ -0,0 +1,12 @@
+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(asyncProp.resolution);
+    }
+    else {
+        return fallback;
+    }
+}

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

@@ -0,0 +1,2 @@
+export declare function renderIf<T>(condition: boolean, result: T): T | undefined;
+//# sourceMappingURL=render-if.directive.d.ts.map

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

@@ -0,0 +1,4 @@
+import { when } from 'lit/directives/when.js';
+export function renderIf(condition, result) {
+    return when(condition, () => result);
+}

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

@@ -1 +1,2 @@
 export declare function hasDeclarativeElementParent(input: Element): boolean;
+//# sourceMappingURL=has-declarative-element-parent.d.ts.map

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,102 @@
+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,
+    });
+}

package/dist/declarative-element/{css-vars.d.ts → properties/css-vars.d.ts}

@@ -4,3 +4,4 @@ export type CssVarName<TagName extends string> = `--${TagName}-string`;
 export type CssVarNameOrValueMap<CssVarKeys extends string> = Record<CssVarKeys, CSSResult>;
 export declare function createCssVarNamesMap<TagName extends string, CssVarKeys extends string>(tagName: TagName, cssVarsInit: CssVarsInitMap<CssVarKeys> | undefined): CssVarNameOrValueMap<CssVarKeys>;
 export declare function createCssVarValuesMap<CssVarKeys extends string>(cssVarInitMap: CssVarsInitMap<CssVarKeys> | undefined, cssVarNamesMap: CssVarNameOrValueMap<CssVarKeys>): CssVarNameOrValueMap<CssVarKeys>;
+//# sourceMappingURL=css-vars.d.ts.map

package/dist/declarative-element/{element-events.d.ts → properties/element-events.d.ts}

@@ -1,4 +1,4 @@
-import { DefinedTypedEvent, DefinedTypedEventNameDefinition, TypedEvent } from '../typed-event/typed-event';
+import { DefinedTypedEvent, DefinedTypedEventNameDefinition, TypedEvent } from '../../typed-event/typed-event';
 export type EventsInitMap = Record<string, DefinedTypedEventNameDefinition<any>>;
 export declare function defineElementEvent<EventDetailGeneric>(): DefinedTypedEventNameDefinition<EventDetailGeneric>;
 export type EventInitMapEventDetailExtractor<EventTypeNameGeneric extends keyof EventsInitGeneric, EventsInitGeneric extends EventsInitMap> = EventsInitGeneric[EventTypeNameGeneric] extends DefinedTypedEventNameDefinition<infer R> ? R : never;
@@ -8,3 +8,4 @@ export type EventDescriptorMap<EventsInitGeneric extends EventsInitMap> = {
 export type EventObjectEventDetailExtractor<EventObjectGeneric extends DefinedTypedEvent<any, any>> = EventObjectGeneric extends DefinedTypedEvent<string, infer R> ? R : never;
 export type ElementEventDetailExtractor<ElementEventGeneric extends TypedEvent<any, any>> = ElementEventGeneric extends TypedEvent<string, infer R> ? R : never;
 export declare function createEventDescriptorMap<EventsInitGeneric extends EventsInitMap>(eventsInit: EventsInitGeneric | undefined): EventDescriptorMap<EventsInitGeneric>;
+//# sourceMappingURL=element-events.d.ts.map

package/dist/declarative-element/{element-events.js → properties/element-events.js}

@@ -1,4 +1,4 @@
-import { defineTypedEvent, } from '../typed-event/typed-event';
+import { defineTypedEvent, } from '../../typed-event/typed-event';
 export function defineElementEvent() {
     return defineTypedEvent();
 }

package/dist/declarative-element/{element-properties.d.ts → properties/element-properties.d.ts}

@@ -1,4 +1,3 @@
-import { DeclarativeElement } from './declarative-element';
 export type PropertyInitMapBase = Record<PropertyKey, unknown>;
 export type ElementProperty<KeyGeneric extends string | number | symbol, ValueGeneric> = {
     name: KeyGeneric;
@@ -12,5 +11,5 @@ export type StaticElementPropertyDescriptor<PropName extends string, PropValue>
 export type ElementPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase> = {
     [Property in keyof PropertyInitGeneric]: StaticElementPropertyDescriptor<string, PropertyInitGeneric[Property]>;
 };
-export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean): PropertyInitGeneric;
 export declare function createPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase>(propertyInit: PropertyInitGeneric | undefined): ElementPropertyDescriptorMap<PropertyInitGeneric>;
+//# sourceMappingURL=element-properties.d.ts.map

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

@@ -0,0 +1,21 @@
+export function createPropertyDescriptorMap(propertyInit) {
+    if (!propertyInit) {
+        return {};
+    }
+    return Object.keys(propertyInit)
+        .filter((key) => {
+        if (typeof key === 'string') {
+            return true;
+        }
+        else {
+            throw new Error(`Property init cannot have non string keys: "${key}"`);
+        }
+    })
+        .reduce((accum, currentKey) => {
+        accum[currentKey] = {
+            propName: currentKey,
+            initValue: propertyInit[currentKey],
+        };
+        return accum;
+    }, {});
+}

package/dist/declarative-element/properties/element-updater-proxy.d.ts

@@ -0,0 +1,4 @@
+import { DeclarativeElement } from '../declarative-element';
+import { PropertyInitMapBase } from './element-properties';
+export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean): PropertyInitGeneric;
+//# sourceMappingURL=element-updater-proxy.d.ts.map

package/dist/declarative-element/{element-properties.js → properties/element-updater-proxy.js}

@@ -18,26 +18,29 @@ export function createElementUpdaterProxy(element, verifyExists) {
             if (verifyExists) {
                 assertValidPropertyName(propertyName, element, element.tagName);
             }
-            const targetValue = target[propertyName];
-            if (typeof targetValue === 'function') {
-                return targetValue.bind(target);
-            }
             return elementAsProps[propertyName];
         },
-        set: (target, propertyName, value) => {
+        set: (target, propertyName, newValue) => {
             if (verifyExists) {
                 assertValidPropertyName(propertyName, element, element.tagName);
             }
-            target[propertyName] = value;
-            elementAsProps[propertyName] = value;
+            /**
+             * Don't worry about storing the value (no need to have duplicates of teh values) but at
+             * least set the property on target so we can detect it in "ownKeys" and
+             * "getOwnPropertyDescriptor".
+             */
+            target[propertyName] = undefined;
+            elementAsProps[propertyName] = newValue;
             return true;
         },
-        ownKeys: (target) => Reflect.ownKeys(target),
+        ownKeys: (target) => {
+            return Reflect.ownKeys(target);
+        },
         getOwnPropertyDescriptor(target, propertyName) {
             if (propertyName in target) {
                 return {
                     get value() {
-                        return target[propertyName];
+                        return elementAsProps[propertyName];
                     },
                     configurable: true,
                     enumerable: true,
@@ -45,28 +48,9 @@ export function createElementUpdaterProxy(element, verifyExists) {
             }
             return undefined;
         },
-        has: (target, propertyName) => Reflect.has(target, propertyName),
+        has: (target, propertyName) => {
+            return Reflect.has(target, propertyName);
+        },
     });
     return propsProxy;
 }
-export function createPropertyDescriptorMap(propertyInit) {
-    if (!propertyInit) {
-        return {};
-    }
-    return Object.keys(propertyInit)
-        .filter((key) => {
-        if (typeof key === 'string') {
-            return true;
-        }
-        else {
-            throw new Error(`Property init cannot have non string keys: "${key}"`);
-        }
-    })
-        .reduce((accum, currentKey) => {
-        accum[currentKey] = {
-            propName: currentKey,
-            initValue: propertyInit[currentKey],
-        };
-        return accum;
-    }, {});
-}

package/dist/declarative-element/{host-classes.d.ts → properties/host-classes.d.ts}

@@ -19,3 +19,4 @@ export declare function createHostClassNamesMap<TagName extends string, HostClas
  * what the host class names are
  */
 any, any>>(tagName: TagName, hostClassesInit?: HostClassesInitGeneric): HostClassNamesMap<TagName, HostClassKeys>;
+//# sourceMappingURL=host-classes.d.ts.map

package/dist/declarative-element/{styles.d.ts → properties/styles.d.ts}

@@ -21,3 +21,4 @@ export declare function applyHostClasses<InputsGeneric extends PropertyInitMapBa
     state: Readonly<StateGeneric>;
     inputs: Readonly<InputsGeneric>;
 }): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/declarative-element/{tag-name.d.ts → properties/tag-name.d.ts}

@@ -1,2 +1,3 @@
 export type WithTagName<TagName extends string, Suffix extends string> = `${TagName}-${Suffix}`;
 export declare function toHtmlSafeWithTagName<TagName extends string>(tagName: TagName, forHtmlSafe: string): WithTagName<TagName, string>;
+//# sourceMappingURL=tag-name.d.ts.map

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

@@ -1,8 +1,9 @@
 import { TemplateResult } from 'lit';
 import { TypedEvent } from '../typed-event/typed-event';
 import { DeclarativeElement, HostInstanceType } from './declarative-element';
-import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
+import { AsyncProp, SetAsyncPropInputs } from './properties/async-prop';
+import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './properties/element-events';
+import { PropertyInitMapBase } from './properties/element-properties';
 export type RenderCallback<InputsGeneric extends PropertyInitMapBase = any, StateGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = any, CssVarKeys extends string = any> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => TemplateResult;
 export type InitCallback<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => void;
 export type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<StateGeneric>) => void;
@@ -11,12 +12,16 @@ export type RenderParams<InputsGeneric extends PropertyInitMapBase, StateInitGen
     updateState: UpdateStateCallback<StateInitGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
     host: HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>>) => boolean;
+    dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>> | Event) => boolean;
     inputs: InputsGeneric;
     /**
-     * Same as dispatchElementEvent but without the extra types. This allows you to emit any events,
-     * even events from other custom elements.
+     * 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.
      */
-    genericDispatch: (event: Event) => boolean;
+    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<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string>(element: DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+//# sourceMappingURL=render-callback.d.ts.map

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

@@ -1,21 +1,31 @@
 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];
+        });
+    }
     const renderParams = {
-        /**
-         * These two dispatch properties do the same thing but their interfaces are different.
-         * DispatchEvent's type interface is much stricter.
-         */
         dispatch: (event) => element.dispatchEvent(event),
-        genericDispatch: (event) => element.dispatchEvent(event),
-        updateState: (partialProps) => {
-            getObjectTypedKeys(partialProps).forEach((propKey) => {
-                element.instanceState[propKey] = partialProps[propKey];
-            });
-        },
+        updateState,
         inputs: element.instanceInputs,
         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/declarative-element-marker-symbol.d.ts

@@ -1 +1,2 @@
 export declare const DeclarativeElementMarkerSymbol: unique symbol;
+//# sourceMappingURL=declarative-element-marker-symbol.d.ts.map

package/dist/index.d.ts

@@ -4,15 +4,18 @@ export * from './declarative-element/define-element-no-inputs';
 export type { DeclarativeElementDefinitionOptions } from './declarative-element/definition-options';
 export * from './declarative-element/directives/assign-with-clean-up.directive';
 export * from './declarative-element/directives/assign.directive';
-export * from './declarative-element/directives/awaiting.directive';
 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/element-events';
-export * from './declarative-element/element-properties';
+export * from './declarative-element/directives/render-async-prop.directive';
+export * from './declarative-element/directives/render-if.directive';
+export * from './declarative-element/properties/async-prop';
+export * from './declarative-element/properties/element-events';
+export * from './declarative-element/properties/element-properties';
 export * from './declarative-element/render-callback';
 export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
 export * from './template-transforms/vir-css/vir-css';
 export * from './template-transforms/vir-html/vir-html';
 export * from './typed-event/typed-event';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -3,13 +3,15 @@ export * from './declarative-element/define-element';
 export * from './declarative-element/define-element-no-inputs';
 export * from './declarative-element/directives/assign-with-clean-up.directive';
 export * from './declarative-element/directives/assign.directive';
-export * from './declarative-element/directives/awaiting.directive';
 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/element-events';
-export * from './declarative-element/element-properties';
+export * from './declarative-element/directives/render-async-prop.directive';
+export * from './declarative-element/directives/render-if.directive';
+export * from './declarative-element/properties/async-prop';
+export * from './declarative-element/properties/element-events';
+export * from './declarative-element/properties/element-properties';
 export * from './declarative-element/render-callback';
 export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
 export * from './template-transforms/vir-css/vir-css';

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

@@ -1,2 +1,3 @@
 export declare let declarativeElementRequired: boolean;
 export declare function requireAllCustomElementsToBeDeclarativeElements(): void;
+//# sourceMappingURL=require-declarative-element.d.ts.map

package/dist/template-transforms/has-static-tag-name.d.ts

@@ -2,3 +2,4 @@ export type ConstructorWithTagName = Function & {
     tagName: string;
 };
 export declare function hasStaticTagName(value: unknown): value is ConstructorWithTagName;
+//# sourceMappingURL=has-static-tag-name.d.ts.map

package/dist/template-transforms/nested-mapped-templates.d.ts

@@ -4,3 +4,4 @@ export declare function setMappedTemplate<PossibleValues>(templateStringsKey: Te
     result: boolean;
     reason: string;
 };
+//# sourceMappingURL=nested-mapped-templates.d.ts.map

package/dist/template-transforms/transform-template.d.ts

@@ -14,3 +14,4 @@ export declare function getTransformedTemplate<PossibleValues>(templateStringsKe
     values: PossibleValues[];
 };
 export declare function transformTemplate<TransformsGeneric extends CheckAndTransform<any>[], PossibleValues>(inputTemplateStrings: TemplateStringsArray, inputValues: PossibleValues[], checksAndTransforms: TransformsGeneric, assertValidString?: (templateStringPart: string) => void): TemplateTransform;
+//# sourceMappingURL=transform-template.d.ts.map

package/dist/template-transforms/vir-css/css-transform.d.ts

@@ -5,3 +5,4 @@ export type CssTemplateTransform = {
     valueIndexDeletions: number[];
 };
 export declare function transformCssTemplate(inputTemplateStrings: TemplateStringsArray, inputValues: (number | CSSResultGroup | DeclarativeElementDefinition)[]): CssTemplateTransform;
+//# sourceMappingURL=css-transform.d.ts.map

package/dist/template-transforms/vir-css/vir-css.d.ts

@@ -1,3 +1,4 @@
 import { CSSResult, CSSResultGroup } from 'lit';
 import { DeclarativeElementDefinition } from '../../declarative-element/declarative-element';
 export declare function css(inputTemplateStrings: TemplateStringsArray, ...inputValues: (number | CSSResultGroup | DeclarativeElementDefinition)[]): CSSResult;
+//# sourceMappingURL=vir-css.d.ts.map

package/dist/template-transforms/vir-html/html-transform.d.ts

@@ -1,3 +1,4 @@
 import { HTMLTemplateResult } from 'lit';
 import { TemplateTransform } from '../transform-template';
 export declare function transformHtmlTemplate(litTemplate: HTMLTemplateResult): TemplateTransform;
+//# sourceMappingURL=html-transform.d.ts.map

package/dist/template-transforms/vir-html/vir-html.d.ts

@@ -1,3 +1,4 @@
 import { HTMLTemplateResult } from 'lit';
 /** Enables interpolation of DeclarativeElement tag names */
 export declare function html(inputTemplateStrings: TemplateStringsArray, ...inputValues: unknown[]): HTMLTemplateResult;
+//# sourceMappingURL=vir-html.d.ts.map

package/dist/typed-event/typed-event.d.ts

@@ -17,3 +17,4 @@ export type DefinedTypedEvent<EventTypeNameGeneric extends string, EventDetailGe
  * Example: const myCustomEvent = defineTypedEvent<number>()('my-custom-event')
  */
 export declare function defineTypedEvent<EventDetailGeneric>(): <EventTypeNameGeneric extends string>(eventType: NonEmptyString<EventTypeNameGeneric>) => DefinedTypedEvent<EventTypeNameGeneric, EventDetailGeneric>;
+//# sourceMappingURL=typed-event.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "6.3.4",
+    "version": "7.0.1",
     "keywords": [
         "custom",
         "web",
@@ -25,53 +25,50 @@
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
-        "build": "virmator frontend build",
-        "compile": "rm -rf dist && tsc --project tsconfig.json",
+        "compile": "rm -rf dist && rm tsconfig.tsbuildinfo && tsc --project tsconfig.json",
         "docs:update": "virmator code-in-markdown",
         "format": "virmator format",
-        "preview": "virmator frontend preview",
-        "publish": "npm run compile && npm run test:all && virmator publish",
-        "spellcheck": "virmator spellcheck",
+        "publish": "virmator publish \"npm run compile && npm run test:all\"",
         "start": "npm install && virmator frontend",
         "test": "npm run test:types && virmator test-web",
-        "test:all": "npm run test:types && npm test && npm run spellcheck && npm run test:format && npm run test:docs",
+        "test:all": "npm run test:types && npm test && npm run test:spelling && npm run test:format && npm run test:docs",
         "test:docs": "virmator code-in-markdown check",
         "test:format": "virmator format check",
-        "test:types": "tsc --noEmit",
-        "test:web": "virmator test-web"
+        "test:spelling": "virmator spellcheck",
+        "test:types": "tsc --noEmit"
     },
     "dependencies": {
-        "@augment-vir/browser": "^6.1.5",
-        "@augment-vir/common": "^6.1.5",
-        "lit": "2.5.0"
+        "@augment-vir/browser": "^10.0.0",
+        "@augment-vir/common": "^10.0.0",
+        "lit": "2.6.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^6.1.5",
+        "@augment-vir/browser-testing": "^10.0.0",
+        "@augment-vir/node-js": "^10.0.0",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^3.1.7",
-        "@types/chai": "^4.3.4",
         "@types/mocha": "^10.0.1",
         "@web/dev-server-esbuild": "^0.3.3",
         "@web/test-runner": "^0.15.0",
         "@web/test-runner-commands": "^0.6.5",
         "@web/test-runner-playwright": "^0.9.0",
         "ansi-colors": "^4.1.3",
-        "chai": "^4.3.7",
-        "cspell": "^6.17.0",
-        "istanbul-smart-text-reporter": "^1.0.1",
+        "cspell": "^6.19.2",
+        "istanbul-smart-text-reporter": "^1.1.1",
         "markdown-code-example-inserter": "^0.1.13",
-        "mocha": "^10.2.0",
         "mocha-spec-reporter-with-file-names": "^0.0.3",
         "nyc": "^15.1.0",
-        "prettier": "^2.8.1",
+        "prettier": "^2.8.3",
         "prettier-plugin-jsdoc": "^0.4.2",
-        "prettier-plugin-multiline-arrays": "^1.1.2",
-        "prettier-plugin-organize-imports": "^3.2.1",
-        "prettier-plugin-packagejson": "^2.3.0",
-        "prettier-plugin-sort-json": "^0.0.3",
+        "prettier-plugin-multiline-arrays": "^1.1.3",
+        "prettier-plugin-organize-imports": "^3.2.2",
+        "prettier-plugin-packagejson": "^2.4.0",
+        "prettier-plugin-sort-json": "^1.0.0",
         "prettier-plugin-toml": "^0.3.1",
         "ts-node": "^10.9.1",
-        "virmator": "^5.2.1",
-        "vite": "^4.0.1"
+        "type-fest": "^3.5.2",
+        "typescript": "^4.9.4",
+        "virmator": "^5.3.3",
+        "vite": "^4.0.4"
     }
 }

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

@@ -1,18 +0,0 @@
-export type MaybePromise<T> = (T extends Promise<infer ValueType> ? T | ValueType : Promise<T> | T) | undefined | {
-    error: Error;
-};
-export type CreateStateUpdatingPromiseInputs<InnerValueGeneric, KeyGeneric extends PropertyKey, StateGeneric extends Readonly<Record<KeyGeneric, MaybePromise<InnerValueGeneric>>>> = {
-    updateState: (newState: Partial<StateGeneric>) => void;
-    stateKey: KeyGeneric;
-} & ({
-    createPromiseCallback: () => Promise<InnerValueGeneric>;
-    promise?: undefined;
-} | {
-    promise: Promise<InnerValueGeneric>;
-    createPromiseCallback?: undefined;
-});
-export declare function createStateUpdatingPromiseIfUndefined<InnerValueGeneric, KeyGeneric extends PropertyKey, StateGeneric extends Readonly<Record<KeyGeneric, MaybePromise<InnerValueGeneric>>>>(inputs: CreateStateUpdatingPromiseInputs<InnerValueGeneric, KeyGeneric, StateGeneric> & {
-    state: StateGeneric;
-}): void;
-export declare function awaiting<ValueGeneric, FallbackGeneric, CallbackReturnGeneric>(input: MaybePromise<ValueGeneric>, notResolvedYetFallback: FallbackGeneric, resolvedCallback: (resolved: ValueGeneric) => CallbackReturnGeneric): CallbackReturnGeneric | FallbackGeneric | Error | undefined;
-export declare function ensureError(input: unknown): Error;

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

@@ -1,42 +0,0 @@
-import { extractErrorMessage, isPromiseLike, typedHasProperty } from '@augment-vir/common';
-export function createStateUpdatingPromiseIfUndefined(inputs) {
-    const { state, stateKey } = inputs;
-    const currentValue = state[stateKey];
-    if (currentValue === undefined) {
-        createStateUpdatingPromise(inputs);
-    }
-}
-function createStateUpdatingPromise({ updateState, stateKey, createPromiseCallback: promiseCallback, promise, }) {
-    const output = promise !== null && promise !== void 0 ? promise : promiseCallback();
-    // as casts below are required because, even though all the generics agree, TypeScript can't figure that out here
-    if (output instanceof Promise) {
-        output
-            .then((result) => {
-            updateState({ [stateKey]: result });
-        })
-            .catch((thrownError) => {
-            const guaranteedError = ensureError(thrownError);
-            updateState({ [stateKey]: { error: guaranteedError } });
-        });
-    }
-    updateState({ [stateKey]: output });
-}
-export function awaiting(input, notResolvedYetFallback, resolvedCallback) {
-    if (isPromiseLike(input) || input == undefined) {
-        return notResolvedYetFallback;
-    }
-    else if (typedHasProperty(input, 'error')) {
-        return input.error;
-    }
-    else {
-        return resolvedCallback(input);
-    }
-}
-export function ensureError(input) {
-    if (input instanceof Error) {
-        return input;
-    }
-    else {
-        return new Error(extractErrorMessage(input));
-    }
-}