element-vir 5.1.0 → 5.4.0

package/dist/cjs/augments/array.d.ts

@@ -0,0 +1 @@
+export declare function filterOutArrayIndexes<T>(array: Readonly<T[]>, indexes: Readonly<number[]>): T[];

package/dist/cjs/augments/type.d.ts

@@ -0,0 +1 @@
+export declare type NonEmptyString<T> = T extends '' ? never : T;

package/dist/cjs/functional-element/define-functional-element.d.ts

@@ -0,0 +1,4 @@
+import { EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+import { FunctionalElement, FunctionalElementInit } from './functional-element';
+export declare function defineFunctionalElement<EventsInitGeneric extends EventsInitMap = {}, PropertyInitGeneric extends PropertyInitMapBase = {}>(functionalElementInit: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>): FunctionalElement<PropertyInitGeneric, EventsInitGeneric>;

package/dist/cjs/functional-element/define-functional-element.js

@@ -8,37 +8,39 @@ const element_properties_1 = require("./element-properties");
 const functional_element_1 = require("./functional-element");
 const render_callback_1 = require("./render-callback");
 function defineFunctionalElement(functionalElementInit) {
+    var _a;
     const eventsMap = (0, element_events_1.createEventDescriptorMap)(functionalElementInit.events);
-    const anonymousClass = class extends functional_element_1.FunctionalElementBaseClass {
-        static tagName = functionalElementInit.tagName;
-        static styles = functionalElementInit.styles || (0, lit_1.css) ``;
-        createRenderParams() {
-            return (0, render_callback_1.createRenderParams)(this, eventsMap);
-        }
-        static initInput = functionalElementInit;
-        static events = eventsMap;
-        static renderCallback = functionalElementInit.renderCallback;
-        static props = (0, element_properties_1.createPropertyDescriptorMap)(functionalElementInit.props);
-        initCalled = false;
-        render() {
-            const renderParams = this.createRenderParams();
-            if (!this.initCalled && functionalElementInit.initCallback) {
-                this.initCalled = true;
-                functionalElementInit.initCallback(renderParams);
+    const anonymousClass = (_a = class extends functional_element_1.FunctionalElementBaseClass {
+            constructor() {
+                super();
+                this.initCalled = false;
+                this.instanceProps = (0, element_properties_1.createPropertyProxy)(functionalElementInit.props, this);
+                const initProps = functionalElementInit.props || {};
+                Object.keys(initProps).forEach((propName) => {
+                    const functionalElementInstance = this;
+                    (0, decorators_js_1.property)()(functionalElementInstance, propName);
+                    functionalElementInstance[propName] = initProps[propName];
+                });
             }
-            return functionalElementInit.renderCallback(renderParams);
-        }
-        instanceProps = (0, element_properties_1.createPropertyProxy)(functionalElementInit.props, this);
-        constructor() {
-            super();
-            const initProps = functionalElementInit.props || {};
-            Object.keys(initProps).forEach((propName) => {
-                const functionalElementInstance = this;
-                (0, decorators_js_1.property)()(functionalElementInstance, propName);
-                functionalElementInstance[propName] = initProps[propName];
-            });
-        }
-    };
+            createRenderParams() {
+                return (0, render_callback_1.createRenderParams)(this, eventsMap);
+            }
+            render() {
+                const renderParams = this.createRenderParams();
+                if (!this.initCalled && functionalElementInit.initCallback) {
+                    this.initCalled = true;
+                    functionalElementInit.initCallback(renderParams);
+                }
+                return functionalElementInit.renderCallback(renderParams);
+            }
+        },
+        _a.tagName = functionalElementInit.tagName,
+        _a.styles = functionalElementInit.styles || (0, lit_1.css) ``,
+        _a.initInput = functionalElementInit,
+        _a.events = eventsMap,
+        _a.renderCallback = functionalElementInit.renderCallback,
+        _a.props = (0, element_properties_1.createPropertyDescriptorMap)(functionalElementInit.props),
+        _a);
     window.customElements.define(functionalElementInit.tagName, anonymousClass);
     return anonymousClass;
 }

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

@@ -0,0 +1,19 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { PartInfo } from 'lit/directive.js';
+import { StaticElementPropertyDescriptor } from '../element-properties';
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+export declare function assignWithCleanup<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue'], cleanupCallback: CleanupCallback<typeof propertyDescriptor['initValue']>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
+export declare type CleanupCallback<T> = (oldValue: T) => void;
+export declare type EqualityCheckCallback<T> = (oldValue: T, newValue: T) => boolean;
+declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    private readonly element;
+    private lastValue;
+    private lastCallback;
+    constructor(partInfo: PartInfo);
+    disconnected(): void;
+    render(propName: string, value: unknown, cleanupCallback: CleanupCallback<any>, equalityCheck?: EqualityCheckCallback<any>): symbol;
+}
+export {};

package/dist/cjs/functional-element/directives/assign-with-clean-up.directive.js

@@ -14,9 +14,6 @@ function assignWithCleanup(propertyDescriptor, value, cleanupCallback) {
 }
 exports.assignWithCleanup = assignWithCleanup;
 class AssignWithCleanupDirectiveClass extends async_directive_js_1.AsyncDirective {
-    element;
-    lastValue;
-    lastCallback;
     constructor(partInfo) {
         super(partInfo);
         this.element = (0, directive_util_1.extractFunctionalElement)(partInfo, 'assign');

package/dist/cjs/functional-element/directives/assign.directive.d.ts

@@ -0,0 +1,15 @@
+import { PartInfo } from 'lit/directive.js';
+import { PropertyInitMapBase, StaticElementPropertyDescriptor } from '../element-properties';
+import { FunctionalElementInstance } from '../functional-element';
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+export declare function assign<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue']): import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        readonly element: FunctionalElementInstance<PropertyInitMapBase>;
+        render(propName: string, value: unknown): symbol;
+        readonly _$isConnected: boolean;
+        update(_part: import("lit-html").Part, props: unknown[]): unknown;
+    };
+}>;

package/dist/cjs/functional-element/directives/assign.directive.js

@@ -13,7 +13,6 @@ function assign(propertyDescriptor, value) {
 }
 exports.assign = assign;
 const assignDirective = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    element;
     constructor(partInfo) {
         super(partInfo);
         this.element = (0, directive_util_1.extractFunctionalElement)(partInfo, 'assign');

package/dist/cjs/functional-element/directives/directive-util.d.ts

@@ -0,0 +1,15 @@
+import { ElementPartInfo, PartInfo } from 'lit/directive.js';
+import { PropertyInitMapBase } from '../element-properties';
+import { FunctionalElementInstance } from '../functional-element';
+/** For some reason these aren't defined in lit's types already. */
+export declare type ExtraPartInfoProperties = {
+    element: Element;
+    options: {
+        host: Element;
+        renderBefore: Element;
+        isConnected: boolean;
+    };
+};
+export declare function extractFunctionalElement<PropertyInitGeneric extends PropertyInitMapBase>(partInfo: PartInfo, directiveName: string): FunctionalElementInstance<PropertyInitGeneric>;
+export declare function extractElement<ElementType = HTMLElement>(partInfo: PartInfo, directiveName: string, constructorClass: (new () => ElementType) | (abstract new () => ElementType)): ElementType;
+export declare function assertsIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;

package/dist/cjs/functional-element/directives/listen.directive.d.ts

@@ -0,0 +1,13 @@
+import { DirectiveResult } from 'lit/directive.js';
+import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
+/**
+ * Listen to events. These can be native DOM events (use a string for the inputType argument) or
+ * typed events (pass in a return value from defineTypedEvent).
+ *
+ * @param definedTypedEvent Needs to come either from a functional element (like
+ *   MyFunctionalElement.events.eventName) or from a typed event created via the defineTypedEvent function.
+ * @param listener The callback to fire when an event is caught. Assuming the definedTypedEvent
+ *   input is properly typed, the event given to this callback will also be typed.
+ */
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => void): DirectiveResult<any>;
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: NativeElementEventNameGeneric, listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => void): DirectiveResult<any>;

package/dist/cjs/functional-element/directives/listen.directive.js

@@ -13,8 +13,6 @@ exports.listen = listen;
  * call is wrapped in the function above.
  */
 const listenDirective = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    element;
-    lastListenerMetaData;
     constructor(partInfo) {
         super(partInfo);
         this.element = (0, directive_util_1.extractElement)(partInfo, 'listen', HTMLElement);
@@ -30,7 +28,7 @@ const listenDirective = (0, directive_js_1.directive)(class extends directive_js
         return {
             eventType,
             callback,
-            listener: (event) => this.lastListenerMetaData?.callback(event),
+            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
         };
     }
     render(eventTypeInput, callback) {

package/dist/cjs/functional-element/directives/on-dom-created.directive.d.ts

@@ -0,0 +1,11 @@
+import { PartInfo } from 'lit/directive.js';
+export declare type OnDomCreatedCallback = (element: Element) => void;
+/** Only fires once, when the element has been created. */
+export declare const onDomCreated: (callback: OnDomCreatedCallback) => import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        element: Element | undefined;
+        update(partInfo: PartInfo, [callback]: [OnDomCreatedCallback]): undefined;
+        render(callback: OnDomCreatedCallback): undefined;
+        readonly _$isConnected: boolean;
+    };
+}>;

package/dist/cjs/functional-element/directives/on-dom-created.directive.js

@@ -6,7 +6,6 @@ const directive_util_1 = require("./directive-util");
 const directiveName = 'onDomCreated';
 /** Only fires once, when the element has been created. */
 exports.onDomCreated = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    element;
     constructor(partInfo) {
         super(partInfo);
         (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);

package/dist/cjs/functional-element/directives/on-resize.directive.d.ts

@@ -0,0 +1,15 @@
+import { PartInfo } from 'lit/directive.js';
+export declare type OnResizeCallback = (
+/** Only these two properties are supported in all major modern browsers */
+entry: Readonly<Pick<ResizeObserverEntry, 'target' | 'contentRect'>>) => void;
+export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        element: Element | undefined;
+        readonly resizeObserver: ResizeObserver;
+        callback: OnResizeCallback | undefined;
+        fireCallback(entries: ResizeObserverEntry[]): void;
+        update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
+        render(callback: OnResizeCallback): undefined;
+        readonly _$isConnected: boolean;
+    };
+}>;

package/dist/cjs/functional-element/directives/on-resize.directive.js

@@ -5,20 +5,19 @@ const directive_js_1 = require("lit/directive.js");
 const directive_util_1 = require("./directive-util");
 const directiveName = 'onResize';
 exports.onResize = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    element;
-    resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
-    callback;
     constructor(partInfo) {
         super(partInfo);
+        this.resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
         (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
     }
     fireCallback(entries) {
+        var _a;
         const resizeEntry = entries[0];
         if (!resizeEntry) {
             console.error(entries);
             throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
         }
-        this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect });
+        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
     }
     update(partInfo, [callback]) {
         (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);

package/dist/cjs/functional-element/element-events.d.ts

@@ -0,0 +1,10 @@
+import { DefinedTypedEvent, DefinedTypedEventNameDefinition, TypedEvent } from '../typed-event/typed-event';
+export declare type EventsInitMap = Record<string, DefinedTypedEventNameDefinition<any>>;
+export declare function defineElementEvent<EventDetailGeneric>(): DefinedTypedEventNameDefinition<EventDetailGeneric>;
+export declare type EventInitMapEventDetailExtractor<EventTypeNameGeneric extends keyof EventsInitGeneric, EventsInitGeneric extends EventsInitMap> = EventsInitGeneric[EventTypeNameGeneric] extends DefinedTypedEventNameDefinition<infer R> ? R : never;
+export declare type EventDescriptorMap<EventsInitGeneric extends EventsInitMap> = {
+    [CurrentEventTypeName in keyof EventsInitGeneric]: DefinedTypedEvent<CurrentEventTypeName extends string ? CurrentEventTypeName : never, EventInitMapEventDetailExtractor<CurrentEventTypeName, EventsInitGeneric>>;
+};
+export declare type EventObjectEventDetailExtractor<EventObjectGeneric extends DefinedTypedEvent<any, any>> = EventObjectGeneric extends DefinedTypedEvent<string, infer R> ? R : never;
+export declare type ElementEventDetailExtractor<ElementEventGeneric extends TypedEvent<any, any>> = ElementEventGeneric extends TypedEvent<string, infer R> ? R : never;
+export declare function createEventDescriptorMap<EventsInitGeneric extends EventsInitMap>(eventsInit: EventsInitGeneric | undefined): EventDescriptorMap<EventsInitGeneric>;

package/dist/cjs/functional-element/element-properties.d.ts

@@ -0,0 +1,16 @@
+import { FunctionalElementInstance } from './functional-element';
+export declare type PropertyInitMapBase = Record<string, unknown>;
+export declare type ElementProperty<KeyGeneric extends string | number | symbol, ValueGeneric> = {
+    name: KeyGeneric;
+    setProp(value: ValueGeneric): void;
+    getProp(): ValueGeneric;
+};
+export declare type StaticElementPropertyDescriptor<PropName extends string, PropValue> = {
+    propName: PropName;
+    initValue: PropValue;
+};
+export declare type ElementPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase> = {
+    [Property in keyof PropertyInitGeneric]: StaticElementPropertyDescriptor<string, PropertyInitGeneric[Property]>;
+};
+export declare function createPropertyProxy<PropertyInitGeneric extends PropertyInitMapBase>(propsInitMap: PropertyInitGeneric | undefined, element: FunctionalElementInstance<PropertyInitGeneric>): PropertyInitGeneric;
+export declare function createPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase>(propertyInit: PropertyInitGeneric | undefined): ElementPropertyDescriptorMap<PropertyInitGeneric>;

package/dist/cjs/functional-element/functional-element.d.ts

@@ -0,0 +1,42 @@
+import { CSSResult, LitElement, TemplateResult } from 'lit';
+import { EventDescriptorMap, EventsInitMap } from './element-events';
+import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
+import { InitCallback, RenderCallback } from './render-callback';
+export declare type CustomElementTagName = `${string}-${string}`;
+export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
+    /**
+     * HTML tag name. This should not be used directly, as interpolating it with the html tagged
+     * template from this package is preferred.
+     */
+    tagName: CustomElementTagName;
+    /** Static styles. These should not and cannot change. */
+    styles?: CSSResult | undefined;
+    /** Initializer for element properties. (These can be thought of as "inputs".) */
+    props?: PropertyInitGeneric | undefined;
+    /** Initializer for events that the element can dispatch. (These can be thought of as "outputs".) */
+    events?: EventsInitGeneric | undefined;
+    /** Called as part of the first renderCallback call, before the first renderCallback call. */
+    initCallback?: InitCallback<PropertyInitGeneric, EventsInitGeneric>;
+    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
+};
+export declare abstract class FunctionalElementBaseClass<PropertyInitGeneric extends PropertyInitMapBase> extends LitElement {
+    static readonly tagName: string;
+    static readonly styles: CSSResult;
+    abstract render(): TemplateResult | Promise<TemplateResult>;
+    abstract readonly instanceProps: PropertyInitGeneric;
+}
+export declare type FunctionalElementInstance<PropertyInitGeneric extends PropertyInitMapBase = {}> = FunctionalElementBaseClass<PropertyInitGeneric> & PropertyInitGeneric;
+export declare type FunctionalElement<PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any> = (new () => FunctionalElementInstance<PropertyInitGeneric>) & ExtraStaticFunctionalElementProperties<PropertyInitGeneric, EventsInitGeneric>;
+export declare type ExtraStaticFunctionalElementProperties<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = Readonly<{
+    /** Pass through the render callback for direct unit testability */
+    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
+    events: EventDescriptorMap<EventsInitGeneric>;
+    props: ElementPropertyDescriptorMap<PropertyInitGeneric>;
+    initInput: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>;
+    /**
+     * Static properties have to be copied here cause they get nuked in the "new () =>
+     * FunctionalElementInstance<PropertyInitGeneric>" type.
+     */
+    tagName: string;
+    styles: CSSResult;
+}>;

package/dist/cjs/functional-element/functional-element.js

@@ -3,7 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FunctionalElementBaseClass = void 0;
 const lit_1 = require("lit");
 class FunctionalElementBaseClass extends lit_1.LitElement {
-    static tagName;
-    static styles;
 }
 exports.FunctionalElementBaseClass = FunctionalElementBaseClass;

package/dist/cjs/functional-element/render-callback.d.ts

@@ -0,0 +1,21 @@
+import { TemplateResult } from 'lit';
+import { TypedEvent } from '../typed-event/typed-event';
+import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+import { FunctionalElementInstance } from './functional-element';
+export declare type RenderCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => TemplateResult;
+export declare type InitCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => void;
+export declare type SetPropCallback<PropertyInitGeneric extends PropertyInitMapBase> = (props: Partial<PropertyInitGeneric>) => void;
+export declare type RenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
+    props: Readonly<PropertyInitGeneric>;
+    setProps: SetPropCallback<PropertyInitGeneric>;
+    events: EventDescriptorMap<EventsInitGeneric>;
+    host: FunctionalElementInstance<PropertyInitGeneric>;
+    dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>>) => boolean;
+    /**
+     * Same as dispatchElementEvent but without the extra types. This allows you to emit any events,
+     * even events from other custom elements.
+     */
+    genericDispatch: (event: Event) => boolean;
+};
+export declare function createRenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap>(element: FunctionalElementInstance<PropertyInitGeneric>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<PropertyInitGeneric, EventsInitGeneric>;

package/dist/cjs/index.d.ts

@@ -0,0 +1,15 @@
+export * from './functional-element/define-functional-element';
+export * from './functional-element/directives/assign-with-clean-up.directive';
+export * from './functional-element/directives/assign.directive';
+export * from './functional-element/directives/directive-util';
+export * from './functional-element/directives/listen.directive';
+export * from './functional-element/directives/on-dom-created.directive';
+export * from './functional-element/directives/on-resize.directive';
+export * from './functional-element/element-events';
+export * from './functional-element/element-properties';
+export * from './functional-element/functional-element';
+export * from './functional-element/render-callback';
+export { requireAllCustomElementsToBeFunctionalElement } from './require-functional-element';
+export * from './template-transforms/vir-css/vir-css';
+export * from './template-transforms/vir-html/vir-html';
+export * from './typed-event/typed-event';

package/dist/cjs/require-functional-element.d.ts

@@ -0,0 +1,2 @@
+export declare let functionalElementRequired: boolean;
+export declare function requireAllCustomElementsToBeFunctionalElement(): void;

package/dist/cjs/template-transforms/has-static-tag-name.d.ts

@@ -0,0 +1,4 @@
+export declare type ConstructorWithTagName = Function & {
+    tagName: string;
+};
+export declare function hasStaticTagName(value: unknown): value is ConstructorWithTagName;

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

@@ -0,0 +1,16 @@
+export declare type TemplateTransform = {
+    templateStrings: TemplateStringsArray;
+    valueIndexDeletions: number[];
+};
+export declare type ValueTransform = (value: unknown) => unknown;
+export declare type CheckAndTransform<T> = {
+    check: (lastNewString: string, currentLitString: string, currentValue: unknown) => currentValue is T;
+    transform: (value: T) => unknown;
+    name: string;
+};
+export declare function makeCheckTransform<T>(name: string, check: (lastNewString: string, currentLitString: string, currentValue: unknown) => currentValue is T, transform: (value: T) => unknown): CheckAndTransform<T>;
+export declare function getTransformedTemplate<PossibleValues>(templateStringsKey: TemplateStringsArray, values: PossibleValues[], fallbackTransform: () => TemplateTransform): {
+    strings: TemplateStringsArray;
+    values: PossibleValues[];
+};
+export declare function transformTemplate<TransformsGeneric extends CheckAndTransform<any>[], PossibleValues>(inputTemplateStrings: TemplateStringsArray, inputValues: PossibleValues[], checksAndTransforms: TransformsGeneric, assertValidString?: (templateStringPart: string) => void): TemplateTransform;

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

@@ -21,7 +21,7 @@ exports.makeCheckTransform = makeCheckTransform;
 const transformedTemplateStrings = new WeakMap();
 function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
     const alreadyTransformedTemplateStrings = transformedTemplateStrings.get(templateStringsKey);
-    const templateTransform = alreadyTransformedTemplateStrings ?? fallbackTransform();
+    const templateTransform = alreadyTransformedTemplateStrings !== null && alreadyTransformedTemplateStrings !== void 0 ? alreadyTransformedTemplateStrings : fallbackTransform();
     if (!alreadyTransformedTemplateStrings) {
         transformedTemplateStrings.set(templateStringsKey, templateTransform);
     }
@@ -34,6 +34,7 @@ function transformTemplate(inputTemplateStrings, inputValues, checksAndTransform
     const newRaws = [];
     const valueDeletions = [];
     inputTemplateStrings.forEach((currentTemplateString, index) => {
+        var _a;
         const lastNewStringsIndex = newStrings.length - 1;
         const lastNewString = newStrings[lastNewStringsIndex];
         const currentValueIndex = index - 1;
@@ -41,9 +42,9 @@ function transformTemplate(inputTemplateStrings, inputValues, checksAndTransform
         let validTransform;
         assertValidString && assertValidString(currentTemplateString);
         if (typeof lastNewString === 'string') {
-            validTransform = checksAndTransforms.find((checkAndTransform) => {
+            validTransform = (_a = checksAndTransforms.find((checkAndTransform) => {
                 return checkAndTransform.check(lastNewString, currentTemplateString, currentValue);
-            })?.transform;
+            })) === null || _a === void 0 ? void 0 : _a.transform;
             if (validTransform) {
                 newStrings[lastNewStringsIndex] =
                     lastNewString + validTransform(currentValue) + currentTemplateString;

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

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from 'lit';
+import { FunctionalElement } from '../../functional-element/functional-element';
+export declare type CssTemplateTransform = {
+    templateStrings: TemplateStringsArray;
+    valueIndexDeletions: number[];
+};
+export declare function transformCssTemplate(inputTemplateStrings: TemplateStringsArray, inputValues: (number | CSSResultGroup | FunctionalElement)[]): CssTemplateTransform;

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

@@ -0,0 +1,3 @@
+import { CSSResult, CSSResultGroup } from 'lit';
+import { FunctionalElement } from '../../functional-element/functional-element';
+export declare function css(inputTemplateStrings: TemplateStringsArray, ...inputValues: (number | CSSResultGroup | FunctionalElement)[]): CSSResult;

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

@@ -0,0 +1,3 @@
+import { HTMLTemplateResult } from 'lit';
+import { TemplateTransform } from '../transform-template';
+export declare function transformHtmlTemplate(litTemplate: HTMLTemplateResult): TemplateTransform;

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

@@ -8,7 +8,7 @@ const transform_template_1 = require("../transform-template");
 const htmlChecksAndTransforms = [
     (0, transform_template_1.makeCheckTransform)('tag name interpolation', (lastNewString, currentLitString, currentValue) => {
         const shouldHaveTagNameHere = (lastNewString.trim().endsWith('<') && !!currentLitString.match(/^[\s\n>]/)) ||
-            (lastNewString?.trim().endsWith('</') && currentLitString.trim().startsWith('>'));
+            ((lastNewString === null || lastNewString === void 0 ? void 0 : lastNewString.trim().endsWith('</')) && currentLitString.trim().startsWith('>'));
         const staticTagName = (0, has_static_tag_name_1.hasStaticTagName)(currentValue);
         if (shouldHaveTagNameHere && !staticTagName) {
             console.error({

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

@@ -0,0 +1,3 @@
+import { HTMLTemplateResult } from 'lit';
+/** Enables interpolation of FunctionalElement tag names */
+export declare function html(inputTemplateStrings: TemplateStringsArray, ...inputValues: unknown[]): HTMLTemplateResult;

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

@@ -0,0 +1,19 @@
+import { NonEmptyString } from '../augments/type';
+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);
+}
+export declare type DefinedTypedEventNameDefinition<EventDetailGeneric> = <EventTypeNameGeneric extends string>(eventType: NonEmptyString<EventTypeNameGeneric>) => DefinedTypedEvent<EventTypeNameGeneric, EventDetailGeneric>;
+export declare type DefinedTypedEvent<EventTypeNameGeneric extends string, EventDetailGeneric> = (new (eventValue: EventDetailGeneric) => TypedEvent<EventTypeNameGeneric, EventDetailGeneric>) & {
+    type: EventTypeNameGeneric;
+};
+/**
+ * Defined a typed event. Make sure to use currying and call this function twice! Typescript's
+ * generic restrictions require this setup to get the types right without excessive verbosity.
+ *
+ * Example: const myCustomEvent = defineTypedEvent<number>()('my-custom-event')
+ */
+export declare function defineTypedEvent<EventDetailGeneric>(): <EventTypeNameGeneric extends string>(eventType: NonEmptyString<EventTypeNameGeneric>) => DefinedTypedEvent<EventTypeNameGeneric, EventDetailGeneric>;

package/dist/cjs/typed-event/typed-event.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defineTypedEvent = exports.TypedEvent = void 0;
 class TypedEvent extends CustomEvent {
-    _type = '';
-    get type() {
-        return this._type;
-    }
     constructor(type, value) {
         super(typeof type === 'string' ? type : type.type, {
             detail: value,
             bubbles: true,
             composed: true,
         });
+        this._type = '';
+    }
+    get type() {
+        return this._type;
     }
 }
 exports.TypedEvent = TypedEvent;
@@ -23,13 +23,15 @@ exports.TypedEvent = TypedEvent;
  */
 function defineTypedEvent() {
     return (eventType) => {
-        return class extends TypedEvent {
-            static type = eventType;
-            _type = eventType;
-            constructor(value) {
-                super(eventType, value);
-            }
-        };
+        var _a;
+        return _a = class extends TypedEvent {
+                constructor(value) {
+                    super(eventType, value);
+                    this._type = eventType;
+                }
+            },
+            _a.type = eventType,
+            _a;
     };
 }
 exports.defineTypedEvent = defineTypedEvent;

package/dist/esm/augments/array.d.ts

@@ -0,0 +1 @@
+export declare function filterOutArrayIndexes<T>(array: Readonly<T[]>, indexes: Readonly<number[]>): T[];

package/dist/esm/augments/type.d.ts

@@ -0,0 +1 @@
+export declare type NonEmptyString<T> = T extends '' ? never : T;

package/dist/esm/functional-element/define-functional-element.d.ts

@@ -0,0 +1,4 @@
+import { EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+import { FunctionalElement, FunctionalElementInit } from './functional-element';
+export declare function defineFunctionalElement<EventsInitGeneric extends EventsInitMap = {}, PropertyInitGeneric extends PropertyInitMapBase = {}>(functionalElementInit: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>): FunctionalElement<PropertyInitGeneric, EventsInitGeneric>;

package/dist/esm/functional-element/define-functional-element.js

@@ -5,37 +5,39 @@ import { createPropertyDescriptorMap, createPropertyProxy, } from './element-pro
 import { FunctionalElementBaseClass, } from './functional-element';
 import { createRenderParams } from './render-callback';
 export function defineFunctionalElement(functionalElementInit) {
+    var _a;
     const eventsMap = createEventDescriptorMap(functionalElementInit.events);
-    const anonymousClass = class extends FunctionalElementBaseClass {
-        static tagName = functionalElementInit.tagName;
-        static styles = functionalElementInit.styles || css ``;
-        createRenderParams() {
-            return createRenderParams(this, eventsMap);
-        }
-        static initInput = functionalElementInit;
-        static events = eventsMap;
-        static renderCallback = functionalElementInit.renderCallback;
-        static props = createPropertyDescriptorMap(functionalElementInit.props);
-        initCalled = false;
-        render() {
-            const renderParams = this.createRenderParams();
-            if (!this.initCalled && functionalElementInit.initCallback) {
-                this.initCalled = true;
-                functionalElementInit.initCallback(renderParams);
+    const anonymousClass = (_a = class extends FunctionalElementBaseClass {
+            constructor() {
+                super();
+                this.initCalled = false;
+                this.instanceProps = createPropertyProxy(functionalElementInit.props, this);
+                const initProps = functionalElementInit.props || {};
+                Object.keys(initProps).forEach((propName) => {
+                    const functionalElementInstance = this;
+                    property()(functionalElementInstance, propName);
+                    functionalElementInstance[propName] = initProps[propName];
+                });
             }
-            return functionalElementInit.renderCallback(renderParams);
-        }
-        instanceProps = createPropertyProxy(functionalElementInit.props, this);
-        constructor() {
-            super();
-            const initProps = functionalElementInit.props || {};
-            Object.keys(initProps).forEach((propName) => {
-                const functionalElementInstance = this;
-                property()(functionalElementInstance, propName);
-                functionalElementInstance[propName] = initProps[propName];
-            });
-        }
-    };
+            createRenderParams() {
+                return createRenderParams(this, eventsMap);
+            }
+            render() {
+                const renderParams = this.createRenderParams();
+                if (!this.initCalled && functionalElementInit.initCallback) {
+                    this.initCalled = true;
+                    functionalElementInit.initCallback(renderParams);
+                }
+                return functionalElementInit.renderCallback(renderParams);
+            }
+        },
+        _a.tagName = functionalElementInit.tagName,
+        _a.styles = functionalElementInit.styles || css ``,
+        _a.initInput = functionalElementInit,
+        _a.events = eventsMap,
+        _a.renderCallback = functionalElementInit.renderCallback,
+        _a.props = createPropertyDescriptorMap(functionalElementInit.props),
+        _a);
     window.customElements.define(functionalElementInit.tagName, anonymousClass);
     return anonymousClass;
 }

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

@@ -0,0 +1,19 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { PartInfo } from 'lit/directive.js';
+import { StaticElementPropertyDescriptor } from '../element-properties';
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+export declare function assignWithCleanup<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue'], cleanupCallback: CleanupCallback<typeof propertyDescriptor['initValue']>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
+export declare type CleanupCallback<T> = (oldValue: T) => void;
+export declare type EqualityCheckCallback<T> = (oldValue: T, newValue: T) => boolean;
+declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    private readonly element;
+    private lastValue;
+    private lastCallback;
+    constructor(partInfo: PartInfo);
+    disconnected(): void;
+    render(propName: string, value: unknown, cleanupCallback: CleanupCallback<any>, equalityCheck?: EqualityCheckCallback<any>): symbol;
+}
+export {};

package/dist/esm/functional-element/directives/assign-with-clean-up.directive.js

@@ -10,9 +10,6 @@ export function assignWithCleanup(propertyDescriptor, value, cleanupCallback) {
     return assignWithCleanupDirective(propertyDescriptor.propName, value, cleanupCallback);
 }
 class AssignWithCleanupDirectiveClass extends AsyncDirective {
-    element;
-    lastValue;
-    lastCallback;
     constructor(partInfo) {
         super(partInfo);
         this.element = extractFunctionalElement(partInfo, 'assign');

package/dist/esm/functional-element/directives/assign.directive.d.ts

@@ -0,0 +1,15 @@
+import { PartInfo } from 'lit/directive.js';
+import { PropertyInitMapBase, StaticElementPropertyDescriptor } from '../element-properties';
+import { FunctionalElementInstance } from '../functional-element';
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+export declare function assign<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue']): import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        readonly element: FunctionalElementInstance<PropertyInitMapBase>;
+        render(propName: string, value: unknown): symbol;
+        readonly _$isConnected: boolean;
+        update(_part: import("lit-html").Part, props: unknown[]): unknown;
+    };
+}>;

package/dist/esm/functional-element/directives/assign.directive.js

@@ -9,7 +9,6 @@ export function assign(propertyDescriptor, value) {
     return assignDirective(propertyDescriptor.propName, value);
 }
 const assignDirective = directive(class extends Directive {
-    element;
     constructor(partInfo) {
         super(partInfo);
         this.element = extractFunctionalElement(partInfo, 'assign');

package/dist/esm/functional-element/directives/directive-util.d.ts

@@ -0,0 +1,15 @@
+import { ElementPartInfo, PartInfo } from 'lit/directive.js';
+import { PropertyInitMapBase } from '../element-properties';
+import { FunctionalElementInstance } from '../functional-element';
+/** For some reason these aren't defined in lit's types already. */
+export declare type ExtraPartInfoProperties = {
+    element: Element;
+    options: {
+        host: Element;
+        renderBefore: Element;
+        isConnected: boolean;
+    };
+};
+export declare function extractFunctionalElement<PropertyInitGeneric extends PropertyInitMapBase>(partInfo: PartInfo, directiveName: string): FunctionalElementInstance<PropertyInitGeneric>;
+export declare function extractElement<ElementType = HTMLElement>(partInfo: PartInfo, directiveName: string, constructorClass: (new () => ElementType) | (abstract new () => ElementType)): ElementType;
+export declare function assertsIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;

package/dist/esm/functional-element/directives/listen.directive.d.ts

@@ -0,0 +1,13 @@
+import { DirectiveResult } from 'lit/directive.js';
+import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
+/**
+ * Listen to events. These can be native DOM events (use a string for the inputType argument) or
+ * typed events (pass in a return value from defineTypedEvent).
+ *
+ * @param definedTypedEvent Needs to come either from a functional element (like
+ *   MyFunctionalElement.events.eventName) or from a typed event created via the defineTypedEvent function.
+ * @param listener The callback to fire when an event is caught. Assuming the definedTypedEvent
+ *   input is properly typed, the event given to this callback will also be typed.
+ */
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => void): DirectiveResult<any>;
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: NativeElementEventNameGeneric, listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => void): DirectiveResult<any>;

package/dist/esm/functional-element/directives/listen.directive.js

@@ -9,8 +9,6 @@ export function listen(eventType, listener) {
  * call is wrapped in the function above.
  */
 const listenDirective = directive(class extends Directive {
-    element;
-    lastListenerMetaData;
     constructor(partInfo) {
         super(partInfo);
         this.element = extractElement(partInfo, 'listen', HTMLElement);
@@ -26,7 +24,7 @@ const listenDirective = directive(class extends Directive {
         return {
             eventType,
             callback,
-            listener: (event) => this.lastListenerMetaData?.callback(event),
+            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
         };
     }
     render(eventTypeInput, callback) {

package/dist/esm/functional-element/directives/on-dom-created.directive.d.ts

@@ -0,0 +1,11 @@
+import { PartInfo } from 'lit/directive.js';
+export declare type OnDomCreatedCallback = (element: Element) => void;
+/** Only fires once, when the element has been created. */
+export declare const onDomCreated: (callback: OnDomCreatedCallback) => import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        element: Element | undefined;
+        update(partInfo: PartInfo, [callback]: [OnDomCreatedCallback]): undefined;
+        render(callback: OnDomCreatedCallback): undefined;
+        readonly _$isConnected: boolean;
+    };
+}>;

package/dist/esm/functional-element/directives/on-dom-created.directive.js

@@ -3,7 +3,6 @@ import { assertsIsElementPartInfo } from './directive-util';
 const directiveName = 'onDomCreated';
 /** Only fires once, when the element has been created. */
 export const onDomCreated = directive(class extends Directive {
-    element;
     constructor(partInfo) {
         super(partInfo);
         assertsIsElementPartInfo(partInfo, directiveName);

package/dist/esm/functional-element/directives/on-resize.directive.d.ts

@@ -0,0 +1,15 @@
+import { PartInfo } from 'lit/directive.js';
+export declare type OnResizeCallback = (
+/** Only these two properties are supported in all major modern browsers */
+entry: Readonly<Pick<ResizeObserverEntry, 'target' | 'contentRect'>>) => void;
+export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        element: Element | undefined;
+        readonly resizeObserver: ResizeObserver;
+        callback: OnResizeCallback | undefined;
+        fireCallback(entries: ResizeObserverEntry[]): void;
+        update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
+        render(callback: OnResizeCallback): undefined;
+        readonly _$isConnected: boolean;
+    };
+}>;

package/dist/esm/functional-element/directives/on-resize.directive.js

@@ -2,20 +2,19 @@ import { directive, Directive } from 'lit/directive.js';
 import { assertsIsElementPartInfo } from './directive-util';
 const directiveName = 'onResize';
 export const onResize = directive(class extends Directive {
-    element;
-    resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
-    callback;
     constructor(partInfo) {
         super(partInfo);
+        this.resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
         assertsIsElementPartInfo(partInfo, directiveName);
     }
     fireCallback(entries) {
+        var _a;
         const resizeEntry = entries[0];
         if (!resizeEntry) {
             console.error(entries);
             throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
         }
-        this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect });
+        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
     }
     update(partInfo, [callback]) {
         assertsIsElementPartInfo(partInfo, directiveName);

package/dist/esm/functional-element/element-events.d.ts

@@ -0,0 +1,10 @@
+import { DefinedTypedEvent, DefinedTypedEventNameDefinition, TypedEvent } from '../typed-event/typed-event';
+export declare type EventsInitMap = Record<string, DefinedTypedEventNameDefinition<any>>;
+export declare function defineElementEvent<EventDetailGeneric>(): DefinedTypedEventNameDefinition<EventDetailGeneric>;
+export declare type EventInitMapEventDetailExtractor<EventTypeNameGeneric extends keyof EventsInitGeneric, EventsInitGeneric extends EventsInitMap> = EventsInitGeneric[EventTypeNameGeneric] extends DefinedTypedEventNameDefinition<infer R> ? R : never;
+export declare type EventDescriptorMap<EventsInitGeneric extends EventsInitMap> = {
+    [CurrentEventTypeName in keyof EventsInitGeneric]: DefinedTypedEvent<CurrentEventTypeName extends string ? CurrentEventTypeName : never, EventInitMapEventDetailExtractor<CurrentEventTypeName, EventsInitGeneric>>;
+};
+export declare type EventObjectEventDetailExtractor<EventObjectGeneric extends DefinedTypedEvent<any, any>> = EventObjectGeneric extends DefinedTypedEvent<string, infer R> ? R : never;
+export declare type ElementEventDetailExtractor<ElementEventGeneric extends TypedEvent<any, any>> = ElementEventGeneric extends TypedEvent<string, infer R> ? R : never;
+export declare function createEventDescriptorMap<EventsInitGeneric extends EventsInitMap>(eventsInit: EventsInitGeneric | undefined): EventDescriptorMap<EventsInitGeneric>;

package/dist/esm/functional-element/element-properties.d.ts

@@ -0,0 +1,16 @@
+import { FunctionalElementInstance } from './functional-element';
+export declare type PropertyInitMapBase = Record<string, unknown>;
+export declare type ElementProperty<KeyGeneric extends string | number | symbol, ValueGeneric> = {
+    name: KeyGeneric;
+    setProp(value: ValueGeneric): void;
+    getProp(): ValueGeneric;
+};
+export declare type StaticElementPropertyDescriptor<PropName extends string, PropValue> = {
+    propName: PropName;
+    initValue: PropValue;
+};
+export declare type ElementPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase> = {
+    [Property in keyof PropertyInitGeneric]: StaticElementPropertyDescriptor<string, PropertyInitGeneric[Property]>;
+};
+export declare function createPropertyProxy<PropertyInitGeneric extends PropertyInitMapBase>(propsInitMap: PropertyInitGeneric | undefined, element: FunctionalElementInstance<PropertyInitGeneric>): PropertyInitGeneric;
+export declare function createPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase>(propertyInit: PropertyInitGeneric | undefined): ElementPropertyDescriptorMap<PropertyInitGeneric>;

package/dist/esm/functional-element/functional-element.d.ts

@@ -0,0 +1,42 @@
+import { CSSResult, LitElement, TemplateResult } from 'lit';
+import { EventDescriptorMap, EventsInitMap } from './element-events';
+import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
+import { InitCallback, RenderCallback } from './render-callback';
+export declare type CustomElementTagName = `${string}-${string}`;
+export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
+    /**
+     * HTML tag name. This should not be used directly, as interpolating it with the html tagged
+     * template from this package is preferred.
+     */
+    tagName: CustomElementTagName;
+    /** Static styles. These should not and cannot change. */
+    styles?: CSSResult | undefined;
+    /** Initializer for element properties. (These can be thought of as "inputs".) */
+    props?: PropertyInitGeneric | undefined;
+    /** Initializer for events that the element can dispatch. (These can be thought of as "outputs".) */
+    events?: EventsInitGeneric | undefined;
+    /** Called as part of the first renderCallback call, before the first renderCallback call. */
+    initCallback?: InitCallback<PropertyInitGeneric, EventsInitGeneric>;
+    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
+};
+export declare abstract class FunctionalElementBaseClass<PropertyInitGeneric extends PropertyInitMapBase> extends LitElement {
+    static readonly tagName: string;
+    static readonly styles: CSSResult;
+    abstract render(): TemplateResult | Promise<TemplateResult>;
+    abstract readonly instanceProps: PropertyInitGeneric;
+}
+export declare type FunctionalElementInstance<PropertyInitGeneric extends PropertyInitMapBase = {}> = FunctionalElementBaseClass<PropertyInitGeneric> & PropertyInitGeneric;
+export declare type FunctionalElement<PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any> = (new () => FunctionalElementInstance<PropertyInitGeneric>) & ExtraStaticFunctionalElementProperties<PropertyInitGeneric, EventsInitGeneric>;
+export declare type ExtraStaticFunctionalElementProperties<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = Readonly<{
+    /** Pass through the render callback for direct unit testability */
+    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
+    events: EventDescriptorMap<EventsInitGeneric>;
+    props: ElementPropertyDescriptorMap<PropertyInitGeneric>;
+    initInput: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>;
+    /**
+     * Static properties have to be copied here cause they get nuked in the "new () =>
+     * FunctionalElementInstance<PropertyInitGeneric>" type.
+     */
+    tagName: string;
+    styles: CSSResult;
+}>;

package/dist/esm/functional-element/functional-element.js

@@ -1,5 +1,3 @@
 import { LitElement } from 'lit';
 export class FunctionalElementBaseClass extends LitElement {
-    static tagName;
-    static styles;
 }

package/dist/esm/functional-element/render-callback.d.ts

@@ -0,0 +1,21 @@
+import { TemplateResult } from 'lit';
+import { TypedEvent } from '../typed-event/typed-event';
+import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+import { FunctionalElementInstance } from './functional-element';
+export declare type RenderCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => TemplateResult;
+export declare type InitCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => void;
+export declare type SetPropCallback<PropertyInitGeneric extends PropertyInitMapBase> = (props: Partial<PropertyInitGeneric>) => void;
+export declare type RenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
+    props: Readonly<PropertyInitGeneric>;
+    setProps: SetPropCallback<PropertyInitGeneric>;
+    events: EventDescriptorMap<EventsInitGeneric>;
+    host: FunctionalElementInstance<PropertyInitGeneric>;
+    dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>>) => boolean;
+    /**
+     * Same as dispatchElementEvent but without the extra types. This allows you to emit any events,
+     * even events from other custom elements.
+     */
+    genericDispatch: (event: Event) => boolean;
+};
+export declare function createRenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap>(element: FunctionalElementInstance<PropertyInitGeneric>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<PropertyInitGeneric, EventsInitGeneric>;

package/dist/esm/index.d.ts

@@ -0,0 +1,15 @@
+export * from './functional-element/define-functional-element';
+export * from './functional-element/directives/assign-with-clean-up.directive';
+export * from './functional-element/directives/assign.directive';
+export * from './functional-element/directives/directive-util';
+export * from './functional-element/directives/listen.directive';
+export * from './functional-element/directives/on-dom-created.directive';
+export * from './functional-element/directives/on-resize.directive';
+export * from './functional-element/element-events';
+export * from './functional-element/element-properties';
+export * from './functional-element/functional-element';
+export * from './functional-element/render-callback';
+export { requireAllCustomElementsToBeFunctionalElement } from './require-functional-element';
+export * from './template-transforms/vir-css/vir-css';
+export * from './template-transforms/vir-html/vir-html';
+export * from './typed-event/typed-event';

package/dist/esm/require-functional-element.d.ts

@@ -0,0 +1,2 @@
+export declare let functionalElementRequired: boolean;
+export declare function requireAllCustomElementsToBeFunctionalElement(): void;

package/dist/esm/template-transforms/has-static-tag-name.d.ts

@@ -0,0 +1,4 @@
+export declare type ConstructorWithTagName = Function & {
+    tagName: string;
+};
+export declare function hasStaticTagName(value: unknown): value is ConstructorWithTagName;

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

@@ -0,0 +1,16 @@
+export declare type TemplateTransform = {
+    templateStrings: TemplateStringsArray;
+    valueIndexDeletions: number[];
+};
+export declare type ValueTransform = (value: unknown) => unknown;
+export declare type CheckAndTransform<T> = {
+    check: (lastNewString: string, currentLitString: string, currentValue: unknown) => currentValue is T;
+    transform: (value: T) => unknown;
+    name: string;
+};
+export declare function makeCheckTransform<T>(name: string, check: (lastNewString: string, currentLitString: string, currentValue: unknown) => currentValue is T, transform: (value: T) => unknown): CheckAndTransform<T>;
+export declare function getTransformedTemplate<PossibleValues>(templateStringsKey: TemplateStringsArray, values: PossibleValues[], fallbackTransform: () => TemplateTransform): {
+    strings: TemplateStringsArray;
+    values: PossibleValues[];
+};
+export declare function transformTemplate<TransformsGeneric extends CheckAndTransform<any>[], PossibleValues>(inputTemplateStrings: TemplateStringsArray, inputValues: PossibleValues[], checksAndTransforms: TransformsGeneric, assertValidString?: (templateStringPart: string) => void): TemplateTransform;

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

@@ -17,7 +17,7 @@ export function makeCheckTransform(name, check, transform) {
 const transformedTemplateStrings = new WeakMap();
 export function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
     const alreadyTransformedTemplateStrings = transformedTemplateStrings.get(templateStringsKey);
-    const templateTransform = alreadyTransformedTemplateStrings ?? fallbackTransform();
+    const templateTransform = alreadyTransformedTemplateStrings !== null && alreadyTransformedTemplateStrings !== void 0 ? alreadyTransformedTemplateStrings : fallbackTransform();
     if (!alreadyTransformedTemplateStrings) {
         transformedTemplateStrings.set(templateStringsKey, templateTransform);
     }
@@ -29,6 +29,7 @@ export function transformTemplate(inputTemplateStrings, inputValues, checksAndTr
     const newRaws = [];
     const valueDeletions = [];
     inputTemplateStrings.forEach((currentTemplateString, index) => {
+        var _a;
         const lastNewStringsIndex = newStrings.length - 1;
         const lastNewString = newStrings[lastNewStringsIndex];
         const currentValueIndex = index - 1;
@@ -36,9 +37,9 @@ export function transformTemplate(inputTemplateStrings, inputValues, checksAndTr
         let validTransform;
         assertValidString && assertValidString(currentTemplateString);
         if (typeof lastNewString === 'string') {
-            validTransform = checksAndTransforms.find((checkAndTransform) => {
+            validTransform = (_a = checksAndTransforms.find((checkAndTransform) => {
                 return checkAndTransform.check(lastNewString, currentTemplateString, currentValue);
-            })?.transform;
+            })) === null || _a === void 0 ? void 0 : _a.transform;
             if (validTransform) {
                 newStrings[lastNewStringsIndex] =
                     lastNewString + validTransform(currentValue) + currentTemplateString;

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

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from 'lit';
+import { FunctionalElement } from '../../functional-element/functional-element';
+export declare type CssTemplateTransform = {
+    templateStrings: TemplateStringsArray;
+    valueIndexDeletions: number[];
+};
+export declare function transformCssTemplate(inputTemplateStrings: TemplateStringsArray, inputValues: (number | CSSResultGroup | FunctionalElement)[]): CssTemplateTransform;

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

@@ -0,0 +1,3 @@
+import { CSSResult, CSSResultGroup } from 'lit';
+import { FunctionalElement } from '../../functional-element/functional-element';
+export declare function css(inputTemplateStrings: TemplateStringsArray, ...inputValues: (number | CSSResultGroup | FunctionalElement)[]): CSSResult;

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

@@ -0,0 +1,3 @@
+import { HTMLTemplateResult } from 'lit';
+import { TemplateTransform } from '../transform-template';
+export declare function transformHtmlTemplate(litTemplate: HTMLTemplateResult): TemplateTransform;

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

@@ -5,7 +5,7 @@ import { makeCheckTransform, transformTemplate, } from '../transform-template';
 const htmlChecksAndTransforms = [
     makeCheckTransform('tag name interpolation', (lastNewString, currentLitString, currentValue) => {
         const shouldHaveTagNameHere = (lastNewString.trim().endsWith('<') && !!currentLitString.match(/^[\s\n>]/)) ||
-            (lastNewString?.trim().endsWith('</') && currentLitString.trim().startsWith('>'));
+            ((lastNewString === null || lastNewString === void 0 ? void 0 : lastNewString.trim().endsWith('</')) && currentLitString.trim().startsWith('>'));
         const staticTagName = hasStaticTagName(currentValue);
         if (shouldHaveTagNameHere && !staticTagName) {
             console.error({

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

@@ -0,0 +1,3 @@
+import { HTMLTemplateResult } from 'lit';
+/** Enables interpolation of FunctionalElement tag names */
+export declare function html(inputTemplateStrings: TemplateStringsArray, ...inputValues: unknown[]): HTMLTemplateResult;

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

@@ -0,0 +1,19 @@
+import { NonEmptyString } from '../augments/type';
+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);
+}
+export declare type DefinedTypedEventNameDefinition<EventDetailGeneric> = <EventTypeNameGeneric extends string>(eventType: NonEmptyString<EventTypeNameGeneric>) => DefinedTypedEvent<EventTypeNameGeneric, EventDetailGeneric>;
+export declare type DefinedTypedEvent<EventTypeNameGeneric extends string, EventDetailGeneric> = (new (eventValue: EventDetailGeneric) => TypedEvent<EventTypeNameGeneric, EventDetailGeneric>) & {
+    type: EventTypeNameGeneric;
+};
+/**
+ * Defined a typed event. Make sure to use currying and call this function twice! Typescript's
+ * generic restrictions require this setup to get the types right without excessive verbosity.
+ *
+ * Example: const myCustomEvent = defineTypedEvent<number>()('my-custom-event')
+ */
+export declare function defineTypedEvent<EventDetailGeneric>(): <EventTypeNameGeneric extends string>(eventType: NonEmptyString<EventTypeNameGeneric>) => DefinedTypedEvent<EventTypeNameGeneric, EventDetailGeneric>;

package/dist/esm/typed-event/typed-event.js

@@ -1,14 +1,14 @@
 export class TypedEvent extends CustomEvent {
-    _type = '';
-    get type() {
-        return this._type;
-    }
     constructor(type, value) {
         super(typeof type === 'string' ? type : type.type, {
             detail: value,
             bubbles: true,
             composed: true,
         });
+        this._type = '';
+    }
+    get type() {
+        return this._type;
     }
 }
 /**
@@ -19,12 +19,14 @@ export class TypedEvent extends CustomEvent {
  */
 export function defineTypedEvent() {
     return (eventType) => {
-        return class extends TypedEvent {
-            static type = eventType;
-            _type = eventType;
-            constructor(value) {
-                super(eventType, value);
-            }
-        };
+        var _a;
+        return _a = class extends TypedEvent {
+                constructor(value) {
+                    super(eventType, value);
+                    this._type = eventType;
+                }
+            },
+            _a.type = eventType,
+            _a;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "5.1.0",
+    "version": "5.4.0",
     "keywords": [
         "custom",
         "web",
@@ -31,7 +31,7 @@
     "module": "dist/esm/index.js",
     "types": "dist/types/index.d.ts",
     "scripts": {
-        "compile": "rm -rf dist && tsc --project tsconfig.json && tsc --project tsconfig.cjs.json",
+        "compile": "rm -rf dist && tsc --project tsconfig.json && tsc --project tsconfig.cjs.json && tsc --project tsconfig.esm.json",
         "format": "virmator format write",
         "jest": "jest --config ./src/jest/jest.config.ts",
         "prepublishOnly": "npm run compile && npm run test:full",
@@ -43,11 +43,11 @@
         "update-docs": "virmator code-in-markdown README.md --index src/index.ts"
     },
     "dependencies": {
-        "augment-vir": "2.1.0",
+        "augment-vir": "2.1.1",
         "lit": "2.2.3"
     },
     "devDependencies": {
-        "jest-environment-jsdom": "28.0.2",
+        "jest-environment-jsdom": "28.1.0",
         "virmator": "2.0.7",
         "vite": "2.9.8"
     }