@emseepea/create-react-ui-server 0.0.4 → 0.0.5

package/README.md

@@ -25,6 +25,11 @@ This example makes the server-rendered form interactive with React and imports
 one compiled Em See Pea stylesheet. It needs no Tailwind configuration and uses
 the same sample states as the native example.
 
+`src/server.tsx` assembles the server. HTTP handlers live in `src/routes/`,
+where the filename supplies the method and path. The route files serve the page,
+form response, stylesheet, and browser script. Add a direct Fastify route only
+when a handler does not fit this simple file convention.
+
 ## Run
 
 From this directory:

package/initializer-dist/template/README.md

@@ -7,6 +7,11 @@ This example makes the server-rendered form interactive with React and imports
 one compiled Em See Pea stylesheet. It needs no Tailwind configuration and uses
 the same sample states as the native example.
 
+`src/server.tsx` assembles the server. HTTP handlers live in `src/routes/`,
+where the filename supplies the method and path. The route files serve the page,
+form response, stylesheet, and browser script. Add a direct Fastify route only
+when a handler does not fit this simple file convention.
+
 ## Run
 
 From this directory:

package/initializer-dist/template/package.json

@@ -29,8 +29,8 @@
   },
   "private": true,
   "dependencies": {
-    "@emseepea/react": "0.0.5",
-    "@emseepea/server": "0.2.2",
+    "@emseepea/react": "0.0.6",
+    "@emseepea/server": "0.3.0",
     "@emseepea/tailwind": "0.0.2",
     "react": "19.2.8",
     "react-dom": "19.2.8"

package/initializer-dist/template/src/routes/get.client.js.ts

@@ -0,0 +1,9 @@
+import { readFile } from "node:fs/promises";
+
+import type { HttpRouteHandler } from "@emseepea/server";
+
+const client = await readFile(new URL("../client.js", import.meta.url), "utf8");
+
+export default (async (_request, reply) => {
+  await reply.type("text/javascript; charset=utf-8").header("cache-control", "no-store").send(client);
+}) satisfies HttpRouteHandler;

package/initializer-dist/template/src/routes/get.emseepea.css.ts

@@ -0,0 +1,9 @@
+import { readFile } from "node:fs/promises";
+
+import type { HttpRouteHandler } from "@emseepea/server";
+
+const stylesheet = await readFile(new URL(import.meta.resolve("@emseepea/tailwind/styles.css")), "utf8");
+
+export default (async (_request, reply) => {
+  await reply.type("text/css; charset=utf-8").header("cache-control", "no-store").send(stylesheet);
+}) satisfies HttpRouteHandler;

package/initializer-dist/template/src/routes/get.index.ts

@@ -0,0 +1,7 @@
+import type { HttpRouteHandler } from "@emseepea/server";
+
+import { pageFromQuery } from "../ui.js";
+
+export default (async (request, reply) => {
+  await reply.type("text/html; charset=utf-8").send(pageFromQuery(request.query));
+}) satisfies HttpRouteHandler;

package/initializer-dist/template/src/routes/post.index.ts

@@ -0,0 +1,7 @@
+import type { HttpRouteHandler } from "@emseepea/server";
+
+import { submittedView } from "../ui.js";
+
+export default (async (request, reply) => {
+  await reply.type("application/json; charset=utf-8").send(submittedView(request.body));
+}) satisfies HttpRouteHandler;

package/initializer-dist/template/src/server.tsx

@@ -1,16 +1,7 @@
-import { readFile } from "node:fs/promises";
 import { parse } from "node:querystring";
 
-import {
-  fixtureForState,
-  viewFromSubmission,
-} from "./ui-shared.js";
-import { ElicitationForm } from "@emseepea/react";
-import { createEmseepea, discoverCapabilities, serveEmseepea, type ElicitationView } from "@emseepea/server";
-import { renderToString } from "react-dom/server";
+import { createEmseepea, discoverCapabilities, registerRoutes, serveEmseepea } from "@emseepea/server";
 
-const stylesheet = await readFile(new URL(import.meta.resolve("@emseepea/tailwind/styles.css")), "utf8");
-const client = await readFile(new URL("./client.js", import.meta.url), "utf8");
 const app = createEmseepea({
   name: "emseepea-react-ui-server",
   version: "0.0.0",
@@ -23,24 +14,7 @@ app.addContentTypeParser(
   { parseAs: "string" },
   (_request, body, done) => done(null, parse(body.toString())),
 );
-app.get("/emseepea.css", async (_request, reply) => {
-  await reply.type("text/css; charset=utf-8").header("cache-control", "no-store").send(stylesheet);
-});
-app.get("/client.js", async (_request, reply) => {
-  await reply.type("text/javascript; charset=utf-8").header("cache-control", "no-store").send(client);
-});
-app.get("/", async (request, reply) => {
-  const query = record(request.query);
-  const view = fixtureForState(query.state);
-  await reply.type("text/html; charset=utf-8").send(page(
-    view,
-    first(query.theme) === "dark" ? "dark" : "light",
-    first(query.style) !== "off",
-  ));
-});
-app.post("/", async (request, reply) => {
-  await reply.type("application/json; charset=utf-8").send(viewFromSubmission(request.body));
-});
+await registerRoutes(app, new URL("./routes/", import.meta.url));
 
 const running = await serveEmseepea(app, { port: Number.parseInt(process.env.PORT ?? "3001", 10) });
 console.log(`Em See Pea React UI example listening at ${running.url}`);
@@ -51,25 +25,3 @@ async function shutdown(): Promise<void> {
 }
 process.once("SIGINT", () => void shutdown());
 process.once("SIGTERM", () => void shutdown());
-
-function page(view: ElicitationView, theme: "light" | "dark", styled: boolean): string {
-  const markup = renderToString(<ElicitationForm view={view} headingLevel={2} />);
-  return `<!doctype html><html lang="en" data-emseepea-theme="${theme}"><head>` +
-    `<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` +
-    `<title>Pea planting plan preview - Em See Pea</title>${styled ? '<link rel="stylesheet" href="/emseepea.css">' : ""}` +
-    `</head><body><a href="#main-content">Skip to main content</a><main id="main-content" tabindex="-1">` +
-    `<h1>React and Tailwind form example</h1><div id="app">${markup}</div></main>` +
-    `<script id="emseepea-view" type="application/json">${safeJson(view)}</script>` +
-    `<script type="module" src="/client.js"></script></body></html>`;
-}
-
-function safeJson(value: unknown): string {
-  return JSON.stringify(value).replaceAll("&", "\\u0026").replaceAll("<", "\\u003c")
-    .replaceAll(">", "\\u003e").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
-}
-function record(value: unknown): Record<string, unknown> {
-  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
-}
-function first(value: unknown): string | undefined {
-  return typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : undefined;
-}

package/initializer-dist/template/src/ui.tsx

@@ -0,0 +1,41 @@
+import { fixtureForState, viewFromSubmission } from "./ui-shared.js";
+import { ElicitationForm } from "@emseepea/react";
+import type { ElicitationView } from "@emseepea/server";
+import { renderToString } from "react-dom/server";
+
+export function pageFromQuery(value: unknown): string {
+  const query = record(value);
+  return page(
+    fixtureForState(query.state),
+    first(query.theme) === "dark" ? "dark" : "light",
+    first(query.style) !== "off",
+  );
+}
+
+export function submittedView(value: unknown): ElicitationView {
+  return viewFromSubmission(value);
+}
+
+function page(view: ElicitationView, theme: "light" | "dark", styled: boolean): string {
+  const markup = renderToString(<ElicitationForm view={view} headingLevel={2} />);
+  return `<!doctype html><html lang="en" data-emseepea-theme="${theme}"><head>` +
+    `<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` +
+    `<title>Pea planting plan preview - Em See Pea</title>${styled ? '<link rel="stylesheet" href="/emseepea.css">' : ""}` +
+    `</head><body><a href="#main-content">Skip to main content</a><main id="main-content" tabindex="-1">` +
+    `<h1>React and Tailwind form example</h1><div id="app">${markup}</div></main>` +
+    `<script id="emseepea-view" type="application/json">${safeJson(view)}</script>` +
+    `<script type="module" src="/client.js"></script></body></html>`;
+}
+
+function safeJson(value: unknown): string {
+  return JSON.stringify(value).replaceAll("&", "\\u0026").replaceAll("<", "\\u003c")
+    .replaceAll(">", "\\u003e").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
+}
+
+function record(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
+}
+
+function first(value: unknown): string | undefined {
+  return typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : undefined;
+}

package/initializer-dist/template/test-support/browser-contract.mjs

@@ -23,6 +23,7 @@ export function testUiExample(example) {
         if (message.type() === "error") errors.push(message.text());
       });
       page.on("pageerror", (error) => errors.push(error.message));
+      await assertRouteResponses(page.request, running.origin, example.react === true);
 
       for (const theme of ["light", "dark"]) {
         for (const state of ["ready", "invalid", "busy", "terminal"]) {
@@ -35,6 +36,8 @@ export function testUiExample(example) {
             `${example.name} ${theme} ${state} has axe violations`,
           );
           assert.equal(await page.locator("html[lang='en']").count(), 1);
+          assert.equal(await page.locator("meta[name='viewport'][content='width=device-width, initial-scale=1']").count(), 1);
+          assert.equal(await page.locator("a[href='#main-content']").innerText(), "Skip to main content");
           assert.equal(await page.locator("main#main-content").count(), 1);
           assert.equal(await page.locator("h1").count(), 1);
           assert.equal(await page.title(), "Pea planting plan preview - Em See Pea");
@@ -130,6 +133,32 @@ export function testUiExample(example) {
   });
 }
 
+async function assertRouteResponses(request, origin, react) {
+  const document = await request.get(`${origin}/`);
+  assert.equal(document.status(), 200);
+  assert.match(document.headers()["content-type"], /^text\/html; charset=utf-8$/);
+
+  const stylesheet = await request.get(`${origin}/emseepea.css`);
+  assert.equal(stylesheet.status(), 200);
+  assert.match(stylesheet.headers()["content-type"], /^text\/css; charset=utf-8$/);
+  assert.equal(stylesheet.headers()["cache-control"], "no-store");
+
+  const submission = await request.post(`${origin}/`, { form: { title: "Route contract" } });
+  assert.equal(submission.status(), 200);
+  assert.match(
+    submission.headers()["content-type"],
+    react ? /^application\/json; charset=utf-8$/ : /^text\/html; charset=utf-8$/,
+  );
+
+  if (react) {
+    const client = await request.get(`${origin}/client.js`);
+    assert.equal(client.status(), 200);
+    assert.match(client.headers()["content-type"], /^text\/javascript; charset=utf-8$/);
+    assert.equal(client.headers()["cache-control"], "no-store");
+    assert.ok((await client.body()).byteLength > 0);
+  }
+}
+
 async function assertNoEffectClaim(page) {
   const text = await page.locator("[data-emseepea-part='terminal']").innerText();
   assert.match(text, /No report was sent or stored\./);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emseepea/create-react-ui-server",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Create an Em See Pea server with an accessible React form.",
   "license": "MIT",
   "type": "module",
@@ -18,8 +18,8 @@
     "prepack": "npm run build:initializer"
   },
   "devDependencies": {
-    "@emseepea/react": "0.0.5",
-    "@emseepea/server": "0.2.2",
+    "@emseepea/react": "0.0.6",
+    "@emseepea/server": "0.3.0",
     "@emseepea/tailwind": "0.0.2",
     "react": "19.2.8",
     "react-dom": "19.2.8",