@brightspace-ui/core 2.180.9 → 2.181.0

package/mixins/loading-complete/README.md

@@ -0,0 +1,47 @@
+# LoadingCompleteMixin
+
+The `LoadingCompleteMixin` contains boilerplate code for [`getLoadingComplete`](https://github.com/BrightspaceUI/testing#waiting-for-asynchronous-components). It simplifies fixture setup for custom components in automated tests, and provides a `loadingComplete` promise that can be used internally.
+
+## Usage
+Apply the mixin and call `resolveLoadingComplete()` once your component has finished loading
+
+```js
+import { LoadingCompleteMixin } from '@brightspace-ui/core/mixins/loading-complete/loading-complete-mixin.js';
+
+class MyComponent extends LoadingCompleteMixin(LitElement) {
+
+	connectedCallback() {
+		this._fetchMyData().then(this.resolveLoadingComplete);
+	}
+
+}
+```
+
+To make use of the `loadingComplete` promise, simply `await` it where needed:
+
+```js
+async removeSkeleton() {
+	await this.loadingComplete;
+	this.skeleton = false;
+}
+```
+
+If for any reason `resolveLoadingComplete` is never called, `loadingComplete` won't resolve and any consumers will hang.
+
+### `getLoadingComplete`
+
+In some cases, instead of finding one spot to call `resolveLoadingComplete`, you may find it easier to `await` a set of promises in a custom `getLoadingComplete` method.
+
+You'll also need to use this method if you're working in a general-use mixin rather than directly in a component.
+
+```js
+class MyComponent extends LoadingCompleteMixin(LitElement) {
+
+	async getLoadingComplete() {
+		await super.getLoadingComplete();
+		await this._myCustomIconImport;
+		await Promise.all(this._allMyDataPromises);
+	}
+}
+```
+Note that the work to generate these promises should have already started, before `firstUpdated`, and we simply `await` them here.

package/mixins/loading-complete/loading-complete-mixin.js

@@ -0,0 +1,30 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends superclass {
+
+	#loadingCompleteResolve;
+
+	// eslint-disable-next-line sort-class-members/sort-class-members
+	#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
+		? new Promise(resolve => this.#loadingCompleteResolve = resolve)
+		: Promise.resolve();
+
+	get loadingComplete() {
+		return this.getLoadingComplete();
+	}
+
+	get resolveLoadingComplete() {
+		return () => {
+			if (this.#loadingCompleteResolve) {
+				this.#loadingCompleteResolve();
+				this.#loadingCompleteResolve = null;
+			}
+		};
+	}
+
+	async getLoadingComplete() {
+		await super.getLoadingComplete?.();
+		return this.#loadingCompletePromise;
+	}
+
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.180.9",
+  "version": "2.181.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",