From 81be4ace0afd825183ba842a64485def526ac687 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 27 Nov 2023 11:24:42 +0100 Subject: [PATCH 1/3] restructure observation-api --- .../counter-workspace-view.ts | 10 +++------- src/libs/observable-api/index.ts | 16 +++------------- src/libs/observable-api/observer.test.ts | 2 +- .../{ => states}/array-state.test.ts | 0 .../observable-api/{ => states}/array-state.ts | 4 ++-- .../observable-api/{ => states}/basic-state.ts | 0 .../observable-api/{ => states}/boolean-state.ts | 0 .../observable-api/{ => states}/class-state.ts | 0 .../{ => states}/deep-state.test.ts | 0 .../observable-api/{ => states}/deep-state.ts | 13 ++++++------- src/libs/observable-api/states/index.ts | 8 ++++++++ .../observable-api/{ => states}/number-state.ts | 0 .../{ => states}/object-state.test.ts | 0 .../observable-api/{ => states}/object-state.ts | 0 .../observable-api/{ => states}/string-state.ts | 0 src/libs/observable-api/types/index.ts | 2 ++ .../mapping-function.type.ts} | 0 .../memoization-function.type.ts} | 0 .../append-to-frozen-array.function.ts | 0 .../create-observable-part.function.ts | 10 +++++----- .../{ => utils}/deep-freeze.function.ts | 0 .../default-memoization.function.ts} | 2 +- .../{ => utils}/filter-frozen-array.function.ts | 0 src/libs/observable-api/utils/index.ts | 8 ++++++++ .../naive-object-comparison.function.ts} | 0 .../partial-update-frozen-array.function.ts | 0 .../{ => utils}/push-to-unique-array.function.ts | 0 27 files changed, 39 insertions(+), 36 deletions(-) rename src/libs/observable-api/{ => states}/array-state.test.ts (100%) rename src/libs/observable-api/{ => states}/array-state.ts (97%) rename src/libs/observable-api/{ => states}/basic-state.ts (100%) rename src/libs/observable-api/{ => states}/boolean-state.ts (100%) rename src/libs/observable-api/{ => states}/class-state.ts (100%) rename src/libs/observable-api/{ => states}/deep-state.test.ts (100%) rename src/libs/observable-api/{ => states}/deep-state.ts (67%) create mode 100644 src/libs/observable-api/states/index.ts rename src/libs/observable-api/{ => states}/number-state.ts (100%) rename src/libs/observable-api/{ => states}/object-state.test.ts (100%) rename src/libs/observable-api/{ => states}/object-state.ts (100%) rename src/libs/observable-api/{ => states}/string-state.ts (100%) create mode 100644 src/libs/observable-api/types/index.ts rename src/libs/observable-api/{mapping-function.ts => types/mapping-function.type.ts} (100%) rename src/libs/observable-api/{memoization-function.ts => types/memoization-function.type.ts} (100%) rename src/libs/observable-api/{ => utils}/append-to-frozen-array.function.ts (100%) rename src/libs/observable-api/{ => utils}/create-observable-part.function.ts (77%) rename src/libs/observable-api/{ => utils}/deep-freeze.function.ts (100%) rename src/libs/observable-api/{default-memoization.ts => utils/default-memoization.function.ts} (95%) rename src/libs/observable-api/{ => utils}/filter-frozen-array.function.ts (100%) create mode 100644 src/libs/observable-api/utils/index.ts rename src/libs/observable-api/{naive-object-comparison.ts => utils/naive-object-comparison.function.ts} (100%) rename src/libs/observable-api/{ => utils}/partial-update-frozen-array.function.ts (100%) rename src/libs/observable-api/{ => utils}/push-to-unique-array.function.ts (100%) diff --git a/examples/workspace-context-counter/counter-workspace-view.ts b/examples/workspace-context-counter/counter-workspace-view.ts index 225a34bea8..2b86fdcead 100644 --- a/examples/workspace-context-counter/counter-workspace-view.ts +++ b/examples/workspace-context-counter/counter-workspace-view.ts @@ -9,7 +9,7 @@ export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) { #counterContext?: typeof EXAMPLE_COUNTER_CONTEXT.TYPE; @state() - private count = ''; + private count = 0; constructor() { super(); @@ -30,12 +30,8 @@ export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) { return html`

Counter Example

-

- Current count value: ${this.count} -

-

- This is a Workspace View, that consumes the Counter Context, and displays the current count. -

+

Current count value: ${this.count}

+

This is a Workspace View, that consumes the Counter Context, and displays the current count.

`; } diff --git a/src/libs/observable-api/index.ts b/src/libs/observable-api/index.ts index 4a9aefbd0a..cfc54989d1 100644 --- a/src/libs/observable-api/index.ts +++ b/src/libs/observable-api/index.ts @@ -1,15 +1,5 @@ export * from './observer.controller.js'; export * from './observer.js'; -export * from './basic-state.js'; -export * from './boolean-state.js'; -export * from './number-state.js'; -export * from './string-state.js'; -export * from './class-state.js'; -export * from './deep-state.js'; -export * from './array-state.js'; -export * from './object-state.js'; -export * from './create-observable-part.function.js'; -export * from './append-to-frozen-array.function.js'; -export * from './filter-frozen-array.function.js'; -export * from './partial-update-frozen-array.function.js'; -export * from './mapping-function.js'; +export * from './states/index.js'; +export * from './types/index.js'; +export * from './utils/index.js'; diff --git a/src/libs/observable-api/observer.test.ts b/src/libs/observable-api/observer.test.ts index 40550afb4f..5a84862c5e 100644 --- a/src/libs/observable-api/observer.test.ts +++ b/src/libs/observable-api/observer.test.ts @@ -1,5 +1,5 @@ import { expect } from '@open-wc/testing'; -import { UmbObjectState } from './object-state.js'; +import { UmbObjectState } from './states/object-state.js'; import { UmbObserver } from './observer.js'; describe('UmbObserver', () => { diff --git a/src/libs/observable-api/array-state.test.ts b/src/libs/observable-api/states/array-state.test.ts similarity index 100% rename from src/libs/observable-api/array-state.test.ts rename to src/libs/observable-api/states/array-state.test.ts diff --git a/src/libs/observable-api/array-state.ts b/src/libs/observable-api/states/array-state.ts similarity index 97% rename from src/libs/observable-api/array-state.ts rename to src/libs/observable-api/states/array-state.ts index 6e8dd84138..d9882c10df 100644 --- a/src/libs/observable-api/array-state.ts +++ b/src/libs/observable-api/states/array-state.ts @@ -1,6 +1,6 @@ import { UmbDeepState } from './deep-state.js'; -import { partialUpdateFrozenArray } from './partial-update-frozen-array.function.js'; -import { pushToUniqueArray } from './push-to-unique-array.function.js'; +import { partialUpdateFrozenArray } from '../utils/partial-update-frozen-array.function.js'; +import { pushToUniqueArray } from '../utils/push-to-unique-array.function.js'; /** * @export diff --git a/src/libs/observable-api/basic-state.ts b/src/libs/observable-api/states/basic-state.ts similarity index 100% rename from src/libs/observable-api/basic-state.ts rename to src/libs/observable-api/states/basic-state.ts diff --git a/src/libs/observable-api/boolean-state.ts b/src/libs/observable-api/states/boolean-state.ts similarity index 100% rename from src/libs/observable-api/boolean-state.ts rename to src/libs/observable-api/states/boolean-state.ts diff --git a/src/libs/observable-api/class-state.ts b/src/libs/observable-api/states/class-state.ts similarity index 100% rename from src/libs/observable-api/class-state.ts rename to src/libs/observable-api/states/class-state.ts diff --git a/src/libs/observable-api/deep-state.test.ts b/src/libs/observable-api/states/deep-state.test.ts similarity index 100% rename from src/libs/observable-api/deep-state.test.ts rename to src/libs/observable-api/states/deep-state.test.ts diff --git a/src/libs/observable-api/deep-state.ts b/src/libs/observable-api/states/deep-state.ts similarity index 67% rename from src/libs/observable-api/deep-state.ts rename to src/libs/observable-api/states/deep-state.ts index 7bbe0bfc9e..f944f05718 100644 --- a/src/libs/observable-api/deep-state.ts +++ b/src/libs/observable-api/states/deep-state.ts @@ -1,9 +1,9 @@ import { UmbBasicState } from './basic-state.js'; -import { createObservablePart } from './create-observable-part.function.js'; -import { deepFreeze } from './deep-freeze.function.js'; -import type { MappingFunction } from './mapping-function.js'; -import type { MemoizationFunction } from './memoization-function.js'; -import { naiveObjectComparison } from './naive-object-comparison.js'; +import { createObservablePart } from '../utils/create-observable-part.function.js'; +import { deepFreeze } from '../utils/deep-freeze.function.js'; +import type { MappingFunction } from '../types/mapping-function.type.js'; +import type { MemoizationFunction } from '../types/memoization-function.type.js'; +import { naiveObjectComparison } from '../utils/naive-object-comparison.function.js'; /** * @export @@ -13,14 +13,13 @@ import { naiveObjectComparison } from './naive-object-comparison.js'; * Additionally the Subject ensures the data is unique, not updating any Observes unless there is an actual change of the content. */ export class UmbDeepState extends UmbBasicState { - constructor(initialData: T) { super(deepFreeze(initialData)); } asObservablePart( mappingFunction: MappingFunction, - memoizationFunction?: MemoizationFunction + memoizationFunction?: MemoizationFunction, ) { return createObservablePart(this._subject, mappingFunction, memoizationFunction); } diff --git a/src/libs/observable-api/states/index.ts b/src/libs/observable-api/states/index.ts new file mode 100644 index 0000000000..c17cdd867d --- /dev/null +++ b/src/libs/observable-api/states/index.ts @@ -0,0 +1,8 @@ +export * from './basic-state.js'; +export * from './boolean-state.js'; +export * from './number-state.js'; +export * from './string-state.js'; +export * from './class-state.js'; +export * from './deep-state.js'; +export * from './array-state.js'; +export * from './object-state.js'; diff --git a/src/libs/observable-api/number-state.ts b/src/libs/observable-api/states/number-state.ts similarity index 100% rename from src/libs/observable-api/number-state.ts rename to src/libs/observable-api/states/number-state.ts diff --git a/src/libs/observable-api/object-state.test.ts b/src/libs/observable-api/states/object-state.test.ts similarity index 100% rename from src/libs/observable-api/object-state.test.ts rename to src/libs/observable-api/states/object-state.test.ts diff --git a/src/libs/observable-api/object-state.ts b/src/libs/observable-api/states/object-state.ts similarity index 100% rename from src/libs/observable-api/object-state.ts rename to src/libs/observable-api/states/object-state.ts diff --git a/src/libs/observable-api/string-state.ts b/src/libs/observable-api/states/string-state.ts similarity index 100% rename from src/libs/observable-api/string-state.ts rename to src/libs/observable-api/states/string-state.ts diff --git a/src/libs/observable-api/types/index.ts b/src/libs/observable-api/types/index.ts new file mode 100644 index 0000000000..e0fa2d66e8 --- /dev/null +++ b/src/libs/observable-api/types/index.ts @@ -0,0 +1,2 @@ +export * from './mapping-function.type.js'; +export * from './memoization-function.type.js'; diff --git a/src/libs/observable-api/mapping-function.ts b/src/libs/observable-api/types/mapping-function.type.ts similarity index 100% rename from src/libs/observable-api/mapping-function.ts rename to src/libs/observable-api/types/mapping-function.type.ts diff --git a/src/libs/observable-api/memoization-function.ts b/src/libs/observable-api/types/memoization-function.type.ts similarity index 100% rename from src/libs/observable-api/memoization-function.ts rename to src/libs/observable-api/types/memoization-function.type.ts diff --git a/src/libs/observable-api/append-to-frozen-array.function.ts b/src/libs/observable-api/utils/append-to-frozen-array.function.ts similarity index 100% rename from src/libs/observable-api/append-to-frozen-array.function.ts rename to src/libs/observable-api/utils/append-to-frozen-array.function.ts diff --git a/src/libs/observable-api/create-observable-part.function.ts b/src/libs/observable-api/utils/create-observable-part.function.ts similarity index 77% rename from src/libs/observable-api/create-observable-part.function.ts rename to src/libs/observable-api/utils/create-observable-part.function.ts index e1c63ded17..eeefbf99c8 100644 --- a/src/libs/observable-api/create-observable-part.function.ts +++ b/src/libs/observable-api/utils/create-observable-part.function.ts @@ -1,6 +1,6 @@ -import { MemoizationFunction } from './memoization-function.js'; -import { MappingFunction } from './mapping-function.js'; -import { defaultMemoization } from './default-memoization.js'; +import { MemoizationFunction } from '../types/memoization-function.type.js'; +import { MappingFunction } from '../types/mapping-function.type.js'; +import { defaultMemoization } from './default-memoization.function.js'; import { distinctUntilChanged, map, Observable, shareReplay } from '@umbraco-cms/backoffice/external/rxjs'; /** @@ -17,11 +17,11 @@ import { distinctUntilChanged, map, Observable, shareReplay } from '@umbraco-cms export function createObservablePart( source: Observable, mappingFunction: MappingFunction, - memoizationFunction?: MemoizationFunction + memoizationFunction?: MemoizationFunction, ): Observable { return source.pipe( map(mappingFunction), distinctUntilChanged(memoizationFunction || defaultMemoization), - shareReplay(1) + shareReplay(1), ); } diff --git a/src/libs/observable-api/deep-freeze.function.ts b/src/libs/observable-api/utils/deep-freeze.function.ts similarity index 100% rename from src/libs/observable-api/deep-freeze.function.ts rename to src/libs/observable-api/utils/deep-freeze.function.ts diff --git a/src/libs/observable-api/default-memoization.ts b/src/libs/observable-api/utils/default-memoization.function.ts similarity index 95% rename from src/libs/observable-api/default-memoization.ts rename to src/libs/observable-api/utils/default-memoization.function.ts index e8e1522495..c88de1a1bd 100644 --- a/src/libs/observable-api/default-memoization.ts +++ b/src/libs/observable-api/utils/default-memoization.function.ts @@ -1,4 +1,4 @@ -import { naiveObjectComparison } from './naive-object-comparison.js'; +import { naiveObjectComparison } from './naive-object-comparison.function.js'; export function defaultMemoization(previousValue: any, currentValue: any): boolean { if (typeof previousValue === 'object' && typeof currentValue === 'object') { diff --git a/src/libs/observable-api/filter-frozen-array.function.ts b/src/libs/observable-api/utils/filter-frozen-array.function.ts similarity index 100% rename from src/libs/observable-api/filter-frozen-array.function.ts rename to src/libs/observable-api/utils/filter-frozen-array.function.ts diff --git a/src/libs/observable-api/utils/index.ts b/src/libs/observable-api/utils/index.ts new file mode 100644 index 0000000000..4fe5b65dc7 --- /dev/null +++ b/src/libs/observable-api/utils/index.ts @@ -0,0 +1,8 @@ +export * from './append-to-frozen-array.function.js'; +export * from './create-observable-part.function.js'; +export * from './deep-freeze.function.js'; +export * from './default-memoization.function.js'; +export * from './filter-frozen-array.function.js'; +export * from './naive-object-comparison.function.js'; +export * from './partial-update-frozen-array.function.js'; +export * from './push-to-unique-array.function.js'; diff --git a/src/libs/observable-api/naive-object-comparison.ts b/src/libs/observable-api/utils/naive-object-comparison.function.ts similarity index 100% rename from src/libs/observable-api/naive-object-comparison.ts rename to src/libs/observable-api/utils/naive-object-comparison.function.ts diff --git a/src/libs/observable-api/partial-update-frozen-array.function.ts b/src/libs/observable-api/utils/partial-update-frozen-array.function.ts similarity index 100% rename from src/libs/observable-api/partial-update-frozen-array.function.ts rename to src/libs/observable-api/utils/partial-update-frozen-array.function.ts diff --git a/src/libs/observable-api/push-to-unique-array.function.ts b/src/libs/observable-api/utils/push-to-unique-array.function.ts similarity index 100% rename from src/libs/observable-api/push-to-unique-array.function.ts rename to src/libs/observable-api/utils/push-to-unique-array.function.ts From 4f3f3ba390abbbae48a4b8392e8cec72c21d8abb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 27 Nov 2023 11:50:08 +0100 Subject: [PATCH 2/3] getUniqueOfEntryMethod --- src/libs/observable-api/states/array-state.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/observable-api/states/array-state.ts b/src/libs/observable-api/states/array-state.ts index 586b326610..2153a48618 100644 --- a/src/libs/observable-api/states/array-state.ts +++ b/src/libs/observable-api/states/array-state.ts @@ -1,6 +1,6 @@ -import { UmbDeepState } from './deep-state.js'; import { partialUpdateFrozenArray } from '../utils/partial-update-frozen-array.function.js'; import { pushToUniqueArray } from '../utils/push-to-unique-array.function.js'; +import { UmbDeepState } from './deep-state.js'; /** * @export @@ -15,9 +15,9 @@ export class UmbArrayState extends UmbDeepState { readonly getUnique: (entry: T) => unknown; #sortMethod?: (a: T, b: T) => number; - constructor(initialData: T[], getUniqueMethod: (entry: T) => unknown) { + constructor(initialData: T[], getUniqueOfEntryMethod: (entry: T) => unknown) { super(initialData); - this.getUnique = getUniqueMethod; + this.getUnique = getUniqueOfEntryMethod; } /** From 57d4dfd23c459aebc4a81646a92bf185a899dc9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 27 Nov 2023 11:56:45 +0100 Subject: [PATCH 3/3] getUniqueMethod --- src/libs/observable-api/states/array-state.ts | 24 +++++++++---------- src/packages/core/store/store-base.ts | 6 ++--- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/libs/observable-api/states/array-state.ts b/src/libs/observable-api/states/array-state.ts index 2153a48618..00e6bd5eb7 100644 --- a/src/libs/observable-api/states/array-state.ts +++ b/src/libs/observable-api/states/array-state.ts @@ -12,12 +12,12 @@ import { UmbDeepState } from './deep-state.js'; * The ArrayState provides methods to append data when the data is an Object. */ export class UmbArrayState extends UmbDeepState { - readonly getUnique: (entry: T) => unknown; + readonly getUniqueMethod: (entry: T) => unknown; #sortMethod?: (a: T, b: T) => number; constructor(initialData: T[], getUniqueOfEntryMethod: (entry: T) => unknown) { super(initialData); - this.getUnique = getUniqueOfEntryMethod; + this.getUniqueMethod = getUniqueOfEntryMethod; } /** @@ -60,12 +60,12 @@ export class UmbArrayState extends UmbDeepState { */ remove(uniques: unknown[]) { let next = this.getValue(); - if (this.getUnique) { + if (this.getUniqueMethod) { uniques.forEach((unique) => { next = next.filter((x) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - return this.getUnique(x) !== unique; + return this.getUniqueMethod(x) !== unique; }); }); @@ -89,11 +89,11 @@ export class UmbArrayState extends UmbDeepState { */ removeOne(unique: unknown) { let next = this.getValue(); - if (this.getUnique) { + if (this.getUniqueMethod) { next = next.filter((x) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - return this.getUnique(x) !== unique; + return this.getUniqueMethod(x) !== unique; }); this.next(next); @@ -142,8 +142,8 @@ export class UmbArrayState extends UmbDeepState { */ appendOne(entry: T) { const next = [...this.getValue()]; - if (this.getUnique) { - pushToUniqueArray(next, entry, this.getUnique); + if (this.getUniqueMethod) { + pushToUniqueArray(next, entry, this.getUniqueMethod); } else { next.push(entry); } @@ -168,10 +168,10 @@ export class UmbArrayState extends UmbDeepState { * ]); */ append(entries: T[]) { - if (this.getUnique) { + if (this.getUniqueMethod) { const next = [...this.getValue()]; entries.forEach((entry) => { - pushToUniqueArray(next, entry, this.getUnique!); + pushToUniqueArray(next, entry, this.getUniqueMethod!); }); this.next(next); } else { @@ -195,10 +195,10 @@ export class UmbArrayState extends UmbDeepState { * myState.updateOne(2, {value: 'updated-bar'}); */ updateOne(unique: unknown, entry: Partial) { - if (!this.getUnique) { + if (!this.getUniqueMethod) { throw new Error("Can't partial update an ArrayState without a getUnique method provided when constructed."); } - this.next(partialUpdateFrozenArray(this.getValue(), entry, (x) => unique === this.getUnique!(x))); + this.next(partialUpdateFrozenArray(this.getValue(), entry, (x) => unique === this.getUniqueMethod!(x))); return this; } } diff --git a/src/packages/core/store/store-base.ts b/src/packages/core/store/store-base.ts index 856b498f79..c2ba2afaf0 100644 --- a/src/packages/core/store/store-base.ts +++ b/src/packages/core/store/store-base.ts @@ -31,7 +31,7 @@ export class UmbStoreBase extends EventTarget implements Um */ append(item: StoreItemType) { this._data.append([item]); - const unique = this._data.getUnique(item) as string; + const unique = this._data.getUniqueMethod(item) as string; this.dispatchEvent(new UmbStoreAppendEvent([unique])); } @@ -42,7 +42,7 @@ export class UmbStoreBase extends EventTarget implements Um */ appendItems(items: Array) { this._data.append(items); - const uniques = items.map((item) => this._data.getUnique(item)) as Array; + const uniques = items.map((item) => this._data.getUniqueMethod(item)) as Array; this.dispatchEvent(new UmbStoreAppendEvent(uniques)); } @@ -84,7 +84,7 @@ export class UmbStoreBase extends EventTarget implements Um * @memberof UmbStoreBase */ getItems(uniques: Array) { - return this._data.getValue().filter((item) => uniques.includes(this._data.getUnique(item) as string)); + return this._data.getValue().filter((item) => uniques.includes(this._data.getUniqueMethod(item) as string)); } /**