element-vir 14.2.0 → 14.2.2

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.d.ts

@@ -1,4 +1,5 @@
 import { RequiredAndNotNullBy, RequiredBy } from '@augment-vir/common';
+import { AllowObservablePropertySetter } from 'element-vir';
 import { CSSResult, LitElement } from 'lit';
 import { WrappedMinimalDefinition } from '../template-transforms/minimal-element-definition';
 import { CustomElementTagName, DeclarativeElementInit } from './declarative-element-init';
@@ -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, FlattenObservablePropertySetters, 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> & {
@@ -40,16 +41,14 @@ 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: <const SpecificInputs extends AllowObservablePropertySetter<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>;
     readonly events: EventDescriptorMap<EventsInit>;
     readonly stateInitStatic: ElementPropertyDescriptorMap<StateInit>;
     readonly init: RequiredBy<DeclarativeElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, RenderOutputGeneric>, 'stateInitStatic' | 'events'>;
-    readonly inputsType: Readonly<FlattenObservablePropertySetters<Inputs, Inputs>>;
+    readonly inputsType: Inputs;
     readonly stateType: Readonly<FlattenObservablePropertyGetters<StateInit>>;
     readonly updateStateType: UpdateStateCallback<StateInit>;
     readonly isStrictInstance: (element: unknown) => element is DeclarativeElement<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, RenderOutputGeneric>;

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

@@ -17,7 +17,16 @@ export type ElementDefinitionWithInputsType<InputsType extends PropertyInitMapBa
 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;
+/**
+ * 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 {
     [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;

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "14.2.0",
+    "version": "14.2.2",
     "keywords": [
         "custom",
         "web",
@@ -39,15 +39,15 @@
         "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",
+        "element-vir": "^14.2.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 +56,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 +77,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.5",
         "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%;
+}