element-vir 26.12.0 → 26.12.1

package/dist/template-transforms/nested-mapped-templates.js

@@ -0,0 +1,96 @@
+import { check } from '@augment-vir/assert';
+import { filterMap } from '@augment-vir/common';
+import { hasTagName, isMinimalDefinitionWithInputs } from './minimal-element-definition.js';
+function extractElementKeys(values) {
+    return filterMap(values, (value) => {
+        if (isMinimalDefinitionWithInputs(value)) {
+            return value.definition;
+        }
+        if (hasTagName(value)) {
+            return value.tagInterpolationKey || value;
+        }
+        return undefined;
+    }, check.isTruthy);
+}
+/**
+ * The transformed templates are written to a map so that we can preserve reference equality between
+ * calls. Without maintaining reference equality between html`` calls, lit-element reconstructs all
+ * of its children on every render.
+ *
+ * This is a WeakMap because we only care about the transformed array value as long as the original
+ * template array key exists.
+ */
+const transformedTemplateStrings = new WeakMap();
+export function getAlreadyMappedTemplate(templateStringsKey, values) {
+    const elementKeys = extractElementKeys(values);
+    const nestedValue = getNestedValues(transformedTemplateStrings, [
+        templateStringsKey,
+        ...elementKeys,
+    ]);
+    return nestedValue.value?.template;
+}
+export function setMappedTemplate(templateStringsKey, values, valueToSet) {
+    const elementKeys = extractElementKeys(values);
+    return setNestedValues(transformedTemplateStrings, [
+        templateStringsKey,
+        ...elementKeys,
+    ], valueToSet);
+}
+function getNestedValues(map, keys, index = 0) {
+    const { currentTemplateAndNested, reason } = getCurrentKeyAndValue(map, keys, index);
+    if (!currentTemplateAndNested) {
+        return { value: currentTemplateAndNested, reason };
+    }
+    if (index === keys.length - 1) {
+        return { value: currentTemplateAndNested, reason: `reached end of keys array` };
+    }
+    if (!currentTemplateAndNested.nested) {
+        return { value: undefined, reason: `map at key index ${index} did not have nested maps` };
+    }
+    return getNestedValues(currentTemplateAndNested.nested, keys, index + 1);
+}
+function getCurrentKeyAndValue(map, keys, index) {
+    const currentKey = keys[index];
+    if (currentKey == undefined) {
+        return {
+            currentKey: undefined,
+            currentTemplateAndNested: undefined,
+            reason: `key at index ${index} not found`,
+        };
+    }
+    if (!map.has(currentKey)) {
+        return {
+            currentKey,
+            currentTemplateAndNested: undefined,
+            reason: `key at index ${index} was not in the map`,
+        };
+    }
+    const currentTemplateAndNested = map.get(currentKey);
+    if (currentTemplateAndNested == undefined) {
+        return {
+            currentKey,
+            currentTemplateAndNested: undefined,
+            reason: `value at key at index ${index} was undefined`,
+        };
+    }
+    return { currentKey, currentTemplateAndNested, reason: `key and value exists` };
+}
+function setNestedValues(map, keys, valueToSet, index = 0) {
+    const { currentTemplateAndNested, currentKey, reason } = getCurrentKeyAndValue(map, keys, index);
+    if (!currentKey) {
+        return { result: false, reason };
+    }
+    const nestedAndTemplate = currentTemplateAndNested ?? { nested: undefined, template: undefined };
+    if (!currentTemplateAndNested) {
+        map.set(currentKey, nestedAndTemplate);
+    }
+    if (index === keys.length - 1) {
+        nestedAndTemplate.template = valueToSet;
+        return { result: true, reason: `set value at end of keys array` };
+    }
+    const nestedWeakMap = nestedAndTemplate.nested ?? new WeakMap();
+    if (!nestedAndTemplate.nested) {
+        nestedAndTemplate.nested = nestedWeakMap;
+    }
+    return setNestedValues(nestedWeakMap, keys, valueToSet, index + 1);
+}

package/{src/template-transforms/template-transform-type.ts → dist/template-transforms/template-transform-type.d.ts}

@@ -1,10 +1,8 @@
-import {type ArrayInsertion} from '../util/array.js';
-
+import { type ArrayInsertion } from '../util/array.js';
 export type AllValueTransforms = {
     valueIndexDeletions: number[];
     valueInsertions: ArrayInsertion<unknown>[];
 };
-
 export type TemplateTransform = {
     templateStrings: TemplateStringsArray;
     valuesTransform(values: unknown[]): AllValueTransforms;

package/dist/template-transforms/template-transform-type.js

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

package/dist/template-transforms/transform-template.d.ts

@@ -0,0 +1,14 @@
+import { type TemplateTransform } from './template-transform-type.js';
+export type ValueInsertion = {
+    index: number;
+    value: unknown;
+};
+export type ValueTransformCallback = (lastNewString: string, currentLitString: string, currentValue: unknown) => {
+    replacement: unknown;
+    getExtraValues: ((currentValue: unknown) => unknown[]) | undefined;
+} | undefined;
+export declare function getTransformedTemplate<PossibleValues>(templateStringsKey: TemplateStringsArray, values: PossibleValues[], fallbackTransform: () => TemplateTransform): {
+    strings: TemplateStringsArray;
+    values: PossibleValues[];
+};
+export declare function transformTemplate<PossibleValues>(inputTemplateStrings: TemplateStringsArray, inputValues: PossibleValues[], transformValue: ValueTransformCallback, assertValidString?: (templateStringPart: string) => void): TemplateTransform;

package/{src/template-transforms/transform-template.ts → dist/template-transforms/transform-template.js}

@@ -1,78 +1,36 @@
-import {type ArrayInsertion, insertAndRemoveValues} from '../util/array.js';
-import {getAlreadyMappedTemplate, setMappedTemplate} from './nested-mapped-templates.js';
-import {type AllValueTransforms, type TemplateTransform} from './template-transform-type.js';
-
-export type ValueInsertion = {
-    index: number;
-    value: unknown;
-};
-
-export type ValueTransformCallback = (
-    lastNewString: string,
-    currentLitString: string,
-    currentValue: unknown,
-) =>
-    | {
-          replacement: unknown;
-          getExtraValues: ((currentValue: unknown) => unknown[]) | undefined;
-      }
-    | undefined;
-
-export function getTransformedTemplate<PossibleValues>(
-    templateStringsKey: TemplateStringsArray,
-    values: PossibleValues[],
-    fallbackTransform: () => TemplateTransform,
-) {
+import { insertAndRemoveValues } from '../util/array.js';
+import { getAlreadyMappedTemplate, setMappedTemplate } from './nested-mapped-templates.js';
+export function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
     const alreadyTransformedTemplateStrings = getAlreadyMappedTemplate(templateStringsKey, values);
-
-    const templateTransform: TemplateTransform =
-        alreadyTransformedTemplateStrings ?? fallbackTransform();
-
+    const templateTransform = alreadyTransformedTemplateStrings ?? fallbackTransform();
     if (!alreadyTransformedTemplateStrings) {
         const result = setMappedTemplate(templateStringsKey, values, templateTransform);
         if (!result.result) {
             throw new Error(`Failed to set template transform: ${result.reason}`);
         }
     }
-
     const valueTransforms = templateTransform.valuesTransform(values);
-
-    const transformedValuesArray: PossibleValues[] = insertAndRemoveValues(
-        values,
-        valueTransforms.valueInsertions,
-        valueTransforms.valueIndexDeletions,
-    ) as PossibleValues[];
-
+    const transformedValuesArray = insertAndRemoveValues(values, valueTransforms.valueInsertions, valueTransforms.valueIndexDeletions);
     return {
         strings: templateTransform.templateStrings,
         values: transformedValuesArray,
     };
 }
-
-export function transformTemplate<PossibleValues>(
-    inputTemplateStrings: TemplateStringsArray,
-    inputValues: PossibleValues[],
-    transformValue: ValueTransformCallback,
-    assertValidString?: (templateStringPart: string) => void,
-): TemplateTransform {
-    const newStrings: string[] = [];
-    const newRaws: string[] = [];
-    const valueIndexDeletions: AllValueTransforms['valueIndexDeletions'] = [];
-    const valueTransforms: ((values: unknown[]) => ArrayInsertion<unknown>)[] = [];
-
+export function transformTemplate(inputTemplateStrings, inputValues, transformValue, assertValidString) {
+    const newStrings = [];
+    const newRaws = [];
+    const valueIndexDeletions = [];
+    const valueTransforms = [];
     inputTemplateStrings.forEach((currentTemplateString, currentTemplateStringIndex) => {
         const lastNewStringsIndex = newStrings.length - 1;
         const lastNewString = newStrings[lastNewStringsIndex];
         const currentValueIndex = currentTemplateStringIndex - 1;
         const currentValue = inputValues[currentValueIndex];
-
         if (assertValidString) {
             assertValidString(currentTemplateString);
         }
-
-        let transformOutput: ReturnType<ValueTransformCallback> | undefined = undefined;
-        let extraValues: unknown[] = [];
-
+        let transformOutput = undefined;
+        let extraValues = [];
         if (typeof lastNewString === 'string') {
             transformOutput = transformValue(lastNewString, currentTemplateString, currentValue);
             if (transformOutput) {
@@ -83,7 +41,6 @@ export function transformTemplate<PossibleValues>(
                 valueIndexDeletions.push(currentValueIndex);
                 const getExtraValuesCallback = transformOutput.getExtraValues;
                 extraValues = getExtraValuesCallback ? getExtraValuesCallback(currentValue) : [];
-
                 if (extraValues.length && getExtraValuesCallback) {
                     newStrings[lastNewStringsIndex] += ' ';
                     extraValues.forEach((value, index) => {
@@ -92,7 +49,7 @@ export function transformTemplate<PossibleValues>(
                             newStrings.push(' ');
                         }
                     });
-                    valueTransforms.push((values): ArrayInsertion<unknown> => {
+                    valueTransforms.push((values) => {
                         const latestCurrentValue = values[currentValueIndex];
                         const insertions = getExtraValuesCallback(latestCurrentValue);
                         return {
@@ -101,22 +58,21 @@ export function transformTemplate<PossibleValues>(
                         };
                     });
                     newStrings.push(currentTemplateString);
-                } else {
+                }
+                else {
                     newStrings[lastNewStringsIndex] += currentTemplateString;
                 }
             }
         }
-
         if (!transformOutput) {
             newStrings.push(currentTemplateString);
         }
-
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const currentRawLitString = inputTemplateStrings.raw[currentTemplateStringIndex]!;
+        const currentRawLitString = inputTemplateStrings.raw[currentTemplateStringIndex];
         if (transformOutput) {
             newRaws[lastNewStringsIndex] = [
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                newRaws[lastNewStringsIndex]!,
+                newRaws[lastNewStringsIndex],
                 transformOutput.replacement,
                 currentRawLitString,
             ].join('');
@@ -125,22 +81,18 @@ export function transformTemplate<PossibleValues>(
                     newRaws.push('');
                 });
             }
-        } else {
+        }
+        else {
             newRaws.push(currentRawLitString);
         }
     });
-
-    const newTemplateStrings: TemplateStringsArray = Object.assign([], newStrings, {
+    const newTemplateStrings = Object.assign([], newStrings, {
         raw: newRaws,
     });
-
     return {
         templateStrings: newTemplateStrings,
-        valuesTransform(values): AllValueTransforms {
-            const insertions: ArrayInsertion<unknown>[] = valueTransforms.flatMap(
-                (transformCallback) => transformCallback(values),
-            );
-
+        valuesTransform(values) {
+            const insertions = valueTransforms.flatMap((transformCallback) => transformCallback(values));
             return {
                 valueIndexDeletions,
                 valueInsertions: insertions,

package/dist/template-transforms/vir-css/css-transform.d.ts

@@ -0,0 +1,4 @@
+import { type CSSResultGroup } from '../../lit-exports/all-lit-exports.js';
+import { type MinimalElementDefinition } from '../minimal-element-definition.js';
+import { type TemplateTransform } from '../template-transform-type.js';
+export declare function transformCssTemplate(inputTemplateStrings: TemplateStringsArray, inputValues: (number | CSSResultGroup | MinimalElementDefinition)[]): TemplateTransform;

package/dist/template-transforms/vir-css/css-transform.js

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { hasTagName } from '../minimal-element-definition.js';
+import { transformTemplate } from '../transform-template.js';
+function transformCss(...[lastNewString, currentLitString, currentValue,]) {
+    if (!hasTagName(currentValue)) {
+        return undefined;
+    }
+    return {
+        replacement: currentValue.tagName,
+        getExtraValues: undefined,
+    };
+}
+export function transformCssTemplate(inputTemplateStrings, inputValues) {
+    return transformTemplate(inputTemplateStrings, inputValues, transformCss);
+}

package/dist/template-transforms/vir-css/vir-css.d.ts

@@ -0,0 +1,12 @@
+import { type CSSResult, type CSSResultGroup } from '../../lit-exports/all-lit-exports.js';
+import { type MinimalElementDefinition } from '../minimal-element-definition.js';
+/**
+ * A template literal tag used to define styles for element definitions. In particular, this is used
+ * for the `styles` property in an element definitions init object.
+ *
+ * For security reasons, only literal string or number values may be interpolated inside of this
+ * taggedTemplate. To incorporate non-literal values, wrap the value in a call to `unsafeCSS`.
+ *
+ * @category Element Definition
+ */
+export declare function css(inputTemplateStrings: TemplateStringsArray, ...inputValues: (number | CSSResultGroup | MinimalElementDefinition | CSSResult)[]): CSSResult;

package/dist/template-transforms/vir-css/vir-css.js

@@ -0,0 +1,21 @@
+import { css as litCss } from 'lit';
+import { getTransformedTemplate } from '../transform-template.js';
+import { transformCssTemplate } from './css-transform.js';
+/**
+ * A template literal tag used to define styles for element definitions. In particular, this is used
+ * for the `styles` property in an element definitions init object.
+ *
+ * For security reasons, only literal string or number values may be interpolated inside of this
+ * taggedTemplate. To incorporate non-literal values, wrap the value in a call to `unsafeCSS`.
+ *
+ * @category Element Definition
+ */
+export function css(inputTemplateStrings, ...inputValues) {
+    const transformedTemplate = getTransformedTemplate(inputTemplateStrings, inputValues, () => {
+        return transformCssTemplate(inputTemplateStrings, inputValues);
+    });
+    const cssResult = litCss(transformedTemplate.strings, 
+    /** The filter will remove the DeclarativeElement elements */
+    ...transformedTemplate.values);
+    return cssResult;
+}

package/dist/template-transforms/vir-html/html-interpolation.d.ts

@@ -0,0 +1,42 @@
+import { type AnyFunction, type Overwrite } from '@augment-vir/common';
+import { type CSSResult, type TemplateResult, type nothing } from 'lit';
+import { type EmptyObject, type HasRequiredKeys, type IsNever } from 'type-fest';
+import { type DeclarativeElementDefinition } from '../../declarative-element/declarative-element.js';
+import { type Decrement, type Increment } from '../../util/increment.js';
+import { type MinimalDefinitionWithInputs, type MinimalElementDefinition } from '../minimal-element-definition.js';
+/**
+ * Unfortunately the type for `DirectiveResult` means it's just an empty object. So in order to
+ * block actual objects, we have to narrow `DirectiveResult` further to this empty object type.
+ *
+ * @category Internal
+ */
+export type DirectiveOutput = EmptyObject;
+/**
+ * This is used in order to block accidental object interpolations into HTML, which get stringified
+ * into `'[object Object]'`, which nobody ever wants that.
+ *
+ * @category Internal
+ */
+export type HtmlInterpolation = null | undefined | string | number | boolean | bigint | CSSResult | Readonly<CSSResult> | Element | Readonly<Element> | TemplateResult | Readonly<TemplateResult> | MinimalElementDefinition | Readonly<MinimalElementDefinition> | MinimalDefinitionWithInputs | Readonly<MinimalDefinitionWithInputs> | DeclarativeElementDefinition | Readonly<DeclarativeElementDefinition> | DirectiveOutput | Readonly<DirectiveOutput> | AnyFunction | typeof nothing | HtmlInterpolation[] | ReadonlyArray<HtmlInterpolation> | Iterable<HtmlInterpolation> | Readonly<Iterable<HtmlInterpolation>>;
+/**
+ * This type ensures that interpolated element definitions are not missing their inputs, when inputs
+ * are required.
+ *
+ * @category Internal
+ */
+export type VerifyHtmlValues<Values extends HtmlInterpolation[], WaitingForEndTags extends Record<string, number> = {}> = Values extends [
+    infer CurrentDefinition extends DeclarativeElementDefinition,
+    ...infer Rest extends HtmlInterpolation[]
+] ? CurrentDefinition extends DeclarativeElementDefinition<infer TagName, infer Inputs> ? HasRequiredKeys<Inputs> extends true ? IsNever<Decrement<WaitingForEndTags[TagName]>> extends true ? [
+    `ERROR: This element is missing its inputs.`,
+    ...VerifyHtmlValues<Rest, WaitingForEndTags>
+] : [
+    CurrentDefinition,
+    ...VerifyHtmlValues<Rest, Overwrite<WaitingForEndTags, Record<TagName, Decrement<WaitingForEndTags[TagName]>>>>
+] : [CurrentDefinition, ...VerifyHtmlValues<Rest, WaitingForEndTags>] : [CurrentDefinition, ...VerifyHtmlValues<Rest, WaitingForEndTags>] : Values extends [
+    infer CurrentDefinition extends MinimalDefinitionWithInputs,
+    ...infer Rest extends HtmlInterpolation[]
+] ? [
+    CurrentDefinition,
+    ...VerifyHtmlValues<Rest, Overwrite<WaitingForEndTags, Record<CurrentDefinition['definition']['tagName'], Increment<WaitingForEndTags[CurrentDefinition['definition']['tagName']]>>>>
+] : Values;

package/dist/template-transforms/vir-html/html-interpolation.js

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

package/dist/template-transforms/vir-html/html-transform.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLTemplateResult } from '../../lit-exports/all-lit-exports.js';
+import { type TemplateTransform } from '../template-transform-type.js';
+import { type HtmlInterpolation } from './html-interpolation.js';
+export declare function mapHtmlValues(inputTemplateStrings: TemplateStringsArray, inputValues: HtmlInterpolation[]): HtmlInterpolation[];
+export declare function transformHtmlTemplate(litTemplate: HTMLTemplateResult): TemplateTransform;

package/dist/template-transforms/vir-html/html-transform.js

@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
+import { check } from '@augment-vir/assert';
+import { collapseWhiteSpace, getOrSet, safeMatch } from '@augment-vir/common';
+import { assign } from '../../declarative-element/directives/assign.directive.js';
+import { declarativeElementRequired } from '../../require-declarative-element.js';
+import { hasTagName, isMinimalDefinitionWithInputs, } from '../minimal-element-definition.js';
+import { transformTemplate } from '../transform-template.js';
+import { tagNameKeys } from './tag-name-keys.js';
+export function mapHtmlValues(inputTemplateStrings, inputValues) {
+    return inputValues.map((currentValue, currentValueIndex) => {
+        const lastString = inputTemplateStrings[currentValueIndex];
+        const nextString = inputTemplateStrings[currentValueIndex + 1];
+        if (lastString && nextString) {
+            const { shouldHaveTagNameHere } = classifyValue(lastString, nextString);
+            if (shouldHaveTagNameHere && check.isString(currentValue)) {
+                const replacement = {
+                    tagName: currentValue,
+                    tagInterpolationKey: getOrSet(tagNameKeys, currentValue, () => {
+                        return { tagName: currentValue };
+                    }),
+                };
+                return replacement;
+            }
+        }
+        return currentValue;
+    });
+}
+function classifyValue(lastNewString, currentTemplateString) {
+    const isOpeningTag = lastNewString.trim().endsWith('<') && !!currentTemplateString.match(/^[\s>]/);
+    const isClosingTag = lastNewString.trim().endsWith('</') && currentTemplateString.trim().startsWith('>');
+    const shouldHaveTagNameHere = isOpeningTag || isClosingTag;
+    return {
+        isOpeningTag,
+        shouldHaveTagNameHere,
+    };
+}
+function transformHtml(...[lastNewString, currentTemplateString, rawCurrentValue,]) {
+    const currentValue = isMinimalDefinitionWithInputs(rawCurrentValue)
+        ? rawCurrentValue.definition
+        : rawCurrentValue;
+    const { isOpeningTag, shouldHaveTagNameHere } = classifyValue(lastNewString, currentTemplateString);
+    const isTagNameWrapper = hasTagName(currentValue);
+    if (isTagNameWrapper && shouldHaveTagNameHere && currentValue.tagInterpolationKey) {
+        return {
+            replacement: currentValue.tagName,
+            getExtraValues: undefined,
+        };
+    }
+    if (shouldHaveTagNameHere && !isTagNameWrapper) {
+        console.error({
+            lastNewString,
+            currentTemplateString,
+            currentValue,
+        });
+        throw new Error(`Got interpolated tag name but found no tag name on the given value: '${currentValue?.tagName ||
+            currentValue?.prototype?.constructor?.name ||
+            currentValue?.constructor?.name}'`);
+    }
+    if (!shouldHaveTagNameHere || !isTagNameWrapper) {
+        return undefined;
+    }
+    const replacement = currentValue.tagName;
+    return {
+        replacement,
+        getExtraValues(extraValueCurrentValue) {
+            const assignedInputs = isMinimalDefinitionWithInputs(extraValueCurrentValue)
+                ? extraValueCurrentValue.inputs
+                : undefined;
+            return [
+                isOpeningTag && assignedInputs ? assign(assignedInputs) : undefined,
+            ].filter(check.isTruthy);
+        },
+    };
+}
+function extractCustomElementTags(input) {
+    const tagNameMatches = safeMatch(input, /<\/\s*[^\s><]+\s*>/g);
+    return tagNameMatches.reduce((accum, match) => {
+        const tagName = collapseWhiteSpace(match.replace(/\n/g, ' ')).replace(/<\/|>/g, '');
+        // custom elements always have a dash in them
+        if (tagName.includes('-')) {
+            return accum.concat(tagName);
+        }
+        return accum;
+    }, []);
+}
+function stringValidator(input) {
+    if (declarativeElementRequired) {
+        const customElementTagNames = extractCustomElementTags(input);
+        if (customElementTagNames.length) {
+            console.error(`Custom element tags must be interpolated from declarative elements: ${customElementTagNames.join(', ')}`);
+        }
+    }
+}
+export function transformHtmlTemplate(litTemplate) {
+    return transformTemplate(litTemplate.strings, litTemplate.values, transformHtml, stringValidator);
+}

package/dist/template-transforms/vir-html/tag-name-keys.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Used to create objects for each interpolated tag name string (tag names that aren't wrapped in a
+ * `DeclarativeElementDefinition`) so that we can use them as keys for the mapped template weakmap.
+ */
+export declare const tagNameKeys: Record<string, {
+    tagName: string;
+}>;

package/{src/template-transforms/vir-html/tag-name-keys.ts → dist/template-transforms/vir-html/tag-name-keys.js}

@@ -2,4 +2,4 @@
  * Used to create objects for each interpolated tag name string (tag names that aren't wrapped in a
  * `DeclarativeElementDefinition`) so that we can use them as keys for the mapped template weakmap.
  */
-export const tagNameKeys: Record<string, {tagName: string}> = {};
+export const tagNameKeys = {};

package/dist/template-transforms/vir-html/vir-html.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLTemplateResult } from '../../lit-exports/all-lit-exports.js';
+import { type HtmlInterpolation, type VerifyHtmlValues } from './html-interpolation.js';
+/**
+ * Interprets a template literal as an HTML template which is lazily rendered to the DOM.
+ *
+ * Wraps lit-html's html tagged template and enables interpolations of
+ * `DeclarativeElementDefinition` for tag names.
+ *
+ * @category Element Definition
+ */
+export declare function html<const Values extends HtmlInterpolation[]>(inputTemplateStrings: TemplateStringsArray, ...inputValues: VerifyHtmlValues<Values>): HTMLTemplateResult;

package/{src/template-transforms/vir-html/vir-html.ts → dist/template-transforms/vir-html/vir-html.js}

@@ -1,9 +1,6 @@
-import {html as litHtml} from 'lit';
-import {type HTMLTemplateResult} from '../../lit-exports/all-lit-exports.js';
-import {getTransformedTemplate} from '../transform-template.js';
-import {type HtmlInterpolation, type VerifyHtmlValues} from './html-interpolation.js';
-import {mapHtmlValues, transformHtmlTemplate} from './html-transform.js';
-
+import { html as litHtml } from 'lit';
+import { getTransformedTemplate } from '../transform-template.js';
+import { mapHtmlValues, transformHtmlTemplate } from './html-transform.js';
 /**
  * Interprets a template literal as an HTML template which is lazily rendered to the DOM.
  *
@@ -12,18 +9,13 @@ import {mapHtmlValues, transformHtmlTemplate} from './html-transform.js';
  *
  * @category Element Definition
  */
-export function html<const Values extends HtmlInterpolation[]>(
-    inputTemplateStrings: TemplateStringsArray,
-    ...inputValues: VerifyHtmlValues<Values>
-): HTMLTemplateResult {
+export function html(inputTemplateStrings, ...inputValues) {
     const mappedValues = mapHtmlValues(inputTemplateStrings, inputValues);
-
     const litTemplate = litHtml(inputTemplateStrings, ...mappedValues);
     const transformedTemplate = getTransformedTemplate(inputTemplateStrings, mappedValues, () => {
         return transformHtmlTemplate(litTemplate);
     });
-
-    const htmlTemplate: HTMLTemplateResult = {
+    const htmlTemplate = {
         ...litTemplate,
         strings: transformedTemplate.strings,
         values: transformedTemplate.values,

package/dist/typed-event/typed-event.d.ts

@@ -0,0 +1,55 @@
+import { type NonEmptyString } from '../util/type.js';
+/**
+ * A custom event with strict types for details and the event's `type` property.
+ *
+ * @category Internal
+ */
+export declare class TypedEvent<EventTypeNameGeneric extends string = '', EventDetailGeneric = undefined> extends CustomEvent<EventDetailGeneric> {
+    readonly _type: EventTypeNameGeneric;
+    get type(): EventTypeNameGeneric;
+    constructor(type: EventTypeNameGeneric | {
+        type: EventTypeNameGeneric;
+    }, value: EventDetailGeneric);
+}
+/**
+ * A function that defines a typed event, used for defining element events in an element's
+ * definition.
+ *
+ * @category Internal
+ */
+export type DefineEvent<EventDetailGeneric> = <EventTypeNameGeneric extends string>(eventType: NonEmptyString<EventTypeNameGeneric>) => DefinedTypedEvent<EventTypeNameGeneric, EventDetailGeneric>;
+/**
+ * A concrete typed event definition.
+ *
+ * @category Internal
+ */
+export type DefinedTypedEvent<EventTypeNameGeneric extends string, EventDetailGeneric> = (new (eventValue: EventDetailGeneric) => TypedEvent<EventTypeNameGeneric, EventDetailGeneric>) & {
+    type: EventTypeNameGeneric;
+};
+/**
+ * Define a stand-alone typed event that can be emitted and listened to inside of HTML templates.
+ *
+ * Make sure to use currying and call this function twice! (This is required by TypeScript's type
+ * parameter inference system.)
+ *
+ * @category Element Definition
+ * @example
+ *
+ * ```ts
+ * import {defineTypedEvent} from 'element-vir';
+ *
+ * const myCustomEvent = defineTypedEvent<number>()('my-custom-event');
+ *
+ * const myCustomEvent2 = defineTypedEvent<// the event's `.detail` type
+ * number>()(
+ *     // the event's `.type` string
+ *     'my-custom-event2',
+ * );
+ * ```
+ */
+export declare function defineTypedEvent<EventDetailGeneric>(): <
+/**
+ * EventTypeNameGeneric is used for the event type property but not for the event value
+ * type... so it's named "name" instead of "type" cause type is overloaded here.
+ */
+EventTypeNameGeneric extends string>(eventType: NonEmptyString<EventTypeNameGeneric>) => DefinedTypedEvent<EventTypeNameGeneric, EventDetailGeneric>;