element-vir 4.0.0 → 4.1.0

package/dist/augments/type.d.ts

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

package/dist/augments/type.js

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

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

@@ -5,32 +5,36 @@ 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 = (_a = class extends FunctionalElementBaseClass {
-            constructor() {
-                super();
-                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];
-                });
+    const anonymousClass = class extends FunctionalElementBaseClass {
+        static tagName = functionalElementInit.tagName;
+        static styles = functionalElementInit.styles || css ``;
+        createRenderParams() {
+            return createRenderParams(this, eventsMap);
+        }
+        static events = eventsMap;
+        static renderCallback = functionalElementInit.renderCallback;
+        static props = createPropertyDescriptorMap(functionalElementInit.props);
+        initCalled = false;
+        render() {
+            const renderParams = this.createRenderParams();
+            if (!this.initCalled && functionalElementInit.initCallback) {
+                functionalElementInit.initCallback(renderParams);
+                this.initCalled = true;
             }
-            createRenderParams() {
-                return createRenderParams(this, eventsMap);
-            }
-            render() {
-                return functionalElementInit.renderCallback(this.createRenderParams());
-            }
-        },
-        _a.tagName = functionalElementInit.tagName,
-        _a.styles = functionalElementInit.styles || css ``,
-        _a.events = eventsMap,
-        _a.renderCallback = functionalElementInit.renderCallback,
-        _a.props = createPropertyDescriptorMap(functionalElementInit.props),
-        _a);
+            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];
+            });
+        }
+    };
     window.customElements.define(functionalElementInit.tagName, anonymousClass);
     return anonymousClass;
 }

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

@@ -10,6 +10,9 @@ 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/functional-element/directives/assign.directive.js

@@ -9,6 +9,7 @@ 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/functional-element/directives/listen.directive.d.ts

@@ -1,28 +1,13 @@
-import { PartInfo } from 'lit/directive.js';
-import { ElementEvent, EventDescriptor } from '../element-events';
+import { DirectiveResult } from 'lit/directive.js';
+import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
 /**
- * Listen to element events.
+ * 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 eventDescriptor Needs to come either from a functional element (like
- *   MyFunctionalElement.events.eventName) or from a custom element event created via the
- *   createCustomEvent function.
- * @param listener The callback to fire when an event is caught. Assuming the eventDescriptor input
- *   is properly typed, the event given to this callback will also be typed.
+ * @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<EventName extends string, DetailType>(eventDescriptor: EventDescriptor<EventName, DetailType>, listener: (event: ElementEvent<EventName, DetailType>) => void): import("lit-html/directive").DirectiveResult<{
-    new (partInfo: PartInfo): {
-        readonly element: HTMLElement;
-        lastListenerMetaData: ListenerMetaData<unknown> | undefined;
-        resetListener(listenerMetaData: ListenerMetaData<any>): void;
-        createListenerMetaData(eventType: string, callback: (event: ElementEvent<string, unknown>) => void): ListenerMetaData<unknown>;
-        render(eventObject: EventDescriptor<string, any>, callback: (event: ElementEvent<any, any>) => void): symbol;
-        readonly _$isConnected: boolean;
-        update(_part: import("lit-html").Part, props: unknown[]): unknown;
-    };
-}>;
-declare type ListenerMetaData<EventDetail> = {
-    eventType: string;
-    callback: (event: ElementEvent<string, EventDetail>) => void;
-    listener: (event: any) => void;
-};
-export {};
+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/functional-element/directives/listen.directive.js

@@ -1,23 +1,16 @@
 import { noChange } from 'lit';
 import { directive, Directive } from 'lit/directive.js';
 import { extractElement } from './directive-util';
-/**
- * Listen to element events.
- *
- * @param eventDescriptor Needs to come either from a functional element (like
- *   MyFunctionalElement.events.eventName) or from a custom element event created via the
- *   createCustomEvent function.
- * @param listener The callback to fire when an event is caught. Assuming the eventDescriptor input
- *   is properly typed, the event given to this callback will also be typed.
- */
-export function listen(eventDescriptor, listener) {
-    return listenDirective(eventDescriptor, listener);
+export function listen(eventType, listener) {
+    return listenDirective(eventType, listener);
 }
 /**
  * The directive generics here are not strong enough to maintain their values. Thus, the directive
  * 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);
@@ -33,11 +26,11 @@ const listenDirective = directive(class extends Directive {
         return {
             eventType,
             callback,
-            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
+            listener: (event) => this.lastListenerMetaData?.callback(event),
         };
     }
-    render(eventObject, callback) {
-        const eventType = eventObject.eventName;
+    render(eventTypeInput, callback) {
+        const eventType = typeof eventTypeInput === 'string' ? eventTypeInput : eventTypeInput.type;
         if (typeof eventType !== 'string') {
             throw new Error(`Cannot listen to an event with a name that is not a string. Given event name: "${eventType}"`);
         }

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

@@ -3,6 +3,7 @@ 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/functional-element/directives/on-resize.directive.js

@@ -2,19 +2,20 @@ 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.`);
         }
-        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
+        this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect });
     }
     update(partInfo, [callback]) {
         assertsIsElementPartInfo(partInfo, directiveName);

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

@@ -1,29 +1,10 @@
-export declare type EventsInitMap = Record<string, new () => ElementEvent<string, unknown>>;
-export declare type EventCreator<T> = (new () => ElementEvent<string, T>) & {
-    eventName: string;
-};
-export declare function eventInit<T>(): new () => ElementEvent<string, T>;
-export declare type EventInitInfo<EventNameGeneric extends string> = {
-    eventName: EventNameGeneric;
-};
-export declare class ElementEvent<EventName extends string, EventValue> extends CustomEvent<EventValue> {
-    readonly eventInitInfo: EventInitInfo<EventName>;
-    readonly eventName: string;
-    constructor(eventInitInfo: EventInitInfo<EventName>, initDetail: EventValue);
-}
-export declare function defineCustomEvent<EventName extends string, EventValue>(eventName: EventName): (new (eventValue: EventValue) => ElementEvent<EventName, EventValue>) & EventDescriptor<EventName, EventValue>;
-export declare type EventExtraProperties<DetailType> = {
-    /**
-     * The event constructor property is needed in order to store sufficient type data for event
-     * listeners to work.
-     */
-    eventConstructor: new (outputObject: EventDescriptor<string, DetailType>, initDetail: DetailType) => ElementEvent<string, DetailType>;
-};
-export declare type EventObjectEventDetailExtractor<EventObjectGeneric extends EventDescriptor<any, any>> = EventObjectGeneric extends EventDescriptor<string, infer R> ? R : never;
-export declare type ElementEventDetailExtractor<ElementEventGeneric extends ElementEvent<any, any>> = ElementEventGeneric extends ElementEvent<string, infer R> ? R : never;
-export declare type EventInitMapEventDetailExtractor<Property extends keyof EventsInitGeneric, EventsInitGeneric extends EventsInitMap> = InstanceType<EventsInitGeneric[Property]> extends ElementEvent<string, infer R> ? R : never;
-export declare type EventDescriptor<EventNameGeneric extends string, DetailType> = EventInitInfo<EventNameGeneric> & EventExtraProperties<DetailType>;
+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> = {
-    [Property in keyof EventsInitGeneric]: EventDescriptor<Property extends string ? Property : never, EventInitMapEventDetailExtractor<Property, EventsInitGeneric>>;
+    [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/functional-element/element-events.js

@@ -1,45 +1,24 @@
-export function eventInit() {
-    const customEventElement = class extends ElementEvent {
-    };
-    return customEventElement;
-}
-export class ElementEvent extends CustomEvent {
-    constructor(eventInitInfo, initDetail) {
-        super(String(eventInitInfo.eventName), { detail: initDetail, bubbles: true, composed: true });
-        this.eventInitInfo = eventInitInfo;
-        this.eventName = String(this.eventInitInfo.eventName);
-    }
-}
-export function defineCustomEvent(eventName) {
-    var _a;
-    return _a = class extends ElementEvent {
-            constructor(eventValue) {
-                super({ eventName: eventName }, eventValue);
-                window.ElementEvent = ElementEvent;
-            }
-        },
-        _a.eventName = eventName,
-        // this allows sub classes of ElementEvent to be directly listened to
-        _a.eventConstructor = ElementEvent.constructor,
-        _a;
+import { defineTypedEvent, } from '../typed-event/typed-event';
+export function defineElementEvent() {
+    return defineTypedEvent();
 }
 export function createEventDescriptorMap(eventsInit) {
     if (!eventsInit) {
         return {};
     }
     return Object.keys(eventsInit)
-        .filter((currentKey) => {
-        if (typeof currentKey !== 'string') {
-            throw new Error(`Expected event key of type string but got type "${typeof currentKey}" for key ${currentKey}`);
+        .filter((currentElementEventKey) => {
+        if (typeof currentElementEventKey !== 'string') {
+            throw new Error(`Expected event key of type string but got type "${typeof currentElementEventKey}" for key ${currentElementEventKey}`);
+        }
+        if (currentElementEventKey === '') {
+            throw new Error(`Got empty string for events key.`);
         }
         return true;
     })
-        .reduce((accum, currentKey) => {
-        const eventObject = {
-            eventName: currentKey,
-            eventConstructor: eventsInit[currentKey],
-        };
-        accum[currentKey] = eventObject;
+        .reduce((accum, currentElementEventKey) => {
+        const eventObject = defineTypedEvent()(currentElementEventKey);
+        accum[currentElementEventKey] = eventObject;
         return accum;
     }, {});
 }

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

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult } from 'lit';
 import { EventDescriptorMap, EventsInitMap } from './element-events';
 import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
-import { RenderCallback } from './render-callback';
+import { InitCallback, RenderCallback } from './render-callback';
 export declare type CustomElementTagName = `${string}-${string}`;
 export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
     /**
@@ -15,6 +15,8 @@ export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyIn
     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 {

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

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

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

@@ -1,17 +1,19 @@
 import { TemplateResult } from 'lit';
-import { ElementEvent, EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './element-events';
+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 | Promise<TemplateResult>;
+export declare type InitCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => void;
 export declare type RenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
     props: PropertyInitGeneric;
     events: EventDescriptorMap<EventsInitGeneric>;
     host: FunctionalElementInstance<PropertyInitGeneric>;
-    dispatchElementEvent: <EventName extends keyof EventsInitGeneric>(event: ElementEvent<EventName extends string ? EventName : never, EventInitMapEventDetailExtractor<EventName, EventsInitGeneric>>) => boolean;
+    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.
      */
-    dispatchEvent: (event: Event) => boolean;
+    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/functional-element/render-callback.js

@@ -4,8 +4,8 @@ export function createRenderParams(element, eventsMap) {
          * These two dispatch properties do the same thing but their interfaces are different.
          * DispatchEvent's type interface is much stricter.
          */
-        dispatchElementEvent: (event) => element.dispatchEvent(event),
-        dispatchEvent: (event) => element.dispatchEvent(event),
+        dispatch: (event) => element.dispatchEvent(event),
+        genericDispatch: (event) => element.dispatchEvent(event),
         host: element,
         props: element.instanceProps,
         events: eventsMap,

package/dist/index.d.ts

@@ -2,7 +2,6 @@ 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/listen.directive';
-export * from './functional-element/directives/named-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';
@@ -12,3 +11,4 @@ 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/index.js

@@ -2,7 +2,6 @@ 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/listen.directive';
-export * from './functional-element/directives/named-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';
@@ -12,3 +11,4 @@ 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/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 !== null && alreadyTransformedTemplateStrings !== void 0 ? alreadyTransformedTemplateStrings : fallbackTransform();
+    const templateTransform = alreadyTransformedTemplateStrings ?? fallbackTransform();
     if (!alreadyTransformedTemplateStrings) {
         transformedTemplateStrings.set(templateStringsKey, templateTransform);
     }
@@ -29,7 +29,6 @@ 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;
@@ -37,9 +36,9 @@ export function transformTemplate(inputTemplateStrings, inputValues, checksAndTr
         let validTransform;
         assertValidString && assertValidString(currentTemplateString);
         if (typeof lastNewString === 'string') {
-            validTransform = (_a = checksAndTransforms.find((checkAndTransform) => {
+            validTransform = checksAndTransforms.find((checkAndTransform) => {
                 return checkAndTransform.check(lastNewString, currentTemplateString, currentValue);
-            })) === null || _a === void 0 ? void 0 : _a.transform;
+            })?.transform;
             if (validTransform) {
                 newStrings[lastNewStringsIndex] =
                     lastNewString + validTransform(currentValue) + currentTemplateString;

package/dist/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 === null || lastNewString === void 0 ? void 0 : lastNewString.trim().endsWith('</')) && currentLitString.trim().startsWith('>'));
+            (lastNewString?.trim().endsWith('</') && currentLitString.trim().startsWith('>'));
         const staticTagName = hasStaticTagName(currentValue);
         if (shouldHaveTagNameHere && !staticTagName) {
             console.error({

package/dist/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/typed-event/typed-event.js

@@ -0,0 +1,30 @@
+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,
+        });
+    }
+}
+/**
+ * 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 function defineTypedEvent() {
+    return (eventType) => {
+        return class extends TypedEvent {
+            static type = eventType;
+            _type = eventType;
+            constructor(value) {
+                super(eventType, value);
+            }
+        };
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "4.0.0",
+    "version": "4.1.0",
     "keywords": [
         "custom",
         "web",
@@ -25,28 +25,28 @@
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
-        "compile": "tsc",
+        "compile": "rm -rf dist && tsc",
         "format": "virmator format write",
-        "jest": "jest --config ./jest/jest.config.ts",
-        "prepublishOnly": "npm run test:full",
+        "jest": "jest --config ./src/jest/jest.config.ts",
+        "prepublishOnly": "npm run compile && npm run test:full",
         "spellcheck": "virmator spellcheck",
-        "start": "npm install && vite --force --config ./vite/vite.config.ts",
+        "start": "npm install && vite --force --config ./src/vite/vite.config.ts",
         "test": "npm run type-check && npm run jest",
         "test:full": "npm test && npm run spellcheck && virmator format check && npm run update-docs -- --check",
         "type-check": "tsc --noEmit",
         "update-docs": "virmator code-in-markdown README.md --index src/index.ts"
     },
     "dependencies": {
-        "augment-vir": "^1.4.3",
-        "lit": "^2.1.1"
+        "augment-vir": "^1.5.1",
+        "lit": "^2.2.0"
     },
     "devDependencies": {
         "@types/jest": "^27.4.0",
-        "jest": "^27.4.7",
+        "jest": "^27.5.1",
         "ts-jest": "^27.1.3",
-        "ts-node": "^10.4.0",
-        "typescript": "^4.5.4",
-        "virmator": "^1.3.7",
-        "vite": "^2.7.12"
+        "ts-node": "^10.5.0",
+        "typescript": "^4.5.5",
+        "virmator": "^1.4.4",
+        "vite": "^2.8.4"
     }
 }

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

@@ -1,15 +0,0 @@
-import { DirectiveResult } from 'lit/directive.js';
-/**
- * Listen to events. First parameter is just a string for an event name/type, vs. the more
- * complicated first parameter type for the "listen" directive. If the given eventName is a native
- * DOM event, the event type given to the callback will be the event type associated with that
- * native event type. Otherwise, specific event types given to the callback are unknown.
- *
- * If you are listening to your custom events, it is better to use the "listen" directive directly
- * so your callbacks are more tightly typed.
- *
- * @param eventName Name of the event to listen to.
- * @param listener The callback to fire when an event is caught.
- */
-export declare function namedListen<EventName extends keyof HTMLElementEventMap>(eventName: EventName, listener: (event: HTMLElementEventMap[EventName]) => void): DirectiveResult;
-export declare function namedListen<EventName extends string>(eventName: EventName, listener: (event: Event) => void): DirectiveResult;

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

@@ -1,42 +0,0 @@
-import { noChange } from 'lit';
-import { directive, Directive } from 'lit/directive.js';
-import { extractElement } from './directive-util';
-export function namedListen(eventName, listener) {
-    return listenDirective(eventName, listener);
-}
-const listenDirective = directive(class extends Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        this.element = extractElement(partInfo, 'listen', HTMLElement);
-    }
-    resetListener(listenerMetaData) {
-        if (this.lastListenerMetaData) {
-            this.element.removeEventListener(this.lastListenerMetaData.eventType, this.lastListenerMetaData.listener);
-        }
-        this.element.addEventListener(listenerMetaData.eventType, listenerMetaData.listener);
-        this.lastListenerMetaData = listenerMetaData;
-    }
-    createListenerMetaData(eventType, callback) {
-        return {
-            eventType,
-            callback,
-            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
-        };
-    }
-    render(eventName, callback) {
-        if (typeof eventName !== 'string') {
-            throw new Error(`Cannot listen to an event with a name that is not a string. Given event name: "${eventName}"`);
-        }
-        if (this.lastListenerMetaData && this.lastListenerMetaData.eventType === eventName) {
-            /**
-             * Store the callback here so we don't have to update the attached listener every
-             * time the callback is updated.
-             */
-            this.lastListenerMetaData.callback = callback;
-        }
-        else {
-            this.resetListener(this.createListenerMetaData(eventName, callback));
-        }
-        return noChange;
-    }
-});

package/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Element Vir Test</title>
-        <script type="module" src="/src/test/elements/app.element.ts"></script>
-        <link rel="stylesheet" type="text/css" href="/index.css" />
-        <script>
-            console.log('yo');
-        </script>
-    </head>
-    <body>
-        <element-vir-test-app></element-vir-test-app>
-    </body>
-</html>

package/jest/jest.config.ts

@@ -1,32 +0,0 @@
-import {dirname, join} from 'path';
-import {pathsToModuleNameMapper} from 'ts-jest';
-import {InitialOptionsTsJest} from 'ts-jest/dist/types';
-import {findTsConfigFile, getTsconfigPathAliases} from './read-tsconfig';
-
-const repoRootDir = dirname(__dirname);
-
-const config: InitialOptionsTsJest = {
-    preset: 'ts-jest',
-    testEnvironment: 'jsdom',
-    verbose: false,
-    // type tests are caught by the typescript compiler
-    testPathIgnorePatterns: ['.type.test.ts'],
-    rootDir: repoRootDir,
-    silent: false,
-    moduleNameMapper: pathsToModuleNameMapper(getTsconfigPathAliases(), {
-        prefix: '<rootDir>/',
-    }) as Record<string, string | string[]>,
-    roots: [join(repoRootDir, 'src')],
-    setupFilesAfterEnv: [join(__dirname, 'jest.setup.ts')],
-    globals: {
-        'ts-jest': {
-            tsconfig: findTsConfigFile(),
-            diagnostics: {
-                warnOnly: true,
-                ignoreCodes: ['TS151001'],
-            },
-        },
-    },
-};
-
-export default config;

package/jest/jest.setup.ts

@@ -1,12 +0,0 @@
-import {CustomConsole, LogMessage, LogType} from '@jest/console';
-
-function simpleFormatter(type: LogType, message: LogMessage): string {
-    const consoleIndent = '      ';
-
-    return message
-        .split(/\n/)
-        .map((line) => consoleIndent + line)
-        .join('\n');
-}
-
-global.console = new CustomConsole(process.stdout, process.stderr, simpleFormatter);

package/jest/read-tsconfig.ts

@@ -1,27 +0,0 @@
-import {dirname} from 'path';
-import {findConfigFile, parseJsonConfigFileContent, readConfigFile, sys as tsSys} from 'typescript';
-
-export function findTsConfigFile(): string {
-    const dirToCheck = __dirname;
-    const configFileName = findConfigFile(dirToCheck, tsSys.fileExists, 'tsconfig.json');
-    if (!configFileName) {
-        throw new Error(
-            `Could not find tsconfig.json file from starting search at "${dirToCheck}"`,
-        );
-    }
-    return configFileName;
-}
-
-export function getTsconfigPathAliases() {
-    const configFileName = findTsConfigFile();
-
-    if (!configFileName) {
-        throw new Error(`Failed to find tsconfig.`);
-    }
-
-    const configFile = readConfigFile(configFileName, tsSys.readFile);
-    const tsConfig = parseJsonConfigFileContent(configFile.config, tsSys, dirname(configFileName));
-    const tsConfigPaths = tsConfig.options.paths || {};
-
-    return tsConfigPaths;
-}

package/public/index.css

@@ -1,7 +0,0 @@
-html,
-body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    width: 100%;
-}

package/vite/always-reload-plugin.ts

@@ -1,90 +0,0 @@
-import chalk from 'chalk';
-import {existsSync, lstatSync, readlinkSync} from 'fs';
-import {relative} from 'path';
-import {PluginOption} from 'vite';
-
-/**
- * Include actual paths and symlinked target paths if they exist.
- *
- * This is needed because when removing files from the watcher, sym links have be removed with the
- * path to the symlink itself AND the path to the symlink target or the path will still be watched.
- */
-function mapToActualPaths(paths: Readonly<string[]>): Readonly<string[]> {
-    return paths.reduce((accum, path) => {
-        if (existsSync(path)) {
-            if (lstatSync(path).isSymbolicLink()) {
-                console.info('reading symlink from', path);
-                // sym links AND the original path both need to be included
-                return accum.concat(readlinkSync(path), path);
-            } else {
-                return accum.concat(path);
-            }
-        } else {
-            return accum;
-        }
-    }, [] as string[]);
-}
-
-/**
- * There are similar plugins out there that try to do this but they aren't aggressive enough. This
- * plugin literally always reloads on save, no questions asked.
- */
-export function alwaysReloadPlugin(
-    config: Partial<{
-        exclusions: string[];
-        /** Inclusions apply after exclusions so they will override exclusions. */
-        inclusions: string[];
-        root: string;
-    }> = {},
-): PluginOption {
-    return {
-        name: 'alwaysReloadPlugin',
-        apply: 'serve',
-        config: () => ({server: {watch: {disableGlobbing: false}}}),
-        configureServer({watcher, ws, config: {logger}}) {
-            const {root = process.cwd(), inclusions = [], exclusions = []} = config;
-            let callingAlready = false;
-            let loggedAlready = false;
-
-            const reloadCallback = (path: string) => {
-                if (!loggedAlready) {
-                    loggedAlready = true;
-                    // log watched stuff so that we can make sure it's not watching too much
-                    // console.info({watched: watcher.getWatched()});
-                }
-                // prevent duplicate calls cause the watcher is very eager to call callbacks multiple times in a row
-                if (!callingAlready) {
-                    callingAlready = true;
-                    ws.send({
-                        type: 'full-reload',
-                        path: '*',
-                    });
-                    logger.info(
-                        `${chalk.green('page reload')} ${chalk.dim(relative(root, path))}`,
-                        {clear: true, timestamp: true},
-                    );
-                    /**
-                     * Debounce reloads calls so that they don't get spammed. If you're saving
-                     * faster than this, then what the heck are you doing anyway?
-                     */
-                    setTimeout(() => {
-                        callingAlready = false;
-                    }, 100);
-                }
-            };
-
-            if (exclusions.length) {
-                watcher.unwatch(mapToActualPaths(exclusions));
-                // ignore macOS file system metadata stuff
-                watcher.unwatch('./**/.DS_Store');
-            }
-            if (inclusions.length) {
-                watcher.add(inclusions);
-            }
-            if (!watcher.listeners('change').includes(reloadCallback)) {
-                watcher.on('change', reloadCallback);
-                watcher.on('add', reloadCallback);
-            }
-        },
-    };
-}

package/vite/vite.config.ts

@@ -1,10 +0,0 @@
-import {dirname} from 'path';
-import {alwaysReloadPlugin} from './always-reload-plugin';
-
-const viteConfig = {
-    clearScreen: false,
-    plugins: [alwaysReloadPlugin()],
-    rootDir: dirname(__dirname),
-};
-
-export default viteConfig;