@schukai/monster 4.152.0 → 4.153.1

package/README.md

@@ -78,6 +78,30 @@ Voilà!
 While we strive to work around some browser bugs, generally, we do not use polyfills or feature detection.
 However, many functions can be supplemented through polyfills, thus enhancing compatibility.
 
+### Content Security Policy
+
+String expressions starting with `run:` use `new Function()` and require CSP
+permission for string evaluation. Existing configurations remain supported.
+For Select sorting under a policy without `unsafe-eval`, use `call:asc`,
+`call:desc`, or set a function from your application script:
+
+```javascript
+select.setOption("mapping.sort", (a, b, control) =>
+    a[1].localeCompare(b[1])
+);
+```
+
+Each comparator argument is a `[value, label]` entry; the third argument is the
+owning Select. A `null` sort keeps the imported order. Configure function values
+through JavaScript, since JSON attributes cannot contain functions.
+
+### Browser verification
+
+The [browser test runner](test/web/README.md) builds the current checkout and runs
+Chromium, Firefox and WebKit with normal web security, including CSP and timezone
+regressions. Browser versions are pinned with the Nix environment. This does not
+establish support for older browsers or replace testing Safari on Apple devices.
+
 ## Questions
 
 For questions and commercial support, please contact [Volker Schukai](https://www.schukai.com/).
@@ -99,4 +123,3 @@ Licensed under [AGPL](https://www.gnu.org/licenses/agpl-3.0.de.html). Commercial
 
 Detailed changes for each release are documented in the
 [CHANGELOG](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/blob/master/application/CHANGELOG.md).
-

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","files":["source","test/cases","test/util","CHANGELOG.md"],"homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.152.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","files":["source","test/cases","test/util","CHANGELOG.md"],"homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.153.1"}

package/source/components/content/viewer/message.mjs

@@ -386,6 +386,7 @@ class MessageContent extends CustomElement {
 				switch (contentTransferEncoding) {
 					case "base64":
 						content = atob(content);
+						break;
 
 					case "quoted-printable":
 						content = decodeQuotedPrintable(content);

package/source/components/form/select.mjs

@@ -1414,6 +1414,8 @@ function importOptionsIntern(data) {
 		sort === "no"
 	) {
 		// no sorting
+	} else if (typeof sort === "function") {
+		entries.sort((a, b) => sort(a, b, self));
 	} else if (isString(sort)) {
 		if (sort.startsWith("run:")) {
 			const code = sort.replace("run:", "");

package/source/components/form/util/fetch.mjs

@@ -66,8 +66,12 @@ function loadAndAssignContent(element, url, options, filter) {
 		const tempDiv = document.createElement("div");
 		tempDiv.innerHTML = content;
 
-		// Extract and execute all <script> elements by appending them to the document head
+		// Extract scripts before inserting the fragment, then execute them in head.
 		const scriptElements = tempDiv.querySelectorAll("script");
+		for (const script of scriptElements) script.remove();
+		// Inline scripts run synchronously when appended. Their fragment must
+		// already exist, including any upgraded custom elements inside it.
+		validateInstance(element, HTMLElement).innerHTML = tempDiv.innerHTML;
 		scriptElements.forEach((oldScript) => {
 			const newScript = document.createElement("script");
 			if (oldScript.src) newScript.src = oldScript.src;
@@ -76,18 +80,13 @@ function loadAndAssignContent(element, url, options, filter) {
 			if (oldScript.defer) newScript.defer = oldScript.defer;
 			if (oldScript.crossOrigin) newScript.crossOrigin = oldScript.crossOrigin;
 			if (oldScript.integrity) newScript.integrity = oldScript.integrity;
+			if (oldScript.nonce) newScript.nonce = oldScript.nonce;
 			if (oldScript.referrerPolicy)
 				newScript.referrerPolicy = oldScript.referrerPolicy;
 			newScript.textContent = oldScript.textContent;
 			document.head.appendChild(newScript);
-			if (oldScript.parentNode) {
-				oldScript.parentNode.removeChild(oldScript);
-			}
 		});
 
-		// Assign the processed content to the target element
-		validateInstance(element, HTMLElement).innerHTML = tempDiv.innerHTML;
-
 		// If the element is within a Shadow DOM, use the host as the event target
 		const shadowRoot = findShadowRoot(element);
 		const eventTarget = shadowRoot !== null ? shadowRoot.host : element;

package/source/components/state/log.mjs

@@ -190,6 +190,7 @@ class Log extends CustomElement {
 	 */
 	connectedCallback() {
 		super.connectedCallback();
+		initTimeAgoTicker.call(this);
 
 		const slottedElements = getSlottedElements.call(this);
 		if (slottedElements.size > 0) {
@@ -197,6 +198,12 @@ class Log extends CustomElement {
 		}
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearInterval(this[timeAgoIntervalSymbol]);
+		this[timeAgoIntervalSymbol] = undefined;
+	}
+
 	/**
 	 * Clear the log
 	 *

package/source/components/state/thread.mjs

@@ -63,6 +63,17 @@ const timeAgoIntervalSymbol = Symbol("timeAgoInterval");
  * @summary A threaded discussion layout for nested replies, comments and conversation-like content.
  **/
 class Thread extends CustomElement {
+	connectedCallback() {
+		super.connectedCallback();
+		initTimeAgoTicker.call(this);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearInterval(this[timeAgoIntervalSymbol]);
+		this[timeAgoIntervalSymbol] = undefined;
+	}
+
 	/**
 	 * @return {void}
 	 */

package/source/components/time/month-calendar.mjs

@@ -31,7 +31,7 @@ import { isFunction, isString } from "../../types/is.mjs";
 
 import { fireCustomEvent } from "../../dom/events.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import { addErrorAttribute } from "../../dom/error.mjs";
+import { addErrorAttribute, removeErrorAttribute } from "../../dom/error.mjs";
 import { MonthCalendarStyleSheet } from "./stylesheet/month-calendar.mjs";
 import { AccessibilityStyleSheet } from "../stylesheet/accessibility.mjs";
 import {
@@ -58,6 +58,13 @@ const calendarElementSymbol = Symbol("calendarElement");
  * @type {symbol}
  */
 const calendarBodyElementSymbol = Symbol("calendarBodyElement");
+const calendarInputSymbol = Symbol("calendarInput");
+const calendarFormatSymbol = Symbol("calendarFormat");
+const calendarRefreshSymbol = Symbol("calendarRefresh");
+const lastValidDateSymbol = Symbol("lastValidDate");
+const calendarDateInvalidSymbol = Symbol("calendarDateInvalid");
+const appointmentObserverSymbol = Symbol("appointmentObserver");
+const boundDaysSymbol = Symbol("boundDays");
 
 /**
  * A Calendar
@@ -82,9 +89,17 @@ class MonthCalendar extends CustomElement {
 	[initMethodSymbol]() {
 		super[initMethodSymbol]();
 
-		const def = generateCalendarData.call(this);
-		this.setOption("calendarDays", def.calendarDays);
-		this.setOption("calendarWeekdays", def.calendarWeekdays);
+		refreshCalendar.call(this);
+		this.attachObserver(
+			new Observer(() => {
+				if (this[calendarRefreshSymbol]) return;
+				this[calendarRefreshSymbol] = true;
+				queueMicrotask(() => {
+					this[calendarRefreshSymbol] = false;
+					refreshCalendar.call(this);
+				});
+			}),
+		);
 	}
 
 	/**
@@ -93,6 +108,7 @@ class MonthCalendar extends CustomElement {
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
+		refreshCalendar.call(this);
 
 		setTimeout(() => {
 			initControlReferences.call(this);
@@ -797,35 +813,28 @@ function calcHeaderAndFooterHeight() {
  *                   - calendarWeekdays: Array of seven objects, each representing a weekday header.
  */
 function generateCalendarData() {
-	let selectedDate = this.getOption("startDate");
-	if (!(selectedDate instanceof Date)) {
-		if (typeof selectedDate === "string") {
-			try {
-				selectedDate = new Date(selectedDate);
-			} catch (e) {
-				addErrorAttribute(this, "Invalid calendar date");
-				return { calendarDays, calendarWeekdays };
-			}
-		} else {
+	let selectedDate = parseCalendarDate(this.getOption("startDate"));
+	this[calendarDateInvalidSymbol] = selectedDate === null;
+	if (selectedDate) this[lastValidDateSymbol] = selectedDate;
+	else selectedDate = this[lastValidDateSymbol] || new Date();
+	// Constructors must not add attributes. Report after construction and use
+	// the latest state if options changed again during the same turn.
+	queueMicrotask(() => {
+		if (this[calendarDateInvalidSymbol])
 			addErrorAttribute(this, "Invalid calendar date");
-			return { calendarDays, calendarWeekdays };
-		}
-	}
-
+		else if (this.hasAttribute(ATTRIBUTE_ERRORMESSAGE))
+			removeErrorAttribute(this, "Invalid calendar date");
+	});
 	const calendarDays = [];
 	let calendarWeekdays = [];
 
-	if (!(selectedDate instanceof Date)) {
-		addErrorAttribute(this, "Invalid calendar date");
-		return { calendarDays, calendarWeekdays };
-	}
-
-	// Get the year and month from the provided date
-	const year = selectedDate.getFullYear();
+	// Get the local month from the provided date.
 	const month = selectedDate.getMonth(); // 0-based index (0 = January)
 
 	// Create a Date object for the 1st of the given month
-	const firstDayOfMonth = new Date(year, month, 1);
+	const firstDayOfMonth = new Date(selectedDate);
+	firstDayOfMonth.setDate(1);
+	firstDayOfMonth.setHours(0, 0, 0, 0);
 
 	// Determine the weekday index of the 1st day, ensuring Monday = 0
 	const weekdayIndex = (firstDayOfMonth.getDay() + 6) % 7;
@@ -888,6 +897,43 @@ function generateCalendarData() {
 	return { calendarDays, calendarWeekdays };
 }
 
+function parseCalendarDate(value) {
+	if (value instanceof Date)
+		return Number.isNaN(value.getTime()) ? null : new Date(value.getTime());
+	if (typeof value !== "string") return null;
+	const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+	if (parts) {
+		const [, year, month, day] = parts.map(Number);
+		const date = new Date(0);
+		date.setHours(0, 0, 0, 0);
+		date.setFullYear(year, month - 1, day);
+		return date.getFullYear() === year &&
+			date.getMonth() === month - 1 &&
+			date.getDate() === day
+			? date
+			: null;
+	}
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function refreshCalendar() {
+	const value = this.getOption("startDate");
+	const input = value instanceof Date ? value.getTime() : value;
+	const format = this.getOption("locale.weekdayFormat");
+	if (
+		Object.is(input, this[calendarInputSymbol]) &&
+		format === this[calendarFormatSymbol]
+	)
+		return;
+	this[calendarInputSymbol] = input;
+	this[calendarFormatSymbol] = format;
+	const data = generateCalendarData.call(this);
+	this.setOption("calendarDays", data.calendarDays);
+	this.setOption("calendarWeekdays", data.calendarWeekdays);
+	if (this[calendarElementSymbol]) initEventHandler.call(this);
+}
+
 /**
  * Generates a map that contains an array of appointments for each day within the calendar range.
  * Multi-day appointments will appear on each day they span.
@@ -947,15 +993,19 @@ function initEventHandler() {
 	const self = this;
 
 	setTimeout(() => {
-		this.attachObserver(
-			new Observer(() => {
+		if (!this[appointmentObserverSymbol]) {
+			this[appointmentObserverSymbol] = new Observer(() => {
 				placeAppointments.call(this);
-			}),
-		);
+			});
+			this.attachObserver(this[appointmentObserverSymbol]);
+		}
+		this[boundDaysSymbol] ??= new WeakSet();
 
 		this[calendarElementSymbol]
 			.querySelectorAll("[data-monster-role='day-cell']")
 			.forEach((element) => {
+				if (this[boundDaysSymbol].has(element)) return;
+				this[boundDaysSymbol].add(element);
 				element.addEventListener("click", (event) => {
 					const hoveredElement = this.shadowRoot.elementFromPoint(
 						event.clientX,

package/source/data/buildmap.mjs

@@ -362,7 +362,8 @@ function buildFlatMap(subject, selector, key, parentMap) {
  * @return {*}
  */
 export function build(subject, definition, defaultValue) {
-	if (definition === undefined) return defaultValue ? defaultValue : subject;
+	if (definition === undefined)
+		return defaultValue !== undefined ? defaultValue : subject;
 	validateString(definition);
 
 	const regexp = /(?<placeholder>\${(?<path>[a-z\^A-Z.\-_0-9]*)})/gm;
@@ -384,7 +385,7 @@ export function build(subject, definition, defaultValue) {
 		let v = finder.getVia(path);
 		if (v === undefined) v = defaultValue;
 
-		definition = definition.replaceAll(placeholder, v);
+		definition = definition.replaceAll(placeholder, () => `${v}`);
 	});
 
 	return definition;

package/source/data/buildtree.mjs

@@ -21,12 +21,6 @@ import { extend } from "./extend.mjs";
 
 export { buildTree };
 
-/**
- * @private
- * @type {symbol}
- */
-const parentSymbol = Symbol("parent");
-
 /**
  * @private
  * @type {symbol}
@@ -171,8 +165,6 @@ function buildTree(subject, selector, idKey, parentIDKey, options) {
 			throw new Error("the object has no value for the specified id");
 		}
 
-		o[parentSymbol] = ref;
-
 		const node = new Node(o);
 		this.has(ref)
 			? this.get(ref).add(node)

package/source/data/pathfinder.mjs

@@ -217,16 +217,24 @@ function iterate(subject, path, check) {
 
 	const result = new Map();
 
-	if (isArray(path)) {
-		path = path.join(DELIMITER);
-	}
-
-	if (isObject(subject) || isArray(subject)) {
+	if (subject instanceof Map) {
+		for (const [key, value] of subject) {
+			result.set(key, getValueViaPath.call(this, value, path, check));
+		}
+	} else if (subject instanceof Set) {
+		let index = 0;
+		for (const value of subject) {
+			result.set(
+				`${index++}`,
+				getValueViaPath.call(this, value, path, check),
+			);
+		}
+	} else if (isObject(subject) || isArray(subject)) {
 		for (const [key, value] of Object.entries(subject)) {
 			result.set(key, getValueViaPath.call(this, value, path, check));
 		}
 	} else {
-		const key = path.split(DELIMITER).shift();
+		const key = isArray(path) ? path[0] : path.split(DELIMITER).shift();
 		result.set(key, getValueViaPath.call(this, subject, path, check));
 	}
 
@@ -272,7 +280,7 @@ function getValueViaPath(subject, path, check) {
 	let current = parts.shift();
 
 	if (current === this.wildCard) {
-		return iterate.call(this, subject, parts.join(DELIMITER), check);
+		return iterate.call(this, subject, parts, check);
 	}
 
 	if (isObject(subject) || isArray(subject)) {
@@ -280,23 +288,21 @@ function getValueViaPath(subject, path, check) {
 		if (subject instanceof Map || subject instanceof WeakMap) {
 			anchor = subject.get(current);
 		} else if (subject instanceof Set) {
-			current = parseInt(current);
-			validateInteger(current);
+			current = parsePathIndex(current);
 			anchor = [...subject]?.[current];
 		} else if (subject instanceof WeakSet) {
 			throw Error("unsupported action for this data type (WeakSet)");
 		} else if (typeof WeakRef === "function" && subject instanceof WeakRef) {
 			throw Error("unsupported action for this data type (WeakRef)");
 		} else if (isArray(subject)) {
-			current = parseInt(current);
-			validateInteger(current);
+			current = parsePathIndex(current);
 			anchor = subject?.[current];
 		} else {
 			anchor = subject?.[current];
 		}
 
 		if (isObject(anchor) || isArray(anchor)) {
-			return getValueViaPath.call(this, anchor, parts.join(DELIMITER), check);
+			return getValueViaPath.call(this, anchor, parts, check);
 		}
 
 		if (parts.length > 0) {
@@ -304,12 +310,18 @@ function getValueViaPath(subject, path, check) {
 		}
 
 		if (check === true) {
-			const descriptor = Object.getOwnPropertyDescriptor(
-				Object.getPrototypeOf(subject),
-				current,
-			);
+			let exists;
+			if (subject instanceof Map || subject instanceof WeakMap) {
+				exists = subject.has(current);
+			} else if (subject instanceof Set) {
+				exists = current >= 0 && current < subject.size;
+			} else if (isArray(subject)) {
+				exists = Reflect.has(subject, current);
+			} else {
+				exists = Reflect.has(subject, current);
+			}
 
-			if (!subject.hasOwnProperty(current) && descriptor === undefined) {
+			if (!exists) {
 				throw Error("unknown value " + current);
 			}
 		}
@@ -411,7 +423,7 @@ function setValueViaPath(subject, path, value) {
  * @param {*} value
  */
 function assignProperty(object, key, value) {
-	if (!object.hasOwnProperty(key)) {
+	if (!Object.hasOwn(object, key)) {
 		object[key] = value;
 		return;
 	}
@@ -423,6 +435,21 @@ function assignProperty(object, key, value) {
 	object[key] = value;
 }
 
+/**
+ * Convert a complete integer path segment without accepting trailing text.
+ * @param {*} value
+ * @return {number}
+ * @private
+ */
+function parsePathIndex(value) {
+	if (!/^-?\d+$/.test(`${value}`)) {
+		throw new TypeError("value is not an integer");
+	}
+	const index = Number(value);
+	validateInteger(index);
+	return index;
+}
+
 /**
  *
  * @param {object} subject
@@ -486,7 +513,9 @@ function deleteValueViaPath(subject, path) {
  * @private
  */
 function validateMutationPath(path) {
-	const parts = isArray(path) ? path : path.split(DELIMITER);
+	const parts = (isArray(path) ? path : [path]).flatMap((part) =>
+		`${part}`.split(DELIMITER),
+	);
 	for (const part of parts) {
 		if (UNSAFE_MUTATION_PATH_SEGMENTS.has(`${part}`)) {
 			throw new Error(`unsafe mutation path segment: ${part}`);

package/source/data/transformer.mjs

@@ -530,7 +530,7 @@ function transform(value) {
 
 			const useKey = keys?.[key];
 
-			if (value?.[useKey]) {
+			if (useKey !== undefined && Reflect.has(value, useKey)) {
 				return value?.[useKey];
 			}
 
@@ -555,7 +555,7 @@ function transform(value) {
 			}
 
 			if (isObject(value) || isArray(value)) {
-				if (value?.[key]) {
+				if (Reflect.has(value, key)) {
 					return value?.[key];
 				}
 

package/source/dom/customcontrol.mjs

@@ -377,6 +377,7 @@ function getInternal() {
 }
 
 const debounceValueSymbol = Symbol("debounceValue");
+const pendingValueAttributeSymbol = Symbol("pendingValueAttribute");
 
 /**
  *
@@ -388,7 +389,17 @@ const debounceValueSymbol = Symbol("debounceValue");
  */
 function initValueAttributeObserver() {
 	const self = this;
-	this[attributeObserverSymbol]["value"] = () => {
+	this[attributeObserverSymbol]["value"] = (newValue, oldValue) => {
+		if (!self[pendingValueAttributeSymbol]) {
+			self[pendingValueAttributeSymbol] = {
+				oldValue: normalizeAttributeValue(oldValue),
+				newValue: normalizeAttributeValue(newValue),
+			};
+		} else {
+			self[pendingValueAttributeSymbol].newValue =
+				normalizeAttributeValue(newValue);
+		}
+
 		if (self[debounceValueSymbol] instanceof DeadMansSwitch) {
 			try {
 				self[debounceValueSymbol].touch();
@@ -402,18 +413,33 @@ function initValueAttributeObserver() {
 		}
 
 		self[debounceValueSymbol] = new DeadMansSwitch(10, () => {
-			const oldValue = self.getAttribute("value");
-			const newValue = self.value;
-
-			if (oldValue !== newValue) {
-				setTimeout(() => {
-					self.value = self.getAttribute("value") ?? "";
-				}, 0);
-			}
+			const pending = self[pendingValueAttributeSymbol];
+			delete self[pendingValueAttributeSymbol];
+			delete self[debounceValueSymbol];
+			if (!pending) return;
+
+			setTimeout(() => {
+				const currentValue = normalizeAttributeValue(self.value);
+				if (
+					currentValue === pending.oldValue &&
+					currentValue !== pending.newValue
+				) {
+					self.value = pending.newValue;
+				}
+			}, 0);
 		});
 	};
 }
 
+/**
+ * @param {*} value
+ * @return {string}
+ * @private
+ */
+function normalizeAttributeValue(value) {
+	return value === null || value === undefined ? "" : String(value);
+}
+
 const disabledSyncSymbol = Symbol("disabledSync");
 const disabledAttributeSyncSymbol = Symbol("disabledAttributeSync");
 

package/source/dom/customelement.mjs

@@ -734,7 +734,10 @@ class CustomElement extends HTMLElement {
 		// Initialize the custom elements inside the shadow root and the slotted elements
 		initFromCallbackHost.call(this);
 		try {
-			nodeList = new Set([...elements, ...getSlottedElements.call(this)]);
+			nodeList = new Set([
+				...elements,
+				...getSlottedElements.call(this, undefined, undefined, getManagedShadowRoot.call(this)),
+			]);
 		} catch (e) {
 			nodeList = elements;
 		}
@@ -1133,7 +1136,12 @@ function initOptionObserver() {
 					targets.add(element);
 				}
 			}
-			for (const element of getSlottedElements.call(self, disabledQuery)) {
+			for (const element of getSlottedElements.call(
+				self,
+				disabledQuery,
+				undefined,
+				getManagedShadowRoot.call(self),
+			)) {
 				targets.add(element);
 			}
 		} catch (e) {}
@@ -1293,6 +1301,17 @@ function syncUpdaterSubject(target, source) {
 		return;
 	}
 
+	// Empty option objects are also used as refresh markers by editable
+	// datasource components. Keep their established merge behavior while
+	// allowing non-empty replacement objects to remove stale keys.
+	if (Object.keys(source).length > 0) {
+		for (const key of Object.keys(target)) {
+			if (!Object.hasOwn(source, key)) {
+				delete target[key];
+			}
+		}
+	}
+
 	for (const [key, value] of Object.entries(source)) {
 		syncUpdaterValue(target, key, value);
 	}

package/source/dom/resource.mjs

@@ -175,17 +175,31 @@ class Resource extends BaseWithOptions {
 		}
 
 		return new Promise(function (resolve, reject) {
+			let settled = false;
+			const cleanup = () => {
+				settled = true;
+				clearTimeout(timeout);
+				self[internalStateSymbol].detachObserver(observer);
+			};
 			const timeout = setTimeout(() => {
+				cleanup();
 				reject("timeout");
 			}, self.getOption("timeout"));
 
-			const observer = new Observer(() => {
-				clearTimeout(timeout);
-				self[internalStateSymbol].detachObserver(observer);
-				resolve();
-			});
+			const check = () => {
+				if (settled) return;
+				const state = self[internalStateSymbol].getSubject();
+				if (state.loaded !== true) return;
+				cleanup();
+				if (state.error !== undefined) reject(state.error);
+				else resolve();
+			};
+			// setSubject updates several properties. Observe its final state and
+			// avoid removing observers while their notification list is iterating.
+			const observer = new Observer(() => queueMicrotask(check));
 
 			self[internalStateSymbol].attachObserver(observer);
+			queueMicrotask(check);
 		});
 	}