mithril-lynx 0.0.8 → 2.0.0

package/test/reload-version.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "@rstest/core";
+import { getReloadVersion, increaseReloadVersion, isStaleVersion } from "../src/reload/version.js";
+
+describe("reload version guard (replaces v1's hotStatus race-prone flag)", () => {
+	it("discards a patch stamped with an older version than the current one", () => {
+		const v1 = getReloadVersion();
+		expect(isStaleVersion(v1)).toBe(false); // not stale yet, nothing bumped
+
+		increaseReloadVersion();
+		// A patch built before this reload (stamped with the old version)
+		// must now be treated as stale — this is the exact scenario of the
+		// v1 "race de doble-build": two builds in flight, the older one's
+		// patch must lose without needing a status flag at all.
+		expect(isStaleVersion(v1)).toBe(true);
+		expect(isStaleVersion(getReloadVersion())).toBe(false);
+	});
+});

package/test/request.test.ts

@@ -0,0 +1,182 @@
+import { describe, expect, it } from "@rstest/core";
+import { createRequestor } from "../src/request.js";
+import { register as registerRedraw } from "../src/mount-redraw.js";
+
+// The underlying primitive (lynx.fetch itself — redirects, AbortController,
+// URLSearchParams bodies, Headers case-sensitivity) is validated on a real
+// device, not here — see FETCH_INVESTIGATION.md. These tests are about the
+// WRAPPER's own logic: does it build the right RequestInit, handle the
+// response/error shape correctly, and refuse the options that have no
+// fetch equivalent. A fake `fetch` (jsdom's real Response/Headers/
+// AbortController under the hood, same as a real fetch, just no network)
+// is injected via createRequestor() for exactly this reason.
+
+function fakeResponse(body: unknown, init: { status?: number; statusText?: string } = {}) {
+	const status = init.status ?? 200;
+	return {
+		ok: status >= 200 && status < 300,
+		status,
+		statusText: init.statusText ?? "",
+		json: async () => body,
+		text: async () => (typeof body === "string" ? body : JSON.stringify(body)),
+	};
+}
+
+describe("request.js: m.request-shaped wrapper over lynx.fetch", () => {
+	it("interpolates :params into the URL and defaults to GET", async () => {
+		let seenUrl: string | undefined;
+		let seenInit: any;
+		const request = createRequestor((url, init) => {
+			seenUrl = url;
+			seenInit = init;
+			return Promise.resolve(fakeResponse({ id: 42 }));
+		});
+
+		const result = await request("/users/:id", { params: { id: 42 } });
+		expect(seenUrl).toBe("/users/42");
+		expect(seenInit.method).toBe("GET");
+		expect(result).toEqual({ id: 42 });
+	});
+
+	it("JSON-encodes a plain object body and sets Content-Type", async () => {
+		let seenInit: any;
+		const request = createRequestor((_url, init) => {
+			seenInit = init;
+			return Promise.resolve(fakeResponse({ ok: true }));
+		});
+
+		await request("/things", { method: "post", body: { name: "widget" } });
+		expect(seenInit.method).toBe("POST");
+		expect(seenInit.body).toBe(JSON.stringify({ name: "widget" }));
+		expect(seenInit.headers["Content-Type"]).toBe("application/json; charset=utf-8");
+	});
+
+	it("passes a URLSearchParams body through unchanged (confirmed working on device)", async () => {
+		let seenInit: any;
+		const request = createRequestor((_url, init) => {
+			seenInit = init;
+			return Promise.resolve(fakeResponse({ ok: true }));
+		});
+
+		const usp = new URLSearchParams({ foo: "bar" });
+		await request("/form", { method: "post", body: usp });
+		expect(seenInit.body).toBe(usp);
+	});
+
+	it("rejects a FormData body immediately — confirmed absent on Lynx", async () => {
+		const request = createRequestor(() => {
+			throw new Error("should never reach fetch");
+		});
+		const fd = new FormData();
+		expect(() => request("/upload", { method: "post", body: fd })).toThrow(/FormData/);
+	});
+
+	for (const [name, options] of [
+		["config", { config: () => {} }],
+		["async: false", { async: false }],
+		["user", { user: "alice" }],
+		["password", { password: "secret" }],
+		["withCredentials", { withCredentials: true }],
+	] as const) {
+		it(`rejects "${name}" immediately — no fetch equivalent`, () => {
+			const request = createRequestor(() => {
+				throw new Error("should never reach fetch");
+			});
+			expect(() => request("/x", options as any)).toThrow();
+		});
+	}
+
+	it("builds the real m.request error shape on a non-2xx response", async () => {
+		const request = createRequestor(() =>
+			Promise.resolve(fakeResponse({ reason: "nope" }, { status: 404, statusText: "Not Found" })),
+		);
+
+		await expect(request("/missing")).rejects.toMatchObject({
+			code: 404,
+			response: { reason: "nope" },
+		});
+	});
+
+	it("extract() bypasses the status check entirely, like real m.request", async () => {
+		const request = createRequestor(() => Promise.resolve(fakeResponse(null, { status: 500 })));
+		const result = await request("/x", {
+			extract: (response: any) => ({ sawStatus: response.status }),
+		});
+		expect(result).toEqual({ sawStatus: 500 });
+	});
+
+	it("applies a type constructor to the result", async () => {
+		class User {
+			name: string;
+			constructor(data: { name: string }) {
+				this.name = data.name;
+			}
+		}
+		const request = createRequestor(() => Promise.resolve(fakeResponse({ name: "Ada" })));
+		const result = await request<User>("/user", { type: User });
+		expect(result).toBeInstanceOf(User);
+		expect(result.name).toBe("Ada");
+	});
+
+	it("redraws the currently mounted app after resolving, unless background: true", async () => {
+		// redraw() is scheduled (50ms delay), not synchronous or a 0ms timer
+		// — see mount-redraw.js's top comment: a synchronous redraw runs
+		// BEFORE this test's own .then below (chained onto request()'s
+		// *returned* promise, one microtask behind request.js's internal
+		// redraw call), and device testing showed Lynx's timer/rAF fire
+		// before even a single pending microtask regardless of delay, up to
+		// 16ms — 50ms was the first value that reliably lost that race.
+		// Confirmed as a real device bug: the UI froze on "loading" forever
+		// because the state update arrived after the (then too-early) render.
+		let redraws = 0;
+		registerRedraw(() => {
+			redraws++;
+		});
+		const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+		const request = createRequestor(() => Promise.resolve(fakeResponse({})));
+
+		await request("/x");
+		await wait(60);
+		expect(redraws).toBe(1);
+
+		await request("/x", { background: true });
+		await wait(60);
+		expect(redraws).toBe(1); // unchanged
+	});
+
+	it("timeout aborts the underlying fetch via AbortController, not just the wait", async () => {
+		let sawAbort = false;
+		const request = createRequestor(
+			(_url, init) =>
+				new Promise((_resolve, reject) => {
+					init.signal.addEventListener("abort", () => {
+						sawAbort = true;
+						const error = new Error("This operation was aborted");
+						error.name = "AbortError";
+						reject(error);
+					});
+				}),
+		);
+
+		await expect(request("/slow", { timeout: 5 })).rejects.toMatchObject({ name: "AbortError" });
+		expect(sawAbort).toBe(true);
+	});
+
+	it("exposes .abort() on the returned promise as a bonus (real m.request has no direct equivalent)", async () => {
+		let sawAbort = false;
+		const request = createRequestor(
+			(_url, init) =>
+				new Promise((_resolve, reject) => {
+					init.signal.addEventListener("abort", () => {
+						sawAbort = true;
+						reject(Object.assign(new Error("aborted"), { name: "AbortError" }));
+					});
+				}),
+		);
+
+		const promise = request("/slow");
+		promise.catch(() => {}); // don't let the eventual rejection be unhandled
+		promise.abort();
+		expect(sawAbort).toBe(true);
+	});
+});

package/test/route-hot-reload.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "@rstest/core";
+import m from "mithril-runtime";
+import { createRoute } from "../src/route.js";
+import { Op } from "../src/patch-protocol.js";
+
+// Regression test for a real, on-device-confirmed question (m-route-en-memoria.md
+// §10 F6): does a stable-host screen re-render itself in place after
+// module.hot.accept swaps its module, or does routing accidentally force a
+// full teardown/recreate? Verified for real via a device trace: the actual
+// patch for this exact shape was `[Op.SetText, id, "new text"]` — nothing
+// else. This test locks that in.
+
+describe("route.js + stable-host: a same-path re-resolve patches in place, never recreates", () => {
+	it("swapping the live-bound view (module.hot.accept's job) produces only a SetText, no Create/Remove", () => {
+		lynxTestingEnv.switchToMainThread();
+		const capturedOps: unknown[][] = [];
+		lynx.getJSContext().addEventListener("MithrilLynxV2:Patch", (event: any) => {
+			capturedOps.push(event.data);
+		});
+
+		lynxTestingEnv.switchToBackgroundThread();
+		const route = createRoute();
+		// Same shape as the real app's background.ts: a stable host object
+		// wrapping a live-bound `current*` reference, re-pointed by
+		// module.hot.accept and re-resolved via route.set(..., {replace}).
+		let currentDetail = { view: () => m("text", { key: "title" }, "first") };
+		const DetailHost = { view: () => currentDetail.view() };
+
+		route("/detail", { "/detail": DetailHost });
+		capturedOps.length = 0; // only the re-resolve below matters
+
+		currentDetail = { view: () => m("text", { key: "title" }, "second") };
+		route.set(route.get() as string, null, { replace: true });
+
+		const flat = capturedOps.flat();
+		expect(flat).not.toContain(Op.CreateElement);
+		expect(flat).not.toContain(Op.RemoveChild);
+		expect(flat).toContain(Op.SetText);
+	});
+});

package/test/route.test.ts

@@ -0,0 +1,152 @@
+import { describe, expect, it } from "@rstest/core";
+import m from "mithril-runtime";
+import { createRoute } from "../src/route.js";
+import { Op } from "../src/patch-protocol.js";
+
+// createRoute() calls renderApp() (src/background.js) internally on first
+// match, which unconditionally uses the real cross-thread channel
+// (channel.js -> lynx.getCoreContext()/getJSContext()) — so every test
+// here runs against @lynx-js/testing-environment's real PAPI, exactly like
+// test/end-to-end.test.ts, not a mock.
+
+function setupRealTree() {
+	lynxTestingEnv.switchToMainThread();
+	const pageId = __GetElementUniqueID(__CreatePage());
+	const applier = createPatchApplier(pageId);
+	applier.registerPageRoot(__CreateView(pageId));
+
+	lynxTestingEnv.switchToBackgroundThread();
+	const capturedOps: unknown[][] = [];
+	// Same pattern channel.js's real sendPatchToMainThread uses, captured
+	// on the main-thread side so ops can be applied and the resulting real
+	// tree inspected.
+	lynxTestingEnv.switchToMainThread();
+	lynx.getJSContext().addEventListener("MithrilLynxV2:Patch", (event: any) => {
+		capturedOps.push(event.data);
+		lynxTestingEnv.switchToMainThread();
+		applier.applyPatch(event.data);
+	});
+
+	return { applier, capturedOps };
+}
+
+// createPatchApplier is imported dynamically per-test-file below since it
+// isn't exported from a stable path used elsewhere yet in tests.
+import { createPatchApplier } from "../src/apply-patch.js";
+
+describe("route.js: in-memory router (plan m-route-en-memoria.md)", () => {
+	it("mounts the default route and exposes route.get()/route.param()", () => {
+		setupRealTree();
+		lynxTestingEnv.switchToBackgroundThread();
+
+		const route = createRoute();
+		const Home = { view: () => m("text", null, "home") };
+		const User = { view: () => m("text", null, "user:" + route.param("id")) };
+
+		route("/", { "/": Home, "/users/:id": User });
+
+		expect(route.get()).toBe("/");
+
+		route.set("/users/42");
+		expect(route.get()).toBe("/users/42");
+		expect(route.param("id")).toBe("42");
+	});
+
+	it("navigating replaces the screen with no orphaned nodes left behind", () => {
+		const { capturedOps } = setupRealTree();
+		lynxTestingEnv.switchToBackgroundThread();
+
+		const route = createRoute();
+		const A = { view: () => m("view", { key: "a" }, [m("text", null, "A")]) };
+		const B = { view: () => m("view", { key: "b" }, [m("text", null, "B")]) };
+
+		route("/a", { "/a": A, "/b": B });
+		capturedOps.length = 0; // only care about the ops from the NAVIGATION below
+
+		route.set("/b");
+
+		// Same spirit as test/structural-reload.test.ts, but here the whole
+		// screen changes (not a sibling insert) — the decisive check is
+		// that A's subtree is actually torn down (RemoveChild present, and
+		// no id from A gets reused for a create), not left dangling while
+		// B's is appended on top of it.
+		const navOps = capturedOps.flat();
+		expect(navOps).toContain(Op.RemoveChild);
+		expect(navOps).toContain(Op.CreateElement);
+	});
+
+	it("back()/forward() walk the in-memory history stack", () => {
+		setupRealTree();
+		lynxTestingEnv.switchToBackgroundThread();
+
+		const route = createRoute();
+		const A = { view: () => m("text", null, "A") };
+		const B = { view: () => m("text", null, "B") };
+		const C = { view: () => m("text", null, "C") };
+
+		route("/a", { "/a": A, "/b": B, "/c": C });
+		route.set("/b");
+		route.set("/c");
+		expect(route.get()).toBe("/c");
+
+		route.back();
+		expect(route.get()).toBe("/b");
+
+		route.back();
+		expect(route.get()).toBe("/a");
+
+		route.forward();
+		expect(route.get()).toBe("/b");
+	});
+
+	it("onmatch + SKIP falls through to the next matching route", () => {
+		setupRealTree();
+		lynxTestingEnv.switchToBackgroundThread();
+
+		const route = createRoute();
+		const Fallback = { view: () => m("text", null, "fallback") };
+		let calls = 0;
+
+		route("/x", {
+			"/x": {
+				onmatch() {
+					calls++;
+					return route.SKIP;
+				},
+			},
+			"/:any...": Fallback,
+		});
+
+		return new Promise<void>((resolve) => {
+			setTimeout(() => {
+				expect(calls).toBe(1);
+				expect(route.get()).toBe("/x");
+				resolve();
+			}, 0);
+		});
+	});
+
+	it("route.Link navigates on tap, and disabled Links don't wire ontap", () => {
+		setupRealTree();
+		lynxTestingEnv.switchToBackgroundThread();
+
+		const route = createRoute();
+		const A = { view: () => m("text", null, "A") };
+		const B = { view: () => m("text", null, "B") };
+		route("/a", { "/a": A, "/b": B });
+
+		const link = (route as any).Link.view({
+			attrs: { href: "/b" },
+			children: ["Go"],
+		});
+		expect(typeof link.attrs.ontap).toBe("function");
+		link.attrs.ontap({ currentTarget: null, redraw: true });
+		expect(route.get()).toBe("/b");
+
+		const disabledLink = (route as any).Link.view({
+			attrs: { href: "/a", disabled: true },
+			children: ["Go"],
+		});
+		expect(disabledLink.attrs.ontap).toBeUndefined();
+	});
+});

package/test/setup.ts

@@ -0,0 +1,25 @@
+// test/setup.ts
+//
+// The minimal gap-fill on top of @lynx-js/testing-environment's own PAPI
+// polyfill — same idea as mithril-lynx v1's testing.js, scoped down to only
+// what v2's apply-patch.js actually calls so far (no gestures/lists yet,
+// see the v2 plan's non-goals). `@lynx-js/testing-environment` already
+// implements __CreateView/__CreateText/__CreateElement/__CreateRawText/
+// __AppendElement/__InsertElementBefore/__RemoveElement/__SetAttribute/
+// __SetClasses/__AddInlineStyle/__FlushElementTree/__GetElementUniqueID —
+// the one real gap is __AddEventListener (the testing environment only
+// implements the string/worklet-event __AddEvent family that ReactLynx
+// uses; mithril-lynx binds real JS function listeners directly).
+
+globalThis.onInjectMainThreadGlobals = (target: any) => {
+	target.lynx.getEngine = target.lynx.getNative;
+
+	target.__AddEventListener = (node: any, name: string, handler: (...args: unknown[]) => unknown) => {
+		node.__vanillaListeners ??= {};
+		(node.__vanillaListeners[name] ??= new Set()).add(handler);
+	};
+
+	target.__RemoveEventListener = (node: any, name: string, handler: unknown) => {
+		node.__vanillaListeners?.[name]?.delete(handler);
+	};
+};

package/test/structural-reload.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, it } from "@rstest/core";
+import m from "mithril";
+import { Op } from "../src/patch-protocol.js";
+import { createVirtualBackend } from "../src/backends/virtual-backend.js";
+import { createLynxDocument } from "../src/fake-dom.js";
+import renderFactory from "mithril/render/render.js";
+
+// Tests the v2 plan's §3.6 hypothesis directly, WITHOUT a device: does
+// re-rendering the SAME root/document with a structurally different tree
+// (a sibling inserted next to an unrelated, focused-in-spirit node) reuse
+// the unrelated node's id — i.e. does it survive as the SAME element,
+// rather than being torn down and recreated? This is exactly what "reload
+// B (estructural) doesn't lose the input's focus" depends on, and it's
+// mithril's own diff doing the work, not a hand-written reconciler (see
+// mithril-lynx-v2-desde-cero.md §3.6).
+//
+// This does not replace on-device verification (F4) — it verifies the
+// PART of the hypothesis that's actually testable off-device: id/identity
+// stability across a structural re-render. Whether the real native
+// `<input>` keeps keyboard focus and in-progress text is a device-only
+// question (F4's real acceptance criterion).
+
+describe("structural re-render reuses unrelated nodes (v2 plan §3.6 hypothesis)", () => {
+	it("does not recreate a sibling `input`-like node when a new node is inserted next to it", () => {
+		const backend = createVirtualBackend();
+		const document = createLynxDocument(backend);
+		const render = renderFactory();
+
+		function redraw() {
+			render(document, view(), redraw);
+		}
+
+		// `key` on every sibling is load-bearing here, not decoration: this is
+		// exactly the discipline the plan's §3.6 calls out as required for
+		// Mithril's own (unkeyed-diff) middle-insertion trap to not apply —
+		// without keys, an unkeyed diff treats "insert in the middle" as
+		// "index 1 changed tag" and recreates everything from that index on,
+		// which is a real Mithril behavior, not a v2 bug. The un-keyed case
+		// is deliberately NOT what this test asserts.
+		let showExtra = false;
+		function view() {
+			const children = [m("view", { key: "a", class: "a" }, "A")];
+			if (showExtra) children.push(m("view", { key: "extra", class: "extra" }, "EXTRA"));
+			children.push(m("input", { key: "input", class: "focused-input" }));
+			return m("view", { class: "root" }, children);
+		}
+
+		redraw();
+		backend.takeOps(); // discard the initial patch — we only care about the DELTA below
+
+		// Capture the input's id BEFORE the structural change, by walking
+		// the fake-dom tree the same way app code never has to (test-only
+		// introspection): the root element's last child is the input.
+		const rootEl = document.firstChild as any;
+		const inputBefore = rootEl._children[rootEl._children.length - 1];
+		const inputIdBefore = inputBefore._id;
+
+		showExtra = true;
+		redraw();
+		const deltaOps = backend.takeOps() ?? [];
+
+		// The decisive check: no RemoveChild/CreateElement op in the delta
+		// touches the input's id — it was reused in place, only a new
+		// sibling was created and inserted before it.
+		const ARITY = {
+			[Op.CreateElement]: 2,
+			[Op.CreateElementNS]: 3,
+			[Op.CreateText]: 2,
+			[Op.InsertBefore]: 3,
+			[Op.RemoveChild]: 2,
+			[Op.SetAttribute]: 3,
+			[Op.RemoveAttribute]: 2,
+			[Op.SetAttributeNS]: 4,
+			[Op.SetStyleProperty]: 3,
+			[Op.RemoveStyleProperty]: 2,
+			[Op.SetText]: 2,
+			[Op.AddEvent]: 2,
+			[Op.RemoveEvent]: 2,
+		} as Record<number, number>;
+		for (let i = 0; i < deltaOps.length; ) {
+			const opcode = deltaOps[i++] as number;
+			const args = deltaOps.slice(i, i + ARITY[opcode]);
+			if (opcode === Op.CreateElement) {
+				expect(args[1]).not.toBe(inputIdBefore);
+			} else if (opcode === Op.RemoveChild) {
+				expect(args[1]).not.toBe(inputIdBefore);
+			}
+			i += ARITY[opcode];
+		}
+
+		const rootElAfter = document.firstChild as any;
+		const inputAfter = rootElAfter._children[rootElAfter._children.length - 1];
+		expect(inputAfter._id).toBe(inputIdBefore);
+	});
+});