element-vir 26.14.4 → 26.14.5

package/README.md

@@ -188,7 +188,9 @@ export const MyWithUpdateState = defineElement()({
         return html`
             <span
                 ${listen('click', () => {
-                    updateState({username: 'new name!'});
+                    updateState({
+                        username: 'new name!',
+                    });
                 })}
             >
                 Hello there ${state.username}!
@@ -278,7 +280,14 @@ export const MyWithEvents = defineElement()({
             <button ${listen('click', () => dispatch(new events.logoutClick()))}>log out</button>
             <button
                 ${listen('click', () =>
-                    dispatch(new events.randomNumber(randomInteger({min: 0, max: 1_000_000}))),
+                    dispatch(
+                        new events.randomNumber(
+                            randomInteger({
+                                min: 0,
+                                max: 1_000_000,
+                            }),
+                        ),
+                    ),
                 )}
             >
                 generate random number
@@ -314,7 +323,9 @@ export const MyWithEventListening = defineElement()({
                     console.info('logout triggered');
                 })}
                 ${listen(MyWithEvents.events.randomNumber, (event) => {
-                    updateState({myNumber: event.detail});
+                    updateState({
+                        myNumber: event.detail,
+                    });
                 })}
             ></${MyWithEvents}>
             <span>${state.myNumber}</span>
@@ -360,7 +371,14 @@ export const MyWithCustomEvents = defineElement()({
             >
                 <div
                     ${listen('click', () => {
-                        dispatch(new MyCustomActionEvent(randomInteger({min: 0, max: 1_000_000})));
+                        dispatch(
+                            new MyCustomActionEvent(
+                                randomInteger({
+                                    min: 0,
+                                    max: 1_000_000,
+                                }),
+                            ),
+                        );
                     })}
                 ></div>
             </div>

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

@@ -50,7 +50,10 @@ export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs
     state?: (params: Omit<RenderParams<TagName, Inputs, any, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>, 'state' | 'updateState'>) => Extract<keyof State, keyof HTMLElement> extends never ? Extract<keyof State, keyof Inputs> extends never ? State : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<keyof State, keyof Inputs> extends string | number | bigint | boolean | null | undefined ? Extract<keyof State, keyof Inputs> : ''}` : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<keyof State, keyof HTMLElement>}`;
     /** Called as part of the first render call, before the first render call. */
     init?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds> | undefined;
+    /** Called whenever an element updates. This creates the element's HTML. */
     render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+    /** Called whenever an element is detached from the DOM. */
     cleanup?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds> | undefined;
+    /** Extra element definition options. */
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };

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

@@ -85,7 +85,10 @@ function internalDefineElement(init) {
     const slotNamesMap = createStringNameMap(init.tagName, 'slot', init.slotNames);
     const testIdsMap = createStringNameMap(init.tagName, 'test-id', init.testIds);
     const calculatedStyles = typeof init.styles === 'function'
-        ? init.styles(createStylesCallbackInput({ hostClassNames, cssVars }))
+        ? init.styles(createStylesCallbackInput({
+            hostClassNames,
+            cssVars,
+        }))
         : init.styles || css ``;
     const typedRenderCallback = init.render;
     function typedAssignCallback(...[inputs]) {
@@ -169,8 +172,12 @@ function internalDefineElement(init) {
                     inputs: renderParams.inputs,
                 });
                 this._lastRenderedProps = {
-                    inputs: { ...renderParams.inputs },
-                    state: { ...renderParams.state },
+                    inputs: {
+                        ...renderParams.inputs,
+                    },
+                    state: {
+                        ...renderParams.state,
+                    },
                 };
                 return renderResult;
             }

package/dist/declarative-element/properties/styles.js

@@ -29,7 +29,10 @@ export function applyHostClasses({ host, hostClassesInit, hostClassNames, state,
         const maybeCallback = hostClassesInit[hostClassKey];
         const hostClassName = hostClassNames[hostClassKey];
         if (typeof maybeCallback === 'function') {
-            const shouldApplyHostClass = maybeCallback({ state, inputs });
+            const shouldApplyHostClass = maybeCallback({
+                state,
+                inputs,
+            });
             if (shouldApplyHostClass) {
                 host.classList.add(hostClassName);
             }

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

@@ -13,7 +13,10 @@ export const MyWithCustomEvents = defineElement()({
             >
                 <div
                     ${listen('click', () => {
-            dispatch(new MyCustomActionEvent(randomInteger({ min: 0, max: 1_000_000 })));
+            dispatch(new MyCustomActionEvent(randomInteger({
+                min: 0,
+                max: 1_000_000,
+            })));
         })}
                 ></div>
             </div>

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

@@ -16,7 +16,9 @@ export const MyWithEventListening = defineElement()({
             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.js

@@ -11,7 +11,10 @@ export const MyWithEvents = defineElement()({
         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 }))))}
+                ${listen('click', () => dispatch(new events.randomNumber(randomInteger({
+            min: 0,
+            max: 1_000_000,
+        }))))}
             >
                 generate random number
             </button>

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

@@ -16,7 +16,9 @@ export const MyWithUpdateState = defineElement()({
         return html `
             <span
                 ${listen('click', () => {
-            updateState({ username: 'new name!' });
+            updateState({
+                username: 'new name!',
+            });
         })}
             >
                 Hello there ${state.username}!

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

@@ -39,13 +39,22 @@ export function setMappedTemplate(templateStringsKey, values, valueToSet) {
 function getNestedValues(map, keys, index = 0) {
     const { currentTemplateAndNested, reason } = getCurrentKeyAndValue(map, keys, index);
     if (!currentTemplateAndNested) {
-        return { value: currentTemplateAndNested, reason };
+        return {
+            value: currentTemplateAndNested,
+            reason,
+        };
     }
     if (index === keys.length - 1) {
-        return { value: currentTemplateAndNested, reason: `reached end of keys array` };
+        return {
+            value: currentTemplateAndNested,
+            reason: `reached end of keys array`,
+        };
     }
     if (!currentTemplateAndNested.nested) {
-        return { value: undefined, reason: `map at key index ${index} did not have nested maps` };
+        return {
+            value: undefined,
+            reason: `map at key index ${index} did not have nested maps`,
+        };
     }
     return getNestedValues(currentTemplateAndNested.nested, keys, index + 1);
 }
@@ -73,20 +82,33 @@ function getCurrentKeyAndValue(map, keys, index) {
             reason: `value at key at index ${index} was undefined`,
         };
     }
-    return { currentKey, currentTemplateAndNested, reason: `key and value exists` };
+    return {
+        currentKey,
+        currentTemplateAndNested,
+        reason: `key and value exists`,
+    };
 }
 function setNestedValues(map, keys, valueToSet, index = 0) {
     const { currentTemplateAndNested, currentKey, reason } = getCurrentKeyAndValue(map, keys, index);
     if (!currentKey) {
-        return { result: false, reason };
+        return {
+            result: false,
+            reason,
+        };
     }
-    const nestedAndTemplate = currentTemplateAndNested ?? { nested: undefined, template: undefined };
+    const nestedAndTemplate = currentTemplateAndNested ?? {
+        nested: undefined,
+        template: undefined,
+    };
     if (!currentTemplateAndNested) {
         map.set(currentKey, nestedAndTemplate);
     }
     if (index === keys.length - 1) {
         nestedAndTemplate.template = valueToSet;
-        return { result: true, reason: `set value at end of keys array` };
+        return {
+            result: true,
+            reason: `set value at end of keys array`,
+        };
     }
     const nestedWeakMap = nestedAndTemplate.nested ?? new WeakMap();
     if (!nestedAndTemplate.nested) {

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

@@ -16,7 +16,9 @@ export function mapHtmlValues(inputTemplateStrings, inputValues) {
                 const replacement = {
                     tagName: currentValue,
                     tagInterpolationKey: getOrSet(tagNameKeys, currentValue, () => {
-                        return { tagName: currentValue };
+                        return {
+                            tagName: currentValue,
+                        };
                     }),
                 };
                 return replacement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "26.14.4",
+    "version": "26.14.5",
     "keywords": [
         "custom",
         "web",
@@ -46,7 +46,7 @@
         "lit-css-vars": "^3.5.0",
         "lit-html": "^3.3.2",
         "object-shape-tester": "^6.11.0",
-        "observavir": "^2.3.1",
+        "observavir": "^2.3.2",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {