element-vir 22.2.1 → 23.0.0

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

@@ -1,16 +1,36 @@
-import { HtmlInterpolation } from '../template-transforms/vir-html/html-interpolation';
-import { TypedEvent } from '../typed-event/typed-event';
-import { CustomElementTagName } from './custom-tag-name';
-import type { DeclarativeElement, DeclarativeElementHost } from './declarative-element';
-import { BaseCssPropertyName } from './properties/css-properties';
-import { CssVars } from './properties/css-vars';
-import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './properties/element-events';
-import { PropertyInitMapBase } from './properties/element-properties';
-import { AllowElementVirStateSetup, FlattenElementVirStateSetup } from './properties/element-vir-state-setup';
-import { SlotNameMap } from './slot-names';
+import { type HtmlInterpolation } from '../template-transforms/vir-html/html-interpolation.js';
+import { type TypedEvent } from '../typed-event/typed-event.js';
+import { type CustomElementTagName } from './custom-tag-name.js';
+import { type DeclarativeElement, type DeclarativeElementHost } from './declarative-element.js';
+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 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>) => void;
+/**
+ * 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;
+/**
+ * Type for the `updateState` render parameter.
+ *
+ * @category Internal
+ */
 export type UpdateStateCallback<StateInit extends PropertyInitMapBase> = (newState: Partial<AllowElementVirStateSetup<StateInit>>) => 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>>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
@@ -18,9 +38,16 @@ export type RenderParams<TagName extends CustomElementTagName, Inputs extends Pr
     events: EventDescriptorMap<TagName, EventsInit>;
     host: DeclarativeElementHost<TagName, Inputs, StateInit, 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;
     inputs: Readonly<Inputs>;
 };
+/**
+ * This is used to create the parameters passed to the `render`, `init`, and `cleanup` element
+ * definition methods whenever they are called.
+ *
+ * @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>;
     eventsMap: EventDescriptorMap<TagName, EventsInit>;

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

@@ -1,4 +1,10 @@
 import { getObjectTypedKeys } from '@augment-vir/common';
+/**
+ * This is used to create the parameters passed to the `render`, `init`, and `cleanup` element
+ * definition methods whenever they are called.
+ *
+ * @category Internal
+ */
 export function createRenderParams({ element, eventsMap, cssVars, slotNamesMap, }) {
     function updateState(newStatePartial) {
         getObjectTypedKeys(newStatePartial).forEach((stateKey) => {

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

@@ -1,7 +1,15 @@
 import { ArrayElement } from '@augment-vir/common';
-/** Type safe mapping of slot names to themselves. */
+/**
+ * Type safe mapping of slot names to themselves.
+ *
+ * @category Internal
+ */
 export type SlotNameMap<SlotNames extends ReadonlyArray<string>> = Readonly<{
     [SlotName in ArrayElement<SlotNames>]: SlotName;
 }>;
-/** Converts an array of slot names into a `SlotNameMap`. */
+/**
+ * Converts an array of slot names into a `SlotNameMap`.
+ *
+ * @category Internal
+ */
 export declare function createSlotNamesMap<SlotNames extends ReadonlyArray<string>>(slotNames: SlotNames | undefined): SlotNameMap<SlotNames>;

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

@@ -1,4 +1,8 @@
-/** Converts an array of slot names into a `SlotNameMap`. */
+/**
+ * Converts an array of slot names into a `SlotNameMap`.
+ *
+ * @category Internal
+ */
 export function createSlotNamesMap(slotNames) {
     if (!slotNames) {
         return {};

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

@@ -1,16 +1,43 @@
-import { PartialAndNullable } from '@augment-vir/common';
-import { CustomElementTagName } from './custom-tag-name';
-import { DeclarativeElementInit } from './declarative-element-init';
-import { VerifiedElementInit } from './define-element';
-import { VerifiedElementNoInputsInit } from './define-element-no-inputs';
-import { BaseCssPropertyName } from './properties/css-properties';
-import { EventsInitMap } from './properties/element-events';
-import { PropertyInitMapBase } from './properties/element-properties';
-export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateInitRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}> = PartialAndNullable<{
+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 { BaseCssPropertyName } from './properties/css-properties.js';
+import { EventsInitMap } from './properties/element-events.js';
+import { PropertyInitMapBase } from './properties/element-properties.js';
+/**
+ * Options for {@link wrapDefineElement}.
+ *
+ * @category Internal
+ */
+export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateInitRequirement 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;
+    /**
+     * 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>>;
 }>;
+/**
+ * Wraps {@link defineElement} and {@link defineElementNoInputs} in a superset of requirements. For
+ * example:
+ *
+ * - You could create element definition functions that require all elements to start with a common
+ *   prefix, like `vir-`.
+ * - You could create element definition functions that require all elements to have _at least_ a
+ *   specified set of input properties.
+ * - Etc.
+ *
+ * @category Element Definition
+ */
 export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateInitRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): {
-    defineElement: <Inputs extends InputsRequirement>() => <const TagName extends TagNameRequirement, StateInit extends StateInitRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends `${TagName}-${string}`, const CssVarKeys extends `${TagName}-${string}`, const SlotNames extends readonly string[]>(inputs: VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-    defineElementNoInputs: <const TagName_1 extends TagNameRequirement, Inputs_1 extends InputsRequirement, StateInit_1 extends StateInitRequirement, EventsInit_1 extends EventsInitRequirement, const HostClassKeys_1 extends `${TagName_1}-${string}`, const CssVarKeys_1 extends `${TagName_1}-${string}`, const SlotNames_1 extends readonly string[]>(inputs: VerifiedElementNoInputsInit<TagName_1, Inputs_1, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, SlotNames_1>) => import("./declarative-element").DeclarativeElementDefinition<TagName_1, Inputs_1, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, SlotNames_1>;
+    /** 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>;
+    /** 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>;
 };

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

@@ -1,17 +1,32 @@
-import { defineElement } from './define-element';
-import { defineElementNoInputs } from './define-element-no-inputs';
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import { defineElementNoInputs } from './define-element-no-inputs.js';
+import { defineElement } from './define-element.js';
+/**
+ * Wraps {@link defineElement} and {@link defineElementNoInputs} in a superset of requirements. For
+ * example:
+ *
+ * - You could create element definition functions that require all elements to start with a common
+ *   prefix, like `vir-`.
+ * - You could create element definition functions that require all elements to have _at least_ a
+ *   specified set of input properties.
+ * - Etc.
+ *
+ * @category Element Definition
+ */
 export function wrapDefineElement(options) {
     const { assertInputs, transformInputs } = {
         assertInputs: options?.assertInputs ?? (() => { }),
         transformInputs: options?.transformInputs ?? ((inputs) => inputs),
     };
     return {
+        /** A wrapped function for defining an element with inputs. */
         defineElement: () => {
             return (inputs) => {
                 assertInputs(inputs);
                 return defineElement()(transformInputs(inputs));
             };
         },
+        /** A wrapped function for defining an element without inputs. */
         defineElementNoInputs: (inputs) => {
             assertInputs(inputs);
             return defineElementNoInputs(transformInputs(inputs));

package/dist/index.d.ts

@@ -1,41 +1,41 @@
 export * from 'observavir';
-export * from './declarative-element/custom-tag-name';
-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';
-export * from './declarative-element/directives/async-prop';
-export * from './declarative-element/directives/create-attribute-directive';
-export * from './declarative-element/directives/directive-helpers';
-export * from './declarative-element/directives/is-resolved.directive';
-export * from './declarative-element/directives/listen.directive';
-export * from './declarative-element/directives/on-dom-created.directive';
-export * from './declarative-element/directives/on-dom-rendered.directive';
-export * from './declarative-element/directives/on-resize.directive';
-export * from './declarative-element/directives/render-async.directive';
-export * from './declarative-element/directives/render-if.directive';
-export * from './declarative-element/directives/test-id.directive';
-export * from './declarative-element/is-declarative-element';
-export * from './declarative-element/is-declarative-element-definition';
-export * from './declarative-element/properties/css-properties';
-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/element-vir-state-setup';
-export * from './declarative-element/properties/host-classes';
-export * from './declarative-element/properties/per-instance';
-export * from './declarative-element/properties/styles';
-export * from './declarative-element/properties/tag-name';
-export * from './declarative-element/render-callback';
-export * from './declarative-element/slot-names';
-export * from './declarative-element/wrap-define-element';
-export * from './lit-exports/all-lit-exports';
-export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
-export * from './template-transforms/minimal-element-definition';
-export * from './template-transforms/vir-css/vir-css';
-export * from './template-transforms/vir-html/html-interpolation';
-export * from './template-transforms/vir-html/vir-html';
-export * from './typed-event/typed-event';
-export * from './util/lit-template';
-export * from './util/type';
+export * from './declarative-element/custom-tag-name.js';
+export * from './declarative-element/declarative-element-init.js';
+export * from './declarative-element/declarative-element.js';
+export * from './declarative-element/define-element-no-inputs.js';
+export * from './declarative-element/define-element.js';
+export * from './declarative-element/definition-options.js';
+export * from './declarative-element/directives/async-prop.js';
+export * from './declarative-element/directives/create-attribute-directive.js';
+export * from './declarative-element/directives/directive-helpers.js';
+export * from './declarative-element/directives/is-resolved.directive.js';
+export * from './declarative-element/directives/listen.directive.js';
+export * from './declarative-element/directives/on-dom-created.directive.js';
+export * from './declarative-element/directives/on-dom-rendered.directive.js';
+export * from './declarative-element/directives/on-resize.directive.js';
+export * from './declarative-element/directives/render-async.directive.js';
+export * from './declarative-element/directives/render-if.directive.js';
+export * from './declarative-element/directives/test-id.directive.js';
+export * from './declarative-element/is-declarative-element-definition.js';
+export * from './declarative-element/is-declarative-element.js';
+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';
+export * from './declarative-element/slot-names.js';
+export * from './declarative-element/wrap-define-element.js';
+export * from './lit-exports/all-lit-exports.js';
+export * from './require-declarative-element.js';
+export * from './template-transforms/minimal-element-definition.js';
+export * from './template-transforms/vir-css/vir-css.js';
+export * from './template-transforms/vir-html/html-interpolation.js';
+export * from './template-transforms/vir-html/vir-html.js';
+export * from './typed-event/typed-event.js';
+export * from './util/lit-template.js';
+export * from './util/type.js';

package/dist/index.js

@@ -1,40 +1,41 @@
 export * from 'observavir';
-export * from './declarative-element/custom-tag-name';
-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/async-prop';
-export * from './declarative-element/directives/create-attribute-directive';
-export * from './declarative-element/directives/directive-helpers';
-export * from './declarative-element/directives/is-resolved.directive';
-export * from './declarative-element/directives/listen.directive';
-export * from './declarative-element/directives/on-dom-created.directive';
-export * from './declarative-element/directives/on-dom-rendered.directive';
-export * from './declarative-element/directives/on-resize.directive';
-export * from './declarative-element/directives/render-async.directive';
-export * from './declarative-element/directives/render-if.directive';
-export * from './declarative-element/directives/test-id.directive';
-export * from './declarative-element/is-declarative-element';
-export * from './declarative-element/is-declarative-element-definition';
-export * from './declarative-element/properties/css-properties';
-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/element-vir-state-setup';
-export * from './declarative-element/properties/host-classes';
-export * from './declarative-element/properties/per-instance';
-export * from './declarative-element/properties/styles';
-export * from './declarative-element/properties/tag-name';
-export * from './declarative-element/render-callback';
-export * from './declarative-element/slot-names';
-export * from './declarative-element/wrap-define-element';
-export * from './lit-exports/all-lit-exports';
-export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
-export * from './template-transforms/minimal-element-definition';
-export * from './template-transforms/vir-css/vir-css';
-export * from './template-transforms/vir-html/html-interpolation';
-export * from './template-transforms/vir-html/vir-html';
-export * from './typed-event/typed-event';
-export * from './util/lit-template';
-export * from './util/type';
+export * from './declarative-element/custom-tag-name.js';
+export * from './declarative-element/declarative-element-init.js';
+export * from './declarative-element/declarative-element.js';
+export * from './declarative-element/define-element-no-inputs.js';
+export * from './declarative-element/define-element.js';
+export * from './declarative-element/definition-options.js';
+export * from './declarative-element/directives/async-prop.js';
+export * from './declarative-element/directives/create-attribute-directive.js';
+export * from './declarative-element/directives/directive-helpers.js';
+export * from './declarative-element/directives/is-resolved.directive.js';
+export * from './declarative-element/directives/listen.directive.js';
+export * from './declarative-element/directives/on-dom-created.directive.js';
+export * from './declarative-element/directives/on-dom-rendered.directive.js';
+export * from './declarative-element/directives/on-resize.directive.js';
+export * from './declarative-element/directives/render-async.directive.js';
+export * from './declarative-element/directives/render-if.directive.js';
+export * from './declarative-element/directives/test-id.directive.js';
+export * from './declarative-element/is-declarative-element-definition.js';
+export * from './declarative-element/is-declarative-element.js';
+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';
+export * from './declarative-element/slot-names.js';
+export * from './declarative-element/wrap-define-element.js';
+export * from './lit-exports/all-lit-exports.js';
+export * from './require-declarative-element.js';
+export * from './template-transforms/minimal-element-definition.js';
+export * from './template-transforms/vir-css/vir-css.js';
+export * from './template-transforms/vir-html/html-interpolation.js';
+export * from './template-transforms/vir-html/vir-html.js';
+export * from './typed-event/typed-event.js';
+export * from './util/lit-template.js';
+export * from './util/type.js';

package/dist/lit-exports/all-lit-exports.d.ts

@@ -1,2 +1,2 @@
-export * from './base-lit-exports';
-export * from './lit-repeat-fix';
+export * from './base-lit-exports.js';
+export * from './lit-repeat-fix.js';

package/dist/lit-exports/all-lit-exports.js

@@ -1,2 +1,2 @@
-export * from './base-lit-exports';
-export * from './lit-repeat-fix';
+export * from './base-lit-exports.js';
+export * from './lit-repeat-fix.js';

package/dist/lit-exports/lit-repeat-fix.d.ts

@@ -1,25 +1,81 @@
 export type { KeyFn } from 'lit/directives/repeat.js';
 export type { RepeatDirective };
-import { Directive, PartInfo } from 'lit-html/directive.js';
-import { KeyFn } from 'lit-html/directives/repeat.js';
-import { ChildPart, noChange } from 'lit-html/lit-html.js';
-import { HtmlInterpolation } from '../template-transforms/vir-html/html-interpolation';
+import { type Directive, type PartInfo } from 'lit-html/directive.js';
+import { type KeyFn } from 'lit-html/directives/repeat.js';
+import { type ChildPart, type noChange } from 'lit-html/lit-html.js';
+import { type HtmlInterpolation } from '../template-transforms/vir-html/html-interpolation.js';
+/**
+ * A modified class type for the built-in lit `repeat` directive which works for element-vir
+ * declarative elements.
+ *
+ * @category Internal
+ */
 declare class RepeatDirective extends Directive {
     private _itemKeys?;
     constructor(partInfo: PartInfo);
     private _getValuesAndKeys;
+    /** Renders the repeated templates. */
     render<T>(items: Iterable<T>, template: ItemTemplate<T>): Array<HtmlInterpolation>;
+    /** Renders the repeated templates. */
     render<T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): Array<HtmlInterpolation>;
+    /** Updates the repeated templates. */
     update<T>(containerPart: ChildPart, [items, keyFnOrTemplate, template,]: [
         Iterable<T>,
         (KeyFn<T> | ItemTemplate<T>),
         ItemTemplate<T>
     ]): HtmlInterpolation[] | typeof noChange;
 }
+/**
+ * A modified `ItemTemplate` type for the built-in lit `repeat` directive which works for
+ * element-vir declarative elements.
+ *
+ * @category Internal
+ */
 export type ItemTemplate<T> = (item: T, index: number) => HtmlInterpolation;
+/**
+ * A modified `RepeatDirectiveFn` type for the built-in lit `repeat` directive which works for
+ * element-vir declarative elements.
+ *
+ * @category Internal
+ */
 export interface RepeatDirectiveFn {
     <T>(items: Iterable<T>, keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>, template?: ItemTemplate<T>): HtmlInterpolation[];
     <T>(items: Iterable<T>, template: ItemTemplate<T>): HtmlInterpolation[];
     <T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): HtmlInterpolation[];
 }
+/**
+ * A directive that repeats a series of values (usually `TemplateResults`) generated from an
+ * iterable, and updates those items efficiently when the iterable changes based on user-provided
+ * `keys` associated with each item.
+ *
+ * Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained, meaning previous DOM
+ * for a given key is moved into the new position if needed, and DOM will never be reused with
+ * values for different keys (new DOM will always be created for new keys). This is generally the
+ * most efficient way to use `repeat` since it performs minimum unnecessary work for insertions and
+ * removals.
+ *
+ * The `keyFn` takes two parameters, the item and its index, and returns a unique key value.
+ *
+ * ```js
+ * html`
+ *     <ol>
+ *         ${repeat(
+ *             this.items,
+ *             (item) => item.id,
+ *             (item, index) => {
+ *                 return html`
+ *                     <li>${index}: ${item.name}</li>
+ *                 `;
+ *             },
+ *         )}
+ *     </ol>
+ * `;
+ * ```
+ *
+ * **Important**: If providing a `keyFn`, keys _must_ be unique for all items in a given call to
+ * `repeat`. The behavior when two or more items have the same key is undefined.
+ *
+ * If no `keyFn` is provided, this directive will perform similar to mapping items to values, and
+ * DOM will be reused against potentially different items.
+ */
 export declare const repeat: RepeatDirectiveFn;

package/dist/lit-exports/lit-repeat-fix.js

@@ -1,3 +1,37 @@
-import { Directive } from 'lit-html/directive.js';
 import { repeat as repeatImport } from 'lit/directives/repeat.js';
+/**
+ * A directive that repeats a series of values (usually `TemplateResults`) generated from an
+ * iterable, and updates those items efficiently when the iterable changes based on user-provided
+ * `keys` associated with each item.
+ *
+ * Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained, meaning previous DOM
+ * for a given key is moved into the new position if needed, and DOM will never be reused with
+ * values for different keys (new DOM will always be created for new keys). This is generally the
+ * most efficient way to use `repeat` since it performs minimum unnecessary work for insertions and
+ * removals.
+ *
+ * The `keyFn` takes two parameters, the item and its index, and returns a unique key value.
+ *
+ * ```js
+ * html`
+ *     <ol>
+ *         ${repeat(
+ *             this.items,
+ *             (item) => item.id,
+ *             (item, index) => {
+ *                 return html`
+ *                     <li>${index}: ${item.name}</li>
+ *                 `;
+ *             },
+ *         )}
+ *     </ol>
+ * `;
+ * ```
+ *
+ * **Important**: If providing a `keyFn`, keys _must_ be unique for all items in a given call to
+ * `repeat`. The behavior when two or more items have the same key is undefined.
+ *
+ * If no `keyFn` is provided, this directive will perform similar to mapping items to values, and
+ * DOM will be reused against potentially different items.
+ */
 export const repeat = repeatImport;

package/dist/readme-examples/my-app.element.d.ts

@@ -0,0 +1 @@
+export declare const MyApp: import("../index.js").DeclarativeElementDefinition<"my-app", {}, {}, {}, "my-app-", "my-app-", readonly []>;

package/dist/readme-examples/my-app.element.js

@@ -0,0 +1,11 @@
+import { defineElementNoInputs, html } from '../index.js';
+import { MySimple } from './my-simple.element.js';
+export const MyApp = defineElementNoInputs({
+    tagName: 'my-app',
+    render() {
+        return html `
+            <h1>My App</h1>
+            <${MySimple}></${MySimple}>
+        `;
+    },
+});

package/dist/readme-examples/my-custom-action.event.d.ts

@@ -0,0 +1 @@
+export declare const MyCustomActionEvent: import("../index.js").DefinedTypedEvent<"my-custom-action", number>;

package/dist/readme-examples/my-custom-action.event.js

@@ -0,0 +1,2 @@
+import { defineTypedEvent } from '../index.js';
+export const MyCustomActionEvent = defineTypedEvent()('my-custom-action');

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

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

package/dist/readme-examples/my-custom-define.js

@@ -0,0 +1,19 @@
+import { wrapDefineElement } from '../index.js';
+export const { defineElement: defineVirElement, defineElementNoInputs: defineVirElementNoInputs } = wrapDefineElement();
+// add an optional assert callback
+export const { defineElement: defineVerifiedVirElement, defineElementNoInputs: defineVerifiedVirElementNoInputs, } = wrapDefineElement({
+    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({
+    transformInputs: (inputs) => {
+        return {
+            ...inputs,
+            tagName: inputs.tagName.startsWith('vir-') ? `vir-${inputs.tagName}` : inputs.tagName,
+        };
+    },
+});

package/dist/readme-examples/my-simple.element.d.ts

@@ -0,0 +1 @@
+export declare const MySimple: import("../index.js").DeclarativeElementDefinition<"my-simple", {}, {}, {}, "my-simple-", "my-simple-", readonly []>;

package/dist/readme-examples/my-simple.element.js

@@ -0,0 +1,9 @@
+import { defineElementNoInputs, html } from '../index.js';
+export const MySimple = defineElementNoInputs({
+    tagName: 'my-simple',
+    render() {
+        return html `
+            <span>Hello there!</span>
+        `;
+    },
+});

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

@@ -0,0 +1 @@
+export declare const MyWithAssignment: import("../index.js").DeclarativeElementDefinition<"my-with-assignment", {}, {}, {}, "my-with-assignment-", "my-with-assignment-", readonly []>;

package/dist/readme-examples/my-with-assignment.element.js

@@ -0,0 +1,14 @@
+import { defineElementNoInputs, html } from '../index.js';
+import { MyWithInputs } from './my-with-inputs.element.js';
+export const MyWithAssignment = defineElementNoInputs({
+    tagName: 'my-with-assignment',
+    render() {
+        return html `
+            <h1>My App</h1>
+            <${MyWithInputs.assign({
+            email: 'user@example.com',
+            username: 'user',
+        })}></${MyWithInputs}>
+        `;
+    },
+});

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

@@ -0,0 +1,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, {
+        endpoint: string;
+    }>>;
+}, {}, "my-with-async-prop-", "my-with-async-prop-", readonly []>;
+export {};