tcmts.cli.test.e2e.react

Server

hashOf (dir: string, name: string) => string
serve (keep: <C extends ChildProcess>(c: C) => C, dir: string, command: "dev" | "start", app: string) => …: Start `tcm dev` or `tcm start` in `dir`, kept by `keep`; resolves with its URL.

Shared

APP "// tcm: namespace ui\nimport { Suspense, createContext, lazy, useContext } from \"react\";\nimport…
KEPT_PAGES "// tcm: namespace kept\nimport { useState } from \"react\";\nimport { Pages, useAppLinks } from \"…: An app of a few pages, each with state of its own.
ROUTED "// tcm: namespace ui\nimport { Suspense, use } from \"react\";\nimport { match, navigate, refresh,…: An app on the react library: routes from the path, links followed in the app, data read once per key.
timed (res: Response) => Promise<{ ms: number; text: string; }[]>: A response body as it arrives: each chunk with the milliseconds since the request.

Tests

testComponentsAreCompiled () => Promise<void>: A component app's components are memoized by React Compiler as it's built (oxc's, installed when it's first needed), in the browser's bundle: and the page works as written
testLazyChunksLoadWithThePage () => Promise<void>: A `lazy` component's code (what only its `import()` reaches) is split out of the page's chunks, into chunks of its own, and a page whose server component renders it starts loading them with its HTML: server rendering puts them in the page, as React's Flight says.
testPackageComponentsRenderInTheBrowser () => Promise<void>: A package's browser components (one whose module says `"use client"`, Radix's; one that uses hooks, React Aria's), rendered by a server component: sent as references to them, as tcm's own browser components are, so the server doesn't run them (React's server build has no hooks) and the browser, which has them, renders them.
testPagesKeepAndRenderAhead () => Promise<void>: The react library's Pages: the page left stays mounted, hidden, so going back shows it as it was; and a page a link to is pointed at is rendered ahead, hidden, before it's followed
testReactPlacementStreamingHydration () => Promise<void>: React: hooks, classes and contexts are placed; <Suspense> streams; the first paint is server-rendered
testRolesAndHostProtocols () => void: A package's manifest gives its definitions roles, known by their hashes: a component with the `stylesheet` role is linked to as `<Stylesheet>` is (the browser is sent the file, not its text). And it says the version of tcm's host protocol its code speaks: a tcm that doesn't serve that version won't build an app using it.
testServerComponentsAreDebuggable () => Promise<void>: Server components are React's, so React's tools see them: in `tcm dev`, their trees come with what React DevTools shows of them (their names, the server as where they ran, their stacks, whose code `tcm dev` serves by the definition's name), and what they log is said again in the browser's console. `tcm start` sends none of it.
testServerFunctionsAsProps () => Promise<void>: A server component gives browser components server functions as props (`onAdd={add}`, `.bind(null, name)` with an argument bound): the browser calls them as it calls any server function, by hash, and the page's server components render again. Only those: a server function the server component just calls isn't the browser's to call.
testTcmReact () => Promise<void>: The react library, mounted from tcm: its router and data hooks are placed in the browser, typecheck, run in Chrome's tests, and the server's first paint renders the route of the page's URL