element-vir 14.2.1 → 15.0.0

package/README.md

@@ -637,7 +637,7 @@ export const MyWithRenderIf = defineElement<{shouldRender: boolean}>()({
 
 ### `asyncProp`
 
-Use `renderAsyncProp` or `isRenderReady` in conjunction with `asyncProp` to seamlessly render and update element state based on async values:
+Use `renderAsync` or `isRenderReady` in conjunction with `asyncProp` to seamlessly render and update element state based on async values:
 
 <!-- example-link: src/readme-examples/my-with-async-prop.element.ts -->
 

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

@@ -30,7 +30,7 @@ export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs
      * based on current instance state or inputs, or just false to indicate that the host class will
      * only be manually set.
      */
-    hostClasses?: HostClassesInitMap<TagName, HostClassKeys, FlattenObservablePropertyGetters<Inputs>, FlattenObservablePropertyGetters<StateInit>>;
+    hostClasses?: HostClassesInitMap<TagName, HostClassKeys, Inputs, FlattenObservablePropertyGetters<StateInit>>;
     /**
      * CSS Vars for the component. Keys of this object should be kebab-case and start with the
      * element's tag name.

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

@@ -1,5 +1,6 @@
 import { RequiredAndNotNullBy, RequiredBy } from '@augment-vir/common';
 import { CSSResult, LitElement } from 'lit';
+import { Exact } from 'type-fest';
 import { WrappedMinimalDefinition } from '../template-transforms/minimal-element-definition';
 import { CustomElementTagName, DeclarativeElementInit } from './declarative-element-init';
 import { BaseCssPropertyName } from './properties/css-properties';
@@ -7,7 +8,7 @@ import { CssVars } from './properties/css-vars';
 import { EventDescriptorMap, EventsInitMap } from './properties/element-events';
 import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './properties/element-properties';
 import { HostClassNamesMap } from './properties/host-classes';
-import { AllowObservablePropertySetter, FlattenObservablePropertyGetters, ObservablePropertyHandlerMap } from './properties/observable-property/observable-property-handler';
+import { FlattenObservablePropertyGetters, ObservablePropertyHandlerMap } from './properties/observable-property/observable-property-handler';
 import { RenderCallback, RenderParams, UpdateStateCallback } from './render-callback';
 export type DeclarativeElementHost<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, StateInit extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any> = RequiredAndNotNullBy<Omit<DeclarativeElement<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, any>, Exclude<keyof StaticDeclarativeElementProperties<any, any, any, any, any, any, any>, keyof HTMLElement>>, 'shadowRoot'>;
 export type DeclarativeElementDefinition<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, StateInit extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, RenderOutputGeneric = any> = (new () => DeclarativeElementHost<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys>) & StaticDeclarativeElementProperties<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, RenderOutputGeneric> & {
@@ -32,7 +33,7 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
     abstract render(): unknown;
     abstract readonly instanceState: FlattenObservablePropertyGetters<StateInit>;
     abstract readonly observablePropertyHandlerMap: ObservablePropertyHandlerMap<StateInit>;
-    abstract readonly instanceInputs: FlattenObservablePropertyGetters<Inputs>;
+    abstract readonly instanceInputs: Inputs;
     abstract assignInputs(inputs: {} extends Required<Inputs> ? never : Partial<Inputs>): void;
     abstract haveInputsBeenSet: boolean;
     abstract markInputsAsHavingBeenSet(): void;
@@ -40,9 +41,7 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
 }
 export interface StaticDeclarativeElementProperties<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, RenderOutputGeneric> {
     /** Assign inputs to an element directly on its interpolated tag. */
-    readonly assign: <const SpecificInputs extends {
-        [Prop in keyof Inputs]: unknown;
-    }>(inputsObject: {} extends Required<Inputs> ? never : AllowObservablePropertySetter<Inputs, SpecificInputs>) => WrappedMinimalDefinition;
+    readonly assign: <SpecificInputs extends Exact<Inputs, SpecificInputs>>(inputsObject: {} extends Required<Inputs> ? never : SpecificInputs) => WrappedMinimalDefinition;
     assignedInputs: Inputs | undefined;
     /** Pass through the render callback for direct unit testability */
     readonly renderCallback: RenderCallback<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, RenderOutputGeneric>;

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

@@ -142,8 +142,8 @@ export function defineElementNoInputs(initInput) {
                 // this is set below in Object.defineProperties
                 this.definition = {};
                 this.observablePropertyHandlerMap = {};
-                this.instanceInputs = createElementUpdaterProxy(this, false);
-                this.instanceState = createElementUpdaterProxy(this, !initInput.options?.allowPolymorphicState);
+                this.instanceInputs = createElementUpdaterProxy(this, false, false);
+                this.instanceState = createElementUpdaterProxy(this, !initInput.options?.allowPolymorphicState, true);
                 const stateInitStatic = initInput.stateInitStatic ||
                     {};
                 getObjectTypedKeys(stateInitStatic).forEach((stateKey) => {

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

@@ -1,7 +1,7 @@
 import { noChange } from 'lit';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { directive } from 'lit/directive.js';
-import { assignInputsObject } from './assign.directive';
+import { assignInputs } from '../properties/assign-inputs';
 import { extractElement } from './directive-helpers';
 /**
  * Assign values but include a cleanup callback which gets called when a new value gets assigned so
@@ -33,7 +33,7 @@ class AssignWithCleanupDirectiveClass extends AsyncDirective {
         if (this.hasBeenAssigned) {
             cleanupCallback(this.lastValue);
         }
-        assignInputsObject(elementDefinition, this.element, inputsObject);
+        assignInputs(this.element, inputsObject);
         this.hasBeenAssigned = true;
         this.lastValue = inputsObject;
         this.lastCallback = cleanupCallback;

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

@@ -1,6 +1,5 @@
 import { DirectiveResult } from 'lit/directive.js';
 import { PropertyInitMapBase } from '../properties/element-properties';
-import { AllowObservablePropertySetter } from '../properties/observable-property/observable-property-handler';
 export type ElementDefinitionWithInputsType<InputsType extends PropertyInitMapBase = PropertyInitMapBase> = {
     inputsType: InputsType;
 };
@@ -14,10 +13,15 @@ export type ElementDefinitionWithInputsType<InputsType extends PropertyInitMapBa
  *     should be
  *     html`<${MyElement.assign({value: 1})}>...`
  */
-export declare function assign<const SpecificDeclarativeElement extends ElementDefinitionWithInputsType, const SpecificInput extends {
-    [Prop in keyof SpecificDeclarativeElement['inputsType']]: unknown;
-}>(declarativeElement: SpecificDeclarativeElement, inputsObject: {} extends Required<SpecificDeclarativeElement['inputsType']> ? never : AllowObservablePropertySetter<SpecificDeclarativeElement['inputsType'], SpecificInput>): DirectiveResult;
-export declare function assign<const SpecificDeclarativeElement extends ElementDefinitionWithInputsType, const SpecificInput extends {
-    [Prop in keyof SpecificDeclarativeElement['inputsType']]: unknown;
-}>(inputsObject: SpecificInput extends typeof HTMLElement ? never : SpecificInput): DirectiveResult;
-export declare function assignInputsObject<DeclarativeElementDefinitionGeneric extends ElementDefinitionWithInputsType>(expectedElementConstructor: DeclarativeElementDefinitionGeneric | undefined, element: Element, assignmentObject: DeclarativeElementDefinitionGeneric['inputsType']): void;
+export declare function assign<const SpecificDeclarativeElement extends ElementDefinitionWithInputsType>(declarativeElement: SpecificDeclarativeElement, inputsObject: {} 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})}>...`
+ */
+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

@@ -2,6 +2,16 @@ import { noChange } from 'lit';
 import { directive, Directive } from 'lit/directive.js';
 import { assignInputs } from '../properties/assign-inputs';
 import { extractElement } from './directive-helpers';
+/**
+ * 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})}>...`
+ */
 export function assign(declarativeElementOrInputs, inputsObject) {
     /**
      * The directive generics (in listenDirective) are not strong enough to maintain their values.
@@ -20,10 +30,7 @@ const assignDirective = directive(class extends Directive {
         this.element = extractElement(partInfo, 'assign');
     }
     render(elementDefinition, inputsObject) {
-        assignInputsObject(elementDefinition, this.element, inputsObject);
+        assignInputs(this.element, inputsObject);
         return noChange;
     }
 });
-export function assignInputsObject(expectedElementConstructor, element, assignmentObject) {
-    assignInputs(element, assignmentObject);
-}

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

@@ -1,3 +1,3 @@
 import { DeclarativeElement } from '../declarative-element';
 import { PropertyInitMapBase } from './element-properties';
-export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean): PropertyInitGeneric;
+export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean, unwrapObservables: boolean): PropertyInitGeneric;

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

@@ -8,7 +8,7 @@ function assertValidPropertyName(propKey, element, elementTagName) {
         throw new Error(`Property '${String(propKey)}' does not exist on '${elementTagName.toLowerCase()}'.`);
     }
 }
-export function createElementUpdaterProxy(element, verifyExists) {
+export function createElementUpdaterProxy(element, verifyExists, unwrapObservables) {
     /**
      * Lit element updates state and inputs by setting them directly on the element, so we must do
      * that here. DeclarativeElement's types, however, do not expose this behavior, so we add that
@@ -45,11 +45,11 @@ export function createElementUpdaterProxy(element, verifyExists) {
                 target[propertyKey] = value;
                 elementAsProps[propertyKey] = value;
             }
-            if (isObservablePropertyHandlerCreator(newValue)) {
+            if (unwrapObservables && isObservablePropertyHandlerCreator(newValue)) {
                 newValue = newValue.init();
             }
             /** If we're using an existing observable property */
-            if (isObservablePropertyHandlerInstance(newValue)) {
+            if (unwrapObservables && isObservablePropertyHandlerInstance(newValue)) {
                 if (existingObservablePropertyHandler &&
                     newValue !== existingObservablePropertyHandler) {
                     newValue.addMultipleListeners(existingObservablePropertyHandler.getAllListeners());
@@ -64,7 +64,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
                 element.observablePropertyHandlerMap[propertyKey] = newValue;
             }
             else {
-                if (existingObservablePropertyHandler) {
+                if (unwrapObservables && existingObservablePropertyHandler) {
                     existingObservablePropertyHandler.setValue(newValue);
                 }
                 else {

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

@@ -14,6 +14,6 @@ export type RenderParams<TagName extends CustomElementTagName, Inputs extends Pr
     events: EventDescriptorMap<EventsInit>;
     host: DeclarativeElementHost<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys>;
     dispatch: <EventTypeName extends keyof EventsInit>(event: TypedEvent<EventTypeName extends string ? EventTypeName : never, EventInitMapEventDetailExtractor<EventTypeName, EventsInit>> | Event) => boolean;
-    inputs: Readonly<FlattenObservablePropertyGetters<Inputs>>;
+    inputs: Readonly<Inputs>;
 };
 export declare function createRenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, RenderOutput>(element: DeclarativeElement<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, RenderOutput>, eventsMap: EventDescriptorMap<EventsInit>): RenderParams<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "14.2.1",
+    "version": "15.0.0",
     "keywords": [
         "custom",
         "web",
@@ -39,15 +39,14 @@
         "test:types": "tsc --noEmit"
     },
     "dependencies": {
-        "@augment-vir/browser": "^15.4.0",
-        "@augment-vir/common": "^15.4.0",
-        "element-vir": "^14.1.0",
+        "@augment-vir/browser": "^15.4.1",
+        "@augment-vir/common": "^15.4.1",
         "lit": "2.7.6",
         "lit-css-vars": "^2.0.3"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.4.0",
-        "@augment-vir/node-js": "^15.4.0",
+        "@augment-vir/browser-testing": "^15.4.1",
+        "@augment-vir/node-js": "^15.4.1",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
@@ -56,11 +55,11 @@
         "@web/test-runner": "^0.17.0",
         "@web/test-runner-commands": "^0.8.0",
         "@web/test-runner-playwright": "^0.10.1",
-        "@web/test-runner-visual-regression": "^0.8.1",
+        "@web/test-runner-visual-regression": "^0.8.2",
         "ansi-colors": "^4.1.3",
         "concurrently": "^8.2.0",
         "cspell": "^6.31.2",
-        "esbuild": "^0.18.14",
+        "esbuild": "^0.18.15",
         "istanbul-smart-text-reporter": "^1.1.2",
         "markdown-code-example-inserter": "^0.3.1",
         "mocha-spec-reporter-with-file-names": "^0.0.3",
@@ -77,8 +76,8 @@
         "ts-node": "^10.9.1",
         "type-fest": "^4.0.0",
         "typescript": "~5.1.6",
-        "virmator": "^7.2.4",
-        "vite": "^4.4.4",
+        "virmator": "^7.2.5",
+        "vite": "^4.4.6",
         "vite-tsconfig-paths": "^4.2.0"
     },
     "overrides": {

package/www-static/index.css

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