Latest
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373// @ts-check
import Cache from "graphql-react/Cache.mjs";import CacheContext from "graphql-react/CacheContext.mjs";import Loading from "graphql-react/Loading.mjs";import LoadingContext from "graphql-react/LoadingContext.mjs";import { createElement as h, Fragment } from "react";import { renderToString } from "react-dom/server";import waterfallRender from "react-waterfall-render/waterfallRender.mjs";import { Status, STATUS_TEXT } from "std/http/http_status.ts";import { serve as serveHttp } from "std/http/server.ts";import { toFileUrl } from "std/path/mod.ts";
import assertImportMap from "./assertImportMap.mjs";import HeadManager from "./HeadManager.mjs";import HeadManagerContext from "./HeadManagerContext.mjs";import Html from "./Html.mjs";import jsonToRawHtmlScriptValue from "./jsonToRawHtmlScriptValue.mjs";import publicFileResponse from "./publicFileResponse.mjs";import readImportMapFile from "./readImportMapFile.mjs";import RouteContext from "./RouteContext.mjs";import TransferContext from "./TransferContext.mjs";
/** * Serves a Ruck app. * @param {object} options Options. * @param {import("./assertImportMap.mjs").ImportMap * | URL} options.clientImportMap Client import map object or JSON file URL. * @param {string} [options.esModuleShimsSrc] * [`es-module-shims`](https://github.com/guybedford/es-module-shims) script * `src` URL. Defaults to `"https://unpkg.com/es-module-shims"`. * @param {URL} [options.publicDir] Public directory file URL. Defaults to a * `public` directory in the CWD. * @param {HtmlComponent} [options.htmlComponent] React component that renders * the HTML for Ruck app page responses. Defaults to {@linkcode Html}. * @param {number} options.port Port to serve on. * @param {AbortSignal} [options.signal] Abort controller signal to close the * server. * @returns {Promise<{ close: Promise<void> }>} Resolves once the server is * listening a `close` promise that resolves once the server closes. */export default async function serve({ clientImportMap, esModuleShimsSrc = "https://unpkg.com/es-module-shims", publicDir = new URL("public/", toFileUrl(Deno.cwd() + "/")), htmlComponent = Html, port, signal,}) { if ( !(clientImportMap instanceof URL) && (typeof clientImportMap !== "object" || !clientImportMap) ) { throw new TypeError( "Option `clientImportMap` must be an import map object or `URL` instance.", ); }
if (typeof esModuleShimsSrc !== "string") { throw new TypeError("Option `esModuleShimsSrc` must be a string."); }
if (!(publicDir instanceof URL)) { throw new TypeError("Option `publicDir` must be a `URL` instance."); }
if (!publicDir.href.endsWith("/")) { throw new TypeError("Option `publicDir` must be a URL ending with `/`."); }
if (typeof htmlComponent !== "function") { throw new TypeError("Option `htmlComponent` must be a function."); }
if (typeof port !== "number") { throw new TypeError("Option `port` must be a number."); }
if (signal !== undefined && !(signal instanceof AbortSignal)) { throw new TypeError("Option `signal` must be an `AbortSignal` instance."); }
/** @type {import("./assertImportMap.mjs").ImportMap} */ let clientImportMapContent;
if (clientImportMap instanceof URL) { clientImportMapContent = await readImportMapFile(clientImportMap); } else { try { assertImportMap(clientImportMap); } catch (cause) { throw new TypeError( "Option `clientImportMap` must be an import map object.", { cause }, ); }
clientImportMapContent = clientImportMap; }
// Todo: Validate and handle predictable client import map issues, such as // missing Ruck dependencies.
const routerFileUrl = new URL("router.mjs", publicDir);
/** @type {Router} */ let router;
try { ({ default: router } = await import(routerFileUrl.href)); } catch (cause) { throw new Error(`Error importing \`${routerFileUrl.href}\`.`, { cause }); }
const appFileUrl = new URL("components/App.mjs", publicDir);
/** @type {AppComponent} */ let App;
try { ({ default: App } = await import(appFileUrl.href)); } catch (cause) { throw new Error(`Error importing \`${appFileUrl.href}\`.`, { cause }); }
const close = serveHttp( async (request) => { // The route URL should be what the client originally used to start the // request. const routeUrl = new URL(request.url);
// Reverse proxy servers (load balancers, CDNs, etc.) may have forwarded // the original client request using a different protocol or host. E.g. // Fly.io forwards `https:` requests to the deployed server using `http:`.
const headerXForwardedProto = request.headers.get("x-forwarded-proto"); if (headerXForwardedProto) { routeUrl.protocol = headerXForwardedProto + ":"; }
const headerXForwardedHost = request.headers.get("x-forwarded-host"); if (headerXForwardedHost) { routeUrl.hostname = headerXForwardedHost; }
// Todo: Investigate supporting the `x-forwarded-port` header. // Todo: Investigate supporting the standard `Forwarded` header.
// First, try serving the request as a file from the public directory. // If no such file exists the request is for an app route.
if ( // Public files have a URL pathname; the homepage is an app route. routeUrl.pathname !== "/" ) { try { return await publicFileResponse(request, publicDir); } catch (cause) { if (!(cause instanceof Deno.errors.NotFound)) { throw new Error("Ruck couldn’t serve a public file.", { cause }); } } }
const headManager = new HeadManager();
/** @type {RoutePlan} */ let routePlan;
try { routePlan = router(routeUrl, headManager, true); } catch (cause) { throw new Error( `Ruck couldn’t plan the route for URL ${routeUrl.href}.`, { cause }, ); }
if (typeof routePlan !== "object" || !routePlan) { throw new TypeError( `Ruck route plan is invalid for URL ${routeUrl.href}.`, ); }
/** @type {import("react").ReactNode} */ let routeContent;
try { routeContent = await routePlan.content; } catch (cause) { throw new Error( `Ruck couldn’t resolve the route content for URL ${routeUrl.href}.`, { cause }, ); }
// Todo: Validate the route content.
try { const cache = new Cache(); const loading = new Loading();
/** @type {ResponseInit} */ const responseInit = { status: Status.OK, statusText: STATUS_TEXT[Status.OK], headers: new Headers({ "content-type": "text/html; charset=utf-8", }), };
/** @type {Transfer} */ const transfer = { request, responseInit };
const bodyReactRootInnerHtml = await waterfallRender( h( TransferContext.Provider, { value: transfer }, h( RouteContext.Provider, { value: { url: routeUrl, content: routeContent, }, }, h( HeadManagerContext.Provider, { value: headManager }, h( CacheContext.Provider, { value: cache }, h(LoadingContext.Provider, { value: loading }, h(App)), ), ), ), ), renderToString, );
const responseBody = `<!DOCTYPE html>${ renderToString( h( TransferContext.Provider, { value: transfer }, h(htmlComponent, { esModuleShimsScript: h("script", { async: true, src: esModuleShimsSrc, }), importMapScript: h("script", { type: "importmap", dangerouslySetInnerHTML: { __html: JSON.stringify(clientImportMapContent), }, }), headReactRoot: h( Fragment, null, h("meta", { name: "ruck-head-start" }), headManager.getHeadContent(), h("meta", { name: "ruck-head-end" }), ), bodyReactRoot: h("div", { id: "ruck-app", dangerouslySetInnerHTML: { __html: bodyReactRootInnerHtml }, }), hydrationScript: h("script", { type: "module", dangerouslySetInnerHTML: { __html: /* JS */ `import hydrate from "ruck/hydrate.mjs";import App from "/components/App.mjs";import router from "/router.mjs";
hydrate({ router, appComponent: App, cacheData: ${jsonToRawHtmlScriptValue(JSON.stringify(cache.store))},});`, }, }), }), ), ) }`;
return new Response(responseBody, responseInit); } catch (cause) { throw new Error("Ruck couldn’t serve the rendered route.", { cause }); } }, { port, signal }, );
return { close };}
/** * Isomorphic React component that renders the Ruck React app. * @callback AppComponent * @returns {import("react").ReactElement} */
/** * Server only React component that renders a HTML page for a server side * rendered Ruck app page. * @callback HtmlComponent * @param {HtmlComponentProps} props Props. * @returns {import("react").ReactElement} */
/** * {@linkcode HtmlComponent} React component props. * @typedef {object} HtmlComponentProps * @prop {import("react").ReactElement} esModuleShimsScript * [`es-module-shims`](https://github.com/guybedford/es-module-shims) script. * @prop {import("react").ReactElement} importMapScript Import map script. * Should be the first script in the HTML. * @prop {import("react").ReactNode} headReactRoot HTML head React root for Ruck * managed head tags. Should be early in the HTML head, typically after the * import map script as it may contain scripts. * @prop {import("react").ReactNode} bodyReactRoot HTML body React root for the * main Ruck app content. * @prop {import("react").ReactElement} hydrationScript Ruck app hydration * script. Should be towards the end of the HTML body. */
/** * Ruck response init. * @typedef {object} ResponseInit * @prop {Headers} headers Headers. * @prop {number} status HTTP status code. * @prop {string} [statusText] HTTP status text. */
/** * Ruck app route that has loaded and is ready to render. * @typedef {object} Route * @prop {URL} url Route URL. * @prop {import("react").ReactNode} content Route content. * @prop {() => void} [cleanup] Callback that runs when navigation to this route * aborts, or after navigation to the next route for a different page. Doesn’t * run during SSR. */
/** * Ruck app route plan. * @typedef {object} RoutePlan * @prop {import("react").ReactNode * | Promise<import("react").ReactNode>} content Route content. * @prop {() => void} [cleanup] Callback that runs when navigation to this route * aborts, or after navigation to the next route for a different page. Doesn’t * run during SSR. */
/** * Isomorphic function that gets the Ruck app route for a URL. * @callback Router * @param {URL} url Ruck app route URL. * @param {import("./HeadManager.mjs").default} headManager Head tag manager. * @param {boolean} isInitialRoute Is it the initial route. * @returns {RoutePlan} */
/** * Ruck app request and response context. * @typedef {object} Transfer * @prop {Readonly<Request>} request Request. * @prop {ResponseInit} responseInit Response initialization options. */