@schukai/monster 4.154.11 → 5.0.0

package/test/cases/dom/options-lifecycle.mjs

@@ -0,0 +1,216 @@
+import { expect } from "chai";
+import { initJSDOM } from "../../util/jsdom.mjs";
+
+describe("Strict options lifecycle (#596)", function () {
+	let api;
+	let fixture;
+	let sequence = 0;
+	const tick = () => new Promise((resolve) => setTimeout(resolve, 30));
+
+	before(async () => {
+		await initJSDOM({});
+		api = await import("../../../source/dom/customelement.mjs");
+	});
+	beforeEach(() => {
+		fixture = document.createElement("div");
+		document.getElementById("mocks").append(fixture);
+	});
+	afterEach(() => fixture.remove());
+
+	function register(Constructor) {
+		const tag = `monster-options-596-${++sequence}`;
+		customElements.define(tag, Constructor);
+		return tag;
+	}
+
+	for (const phase of ["defaults", "customization"]) {
+		for (const [method, args] of [
+			["getOption", ["value", "fallback"]],
+			["setOption", ["value", "early"]],
+			["setOptions", [{ value: "early" }]],
+			["setOptions", ["invalid JSON"]],
+		]) {
+			it(`rejects ${method}(${JSON.stringify(args)}) in ${phase}`, () => {
+				class EarlyOptions extends api.CustomElement {}
+				Object.defineProperty(EarlyOptions.prototype, phase, {
+					get() {
+						return this[method](...args);
+					},
+				});
+				register(EarlyOptions);
+				let failure;
+				try {
+					new EarlyOptions();
+				} catch (error) {
+					failure = error;
+				}
+				expect(failure).to.be.instanceOf(api.OptionsNotInitializedError);
+				expect(failure.name).to.equal("OptionsNotInitializedError");
+				expect(failure.method).to.equal(method);
+				expect(failure.component).to.equal("EarlyOptions");
+				expect(failure.message).to.include("initMethodSymbol");
+			});
+		}
+	}
+
+	it("evaluates customization once and makes reads and writes available in init", () => {
+		let evaluations = 0;
+		class Initialized extends api.CustomElement {
+			get defaults() {
+				return { ...super.defaults, value: "default", nested: { kept: true } };
+			}
+			get customization() {
+				evaluations++;
+				return new Map([["value", "custom"]]);
+			}
+			[api.initMethodSymbol]() {
+				super[api.initMethodSymbol]();
+				expect(this.getOption("value")).to.equal("custom");
+				expect(this.setOption("nested.added", 1)).to.equal(this);
+				expect(this.setOptions('{"nested":{"other":2}}')).to.equal(this);
+			}
+		}
+		const element = document.createElement(register(Initialized));
+		expect(element).to.be.instanceOf(Initialized);
+		expect(evaluations).to.equal(1);
+		expect(element.getOption("nested")).to.deep.equal({
+			kept: true,
+			added: 1,
+			other: 2,
+		});
+	});
+
+	it("preserves fallback and falsy values, and propagates unrelated failures", () => {
+		class Options extends api.CustomElement {}
+		const element = document.createElement(register(Options));
+		for (const value of [null, false, 0, ""]) {
+			element.setOption("value", value);
+			expect(element.getOption("value", "fallback")).to.equal(value);
+		}
+		element.setOption("value", undefined);
+		expect(element.getOption("value", "fallback")).to.equal("fallback");
+		expect(element.getOption("missing.deep", "fallback")).to.equal("fallback");
+		expect(element.getOption("missing.deep")).to.equal(undefined);
+		expect(() => element.setOptions("invalid JSON")).to.throw();
+		const failure = new Error("property failure");
+		element.setOption(
+			"broken",
+			Object.defineProperty({}, "value", {
+				get() {
+					throw failure;
+				},
+				enumerable: true,
+			}),
+		);
+		expect(() => element.getOption("broken.value", "fallback")).to.throw(
+			failure,
+		);
+	});
+
+	it("preserves attribute/customization precedence on upgrade and permits deferred defaults callbacks", async () => {
+		class Upgraded extends api.CustomElement {
+			get defaults() {
+				return {
+					...super.defaults,
+					value: "default",
+					fromAttribute: "default",
+					readLater: () => this.getOption("value"),
+					templates: { main: "<span></span>" },
+				};
+			}
+			get customization() {
+				return new Map([["value", "custom"]]);
+			}
+			[api.initMethodSymbol]() {
+				super[api.initMethodSymbol]();
+				this.initialValue = this.getOption("value");
+				this.initialAttribute = this.getOption("fromAttribute");
+			}
+		}
+		const tag = `monster-options-596-${++sequence}`;
+		const holder = document.createElement("div");
+		holder.innerHTML = `<${tag} data-monster-option-value="attribute" data-monster-option-from-attribute="present"></${tag}>`;
+		const element = holder.firstElementChild;
+		customElements.define(tag, Upgraded);
+		customElements.upgrade(element);
+		expect(element).to.be.instanceOf(Upgraded);
+		expect(element.initialValue).to.equal("custom");
+		expect(element.initialAttribute).to.equal("present");
+		expect(element.getOption("readLater")()).to.equal("custom");
+		fixture.append(element);
+		await tick();
+		expect(element.getOption("readLater")()).to.equal("attribute");
+	});
+
+	it("applies late attributes, JSON and script before rendering; reconnect keeps state", async () => {
+		let assemblies = 0;
+		class Configured extends api.CustomElement {
+			get defaults() {
+				return {
+					...super.defaults,
+					value: "default",
+					flag: false,
+					count: 0,
+					templates: {
+						main: '<span data-monster-replace="path:value"></span>',
+					},
+				};
+			}
+			get customization() {
+				return new Map([["value", "custom"]]);
+			}
+			[api.initMethodSymbol]() {
+				super[api.initMethodSymbol]();
+				this.initialValue = this.getOption("value");
+			}
+			[api.assembleMethodSymbol]() {
+				assemblies++;
+				super[api.assembleMethodSymbol]();
+				this.assembledValue = this.getOption("value");
+			}
+		}
+		const element = document.createElement(register(Configured));
+		expect(element.initialValue).to.equal("custom");
+		element.setOption("value", "runtime-before-connect");
+		element.setAttribute("data-monster-option-value", "attribute");
+		element.setAttribute("data-monster-option-flag", "true");
+		element.setAttribute("data-monster-option-count", "7");
+		element.setAttribute("data-monster-options", '{"value":"json"}');
+		const script = document.createElement("script");
+		script.type = "application/json";
+		script.id = "options-script-596";
+		script.textContent = '{"value":"script"}';
+		fixture.append(script);
+		element.setAttribute(
+			"data-monster-options-selector",
+			"#options-script-596",
+		);
+		fixture.append(element);
+		await tick();
+		expect(element.assembledValue).to.equal("script");
+		expect(element.getOption("flag")).to.equal(true);
+		expect(element.getOption("count")).to.equal(7);
+		expect(element.shadowRoot.querySelector("span").textContent).to.equal(
+			"script",
+		);
+		element.removeAttribute("data-monster-option-value");
+		await tick();
+		element.setOption("value", "runtime");
+		await tick();
+		expect(element.shadowRoot.querySelector("span").textContent).to.equal(
+			"runtime",
+		);
+		element.remove();
+		script.textContent = '{"value":"must-not-reload"}';
+		fixture.append(element);
+		await tick();
+		expect(assemblies).to.equal(1);
+		expect(element.getOption("value")).to.equal("runtime");
+		element.setOption("value", "reconnected");
+		await tick();
+		expect(element.shadowRoot.querySelector("span").textContent).to.equal(
+			"reconnected",
+		);
+		expect(element.hasAttribute("data-monster-error")).to.equal(false);
+	});
+});

package/test/util/early-options.mjs

@@ -0,0 +1,84 @@
+import { parse } from "espree";
+
+const optionMethods = new Set(["getOption", "setOption", "setOptions"]);
+const functions = new Set([
+	"FunctionDeclaration",
+	"FunctionExpression",
+	"ArrowFunctionExpression",
+]);
+const children = (node) =>
+	Object.values(node)
+		.flat()
+		.filter((value) => value && typeof value.type === "string");
+const property = (node) =>
+	node.computed ? node.property?.value : node.property?.name;
+
+// A conservative local call-graph check. Imported/dynamic dispatch is covered
+// by the actual component construction tests, not claimed as statically proven.
+export function findEarlyOptions(source) {
+	const ast = parse(source, {
+		ecmaVersion: "latest",
+		sourceType: "module",
+		loc: true,
+	});
+	const helpers = new Map();
+	const getters = [];
+	function collect(node, methods = new Map()) {
+		if (node.type === "ClassBody") {
+			methods = new Map(
+				node.body
+					.filter((entry) => !entry.computed && entry.value)
+					.map((entry) => [entry.key.name, entry.value]),
+			);
+		}
+		if (node.type === "FunctionDeclaration" && node.id)
+			helpers.set(node.id.name, node);
+		if (node.type === "VariableDeclarator" && functions.has(node.init?.type))
+			helpers.set(node.id.name, node.init);
+		if (
+			node.type === "MethodDefinition" &&
+			node.kind === "get" &&
+			["defaults", "customization"].includes(node.key.name)
+		) {
+			getters.push({ node, methods });
+		}
+		for (const child of children(node)) collect(child, methods);
+	}
+	collect(ast);
+	const failures = [];
+	for (const { node: getter, methods } of getters) {
+		const visited = new Set();
+		function execute(fn) {
+			if (!fn || visited.has(fn)) return;
+			visited.add(fn);
+			walk(fn.body);
+		}
+		function walk(node) {
+			if (!node || functions.has(node.type)) return; // callbacks are deferred unless invoked
+			if (node.type === "CallExpression") {
+				let callee = node.callee;
+				if (
+					callee.type === "MemberExpression" &&
+					["call", "apply"].includes(property(callee))
+				)
+					callee = callee.object;
+				if (callee.type === "MemberExpression") {
+					const name = property(callee);
+					if (optionMethods.has(name))
+						failures.push({
+							phase: getter.key.name,
+							method: name,
+							line: node.loc.start.line,
+						});
+					if (callee.object.type === "ThisExpression")
+						execute(methods.get(name));
+				} else if (callee.type === "Identifier")
+					execute(helpers.get(callee.name));
+				else if (functions.has(callee.type)) execute(callee);
+			}
+			for (const child of children(node)) walk(child);
+		}
+		execute(getter.value);
+	}
+	return failures;
+}