element-vir 2.0.4 → 4.0.0

package/README.md

@@ -1,18 +1,19 @@
 # element-vir
 
-Heroic, reactive, functional, type safe, custom web components.
+Heroic. Reactive. Functional. Type safe. Web components without compromise.
 
 No need for an extra build step,<br>
-no need for weird file extensions,<br>
+no need for side effect imports, <br>
+no need for unique file extensions,<br>
 no need for extra static analysis tools,<br>
-no need for a dedicated funky syntax.<br>
+no need for a dedicated, unique syntax.<br>
 _**It's just TypeScript.**_
 
-Built using the power of _native_ JavaScript custom web elements, _native_ JavaScript template literals, _native_ JavaScript functions<sup>\*</sup>, _native_ HTML, and [lit-element](http://lit.dev).
+Uses the power of _native_ JavaScript custom web elements, _native_ JavaScript template literals, _native_ JavaScript functions<sup>\*</sup>, _native_ HTML, and [lit-element](http://lit.dev).
 
-This is basically a [lit-element](http://lit.dev) wrapper that adds type-safe I/O and functional-programming style component definition.
+In reality this is basically a [lit-element](http://lit.dev) wrapper that adds type-safe element tag usage and I/O with functional-programming style component definition.
 
-[Works in every major browser except Internet Explorer.](https://caniuse.com/mdn-api_window_customelements) <sub>(Heaven help you if you still need to support IE.)</sub>
+[Works in every major web browser except Internet Explorer.](https://caniuse.com/mdn-api_window_customelements)
 
 <sub>\*okay I hope it's obvious that functions are native</sub>
 
@@ -24,15 +25,17 @@ This is basically a [lit-element](http://lit.dev) wrapper that adds type-safe I/
 npm i element-vir
 ```
 
+Make sure to install this as a normal dependency (not just a dev dependency) because it needs to exist at run time.
+
 # Usage
 
 Most usage of this package is done through the [`defineFunctionalElement` function](https://github.com/electrovir/element-vir/blob/main/src/functional-element/define-functional-element.ts#L25-L30). See the [`FunctionalElementInit` type](https://github.com/electrovir/element-vir/blob/main/src/functional-element/functional-element-init.ts#L7-L20) for that function's inputs. These inputs are also described below with examples.
 
-All of [`lit`](https://lit.dev)'s syntax and functionality is also available for use.
+All of [`lit`](https://lit.dev)'s syntax and functionality is also available for use if you wish.
 
 ## Simple element definition
 
-Use `defineFunctionalElement` to define your element. This is apparent if you inspect the types but it must be given an object with at least `tagName` and `renderCallback` properties. This is a bare-minimum example custom element:
+Use `defineFunctionalElement` to define your element. Tt must be given an object with at least `tagName` and `renderCallback` properties (the types enforce this). Here is a bare-minimum example custom element:
 
 <!-- example-link: src/readme-examples/my-simple.element.ts -->
 
@@ -47,7 +50,7 @@ export const MySimpleElement = defineFunctionalElement({
 });
 ```
 
-Make sure to export your element definition as that will be used to instantiate it in your HTML templates.
+Make sure to export your element definition if you need to use it in other files.
 
 ## Using in other elements
 
@@ -70,17 +73,16 @@ export const MyAppElement = defineFunctionalElement({
 
 This requirement ensures that the element is properly imported and registered with the browser. (Compare to pure [lit](http://lit.dev) where you must remember to import each element file as a side effect, or without actually referencing any of its exports in your code.)
 
-If you wish to bypass this interpolation requirement, instead [import `html` directly from `lit`](https://lit.dev/docs/components/overview/).
+If you wish to bypass this interpolation, make sure to [import the `html` tagged template directly from `lit`](https://lit.dev/docs/components/overview/), `import {html} from 'lit';`, instead of version contained in `element-vir`.
 
 ## Adding styles
 
-Styles are added through `styles` when defining a functional element (similar to [how they are defined in `lit`](https://lit.dev/docs/components/styles/)):
+Styles are added through the `styles` property when defining a functional element (similar to [how they are defined in `lit`](https://lit.dev/docs/components/styles/)):
 
 <!-- example-link: src/readme-examples/my-simple-app-with-styles.element.ts -->
 
 ```TypeScript
-import {css} from 'lit';
-import {defineFunctionalElement, html} from 'element-vir';
+import {css, defineFunctionalElement, html} from 'element-vir';
 
 export const MySimpleWithStylesElement = defineFunctionalElement({
     tagName: 'my-simple-with-styles-element',
@@ -102,9 +104,32 @@ export const MySimpleWithStylesElement = defineFunctionalElement({
 });
 ```
 
+### Element definition as style selector
+
+Functional element definitions can be used in the `css` tagged template just like in the `html` tagged template. This will be replaced by the element's tag name:
+
+<!-- example-link: src/readme-examples/my-simple-app-with-styles-and-interpolated-selector.element.ts -->
+
+```TypeScript
+import {css, defineFunctionalElement, html} from 'element-vir';
+import {MySimpleElement} from './my-simple.element';
+
+export const MySimpleWithStylesAndInterpolatedSelectorElement = defineFunctionalElement({
+    tagName: 'my-simple-with-styles-and-interpolated-selector-element',
+    styles: css`
+        ${MySimpleElement} {
+            background-color: blue;
+        }
+    `,
+    renderCallback: () => html`
+        <${MySimpleElement}></${MySimpleElement}>
+    `,
+});
+```
+
 ## Defining and using properties (inputs)
 
-Define properties with `props` when defining a functional element. Each property must be given a default value. If you wish to leave the property's default value as `undefined`, give it a type as well (shown below with `as string | undefined`) so you can assign a defined value of that type to it later.
+Define element properties with `props` when making a functional element. Each property must be given a default value. If you wish to leave the property's default value as `undefined`, give it a type as well (shown below with `as string | undefined`) so you can assign a defined value of that type to it later.
 
 To use a custom element's properties, grab `props` from `renderCallback`'s parameters and interpolate it into your HTML template:
 
@@ -148,38 +173,37 @@ export const MyAppWithPropsElement = defineFunctionalElement({
 });
 ```
 
-## Defining and dispatching custom events (outputs)
+## Element events (outputs)
 
-Define events with `events` when defining a functional element. Each event must be initialized with `eventInit` and a type parameter. `eventInit` accepts no inputs as it doesn't make sense for events to have a default value.
+Define events with `events` when making a functional element. Each event must be initialized with `defineElementEvent` and a type parameter. `defineElementEvent` accepts no inputs as it doesn't make sense for events to have default values.
 
-To dispatch an event, grab `dispatchEvent` from `renderCallback`'s parameters.
+To dispatch an event, grab `dispatch` from `renderCallback`'s parameters.
 
 <!-- example-link: src/readme-examples/my-simple-with-events.element.ts -->
 
 ```TypeScript
-import {defineFunctionalElement, ElementEvent, eventInit, html} from 'element-vir';
+import {defineElementEvent, defineFunctionalElement, html, listen} from 'element-vir';
 
 export const MySimpleWithEventsElement = defineFunctionalElement({
     tagName: 'my-simple-element-with-events',
     events: {
-        logoutClick: eventInit<void>(),
-        randomNumber: eventInit<number>(),
+        logoutClick: defineElementEvent<void>(),
+        randomNumber: defineElementEvent<number>(),
     },
-    renderCallback: ({props, dispatchEvent, events}) => html`
-        <!-- normal DOM events must be listened to with the "@" keyword from lit. -->
-        <button @click=${() => dispatchEvent(new ElementEvent(events.logoutClick, undefined))}>
+    renderCallback: ({dispatch, events}) => html`
+        <button ${listen('click', () => dispatch(new events.logoutClick(undefined)))}>
             log out
         </button>
-        <button @click=${() => dispatchEvent(new ElementEvent(events.randomNumber, Math.random()))}>
+        <button ${listen('click', () => dispatch(new events.randomNumber(Math.random())))}>
             generate random number
         </button>
     `,
 });
 ```
 
-## Listening to custom events (outputs)
+## Listening to typed events (outputs)
 
-Use the `listen` directive to listen to custom events emitted by your custom functional elements:
+Use the `listen` directive to listen to typed events emitted by your custom functional elements:
 
 <!-- example-link: src/readme-examples/my-app-with-events.element.ts -->
 
@@ -208,15 +232,59 @@ export const MyAppWithEventsElement = defineFunctionalElement({
 });
 ```
 
+`listen` can also be used to listen to native DOM events (like `click`) and the proper event type will be provided for the listener callback.
+
+## Typed events without an element
+
+Create a custom event type with `defineTypedEvent`. Make sure to include the type generic (like this: `defineTypedEvent<number>`) and call it twice, the second time with the event type string, (like this: `defineTypedEvent<number>()('my-event-type-name')`) to ensure type safety when using your event. Note that event type names should probably be unique, or they may clash with each other.
+
+### Creating a typed event
+
+<!-- example-link: src/readme-examples/custom-event-no-element.ts -->
+
+```TypeScript
+import {defineTypedEvent} from 'element-vir';
+
+export const MyCustomEvent = defineTypedEvent<number>()('myCustomEventName');
+```
+
+### Using a typed event
+
+Both dispatching a custom event and listening to a custom event:
+
+<!-- example-link: src/readme-examples/custom-event-usage.element.ts -->
+
+```TypeScript
+import {defineFunctionalElement, html, listen} from 'element-vir';
+import {MyCustomEvent} from './custom-event-no-element';
+
+export const MyElementWithCustomEvents = defineFunctionalElement({
+    tagName: 'my-app-with-custom-events',
+    renderCallback: ({genericDispatch}) => html`
+        <div
+            ${listen(MyCustomEvent, (event) => {
+                console.log(`Got a number! ${event.detail}`);
+            })}
+        >
+            <div
+                ${listen('click', () => {
+                    genericDispatch(new MyCustomEvent(Math.random()));
+                })}
+            ></div>
+        </div>
+    `,
+});
+```
+
 ## Directives
 
-Some custom [`lit` directives](https://lit.dev/docs/templates/custom-directives/) are also contained within this package.
+The following custom [`lit` directives](https://lit.dev/docs/templates/custom-directives/) are contained within this package.
 
 ### onDomCreated
 
 This directive should be used instead of trying to use `querySelector` directly on the custom element.
 
-This triggers only once when the element it's contained within is created in the DOM. If it's containing element changes, the callback will be triggered again.
+This triggers only once when the element it's attached has actually been created in the DOM. If it's attached element changes, the callback will be triggered again.
 
 <!-- example-link: src/readme-examples/my-simple-with-on-dom-created.element.ts -->
 
@@ -240,7 +308,7 @@ export const MySimpleWithOnDomCreatedElement = defineFunctionalElement({
 
 ### onResize
 
-This directive fulfills a common use case of triggering callbacks when something resizes. Instead of just tracking the _globally_ resizing window though, this allows you to track resizes of an individual element. The callback here is given a portion of the [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) (since not all properties are supported well in browsers).
+This directive fulfills a common use case of triggering callbacks when something resizes. Instead of just tracking the _globally_ resizing window though, this allows you to track resizes of an individual element. The callback here is passed an object with a portion of the [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) properties (since not all properties are supported well in browsers).
 
 <!-- example-link: src/readme-examples/my-simple-with-on-resize.element.ts -->
 
@@ -273,13 +341,12 @@ Listen to a specific event emitted from a custom element. This is explained in t
 
 ### assignWithCleanup
 
-This directive is the same as the `assign` directive but it accepts an additional `cleanupCallback` input. Use this directive to assign values which need some kind of cleanup if they're overwritten. For example, a 3D rendering engine which uses the canvas that should free up memory when it's swapped out.
+This directive is the same as the `assign` directive but it accepts an additional `cleanupCallback` input. Use this directive to assign values which need some kind of cleanup when they're overwritten. For example, a 3D rendering engine which uses the canvas that should free up memory when it's swapped out.
 
 <!-- example-link: src/readme-examples/my-app-with-cleanup.element.ts -->
 
 ```TypeScript
-import {assign, defineFunctionalElement, html} from 'element-vir';
-import {assignWithCleanup} from '../functional-element/directives/assign-with-clean-up.directive';
+import {assign, assignWithCleanup, defineFunctionalElement, html} from 'element-vir';
 import {MySimpleWithPropsElement} from './my-simple-with-props.element';
 
 export const MyAppWithPropsElement = defineFunctionalElement({
@@ -310,7 +377,13 @@ To require all child elements to be functional elements defined by this package,
 <!-- example-link: src/readme-examples/require-functional-element.ts -->
 
 ```TypeScript
-import {requireAllCustomElementsToBeFunctionalElement} from '../require-functional-element';
+import {requireAllCustomElementsToBeFunctionalElement} from 'element-vir';
 
 requireAllCustomElementsToBeFunctionalElement();
 ```
+
+# Dev
+
+## markdown out of date
+
+If you see this: `Code in Markdown file(s) is out of date. Run without --check to update. code-in-markdown failed.`, run `npm run update-docs` to fix it.

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

@@ -27,7 +27,6 @@ export function defineFunctionalElement(functionalElementInit) {
         },
         _a.tagName = functionalElementInit.tagName,
         _a.styles = functionalElementInit.styles || css ``,
-        _a.propNames = Object.keys(functionalElementInit.props || {}),
         _a.events = eventsMap,
         _a.renderCallback = functionalElementInit.renderCallback,
         _a.props = createPropertyDescriptorMap(functionalElementInit.props),

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

@@ -1,10 +1,15 @@
 import { PartInfo } from 'lit/directive.js';
 import { ElementEvent, EventDescriptor } from '../element-events';
 /**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
+ * 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 declare function listen<EventName extends string, DetailType>(eventType: EventDescriptor<EventName, DetailType>, listener: (event: ElementEvent<EventName, DetailType>) => void): import("lit-html/directive").DirectiveResult<{
+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;

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

@@ -2,12 +2,21 @@ import { noChange } from 'lit';
 import { directive, Directive } from 'lit/directive.js';
 import { extractElement } from './directive-util';
 /**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
+ * 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(eventType, listener) {
-    return listenDirective(eventType, listener);
+export function listen(eventDescriptor, listener) {
+    return listenDirective(eventDescriptor, 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 {
     constructor(partInfo) {
         super(partInfo);

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

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

@@ -0,0 +1,42 @@
+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/dist/functional-element/directives/on-dom-created.directive.js

@@ -11,8 +11,8 @@ export const onDomCreated = directive(class extends Directive {
         assertsIsElementPartInfo(partInfo, directiveName);
         const newElement = partInfo.element;
         if (newElement !== this.element) {
-            // use setTimeout here so it can fire property changes outside of a render loop
-            setTimeout(() => callback(newElement), 0);
+            // use requestAnimationFrame here so it can fire property changes outside of a render loop
+            requestAnimationFrame(() => callback(newElement));
             this.element = newElement;
         }
         return this.render(callback);

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

@@ -7,10 +7,11 @@ export declare type EventInitInfo<EventNameGeneric extends string> = {
     eventName: EventNameGeneric;
 };
 export declare class ElementEvent<EventName extends string, EventValue> extends CustomEvent<EventValue> {
-    protected readonly eventInitInfo: EventInitInfo<EventName>;
+    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

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

@@ -10,6 +10,19 @@ export class ElementEvent extends CustomEvent {
         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;
+}
 export function createEventDescriptorMap(eventsInit) {
     if (!eventsInit) {
         return {};

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

@@ -20,7 +20,6 @@ export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyIn
 export declare abstract class FunctionalElementBaseClass<PropertyInitGeneric extends PropertyInitMapBase> extends LitElement {
     static readonly tagName: string;
     static readonly styles: CSSResult;
-    static readonly propNames: string[];
     abstract render(): TemplateResult | Promise<TemplateResult>;
     abstract readonly instanceProps: PropertyInitGeneric;
 }
@@ -37,5 +36,4 @@ export declare type ExtraStaticFunctionalElementProperties<PropertyInitGeneric e
      */
     tagName: string;
     styles: CSSResult;
-    propNames: string[];
 }>;

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

@@ -6,11 +6,12 @@ export declare type RenderCallback<PropertyInitGeneric extends PropertyInitMapBa
 export declare type RenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
     props: PropertyInitGeneric;
     events: EventDescriptorMap<EventsInitGeneric>;
-    dispatchEvent: <EventName extends keyof EventsInitGeneric>(event: ElementEvent<EventName extends string ? EventName : never, EventInitMapEventDetailExtractor<EventName, EventsInitGeneric>>) => boolean;
+    host: FunctionalElementInstance<PropertyInitGeneric>;
+    dispatchElementEvent: <EventName extends keyof EventsInitGeneric>(event: ElementEvent<EventName extends string ? EventName : never, EventInitMapEventDetailExtractor<EventName, EventsInitGeneric>>) => boolean;
     /**
-     * Same as dispatchEvent but without the extra types. This allows you to emit any events, even
-     * events from other custom elements.
+     * Same as dispatchElementEvent but without the extra types. This allows you to emit any events,
+     * even events from other custom elements.
      */
-    defaultDispatchEvent: (event: Event) => boolean;
+    dispatchEvent: (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,9 @@ 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),
-        defaultDispatchEvent: (event) => element.dispatchEvent(event),
+        host: element,
         props: element.instanceProps,
         events: eventsMap,
     };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ 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';

package/dist/index.js

@@ -2,6 +2,7 @@ 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';

package/index.html

@@ -0,0 +1,14 @@
+<!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

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

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

@@ -0,0 +1,27 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "2.0.4",
+    "version": "4.0.0",
     "keywords": [
         "custom",
         "web",
@@ -25,23 +25,28 @@
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
-        "compile": "virmator compile",
+        "compile": "tsc",
         "format": "virmator format write",
+        "jest": "jest --config ./jest/jest.config.ts",
         "prepublishOnly": "npm run test:full",
         "spellcheck": "virmator spellcheck",
-        "start": "npm install && snowpack dev",
-        "test": "npm run compile",
+        "start": "npm install && vite --force --config ./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",
-        "update-docs": "virmator code-in-markdown README.md"
+        "type-check": "tsc --noEmit",
+        "update-docs": "virmator code-in-markdown README.md --index src/index.ts"
     },
     "dependencies": {
-        "augment-vir": "^1.4.1",
-        "lit": "^2.0.2"
+        "augment-vir": "^1.4.3",
+        "lit": "^2.1.1"
     },
     "devDependencies": {
-        "@snowpack/plugin-typescript": "^1.2.1",
-        "snowpack": "^3.8.8",
-        "typescript": "^4.4.4",
-        "virmator": "^1.3.7"
+        "@types/jest": "^27.4.0",
+        "jest": "^27.4.7",
+        "ts-jest": "^27.1.3",
+        "ts-node": "^10.4.0",
+        "typescript": "^4.5.4",
+        "virmator": "^1.3.7",
+        "vite": "^2.7.12"
     }
 }

package/public/index.css

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

package/vite/always-reload-plugin.ts

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

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