element-vir 26.12.0 → 26.12.1

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

@@ -0,0 +1,28 @@
+import { type ArrayElement } from '@augment-vir/common';
+import { type CustomElementTagName } from '../custom-tag-name.js';
+/**
+ * Base requirement for all string names with the element tag name prepended.
+ *
+ * @category Internal
+ */
+export type BaseStringName<ElementTagName extends CustomElementTagName> = `${ElementTagName}-${string}`;
+/**
+ * Asserts that all the given string names for the given element are valid.
+ *
+ * @category Internal
+ */
+export declare function assertValidStringNames(elementTagName: CustomElementTagName, stringNames: Record<BaseStringName<CustomElementTagName>, any>): void;
+/**
+ * Type safe mapping of string names to themself with the element tag name inserted.
+ *
+ * @category Internal
+ */
+export type StringNameMap<ElementTagName extends CustomElementTagName, NameType extends string, StringNames extends ReadonlyArray<string>> = Readonly<{
+    [StringName in ArrayElement<StringNames>]: `${ElementTagName}-${NameType}-${StringName}`;
+}>;
+/**
+ * Converts an array of string names into a `StringNameMap`.
+ *
+ * @category Internal
+ */
+export declare function createStringNameMap<ElementTagName extends CustomElementTagName, NameType extends string, StringNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, nameType: NameType, stringNames: StringNames | undefined): StringNameMap<ElementTagName, NameType, StringNames>;

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

@@ -0,0 +1,40 @@
+import { arrayToObject } from '@augment-vir/common';
+/**
+ * Asserts that all the given string names for the given element are valid.
+ *
+ * @category Internal
+ */
+export function assertValidStringNames(elementTagName, stringNames) {
+    const requiredNameStart = [
+        elementTagName,
+        '-',
+    ].join('');
+    Object.keys(stringNames).forEach((stringName) => {
+        if (!stringName.startsWith(requiredNameStart)) {
+            throw new Error(`Invalid element string name '${stringName}' in '${elementTagName}': element string names must begin with the element's tag name.`);
+        }
+    });
+}
+/**
+ * Converts an array of string names into a `StringNameMap`.
+ *
+ * @category Internal
+ */
+export function createStringNameMap(elementTagName, nameType, stringNames) {
+    if (!stringNames) {
+        return {};
+    }
+    const stringNameMap = arrayToObject(stringNames, (stringName) => {
+        return {
+            key: stringName,
+            value: [
+                elementTagName,
+                nameType,
+                stringName,
+            ].join('-'),
+        };
+    }, {
+        useRequired: true,
+    });
+    return stringNameMap;
+}

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

@@ -0,0 +1,51 @@
+import { type CSSResult } from '../../lit-exports/base-lit-exports.js';
+import { type CustomElementTagName } from '../custom-tag-name.js';
+import { type CssVars } from './css-vars.js';
+import { type PropertyInitMapBase } from './element-properties.js';
+import { type HostClassNamesMap, type HostClassesInitMap } from './host-classes.js';
+import { type BaseStringName } from './string-names.js';
+/**
+ * A host class instance to be referenced inside of an element definition's `styles` callback.
+ *
+ * @category Internal
+ */
+export type HostClass = {
+    selector: CSSResult;
+    name: CSSResult;
+};
+/**
+ * Input type for an element definition's `styles` callback.
+ *
+ * @category Internal
+ */
+export type StylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>> = {
+    hostClasses: Record<HostClassKeys, HostClass>;
+    cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
+};
+/**
+ * The type for an element definition's `styles` callback.
+ *
+ * @category Internal
+ */
+export type StylesCallback<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>> = (input: StylesCallbackInput<TagName, HostClassKeys, CssVarKeys>) => CSSResult;
+/**
+ * Creates the input for an element definition's `styles` callback.
+ *
+ * @category Internal
+ */
+export declare function createStylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>>({ hostClassNames, cssVars, }: {
+    hostClassNames: HostClassNamesMap<TagName, HostClassKeys>;
+    cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
+}): StylesCallbackInput<TagName, HostClassKeys, CssVarKeys>;
+/**
+ * Used inside of an element instance to apply host classes on each render.
+ *
+ * @category Internal
+ */
+export declare function applyHostClasses<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, HostClassKeys extends BaseStringName<TagName>>({ host, hostClassesInit, hostClassNames, state, inputs, }: {
+    host: HTMLElement;
+    hostClassesInit: Readonly<HostClassesInitMap<TagName, HostClassKeys, Inputs, State>> | undefined;
+    hostClassNames: HostClassNamesMap<string, HostClassKeys>;
+    state: Readonly<State>;
+    inputs: Readonly<Inputs>;
+}): void;

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

@@ -0,0 +1,41 @@
+import { getObjectTypedKeys, mapObjectValues } from '@augment-vir/common';
+import { unsafeCSS } from '../../lit-exports/base-lit-exports.js';
+/**
+ * Creates the input for an element definition's `styles` callback.
+ *
+ * @category Internal
+ */
+export function createStylesCallbackInput({ hostClassNames, cssVars, }) {
+    return {
+        hostClasses: mapObjectValues(hostClassNames, (key, name) => {
+            return {
+                name: unsafeCSS(name),
+                selector: unsafeCSS(`:host(.${name})`),
+            };
+        }),
+        cssVars,
+    };
+}
+/**
+ * Used inside of an element instance to apply host classes on each render.
+ *
+ * @category Internal
+ */
+export function applyHostClasses({ host, hostClassesInit, hostClassNames, state, inputs, }) {
+    if (!hostClassesInit) {
+        return;
+    }
+    getObjectTypedKeys(hostClassesInit).forEach((hostClassKey) => {
+        const maybeCallback = hostClassesInit[hostClassKey];
+        const hostClassName = hostClassNames[hostClassKey];
+        if (typeof maybeCallback === 'function') {
+            const shouldApplyHostClass = maybeCallback({ state, inputs });
+            if (shouldApplyHostClass) {
+                host.classList.add(hostClassName);
+            }
+            else {
+                host.classList.remove(hostClassName);
+            }
+        }
+    });
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,56 @@
+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 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 BaseStringName, type StringNameMap } from './properties/string-names.js';
+/**
+ * Type for the `render` element definition method.
+ *
+ * @category Internal
+ */
+export type RenderCallback<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseStringName<TagName> = any, CssVarKeys extends BaseStringName<TagName> = any, SlotNames extends ReadonlyArray<string> = any, TestIds extends ReadonlyArray<string> = any> = (params: RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => HtmlInterpolation;
+/**
+ * Type for the `init` and `cleanup` element definition methods.
+ *
+ * @category Internal
+ */
+export type InitCallback<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = (params: RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => undefined | void;
+/**
+ * Type for the `updateState` render parameter.
+ *
+ * @category Internal
+ */
+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, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = {
+    state: Readonly<State>;
+    cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
+    updateState: UpdateStateCallback<State>;
+    events: EventDescriptorMap<TagName, EventsInit>;
+    host: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+    slotNames: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    testIds: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
+    /** 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, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>>({ element, eventsMap, cssVars, slotNamesMap, testIdsMap, }: {
+    element: DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+    eventsMap: EventDescriptorMap<TagName, EventsInit>;
+    cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
+    slotNamesMap: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    testIdsMap: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
+}): RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

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

@@ -0,0 +1,27 @@
+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, testIdsMap, }) {
+    function updateState(newStatePartial) {
+        getObjectTypedKeys(newStatePartial).forEach((stateKey) => {
+            const newValue = newStatePartial[stateKey];
+            element.instanceState[stateKey] = newValue;
+        });
+    }
+    const renderParams = {
+        cssVars,
+        slotNames: slotNamesMap,
+        testIds: testIdsMap,
+        dispatch: (event) => element.dispatchEvent(event),
+        events: eventsMap,
+        host: element,
+        inputs: element.instanceInputs,
+        state: element.instanceState,
+        updateState,
+    };
+    return renderParams;
+}

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

@@ -0,0 +1,36 @@
+import { type PartialWithNullable } from '@augment-vir/common';
+import { type CustomElementTagName } from './custom-tag-name.js';
+import { type DeclarativeElementInit } from './declarative-element-init.js';
+import { type DeclarativeElementInputErrorParams } from './define-element.js';
+import { type EventsInitMap } from './properties/element-events.js';
+import { type PropertyInitMapBase } from './properties/element-properties.js';
+import { type BaseStringName } from './properties/string-names.js';
+/**
+ * Options for {@link wrapDefineElement}.
+ *
+ * @category Internal
+ */
+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, StateRequirement, EventsInitRequirement, BaseStringName<TagNameRequirement>, BaseStringName<TagNameRequirement>, ReadonlyArray<string>, ReadonlyArray<string>>) => void;
+    /**
+     * An optional callback which transforms a element definition init object given to the wrapped
+     * element definition.
+     */
+    transformInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseStringName<TagNameRequirement>, BaseStringName<TagNameRequirement>, ReadonlyArray<string>, ReadonlyArray<string>>) => DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseStringName<TagNameRequirement>, BaseStringName<TagNameRequirement>, ReadonlyArray<string>, ReadonlyArray<string>>;
+}>;
+/**
+ * Wraps {@link defineElement} 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 = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): <Inputs extends InputsRequirement>(...errorParams: DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends TagNameRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

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

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import { defineElement } from './define-element.js';
+/**
+ * Wraps {@link defineElement} 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 (...errorParams) => {
+        return (inputs) => {
+            assertInputs(inputs);
+            return defineElement(...errorParams)(transformInputs(inputs));
+        };
+    };
+}

package/{src/index.ts → dist/index.d.ts}

@@ -1,5 +1,4 @@
 export * from 'observavir';
-
 export * from './declarative-element/custom-tag-name.js';
 export * from './declarative-element/declarative-element-init.js';
 export * from './declarative-element/declarative-element.js';

package/dist/index.js

@@ -0,0 +1,43 @@
+export * from 'observavir';
+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.js';
+export * from './declarative-element/definition-options.js';
+export * from './declarative-element/directives/async-prop.js';
+export * from './declarative-element/directives/attributes.directive.js';
+export * from './declarative-element/directives/create-attribute-directive.js';
+export * from './declarative-element/directives/directive-helpers.js';
+export * from './declarative-element/directives/listen-to-activate.js';
+export * from './declarative-element/directives/listen.directive.js';
+export * from './declarative-element/directives/mutate.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-intersect.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-vars.js';
+export * from './declarative-element/properties/element-events.js';
+export * from './declarative-element/properties/element-properties.js';
+export * from './declarative-element/properties/host-classes.js';
+export * from './declarative-element/properties/property-proxy.js';
+export * from './declarative-element/properties/string-names.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/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/increment.js';
+export * from './util/lit-template.js';
+export * from './util/map-async-value.js';
+export * from './util/type.js';

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

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

package/{src/lit-exports/base-lit-exports.ts → dist/lit-exports/base-lit-exports.d.ts}

@@ -1,13 +1,5 @@
-export {LitElement, noChange, nothing, svg, unsafeCSS} from 'lit';
-export type {
-    CSSResult,
-    CSSResultGroup,
-    CompiledTemplate,
-    CompiledTemplateResult,
-    HTMLTemplateResult,
-    SVGTemplateResult,
-    TemplateResult,
-} from 'lit';
+export { LitElement, noChange, nothing, svg, unsafeCSS } from 'lit';
+export type { CSSResult, CSSResultGroup, CompiledTemplate, CompiledTemplateResult, HTMLTemplateResult, SVGTemplateResult, TemplateResult, } from 'lit';
 export * from 'lit/async-directive.js';
 export * from 'lit/decorators.js';
 export * from 'lit/directive-helpers.js';

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

@@ -0,0 +1,24 @@
+export { LitElement, noChange, nothing, svg, unsafeCSS } from 'lit';
+export * from 'lit/async-directive.js';
+export * from 'lit/decorators.js';
+export * from 'lit/directive-helpers.js';
+export * from 'lit/directive.js';
+export * from 'lit/directives/async-append.js';
+export * from 'lit/directives/async-replace.js';
+export * from 'lit/directives/cache.js';
+export * from 'lit/directives/choose.js';
+export * from 'lit/directives/class-map.js';
+export * from 'lit/directives/guard.js';
+export * from 'lit/directives/if-defined.js';
+export * from 'lit/directives/join.js';
+export * from 'lit/directives/keyed.js';
+export * from 'lit/directives/live.js';
+export * from 'lit/directives/map.js';
+export * from 'lit/directives/range.js';
+export * from 'lit/directives/ref.js';
+export * from 'lit/directives/style-map.js';
+export * from 'lit/directives/template-content.js';
+export * from 'lit/directives/unsafe-html.js';
+export * from 'lit/directives/unsafe-svg.js';
+export * from 'lit/directives/until.js';
+export * from 'lit/directives/when.js';

package/{src/lit-exports/lit-repeat-fix.ts → dist/lit-exports/lit-repeat-fix.d.ts}

@@ -1,12 +1,9 @@
-export type {KeyFn} from 'lit/directives/repeat.js';
-export type {RepeatDirective};
-
-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 {repeat as repeatImport} from 'lit/directives/repeat.js';
-import {type HtmlInterpolation} from '../template-transforms/vir-html/html-interpolation.js';
-
+export type { KeyFn } from 'lit/directives/repeat.js';
+export type { RepeatDirective };
+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.
@@ -18,32 +15,16 @@ declare class RepeatDirective extends Directive {
     constructor(partInfo: PartInfo);
     private _getValuesAndKeys;
     /** Renders the repeated templates. */
-    public render<T>(items: Iterable<T>, template: ItemTemplate<T>): Array<HtmlInterpolation>;
+    render<T>(items: Iterable<T>, template: ItemTemplate<T>): Array<HtmlInterpolation>;
     /** Renders the repeated templates. */
-    public render<T>(
-        items: Iterable<T>,
-        keyFn: KeyFn<T> | ItemTemplate<T>,
-        template: ItemTemplate<T>,
-    ): Array<HtmlInterpolation>;
-
+    render<T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): Array<HtmlInterpolation>;
     /** Updates the repeated templates. */
-    public update<T>(
-        containerPart: ChildPart,
-        [
-            items,
-            keyFnOrTemplate,
-            template,
-        ]: [
-            Iterable<T>,
-            (
-                | KeyFn<T>
-                | ItemTemplate<T>
-            ),
-            ItemTemplate<T>,
-        ],
-    ): HtmlInterpolation[] | typeof noChange;
+    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.
@@ -51,7 +32,6 @@ declare class RepeatDirective extends Directive {
  * @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.
@@ -59,19 +39,10 @@ export type ItemTemplate<T> = (item: T, index: number) => HtmlInterpolation;
  * @category Internal
  */
 export interface RepeatDirectiveFn {
-    <T>(
-        items: Iterable<T>,
-        keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>,
-        template?: ItemTemplate<T>,
-    ): HtmlInterpolation[];
+    <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[];
+    <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
@@ -107,4 +78,4 @@ export interface RepeatDirectiveFn {
  * 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 as RepeatDirectiveFn;
+export declare const repeat: RepeatDirectiveFn;

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

@@ -0,0 +1,37 @@
+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("element-vir").DeclarativeElementDefinition<"my-app", {}, {}, {}, "my-app-", "my-app-", readonly [], readonly []>;

package/{src/readme-examples/my-app.element.ts → dist/readme-examples/my-app.element.js}

@@ -1,11 +1,10 @@
-import {defineElement} from 'element-vir';
-import {html} from '../index.js';
-import {MySimple} from './my-simple.element.js';
-
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
+import { MySimple } from './my-simple.element.js';
 export const MyApp = defineElement()({
     tagName: 'my-app',
     render() {
-        return html`
+        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 {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+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").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+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").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

package/{src/readme-examples/my-custom-define.ts → dist/readme-examples/my-custom-define.js}

@@ -1,20 +1,15 @@
-import {wrapDefineElement} from '../index.js';
-
-export type VirTagName = `vir-${string}`;
-
-export const defineVirElement = wrapDefineElement<VirTagName>();
-
+import { wrapDefineElement } from '../index.js';
+export const defineVirElement = wrapDefineElement();
 // add an optional assert callback
-export const defineVerifiedVirElement = wrapDefineElement<VirTagName>({
+export const defineVerifiedVirElement = 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 defineTransformedVirElement = wrapDefineElement<VirTagName>({
+export const defineTransformedVirElement = wrapDefineElement({
     transformInputs: (inputs) => {
         return {
             ...inputs,

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

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

package/{src/readme-examples/my-simple.element.ts → dist/readme-examples/my-simple.element.js}

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

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

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