element-vir 22.2.2 → 23.1.0

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

@@ -0,0 +1,46 @@
+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();
+    return data;
+}
+export const MyWithAsyncProp = defineElement()({
+    tagName: 'my-with-async-prop',
+    stateInitStatic: {
+        data: asyncProp({
+            async updateCallback({ endpoint }) {
+                return loadSomething(endpoint);
+            },
+        }),
+    },
+    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 `
+            Here's the data:
+            <br />
+            ${renderAsync(state.data, 'Loading...', (loadedData) => {
+            return html `
+                    Got the data: ${loadedData}
+                `;
+        })}
+            <br />
+            <button
+                ${listen('click', () => {
+            /** 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("../index.js").DeclarativeElementDefinition<"my-with-cleanup-callback", {}, {
+    intervalId: undefined | number;
+}, {}, "my-with-cleanup-callback-", "my-with-cleanup-callback-", readonly []>;

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

@@ -0,0 +1,23 @@
+import { defineElementNoInputs, html } from '../index.js';
+export const MyWithAssignmentCleanupCallback = defineElementNoInputs({
+    tagName: 'my-with-cleanup-callback',
+    stateInitStatic: {
+        intervalId: undefined,
+    },
+    init: ({ updateState }) => {
+        updateState({
+            intervalId: window.setInterval(() => console.info('hi'), 1000),
+        });
+    },
+    render() {
+        return html `
+            <h1>My App</h1>
+        `;
+    },
+    cleanup: ({ state, updateState }) => {
+        window.clearInterval(state.intervalId);
+        updateState({
+            intervalId: undefined,
+        });
+    },
+});

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

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

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

@@ -0,0 +1,24 @@
+import { css, defineElementNoInputs, html } from '../index.js';
+export const MyWithCssVars = defineElementNoInputs({
+    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 `
+        :host {
+            /*
+                Set CSS vars (or reference the name directly) via the ".name" property
+            */
+            ${cssVars['my-with-css-vars-my-var'].name}: yellow;
+            /*
+                Use CSS vars with the ".value" property. This includes a "var" wrapper and the
+                assigned fallback value (which in this case is 'blue').
+            */
+            color: ${cssVars['my-with-css-vars-my-var'].value};
+        }
+    `,
+    render() {
+        return html ``;
+    },
+});

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

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

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

@@ -0,0 +1,21 @@
+import { randomInteger } from '@augment-vir/common';
+import { defineElementNoInputs, html, listen } from '../index.js';
+import { MyCustomActionEvent } from './my-custom-action.event.js';
+export const MyWithCustomEvents = defineElementNoInputs({
+    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("../index.js").DeclarativeElementDefinition<"my-with-event-listening", {}, {
+    myNumber: number;
+}, {}, "my-with-event-listening-", "my-with-event-listening-", readonly []>;

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

@@ -0,0 +1,22 @@
+import { defineElementNoInputs, html, listen } from '../index.js';
+import { MyWithEvents } from './my-with-events.element.js';
+export const MyWithEventListening = defineElementNoInputs({
+    tagName: 'my-with-event-listening',
+    stateInitStatic: {
+        myNumber: -1,
+    },
+    render({ state, updateState }) {
+        return html `
+            <h1>My App</h1>
+            <${MyWithEvents}
+                ${listen(MyWithEvents.events.logoutClick, () => {
+            console.info('logout triggered');
+        })}
+                ${listen(MyWithEvents.events.randomNumber, (event) => {
+            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("../index.js").DeclarativeElementDefinition<"my-with-events", {}, {}, {
+    logoutClick: import("../index.js").DefineEvent<void>;
+    randomNumber: import("../index.js").DefineEvent<number>;
+}, "my-with-events-", "my-with-events-", readonly []>;

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

@@ -0,0 +1,19 @@
+import { randomInteger } from '@augment-vir/common';
+import { defineElementEvent, defineElementNoInputs, html, listen } from '../index.js';
+export const MyWithEvents = defineElementNoInputs({
+    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("../index.js").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 []>;

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

@@ -0,0 +1,39 @@
+import { css, defineElementNoInputs, html } from '../index.js';
+export const MyWithHostClassDefinition = defineElementNoInputs({
+    tagName: 'my-with-host-class-definition',
+    stateInitStatic: {
+        myProp: 'hello there',
+    },
+    hostClasses: {
+        /**
+         * Setting the value to false means this host class will never be automatically applied. It
+         * will simply be a static member on the element for manual application in consumers.
+         */
+        'my-with-host-class-definition-a': false,
+        /**
+         * 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 }) => {
+            return state.myProp === 'foo';
+        },
+    },
+    /**
+     * 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 `
+        ${hostClasses['my-with-host-class-definition-automatic'].selector} {
+            color: blue;
+        }
+
+        ${hostClasses['my-with-host-class-definition-a'].selector} {
+            color: red;
+        }
+    `,
+    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("../index.js").DeclarativeElementDefinition<"my-with-host-class-usage", {}, {}, {}, "my-with-host-class-usage-", "my-with-host-class-usage-", readonly []>;

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

@@ -0,0 +1,12 @@
+import { defineElementNoInputs, html } from '../index.js';
+import { MyWithHostClassDefinition } from './my-with-host-class-definition.element.js';
+export const MyWithHostClassUsage = defineElementNoInputs({
+    tagName: 'my-with-host-class-usage',
+    render() {
+        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 []>;

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("../index.js").DeclarativeElementDefinition<"my-with-on-dom-created", {}, {}, {}, "my-with-on-dom-created-", "my-with-on-dom-created-", readonly []>;

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

@@ -0,0 +1,16 @@
+import { defineElementNoInputs, html, onDomCreated } from '../index.js';
+export const MyWithOnDomCreated = defineElementNoInputs({
+    tagName: 'my-with-on-dom-created',
+    render() {
+        return html `
+            <span
+                ${onDomCreated((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("../index.js").DeclarativeElementDefinition<"my-with-on-resize", {}, {}, {}, "my-with-on-resize-", "my-with-on-resize-", readonly []>;

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

@@ -0,0 +1,17 @@
+import { defineElementNoInputs, html, onResize } from '../index.js';
+export const MyWithOnResize = defineElementNoInputs({
+    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 []>;

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("../index.js").DeclarativeElementDefinition<"my-with-styles-and-interpolated-selector", {}, {}, {}, "my-with-styles-and-interpolated-selector-", "my-with-styles-and-interpolated-selector-", readonly []>;

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { css, defineElementNoInputs, html } from '../index.js';
+export const MyWithStyles = defineElementNoInputs({
+    tagName: 'my-with-styles',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            font-family: sans-serif;
+        }
+
+        span + span {
+            margin-top: 16px;
+        }
+    `,
+    render() {
+        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("../index.js").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 []>;

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

@@ -0,0 +1,23 @@
+import { defineElementNoInputs, html, listen } from '../index.js';
+export const MyWithUpdateState = defineElementNoInputs({
+    tagName: 'my-with-update-state',
+    stateInitStatic: {
+        username: 'dev',
+        /**
+         * 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,
+    },
+    render({ state, updateState }) {
+        return html `
+            <span
+                ${listen('click', () => {
+            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

@@ -1,2 +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/dist/require-declarative-element.js

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

package/dist/template-transforms/minimal-element-definition.d.ts

@@ -1,5 +1,11 @@
-import { DeclarativeElementDefinitionOptions } from '../declarative-element/definition-options';
-import { PropertyInitMapBase } from '../declarative-element/properties/element-properties';
+import { DeclarativeElementDefinitionOptions } from '../declarative-element/definition-options.js';
+import { 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).
+ *
+ * @category Internal
+ */
 export type MinimalElementDefinition = {
     tagName: string;
     elementOptions?: DeclarativeElementDefinitionOptions | undefined;
@@ -8,10 +14,32 @@ export type MinimalElementDefinition = {
         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.
+ *
+ * @category Internal
+ */
 export type MinimalDefinitionWithInputs = {
+    /**
+     * This is what marks instance of this type as such. This does not use a symbol so it's
+     * compatible with multiple `element-vir` versions being installed at once (like if a dependency
+     * uses a different version).
+     */
     _elementVirIsMinimalDefinitionWithInputs: true;
     definition: MinimalElementDefinition;
     inputs: PropertyInitMapBase;
 };
+/**
+ * Checks if the input is an instance of {@link MinimalDefinitionWithInputs}.
+ *
+ * @category Internal
+ */
 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 declare function hasTagName(value: unknown): value is MinimalElementDefinition;

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

@@ -1,8 +1,19 @@
-import { typedHasProperty } from '@augment-vir/common';
+import { check } from '@augment-vir/assert';
+/**
+ * Checks if the input is an instance of {@link MinimalDefinitionWithInputs}.
+ *
+ * @category Internal
+ */
 export function isMinimalDefinitionWithInputs(value) {
-    return (typedHasProperty(value, '_elementVirIsMinimalDefinitionWithInputs') &&
+    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 (typedHasProperty(value, 'tagName') && !!value.tagName && typeof value.tagName === 'string');
+    return check.hasKey(value, 'tagName') && !!value.tagName && typeof value.tagName === 'string';
 }

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

@@ -1,4 +1,4 @@
-import { TemplateTransform } from './template-transform-type';
+import { 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;

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

@@ -1,5 +1,6 @@
-import { filterMap, isTruthy } from '@augment-vir/common';
-import { hasTagName, isMinimalDefinitionWithInputs } from './minimal-element-definition';
+import { check } from '@augment-vir/assert';
+import { filterMap } from '@augment-vir/common';
+import { hasTagName, isMinimalDefinitionWithInputs } from './minimal-element-definition.js';
 function extractElementKeys(values) {
     return filterMap(values, (value) => {
         if (isMinimalDefinitionWithInputs(value)) {
@@ -9,7 +10,7 @@ function extractElementKeys(values) {
             return value.tagInterpolationKey || value;
         }
         return undefined;
-    }, isTruthy);
+    }, check.isTruthy);
 }
 /**
  * The transformed templates are written to a map so that we can preserve reference equality between

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

@@ -1,4 +1,4 @@
-import { ArrayInsertion } from '../util/array';
+import { ArrayInsertion } from '../util/array.js';
 export type AllValueTransforms = {
     valueIndexDeletions: number[];
     valueInsertions: ArrayInsertion<unknown>[];

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

@@ -1,4 +1,4 @@
-import { TemplateTransform } from './template-transform-type';
+import { TemplateTransform } from './template-transform-type.js';
 export type ValueInsertion = {
     index: number;
     value: unknown;

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

@@ -1,14 +1,5 @@
-import { insertAndRemoveValues } from '../util/array';
-import { getAlreadyMappedTemplate, setMappedTemplate } from './nested-mapped-templates';
-/**
- * The transformed templates are written to a map so that we can preserve reference equality between
- * calls. Without maintaining reference equality between html`` calls, lit-element reconstructs all
- * of its children on every render.
- *
- * This is a WeakMap because we only care about the transformed array value as long as the original
- * template array key exists.
- */
-const transformedTemplateStrings = new WeakMap();
+import { insertAndRemoveValues } from '../util/array.js';
+import { getAlreadyMappedTemplate, setMappedTemplate } from './nested-mapped-templates.js';
 export function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
     const alreadyTransformedTemplateStrings = getAlreadyMappedTemplate(templateStringsKey, values);
     const templateTransform = alreadyTransformedTemplateStrings ?? fallbackTransform();
@@ -17,9 +8,6 @@ export function getTransformedTemplate(templateStringsKey, values, fallbackTrans
         if (!result.result) {
             throw new Error(`Failed to set template transform: ${result.reason}`);
         }
-        else {
-            transformedTemplateStrings.set(templateStringsKey, templateTransform);
-        }
     }
     const valueTransforms = templateTransform.valuesTransform(values);
     const transformedValuesArray = insertAndRemoveValues(values, valueTransforms.valueInsertions, valueTransforms.valueIndexDeletions);
@@ -38,13 +26,18 @@ export function transformTemplate(inputTemplateStrings, inputValues, transformVa
         const lastNewString = newStrings[lastNewStringsIndex];
         const currentValueIndex = currentTemplateStringIndex - 1;
         const currentValue = inputValues[currentValueIndex];
-        assertValidString && assertValidString(currentTemplateString);
+        if (assertValidString) {
+            assertValidString(currentTemplateString);
+        }
         let transformOutput = undefined;
         let extraValues = [];
         if (typeof lastNewString === 'string') {
             transformOutput = transformValue(lastNewString, currentTemplateString, currentValue);
             if (transformOutput) {
-                newStrings[lastNewStringsIndex] = lastNewString + transformOutput.replacement;
+                newStrings[lastNewStringsIndex] = [
+                    lastNewString,
+                    transformOutput.replacement,
+                ].join('');
                 valueIndexDeletions.push(currentValueIndex);
                 const getExtraValuesCallback = transformOutput.getExtraValues;
                 extraValues = getExtraValuesCallback ? getExtraValuesCallback(currentValue) : [];
@@ -74,10 +67,15 @@ export function transformTemplate(inputTemplateStrings, inputValues, transformVa
         if (!transformOutput) {
             newStrings.push(currentTemplateString);
         }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const currentRawLitString = inputTemplateStrings.raw[currentTemplateStringIndex];
         if (transformOutput) {
-            newRaws[lastNewStringsIndex] =
-                newRaws[lastNewStringsIndex] + transformOutput.replacement + currentRawLitString;
+            newRaws[lastNewStringsIndex] = [
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                newRaws[lastNewStringsIndex],
+                transformOutput.replacement,
+                currentRawLitString,
+            ].join('');
             if (extraValues.length) {
                 extraValues.forEach(() => {
                     newRaws.push('');
@@ -94,9 +92,7 @@ export function transformTemplate(inputTemplateStrings, inputValues, transformVa
     return {
         templateStrings: newTemplateStrings,
         valuesTransform(values) {
-            const insertions = valueTransforms
-                .map((transformCallback) => transformCallback(values))
-                .flat();
+            const insertions = valueTransforms.flatMap((transformCallback) => transformCallback(values));
             return {
                 valueIndexDeletions,
                 valueInsertions: insertions,

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

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