Merge remote-tracking branch 'origin/main' into feature/auth-app

src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts

@@ -1,9 +1,18 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbLitElement } from './lit-element.element';
+import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
 @customElement('umb-context-provider')
 export class UmbContextProviderElement extends UmbLitElement {
+
+	/**
+	 * The value to provide to the context.
+	 * @required
+	 */
+	@property({ type: Object, attribute: false })
+	create?: (host:UmbControllerHostInterface) => unknown;
+
 	/**
 	 * The value to provide to the context.
 	 * @required
@@ -23,7 +32,9 @@ export class UmbContextProviderElement extends UmbLitElement {
 		if (!this.key) {
 			throw new Error('The key property is required.');
 		}
-		if (!this.value) {
+		if (this.create) {
+			this.value = this.create(this);
+		} else if (!this.value) {
 			throw new Error('The value property is required.');
 		}
 		this.provideContext(this.key, this.value);

src/Umbraco.Web.UI.Client/libs/observable-api/array-state.ts

@@ -1,5 +1,5 @@
 import { DeepState } from "./deep-state";
-import { appendToFrozenArray } from "./append-to-frozen-array.method";
+import { pushToUniqueArray } from "./push-to-unique-array.method";
 
 /**
  * @export
@@ -21,15 +21,15 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method append
 	 * @param {unknown} unique - The unique value to remove.
-	 * @returns ArrayState<T>
+	 * @return {ArrayState<T>} Reference to it self.
 	 * @description - Remove some new data of this Subject.
 	 * @example <caption>Example remove entry with key '1'</caption>
 	 * const data = [
 	 * 	{ key: 1, value: 'foo'},
 	 * 	{ key: 2, value: 'bar'}
 	 * ];
-	 * const mySubject = new ArrayState(data, (x) => x.key);
-	 * mySubject.remove([1]);
+	 * const myState = new ArrayState(data, (x) => x.key);
+	 * myState.remove([1]);
 	 */
 	remove(uniques: unknown[]) {
 		let next = this.getValue();
@@ -51,7 +51,7 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method filter
 	 * @param {unknown} filterMethod - The unique value to remove.
-	 * @returns ArrayState<T>
+	 * @return {ArrayState<T>} Reference to it self.
 	 * @description - Remove some new data of this Subject.
 	 * @example <caption>Example remove entry with key '1'</caption>
 	 * const data = [
@@ -59,8 +59,8 @@ export class ArrayState<T> extends DeepState<T[]> {
 	 * 	{ key: 2, value: 'bar'},
 	 * 	{ key: 3, value: 'poo'}
 	 * ];
-	 * const mySubject = new ArrayState(data, (x) => x.key);
-	 * mySubject.filter((entry) => entry.key !== 1);
+	 * const myState = new ArrayState(data, (x) => x.key);
+	 * myState.filter((entry) => entry.key !== 1);
 	 *
 	 * Result:
 	 *  [
@@ -75,48 +75,55 @@ export class ArrayState<T> extends DeepState<T[]> {
 	}
 
 	/**
-	 * @method append
-	 * @param {Partial<T>} partialData - A object containing some of the data for this Subject.
-	 * @returns ArrayState<T>
+	 * @method appendOne
+	 * @param {T} entry - new data to be added in this Subject.
+	 * @return {ArrayState<T>} Reference to it self.
 	 * @description - Append some new data to this Subject.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = [
 	 * 	{ key: 1, value: 'foo'},
 	 * 	{ key: 2, value: 'bar'}
 	 * ];
-	 * const mySubject = new ArrayState(data);
-	 * mySubject.append({ key: 1, value: 'replaced-foo'});
+	 * const myState = new ArrayState(data);
+	 * myState.append({ key: 1, value: 'replaced-foo'});
 	 */
 	appendOne(entry: T) {
-		this.next(appendToFrozenArray(this.getValue(), entry, this._getUnique))
+		const next = [...this.getValue()];
+		if(this._getUnique) {
+			pushToUniqueArray(next, entry, this._getUnique);
+		} else {
+			next.push(entry);
+		}
+		this.next(next);
 		return this;
 	}
 
 	/**
 	 * @method append
 	 * @param {T[]} entries - A array of new data to be added in this Subject.
-	 * @returns ArrayState<T>
+	 * @return {ArrayState<T>} Reference to it self.
 	 * @description - Append some new data to this Subject, if it compares to existing data it will replace it.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = [
 	 * 	{ key: 1, value: 'foo'},
 	 * 	{ key: 2, value: 'bar'}
 	 * ];
-	 * const mySubject = new ArrayState(data);
-	 * mySubject.append([
+	 * const myState = new ArrayState(data);
+	 * myState.append([
 	 * 	{ key: 1, value: 'replaced-foo'},
 	 * 	{ key: 3, value: 'another-bla'}
 	 * ]);
 	 */
 	append(entries: T[]) {
-		// TODO: stop calling appendOne for each but make sure to handle this in one.
-		entries.forEach(x => this.appendOne(x))
-
-		/*
-		const unFrozenDataSet = [...this.getValue()];
-
-		this.next(unFrozenDataSet);
-		*/
+		if(this._getUnique) {
+			const next = [...this.getValue()];
+			entries.forEach(entry => {
+				pushToUniqueArray(next, entry, this._getUnique!);
+			});
+			this.next(next);
+		} else {
+			this.next([...this.getValue(), ...entries]);
+		}
 		return this;
 	}
 }

src/Umbraco.Web.UI.Client/libs/observable-api/object-state.ts

@@ -12,15 +12,17 @@ import { DeepState } from "./deep-state";
 export class ObjectState<T> extends DeepState<T> {
 
 	/**
-	 * @method append
-	 * @param {Partial<T>} partialData - A object containing some of the data for this Subject.
+	 * @method update
+	 * @param {Partial<T>} partialData - A object containing some of the data to update in this Subject.
 	 * @description - Append some new data to this Object.
+	 * @return {ObjectState<T>} Reference to it self.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = {key: 'myKey', value: 'myInitialValue'};
-	 * const mySubject = new ObjectState(data)
-	 * mySubject.append({value: 'myNewValue'})
+	 * const myState = new ObjectState(data);
+	 * myState.update({value: 'myNewValue'});
 	 */
 	update(partialData: Partial<T>) {
 		this.next({ ...this.getValue(), ...partialData });
+		return this;
 	}
 }

src/Umbraco.Web.UI.Client/libs/observable-api/push-to-unique-array.method.ts

@@ -0,0 +1,22 @@
+/**
+ * @export
+ * @method pushToUniqueArray
+ * @param {T[]} data - An array of objects.
+ * @param {T} entry - The object to insert or replace with.
+ * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @description - Append or replaces an item of an Array.
+ * @example <caption>Example append new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>
+ * const entry = {key: 'myKey', value: 'myValue'};
+ * const newDataSet = pushToUniqueArray([], entry, x => x.key === key);
+ * mySubject.next(newDataSet);
+ */
+export function pushToUniqueArray<T>(data: T[], entry: T, getUniqueMethod: (entry: T) => unknown): T[] {
+	const unique = getUniqueMethod(entry);
+	const indexToReplace = data.findIndex((x) => getUniqueMethod(x) === unique);
+	if (indexToReplace !== -1) {
+		data[indexToReplace] = entry;
+	} else {
+		data.push(entry);
+	}
+	return data;
+}