element-vir 26.12.0 → 26.12.1

package/dist/declarative-element/directives/test-id.directive.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Assigns the given id as a test id attribute to the attached element.
+ *
+ * @category Test
+ * @example
+ *
+ * ```ts
+ * import {html, defineElement, testId} from 'element-vir';
+ *
+ * const MyElement = defineElement()({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div ${testId('my-test')}>Some div</div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export declare const testId: (this: void, attributeValue: string) => import("lit-html/directive.js").DirectiveResult<{
+    new (partInfo: import("lit-html/directive.js").PartInfo): {
+        readonly element: Element;
+        render(attributeValue: string): symbol;
+        get _$isConnected(): boolean;
+        update(_part: import("lit-html").Part, props: Array<unknown>): unknown;
+    };
+}>;
+/**
+ * Construct an attribute selector for the given test id.
+ *
+ * @category Test
+ * @example
+ *
+ * ```ts
+ * import {html, selectTestId} from 'element-vir';
+ * import {testWeb} from '@augment-vir/test';
+ * import {assert} from '@augment-vir/assert';
+ *
+ * const instance = testWeb.render(html`
+ *     <${MyElement}></${MyElement}>
+ * `);
+ * assert.instanceOf(instance, MyElement);
+ * instance.shadowRoot.querySelector(selectTestId('my-test'));
+ * ```
+ */
+export declare const testIdSelector: (this: void, attributeValue: string) => string;
+/**
+ * The test id attribute name.
+ *
+ * @category Test
+ */
+export declare const testIdAttributeName: string;

package/{src/declarative-element/directives/test-id.directive.ts → dist/declarative-element/directives/test-id.directive.js}

@@ -1,8 +1,5 @@
-import {createAttributeDirective} from './create-attribute-directive.js';
-
-const {attributeDirective, attributeSelector, attributeName} =
-    createAttributeDirective('data-test-id');
-
+import { createAttributeDirective } from './create-attribute-directive.js';
+const { attributeDirective, attributeSelector, attributeName } = createAttributeDirective('data-test-id');
 /**
  * Assigns the given id as a test id attribute to the attached element.
  *
@@ -23,7 +20,6 @@ const {attributeDirective, attributeSelector, attributeName} =
  * ```
  */
 export const testId = attributeDirective;
-
 /**
  * Construct an attribute selector for the given test id.
  *
@@ -43,7 +39,6 @@ export const testId = attributeDirective;
  * ```
  */
 export const testIdSelector = attributeSelector;
-
 /**
  * The test id attribute name.
  *

package/dist/declarative-element/has-declarative-element-parent.d.ts

@@ -0,0 +1 @@
+export declare function hasDeclarativeElementParent(input: Element): boolean;

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

@@ -1,19 +1,16 @@
-import {DeclarativeElement} from './declarative-element.js';
-
-export function hasDeclarativeElementParent(input: Element): boolean {
+import { DeclarativeElement } from './declarative-element.js';
+export function hasDeclarativeElementParent(input) {
     const rootNode = input.getRootNode();
-
     if (!(rootNode instanceof ShadowRoot)) {
         // declarative elements all use shadow DOM, so if a shadow root doesn't exist then we're not
         // in a declarative element.
         return false;
     }
-
     const host = rootNode.host;
-
     if (host instanceof DeclarativeElement) {
         return true;
-    } else {
+    }
+    else {
         return hasDeclarativeElementParent(host);
     }
 }

package/dist/declarative-element/is-declarative-element-definition.d.ts

@@ -0,0 +1,17 @@
+import { type DeclarativeElementDefinition } from './declarative-element.js';
+/**
+ * Asserts that the given input is a declarative element definition.
+ *
+ * @category Util
+ * @see
+ * - {@link isDeclarativeElementDefinition}
+ */
+export declare function assertDeclarativeElementDefinition(input: unknown, failMessage?: string | undefined): asserts input is DeclarativeElementDefinition;
+/**
+ * Checks that the given input is a declarative element definition.
+ *
+ * @category Util
+ * @see
+ * - {@link assertDeclarativeElementDefinition}
+ */
+export declare function isDeclarativeElementDefinition(input: unknown): input is DeclarativeElementDefinition;

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

@@ -1,10 +1,5 @@
-import {AssertionError, check} from '@augment-vir/assert';
-import {getObjectTypedKeys, wrapInTry} from '@augment-vir/common';
-import {
-    type DeclarativeElementDefinition,
-    type StaticDeclarativeElementProperties,
-} from './declarative-element.js';
-
+import { AssertionError, check } from '@augment-vir/assert';
+import { getObjectTypedKeys, wrapInTry } from '@augment-vir/common';
 const expectedStaticProperties = getObjectTypedKeys({
     assign: '',
     assignedInputs: '',
@@ -21,10 +16,7 @@ const expectedStaticProperties = getObjectTypedKeys({
     styles: '',
     tagName: '',
     UpdateStateType: '',
-} satisfies Readonly<
-    Record<keyof StaticDeclarativeElementProperties<any, any, any, any, any, any, any, any>, ''>
->);
-
+});
 /**
  * Asserts that the given input is a declarative element definition.
  *
@@ -32,10 +24,7 @@ const expectedStaticProperties = getObjectTypedKeys({
  * @see
  * - {@link isDeclarativeElementDefinition}
  */
-export function assertDeclarativeElementDefinition(
-    input: unknown,
-    failMessage?: string | undefined,
-): asserts input is DeclarativeElementDefinition {
+export function assertDeclarativeElementDefinition(input, failMessage) {
     if (!check.isFunction(input)) {
         throw new AssertionError('Input is not a declarative element constructor', failMessage);
     }
@@ -45,7 +34,6 @@ export function assertDeclarativeElementDefinition(
         }
     });
 }
-
 /**
  * Checks that the given input is a declarative element definition.
  *
@@ -53,16 +41,11 @@ export function assertDeclarativeElementDefinition(
  * @see
  * - {@link assertDeclarativeElementDefinition}
  */
-export function isDeclarativeElementDefinition(
-    input: unknown,
-): input is DeclarativeElementDefinition {
-    return wrapInTry(
-        () => {
-            assertDeclarativeElementDefinition(input);
-            return true;
-        },
-        {
-            fallbackValue: false,
-        },
-    );
+export function isDeclarativeElementDefinition(input) {
+    return wrapInTry(() => {
+        assertDeclarativeElementDefinition(input);
+        return true;
+    }, {
+        fallbackValue: false,
+    });
 }

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

@@ -0,0 +1,15 @@
+import { type DeclarativeElement } from './declarative-element.js';
+/**
+ * Checks if the input is an instance of a DeclarativeElement, the super class of all custom
+ * elements defined with element-vir.
+ *
+ * @category Util
+ */
+export declare function isDeclarativeElement(input: unknown): input is DeclarativeElement;
+/**
+ * Checks if the input is an instance of a DeclarativeElement, the super class of all custom
+ * elements defined with element-vir.
+ *
+ * @category Util
+ */
+export declare function assertIsDeclarativeElement(input: unknown): asserts input is DeclarativeElement;

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

@@ -1,14 +1,12 @@
-import {check} from '@augment-vir/assert';
-import {type DeclarativeElement} from './declarative-element.js';
-
+import { check } from '@augment-vir/assert';
 /**
  * Checks if the input is an instance of a DeclarativeElement, the super class of all custom
  * elements defined with element-vir.
  *
  * @category Util
  */
-export function isDeclarativeElement(input: unknown): input is DeclarativeElement {
-    const markerProperties: ReadonlyArray<keyof DeclarativeElement> = [
+export function isDeclarativeElement(input) {
+    const markerProperties = [
         'instanceInputs',
         'instanceState',
         'definition',
@@ -21,13 +19,9 @@ export function isDeclarativeElement(input: unknown): input is DeclarativeElemen
  *
  * @category Util
  */
-export function assertIsDeclarativeElement(input: unknown): asserts input is DeclarativeElement {
+export function assertIsDeclarativeElement(input) {
     if (!isDeclarativeElement(input)) {
         console.error('this is not a declarative element:', input);
-        throw new Error(
-            `${String(
-                check.hasKey(input, 'tagName') ? input.tagName : input,
-            )} is not a declarative element.`,
-        );
+        throw new Error(`${String(check.hasKey(input, 'tagName') ? input.tagName : input)} is not a declarative element.`);
     }
 }

package/dist/declarative-element/properties/assign-inputs.d.ts

@@ -0,0 +1 @@
+export declare function assignInputs(element: Element, inputs: object): void;

package/dist/declarative-element/properties/assign-inputs.js

@@ -0,0 +1,25 @@
+import { getObjectTypedKeys } from '@augment-vir/common';
+export function assignInputs(element, inputs) {
+    const instanceState = element.instanceState;
+    getObjectTypedKeys(inputs).forEach((newInputKey) => {
+        if (instanceState && newInputKey in instanceState) {
+            throw new Error(`Cannot set input '${String(newInputKey)}' on '${element.tagName}'. '${element.tagName}' already has a state property with the same name.`);
+        }
+        if ('instanceInputs' in element) {
+            element.instanceInputs[newInputKey] =
+                inputs[newInputKey];
+        }
+        else {
+            element[newInputKey] = inputs[newInputKey];
+        }
+    });
+    /** Wipe out all inputs that weren't set to undefined (as expected) */
+    if ('instanceInputs' in element) {
+        getObjectTypedKeys(element.instanceInputs).forEach((existingKey) => {
+            if (!(existingKey in inputs)) {
+                element.instanceInputs[existingKey] =
+                    undefined;
+            }
+        });
+    }
+}

package/dist/declarative-element/properties/css-vars.d.ts

@@ -0,0 +1,16 @@
+import { type Values } from '@augment-vir/common';
+import { type CssVarDefinitions, type CssVarsSetup } from 'lit-css-vars';
+import { type CustomElementTagName } from '../custom-tag-name.js';
+import { type BaseStringName } from './string-names.js';
+/**
+ * Base type for a declarative element definition's CSS vars.
+ *
+ * @category Internal
+ */
+export type CssVarsInitMap<ElementTagName extends CustomElementTagName, CssVarKeys extends BaseStringName<ElementTagName>> = Readonly<Record<CssVarKeys, Values<CssVarsSetup>>>;
+/**
+ * CSS vars ready for use within a declarative element's `render` or `styles` method.
+ *
+ * @category Internal
+ */
+export type CssVars<ElementTagName extends CustomElementTagName, CssVarKeys extends BaseStringName<ElementTagName>> = CssVarDefinitions<CssVarsInitMap<ElementTagName, CssVarKeys>>;

package/dist/declarative-element/properties/css-vars.js

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

package/dist/declarative-element/properties/element-events.d.ts

@@ -0,0 +1,65 @@
+import { type DefinedTypedEvent, type DefineEvent, type TypedEvent } from '../../typed-event/typed-event.js';
+import { type CustomElementTagName } from '../custom-tag-name.js';
+/**
+ * Base type for defining element events inside of an element definition.
+ *
+ * @category Internal
+ */
+export type EventsInitMap = Record<string, DefineEvent<any>>;
+/**
+ * Used to define element events, with a type.
+ *
+ * @category Element Definition
+ * @example
+ *
+ * ```ts
+ * import {html, defineElement, defineElementEvent, listen} from 'element-vir';
+ *
+ * const MyElement = defineElement()({
+ *     tagName: 'my-element',
+ *     events: {
+ *         myOutput: defineElementEvent<number>(),
+ *     },
+ *     render({events, dispatch}) {
+ *         return html`
+ *             <div
+ *                 ${listen('click', () => {
+ *                     dispatch(new events.myOutput(1));
+ *                 })}
+ *             >
+ *                 Some div
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export declare function defineElementEvent<EventDetailGeneric>(): DefineEvent<EventDetailGeneric>;
+/**
+ * Extracts the detail type of the given event name from the given event init map.
+ *
+ * @category Internal
+ */
+export type EventInitMapEventDetailExtractor<EventTypeNameGeneric extends keyof EventsInitGeneric, EventsInitGeneric extends EventsInitMap> = EventsInitGeneric[EventTypeNameGeneric] extends DefineEvent<infer Detail> ? Detail : never;
+/**
+ * Maps the given element tag name and map of event names to their run-time event type strings.
+ *
+ * @category Internal
+ */
+export type EventDescriptorMap<TagName extends CustomElementTagName, EventsInitGeneric extends EventsInitMap> = {
+    [CurrentEventTypeName in keyof EventsInitGeneric]: DefinedTypedEvent<CurrentEventTypeName extends string ? `${TagName}-${CurrentEventTypeName}` : never, EventInitMapEventDetailExtractor<CurrentEventTypeName, EventsInitGeneric>>;
+};
+/**
+ * Extract the event detail type from a {@link TypedEvent}, {@link DefinedTypedEvent}, or
+ * `CustomEvent.
+ *
+ * @category Internal
+ */
+export type EventDetail<ElementEvent extends TypedEvent<any, any> | DefinedTypedEvent<any, any> | CustomEvent> = ElementEvent extends TypedEvent<string, infer Detail> ? Detail : ElementEvent extends DefinedTypedEvent<any, infer Detail> ? Detail : ElementEvent extends CustomEvent<infer Detail> ? Detail : 'TYPE ERROR: failed to extract event detail type';
+/**
+ * Maps an element definition initialization's tag name and event map to a map of ready-to-construct
+ * event classes. This also verifies that the input event init map has valid keys.
+ *
+ * @category Internal
+ */
+export declare function createEventDescriptorMap<TagName extends CustomElementTagName, EventsInitGeneric extends EventsInitMap>(tagName: CustomElementTagName, eventsInit: EventsInitGeneric | undefined): EventDescriptorMap<TagName, EventsInitGeneric>;

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

@@ -0,0 +1,62 @@
+import { defineTypedEvent, } from '../../typed-event/typed-event.js';
+/**
+ * Used to define element events, with a type.
+ *
+ * @category Element Definition
+ * @example
+ *
+ * ```ts
+ * import {html, defineElement, defineElementEvent, listen} from 'element-vir';
+ *
+ * const MyElement = defineElement()({
+ *     tagName: 'my-element',
+ *     events: {
+ *         myOutput: defineElementEvent<number>(),
+ *     },
+ *     render({events, dispatch}) {
+ *         return html`
+ *             <div
+ *                 ${listen('click', () => {
+ *                     dispatch(new events.myOutput(1));
+ *                 })}
+ *             >
+ *                 Some div
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export function defineElementEvent() {
+    return defineTypedEvent();
+}
+/**
+ * Maps an element definition initialization's tag name and event map to a map of ready-to-construct
+ * event classes. This also verifies that the input event init map has valid keys.
+ *
+ * @category Internal
+ */
+export function createEventDescriptorMap(tagName, eventsInit) {
+    if (!eventsInit) {
+        return {};
+    }
+    return (Object.keys(eventsInit)
+        /** Verify event keys. */
+        .filter((currentElementEventKey) => {
+        if (typeof currentElementEventKey !== 'string') {
+            throw new TypeError(`Expected event key of type string but got type '${typeof currentElementEventKey}' for key ${String(currentElementEventKey)}`);
+        }
+        else if (currentElementEventKey === '') {
+            throw new Error(`Got empty string for events key.`);
+        }
+        return true;
+    })
+        .reduce((accum, currentElementEventKey) => {
+        const eventObject = defineTypedEvent()([
+            tagName,
+            currentElementEventKey,
+        ].join('-'));
+        accum[currentElementEventKey] = eventObject;
+        return accum;
+    }, {}));
+}

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

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

package/dist/declarative-element/properties/host-classes.d.ts

@@ -0,0 +1,36 @@
+import { type CustomElementTagName } from '../custom-tag-name.js';
+import { type PropertyInitMapBase } from './element-properties.js';
+import { type BaseStringName } from './string-names.js';
+import { type WithTagName } from './tag-name.js';
+/**
+ * Base init map for defining host classes in an element definition.
+ *
+ * @category Internal
+ */
+export type HostClassesInitMap<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase> = Record<HostClassKeys, 
+/**
+ * Callback to determine when host class should be enabled (based on current inputs and state),
+ * or just undefined to mark that this host class name will only be manually applied.
+ */
+((inputs: {
+    state: Readonly<State>;
+    inputs: Readonly<Inputs>;
+}) => boolean) | false>;
+/**
+ * Creates a mapping of host class keys (as defined in an element definition) to their runtime host
+ * class names.
+ *
+ * @category Internal
+ */
+export type HostClassNamesMap<TagName extends string, HostClassKeys extends string> = Record<HostClassKeys, WithTagName<TagName, string>>;
+/**
+ * Maps element definition host class definitions to their runtime host class name equivalents.
+ *
+ * @category Internal
+ */
+export declare function createHostClassNamesMap<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, HostClassesInit extends HostClassesInitMap<TagName, HostClassKeys, 
+/**
+ * We can use any here because we don't care what the state or input names are, we just care
+ * what the host class names are
+ */
+any, any>>(hostClassesInit?: HostClassesInit): HostClassNamesMap<TagName, HostClassKeys>;

package/dist/declarative-element/properties/host-classes.js

@@ -0,0 +1,16 @@
+import { mapObjectValues } from '@augment-vir/common';
+/**
+ * Maps element definition host class definitions to their runtime host class name equivalents.
+ *
+ * @category Internal
+ */
+export function createHostClassNamesMap(hostClassesInit) {
+    if (hostClassesInit) {
+        return mapObjectValues(hostClassesInit, (key) => {
+            return key;
+        });
+    }
+    else {
+        return {};
+    }
+}

package/dist/declarative-element/properties/property-proxy.d.ts

@@ -0,0 +1,22 @@
+import { type ObservableListener } from 'observavir';
+import { type DeclarativeElement } from '../declarative-element.js';
+import { type PropertyInitMapBase } from './element-properties.js';
+/**
+ * Used for a map of all observables registered to an element instance.
+ *
+ * @category Internal
+ */
+export type ObservableListenerMap<OriginalPropertyMap extends PropertyInitMapBase> = Partial<Record<keyof OriginalPropertyMap, ObservableListener<any> | undefined>>;
+/**
+ * Binds the given property key as a reactive property on the given element.
+ *
+ * @category Internal
+ */
+export declare function bindReactiveProperty(element: HTMLElement, propertyKey: PropertyKey): void;
+/**
+ * Creates an internal proxy for setting inputs and state properties and then updating them on the
+ * element itself so they will trigger lit's change detection.
+ *
+ * @category Internal
+ */
+export declare function createElementPropertyProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, shouldAlreadyExist: boolean): PropertyInitGeneric;

package/{src/declarative-element/properties/property-proxy.ts → dist/declarative-element/properties/property-proxy.js}

@@ -1,85 +1,54 @@
-import {type ObservableListener, isObservableBase} from 'observavir';
-import {property} from '../../lit-exports/base-lit-exports.js';
-import {type DeclarativeElement} from '../declarative-element.js';
-import {type PropertyInitMapBase} from './element-properties.js';
-
-/**
- * Used for a map of all observables registered to an element instance.
- *
- * @category Internal
- */
-export type ObservableListenerMap<OriginalPropertyMap extends PropertyInitMapBase> = Partial<
-    Record<keyof OriginalPropertyMap, ObservableListener<any> | undefined>
->;
-
+import { isObservableBase } from 'observavir';
+import { property } from '../../lit-exports/base-lit-exports.js';
 /**
  * Binds the given property key as a reactive property on the given element.
  *
  * @category Internal
  */
-export function bindReactiveProperty(element: HTMLElement, propertyKey: PropertyKey) {
+export function bindReactiveProperty(element, propertyKey) {
     if (!(propertyKey in element)) {
         property()(element, propertyKey);
     }
 }
-
-function assertValidPropertyName<PropertyInitGeneric extends PropertyInitMapBase>(
-    propKey: any,
-    element: DeclarativeElement,
-    elementTagName: string,
-): asserts propKey is keyof PropertyInitGeneric {
+function assertValidPropertyName(propKey, element, elementTagName) {
     if (typeof propKey !== 'string' && typeof propKey !== 'number' && typeof propKey !== 'symbol') {
-        throw new TypeError(
-            `Property name must be a string, got type '${typeof propKey}' from: '${String(
-                propKey,
-            )}' for '${elementTagName.toLowerCase()}'`,
-        );
+        throw new TypeError(`Property name must be a string, got type '${typeof propKey}' from: '${String(propKey)}' for '${elementTagName.toLowerCase()}'`);
     }
     if (!(propKey in element)) {
-        throw new Error(
-            `Property '${String(propKey)}' does not exist on '${elementTagName.toLowerCase()}'.`,
-        );
+        throw new Error(`Property '${String(propKey)}' does not exist on '${elementTagName.toLowerCase()}'.`);
     }
 }
-
 /**
  * Creates an internal proxy for setting inputs and state properties and then updating them on the
  * element itself so they will trigger lit's change detection.
  *
  * @category Internal
  */
-export function createElementPropertyProxy<PropertyInitGeneric extends PropertyInitMapBase>(
-    element: DeclarativeElement,
-    shouldAlreadyExist: boolean,
-): PropertyInitGeneric {
+export function createElementPropertyProxy(element, shouldAlreadyExist) {
     /**
      * Lit element updates state and inputs by setting them directly on the element, so we must do
      * that here. DeclarativeElement's types, however, do not expose this behavior, so we add that
      * back in here.
      */
-    const elementAsProps = element as DeclarativeElement & PropertyInitGeneric;
-
-    function verifyProperty(propertyKey: PropertyKey) {
+    const elementAsProps = element;
+    function verifyProperty(propertyKey) {
         if (shouldAlreadyExist) {
             assertValidPropertyName(propertyKey, element, element.tagName);
-        } else {
+        }
+        else {
             bindReactiveProperty(element, propertyKey);
         }
     }
-
-    function valueGetter(target: any, propertyKey: keyof PropertyInitGeneric | symbol) {
+    function valueGetter(target, propertyKey) {
         verifyProperty(propertyKey);
-
         return elementAsProps[propertyKey];
     }
-
-    const propsProxy = new Proxy({} as Record<PropertyKey, unknown>, {
+    const propsProxy = new Proxy({}, {
         get: valueGetter,
-        set(target, propertyKey: keyof PropertyInitGeneric | symbol, newValue) {
+        set(target, propertyKey, newValue) {
             verifyProperty(propertyKey);
             const oldValue = elementAsProps[propertyKey];
-
-            function setValueOnElement(value: typeof newValue) {
+            function setValueOnElement(value) {
                 /**
                  * We need to at least set the property on target so we can detect it in "ownKeys"
                  * and "getOwnPropertyDescriptor". We don't need duplicates of the values stored in
@@ -88,33 +57,29 @@ export function createElementPropertyProxy<PropertyInitGeneric extends PropertyI
                 target[propertyKey] = value;
                 elementAsProps[propertyKey] = value;
             }
-
-            const existingPropertyListener: ObservableListener<any> | undefined =
-                element.observablePropertyListenerMap[propertyKey];
-
+            const existingPropertyListener = element.observablePropertyListenerMap[propertyKey];
             if (oldValue !== newValue && isObservableBase(oldValue) && existingPropertyListener) {
                 /** Stop listening to the old value now that we have a new value */
                 oldValue.removeListener(existingPropertyListener);
             }
-
             if (isObservableBase(newValue)) {
                 /** If we're using an existing observable property */
                 if (existingPropertyListener) {
                     newValue.listen(false, existingPropertyListener);
-                } else {
+                }
+                else {
                     function newListener() {
                         element.requestUpdate();
                     }
                     element.observablePropertyListenerMap[propertyKey] = newListener;
                     newValue.listen(false, newListener);
                 }
-            } else if (isObservableBase(oldValue)) {
+            }
+            else if (isObservableBase(oldValue)) {
                 /** Clear out old listener that is no longer used. */
                 element.observablePropertyListenerMap[propertyKey] = undefined;
             }
-
             setValueOnElement(newValue);
-
             return true;
         },
         ownKeys(target) {
@@ -130,13 +95,11 @@ export function createElementPropertyProxy<PropertyInitGeneric extends PropertyI
                     enumerable: true,
                 };
             }
-
             return undefined;
         },
         has(target, propertyName) {
             return Reflect.has(target, propertyName);
         },
     });
-
-    return propsProxy as PropertyInitGeneric;
+    return propsProxy;
 }