element-vir 5.6.0 → 6.0.0

package/dist/index.js

@@ -1,15 +1,16 @@
-export * from './functional-element/define-functional-element';
-export * from './functional-element/directives/assign-with-clean-up.directive';
-export * from './functional-element/directives/assign.directive';
-export * from './functional-element/directives/directive-util';
-export * from './functional-element/directives/listen.directive';
-export * from './functional-element/directives/on-dom-created.directive';
-export * from './functional-element/directives/on-resize.directive';
-export * from './functional-element/element-events';
-export * from './functional-element/element-properties';
-export * from './functional-element/functional-element';
-export * from './functional-element/render-callback';
-export { requireAllCustomElementsToBeFunctionalElement } from './require-functional-element';
+export * from './declarative-element/declarative-element';
+export * from './declarative-element/define-element';
+export * from './declarative-element/define-element-no-inputs';
+export * from './declarative-element/directives/assign-with-clean-up.directive';
+export * from './declarative-element/directives/assign.directive';
+export * from './declarative-element/directives/directive-helpers';
+export * from './declarative-element/directives/listen.directive';
+export * from './declarative-element/directives/on-dom-created.directive';
+export * from './declarative-element/directives/on-resize.directive';
+export * from './declarative-element/element-events';
+export * from './declarative-element/element-properties';
+export * from './declarative-element/render-callback';
+export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
 export * from './template-transforms/vir-css/vir-css';
 export * from './template-transforms/vir-html/vir-html';
 export * from './typed-event/typed-event';

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

@@ -0,0 +1,2 @@
+export declare let declarativeElementRequired: boolean;
+export declare function requireAllCustomElementsToBeDeclarativeElements(): void;

package/dist/require-declarative-element.js

@@ -0,0 +1,4 @@
+export let declarativeElementRequired = false;
+export function requireAllCustomElementsToBeDeclarativeElements() {
+    declarativeElementRequired = true;
+}

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

@@ -0,0 +1,6 @@
+import { TemplateTransform } from './transform-template';
+export declare function getAlreadyMappedTemplate<PossibleValues>(templateStringsKey: TemplateStringsArray, values: PossibleValues[]): TemplateTransform | undefined;
+export declare function setMappedTemplate<PossibleValues>(templateStringsKey: TemplateStringsArray, values: PossibleValues[], valueToSet: TemplateTransform): {
+    result: boolean;
+    reason: string;
+};

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

@@ -0,0 +1,96 @@
+import { typedHasOwnProperties } from 'augment-vir';
+import { DeclarativeElementMarkerSymbol } from '../declarative-element-marker-symbol';
+function extractElementKeys(values) {
+    return values.filter((value) => {
+        return (typedHasOwnProperties(value, [
+            'tagName',
+            DeclarativeElementMarkerSymbol,
+        ]) &&
+            !!value.tagName &&
+            !!value[DeclarativeElementMarkerSymbol]);
+    });
+}
+/**
+ * The transformed templates are written to a map so that we can preserve reference equality between
+ * calls. Without maintaining reference equality between html`` calls, lit-element reconstructs all
+ * of its children on every render.
+ *
+ * This is a WeakMap because we only care about the transformed array value as long as the original
+ * template array key exists.
+ */
+const transformedTemplateStrings = new WeakMap();
+export function getAlreadyMappedTemplate(templateStringsKey, values) {
+    var _a;
+    const elementKeys = extractElementKeys(values);
+    const nestedValue = getNestedValues(transformedTemplateStrings, [
+        templateStringsKey,
+        ...elementKeys,
+    ]);
+    return (_a = nestedValue.value) === null || _a === void 0 ? void 0 : _a.template;
+}
+export function setMappedTemplate(templateStringsKey, values, valueToSet) {
+    const elementKeys = extractElementKeys(values);
+    return setNestedValues(transformedTemplateStrings, [
+        templateStringsKey,
+        ...elementKeys,
+    ], valueToSet);
+}
+function getNestedValues(map, keys, index = 0) {
+    const { currentTemplateAndNested, reason } = getCurrentKeyAndValue(map, keys, index);
+    if (!currentTemplateAndNested) {
+        return { value: currentTemplateAndNested, reason };
+    }
+    if (index === keys.length - 1) {
+        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 getNestedValues(currentTemplateAndNested.nested, keys, index + 1);
+}
+function getCurrentKeyAndValue(map, keys, index) {
+    const currentKey = keys[index];
+    if (currentKey == undefined) {
+        return {
+            currentKey: undefined,
+            currentTemplateAndNested: undefined,
+            reason: `key at index ${index} not found`,
+        };
+    }
+    if (!map.has(currentKey)) {
+        return {
+            currentKey,
+            currentTemplateAndNested: undefined,
+            reason: `key at index ${index} was not in the map`,
+        };
+    }
+    const currentTemplateAndNested = map.get(currentKey);
+    if (currentTemplateAndNested == undefined) {
+        return {
+            currentKey,
+            currentTemplateAndNested: undefined,
+            reason: `value at key at index ${index} was undefined`,
+        };
+    }
+    return { currentKey, currentTemplateAndNested, reason: `key and value exists` };
+}
+function setNestedValues(map, keys, valueToSet, index = 0) {
+    var _a;
+    const { currentTemplateAndNested, currentKey, reason } = getCurrentKeyAndValue(map, keys, index);
+    if (!currentKey) {
+        return { result: false, reason };
+    }
+    const nestedAndTemplate = currentTemplateAndNested !== null && currentTemplateAndNested !== void 0 ? 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` };
+    }
+    const nestedWeakMap = (_a = nestedAndTemplate.nested) !== null && _a !== void 0 ? _a : new WeakMap();
+    if (!nestedAndTemplate.nested) {
+        nestedAndTemplate.nested = nestedWeakMap;
+    }
+    return setNestedValues(nestedWeakMap, keys, valueToSet, index + 1);
+}

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

@@ -1,4 +1,7 @@
+import { typedHasOwnProperties } from 'augment-vir';
 import { filterOutArrayIndexes } from '../augments/array';
+import { DeclarativeElementMarkerSymbol } from '../declarative-element-marker-symbol';
+import { getAlreadyMappedTemplate, setMappedTemplate } from './nested-mapped-templates';
 export function makeCheckTransform(name, check, transform) {
     return {
         name,
@@ -15,11 +18,27 @@ export function makeCheckTransform(name, check, transform) {
  * template array key exists.
  */
 const transformedTemplateStrings = new WeakMap();
+function extractElementValues(values) {
+    return values.filter((value) => {
+        return (typedHasOwnProperties(value, [
+            'tagName',
+            DeclarativeElementMarkerSymbol,
+        ]) &&
+            !!value.tagName &&
+            !!value[DeclarativeElementMarkerSymbol]);
+    });
+}
 export function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
-    const alreadyTransformedTemplateStrings = transformedTemplateStrings.get(templateStringsKey);
+    const alreadyTransformedTemplateStrings = getAlreadyMappedTemplate(templateStringsKey, values);
     const templateTransform = alreadyTransformedTemplateStrings !== null && alreadyTransformedTemplateStrings !== void 0 ? alreadyTransformedTemplateStrings : fallbackTransform();
     if (!alreadyTransformedTemplateStrings) {
-        transformedTemplateStrings.set(templateStringsKey, templateTransform);
+        const result = setMappedTemplate(templateStringsKey, values, templateTransform);
+        if (!result.result) {
+            throw new Error(`Failed to set template transform: ${result.reason}`);
+        }
+        else {
+            transformedTemplateStrings.set(templateStringsKey, templateTransform);
+        }
     }
     const transformedValuesArray = filterOutArrayIndexes(values, templateTransform.valueIndexDeletions);
     return { strings: templateTransform.templateStrings, values: transformedValuesArray };

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

@@ -1,7 +1,7 @@
 import { CSSResultGroup } from 'lit';
-import { FunctionalElement } from '../../functional-element/functional-element';
+import { DeclarativeElementDefinition } from '../../declarative-element/declarative-element';
 export declare type CssTemplateTransform = {
     templateStrings: TemplateStringsArray;
     valueIndexDeletions: number[];
 };
-export declare function transformCssTemplate(inputTemplateStrings: TemplateStringsArray, inputValues: (number | CSSResultGroup | FunctionalElement)[]): CssTemplateTransform;
+export declare function transformCssTemplate(inputTemplateStrings: TemplateStringsArray, inputValues: (number | CSSResultGroup | DeclarativeElementDefinition)[]): CssTemplateTransform;

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

@@ -1,3 +1,3 @@
 import { CSSResult, CSSResultGroup } from 'lit';
-import { FunctionalElement } from '../../functional-element/functional-element';
-export declare function css(inputTemplateStrings: TemplateStringsArray, ...inputValues: (number | CSSResultGroup | FunctionalElement)[]): CSSResult;
+import { DeclarativeElementDefinition } from '../../declarative-element/declarative-element';
+export declare function css(inputTemplateStrings: TemplateStringsArray, ...inputValues: (number | CSSResultGroup | DeclarativeElementDefinition)[]): CSSResult;

package/dist/template-transforms/vir-css/vir-css.js

@@ -6,7 +6,7 @@ export function css(inputTemplateStrings, ...inputValues) {
         return transformCssTemplate(inputTemplateStrings, inputValues);
     });
     const cssResult = litCss(transformedTemplate.strings, 
-    /** The filter will remove the FunctionalElement elements */
+    /** The filter will remove the DeclarativeElement elements */
     ...transformedTemplate.values);
     return cssResult;
 }

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

@@ -1,5 +1,5 @@
 import { collapseWhiteSpace, safeMatch } from 'augment-vir';
-import { functionalElementRequired } from '../../require-functional-element';
+import { declarativeElementRequired } from '../../require-declarative-element';
 import { hasStaticTagName } from '../has-static-tag-name';
 import { makeCheckTransform, transformTemplate, } from '../transform-template';
 const htmlChecksAndTransforms = [
@@ -32,10 +32,10 @@ function extractCustomElementTags(input) {
     }, []);
 }
 function stringValidator(input) {
-    if (functionalElementRequired) {
+    if (declarativeElementRequired) {
         const customElementTagNames = extractCustomElementTags(input);
         if (customElementTagNames.length) {
-            console.error(`Custom element tags must be interpolated from functional elements: ${customElementTagNames.join(', ')}`);
+            console.error(`Custom element tags must be interpolated from declarative elements: ${customElementTagNames.join(', ')}`);
         }
     }
 }

package/dist/template-transforms/vir-html/vir-html.d.ts

@@ -1,3 +1,3 @@
 import { HTMLTemplateResult } from 'lit';
-/** Enables interpolation of FunctionalElement tag names */
+/** Enables interpolation of DeclarativeElement tag names */
 export declare function html(inputTemplateStrings: TemplateStringsArray, ...inputValues: unknown[]): HTMLTemplateResult;

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

@@ -1,7 +1,7 @@
 import { html as litHtml } from 'lit';
 import { getTransformedTemplate } from '../transform-template';
 import { transformHtmlTemplate } from './html-transform';
-/** Enables interpolation of FunctionalElement tag names */
+/** Enables interpolation of DeclarativeElement tag names */
 export function html(inputTemplateStrings, ...inputValues) {
     const litTemplate = litHtml(inputTemplateStrings, ...inputValues);
     const transformedTemplate = getTransformedTemplate(inputTemplateStrings, inputValues, () => {

package/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Element Vir Test</title>
+        <script type="module" src="/src/test/elements/app.element.ts"></script>
+        <link rel="stylesheet" type="text/css" href="/index.css" />
+        <script>
+            console.info('yo');
+        </script>
+    </head>
+    <body>
+        <element-vir-test-app></element-vir-test-app>
+    </body>
+</html>

package/package.json

@@ -1,21 +1,21 @@
 {
     "name": "element-vir",
-    "version": "5.6.0",
+    "version": "6.0.0",
     "keywords": [
         "custom",
         "web",
         "components",
         "elements",
-        "functional",
+        "declarative",
         "lit"
     ],
-    "homepage": "https://github.com/electrovir/element-vir#readme",
+    "homepage": "https://github.com/electrovir/element-vir",
     "bugs": {
         "url": "https://github.com/electrovir/element-vir/issues"
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/electrovir/element-vir.git"
+        "url": "https://github.com/electrovir/element-vir"
     },
     "license": "MIT",
     "author": {
@@ -26,23 +26,23 @@
     "types": "dist/index.d.ts",
     "scripts": {
         "compile": "rm -rf dist && tsc --project tsconfig.json",
-        "format": "virmator format write",
-        "jest": "jest --config ./src/jest/jest.config.ts",
+        "format": "virmator format",
         "prepublishOnly": "npm run compile && npm run test:full",
         "spellcheck": "virmator spellcheck",
-        "start": "npm install && vite --force --config ./src/vite/vite.config.ts",
-        "test": "npm run type-check && virmator test --no-write-config",
+        "start": "npm install && virmator frontend",
+        "test": "npm run test:types && virmator test-web",
         "test:full": "npm test && npm run spellcheck && virmator format check && npm run update-docs -- --check",
-        "type-check": "tsc --noEmit",
+        "test:types": "tsc --noEmit",
         "update-docs": "virmator code-in-markdown README.md --index src/index.ts"
     },
     "dependencies": {
-        "augment-vir": "2.2.1",
-        "lit": "2.2.7"
+        "augment-vir": "2.5.0",
+        "lit": "2.3.1"
     },
     "devDependencies": {
-        "jest-environment-jsdom": "28.1.2",
-        "virmator": "2.0.7",
-        "vite": "2.9.13"
+        "@open-wc/testing": "3.1.6",
+        "@web/dev-server-esbuild": "0.3.2",
+        "@web/test-runner": "0.14.0",
+        "virmator": "3.0.6"
     }
 }

package/public/index.css

@@ -0,0 +1,7 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}

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

@@ -1,4 +0,0 @@
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
-import { FunctionalElement, FunctionalElementInit } from './functional-element';
-export declare function defineFunctionalElement<HostClassKeys extends string = '', CssVarKeys extends string = '', EventsInitGeneric extends EventsInitMap = {}, PropertyInitGeneric extends PropertyInitMapBase = {}>(functionalElementInit: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): FunctionalElement<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

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

@@ -1,70 +0,0 @@
-import { css } from 'lit';
-import { property } from 'lit/decorators.js';
-import { createCssVarNamesMap, createCssVarValuesMap } from './css-vars';
-import { createEventDescriptorMap } from './element-events';
-import { createPropertyDescriptorMap, createPropertyProxy, } from './element-properties';
-import { FunctionalElementBaseClass, } from './functional-element';
-import { createHostClassNamesMap } from './host-classes';
-import { createRenderParams } from './render-callback';
-import { applyHostClasses, hostClassNamesToStylesInput } from './styles';
-const defaultInit = {
-    events: {},
-    props: {},
-};
-export function defineFunctionalElement(functionalElementInit) {
-    var _a;
-    const eventsMap = createEventDescriptorMap(functionalElementInit.events);
-    const hostClassNames = createHostClassNamesMap(functionalElementInit.tagName, functionalElementInit.hostClasses);
-    const cssVarNames = createCssVarNamesMap(functionalElementInit.tagName, functionalElementInit.cssVars);
-    const cssVarValues = createCssVarValuesMap(functionalElementInit.cssVars, cssVarNames);
-    console.log({ hostClassNames });
-    console.log(hostClassNamesToStylesInput({
-        hostClassNames,
-        cssVarNames,
-        cssVarValues,
-    }));
-    const calculatedStyles = typeof functionalElementInit.styles === 'function'
-        ? functionalElementInit.styles(hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues }))
-        : functionalElementInit.styles || css ``;
-    if (typeof functionalElementInit.styles === 'function') {
-        console.log({ calculatedStyles: String(calculatedStyles) });
-    }
-    const anonymousClass = (_a = class extends FunctionalElementBaseClass {
-            constructor() {
-                super();
-                this.initCalled = false;
-                this.instanceProps = createPropertyProxy(functionalElementInit.props, this);
-                const initProps = functionalElementInit.props || {};
-                Object.keys(initProps).forEach((propName) => {
-                    const functionalElementInstance = this;
-                    property()(functionalElementInstance, propName);
-                    functionalElementInstance[propName] = initProps[propName];
-                });
-            }
-            createRenderParams() {
-                return createRenderParams(this, eventsMap);
-            }
-            render() {
-                const renderParams = this.createRenderParams();
-                if (!this.initCalled && functionalElementInit.initCallback) {
-                    this.initCalled = true;
-                    functionalElementInit.initCallback(renderParams);
-                }
-                const renderResult = functionalElementInit.renderCallback(renderParams);
-                applyHostClasses(renderParams.host, functionalElementInit.hostClasses, hostClassNames, renderParams.props);
-                return renderResult;
-            }
-        },
-        _a.tagName = functionalElementInit.tagName,
-        _a.styles = calculatedStyles,
-        _a.init = { ...defaultInit, ...functionalElementInit },
-        _a.events = eventsMap,
-        _a.renderCallback = functionalElementInit.renderCallback,
-        _a.props = createPropertyDescriptorMap(functionalElementInit.props),
-        _a.hostClasses = hostClassNames,
-        _a.cssVarNames = cssVarNames,
-        _a.cssVarValues = cssVarNames,
-        _a);
-    window.customElements.define(functionalElementInit.tagName, anonymousClass);
-    return anonymousClass;
-}

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

@@ -1,19 +0,0 @@
-import { AsyncDirective } from 'lit/async-directive.js';
-import { PartInfo } from 'lit/directive.js';
-import { StaticElementPropertyDescriptor } from '../element-properties';
-/**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
- */
-export declare function assignWithCleanup<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue'], cleanupCallback: CleanupCallback<typeof propertyDescriptor['initValue']>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
-export declare type CleanupCallback<T> = (oldValue: T) => void;
-export declare type EqualityCheckCallback<T> = (oldValue: T, newValue: T) => boolean;
-declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
-    private readonly element;
-    private lastValue;
-    private lastCallback;
-    constructor(partInfo: PartInfo);
-    disconnected(): void;
-    render(propName: string, value: unknown, cleanupCallback: CleanupCallback<any>, equalityCheck?: EqualityCheckCallback<any>): symbol;
-}
-export {};

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

@@ -1,36 +0,0 @@
-import { noChange } from 'lit';
-import { AsyncDirective } from 'lit/async-directive.js';
-import { directive } from 'lit/directive.js';
-import { extractFunctionalElement } from './directive-util';
-/**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
- */
-export function assignWithCleanup(propertyDescriptor, value, cleanupCallback) {
-    return assignWithCleanupDirective(propertyDescriptor.propName, value, cleanupCallback);
-}
-class AssignWithCleanupDirectiveClass extends AsyncDirective {
-    constructor(partInfo) {
-        super(partInfo);
-        this.element = extractFunctionalElement(partInfo, 'assign');
-    }
-    disconnected() {
-        if (this.lastValue != undefined && this.lastCallback != undefined) {
-            this.lastCallback(this.lastValue);
-        }
-    }
-    render(propName, value, cleanupCallback, equalityCheck = (a, b) => a === b) {
-        if (!(propName in this.element.instanceProps)) {
-            throw new Error(`${this.element.tagName} element has no property of name "${propName}"`);
-        }
-        // reference equality check!
-        if (!equalityCheck(this.lastValue, value)) {
-            cleanupCallback(this.lastValue);
-        }
-        this.element.instanceProps[propName] = value;
-        this.lastValue = value;
-        this.lastCallback = cleanupCallback;
-        return noChange;
-    }
-}
-const assignWithCleanupDirective = directive(AssignWithCleanupDirectiveClass);

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

@@ -1,15 +0,0 @@
-import { PartInfo } from 'lit/directive.js';
-import { PropertyInitMapBase, StaticElementPropertyDescriptor } from '../element-properties';
-import { FunctionalElementInstanceFromInit } from '../functional-element';
-/**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
- */
-export declare function assign<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue']): import("lit-html/directive").DirectiveResult<{
-    new (partInfo: PartInfo): {
-        readonly element: FunctionalElementInstanceFromInit<PropertyInitMapBase>;
-        render(propName: string, value: unknown): symbol;
-        readonly _$isConnected: boolean;
-        update(_part: import("lit-html").Part, props: unknown[]): unknown;
-    };
-}>;

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

@@ -1,23 +0,0 @@
-import { noChange } from 'lit';
-import { directive, Directive } from 'lit/directive.js';
-import { extractFunctionalElement } from './directive-util';
-/**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
- */
-export function assign(propertyDescriptor, value) {
-    return assignDirective(propertyDescriptor.propName, value);
-}
-const assignDirective = directive(class extends Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        this.element = extractFunctionalElement(partInfo, 'assign');
-    }
-    render(propName, value) {
-        if (!(propName in this.element.instanceProps)) {
-            throw new Error(`${this.element.tagName} element has no property of name "${propName}"`);
-        }
-        this.element.instanceProps[propName] = value;
-        return noChange;
-    }
-});

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

@@ -1,50 +0,0 @@
-function assertValidPropertyName(propertyName, propsInitMap, elementTagName) {
-    if (typeof propertyName !== 'string') {
-        throw new Error(`Property name must be a string, got type "${typeof propertyName}" from: "${String(propertyName)}" for ${elementTagName}`);
-    }
-    if (!(propertyName in propsInitMap)) {
-        throw new Error(`Property name "${propertyName}" does not exist on ${elementTagName}.`);
-    }
-}
-export function createPropertyProxy(propsInitMap, element) {
-    if (!propsInitMap) {
-        return {};
-    }
-    const props = Object.keys(propsInitMap).reduce((accum, propertyName) => {
-        accum[propertyName] = element[propertyName];
-        return accum;
-    }, {});
-    const propsProxy = new Proxy(props, {
-        get: (_target, propertyName) => {
-            assertValidPropertyName(propertyName, propsInitMap, element.tagName);
-            return element[propertyName];
-        },
-        set: (_target, propertyName, value) => {
-            assertValidPropertyName(propertyName, propsInitMap, element.tagName);
-            element[propertyName] = value;
-            return true;
-        },
-    });
-    return propsProxy;
-}
-export function createPropertyDescriptorMap(propertyInit) {
-    if (!propertyInit) {
-        return {};
-    }
-    return Object.keys(propertyInit)
-        .filter((key) => {
-        if (typeof key === 'string') {
-            return true;
-        }
-        else {
-            throw new Error(`Property init cannot have non string keys: "${key}"`);
-        }
-    })
-        .reduce((accum, currentKey) => {
-        accum[currentKey] = {
-            propName: currentKey,
-            initValue: propertyInit[currentKey],
-        };
-        return accum;
-    }, {});
-}

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

@@ -1,57 +0,0 @@
-import { RequiredBy } from 'augment-vir';
-import { CSSResult, LitElement, TemplateResult } from 'lit';
-import { CssVarNameOrValueMap, CssVarsInitMap } from './css-vars';
-import { EventDescriptorMap, EventsInitMap } from './element-events';
-import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
-import { HostClassesInitMap, HostClassNamesMap } from './host-classes';
-import { InitCallback, RenderCallback } from './render-callback';
-import { StylesCallback } from './styles';
-export declare type CustomElementTagName = `${string}-${string}`;
-export declare type FunctionalElementInit<PropertyInitGeneric 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".) */
-    props?: PropertyInitGeneric;
-    /** 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 props, or just undefined to indicate that the host class will only
-     * be manually set.
-     */
-    hostClasses?: HostClassesInitMap<HostClassKeys, PropertyInitGeneric>;
-    cssVars?: CssVarsInitMap<CssVarKeys>;
-    /** Called as part of the first renderCallback call, before the first renderCallback call. */
-    initCallback?: InitCallback<PropertyInitGeneric, EventsInitGeneric>;
-    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
-};
-export declare abstract class FunctionalElementBaseClass<PropertyInitGeneric extends PropertyInitMapBase> extends LitElement {
-    static readonly tagName: string;
-    static readonly styles: CSSResult;
-    abstract render(): TemplateResult | Promise<TemplateResult>;
-    abstract readonly instanceProps: PropertyInitGeneric;
-}
-export declare type FunctionalElementInstanceFromInit<PropertyInitGeneric extends PropertyInitMapBase = {}> = FunctionalElementBaseClass<NonNullable<Required<PropertyInitGeneric>>> & PropertyInitGeneric;
-export declare type FunctionalElementInstance<FunctionalElementGeneric extends FunctionalElement> = FunctionalElementInstanceFromInit<FunctionalElementGeneric['init']['props']>;
-export declare type FunctionalElement<PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> = (new () => FunctionalElementInstanceFromInit<PropertyInitGeneric>) & ExtraStaticFunctionalElementProperties<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
-export declare type ExtraStaticFunctionalElementProperties<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = Readonly<{
-    /** Pass through the render callback for direct unit testability */
-    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
-    events: EventDescriptorMap<EventsInitGeneric>;
-    props: ElementPropertyDescriptorMap<PropertyInitGeneric>;
-    init: RequiredBy<FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'props' | 'events'>;
-    hostClasses: HostClassNamesMap<string, HostClassKeys>;
-    cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
-    cssVarValues: CssVarNameOrValueMap<CssVarKeys>;
-    /**
-     * Static properties have to be copied here cause they get nuked in the "new () =>
-     * FunctionalElementInstance<PropertyInitGeneric>" type.
-     */
-    tagName: string;
-    styles: CSSResult;
-}>;

package/dist/functional-element/functional-element.js

@@ -1,3 +0,0 @@
-import { LitElement } from 'lit';
-export class FunctionalElementBaseClass extends LitElement {
-}