element-vir 6.3.4 → 7.0.0

package/README.md

@@ -317,7 +317,7 @@ import {MyCustomActionEvent} from './my-custom-action.event';
 
 export const MyWithCustomEventsElement = defineElementNoInputs({
     tagName: 'my-with-custom-events',
-    renderCallback: ({genericDispatch}) => html`
+    renderCallback: ({dispatch}) => html`
         <div
             ${listen(MyCustomActionEvent, (event) => {
                 console.info(`Got a number! ${event.detail}`);
@@ -325,7 +325,7 @@ export const MyWithCustomEventsElement = defineElementNoInputs({
         >
             <div
                 ${listen('click', () => {
-                    genericDispatch(new MyCustomActionEvent(Math.random()));
+                    dispatch(new MyCustomActionEvent(Math.random()));
                 })}
             ></div>
         </div>
@@ -534,6 +534,85 @@ export const MyWithCleanupElement = defineElementNoInputs({
 });
 ```
 
+### renderIf
+
+Use the `renderIf` directive to easily render a template if a given condition is true.
+
+<!-- example-link: src/readme-examples/my-with-render-if.element.ts -->
+
+```TypeScript
+import {defineElement, html, renderIf} from 'element-vir';
+
+export const MyWithRenderIfElement = defineElement<{shouldRender: boolean}>()({
+    tagName: 'my-simple-with-render-if',
+    renderCallback: ({inputs}) => html`
+        ${renderIf(
+            inputs.shouldRender,
+            html`
+                I'm conditionally rendered!
+            `,
+        )}
+    `,
+});
+```
+
+### renderAsyncProp
+
+Use the `renderAsyncProp` directive in conjunction with the `asyncProp` property definer and the `ensureAsyncProp` render callback property to seamlessly render and update element state:
+
+<!-- example-link: src/readme-examples/my-with-async-prop.element.ts -->
+
+```TypeScript
+import {asyncProp, defineElement, html, renderAsyncProp} from 'element-vir';
+
+async function loadSomething(endpoint: string) {
+    // load something from the network
+    const data = await (
+        await fetch(
+            [
+                '',
+                'api',
+                endpoint,
+            ].join('/'),
+        )
+    ).json();
+    return data;
+}
+
+export const MyWithAsyncPropElement = defineElement<{endpointToHit: string}>()({
+    tagName: 'my-simple-with-render-if',
+    stateInit: {
+        data: asyncProp(),
+    },
+    renderCallback: ({inputs, state, ensureAsyncProp}) => {
+        /**
+         * This creates a promise which automatically updates the state.loadsLater prop once the
+         * promise resolves.
+         */
+        ensureAsyncProp({
+            data: {
+                createPromise: () => loadSomething(inputs.endpointToHit),
+                updateIfThisChanges: inputs.endpointToHit,
+            },
+        });
+
+        return html`
+            Here's the data:
+            <br />
+            ${renderAsyncProp({
+                asyncProp: state.data,
+                fallback: 'Loading...',
+                resolutionRender: (loadedData) => {
+                    return html`
+                        Got the data: ${loadedData}
+                    `;
+                },
+            })}
+        `;
+    },
+});
+```
+
 ## Require all child custom elements to be declarative elements
 
 To require all child elements to be declarative elements defined by this package, call `requireAllCustomElementsToBeDeclarativeElements` anywhere in your app. This is a global setting so do not enable it unless you want it to be true _everywhere_ in your current run-time. This should not be used if you're using custom elements from other libraries (unless they happen to also use this package to define their custom elements).
@@ -551,3 +630,13 @@ requireAllCustomElementsToBeDeclarativeElements();
 ## markdown out of date
 
 If you see this: `Code in Markdown file(s) is out of date. Run without --check to update. code-in-markdown failed.`, run `npm run update-docs` to fix it.
+
+## Testing source map errors
+
+If you see
+
+```
+Error while reading source maps for ...
+```
+
+While running `npm test`, don't worry about it. Those only happen when tests fail.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "6.3.4",
+    "version": "7.0.0",
     "keywords": [
         "custom",
         "web",
@@ -25,53 +25,50 @@
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
-        "build": "virmator frontend build",
         "compile": "rm -rf dist && tsc --project tsconfig.json",
         "docs:update": "virmator code-in-markdown",
         "format": "virmator format",
-        "preview": "virmator frontend preview",
-        "publish": "npm run compile && npm run test:all && virmator publish",
-        "spellcheck": "virmator spellcheck",
+        "publish": "virmator publish \"npm run compile && npm run test:all\"",
         "start": "npm install && virmator frontend",
         "test": "npm run test:types && virmator test-web",
-        "test:all": "npm run test:types && npm test && npm run spellcheck && npm run test:format && npm run test:docs",
+        "test:all": "npm run test:types && npm test && npm run test:spelling && npm run test:format && npm run test:docs",
         "test:docs": "virmator code-in-markdown check",
         "test:format": "virmator format check",
-        "test:types": "tsc --noEmit",
-        "test:web": "virmator test-web"
+        "test:spelling": "virmator spellcheck",
+        "test:types": "tsc --noEmit"
     },
     "dependencies": {
-        "@augment-vir/browser": "^6.1.5",
-        "@augment-vir/common": "^6.1.5",
-        "lit": "2.5.0"
+        "@augment-vir/browser": "^10.0.0",
+        "@augment-vir/common": "^10.0.0",
+        "lit": "2.6.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^6.1.5",
+        "@augment-vir/browser-testing": "^10.0.0",
+        "@augment-vir/node-js": "^10.0.0",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^3.1.7",
-        "@types/chai": "^4.3.4",
         "@types/mocha": "^10.0.1",
         "@web/dev-server-esbuild": "^0.3.3",
         "@web/test-runner": "^0.15.0",
         "@web/test-runner-commands": "^0.6.5",
         "@web/test-runner-playwright": "^0.9.0",
         "ansi-colors": "^4.1.3",
-        "chai": "^4.3.7",
-        "cspell": "^6.17.0",
-        "istanbul-smart-text-reporter": "^1.0.1",
+        "cspell": "^6.19.2",
+        "istanbul-smart-text-reporter": "^1.1.1",
         "markdown-code-example-inserter": "^0.1.13",
-        "mocha": "^10.2.0",
         "mocha-spec-reporter-with-file-names": "^0.0.3",
         "nyc": "^15.1.0",
-        "prettier": "^2.8.1",
+        "prettier": "^2.8.3",
         "prettier-plugin-jsdoc": "^0.4.2",
-        "prettier-plugin-multiline-arrays": "^1.1.2",
-        "prettier-plugin-organize-imports": "^3.2.1",
-        "prettier-plugin-packagejson": "^2.3.0",
-        "prettier-plugin-sort-json": "^0.0.3",
+        "prettier-plugin-multiline-arrays": "^1.1.3",
+        "prettier-plugin-organize-imports": "^3.2.2",
+        "prettier-plugin-packagejson": "^2.4.0",
+        "prettier-plugin-sort-json": "^1.0.0",
         "prettier-plugin-toml": "^0.3.1",
         "ts-node": "^10.9.1",
-        "virmator": "^5.2.1",
-        "vite": "^4.0.1"
+        "type-fest": "^3.5.2",
+        "typescript": "^4.9.4",
+        "virmator": "^5.3.3",
+        "vite": "^4.0.4"
     }
 }

package/dist/augments/array.d.ts

@@ -1 +0,0 @@
-export declare function filterOutArrayIndexes<T>(array: Readonly<T[]>, indexes: Readonly<number[]>): T[];

package/dist/augments/array.js

@@ -1,3 +0,0 @@
-export function filterOutArrayIndexes(array, indexes) {
-    return array.filter((_, index) => !indexes.includes(index));
-}

package/dist/augments/type.d.ts

@@ -1,8 +0,0 @@
-export type NonEmptyString<T> = T extends '' ? never : T;
-/**
- * If the given value is not an instance of the given constructor, an error is thrown.
- *
- * This is a variation of assertInstanceOf that can be run in run-time code and doesn't require
- * testing packages.
- */
-export declare function ensureInstanceOf<T>(value: unknown, constructor: new (...args: any) => T, message?: string): asserts value is T;

package/dist/augments/type.js

@@ -1,13 +0,0 @@
-/**
- * If the given value is not an instance of the given constructor, an error is thrown.
- *
- * This is a variation of assertInstanceOf that can be run in run-time code and doesn't require
- * testing packages.
- */
-export function ensureInstanceOf(value, constructor, message) {
-    if (!(value instanceof constructor)) {
-        const extraMessage = message ? `: ${message}` : '';
-        const errorMessage = `${value} is not an instanceof of ${constructor.name}${extraMessage}`;
-        throw new TypeError(errorMessage);
-    }
-}

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

@@ -1,6 +0,0 @@
-import { CSSResult } from 'lit';
-export type CssVarsInitMap<CssVarKeys extends string> = Record<CssVarKeys, string | CSSResult>;
-export type CssVarName<TagName extends string> = `--${TagName}-string`;
-export type CssVarNameOrValueMap<CssVarKeys extends string> = Record<CssVarKeys, CSSResult>;
-export declare function createCssVarNamesMap<TagName extends string, CssVarKeys extends string>(tagName: TagName, cssVarsInit: CssVarsInitMap<CssVarKeys> | undefined): CssVarNameOrValueMap<CssVarKeys>;
-export declare function createCssVarValuesMap<CssVarKeys extends string>(cssVarInitMap: CssVarsInitMap<CssVarKeys> | undefined, cssVarNamesMap: CssVarNameOrValueMap<CssVarKeys>): CssVarNameOrValueMap<CssVarKeys>;

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

@@ -1,22 +0,0 @@
-import { mapObjectValues } from '@augment-vir/common';
-import { unsafeCSS } from 'lit';
-import { toHtmlSafeWithTagName } from './tag-name';
-export function createCssVarNamesMap(tagName, cssVarsInit) {
-    if (cssVarsInit) {
-        return mapObjectValues(cssVarsInit, (key) => {
-            return unsafeCSS(`--${toHtmlSafeWithTagName(tagName, String(key))}`);
-        });
-    }
-    else {
-        return {};
-    }
-}
-export function createCssVarValuesMap(cssVarInitMap, cssVarNamesMap) {
-    if (!cssVarInitMap) {
-        return {};
-    }
-    return mapObjectValues(cssVarInitMap, (key, fallbackValue) => {
-        const name = cssVarNamesMap[key];
-        return unsafeCSS(`var(${name}, ${fallbackValue})`);
-    });
-}

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

@@ -1,44 +0,0 @@
-import { CSSResult } from 'lit';
-import { CssVarsInitMap } from './css-vars';
-import { DeclarativeElementDefinitionOptions } from './definition-options';
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
-import { HostClassesInitMap } from './host-classes';
-import { InitCallback, RenderCallback } from './render-callback';
-import { StylesCallback } from './styles';
-export type CustomElementTagName = `${string}-${string}`;
-export type DeclarativeElementInit<InputsGeneric extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
-    /**
-     * HTML tag name. This should not be used directly, as interpolating it with the html tagged
-     * template from this package is preferred.
-     */
-    tagName: CustomElementTagName;
-    /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | StylesCallback<HostClassKeys, CssVarKeys>;
-    /** Element properties. (These can be thought of as "inputs".) */
-    stateInit?: StateInit;
-    /** Events that the element can dispatch. (These can be thought of as "outputs".) */
-    events?: EventsInitGeneric;
-    /**
-     * CSS host classes. Values can be callbacks to determine when a host class should be defined,
-     * based on current instance state or inputs, or just undefined to indicate that the host class
-     * will only be manually set.
-     */
-    hostClasses?: HostClassesInitMap<HostClassKeys, InputsGeneric, StateInit>;
-    /**
-     * CSS Vars for the component. Keys of this object should be camelCased (or whatever your casing
-     * convention is). They will be transformed, at runtime, to CSS vars with kebab-casing, to match
-     * CSS standards.
-     *
-     * Values of this object represent the default fallback value for the given CSS var. These are
-     * then passed to the styles property, which must be a callback to take advantage of these.
-     * cssVarValues or cssVarNames can then be destructured from the styles property's callback
-     * input.
-     */
-    cssVars?: CssVarsInitMap<CssVarKeys>;
-    /** Called as part of the first renderCallback call, before the first renderCallback call. */
-    initCallback?: InitCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    renderCallback: RenderCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    cleanupCallback?: InitCallback<InputsGeneric, StateInit, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
-};

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

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

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

@@ -1,48 +0,0 @@
-import { RequiredAndNotNullBy, RequiredBy } from '@augment-vir/common';
-import { CSSResult, LitElement, TemplateResult } from 'lit';
-import { CssVarNameOrValueMap } from './css-vars';
-import { DeclarativeElementInit } from './declarative-element-init';
-import { EventDescriptorMap, EventsInitMap } from './element-events';
-import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
-import { HostClassNamesMap } from './host-classes';
-import { RenderCallback } from './render-callback';
-export type HostInstanceType<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = RequiredAndNotNullBy<DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'shadowRoot'>;
-export type DeclarativeElementDefinition<InputsGeneric extends PropertyInitMapBase = any, StateInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> = (new () => HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys> & {
-    instanceType: HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-};
-export declare abstract class DeclarativeElement<InputsGeneric extends PropertyInitMapBase = any, PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> extends LitElement {
-    static readonly tagName: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['tagName'];
-    static readonly styles: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['styles'];
-    static readonly isStrictInstance: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['isStrictInstance'];
-    static readonly renderCallback: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['renderCallback'];
-    static readonly inputsType: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['inputsType'];
-    static readonly stateType: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['stateType'];
-    static readonly events: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['events'];
-    static readonly stateInit: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['stateInit'];
-    static readonly init: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['init'];
-    static readonly hostClasses: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['hostClasses'];
-    static readonly cssVarNames: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarNames'];
-    static readonly cssVarValues: StaticDeclarativeElementProperties<PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, string, string>['cssVarValues'];
-    abstract render(): TemplateResult | Promise<TemplateResult>;
-    abstract readonly instanceState: PropertyInitGeneric;
-    abstract readonly instanceInputs: InputsGeneric;
-    abstract assignInputs(inputs: InputsGeneric): void;
-    abstract readonly haveInputsBeenSet: boolean;
-    abstract markInputsAsHavingBeenSet(): void;
-    abstract readonly definition: DeclarativeElementDefinition<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-}
-export interface StaticDeclarativeElementProperties<InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> {
-    /** Pass through the render callback for direct unit testability */
-    readonly renderCallback: RenderCallback<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    events: EventDescriptorMap<EventsInitGeneric>;
-    stateInit: ElementPropertyDescriptorMap<StateInitGeneric>;
-    init: RequiredBy<DeclarativeElementInit<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'stateInit' | 'events'>;
-    inputsType: InputsGeneric;
-    stateType: StateInitGeneric;
-    isStrictInstance: (element: unknown) => element is DeclarativeElement<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-    hostClasses: HostClassNamesMap<string, HostClassKeys>;
-    cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
-    cssVarValues: CssVarNameOrValueMap<CssVarKeys>;
-    tagName: string;
-    styles: CSSResult;
-}

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

@@ -1,18 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement } from 'lit';
-function staticImplements() {
-    return (constructor) => {
-        constructor;
-    };
-}
-let DeclarativeElement = class DeclarativeElement extends LitElement {
-};
-DeclarativeElement = __decorate([
-    staticImplements()
-], DeclarativeElement);
-export { DeclarativeElement };

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

@@ -1,5 +0,0 @@
-import { DeclarativeElementDefinition } from './declarative-element';
-import { DeclarativeElementInit } from './declarative-element-init';
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
-export declare function defineElementNoInputs<InputsGeneric extends PropertyInitMapBase = {}, StateGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = ''>(initInput: DeclarativeElementInit<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): DeclarativeElementDefinition<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

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

@@ -1,133 +0,0 @@
-import { getObjectTypedKeys, kebabCaseToCamelCase } from '@augment-vir/common';
-import { css } from 'lit';
-import { property } from 'lit/decorators.js';
-import { DeclarativeElementMarkerSymbol } from '../declarative-element-marker-symbol';
-import { createCssVarNamesMap, createCssVarValuesMap } from './css-vars';
-import { DeclarativeElement, } from './declarative-element';
-import { defaultDeclarativeElementDefinitionOptions, IgnoreInputsNotBeenSetBeforeRenderWarningSymbol, } from './definition-options';
-import { assign } from './directives/assign.directive';
-import { createEventDescriptorMap } from './element-events';
-import { createElementUpdaterProxy } from './element-properties';
-import { hasDeclarativeElementParent } from './has-declarative-element-parent';
-import { createHostClassNamesMap } from './host-classes';
-import { createRenderParams } from './render-callback';
-import { applyHostClasses, hostClassNamesToStylesInput } from './styles';
-export function defineElementNoInputs(initInput) {
-    var _a;
-    const eventsMap = createEventDescriptorMap(initInput.events);
-    const hostClassNames = createHostClassNamesMap(initInput.tagName, initInput.hostClasses);
-    const cssVarNames = createCssVarNamesMap(initInput.tagName, initInput.cssVars);
-    const cssVarValues = createCssVarValuesMap(initInput.cssVars, cssVarNames);
-    const elementOptions = {
-        ...defaultDeclarativeElementDefinitionOptions,
-        ...initInput.options,
-    };
-    const calculatedStyles = typeof initInput.styles === 'function'
-        ? initInput.styles(hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues }))
-        : initInput.styles || css ``;
-    const typedRenderCallback = initInput.renderCallback;
-    const anonymousClass = (_a = class extends DeclarativeElement {
-            createRenderParams() {
-                return createRenderParams(this, eventsMap);
-            }
-            get instanceType() {
-                throw new Error(`"instanceType" was called on ${initInput.tagName} as a value but it is only for types.`);
-            }
-            static get inputsType() {
-                throw new Error(`"inputsType" was called on ${initInput.tagName} as a value but it is only for types.`);
-            }
-            static get stateType() {
-                throw new Error(`"stateType" was called on ${initInput.tagName} as a value but it is only for types.`);
-            }
-            markInputsAsHavingBeenSet() {
-                if (!this.haveInputsBeenSet) {
-                    this.haveInputsBeenSet = true;
-                }
-            }
-            render() {
-                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[IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]) {
-                    console.warn(this, `${initInput.tagName} got rendered before its input object was set. This was most likely caused by forgetting to use the "${assign.name}" directive on it. If no inputs are intended, use "${defineElementNoInputs.name}" to define ${initInput.tagName}.`);
-                }
-                const renderParams = this.createRenderParams();
-                if (!this.initCalled && initInput.initCallback) {
-                    this.initCalled = true;
-                    initInput.initCallback(renderParams);
-                }
-                const renderResult = initInput.renderCallback(renderParams);
-                applyHostClasses({
-                    host: renderParams.host,
-                    hostClassesInit: initInput.hostClasses,
-                    hostClassNames,
-                    state: renderParams.state,
-                    inputs: renderParams.inputs,
-                });
-                return renderResult;
-            }
-            disconnectedCallback() {
-                super.disconnectedCallback();
-                if (initInput.cleanupCallback) {
-                    const renderParams = this.createRenderParams();
-                    initInput.cleanupCallback(renderParams);
-                }
-                this.initCalled = false;
-            }
-            assignInputs(inputs) {
-                getObjectTypedKeys(inputs).forEach((key) => {
-                    property()(this, key);
-                    this.instanceInputs[key] = inputs[key];
-                });
-                this.markInputsAsHavingBeenSet();
-            }
-            constructor() {
-                super();
-                this.initCalled = false;
-                this.haveInputsBeenSet = false;
-                // this is set below in Object.defineProperties
-                this.definition = {};
-                this.instanceInputs = createElementUpdaterProxy(this, false);
-                this.instanceState = createElementUpdaterProxy(this, true);
-                const stateInit = initInput.stateInit || {};
-                Object.keys(stateInit).forEach((propName) => {
-                    property()(this, propName);
-                    this[propName] = stateInit[propName];
-                });
-                this.definition = anonymousClass;
-            }
-        },
-        _a.tagName = initInput.tagName,
-        _a.styles = calculatedStyles,
-        // this gets set below in Object.defineProperties
-        _a.isStrictInstance = () => false,
-        _a.events = eventsMap,
-        _a.renderCallback = typedRenderCallback,
-        _a.hostClasses = hostClassNames,
-        _a.cssVarNames = cssVarNames,
-        _a.stateInit = initInput.stateInit,
-        _a.cssVarValues = cssVarNames,
-        _a);
-    Object.defineProperties(anonymousClass, {
-        [DeclarativeElementMarkerSymbol]: {
-            value: true,
-            writable: false,
-        },
-        name: {
-            value: kebabCaseToCamelCase(initInput.tagName, {
-                capitalizeFirstLetter: true,
-            }),
-            writable: true,
-        },
-        isStrictInstance: {
-            value: (element) => {
-                return element instanceof anonymousClass;
-            },
-            writable: false,
-        },
-    });
-    window.customElements.define(initInput.tagName, anonymousClass);
-    return anonymousClass;
-}

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

@@ -1,5 +0,0 @@
-import { DeclarativeElementDefinition } from './declarative-element';
-import { DeclarativeElementInit } from './declarative-element-init';
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
-export declare function defineElement<InputsGeneric extends PropertyInitMapBase = {}>(): <PropertyInitGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = "", CssVarKeys extends string = "">(initInput: DeclarativeElementInit<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => DeclarativeElementDefinition<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

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

@@ -1,13 +0,0 @@
-import { defineElementNoInputs } from './define-element-no-inputs';
-import { IgnoreInputsNotBeenSetBeforeRenderWarningSymbol } from './definition-options';
-export function defineElement() {
-    return (initInput) => {
-        return defineElementNoInputs({
-            ...initInput,
-            options: {
-                [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: false,
-            },
-            ...initInput.options,
-        });
-    };
-}

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

@@ -1,5 +0,0 @@
-export declare const IgnoreInputsNotBeenSetBeforeRenderWarningSymbol: unique symbol;
-export type DeclarativeElementDefinitionOptions = {
-    [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: boolean;
-};
-export declare const defaultDeclarativeElementDefinitionOptions: DeclarativeElementDefinitionOptions;

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

@@ -1,4 +0,0 @@
-export const IgnoreInputsNotBeenSetBeforeRenderWarningSymbol = Symbol('key for ignoring inputs not having been set yet');
-export const defaultDeclarativeElementDefinitionOptions = {
-    [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: true,
-};

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

@@ -1,23 +0,0 @@
-import { AsyncDirective } from 'lit/async-directive.js';
-import { PartInfo } from 'lit/directive.js';
-import { DeclarativeElementDefinition } from '../declarative-element';
-export type CleanupCallback<T> = (oldValue: T) => void;
-/**
- * Assign values but include a cleanup callback which gets called when a new value gets assigned so
- * the previous value can get cleaned up. An optional equality check callback can be provided. If it
- * is provided, the clean up callback will then only be called if the equality check callback
- * resolves to false (which indicates that the previous value and the new value are not equal).
- *
- * Example use case: 3D graphics applications with classes that setup buffers and the like.
- */
-export declare function assignWithCleanup<DeclarativeElementGeneric extends DeclarativeElementDefinition>(elementDefinition: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never, cleanupCallback: CleanupCallback<DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
-declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
-    private readonly element;
-    private lastValue;
-    private lastCallback;
-    private hasBeenAssigned;
-    constructor(partInfo: PartInfo);
-    disconnected(): void;
-    render(elementDefinition: DeclarativeElementDefinition, inputsObject: Record<PropertyKey, unknown>, cleanupCallback: CleanupCallback<any>): symbol;
-}
-export {};

package/dist/declarative-element/directives/assign-with-clean-up.directive.js

@@ -1,43 +0,0 @@
-import { noChange } from 'lit';
-import { AsyncDirective } from 'lit/async-directive.js';
-import { directive } from 'lit/directive.js';
-import { assignInputsObject } from './assign.directive';
-import { extractDeclarativeElement } from './directive-helpers';
-/**
- * Assign values but include a cleanup callback which gets called when a new value gets assigned so
- * the previous value can get cleaned up. An optional equality check callback can be provided. If it
- * is provided, the clean up callback will then only be called if the equality check callback
- * resolves to false (which indicates that the previous value and the new value are not equal).
- *
- * Example use case: 3D graphics applications with classes that setup buffers and the like.
- */
-export function assignWithCleanup(elementDefinition, inputsObject, cleanupCallback) {
-    /**
-     * The directive generics (in listenDirective) are not strong enough to maintain their values.
-     * Thus, the directive call is wrapped in this function.
-     */
-    return assignWithCleanupDirective(elementDefinition, inputsObject, cleanupCallback);
-}
-class AssignWithCleanupDirectiveClass extends AsyncDirective {
-    constructor(partInfo) {
-        super(partInfo);
-        this.hasBeenAssigned = false;
-        this.element = extractDeclarativeElement(partInfo, 'assign');
-    }
-    disconnected() {
-        if (this.lastValue != undefined && this.lastCallback != undefined) {
-            this.lastCallback(this.lastValue);
-        }
-    }
-    render(elementDefinition, inputsObject, cleanupCallback) {
-        if (this.hasBeenAssigned) {
-            cleanupCallback(this.lastValue);
-        }
-        assignInputsObject(elementDefinition, this.element, inputsObject);
-        this.hasBeenAssigned = true;
-        this.lastValue = inputsObject;
-        this.lastCallback = cleanupCallback;
-        return noChange;
-    }
-}
-const assignWithCleanupDirective = directive(AssignWithCleanupDirectiveClass);

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

@@ -1,12 +0,0 @@
-import { PartInfo } from 'lit/directive.js';
-import { DeclarativeElement, DeclarativeElementDefinition } from '../declarative-element';
-/** Assign an object matching an element's inputs to its inputs. */
-export declare function assign<DeclarativeElementGeneric extends DeclarativeElementDefinition>(declarativeElement: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric['inputsType']): import("lit-html/directive").DirectiveResult<{
-    new (partInfo: PartInfo): {
-        readonly element: DeclarativeElement<any, any, any, string, string>;
-        render(elementDefinition: DeclarativeElementDefinition<any, any, any, string, string>, inputsObject: Record<PropertyKey, unknown>): symbol;
-        readonly _$isConnected: boolean;
-        update(_part: import("lit-html").Part, props: unknown[]): unknown;
-    };
-}>;
-export declare function assignInputsObject<DeclarativeElementInstanceGeneric extends DeclarativeElement, DeclarativeElementDefinitionGeneric extends DeclarativeElementDefinition>(expectedElementConstructor: DeclarativeElementDefinitionGeneric, element: DeclarativeElementInstanceGeneric, assignmentObject: DeclarativeElementDefinitionGeneric['inputsType']): void;