element-vir 22.2.1 → 23.0.0

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

@@ -1,34 +1,50 @@
-var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-};
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import { check } from '@augment-vir/assert';
 import { ensureErrorAndPrependMessage, extractErrorMessage, getObjectTypedKeys, kebabCaseToCamelCase, } from '@augment-vir/common';
 import { defineCssVars } from 'lit-css-vars';
-import { hasProperty, isRunTimeType } from 'run-time-assertions';
-import { css } from '../template-transforms/vir-css/vir-css';
-import { DeclarativeElement, } from './declarative-element';
-import { defaultDeclarativeElementDefinitionOptions, } from './definition-options';
-import { hasDeclarativeElementParent } from './has-declarative-element-parent';
-import { assignInputs } from './properties/assign-inputs';
-import { assertValidCssProperties } from './properties/css-properties';
-import { createEventDescriptorMap, } from './properties/element-events';
-import { createHostClassNamesMap } from './properties/host-classes';
-import { bindReactiveProperty, createElementPropertyProxy } from './properties/property-proxy';
-import { applyHostClasses, hostClassNamesToStylesInput } from './properties/styles';
-import { createRenderParams } from './render-callback';
-import { createSlotNamesMap } from './slot-names';
+import { css } from '../template-transforms/vir-css/vir-css.js';
+import { DeclarativeElement, } from './declarative-element.js';
+import { defaultDeclarativeElementDefinitionOptions, } from './definition-options.js';
+import { hasDeclarativeElementParent } from './has-declarative-element-parent.js';
+import { assignInputs } from './properties/assign-inputs.js';
+import { assertValidCssProperties } from './properties/css-properties.js';
+import { createEventDescriptorMap, } from './properties/element-events.js';
+import { createHostClassNamesMap } from './properties/host-classes.js';
+import { bindReactiveProperty, createElementPropertyProxy } from './properties/property-proxy.js';
+import { applyHostClasses, createStylesCallbackInput } from './properties/styles.js';
+import { createRenderParams } from './render-callback.js';
+import { createSlotNamesMap } from './slot-names.js';
+/**
+ * Defines an element without any inputs.
+ *
+ * @category Element Definition
+ * @example
+ *
+ * ```ts
+ * import {defineElementNoInputs, html} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <p>hi</p>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
 export function defineElementNoInputs(initInput) {
-    var _a;
     /** This as cast is safe only because of the following run-time type check. */
     const init = initInput;
-    if (!isRunTimeType(init, 'object')) {
-        throw new Error('Cannot define element with non-object init: ${init}');
+    if (!check.isObject(init)) {
+        throw new TypeError('Cannot define element with non-object init: ${init}');
     }
-    if (!isRunTimeType(init.tagName, 'string')) {
-        throw new Error('Missing valid tagName (expected a string).');
+    if (!check.isString(init.tagName)) {
+        throw new TypeError('Missing valid tagName (expected a string).');
     }
-    if (!init.renderCallback || typeof init.renderCallback === 'string') {
-        throw new Error(`Failed to define element '${init.tagName}': renderCallback is not a function`);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!init.render || typeof init.render === 'string') {
+        throw new Error(`Failed to define element '${init.tagName}': render is not a function`);
     }
     const elementOptions = {
         ...defaultDeclarativeElementDefinitionOptions,
@@ -51,9 +67,9 @@ export function defineElementNoInputs(initInput) {
     const cssVars = (init.cssVars ? defineCssVars(init.cssVars) : {});
     const slotNamesMap = createSlotNamesMap(init.slotNames);
     const calculatedStyles = typeof init.styles === 'function'
-        ? init.styles(hostClassNamesToStylesInput({ hostClassNames, cssVars }))
+        ? init.styles(createStylesCallbackInput({ hostClassNames, cssVars }))
         : init.styles || css ``;
-    const typedRenderCallback = init.renderCallback;
+    const typedRenderCallback = init.render;
     function typedAssignCallback(...[inputs]) {
         const wrappedDefinition = {
             _elementVirIsMinimalDefinitionWithInputs: true,
@@ -62,240 +78,127 @@ export function defineElementNoInputs(initInput) {
         };
         return wrappedDefinition;
     }
-    const anonymousClass = (_a = class extends DeclarativeElement {
-            createRenderParams() {
-                return createRenderParams({ element: this, eventsMap, cssVars, slotNamesMap });
-            }
-            get instanceType() {
-                throw new Error(`"instanceType" was called on ${init.tagName} as a value but it is only for types.`);
-            }
-            static get inputsType() {
-                throw new Error(`"inputsType" was called on ${init.tagName} as a value but it is only for types.`);
-            }
-            static get stateType() {
-                throw new Error(`"stateType" was called on ${init.tagName} as a value but it is only for types.`);
-            }
-            render() {
-                this._internalRenderCount++;
-                try {
-                    if (
-                    // This ignores elements at the root of a page, as they can't receive inputs from
-                    // other elements (cause they have no custom element ancestors).
-                    hasDeclarativeElementParent(this) &&
-                        !this._haveInputsBeenSet &&
-                        !elementOptions.ignoreUnsetInputs) {
-                        console.warn(this, `${init.tagName} got rendered before its input object was set. This was most likely caused by forgetting to use '.assign()' on its opening tag. If no inputs are intended, use '${defineElementNoInputs.name}' to define ${init.tagName}.`);
-                    }
-                    this._hasRendered = true;
-                    const renderParams = this.createRenderParams();
-                    if (!this._initCalled && init.initCallback) {
-                        this._initCalled = true;
-                        if (init.initCallback(renderParams) instanceof Promise) {
-                            throw new Error('initCallback cannot be asynchronous');
-                        }
-                    }
-                    const renderResult = typedRenderCallback(renderParams);
-                    if (renderResult instanceof Promise) {
-                        throw new Error('renderCallback cannot be asynchronous');
-                    }
-                    applyHostClasses({
-                        host: renderParams.host,
-                        hostClassesInit: init.hostClasses,
-                        hostClassNames,
-                        state: renderParams.state,
-                        inputs: renderParams.inputs,
-                    });
-                    this._lastRenderedProps = {
-                        inputs: { ...renderParams.inputs },
-                        state: { ...renderParams.state },
-                    };
-                    return renderResult;
-                }
-                catch (caught) {
-                    const error = ensureErrorAndPrependMessage(caught, `Failed to render ${init.tagName}`);
-                    console.error(error);
-                    this._lastRenderError = error;
-                    return extractErrorMessage(error);
+    const anonymousClass = class extends DeclarativeElement {
+        static elementOptions = elementOptions;
+        static tagName = init.tagName;
+        static styles = calculatedStyles;
+        _lastRenderError = undefined;
+        _internalRenderCount = 0;
+        createRenderParams() {
+            return createRenderParams({ element: this, eventsMap, cssVars, slotNamesMap });
+        }
+        static assign = typedAssignCallback;
+        static events = eventsMap;
+        static render = typedRenderCallback;
+        static hostClasses = hostClassNames;
+        static cssVars = cssVars;
+        static init = init;
+        static slotNames = slotNamesMap;
+        static stateInitStatic = init.stateInitStatic;
+        get instanceType() {
+            throw new Error(`"instanceType" was called on ${init.tagName} as a value but it is only for types.`);
+        }
+        static get inputsType() {
+            throw new Error(`"inputsType" was called on ${init.tagName} as a value but it is only for types.`);
+        }
+        static get stateType() {
+            throw new Error(`"stateType" was called on ${init.tagName} as a value but it is only for types.`);
+        }
+        _initCalled = false;
+        _hasRendered = false;
+        _lastRenderedProps = undefined;
+        _haveInputsBeenSet = false;
+        render() {
+            this._internalRenderCount++;
+            try {
+                if (
+                // This ignores elements at the root of a page, as they can't receive inputs from
+                // other elements (cause they have no custom element ancestors).
+                hasDeclarativeElementParent(this) &&
+                    !this._haveInputsBeenSet &&
+                    !elementOptions.ignoreUnsetInputs) {
+                    console.warn(this, `${init.tagName} got rendered before its input object was set. This was most likely caused by forgetting to use '.assign()' on its opening tag. If no inputs are intended, use '${defineElementNoInputs.name}' to define ${init.tagName}.`);
                 }
-            }
-            connectedCallback() {
-                super.connectedCallback();
-                if (this._hasRendered && !this._initCalled && init.initCallback) {
+                this._hasRendered = true;
+                const renderParams = this.createRenderParams();
+                if (!this._initCalled && init.init) {
                     this._initCalled = true;
-                    const renderParams = this.createRenderParams();
-                    if (init.initCallback(renderParams) instanceof Promise) {
-                        throw new Error(`initCallback in '${init.tagName}' cannot be asynchronous`);
+                    if (init.init(renderParams) instanceof Promise) {
+                        throw new TypeError('init cannot be asynchronous');
                     }
                 }
-            }
-            destroy() {
-                Object.values(this.instanceState).forEach((stateValue) => {
-                    if (hasProperty(stateValue, 'destroy') &&
-                        isRunTimeType(stateValue.destroy, 'function')) {
-                        stateValue.destroy();
-                    }
+                const renderResult = typedRenderCallback(renderParams);
+                if (renderResult instanceof Promise) {
+                    throw new TypeError('render cannot be asynchronous');
+                }
+                applyHostClasses({
+                    host: renderParams.host,
+                    hostClassesInit: init.hostClasses,
+                    hostClassNames,
+                    state: renderParams.state,
+                    inputs: renderParams.inputs,
                 });
+                this._lastRenderedProps = {
+                    inputs: { ...renderParams.inputs },
+                    state: { ...renderParams.state },
+                };
+                return renderResult;
             }
-            disconnectedCallback() {
-                super.disconnectedCallback();
-                if (init.cleanupCallback) {
-                    const renderParams = this.createRenderParams();
-                    if (init.cleanupCallback(renderParams) instanceof Promise) {
-                        throw new Error(`cleanupCallback in '${init.tagName}' cannot be asynchronous`);
-                    }
-                }
-                this.destroy();
-                this._initCalled = false;
+            catch (caught) {
+                const error = ensureErrorAndPrependMessage(caught, `Failed to render ${init.tagName}`);
+                console.error(error);
+                this._lastRenderError = error;
+                return extractErrorMessage(error);
             }
-            assignInputs(inputs) {
-                assignInputs(this, inputs);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (this._hasRendered && !this._initCalled && init.init) {
+                this._initCalled = true;
+                const renderParams = this.createRenderParams();
+                if (init.init(renderParams) instanceof Promise) {
+                    throw new TypeError(`init in '${init.tagName}' cannot be asynchronous`);
+                }
             }
-            constructor() {
-                super();
-                Object.defineProperty(this, "_lastRenderError", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: undefined
-                });
-                Object.defineProperty(this, "_internalRenderCount", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: 0
-                });
-                Object.defineProperty(this, "_initCalled", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: false
-                });
-                Object.defineProperty(this, "_hasRendered", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: false
-                });
-                Object.defineProperty(this, "_lastRenderedProps", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: undefined
-                });
-                Object.defineProperty(this, "_haveInputsBeenSet", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: false
-                });
-                // this is set below in Object.defineProperties
-                Object.defineProperty(this, "definition", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: {}
-                });
-                Object.defineProperty(this, "observablePropertyListenerMap", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: {}
-                });
-                Object.defineProperty(this, "instanceInputs", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: createElementPropertyProxy(this, false)
-                });
-                Object.defineProperty(this, "instanceState", {
-                    enumerable: true,
-                    configurable: true,
-                    writable: true,
-                    value: createElementPropertyProxy(this, !elementOptions.allowPolymorphicState)
-                });
-                const stateInitStatic = init.stateInitStatic || {};
-                getObjectTypedKeys(stateInitStatic).forEach((stateKey) => {
-                    bindReactiveProperty(this, stateKey);
-                    this.instanceState[stateKey] = stateInitStatic[stateKey];
-                });
-                this.definition = anonymousClass;
+        }
+        destroy() {
+            Object.values(this.instanceState).forEach((stateValue) => {
+                if (check.hasKey(stateValue, 'destroy') && check.isFunction(stateValue.destroy)) {
+                    stateValue.destroy();
+                }
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            if (init.cleanup) {
+                const renderParams = this.createRenderParams();
+                if (init.cleanup(renderParams) instanceof Promise) {
+                    throw new TypeError(`cleanup in '${init.tagName}' cannot be asynchronous`);
+                }
             }
-        },
-        __setFunctionName(_a, "anonymousClass"),
-        Object.defineProperty(_a, "elementOptions", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: elementOptions
-        }),
-        Object.defineProperty(_a, "tagName", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: init.tagName
-        }),
-        Object.defineProperty(_a, "styles", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: calculatedStyles
-        }),
-        Object.defineProperty(_a, "assign", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: typedAssignCallback
-        }),
-        // this gets set below in Object.defineProperties
-        Object.defineProperty(_a, "isStrictInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => false
-        }),
-        Object.defineProperty(_a, "events", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: eventsMap
-        }),
-        Object.defineProperty(_a, "renderCallback", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: typedRenderCallback
-        }),
-        Object.defineProperty(_a, "hostClasses", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: hostClassNames
-        }),
-        Object.defineProperty(_a, "cssVars", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: cssVars
-        }),
-        Object.defineProperty(_a, "init", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: init
-        }),
-        Object.defineProperty(_a, "slotNames", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: slotNamesMap
-        }),
-        Object.defineProperty(_a, "stateInitStatic", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: init.stateInitStatic
-        }),
-        _a);
+            this.destroy();
+            this._initCalled = false;
+        }
+        // this is set below in Object.defineProperties
+        definition = {};
+        assignInputs(inputs) {
+            assignInputs(this, inputs);
+        }
+        observablePropertyListenerMap = {};
+        instanceInputs = createElementPropertyProxy(this, false);
+        instanceState = createElementPropertyProxy(this, !elementOptions.allowPolymorphicState);
+        constructor() {
+            super();
+            const stateInitStatic = 
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            init.stateInitStatic || {};
+            getObjectTypedKeys(stateInitStatic).forEach((stateKey) => {
+                bindReactiveProperty(this, stateKey);
+                this.instanceState[stateKey] = stateInitStatic[stateKey];
+            });
+            this.definition = anonymousClass;
+        }
+    };
     Object.defineProperties(anonymousClass, {
         name: {
             value: kebabCaseToCamelCase(init.tagName, {
@@ -303,12 +206,6 @@ export function defineElementNoInputs(initInput) {
             }),
             writable: true,
         },
-        isStrictInstance: {
-            value: (element) => {
-                return element instanceof anonymousClass;
-            },
-            writable: false,
-        },
     });
     if (window.customElements.get(init.tagName)) {
         console.warn(`Tried to define custom element '${init.tagName}' but it is already defined.`);

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

@@ -1,8 +1,36 @@
-import { CustomElementTagName } from './custom-tag-name';
-import { DeclarativeElementDefinition } from './declarative-element';
-import { VerifiedElementNoInputsInit } from './define-element-no-inputs';
-import { BaseCssPropertyName } from './properties/css-properties';
-import { EventsInitMap } from './properties/element-events';
-import { PropertyInitMapBase } from './properties/element-properties';
+import { CustomElementTagName } from './custom-tag-name.js';
+import { DeclarativeElementDefinition } from './declarative-element.js';
+import { VerifiedElementNoInputsInit } from './define-element-no-inputs.js';
+import { BaseCssPropertyName } from './properties/css-properties.js';
+import { EventsInitMap } from './properties/element-events.js';
+import { PropertyInitMapBase } from './properties/element-properties.js';
+/**
+ * Verifies that the given {@link DeclarativeElementInit} for an element definition with inputs does
+ * not have any state or input properties that clash with built-in HTML element properties, or state
+ * / input properties that clash with each other.
+ *
+ * @category Internal
+ */
 export type VerifiedElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = Extract<keyof StateInit, keyof Inputs> extends never ? Extract<keyof Inputs, keyof HTMLElement> extends never ? VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames> : 'ERROR: Cannot define an element input property that clashes with native HTMLElement properties.' : "ERROR: Cannot define an element state property that clashes with the element's input properties.";
-export declare function defineElement<Inputs extends PropertyInitMapBase = {}>(): <const TagName extends `${string}-${string}`, StateInit extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends readonly string[] = readonly []>(initInput: VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+/**
+ * Defines an element with inputs. If the element actually has no inputs, use
+ * {@link defineElementNoInputs} instead. Note that this function must be called twice, due to
+ * TypeScript type inference limitations.
+ *
+ * @category Element Definition
+ * @example
+ *
+ * ```ts
+ * import {defineElement, html} from 'element-vir';
+ *
+ * const MyElement = defineElement<{username: string}>()({
+ *     tagName: 'my-element',
+ *     render({inputs}) {
+ *         return html`
+ *             <p>hi: ${inputs.username}</p>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export declare function defineElement<Inputs extends PropertyInitMapBase = {}>(): <const TagName extends CustomElementTagName, StateInit extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(initInput: VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

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

@@ -1,10 +1,32 @@
-import { isRunTimeType } from 'run-time-assertions';
-import { defineElementNoInputs } from './define-element-no-inputs';
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import { check } from '@augment-vir/assert';
+import { defineElementNoInputs } from './define-element-no-inputs.js';
+/**
+ * Defines an element with inputs. If the element actually has no inputs, use
+ * {@link defineElementNoInputs} instead. Note that this function must be called twice, due to
+ * TypeScript type inference limitations.
+ *
+ * @category Element Definition
+ * @example
+ *
+ * ```ts
+ * import {defineElement, html} from 'element-vir';
+ *
+ * const MyElement = defineElement<{username: string}>()({
+ *     tagName: 'my-element',
+ *     render({inputs}) {
+ *         return html`
+ *             <p>hi: ${inputs.username}</p>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
 export function defineElement() {
     return (initInput) => {
         const init = initInput;
-        if (!isRunTimeType(init, 'object')) {
-            throw new Error('Cannot define element with non-object init: ${init}');
+        if (!check.isObject(init)) {
+            throw new TypeError('Cannot define element with non-object init: ${init}');
         }
         return defineElementNoInputs({
             ...init,

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

@@ -1,3 +1,8 @@
+/**
+ * Extra options for defining elements. These should be used very rarely.
+ *
+ * @category Internal
+ */
 export type DeclarativeElementDefinitionOptions = {
     /** For internal use only. */
     ignoreUnsetInputs: boolean;
@@ -7,4 +12,9 @@ export type DeclarativeElementDefinitionOptions = {
      */
     allowPolymorphicState: boolean;
 };
+/**
+ * Default values for {@link DeclarativeElementDefinitionOptions}.
+ *
+ * @internal
+ */
 export declare const defaultDeclarativeElementDefinitionOptions: DeclarativeElementDefinitionOptions;

package/dist/declarative-element/definition-options.js

@@ -1,3 +1,8 @@
+/**
+ * Default values for {@link DeclarativeElementDefinitionOptions}.
+ *
+ * @internal
+ */
 export const defaultDeclarativeElementDefinitionOptions = {
     ignoreUnsetInputs: true,
     allowPolymorphicState: false,

package/dist/declarative-element/directives/assign.directive.d.ts

@@ -1,5 +1,6 @@
-import { DirectiveResult } from '../../lit-exports/all-lit-exports';
-import { PropertyInitMapBase } from '../properties/element-properties';
+import type { EmptyObject } from 'type-fest';
+import { DirectiveResult } from '../../lit-exports/all-lit-exports.js';
+import { PropertyInitMapBase } from '../properties/element-properties.js';
 export type ElementDefinitionWithInputsType<InputsType extends PropertyInitMapBase = PropertyInitMapBase> = {
     inputsType: InputsType;
 };
@@ -8,20 +9,16 @@ export type ElementDefinitionWithInputsType<InputsType extends PropertyInitMapBa
  *
  * @deprecated Instead of using this directive, assign inputs directly on the element's
  *   interpolation opening tag interpolation.
- * @example
- *     html`<${MyElement} ${assign(MyElement, {value: 1})}>...`
- *     should be
- *     html`<${MyElement.assign({value: 1})}>...`
+ * @example Html`<${MyElement} ${assign(MyElement, {value: 1})}>...` should be
+ * html`<${MyElement.assign({value: 1})}>...`
  */
-export declare function assign<const SpecificDeclarativeElement extends ElementDefinitionWithInputsType>(declarativeElement: SpecificDeclarativeElement, inputsObject: {} extends Required<SpecificDeclarativeElement['inputsType']> ? never : SpecificDeclarativeElement['inputsType']): DirectiveResult;
+export declare function assign<const SpecificDeclarativeElement extends ElementDefinitionWithInputsType>(declarativeElement: SpecificDeclarativeElement, inputsObject: EmptyObject extends Required<SpecificDeclarativeElement['inputsType']> ? never : SpecificDeclarativeElement['inputsType']): DirectiveResult;
 /**
  * Assign an object matching an element's inputs to its inputs.
  *
  * @deprecated Instead of using this directive, assign inputs directly on the element's
  *   interpolation opening tag interpolation.
- * @example
- *     html`<${MyElement} ${assign(MyElement, {value: 1})}>...`
- *     should be
- *     html`<${MyElement.assign({value: 1})}>...`
+ * @example Html`<${MyElement} ${assign(MyElement, {value: 1})}>...` should be
+ * html`<${MyElement.assign({value: 1})}>...`
  */
 export declare function assign<const SpecificDeclarativeElement extends ElementDefinitionWithInputsType, const SpecificInput extends SpecificDeclarativeElement['inputsType']>(inputsObject: SpecificInput extends typeof HTMLElement ? never : SpecificInput): DirectiveResult;

package/dist/declarative-element/directives/assign.directive.js

@@ -1,15 +1,13 @@
-import { directive, Directive, noChange, } from '../../lit-exports/all-lit-exports';
-import { assignInputs } from '../properties/assign-inputs';
-import { extractElement } from './directive-helpers';
+import { directive, Directive, noChange, } from '../../lit-exports/all-lit-exports.js';
+import { assignInputs } from '../properties/assign-inputs.js';
+import { extractElement } from './directive-helpers.js';
 /**
  * Assign an object matching an element's inputs to its inputs.
  *
  * @deprecated Instead of using this directive, assign inputs directly on the element's
  *   interpolation opening tag interpolation.
- * @example
- *     html`<${MyElement} ${assign(MyElement, {value: 1})}>...`
- *     should be
- *     html`<${MyElement.assign({value: 1})}>...`
+ * @example Html`<${MyElement} ${assign(MyElement, {value: 1})}>...` should be
+ * html`<${MyElement.assign({value: 1})}>...`
  */
 export function assign(declarativeElementOrInputs, inputsObject) {
     /**
@@ -24,14 +22,9 @@ export function assign(declarativeElementOrInputs, inputsObject) {
     }
 }
 const assignDirective = directive(class extends Directive {
+    element;
     constructor(partInfo) {
         super(partInfo);
-        Object.defineProperty(this, "element", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         this.element = extractElement(partInfo, 'assign');
     }
     render(elementDefinition, inputsObject) {