element-vir 23.4.2 → 24.0.0

package/README.md

@@ -169,13 +169,15 @@ import {defineElementNoInputs, html, listen} from 'element-vir';
 
 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 as string | 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 as string | undefined,
+        };
     },
     render({state, updateState}) {
         return html`
@@ -219,8 +221,8 @@ export const MyWithAssignment = defineElementNoInputs({
 
 There are two other callbacks you can define that are sort of similar to lifecycle callbacks. They are much simpler than lifecycle callbacks however.
 
-- `init`: called right before the first render and has all state and inputs setup. (This is similar to `connectedCallback` in standard HTMLElement classes but is fired much later, after inputs are assigned, to avoid race conditions.)
-- `cleanup`: called when an element is removed from the DOM. (This is the same as the `disconnectedCallback` in standard HTMLElement classes.)
+-   `init`: called right before the first render and has all state and inputs setup. (This is similar to `connectedCallback` in standard HTMLElement classes but is fired much later, after inputs are assigned, to avoid race conditions.)
+-   `cleanup`: called when an element is removed from the DOM. (This is the same as the `disconnectedCallback` in standard HTMLElement classes.)
 
 <!-- example-link: src/readme-examples/my-with-cleanup-callback.element.ts -->
 
@@ -229,24 +231,18 @@ import {defineElementNoInputs, html} from 'element-vir';
 
 export const MyWithAssignmentCleanupCallback = defineElementNoInputs({
     tagName: 'my-with-cleanup-callback',
-    stateInitStatic: {
-        intervalId: undefined as undefined | number,
-    },
-    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,
-        });
     },
 });
 ```
@@ -296,8 +292,10 @@ 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`
@@ -369,8 +367,8 @@ Host classes can be defined and used with type safety. Host classes are used to
 
 Host classes are defined by passing an object to `hostClasses` at element definition time. Each property name in the `hostClasses` object creates a host class name (note that host class names must start with the element's tag name). Each value in the `hostClasses` object defines behavior for the host class:
 
-- if the value is a callback, that host class will automatically be applied if the callback returns true after a render is executed.
-- if the value is `false`, the host class is never automatically applied, it must be manually applied by consumers.
+-   if the value is a callback, that host class will automatically be applied if the callback returns true after a render is executed.
+-   if the value is `false`, the host class is never automatically applied, it must be manually applied by consumers.
 
 Apply host classes in the element's stylesheet by using a callback for the styles property:
 
@@ -381,8 +379,10 @@ import {css, defineElementNoInputs, html} from 'element-vir';
 
 export const MyWithHostClassDefinition = defineElementNoInputs({
     tagName: 'my-with-host-class-definition',
-    stateInitStatic: {
-        myProp: 'hello there',
+    state() {
+        return {
+            myProp: 'hello there',
+        };
     },
     hostClasses: {
         /**
@@ -629,12 +629,15 @@ async function loadSomething(endpoint: string): Promise<EndpointData> {
 
 export const MyWithAsyncProp = defineElement<{endpoint: string}>()({
     tagName: 'my-with-async-prop',
-    stateInitStatic: {
-        data: asyncProp({
-            async updateCallback({endpoint}: {endpoint: string}) {
-                return loadSomething(endpoint);
-            },
-        }),
+    state() {
+        return {
+            data: asyncProp({
+                async updateCallback({endpoint}: {endpoint: string}) {
+                    return loadSomething(endpoint);
+                },
+            }),
+            hi: '',
+        };
     },
     render({inputs, state}) {
         /**

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

@@ -7,36 +7,30 @@ import { type EventsInitMap } from './properties/element-events.js';
 import { type PropertyInitMapBase } from './properties/element-properties.js';
 import { type HostClassesInitMap } from './properties/host-classes.js';
 import { type StylesCallback } from './properties/styles.js';
-import { type InitCallback, type RenderCallback } from './render-callback.js';
+import { type InitCallback, type RenderCallback, type RenderParams } from './render-callback.js';
 /**
  * Initialization for an element-vir declarative element. This defines all the pieces required for
  * rendering the element.
  *
  * @category Internal
  */
-export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
+export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
      */
     tagName: TagName;
     /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys>;
-    /**
-     * The definition of and initial values for the element's internal state. Note that this is
-     * defined statically: the init value will be the same for all instances of this element because
-     * it is only defined once.
-     */
-    stateInitStatic?: StateInit;
+    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys> | undefined;
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */
-    events?: EventsInit;
-    slotNames?: SlotNames;
+    events?: EventsInit | undefined;
+    slotNames?: SlotNames | undefined;
     /**
      * HTML host classes. Values can be callbacks to determine when a host class should be defined,
      * based on current instance state or inputs, or just false to indicate that the host class will
      * only be manually set.
      */
-    hostClasses?: HostClassesInitMap<TagName, HostClassKeys, Inputs, StateInit>;
+    hostClasses?: HostClassesInitMap<TagName, HostClassKeys, Inputs, State> | undefined;
     /**
      * CSS Vars for the component. Keys of this object should be kebab-case and start with the
      * element's tag name.
@@ -45,9 +39,17 @@ export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs
      * then passed to the styles property, which must be a callback to take advantage of these.
      */
     cssVars?: CssVarsInitMap<TagName, CssVarKeys>;
+    /**
+     * Make sure to define this at the top of your element init object or TypeScript will fail to
+     * infer the element's state type.
+     *
+     * Setup the element's initial state. This is only called once per element instance, before the
+     * first render. The return type of this method becomes the element's state type.
+     */
+    state?: (params: Omit<RenderParams<TagName, Inputs, any, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, 'state' | 'updateState'>) => Extract<keyof State, keyof HTMLElement> extends never ? Extract<keyof State, keyof Inputs> extends never ? State : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<keyof State, keyof Inputs> extends string | number | bigint | boolean | null | undefined ? Extract<keyof State, keyof Inputs> : ''}` : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<keyof State, keyof HTMLElement>}`;
     /** Called as part of the first render call, before the first render call. */
-    init?: InitCallback<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-    render: RenderCallback<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-    cleanup?: InitCallback<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    init?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames> | undefined;
+    render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    cleanup?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames> | undefined;
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };

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

@@ -8,8 +8,7 @@ import { type DeclarativeElementDefinitionOptions } from './definition-options.j
 import { type BaseCssPropertyName } from './properties/css-properties.js';
 import { type CssVars } from './properties/css-vars.js';
 import { type EventDescriptorMap, type EventsInitMap } from './properties/element-events.js';
-import { type ElementPropertyDescriptorMap, type PropertyInitMapBase } from './properties/element-properties.js';
-import { type FlattenElementVirStateSetup } from './properties/element-vir-state-setup.js';
+import { type PropertyInitMapBase } from './properties/element-properties.js';
 import { type HostClassNamesMap } from './properties/host-classes.js';
 import { type ObservableListenerMap } from './properties/property-proxy.js';
 import { type RenderCallback, type RenderParams, type UpdateStateCallback } from './render-callback.js';
@@ -20,21 +19,21 @@ import { type SlotNameMap } from './slot-names.js';
  *
  * @category Internal
  */
-export type DeclarativeElementHost<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> = SetRequiredAndNotNull<Omit<DeclarativeElement<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, Exclude<keyof StaticDeclarativeElementProperties<any, any, any, any, any, any, any>, keyof HTMLElement>>, 'shadowRoot'>;
+export type DeclarativeElementHost<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> = SetRequiredAndNotNull<Omit<DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, Exclude<keyof StaticDeclarativeElementProperties<any, any, any, any, any, any, any>, keyof HTMLElement>>, 'shadowRoot'>;
 /**
  * The full definition for a declarative element.
  *
  * @category Internal
  */
-export type DeclarativeElementDefinition<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> = (new () => DeclarativeElementHost<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) & StaticDeclarativeElementProperties<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames> & {
-    instanceType: DeclarativeElementHost<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export type DeclarativeElementDefinition<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> = (new () => DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) & StaticDeclarativeElementProperties<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames> & {
+    instanceType: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
 };
 /**
  * Abstract class base for all declarative elements.
  *
  * @category Internal
  */
-export declare abstract class DeclarativeElement<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> extends LitElement {
+export declare abstract class DeclarativeElement<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> extends LitElement {
     /**
      * Assign inputs to an element instantiation. Use only on the opening tag.
      *
@@ -57,7 +56,6 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
     static readonly stateType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['stateType'];
     static readonly updateStateType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['updateStateType'];
     static readonly events: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['events'];
-    static readonly stateInitStatic: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['stateInitStatic'];
     static readonly init: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['init'];
     static readonly elementOptions: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['elementOptions'];
     static readonly hostClasses: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['hostClasses'];
@@ -65,15 +63,15 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
     static readonly slotNames: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['slotNames'];
     abstract _lastRenderError: Error | undefined;
     abstract _internalRenderCount: number;
-    abstract _lastRenderedProps: Readonly<Pick<RenderParams<any, Inputs, StateInit, any, any, any, any>, 'inputs' | 'state'>>;
+    abstract _lastRenderedProps: Readonly<Pick<RenderParams<any, Inputs, State, any, any, any, any>, 'inputs' | 'state'>>;
     /**
      * Calls all destroy methods on all state properties, if they exist. This is automatically
      * called whenever the element is detached.
      */
     abstract destroy(): void;
     abstract render(): unknown;
-    abstract readonly instanceState: FlattenElementVirStateSetup<StateInit>;
-    abstract readonly observablePropertyListenerMap: ObservableListenerMap<StateInit & Inputs>;
+    abstract readonly instanceState: State;
+    abstract readonly observablePropertyListenerMap: ObservableListenerMap<State & Inputs>;
     abstract readonly instanceInputs: Inputs;
     /**
      * Used to assign inputs to the given element. This can be externally called as an API for
@@ -83,7 +81,7 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
     abstract assignInputs(inputs: EmptyObject extends Required<Inputs> ? never : Partial<Inputs>): void;
     abstract _haveInputsBeenSet: boolean;
     /** The element definition for this element instance. */
-    abstract readonly definition: DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    abstract readonly definition: DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
 }
 /**
  * The assign inputs method of a declarative element.
@@ -96,20 +94,19 @@ export type AssignMethod<Inputs extends PropertyInitMapBase> = IsAny<Inputs> ext
  *
  * @category Internal
  */
-export type StaticDeclarativeElementProperties<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
+export type StaticDeclarativeElementProperties<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
     /** Assign inputs to an element directly on its interpolated tag. */
     readonly assign: AssignMethod<Inputs>;
     assignedInputs: Inputs | undefined;
     /** Pass through the render callback for direct unit testability */
-    readonly render: RenderCallback<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    readonly render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
     readonly events: EventDescriptorMap<TagName, EventsInit>;
-    readonly stateInitStatic: ElementPropertyDescriptorMap<StateInit>;
     readonly slotNames: SlotNameMap<SlotNames>;
-    readonly init: DeclarativeElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    readonly init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
     readonly elementOptions: DeclarativeElementDefinitionOptions;
     readonly inputsType: Inputs;
-    readonly stateType: Readonly<FlattenElementVirStateSetup<StateInit>>;
-    readonly updateStateType: UpdateStateCallback<StateInit>;
+    readonly stateType: Readonly<State>;
+    readonly updateStateType: UpdateStateCallback<State>;
     readonly hostClasses: HostClassNamesMap<string, HostClassKeys>;
     readonly cssVars: CssVars<TagName, CssVarKeys>;
     readonly tagName: string;

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

@@ -27,7 +27,6 @@ export class DeclarativeElement extends LitElement {
     static stateType;
     static updateStateType;
     static events;
-    static stateInitStatic;
     static init;
     static elementOptions;
     static hostClasses;

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

@@ -4,13 +4,6 @@ import { DeclarativeElementDefinition } from './declarative-element.js';
 import { BaseCssPropertyName } from './properties/css-properties.js';
 import { EventsInitMap } from './properties/element-events.js';
 import { PropertyInitMapBase } from './properties/element-properties.js';
-/**
- * Verifies that the given {@link DeclarativeElementInit} for an element definition without inputs
- * does not have any state properties that clash with built-in HTML element properties.
- *
- * @category Internal
- */
-export type VerifiedElementNoInputsInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = Extract<keyof StateInit, keyof HTMLElement> extends never ? DeclarativeElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames> : 'ERROR: Cannot define an element state property that clashes with native HTMLElement properties.';
 /**
  * Defines an element without any inputs.
  *
@@ -30,4 +23,4 @@ export type VerifiedElementNoInputsInit<TagName extends CustomElementTagName, In
  * });
  * ```
  */
-export declare function defineElementNoInputs<const TagName extends CustomElementTagName = '-', Inputs extends PropertyInitMapBase = {}, StateInit extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(initInput: VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>): DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare function defineElementNoInputs<const TagName extends CustomElementTagName = '-', Inputs extends PropertyInitMapBase = {}, State extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>): DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

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

@@ -33,9 +33,7 @@ import { createSlotNamesMap } from './slot-names.js';
  * });
  * ```
  */
-export function defineElementNoInputs(initInput) {
-    /** This as cast is safe only because of the following run-time type check. */
-    const init = initInput;
+export function defineElementNoInputs(init) {
     if (!check.isObject(init)) {
         throw new TypeError('Cannot define element with non-object init: ${init}');
     }
@@ -94,7 +92,6 @@ export function defineElementNoInputs(initInput) {
         static cssVars = cssVars;
         static init = init;
         static slotNames = slotNamesMap;
-        static stateInitStatic = init.stateInitStatic;
         get instanceType() {
             throw new Error(`"instanceType" was called on ${init.tagName} as a value but it is only for types.`);
         }
@@ -105,6 +102,7 @@ export function defineElementNoInputs(initInput) {
             throw new Error(`"stateType" was called on ${init.tagName} as a value but it is only for types.`);
         }
         _initCalled = false;
+        _stateCalled = false;
         _hasRendered = false;
         _lastRenderedProps = undefined;
         _haveInputsBeenSet = false;
@@ -121,6 +119,17 @@ export function defineElementNoInputs(initInput) {
                 }
                 this._hasRendered = true;
                 const renderParams = this.createRenderParams();
+                if (!this._stateCalled && init.state) {
+                    this._stateCalled = true;
+                    const stateInit = init.state(renderParams);
+                    if (stateInit instanceof Promise) {
+                        throw new TypeError('init cannot be asynchronous');
+                    }
+                    getObjectTypedKeys(stateInit).forEach((stateKey) => {
+                        bindReactiveProperty(this, stateKey);
+                        this.instanceState[stateKey] = stateInit[stateKey];
+                    });
+                }
                 if (!this._initCalled && init.init) {
                     this._initCalled = true;
                     if (init.init(renderParams) instanceof Promise) {
@@ -189,13 +198,6 @@ export function defineElementNoInputs(initInput) {
         instanceState = createElementPropertyProxy(this, !elementOptions.allowPolymorphicState);
         constructor() {
             super();
-            const stateInitStatic = 
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            init.stateInitStatic || {};
-            getObjectTypedKeys(stateInitStatic).forEach((stateKey) => {
-                bindReactiveProperty(this, stateKey);
-                this.instanceState[stateKey] = stateInitStatic[stateKey];
-            });
             this.definition = anonymousClass;
         }
     };

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

@@ -1,17 +1,18 @@
 import { CustomElementTagName } from './custom-tag-name.js';
+import { DeclarativeElementInit } from './declarative-element-init.js';
 import { DeclarativeElementDefinition } from './declarative-element.js';
-import { VerifiedElementNoInputsInit } from './define-element-no-inputs.js';
 import { BaseCssPropertyName } from './properties/css-properties.js';
 import { EventsInitMap } from './properties/element-events.js';
 import { PropertyInitMapBase } from './properties/element-properties.js';
 /**
- * Verifies that the given {@link DeclarativeElementInit} for an element definition with inputs does
- * not have any state or input properties that clash with built-in HTML element properties, or state
- * / input properties that clash with each other.
+ * Verifies that the given `Inputs` type does not clash with built-in HTMLElement properties. This
+ * is used within {@link defineElement}.
  *
  * @category Internal
  */
-export type VerifiedElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = Extract<keyof StateInit, keyof Inputs> extends never ? Extract<keyof Inputs, keyof HTMLElement> extends never ? VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames> : 'ERROR: Cannot define an element input property that clashes with native HTMLElement properties.' : "ERROR: Cannot define an element state property that clashes with the element's input properties.";
+export type DeclarativeElementInputErrorParams<Inputs extends PropertyInitMapBase> = Extract<keyof Inputs, keyof HTMLElement> extends never ? [] : [
+    'ERROR: Cannot define an element input property that clashes with native HTMLElement properties.'
+];
 /**
  * Defines an element with inputs. If the element actually has no inputs, use
  * {@link defineElementNoInputs} instead. Note that this function must be called twice, due to
@@ -33,4 +34,9 @@ export type VerifiedElementInit<TagName extends CustomElementTagName, Inputs ext
  * });
  * ```
  */
-export declare function defineElement<Inputs extends PropertyInitMapBase = {}>(): <const TagName extends CustomElementTagName, StateInit extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(initInput: VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare function defineElement<Inputs extends PropertyInitMapBase = {}>(
+/**
+ * These `errorParams` is present when there are problems with the `Inputs` type. If it is
+ * present, the error should be fixed. This should always be empty.
+ */
+...errorParams: DeclarativeElementInputErrorParams<Inputs>): <const TagName extends CustomElementTagName, State extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(initInput: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
-import { check } from '@augment-vir/assert';
+import { assert, check } from '@augment-vir/assert';
 import { defineElementNoInputs } from './define-element-no-inputs.js';
 /**
  * Defines an element with inputs. If the element actually has no inputs, use
@@ -22,7 +22,13 @@ import { defineElementNoInputs } from './define-element-no-inputs.js';
  * });
  * ```
  */
-export function defineElement() {
+export function defineElement(
+/**
+ * These `errorParams` is present when there are problems with the `Inputs` type. If it is
+ * present, the error should be fixed. This should always be empty.
+ */
+...errorParams) {
+    assert.isEmpty(errorParams);
     return (initInput) => {
         const init = initInput;
         if (!check.isObject(init)) {

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

@@ -1,6 +1,5 @@
 import { CallbackObservable, CallbackObservableInit } from 'observavir';
 import { Constructor } from 'type-fest';
-import { ElementVirStateSetup } from '../properties/element-vir-state-setup.js';
 export type { AsyncValue } from 'observavir';
 /** Class for constructing async props. Should not be referenced directly, use `AsyncProp` instead. */
 declare class InternalAsyncPropClass<Value, Params> extends CallbackObservable<Value, Params> {
@@ -24,4 +23,4 @@ export declare const AsyncProp: Constructor<AsyncProp<unknown, unknown>, Constru
  *
  * @category Async
  */
-export declare function asyncProp<Value, Params = void>(init?: CallbackObservableInit<Value, Params>): ElementVirStateSetup<AsyncProp<Value, Params>>;
+export declare function asyncProp<Value, Params = void>(init?: CallbackObservableInit<Value, Params>): AsyncProp<Value, Params>;

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

@@ -1,5 +1,4 @@
 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 {
 }
@@ -15,9 +14,5 @@ export const AsyncProp = InternalAsyncPropClass;
  * @category Async
  */
 export function asyncProp(init) {
-    return {
-        [stateSetupKey]() {
-            return new InternalAsyncPropClass(init);
-        },
-    };
+    return new InternalAsyncPropClass(init);
 }

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

@@ -13,8 +13,10 @@ import { AsyncProp, AsyncValue } from './async-prop.js';
  *
  * const MyElement = defineElementNoInputs({
  *     tagName: 'my-element',
- *     stateInitStatic: {
- *         myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *     state() {
+ *         return {
+ *             myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *         };
  *     },
  *     render({state}) {
  *         if (isAsyncError(state.myProp.value)) {
@@ -49,8 +51,10 @@ export declare function isResolved<Value extends AsyncValue<any>>(asyncValue: Va
  *
  * const MyElement = defineElementNoInputs({
  *     tagName: 'my-element',
- *     stateInitStatic: {
- *         myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *     state() {
+ *         return {
+ *             myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *         };
  *     },
  *     render({state}) {
  *         if (isAsyncError(state.myProp.value)) {
@@ -84,8 +88,10 @@ export declare function isAsyncError<Value extends AsyncValue<any>>(asyncValue:
  *
  * const MyElement = defineElementNoInputs({
  *     tagName: 'my-element',
- *     stateInitStatic: {
- *         myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *     state() {
+ *         return {
+ *             myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *         };
  *     },
  *     render({state}) {
  *         const resolvedValue = resolvedOrUndefined(state.myProp.value);

package/dist/declarative-element/directives/is-resolved.directive.js

@@ -13,8 +13,10 @@ import { AsyncProp } from './async-prop.js';
  *
  * const MyElement = defineElementNoInputs({
  *     tagName: 'my-element',
- *     stateInitStatic: {
- *         myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *     state() {
+ *         return {
+ *             myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *         };
  *     },
  *     render({state}) {
  *         if (isAsyncError(state.myProp.value)) {
@@ -54,8 +56,10 @@ export function isResolved(asyncValue) {
  *
  * const MyElement = defineElementNoInputs({
  *     tagName: 'my-element',
- *     stateInitStatic: {
- *         myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *     state() {
+ *         return {
+ *             myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *         };
  *     },
  *     render({state}) {
  *         if (isAsyncError(state.myProp.value)) {
@@ -94,8 +98,10 @@ export function isAsyncError(asyncValue) {
  *
  * const MyElement = defineElementNoInputs({
  *     tagName: 'my-element',
- *     stateInitStatic: {
- *         myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *     state() {
+ *         return {
+ *             myProp: asyncProp({defaultValue: waitValue({seconds: 10}, 'value')}),
+ *         };
  *     },
  *     render({state}) {
  *         const resolvedValue = resolvedOrUndefined(state.myProp.value);

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

@@ -11,7 +11,6 @@ const expectedStaticProperties = getObjectTypedKeys({
     inputsType: '',
     render: '',
     slotNames: '',
-    stateInitStatic: '',
     stateType: '',
     styles: '',
     tagName: '',

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

@@ -23,9 +23,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

@@ -23,9 +23,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": "24.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": {

package/dist/declarative-element/properties/element-vir-state-setup.d.ts

@@ -1,54 +0,0 @@
-import { PropertyInitMapBase } from './element-properties.js';
-/**
- * Use this key with a function value on any object set in `stateInitStatic` to, rather than using
- * the object itself, call the function during each element's initialization and use the output of
- * that function rather than the object itself.
- *
- * See `perInstance` for an example usage.
- *
- * @category Util
- */
-export declare const stateSetupKey: unique symbol;
-/**
- * The type for an object that uses {@link stateSetupKey}.
- *
- * @category Internal
- */
-export type ElementVirStateSetup<InnerValue> = {
-    [key in typeof stateSetupKey]: () => InnerValue;
-};
-/**
- * Check if the given value is a value {@link ElementVirStateSetup} implementation.
- *
- * @category Internal
- */
-export declare function isElementVirStateSetup<T = unknown>(input: unknown): input is ElementVirStateSetup<T>;
-/**
- * If the type parameter is an instance of {@link ElementVirStateSetup}, this unwraps that instance
- * to its type parameter. Otherwise, the original type parameter is used.
- *
- * @category Internal
- */
-export type UnwrapElementVirStateSetup<T> = T extends ElementVirStateSetup<infer U> ? U : T;
-/**
- * Allow wrapped state setup objects.
- *
- * @category Internal
- */
-export type MaybeElementVirStateSetup<T> = UnwrapElementVirStateSetup<T> | ElementVirStateSetup<UnwrapElementVirStateSetup<T>>;
-/**
- * Unwraps all {@link ElementVirStateSetup} properties in the given state init object type parameter.
- *
- * @category Internal
- */
-export type FlattenElementVirStateSetup<StateInit extends PropertyInitMapBase> = {
-    [Prop in keyof StateInit]: Extract<StateInit[Prop], ElementVirStateSetup<any>> extends never ? StateInit[Prop] : Extract<StateInit[Prop], ElementVirStateSetup<any>> extends ElementVirStateSetup<infer InnerValue> ? InnerValue | Exclude<StateInit[Prop], ElementVirStateSetup<any>> : StateInit[Prop];
-};
-/**
- * Allows setting stat with {@link ElementVirStateSetup} properties.
- *
- * @category Internal
- */
-export type AllowElementVirStateSetup<OriginalObject extends PropertyInitMapBase> = {
-    [Prop in keyof OriginalObject]: MaybeElementVirStateSetup<OriginalObject[Prop]>;
-};

package/dist/declarative-element/properties/element-vir-state-setup.js

@@ -1,22 +0,0 @@
-import { check } from '@augment-vir/assert';
-/**
- * Use this key with a function value on any object set in `stateInitStatic` to, rather than using
- * the object itself, call the function during each element's initialization and use the output of
- * that function rather than the object itself.
- *
- * See `perInstance` for an example usage.
- *
- * @category Util
- */
-export const stateSetupKey = Symbol('element-vir-state-setup');
-/**
- * Check if the given value is a value {@link ElementVirStateSetup} implementation.
- *
- * @category Internal
- */
-export function isElementVirStateSetup(input) {
-    if (!check.isObject(input)) {
-        return false;
-    }
-    return stateSetupKey in input && check.isFunction(input[stateSetupKey]);
-}

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

@@ -1,26 +0,0 @@
-/**
- * For use within `stateInitStatic`: use this as the value of a state prop to call the given
- * callback on each element's creation rather than creating a static state init value.
- *
- * @category Directives
- * @example
- *
- * ```ts
- * import {waitValue, extractErrorMessage} from '@augment-vir/common';
- * import {isResolved, html, defineElementNoInputs, perInstance} from 'element-vir';
- *
- * const MyElement = defineElementNoInputs({
- *     tagName: 'my-element',
- *     stateInitStatic: {
- *         // each instance of `MyElement` will have a different `randomValue`
- *         randomValue: perInstance(() => Math.random()),
- *     },
- *     render({state}) {
- *         return html`
- *             Value: ${state.randomValue}
- *         `;
- *     },
- * });
- * ```
- */
-export declare function perInstance<T>(creationCallback: () => T): T;

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

@@ -1,32 +0,0 @@
-import { stateSetupKey } from './element-vir-state-setup.js';
-/**
- * For use within `stateInitStatic`: use this as the value of a state prop to call the given
- * callback on each element's creation rather than creating a static state init value.
- *
- * @category Directives
- * @example
- *
- * ```ts
- * import {waitValue, extractErrorMessage} from '@augment-vir/common';
- * import {isResolved, html, defineElementNoInputs, perInstance} from 'element-vir';
- *
- * const MyElement = defineElementNoInputs({
- *     tagName: 'my-element',
- *     stateInitStatic: {
- *         // each instance of `MyElement` will have a different `randomValue`
- *         randomValue: perInstance(() => Math.random()),
- *     },
- *     render({state}) {
- *         return html`
- *             Value: ${state.randomValue}
- *         `;
- *     },
- * });
- * ```
- */
-export function perInstance(creationCallback) {
-    const stateSetup = {
-        [stateSetupKey]: creationCallback,
-    };
-    return stateSetup;
-}