element-vir 23.4.2 → 25.0.0

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

@@ -1,23 +1,83 @@
 import { CallbackObservable } from 'observavir';
-import { stateSetupKey } from '../properties/element-vir-state-setup.js';
-/** Class for constructing async props. Should not be referenced directly, use `AsyncProp` instead. */
-class InternalAsyncPropClass extends CallbackObservable {
-}
 /**
- * An async property created by {@link asyncProp} for use within declarative elements.
+ * The current state of an {@link AsyncProp}'s value.
+ *
+ * @category Internal
+ */
+export var AsyncValueState;
+(function (AsyncValueState) {
+    /** The `.value` Promise has been rejected. */
+    AsyncValueState["Rejected"] = "rejected";
+    /** The `.value` Promise has not settled yet. */
+    AsyncValueState["Waiting"] = "waiting";
+    /** The `.value` Promise has been resolved into an awaited value. */
+    AsyncValueState["Resolved"] = "resolved";
+})(AsyncValueState || (AsyncValueState = {}));
+/**
+ * Class for constructing async props. Do not use this directly as its internal types won't be
+ * inferred correctly. Instead use {@link asyncProp} an async prop or {@link AsyncProp} for types.
  *
  * @category Internal
  */
-export const AsyncProp = InternalAsyncPropClass;
+export class InternalAsyncPropClass extends CallbackObservable {
+    /**
+     * The current `.value` if it has settled (into either a resolved value or an Error), or
+     * `undefined` if it has not.
+     */
+    get resolvedValue() {
+        if (this.isResolved()) {
+            return this.value;
+        }
+        else {
+            return undefined;
+        }
+    }
+    /** The state of the current `.value`. */
+    get state() {
+        if (this.isResolved()) {
+            return AsyncValueState.Resolved;
+        }
+        else if (this.isError()) {
+            return AsyncValueState.Rejected;
+        }
+        else {
+            return AsyncValueState.Waiting;
+        }
+    }
+    /**
+     * Checks if the current `.value` has resolved (meaning the Promise has settled and it was not
+     * rejected). This type guards the current instance's `.value` property.
+     */
+    isResolved() {
+        return !(this.value instanceof Promise);
+    }
+    /**
+     * Checks if the current `.value` has settled (meaning it is either a rejection error or a
+     * resolved value). This type guards the current instance's `.value` property.
+     */
+    isSettled() {
+        return !(this.value instanceof Promise);
+    }
+    /**
+     * Checks if the current `.value` has not settled yet settled (meaning it is still an unsettled
+     * Promise). This type guards the current instance's `.value` property.
+     */
+    isWaiting() {
+        return this.value instanceof Promise;
+    }
+    /**
+     * Checks if the current `.value` is a rejection error. This type guards the current instance's
+     * `.value` property.
+     */
+    isError() {
+        return this.value instanceof Error;
+    }
+}
 /**
  * Create an async prop for a declarative element's state.
  *
  * @category Async
  */
 export function asyncProp(init) {
-    return {
-        [stateSetupKey]() {
-            return new InternalAsyncPropClass(init);
-        },
-    };
+    return new InternalAsyncPropClass(init);
 }

package/dist/declarative-element/is-declarative-element-definition.js

@@ -8,14 +8,13 @@ const expectedStaticProperties = getObjectTypedKeys({
     events: '',
     hostClasses: '',
     init: '',
-    inputsType: '',
+    InputsType: '',
     render: '',
     slotNames: '',
-    stateInitStatic: '',
-    stateType: '',
+    StateType: '',
     styles: '',
     tagName: '',
-    updateStateType: '',
+    UpdateStateType: '',
 });
 /**
  * Asserts that the given input is a declarative element definition.

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

@@ -4,20 +4,3 @@
  * @category Internal
  */
 export type PropertyInitMapBase = Record<PropertyKey, unknown>;
-/**
- * Describes a static element property.
- *
- * @category Internal
- */
-export type StaticElementPropertyDescriptor<PropName extends string, PropValue> = {
-    propName: PropName;
-    initValue: PropValue;
-};
-/**
- * Maps a property init map into static element descriptions.
- *
- * @category Internal
- */
-export type ElementPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase> = {
-    [Property in keyof PropertyInitGeneric]: StaticElementPropertyDescriptor<string, PropertyInitGeneric[Property]>;
-};

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

@@ -1,20 +1,19 @@
 import { CustomElementTagName } from '../custom-tag-name.js';
 import { BaseCssPropertyName } from './css-properties.js';
 import { PropertyInitMapBase } from './element-properties.js';
-import { FlattenElementVirStateSetup } from './element-vir-state-setup.js';
 import { WithTagName } from './tag-name.js';
 /**
  * Base init map for defining host classes in an element definition.
  *
  * @category Internal
  */
-export type HostClassesInitMap<TagName extends CustomElementTagName, HostClassKeys extends BaseCssPropertyName<TagName>, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase> = Record<HostClassKeys, 
+export type HostClassesInitMap<TagName extends CustomElementTagName, HostClassKeys extends BaseCssPropertyName<TagName>, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase> = Record<HostClassKeys, 
 /**
  * Callback to determine when host class should be enabled (based on current inputs and state),
  * or just undefined to mark that this host class name will only be manually applied.
  */
 ((inputs: {
-    state: Readonly<FlattenElementVirStateSetup<StateInit>>;
+    state: Readonly<State>;
     inputs: Readonly<Inputs>;
 }) => boolean) | false>;
 /**

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

@@ -1,6 +1,5 @@
 import { isObservableBase } from 'observavir';
 import { property } from '../../lit-exports/base-lit-exports.js';
-import { isElementVirStateSetup, stateSetupKey } from './element-vir-state-setup.js';
 /**
  * Binds the given property key as a reactive property on the given element.
  *
@@ -46,10 +45,7 @@ export function createElementPropertyProxy(element, shouldAlreadyExist) {
     }
     const propsProxy = new Proxy({}, {
         get: valueGetter,
-        set(target, propertyKey, rawNewValue) {
-            const newValue = isElementVirStateSetup(rawNewValue)
-                ? rawNewValue[stateSetupKey]()
-                : rawNewValue;
+        set(target, propertyKey, newValue) {
             verifyProperty(propertyKey);
             const oldValue = elementAsProps[propertyKey];
             function setValueOnElement(value) {

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

@@ -3,7 +3,6 @@ import { type CustomElementTagName } from '../custom-tag-name.js';
 import { type BaseCssPropertyName } from './css-properties.js';
 import { type CssVars } from './css-vars.js';
 import { type PropertyInitMapBase } from './element-properties.js';
-import { type FlattenElementVirStateSetup } from './element-vir-state-setup.js';
 import { type HostClassNamesMap, type HostClassesInitMap } from './host-classes.js';
 /**
  * A host class instance to be referenced inside of an element definition's `styles` callback.
@@ -43,10 +42,10 @@ export declare function createStylesCallbackInput<TagName extends CustomElementT
  *
  * @category Internal
  */
-export declare function applyHostClasses<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, HostClassKeys extends BaseCssPropertyName<TagName>>({ host, hostClassesInit, hostClassNames, state, inputs, }: {
+export declare function applyHostClasses<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, HostClassKeys extends BaseCssPropertyName<TagName>>({ host, hostClassesInit, hostClassNames, state, inputs, }: {
     host: HTMLElement;
-    hostClassesInit: Readonly<HostClassesInitMap<TagName, HostClassKeys, Inputs, StateInit>> | undefined;
+    hostClassesInit: Readonly<HostClassesInitMap<TagName, HostClassKeys, Inputs, State>> | undefined;
     hostClassNames: HostClassNamesMap<string, HostClassKeys>;
-    state: Readonly<FlattenElementVirStateSetup<StateInit>>;
+    state: Readonly<State>;
     inputs: Readonly<Inputs>;
 }): void;

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

@@ -6,37 +6,36 @@ import { type BaseCssPropertyName } from './properties/css-properties.js';
 import { type CssVars } from './properties/css-vars.js';
 import { type EventDescriptorMap, type EventInitMapEventDetailExtractor, type EventsInitMap } from './properties/element-events.js';
 import { type PropertyInitMapBase } from './properties/element-properties.js';
-import { type AllowElementVirStateSetup, type FlattenElementVirStateSetup } from './properties/element-vir-state-setup.js';
 import { type SlotNameMap } from './slot-names.js';
 /**
  * Type for the `render` element definition method.
  *
  * @category Internal
  */
-export type RenderCallback<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, StateInit extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, SlotNames extends ReadonlyArray<string> = any> = (params: RenderParams<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => HtmlInterpolation;
+export type RenderCallback<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, SlotNames extends ReadonlyArray<string> = any> = (params: RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => HtmlInterpolation;
 /**
  * Type for the `init` and `cleanup` element definition methods.
  *
  * @category Internal
  */
-export type InitCallback<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = (params: RenderParams<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => undefined | void;
+export type InitCallback<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = (params: RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => undefined | void;
 /**
  * Type for the `updateState` render parameter.
  *
  * @category Internal
  */
-export type UpdateStateCallback<StateInit extends PropertyInitMapBase> = (newState: Partial<AllowElementVirStateSetup<StateInit>>) => void;
+export type UpdateStateCallback<State extends PropertyInitMapBase> = (newState: Partial<State>) => void;
 /**
  * The full parameters object passed to `render`, `init`, and `cleanup` element definition methods.
  *
  * @category Internal
  */
-export type RenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
-    state: Readonly<FlattenElementVirStateSetup<StateInit>>;
+export type RenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
+    state: Readonly<State>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
-    updateState: UpdateStateCallback<StateInit>;
+    updateState: UpdateStateCallback<State>;
     events: EventDescriptorMap<TagName, EventsInit>;
-    host: DeclarativeElementHost<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    host: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
     slotNames: SlotNameMap<SlotNames>;
     /** Dispatch an event from the current element. */
     dispatch: <EventTypeName extends keyof EventsInit>(event: TypedEvent<EventTypeName extends string ? EventTypeName : never, EventInitMapEventDetailExtractor<EventTypeName, EventsInit>> | Event) => boolean;
@@ -48,9 +47,9 @@ export type RenderParams<TagName extends CustomElementTagName, Inputs extends Pr
  *
  * @category Internal
  */
-export declare function createRenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>>({ element, eventsMap, cssVars, slotNamesMap, }: {
-    element: DeclarativeElement<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare function createRenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>>({ element, eventsMap, cssVars, slotNamesMap, }: {
+    element: DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
     eventsMap: EventDescriptorMap<TagName, EventsInit>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
     slotNamesMap: SlotNameMap<SlotNames>;
-}): RenderParams<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+}): RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

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

@@ -1,8 +1,7 @@
 import { PartialWithNullable } from '@augment-vir/common';
 import { CustomElementTagName } from './custom-tag-name.js';
 import { DeclarativeElementInit } from './declarative-element-init.js';
-import { VerifiedElementNoInputsInit } from './define-element-no-inputs.js';
-import { VerifiedElementInit } from './define-element.js';
+import { DeclarativeElementInputErrorParams } from './define-element.js';
 import { BaseCssPropertyName } from './properties/css-properties.js';
 import { EventsInitMap } from './properties/element-events.js';
 import { PropertyInitMapBase } from './properties/element-properties.js';
@@ -11,17 +10,17 @@ import { PropertyInitMapBase } from './properties/element-properties.js';
  *
  * @category Internal
  */
-export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateInitRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}> = PartialWithNullable<{
+export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}> = PartialWithNullable<{
     /**
      * An optional callback which asserts that an element definition init object given to the
      * wrapped element definition functions is valid.
      */
-    assertInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateInitRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>) => void;
+    assertInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>) => void;
     /**
      * An optional callback which transforms a element definition init object given to the wrapped
      * element definition.
      */
-    transformInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateInitRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>) => DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateInitRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>;
+    transformInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>) => DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>;
 }>;
 /**
  * Wraps {@link defineElement} and {@link defineElementNoInputs} in a superset of requirements. For
@@ -35,9 +34,9 @@ export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTag
  *
  * @category Element Definition
  */
-export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateInitRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): {
+export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): {
     /** A wrapped function for defining an element with inputs. */
-    defineElement: <Inputs extends InputsRequirement>() => <const TagName extends TagNameRequirement, StateInit extends StateInitRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    defineElement: <Inputs extends InputsRequirement>(...errorParams: DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends TagNameRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
     /** A wrapped function for defining an element without inputs. */
-    defineElementNoInputs: <const TagName extends TagNameRequirement, Inputs extends InputsRequirement, StateInit extends StateInitRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    defineElementNoInputs: <const TagName extends TagNameRequirement, Inputs extends InputsRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
 };

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

@@ -20,10 +20,10 @@ export function wrapDefineElement(options) {
     };
     return {
         /** A wrapped function for defining an element with inputs. */
-        defineElement: () => {
+        defineElement: (...errorParams) => {
             return (inputs) => {
                 assertInputs(inputs);
-                return defineElement()(transformInputs(inputs));
+                return defineElement(...errorParams)(transformInputs(inputs));
             };
         },
         /** A wrapped function for defining an element without inputs. */

package/dist/index.d.ts

@@ -8,7 +8,6 @@ export * from './declarative-element/definition-options.js';
 export * from './declarative-element/directives/async-prop.js';
 export * from './declarative-element/directives/create-attribute-directive.js';
 export * from './declarative-element/directives/directive-helpers.js';
-export * from './declarative-element/directives/is-resolved.directive.js';
 export * from './declarative-element/directives/listen.directive.js';
 export * from './declarative-element/directives/on-dom-created.directive.js';
 export * from './declarative-element/directives/on-dom-rendered.directive.js';
@@ -23,9 +22,7 @@ export * from './declarative-element/properties/css-properties.js';
 export * from './declarative-element/properties/css-vars.js';
 export * from './declarative-element/properties/element-events.js';
 export * from './declarative-element/properties/element-properties.js';
-export * from './declarative-element/properties/element-vir-state-setup.js';
 export * from './declarative-element/properties/host-classes.js';
-export * from './declarative-element/properties/per-instance.js';
 export * from './declarative-element/properties/styles.js';
 export * from './declarative-element/properties/tag-name.js';
 export * from './declarative-element/render-callback.js';

package/dist/index.js

@@ -8,7 +8,6 @@ export * from './declarative-element/definition-options.js';
 export * from './declarative-element/directives/async-prop.js';
 export * from './declarative-element/directives/create-attribute-directive.js';
 export * from './declarative-element/directives/directive-helpers.js';
-export * from './declarative-element/directives/is-resolved.directive.js';
 export * from './declarative-element/directives/listen.directive.js';
 export * from './declarative-element/directives/on-dom-created.directive.js';
 export * from './declarative-element/directives/on-dom-rendered.directive.js';
@@ -23,9 +22,7 @@ export * from './declarative-element/properties/css-properties.js';
 export * from './declarative-element/properties/css-vars.js';
 export * from './declarative-element/properties/element-events.js';
 export * from './declarative-element/properties/element-properties.js';
-export * from './declarative-element/properties/element-vir-state-setup.js';
 export * from './declarative-element/properties/host-classes.js';
-export * from './declarative-element/properties/per-instance.js';
 export * from './declarative-element/properties/styles.js';
 export * from './declarative-element/properties/tag-name.js';
 export * from './declarative-element/render-callback.js';

package/dist/readme-examples/my-custom-define.d.ts

@@ -1,4 +1,4 @@
 export type VirTagName = `vir-${string}`;
-export declare const defineVirElement: <Inputs extends {}>() => <const TagName extends `vir-${string}`, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-export declare const defineVerifiedVirElement: <Inputs extends {}>() => <const TagName extends `vir-${string}`, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineVerifiedVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-export declare const defineTransformedVirElement: <Inputs extends {}>() => <const TagName extends `vir-${string}`, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineTransformedVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare const defineVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare const defineVerifiedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineVerifiedVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare const defineTransformedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineTransformedVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

package/dist/readme-examples/my-with-async-prop.element.d.ts

@@ -2,8 +2,9 @@ type EndpointData = number[];
 export declare const MyWithAsyncProp: import("../index.js").DeclarativeElementDefinition<"my-with-async-prop", {
     endpoint: string;
 }, {
-    data: import("../index.js").ElementVirStateSetup<import("../index.js").AsyncProp<EndpointData, {
+    data: import("../index.js").AsyncProp<EndpointData, {
         endpoint: string;
-    }>>;
+    }>;
+    hi: string;
 }, {}, "my-with-async-prop-", "my-with-async-prop-", readonly []>;
 export {};

package/dist/readme-examples/my-with-async-prop.element.js

@@ -10,12 +10,15 @@ async function loadSomething(endpoint) {
 }
 export const MyWithAsyncProp = defineElement()({
     tagName: 'my-with-async-prop',
-    stateInitStatic: {
-        data: asyncProp({
-            async updateCallback({ endpoint }) {
-                return loadSomething(endpoint);
-            },
-        }),
+    state() {
+        return {
+            data: asyncProp({
+                async updateCallback({ endpoint }) {
+                    return loadSomething(endpoint);
+                },
+            }),
+            hi: '',
+        };
     },
     render({ inputs, state }) {
         /**

package/dist/readme-examples/my-with-cleanup-callback.element.d.ts

@@ -1,3 +1,3 @@
 export declare const MyWithAssignmentCleanupCallback: import("../index.js").DeclarativeElementDefinition<"my-with-cleanup-callback", {}, {
-    intervalId: undefined | number;
+    intervalId: number;
 }, {}, "my-with-cleanup-callback-", "my-with-cleanup-callback-", readonly []>;

package/dist/readme-examples/my-with-cleanup-callback.element.js

@@ -1,23 +1,17 @@
 import { defineElementNoInputs, html } from '../index.js';
 export const MyWithAssignmentCleanupCallback = defineElementNoInputs({
     tagName: 'my-with-cleanup-callback',
-    stateInitStatic: {
-        intervalId: undefined,
-    },
-    init: ({ updateState }) => {
-        updateState({
+    state() {
+        return {
             intervalId: window.setInterval(() => console.info('hi'), 1000),
-        });
+        };
     },
     render() {
         return html `
             <h1>My App</h1>
         `;
     },
-    cleanup: ({ state, updateState }) => {
+    cleanup({ state }) {
         window.clearInterval(state.intervalId);
-        updateState({
-            intervalId: undefined,
-        });
     },
 });

package/dist/readme-examples/my-with-event-listening.element.js

@@ -2,8 +2,10 @@ import { defineElementNoInputs, html, listen } from '../index.js';
 import { MyWithEvents } from './my-with-events.element.js';
 export const MyWithEventListening = defineElementNoInputs({
     tagName: 'my-with-event-listening',
-    stateInitStatic: {
-        myNumber: -1,
+    state() {
+        return {
+            myNumber: -1,
+        };
     },
     render({ state, updateState }) {
         return html `

package/dist/readme-examples/my-with-host-class-definition.element.js

@@ -1,8 +1,10 @@
 import { css, defineElementNoInputs, html } from '../index.js';
 export const MyWithHostClassDefinition = defineElementNoInputs({
     tagName: 'my-with-host-class-definition',
-    stateInitStatic: {
-        myProp: 'hello there',
+    state() {
+        return {
+            myProp: 'hello there',
+        };
     },
     hostClasses: {
         /**

package/dist/readme-examples/my-with-update-state.element.js

@@ -1,13 +1,15 @@
 import { defineElementNoInputs, html, listen } from '../index.js';
 export const MyWithUpdateState = defineElementNoInputs({
     tagName: 'my-with-update-state',
-    stateInitStatic: {
-        username: 'dev',
-        /**
-         * Use "as" to create state properties that can be types other than the initial value's
-         * type. This is particularly useful when, as below, the initial value is undefined.
-         */
-        email: undefined,
+    state() {
+        return {
+            username: 'dev',
+            /**
+             * Use "as" to create state properties that can be types other than the initial value's
+             * type. This is particularly useful when, as below, the initial value is undefined.
+             */
+            email: undefined,
+        };
     },
     render({ state, updateState }) {
         return html `

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "23.4.2",
+    "version": "25.0.0",
     "keywords": [
         "custom",
         "web",
@@ -38,19 +38,19 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.9.2",
-        "@augment-vir/common": "^31.9.2",
-        "date-vir": "^7.2.1",
+        "@augment-vir/assert": "^31.10.0",
+        "@augment-vir/common": "^31.10.0",
+        "date-vir": "^7.3.1",
         "lit": "^3.2.1",
         "lit-css-vars": "^3.0.11",
         "lit-html": "^3.2.1",
-        "object-shape-tester": "^5.1.4",
+        "object-shape-tester": "^5.1.5",
         "observavir": "^2.0.5",
-        "typed-event-target": "^4.0.2"
+        "typed-event-target": "^4.0.3"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.9.2",
-        "@augment-vir/web": "^31.9.2",
+        "@augment-vir/test": "^31.10.0",
+        "@augment-vir/web": "^31.10.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.0",
         "@web/test-runner-commands": "^0.9.0",
@@ -59,10 +59,10 @@
         "html-spec-tags": "^2.2.2",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "type-fest": "^4.35.0",
+        "type-fest": "^4.37.0",
         "typedoc": "^0.27.9",
-        "typescript": "5.7.3",
-        "vite": "^6.2.0",
+        "typescript": "5.8.2",
+        "vite": "^6.2.1",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "engines": {