ClintchizandClaude Opus 5
17aa3b98eb
The island pieces existed but nothing connected .wrn compilation to island
emission. Now:
- codegen emits a data-wrn-island placeholder for component tags bound to
.tsx imports, keeping .wrn components on the normal mount path
- the dev pipeline and static build resolve island imports, thread the
names into codegen, and build the bundles
- collectScripts adds /__wrnexus/islands.js only when island markup is
present, so island-free pages still ship nothing
- island routes classify as static-interactive via hasIslands
Three bugs found by driving a real page in the browser:
1. The mount runtime was never built anywhere, so the bootstrap 404'd and
no island mounted.
2. Building the runtime separately from the islands gave each its own copy
of React: "Cannot read properties of null (reading 'useState')". The
runtime is now an entrypoint of the same build so React stays in one
shared chunk. The existing single-React test only compared bundles
within one build and could not see across build boundaries.
3. Island props arrived as attribute strings, so start={3} was "3" and
incrementing produced "31" then "311". Props now follow JSX semantics:
{…} parses as JSON, quoted values stay strings, and a runtime
expression is a WRN-ISLAND-PROPS build error rather than a silent
wrong value.
island-codegen.ts no longer imports @wrnexus/core. Compiler modules are
bundled into the Node-only VS Code extension, which contains no other
packages, so a runtime import of core broke the editor compiler; the two
helpers are implemented locally and the core dependency is dropped again.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { afterEach, expect, test } from "bun:test";
|
|
import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
|
|
import { join } from "node:path";
|
|
import { tmpdir } from "node:os";
|
|
import { buildRouter } from "@wrnexus/router";
|
|
import { createHandlers, type RuntimeDeps } from "../src/runtime.ts";
|
|
|
|
const roots: string[] = [];
|
|
afterEach(() => roots.splice(0).forEach((root) => rmSync(root, { recursive: true, force: true })));
|
|
|
|
function customNotFoundRuntime() {
|
|
const root = mkdtempSync(join(tmpdir(), "wrnexus-not-found-"));
|
|
roots.push(root);
|
|
const app = join(root, "app");
|
|
mkdirSync(join(app, "pages"), { recursive: true });
|
|
mkdirSync(join(app, "api"), { recursive: true });
|
|
writeFileSync(join(app, "pages/404.ts"), "export default () => '';");
|
|
writeFileSync(join(app, "api/404.ts"), "export const GET = () => null;");
|
|
return createHandlers({
|
|
mode: "production",
|
|
hmr: false,
|
|
router: buildRouter(app),
|
|
loadModule: async (file) =>
|
|
file.includes(`${join("api", "404")}.ts`)
|
|
? {
|
|
GET: () =>
|
|
Response.json({ code: "CUSTOM_NOT_FOUND" }, { headers: { "x-custom": "yes" } }),
|
|
}
|
|
: { default: () => "<main><h1>That page is gone</h1></main>" },
|
|
getMiddleware: async () => [],
|
|
assets: { serve: async () => null },
|
|
} satisfies RuntimeDeps);
|
|
}
|
|
|
|
const server = { upgrade: () => false };
|
|
|
|
test("renders app/pages/404 with an HTTP 404 status", async () => {
|
|
const response = await customNotFoundRuntime().fetch(
|
|
new Request("https://example.test/missing"),
|
|
server,
|
|
);
|
|
expect(response?.status).toBe(404);
|
|
expect(await response?.text()).toContain("That page is gone");
|
|
});
|
|
|
|
test("uses app/api/404 for unmatched API routes and preserves headers", async () => {
|
|
const response = await customNotFoundRuntime().fetch(
|
|
new Request("https://example.test/api/missing"),
|
|
server,
|
|
);
|
|
expect(response?.status).toBe(404);
|
|
expect(response?.headers.get("x-custom")).toBe("yes");
|
|
expect(await response?.json()).toEqual({ code: "CUSTOM_NOT_FOUND" });
|
|
});
|