add perInstance state prop helper

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "16.0.3",
+    "version": "16.1.0",
     "keywords": [
         "custom",
         "web",

src/declarative-element/declarative-element-init.ts

@@ -29,7 +29,8 @@ export type DeclarativeElementInit<
     styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys>;
     /**
      * The definition of and initial values for the element's internal state. Note that this is
-     * defined statically: the init value will be the same for all instances of this element.
+     * defined statically: the init value will be the same for all instances of this element because
+     * it is only defined once.
      */
     stateInitStatic?: StateInit;
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */

src/declarative-element/properties/per-instance.test.ts

@@ -0,0 +1,43 @@
+import {randomString} from '@augment-vir/browser';
+import {assertTypeOf, typedAssertInstanceOf} from '@augment-vir/browser-testing';
+import {assert, fixture as renderFixture} from '@open-wc/testing';
+import {html} from '../../template-transforms/vir-html/vir-html';
+import {defineElementNoInputs} from '../define-element-no-inputs';
+import {perInstance} from './per-instance';
+
+describe(perInstance.name, () => {
+    it('allows host to be assigned to instance type', async () => {
+        const MyElement = defineElementNoInputs({
+            tagName: `some-tag-${randomString()}`,
+            stateInitStatic: {
+                myPerInstanceProp: perInstance(() => ({stuff: 'hi'})),
+            },
+            renderCallback({state}) {
+                assertTypeOf(state.myPerInstanceProp).toEqualTypeOf<{stuff: string}>();
+                return state.myPerInstanceProp.stuff;
+            },
+        });
+
+        const fixture = await renderFixture(
+            html`
+                <div>
+                    <${MyElement}></${MyElement}>
+                    <${MyElement}></${MyElement}>
+                </div>
+            `,
+        );
+
+        typedAssertInstanceOf(fixture, HTMLDivElement);
+
+        const elements = Array.from(fixture.querySelectorAll(MyElement.tagName));
+
+        assert.lengthOf(elements, 2);
+
+        typedAssertInstanceOf(elements[0], MyElement);
+        typedAssertInstanceOf(elements[1], MyElement);
+        assert.isFalse(
+            elements[0].instanceState.myPerInstanceProp ===
+                elements[1].instanceState.myPerInstanceProp,
+        );
+    });
+});

src/declarative-element/properties/per-instance.ts

@@ -0,0 +1,13 @@
+import {ElementVirStateSetup} from './element-vir-state-setup';
+
+/**
+ * A state prop helper that sets up the given callback for each instance of the element that this
+ * state is contained within.
+ */
+export function perInstance<T>(creationCallback: () => T): T {
+    const stateSetup: ElementVirStateSetup<T> = {
+        _elementVirStateSetup: creationCallback,
+    };
+
+    return stateSetup as T;
+}

src/test/elements/all-book-entries.ts

@@ -1,4 +1,4 @@
-import {observablePropInputTestPage} from './entries/observable-props-as-inputs';
+import {observablePropInputTestPage} from './entries/observable-props';
 import {oldTestAppPage} from './entries/old-test-app/vir-old-test-app.element';
 
 export const allBookEntries = [

src/test/elements/entries/observable-props-as-inputs.ts → src/test/elements/entries/observable-props.ts

@@ -10,7 +10,7 @@ import {
 
 const myObservableProp = createObservablePropertyWithSetter(5);
 
-const VirObservablePropInputTestParent = defineElementNoInputs({
+const VirObservablePropsTestParent = defineElementNoInputs({
     tagName: 'vir-observable-prop-input-test-parent',
     stateInitStatic: {
         renderCount: 0,
@@ -20,23 +20,23 @@ const VirObservablePropInputTestParent = defineElementNoInputs({
         return html`
             <p>Parent render count (should not change): ${state.renderCount}</p>
             <p>
-                <${VirObservablePropInputTestChild.assign({
+                <${VirObservablePropsTestChild.assign({
                     observableProp: myObservableProp,
-                })}></${VirObservablePropInputTestChild}>
+                })}></${VirObservablePropsTestChild}>
             </p>
             <p>
                 <button
                     ${listen('click', () => {
                         myObservableProp.setValue(randomInteger({min: 1, max: 100}));
                     })}
                 >
-                    trigger update
+                    trigger update from parent
                 </button>
             </p>
         `;
     },
 });
-const VirObservablePropInputTestChild = defineElement<{observableProp: typeof myObservableProp}>()({
+const VirObservablePropsTestChild = defineElement<{observableProp: typeof myObservableProp}>()({
     tagName: 'vir-observable-prop-input-test-child',
     stateInitStatic: {
         renderCount: 0,
@@ -46,6 +46,15 @@ const VirObservablePropInputTestChild = defineElement<{observableProp: typeof my
         return html`
             <p>child render count (should increase): ${state.renderCount}</p>
             <p>observableProp value: ${inputs.observableProp.value}</p>
+            <p>
+                <button
+                    ${listen('click', () => {
+                        inputs.observableProp.setValue(randomInteger({min: 101, max: 200}));
+                    })}
+                >
+                    trigger update from child
+                </button>
+            </p>
         `;
     },
 });
@@ -58,7 +67,7 @@ export const observablePropInputTestPage = defineBookPage({
             title: 'test',
             renderCallback() {
                 return html`
-                    <${VirObservablePropInputTestParent}></${VirObservablePropInputTestParent}>
+                    <${VirObservablePropsTestParent}></${VirObservablePropsTestParent}>
                 `;
             },
         });