element-vir 7.0.2 → 8.0.0

package/README.md

@@ -437,6 +437,46 @@ export const MyWithCssVarsElement = defineElementNoInputs({
 });
 ```
 
+## Custom Type Requirements
+
+Use `wrapDefineElement` to compose `defineElement` and `defineElementNoInputs`. This is particularly useful to adding restrictions on the element `tagName`, but it can be used for restricting any of the inputs:
+
+<!-- example-link: src/readme-examples/my-custom-define.ts -->
+
+```TypeScript
+import {wrapDefineElement} from 'element-vir';
+
+export type VirTagName = `vir-${string}`;
+
+export const {defineElement: defineVirElement, defineElementNoInputs: defineVirElementNoInputs} =
+    wrapDefineElement<VirTagName>();
+
+// add an optional assert callback
+export const {
+    defineElement: defineVerifiedVirElement,
+    defineElementNoInputs: defineVerifiedVirElementNoInputs,
+} = wrapDefineElement<VirTagName>({
+    assertInputs: (inputs) => {
+        if (!inputs.tagName.startsWith('vir-')) {
+            throw new Error(`all custom elements must start with "vir-"`);
+        }
+    },
+});
+
+// add an optional transform callback
+export const {
+    defineElement: defineTransformedVirElement,
+    defineElementNoInputs: defineTransformedVirElementNoInputs,
+} = wrapDefineElement<VirTagName>({
+    transformInputs: (inputs) => {
+        return {
+            ...inputs,
+            tagName: inputs.tagName.startsWith('vir-') ? `vir-${inputs.tagName}` : inputs.tagName,
+        };
+    },
+});
+```
+
 ## Directives
 
 The following custom [`lit` directives](https://lit.dev/docs/templates/custom-directives/) are contained within this package.

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

@@ -7,16 +7,16 @@ import { HostClassesInitMap } from './properties/host-classes';
 import { StylesCallback } from './properties/styles';
 import { InitCallback, RenderCallback } from './render-callback';
 export type CustomElementTagName = `${string}-${string}`;
-export type DeclarativeElementInit<InputsGeneric extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
+export type DeclarativeElementInit<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
      */
-    tagName: CustomElementTagName;
+    tagName: TagNameGeneric;
     /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | StylesCallback<HostClassKeys, CssVarKeys>;
+    styles?: CSSResult | StylesCallback<HostClassKeysGeneric, CssVarKeysGeneric>;
     /** Element properties. (These can be thought of as "inputs".) */
-    stateInit?: StateInit;
+    stateInit?: StateInitGeneric;
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */
     events?: EventsInitGeneric;
     /**
@@ -24,7 +24,7 @@ export type DeclarativeElementInit<InputsGeneric extends PropertyInitMapBase, St
      * based on current instance state or inputs, or just undefined to indicate that the host class
      * will only be manually set.
      */
-    hostClasses?: HostClassesInitMap<HostClassKeys, InputsGeneric, StateInit>;
+    hostClasses?: HostClassesInitMap<HostClassKeysGeneric, InputsGeneric, StateInitGeneric>;
     /**
      * CSS Vars for the component. Keys of this object should be camelCased (or whatever your casing
      * convention is). They will be transformed, at runtime, to CSS vars with kebab-casing, to match
@@ -35,11 +35,11 @@ export type DeclarativeElementInit<InputsGeneric extends PropertyInitMapBase, St
      * cssVarValues or cssVarNames can then be destructured from the styles property's callback
      * input.
      */
-    cssVars?: CssVarsInitMap<CssVarKeys>;
+    cssVars?: CssVarsInitMap<CssVarKeysGeneric>;
     /** Called as part of the first renderCallback call, before the first renderCallback call. */
-    initCallback?: InitCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    renderCallback: RenderCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    cleanupCallback?: InitCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    initCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    renderCallback: RenderCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    cleanupCallback?: InitCallback<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };
 //# sourceMappingURL=declarative-element-init.d.ts.map

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

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

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

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

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

@@ -128,6 +128,11 @@ export function defineElementNoInputs(initInput) {
             writable: false,
         },
     });
-    window.customElements.define(initInput.tagName, anonymousClass);
+    if (window.customElements.get(initInput.tagName)) {
+        console.warn(`Tried to define custom element ${initInput.tagName} but it is already defined.`);
+    }
+    else {
+        window.customElements.define(initInput.tagName, anonymousClass);
+    }
     return anonymousClass;
 }

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

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

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

@@ -10,7 +10,7 @@ export type CleanupCallback<T> = (oldValue: T) => void;
  *
  * Example use case: 3D graphics applications with classes that setup buffers and the like.
  */
-export declare function assignWithCleanup<DeclarativeElementGeneric extends DeclarativeElementDefinition>(elementDefinition: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never, cleanupCallback: CleanupCallback<DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
+export declare function assignWithCleanup<DeclarativeElementGeneric extends DeclarativeElementDefinition>(elementDefinition: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric extends DeclarativeElementDefinition<any, infer InputsGeneric> ? InputsGeneric : never, cleanupCallback: CleanupCallback<DeclarativeElementGeneric extends DeclarativeElementDefinition<any, infer InputsGeneric> ? InputsGeneric : never>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
 declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
     private readonly element;
     private lastValue;

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

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

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

@@ -1,17 +1,19 @@
 import { TemplateResult } from 'lit';
 import { TypedEvent } from '../typed-event/typed-event';
 import { DeclarativeElement, HostInstanceType } from './declarative-element';
+import { CustomElementTagName } from './declarative-element-init';
 import { AsyncProp, SetAsyncPropInputs } from './properties/async-prop';
 import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './properties/element-events';
 import { PropertyInitMapBase } from './properties/element-properties';
-export type RenderCallback<InputsGeneric extends PropertyInitMapBase = any, StateGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = any, CssVarKeys extends string = any> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => TemplateResult;
-export type InitCallback<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => void;
+export type RenderOutput = TemplateResult | string | ReadonlyArray<TemplateResult> | ReadonlyArray<string>;
+export type RenderCallback<TagNameGeneric extends CustomElementTagName = any, InputsGeneric extends PropertyInitMapBase = any, StateGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = any, CssVarKeys extends string = any> = (params: RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => RenderOutput;
+export type InitCallback<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = (params: RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => void;
 export type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<StateGeneric>) => void;
-export type RenderParams<InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
+export type RenderParams<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
     state: Readonly<StateInitGeneric>;
     updateState: UpdateStateCallback<StateInitGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
-    host: HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    host: HostInstanceType<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
     dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>> | Event) => boolean;
     inputs: InputsGeneric;
     /**
@@ -23,5 +25,5 @@ export type RenderParams<InputsGeneric extends PropertyInitMapBase, StateInitGen
         [StateKey in keyof StateInitGeneric as StateInitGeneric[StateKey] extends AsyncProp<any> ? StateKey : never]: StateInitGeneric[StateKey] extends AsyncProp<infer ValueGeneric> ? SetAsyncPropInputs<ValueGeneric> : never;
     }>) => void;
 };
-export declare function createRenderParams<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string>(element: DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+export declare function createRenderParams<TagNameGeneric extends CustomElementTagName, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string>(element: DeclarativeElement<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<TagNameGeneric, InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
 //# sourceMappingURL=render-callback.d.ts.map

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

@@ -0,0 +1,11 @@
+import { PartialAndNullable } from '@augment-vir/common';
+import { CustomElementTagName, DeclarativeElementInit, EventsInitMap, PropertyInitMapBase } from '..';
+export type WrapDefineElementOptions<TagNameRequirementGeneric extends CustomElementTagName = CustomElementTagName, InputsRequirementGeneric extends PropertyInitMapBase = {}, StateInitRequirementGeneric extends PropertyInitMapBase = {}, EventsInitRequirementGeneric extends EventsInitMap = {}, HostClassKeysRequirementGeneric extends string = '', CssVarKeysRequirementGeneric extends string = ''> = PartialAndNullable<{
+    assertInputs: (inputInit: DeclarativeElementInit<TagNameRequirementGeneric, InputsRequirementGeneric, StateInitRequirementGeneric, EventsInitRequirementGeneric, HostClassKeysRequirementGeneric, CssVarKeysRequirementGeneric>) => void;
+    transformInputs: (inputInit: DeclarativeElementInit<TagNameRequirementGeneric, InputsRequirementGeneric, StateInitRequirementGeneric, EventsInitRequirementGeneric, HostClassKeysRequirementGeneric, CssVarKeysRequirementGeneric>) => DeclarativeElementInit<TagNameRequirementGeneric, InputsRequirementGeneric, StateInitRequirementGeneric, EventsInitRequirementGeneric, HostClassKeysRequirementGeneric, CssVarKeysRequirementGeneric>;
+}>;
+export declare function wrapDefineElement<TagNameRequirementGeneric extends CustomElementTagName = CustomElementTagName, InputsRequirementGeneric extends PropertyInitMapBase = {}, StateInitRequirementGeneric extends PropertyInitMapBase = {}, EventsInitRequirementGeneric extends EventsInitMap = {}, HostClassKeysRequirementGeneric extends string = '', CssVarKeysRequirementGeneric extends string = ''>(options?: WrapDefineElementOptions | undefined): {
+    defineElement: <InputsGeneric extends InputsRequirementGeneric>() => <TagNameGeneric extends TagNameRequirementGeneric, StateInitGeneric extends StateInitRequirementGeneric, EventsInitGeneric extends EventsInitRequirementGeneric, HostClassKeysGeneric extends HostClassKeysRequirementGeneric, CssVarKeysGeneric extends CssVarKeysRequirementGeneric>(inputs: DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>) => import("./declarative-element").DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric>;
+    defineElementNoInputs: <TagNameGeneric_1 extends TagNameRequirementGeneric, InputsGeneric_1 extends InputsRequirementGeneric, StateInitGeneric_1 extends StateInitRequirementGeneric, EventsInitGeneric_1 extends EventsInitRequirementGeneric, HostClassKeysGeneric_1 extends HostClassKeysRequirementGeneric, CssVarKeysGeneric_1 extends CssVarKeysRequirementGeneric>(inputs: DeclarativeElementInit<TagNameGeneric_1, InputsGeneric_1, StateInitGeneric_1, EventsInitGeneric_1, HostClassKeysGeneric_1, CssVarKeysGeneric_1>) => import("./declarative-element").DeclarativeElementDefinition<TagNameGeneric_1, InputsGeneric_1, StateInitGeneric_1, EventsInitGeneric_1, HostClassKeysGeneric_1, CssVarKeysGeneric_1>;
+};
+//# sourceMappingURL=wrap-define-element.d.ts.map

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

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

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './declarative-element/declarative-element';
+export * from './declarative-element/declarative-element-init';
 export * from './declarative-element/define-element';
 export * from './declarative-element/define-element-no-inputs';
 export type { DeclarativeElementDefinitionOptions } from './declarative-element/definition-options';
@@ -11,9 +12,14 @@ export * from './declarative-element/directives/on-resize.directive';
 export * from './declarative-element/directives/render-async-prop.directive';
 export * from './declarative-element/directives/render-if.directive';
 export * from './declarative-element/properties/async-prop';
+export * from './declarative-element/properties/css-vars';
 export * from './declarative-element/properties/element-events';
 export * from './declarative-element/properties/element-properties';
+export * from './declarative-element/properties/host-classes';
+export * from './declarative-element/properties/styles';
+export * from './declarative-element/properties/tag-name';
 export * from './declarative-element/render-callback';
+export * from './declarative-element/wrap-define-element';
 export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
 export * from './template-transforms/vir-css/vir-css';
 export * from './template-transforms/vir-html/vir-html';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './declarative-element/declarative-element';
+export * from './declarative-element/declarative-element-init';
 export * from './declarative-element/define-element';
 export * from './declarative-element/define-element-no-inputs';
 export * from './declarative-element/directives/assign-with-clean-up.directive';
@@ -10,9 +11,14 @@ export * from './declarative-element/directives/on-resize.directive';
 export * from './declarative-element/directives/render-async-prop.directive';
 export * from './declarative-element/directives/render-if.directive';
 export * from './declarative-element/properties/async-prop';
+export * from './declarative-element/properties/css-vars';
 export * from './declarative-element/properties/element-events';
 export * from './declarative-element/properties/element-properties';
+export * from './declarative-element/properties/host-classes';
+export * from './declarative-element/properties/styles';
+export * from './declarative-element/properties/tag-name';
 export * from './declarative-element/render-callback';
+export * from './declarative-element/wrap-define-element';
 export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
 export * from './template-transforms/vir-css/vir-css';
 export * from './template-transforms/vir-html/vir-html';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "7.0.2",
+    "version": "8.0.0",
     "keywords": [
         "custom",
         "web",
@@ -31,20 +31,21 @@
         "publish": "virmator publish \"npm run compile && npm run test:all\"",
         "start": "npm install && virmator frontend",
         "test": "npm run test:types && virmator test-web",
-        "test:all": "npm run test:types && npm test && npm run test:spelling && npm run test:format && npm run test:docs",
+        "test:all": "npm run test:types && npm run test:coverage && npm run test:spelling && npm run test:format && npm run test:docs",
+        "test:coverage": "virmator test-web coverage",
         "test:docs": "virmator code-in-markdown check",
         "test:format": "virmator format check",
         "test:spelling": "virmator spellcheck",
         "test:types": "tsc --noEmit"
     },
     "dependencies": {
-        "@augment-vir/browser": "^10.0.0",
-        "@augment-vir/common": "^10.0.0",
+        "@augment-vir/browser": "^11.0.0",
+        "@augment-vir/common": "^11.0.0",
         "lit": "2.6.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^10.0.0",
-        "@augment-vir/node-js": "^10.0.0",
+        "@augment-vir/browser-testing": "^11.0.0",
+        "@augment-vir/node-js": "^11.0.0",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^3.1.7",
         "@types/mocha": "^10.0.1",
@@ -66,9 +67,9 @@
         "prettier-plugin-sort-json": "^1.0.0",
         "prettier-plugin-toml": "^0.3.1",
         "ts-node": "^10.9.1",
-        "type-fest": "^3.5.2",
+        "type-fest": "^3.5.3",
         "typescript": "^4.9.4",
-        "virmator": "^5.3.3",
+        "virmator": "^5.4.0",
         "vite": "^4.0.4"
     }
 }