fix assign types so it allows unions

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 -->
 

configs/vite.config.ts

@@ -1,6 +1,5 @@
-import {baseViteConfig} from 'virmator/dist/compiled-base-configs/base-vite';
-import {defineConfig} from 'vite';
+import {defineConfig} from 'virmator/dist/compiled-base-configs/base-vite';
 
-export default defineConfig({
-    ...baseViteConfig,
+export default defineConfig({forGitHubPages: true}, (baseConfig) => {
+    return baseConfig;
 });

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "14.2.1",
+    "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": {

src/declarative-element/declarative-element.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';
@@ -8,7 +9,6 @@ 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';
@@ -249,13 +249,9 @@ export interface StaticDeclarativeElementProperties<
 > {
     /** Assign inputs to an element directly on its interpolated tag. */
     readonly assign: <
-        const SpecificInputs extends {
-            [Prop in keyof Inputs]: unknown;
-        },
+        const SpecificInputs extends AllowObservablePropertySetter<Inputs, SpecificInputs>,
     >(
-        inputsObject: {} extends Required<Inputs>
-            ? never
-            : AllowObservablePropertySetter<Inputs, SpecificInputs>,
+        inputsObject: {} extends Required<Inputs> ? never : SpecificInputs,
     ) => WrappedMinimalDefinition;
     assignedInputs: Inputs | undefined;
 

src/declarative-element/define-element.test.ts

@@ -1,4 +1,4 @@
-import {randomString} from '@augment-vir/browser';
+import {randomBoolean, randomString} from '@augment-vir/browser';
 import {defineElement} from './define-element';
 
 describe(defineElement.name, () => {
@@ -39,9 +39,25 @@ describe(defineElement.name, () => {
             maybeUndefined: undefined,
         });
 
+        type MyType = {thing: string} | {derp: number};
+
+        type Mapped<T> = T extends any ? {[Prop in keyof T]: {value: T[Prop]}} : never;
+
+        const derp: Mapped<MyType> = {derp: {value: 5}};
+
         MyElement.assign({
             maybeUndefined: '',
         });
+        const myThing = randomBoolean();
+        MyElement.assign(
+            myThing
+                ? {
+                      maybeUndefined: '',
+                  }
+                : {
+                      maybeInput: 'hi',
+                  },
+        );
 
         MyElement.assign({});
     });

src/declarative-element/directives/assign-with-clean-up.directive.ts

@@ -1,7 +1,8 @@
 import {noChange} from 'lit';
 import {AsyncDirective} from 'lit/async-directive.js';
 import {directive, PartInfo} from 'lit/directive.js';
-import {assignInputsObject, ElementDefinitionWithInputsType} from './assign.directive';
+import {assignInputs} from '../properties/assign-inputs';
+import {ElementDefinitionWithInputsType} from './assign.directive';
 import {extractElement} from './directive-helpers';
 
 export type CleanupCallback<T> = (oldValue: T) => void;
@@ -61,7 +62,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;

src/declarative-element/directives/assign.directive.ts

@@ -30,12 +30,32 @@ export function assign<
         ? 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 function assign<
     const SpecificDeclarativeElement extends ElementDefinitionWithInputsType,
     const SpecificInput extends {
         [Prop in keyof SpecificDeclarativeElement['inputsType']]: unknown;
     },
 >(inputsObject: SpecificInput extends typeof HTMLElement ? never : 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 function assign<
     const SpecificDeclarativeElement extends ElementDefinitionWithInputsType,
     const SpecificInput extends {
@@ -75,18 +95,8 @@ const assignDirective = directive(
             elementDefinition: ElementDefinitionWithInputsType | undefined,
             inputsObject: Record<PropertyKey, unknown>,
         ) {
-            assignInputsObject(elementDefinition, this.element, inputsObject);
+            assignInputs(this.element, inputsObject);
             return noChange;
         }
     },
 );
-
-export function assignInputsObject<
-    DeclarativeElementDefinitionGeneric extends ElementDefinitionWithInputsType,
->(
-    expectedElementConstructor: DeclarativeElementDefinitionGeneric | undefined,
-    element: Element,
-    assignmentObject: DeclarativeElementDefinitionGeneric['inputsType'],
-) {
-    assignInputs(element, assignmentObject);
-}

index.html → src/index.html

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

src/test/element.type.test.ts

@@ -12,6 +12,7 @@ import {
     EventObjectEventDetailExtractor,
     html,
     listen,
+    ObservablePropertyHandlerInstance,
     TypedEvent,
 } from '..';
 import {DeclarativeElementDefinition} from '../declarative-element/declarative-element';
@@ -104,6 +105,7 @@ type AppElementProps = {
     width: number;
     showChild: boolean;
     derp: Record<string, string>;
+    myObservable: ObservablePropertyHandlerInstance<number, number>;
 };
 
 const stateInitStatic: ReadonlyArray<keyof AppElementProps> = getObjectTypedKeys(

src/test/elements/app.element.ts

@@ -16,10 +16,6 @@ import {TestChildElement} from './child.element';
 
 requireAllCustomElementsToBeDeclarativeElements();
 
-const myObservable = createObservableProperty(5);
-
-console.log({myObservable});
-
 export const AppElement = defineElementNoInputs({
     tagName: 'element-vir-test-app',
     styles: css`
@@ -74,6 +70,7 @@ export const AppElement = defineElementNoInputs({
         width: -1,
         showChild: true,
         derp: {hi: 'yo'} as Record<string, string>,
+        myObservable: createObservableProperty(5),
     },
     renderCallback({state, updateState}) {
         // log here to make sure it's not rendering too often
@@ -101,7 +98,7 @@ export const AppElement = defineElementNoInputs({
                 <${TestChildElement.assign({
                     displayNumber: state.funnyNumber,
                     width: state.width,
-                    myProp: myObservable,
+                    myProp: state.myObservable,
                 })}
                     ${listen(TestChildElement.events.speak, (event) => {
                         updateState({