[major] use observavir for asyncProp

destroy state props on cleanup change stateSetupKey to a symbol simplify updateState interface rename AsyncPropValue to AsyncValue
electrovir · Mar 30, 2024 · da4b3dd · da4b3dd
1 parent 7a01630
commit da4b3dd
Show file tree

Hide file tree

Showing 45 changed files with 355 additions and 1,228 deletions.
diff --git a/cspell.config.cjs b/cspell.config.cjs
@@ -7,5 +7,6 @@ module.exports = {
     ],
     words: [
         ...baseConfig.words,
+        'observavir',
     ],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/element-vir-mono-repo",
-    "version": "20.0.9",
+    "version": "21.0.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "author": {
@@ -12,12 +12,12 @@
     ],
     "scripts": {
         "build:pages": "npm run --workspace @electrovir/scripts build",
-        "compile": "mono-vir for-each \"rm -rf dist && rm -f tsconfig.tsbuildinfo && tsc -b --pretty\"",
+        "compile": "mono-vir for-each \"tsc -b -f --pretty\"",
         "docs": "mono-vir for-each-async npm run --if-present docs",
         "format": "virmator format",
         "publish": "virmator publish \"npm run compile && npm run --workspace @electrovir/scripts update:deps && npm i && npm run test:all\"",
         "test": "mono-vir for-each-async npm test",
-        "test:all": "concurrently -c auto -m 90% --kill-others-on-fail --colors --names tests,spelling,format,docs,build \"npm run test:coverage\" \"npm run test:spelling\" \"npm run test:format\" \"npm run test:docs\" \"npm run build:pages\"",
+        "test:all": "npm run compile && concurrently -c auto -m 90% --kill-others-on-fail --colors --names tests,spelling,format,docs,build \"npm run test:coverage\" \"npm run test:spelling\" \"npm run test:format\" \"npm run test:docs\" \"npm run build:pages\"",
         "test:coverage": "npm run test coverage",
         "test:deps": "virmator deps check",
         "test:docs": "mono-vir for-each-async npm run --if-present test:docs",

diff --git a/packages/element-book-example/package.json b/packages/element-book-example/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/element-book-example",
-    "version": "20.0.9",
+    "version": "21.0.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "scripts": {

diff --git a/packages/element-book/package.json b/packages/element-book/package.json
@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "20.0.9",
+    "version": "21.0.0",
     "keywords": [
         "book",
         "design system",
@@ -48,7 +48,7 @@
         "lit-css-vars": "^3.0.9",
         "spa-router-vir": "^3.0.4",
         "typed-event-target": "^3.2.1",
-        "vira": "20.0.9"
+        "vira": "21.0.0"
     },
     "devDependencies": {
         "@augment-vir/browser-testing": "^26.2.1",

diff --git a/packages/element-book/src/data/book-entry/book-page/define-book-page.test.ts b/packages/element-book/src/data/book-entry/book-page/define-book-page.test.ts
@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing';
-import {createSetterObservableProp} from 'element-vir';
+import {Observable} from 'element-vir';
 import {assertTypeOf} from 'run-time-assertions';
 import {BookPageControlTypeEnum, definePageControl} from './book-page-controls';
 import {defineBookPage, defineBookPageWithGlobals} from './define-book-page';
@@ -34,7 +34,7 @@ describe(defineBookPage.name, () => {
                 defineExample({
                     title: 'example with observable property state',
                     stateInitStatic: {
-                        observable: createSetterObservableProp<number | undefined>(undefined),
+                        observable: new Observable<number | undefined>({defaultValue: undefined}),
                     },
                     descriptionParagraphs: [
                         'yo',

diff --git a/packages/element-vir-example/package.json b/packages/element-vir-example/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/element-vir-example",
-    "version": "20.0.9",
+    "version": "21.0.0",
     "private": true,
     "license": "(MIT or CC0 1.0)",
     "author": {

diff --git a/packages/element-vir-example/src/element.test.ts b/packages/element-vir-example/src/element.test.ts
@@ -3,7 +3,7 @@ import {
     DeclarativeElement,
     DeclarativeElementDefinition,
     EventObjectEventDetailExtractor,
-    ObservableProp,
+    Observable,
     TemplateResult,
     TypedEvent,
     css,
@@ -110,7 +110,7 @@ describe('test elements', () => {
             width: number;
             showChild: boolean;
             derp: Record<string, string>;
-            myObservable: ObservableProp<number>;
+            myObservable: Observable<number>;
         };
 
         const stateInitStatic: ReadonlyArray<keyof AppElementProps> = getObjectTypedKeys(

diff --git a/packages/element-vir-example/src/elements/entries/observable-props.book.ts b/packages/element-vir-example/src/elements/entries/observable-props.book.ts
@@ -1,16 +1,10 @@
 import {randomInteger} from '@augment-vir/common';
 import {defineBookPage} from 'element-book';
-import {
-    createSetterObservableProp,
-    defineElement,
-    defineElementNoInputs,
-    html,
-    listen,
-} from 'element-vir';
+import {Observable, defineElement, defineElementNoInputs, html, listen} from 'element-vir';
 
-const myObservableProp = createSetterObservableProp(5);
+const myObservable = new Observable({defaultValue: 5});
 
-const VirObservablePropsTestParent = defineElementNoInputs({
+const VirObservablesTestParent = defineElementNoInputs({
     tagName: 'vir-observable-prop-input-test-parent',
     stateInitStatic: {
         renderCount: 0,
@@ -20,14 +14,14 @@ const VirObservablePropsTestParent = defineElementNoInputs({
         return html`
             <p>Parent render count (should not change): ${state.renderCount}</p>
             <p>
-                <${VirObservablePropsTestChild.assign({
-                    observableProp: myObservableProp,
-                })}></${VirObservablePropsTestChild}>
+                <${VirObservablesTestChild.assign({
+                    observableProp: myObservable,
+                })}></${VirObservablesTestChild}>
             </p>
             <p>
                 <button
                     ${listen('click', () => {
-                        myObservableProp.setValue(randomInteger({min: 1, max: 100}));
+                        myObservable.setValue(randomInteger({min: 1, max: 100}));
                     })}
                 >
                     trigger update from parent
@@ -36,7 +30,7 @@ const VirObservablePropsTestParent = defineElementNoInputs({
         `;
     },
 });
-const VirObservablePropsTestChild = defineElement<{observableProp: typeof myObservableProp}>()({
+const VirObservablesTestChild = defineElement<{observableProp: typeof myObservable}>()({
     tagName: 'vir-observable-prop-input-test-child',
     stateInitStatic: {
         renderCount: 0,
@@ -67,7 +61,7 @@ export const observablePropInputTestPage = defineBookPage({
             title: 'test',
             renderCallback() {
                 return html`
-                    <${VirObservablePropsTestParent}></${VirObservablePropsTestParent}>
+                    <${VirObservablesTestParent}></${VirObservablesTestParent}>
                 `;
             },
         });