element-vir 26.12.0 → 26.12.1

package/dist/readme-examples/my-with-assignment.element.js

@@ -0,0 +1,15 @@
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
+import { MyWithInputs } from './my-with-inputs.element.js';
+export const MyWithAssignment = defineElement()({
+    tagName: 'my-with-assignment',
+    render() {
+        return html `
+            <h1>My App</h1>
+            <${MyWithInputs.assign({
+            email: 'user@example.com',
+            username: 'user',
+        })}></${MyWithInputs}>
+        `;
+    },
+});

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

@@ -0,0 +1,10 @@
+type EndpointData = number[];
+export declare const MyWithAsyncProp: import("../index.js").DeclarativeElementDefinition<"my-with-async-prop", {
+    endpoint: string;
+}, {
+    data: import("../index.js").AsyncProp<EndpointData, {
+        endpoint: string;
+    }>;
+    hi: string;
+}, {}, "my-with-async-prop-", "my-with-async-prop-", readonly [], readonly []>;
+export {};

package/{src/readme-examples/my-with-async-prop.element.ts → dist/readme-examples/my-with-async-prop.element.js}

@@ -1,54 +1,46 @@
-import {asyncProp, defineElement, html, listen, renderAsync} from '../index.js';
-
-type EndpointData = number[];
-
-async function loadSomething(endpoint: string): Promise<EndpointData> {
+import { asyncProp, defineElement, html, listen, renderAsync } from '../index.js';
+async function loadSomething(endpoint) {
     // load something from the network
-    const data = await (
-        await fetch(
-            [
-                '',
-                'api',
-                endpoint,
-            ].join('/'),
-        )
-    ).json();
+    const data = await (await fetch([
+        '',
+        'api',
+        endpoint,
+    ].join('/'))).json();
     return data;
 }
-
-export const MyWithAsyncProp = defineElement<{endpoint: string}>()({
+export const MyWithAsyncProp = defineElement()({
     tagName: 'my-with-async-prop',
     state() {
         return {
             data: asyncProp({
-                async updateCallback({endpoint}: {endpoint: string}) {
+                async updateCallback({ endpoint }) {
                     return loadSomething(endpoint);
                 },
             }),
             hi: '',
         };
     },
-    render({inputs, state}) {
+    render({ inputs, state }) {
         /**
          * This causes the a promise which automatically updates the state.data prop once the
          * promise resolves. It only creates a new promise if the first input, the trigger, value
          * changes from previous calls.
          */
         state.data.update(inputs);
-        return html`
+        return html `
             Here's the data:
             <br />
             ${renderAsync(state.data, 'Loading...', (loadedData) => {
-                return html`
+            return html `
                     Got the data: ${loadedData}
                 `;
-            })}
+        })}
             <br />
             <button
                 ${listen('click', () => {
-                    /** You can force asyncProp to update by calling forceUpdate. */
-                    state.data.forceUpdate(inputs);
-                })}
+            /** You can force asyncProp to update by calling forceUpdate. */
+            state.data.forceUpdate(inputs);
+        })}
             >
                 Refresh
             </button>

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

@@ -0,0 +1,3 @@
+export declare const MyWithAssignmentCleanupCallback: import("element-vir").DeclarativeElementDefinition<"my-with-cleanup-callback", {}, {
+    intervalId: number;
+}, {}, "my-with-cleanup-callback-", "my-with-cleanup-callback-", readonly [], readonly []>;

package/{src/readme-examples/my-with-cleanup-callback.element.ts → dist/readme-examples/my-with-cleanup-callback.element.js}

@@ -1,6 +1,5 @@
-import {defineElement} from 'element-vir';
-import {html} from '../index.js';
-
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
 export const MyWithAssignmentCleanupCallback = defineElement()({
     tagName: 'my-with-cleanup-callback',
     state() {
@@ -9,11 +8,11 @@ export const MyWithAssignmentCleanupCallback = defineElement()({
         };
     },
     render() {
-        return html`
+        return html `
             <h1>My App</h1>
         `;
     },
-    cleanup({state}) {
+    cleanup({ state }) {
         window.clearInterval(state.intervalId);
     },
 });

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

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

package/{src/readme-examples/my-with-css-vars.element.ts → dist/readme-examples/my-with-css-vars.element.js}

@@ -1,13 +1,12 @@
-import {defineElement} from 'element-vir';
-import {css, html} from '../index.js';
-
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
 export const MyWithCssVars = defineElement()({
     tagName: 'my-with-css-vars',
     cssVars: {
         /** The value assigned here ('blue') becomes the fallback value for this CSS var. */
         'my-with-css-vars-my-var': 'blue',
     },
-    styles: ({cssVars}) => css`
+    styles: ({ cssVars }) => css `
         :host {
             /*
                 Set CSS vars (or reference the name directly) via the ".name" property
@@ -21,6 +20,6 @@ export const MyWithCssVars = defineElement()({
         }
     `,
     render() {
-        return html``;
+        return html ``;
     },
 });

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

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

package/dist/readme-examples/my-with-custom-events.element.js

@@ -0,0 +1,22 @@
+import { randomInteger } from '@augment-vir/common';
+import { defineElement } from 'element-vir';
+import { html, listen } from '../index.js';
+import { MyCustomActionEvent } from './my-custom-action.event.js';
+export const MyWithCustomEvents = defineElement()({
+    tagName: 'my-with-custom-events',
+    render({ dispatch }) {
+        return html `
+            <div
+                ${listen(MyCustomActionEvent, (event) => {
+            console.info(`Got a number! ${event.detail}`);
+        })}
+            >
+                <div
+                    ${listen('click', () => {
+            dispatch(new MyCustomActionEvent(randomInteger({ min: 0, max: 1_000_000 })));
+        })}
+                ></div>
+            </div>
+        `;
+    },
+});

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

@@ -0,0 +1,3 @@
+export declare const MyWithEventListening: import("element-vir").DeclarativeElementDefinition<"my-with-event-listening", {}, {
+    myNumber: number;
+}, {}, "my-with-event-listening-", "my-with-event-listening-", readonly [], readonly []>;

package/{src/readme-examples/my-with-event-listening.element.ts → dist/readme-examples/my-with-event-listening.element.js}

@@ -1,7 +1,6 @@
-import {defineElement} from 'element-vir';
-import {html, listen} from '../index.js';
-import {MyWithEvents} from './my-with-events.element.js';
-
+import { defineElement } from 'element-vir';
+import { html, listen } from '../index.js';
+import { MyWithEvents } from './my-with-events.element.js';
 export const MyWithEventListening = defineElement()({
     tagName: 'my-with-event-listening',
     state() {
@@ -9,16 +8,16 @@ export const MyWithEventListening = defineElement()({
             myNumber: -1,
         };
     },
-    render({state, updateState}) {
-        return html`
+    render({ state, updateState }) {
+        return html `
             <h1>My App</h1>
             <${MyWithEvents}
                 ${listen(MyWithEvents.events.logoutClick, () => {
-                    console.info('logout triggered');
-                })}
+            console.info('logout triggered');
+        })}
                 ${listen(MyWithEvents.events.randomNumber, (event) => {
-                    updateState({myNumber: event.detail});
-                })}
+            updateState({ myNumber: event.detail });
+        })}
             ></${MyWithEvents}>
             <span>${state.myNumber}</span>
         `;

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

@@ -0,0 +1,4 @@
+export declare const MyWithEvents: import("element-vir").DeclarativeElementDefinition<"my-with-events", {}, {}, {
+    logoutClick: import("element-vir").DefineEvent<void>;
+    randomNumber: import("element-vir").DefineEvent<number>;
+}, "my-with-events-", "my-with-events-", readonly [], readonly []>;

package/dist/readme-examples/my-with-events.element.js

@@ -0,0 +1,20 @@
+import { randomInteger } from '@augment-vir/common';
+import { defineElement } from 'element-vir';
+import { defineElementEvent, html, listen } from '../index.js';
+export const MyWithEvents = defineElement()({
+    tagName: 'my-with-events',
+    events: {
+        logoutClick: defineElementEvent(),
+        randomNumber: defineElementEvent(),
+    },
+    render({ dispatch, events }) {
+        return html `
+            <button ${listen('click', () => dispatch(new events.logoutClick()))}>log out</button>
+            <button
+                ${listen('click', () => dispatch(new events.randomNumber(randomInteger({ min: 0, max: 1_000_000 }))))}
+            >
+                generate random number
+            </button>
+        `;
+    },
+});

package/dist/readme-examples/my-with-host-class-definition.element.d.ts

@@ -0,0 +1,3 @@
+export declare const MyWithHostClassDefinition: import("element-vir").DeclarativeElementDefinition<"my-with-host-class-definition", {}, {
+    myProp: string;
+}, {}, "my-with-host-class-definition-a" | "my-with-host-class-definition-automatic", "my-with-host-class-definition-", readonly [], readonly []>;

package/{src/readme-examples/my-with-host-class-definition.element.ts → dist/readme-examples/my-with-host-class-definition.element.js}

@@ -1,6 +1,5 @@
-import {defineElement} from 'element-vir';
-import {css, html} from '../index.js';
-
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
 export const MyWithHostClassDefinition = defineElement()({
     tagName: 'my-with-host-class-definition',
     state() {
@@ -18,7 +17,7 @@ export const MyWithHostClassDefinition = defineElement()({
          * This host class will be automatically applied if the given callback is evaluated to true
          * after a call to render.
          */
-        'my-with-host-class-definition-automatic': ({state}) => {
+        'my-with-host-class-definition-automatic': ({ state }) => {
             return state.myProp === 'foo';
         },
     },
@@ -26,7 +25,7 @@ export const MyWithHostClassDefinition = defineElement()({
      * Apply styles to the host classes by using a callback for "styles". The callback's argument
      * contains the host classes defined above in the "hostClasses" property.
      */
-    styles: ({hostClasses}) => css`
+    styles: ({ hostClasses }) => css `
         ${hostClasses['my-with-host-class-definition-automatic'].selector} {
             color: blue;
         }
@@ -35,8 +34,8 @@ export const MyWithHostClassDefinition = defineElement()({
             color: red;
         }
     `,
-    render({state}) {
-        return html`
+    render({ state }) {
+        return html `
             ${state.myProp}
         `;
     },

package/dist/readme-examples/my-with-host-class-usage.element.d.ts

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

package/{src/readme-examples/my-with-host-class-usage.element.ts → dist/readme-examples/my-with-host-class-usage.element.js}

@@ -1,11 +1,10 @@
-import {defineElement} from 'element-vir';
-import {html} from '../index.js';
-import {MyWithHostClassDefinition} from './my-with-host-class-definition.element.js';
-
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
+import { MyWithHostClassDefinition } from './my-with-host-class-definition.element.js';
 export const MyWithHostClassUsage = defineElement()({
     tagName: 'my-with-host-class-usage',
     render() {
-        return html`
+        return html `
             <${MyWithHostClassDefinition}
                 class=${MyWithHostClassDefinition.hostClasses['my-with-host-class-definition-a']}
             ></${MyWithHostClassDefinition}>

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

@@ -0,0 +1,4 @@
+export declare const MyWithInputs: import("../index.js").DeclarativeElementDefinition<"my-with-inputs", {
+    username: string;
+    email: string;
+}, {}, {}, "my-with-inputs-", "my-with-inputs-", readonly [], readonly []>;

package/dist/readme-examples/my-with-inputs.element.js

@@ -0,0 +1,9 @@
+import { defineElement, html } from '../index.js';
+export const MyWithInputs = defineElement()({
+    tagName: 'my-with-inputs',
+    render({ inputs }) {
+        return html `
+            <span>Hello there ${inputs.username}!</span>
+        `;
+    },
+});

package/dist/readme-examples/my-with-on-dom-created.element.d.ts

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

package/{src/readme-examples/my-with-on-dom-created.element.ts → dist/readme-examples/my-with-on-dom-created.element.js}

@@ -1,15 +1,14 @@
-import {defineElement} from 'element-vir';
-import {html, onDomCreated} from '../index.js';
-
+import { defineElement } from 'element-vir';
+import { html, onDomCreated } from '../index.js';
 export const MyWithOnDomCreated = defineElement()({
     tagName: 'my-with-on-dom-created',
     render() {
-        return html`
+        return html `
             <span
                 ${onDomCreated((element) => {
-                    // logs a span element
-                    console.info(element);
-                })}
+            // logs a span element
+            console.info(element);
+        })}
             >
                 Hello there!
             </span>

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

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

package/dist/readme-examples/my-with-on-resize.element.js

@@ -0,0 +1,18 @@
+import { defineElement } from 'element-vir';
+import { html, onResize } from '../index.js';
+export const MyWithOnResize = defineElement()({
+    tagName: 'my-with-on-resize',
+    render() {
+        return html `
+            <span
+                ${onResize((entry) => {
+            // this will track resizing of this span
+            // the entry parameter contains target and contentRect properties
+            console.info(entry);
+        })}
+            >
+                Hello there!
+            </span>
+        `;
+    },
+});

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

@@ -0,0 +1,3 @@
+export declare const MyWithRenderIf: import("../index.js").DeclarativeElementDefinition<"my-with-render-if", {
+    shouldRender: boolean;
+}, {}, {}, "my-with-render-if-", "my-with-render-if-", readonly [], readonly []>;

package/dist/readme-examples/my-with-render-if.element.js

@@ -0,0 +1,11 @@
+import { defineElement, html, renderIf } from '../index.js';
+export const MyWithRenderIf = defineElement()({
+    tagName: 'my-with-render-if',
+    render({ inputs }) {
+        return html `
+            ${renderIf(inputs.shouldRender, html `
+                    I'm conditionally rendered!
+                `)}
+        `;
+    },
+});

package/dist/readme-examples/my-with-styles-and-interpolated-selector.element.d.ts

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

package/{src/readme-examples/my-with-styles-and-interpolated-selector.element.ts → dist/readme-examples/my-with-styles-and-interpolated-selector.element.js}

@@ -1,16 +1,15 @@
-import {defineElement} from 'element-vir';
-import {css, html} from '../index.js';
-import {MySimple} from './my-simple.element.js';
-
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
+import { MySimple } from './my-simple.element.js';
 export const MyWithStylesAndInterpolatedSelector = defineElement()({
     tagName: 'my-with-styles-and-interpolated-selector',
-    styles: css`
+    styles: css `
         ${MySimple} {
             background-color: blue;
         }
     `,
     render() {
-        return html`
+        return html `
             <${MySimple}></${MySimple}>
         `;
     },

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

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

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

@@ -1,9 +1,8 @@
-import {defineElement} from 'element-vir';
-import {css, html} from '../index.js';
-
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
 export const MyWithStyles = defineElement()({
     tagName: 'my-with-styles',
-    styles: css`
+    styles: css `
         :host {
             display: flex;
             flex-direction: column;
@@ -15,7 +14,7 @@ export const MyWithStyles = defineElement()({
         }
     `,
     render() {
-        return html`
+        return html `
             <span>Hello there!</span>
             <span>How are you doing?</span>
         `;

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

@@ -0,0 +1,8 @@
+export declare const MyWithUpdateState: import("element-vir").DeclarativeElementDefinition<"my-with-update-state", {}, {
+    username: string;
+    /**
+     * Use "as" to create state properties that can be types other than the initial value's
+     * type. This is particularly useful when, as below, the initial value is undefined.
+     */
+    email: string | undefined;
+}, {}, "my-with-update-state-", "my-with-update-state-", readonly [], readonly []>;

package/{src/readme-examples/my-with-update-state.element.ts → dist/readme-examples/my-with-update-state.element.js}

@@ -1,6 +1,5 @@
-import {defineElement} from 'element-vir';
-import {html, listen} from '../index.js';
-
+import { defineElement } from 'element-vir';
+import { html, listen } from '../index.js';
 export const MyWithUpdateState = defineElement()({
     tagName: 'my-with-update-state',
     state() {
@@ -10,15 +9,15 @@ export const MyWithUpdateState = defineElement()({
              * Use "as" to create state properties that can be types other than the initial value's
              * type. This is particularly useful when, as below, the initial value is undefined.
              */
-            email: undefined as string | undefined,
+            email: undefined,
         };
     },
-    render({state, updateState}) {
-        return html`
+    render({ state, updateState }) {
+        return html `
             <span
                 ${listen('click', () => {
-                    updateState({username: 'new name!'});
-                })}
+            updateState({ username: 'new name!' });
+        })}
             >
                 Hello there ${state.username}!
             </span>

package/dist/readme-examples/require-declarative-element.d.ts

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

package/dist/readme-examples/require-declarative-element.js

@@ -0,0 +1,2 @@
+import { requireAllCustomElementsToBeDeclarativeElements } from '../index.js';
+requireAllCustomElementsToBeDeclarativeElements();

package/dist/require-declarative-element.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Set by {@link requireAllCustomElementsToBeDeclarativeElements} and read in the HTML tagged
+ * template function.
+ *
+ * @category Internal
+ */
+export declare let declarativeElementRequired: boolean;
+/**
+ * Calling this requires all custom element children to be declarative elements defined by
+ * element-vir.
+ *
+ * @category Util
+ */
+export declare function requireAllCustomElementsToBeDeclarativeElements(): void;

package/{src/require-declarative-element.ts → dist/require-declarative-element.js}

@@ -5,7 +5,6 @@
  * @category Internal
  */
 export let declarativeElementRequired = false;
-
 /**
  * Calling this requires all custom element children to be declarative elements defined by
  * element-vir.

package/{src/template-transforms/minimal-element-definition.ts → dist/template-transforms/minimal-element-definition.d.ts}

@@ -1,7 +1,5 @@
-import {check} from '@augment-vir/assert';
-import {type DeclarativeElementDefinitionOptions} from '../declarative-element/definition-options.js';
-import {type PropertyInitMapBase} from '../declarative-element/properties/element-properties.js';
-
+import { type DeclarativeElementDefinitionOptions } from '../declarative-element/definition-options.js';
+import { type PropertyInitMapBase } from '../declarative-element/properties/element-properties.js';
 /**
  * A minimal element definition used for interpolating element definitions into HTML templates with
  * a more generic type (to prevent insane circular dependencies).
@@ -12,9 +10,10 @@ export type MinimalElementDefinition<TagName extends string = string> = {
     tagName: TagName;
     elementOptions?: DeclarativeElementDefinitionOptions | undefined;
     /** This is used when wrapping interpolated raw tag name strings. */
-    tagInterpolationKey?: {tagName: string} | undefined;
+    tagInterpolationKey?: {
+        tagName: string;
+    } | undefined;
 };
-
 /**
  * A parent definition of {@link MinimalElementDefinition} with inputs also specified with allows the
  * `.assign()` method to be used inside of HTML templates.
@@ -31,27 +30,16 @@ export type MinimalDefinitionWithInputs<TagName extends string = string> = {
     definition: MinimalElementDefinition<TagName>;
     inputs: PropertyInitMapBase;
 };
-
 /**
  * Checks if the input is an instance of {@link MinimalDefinitionWithInputs}.
  *
  * @category Internal
  */
-export function isMinimalDefinitionWithInputs(
-    value: unknown,
-): value is MinimalDefinitionWithInputs {
-    return (
-        check.hasKey(value, '_elementVirIsMinimalDefinitionWithInputs') &&
-        !!value._elementVirIsMinimalDefinitionWithInputs
-    );
-}
-
+export declare function isMinimalDefinitionWithInputs(value: unknown): value is MinimalDefinitionWithInputs;
 /**
  * Checks if the input is an object that has a `tagName` property. Used inside of the HTML tagged
  * template functions for checking if interpolated values should be treated as element tags.
  *
  * @category Internal
  */
-export function hasTagName(value: unknown): value is MinimalElementDefinition {
-    return check.hasKey(value, 'tagName') && !!value.tagName && typeof value.tagName === 'string';
-}
+export declare function hasTagName(value: unknown): value is MinimalElementDefinition;

package/dist/template-transforms/minimal-element-definition.js

@@ -0,0 +1,19 @@
+import { check } from '@augment-vir/assert';
+/**
+ * Checks if the input is an instance of {@link MinimalDefinitionWithInputs}.
+ *
+ * @category Internal
+ */
+export function isMinimalDefinitionWithInputs(value) {
+    return (check.hasKey(value, '_elementVirIsMinimalDefinitionWithInputs') &&
+        !!value._elementVirIsMinimalDefinitionWithInputs);
+}
+/**
+ * Checks if the input is an object that has a `tagName` property. Used inside of the HTML tagged
+ * template functions for checking if interpolated values should be treated as element tags.
+ *
+ * @category Internal
+ */
+export function hasTagName(value) {
+    return check.hasKey(value, 'tagName') && !!value.tagName && typeof value.tagName === 'string';
+}

package/dist/template-transforms/nested-mapped-templates.d.ts

@@ -0,0 +1,6 @@
+import { type TemplateTransform } from './template-transform-type.js';
+export declare function getAlreadyMappedTemplate<PossibleValues>(templateStringsKey: TemplateStringsArray, values: PossibleValues[]): TemplateTransform | undefined;
+export declare function setMappedTemplate<PossibleValues>(templateStringsKey: TemplateStringsArray, values: PossibleValues[], valueToSet: TemplateTransform): {
+    result: boolean;
+    reason: string;
+};