@quilted/quilt 0.5.151 → 0.5.153

package/source/server/request-router.tsx

@@ -1,9 +1,8 @@
-import {Fragment, type ReactElement} from 'react';
+import {isValidElement, type ReactElement} from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
 
 import {
-  styleAssetAttributes,
   styleAssetPreloadAttributes,
-  scriptAssetAttributes,
   scriptAssetPreloadAttributes,
   type AssetsCacheKey,
   type BrowserAssets,
@@ -12,451 +11,313 @@ import {
 import {AssetsManager} from '@quilted/react-assets/server';
 import {HttpManager} from '@quilted/react-http/server';
 import {
-  renderHtmlToString,
-  HtmlManager,
-  Html,
-  type HtmlProps,
+  Head,
+  Script,
+  ScriptPreload,
+  Style,
+  StylePreload,
+  HTMLManager,
 } from '@quilted/react-html/server';
-import type {
-  Options as ExtractOptions,
-  ServerRenderRequestContext,
-} from '@quilted/react-server-render/server';
 import {extract} from '@quilted/react-server-render/server';
 
-import {html, redirect} from '@quilted/request-router';
-import type {
-  EnhancedRequest,
-  RequestHandler,
-  RequestContext,
-} from '@quilted/request-router';
+import {HTMLResponse, RedirectResponse} from '@quilted/request-router';
 
 import {ServerContext} from './ServerContext.tsx';
 
-export interface ServerRenderOptions<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
-> {
-  stream?: 'headers' | false;
-  assets?: BrowserAssets<CacheKey>;
-  extract?: Omit<ExtractOptions, 'context'> & {
-    readonly context?:
-      | ServerRenderRequestContext
-      | ((
-          request: EnhancedRequest,
-          context: Context,
-        ) => ServerRenderRequestContext);
-  };
-  html?:
-    | ServerRenderHtmlRender<Context>
-    | {
-        readonly rootElement?: HtmlProps['rootElement'];
-      };
-}
-
-export interface ServerRenderHtmlRender<Context> {
-  (
-    content: string | undefined,
-    details: Pick<ServerRenderAppDetails, 'http' | 'html'> & {
-      readonly request: EnhancedRequest;
-      readonly context: Context;
+export interface RenderOptions<CacheKey = AssetsCacheKey> {
+  readonly request: Request;
+  readonly stream?: 'headers' | false;
+  readonly assets?: BrowserAssets<CacheKey>;
+  readonly cacheKey?: CacheKey;
+  waitUntil?(promise: Promise<any>): void;
+  renderHTML?(
+    content: ReadableStream<string>,
+    context: {
+      readonly manager: HTMLManager;
       readonly assets?: BrowserAssetsEntry;
       readonly preloadAssets?: BrowserAssetsEntry;
-      readonly rootElement?: HtmlProps['rootElement'];
     },
-  ): ReactElement<any> | Promise<ReactElement<any>>;
+  ): ReadableStream<any> | Promise<ReadableStream<any>>;
 }
 
-export interface ServerRenderAppDetails<
-  _Context = RequestContext,
-  CacheKey = AssetsCacheKey,
-> {
-  readonly http: HttpManager;
-  readonly html: HtmlManager;
-  readonly assets: AssetsManager<CacheKey>;
-  readonly rendered?: string;
-}
+export async function renderToResponse<CacheKey = AssetsCacheKey>(
+  element: ReactElement<any>,
+  options: RenderOptions<CacheKey>,
+): Promise<HTMLResponse | RedirectResponse>;
+export async function renderToResponse<CacheKey = AssetsCacheKey>(
+  options: RenderOptions<CacheKey>,
+): Promise<HTMLResponse | RedirectResponse>;
+export async function renderToResponse<CacheKey = AssetsCacheKey>(
+  optionsOrElement: ReactElement<any> | RenderOptions<CacheKey>,
+  definitelyOptions?: RenderOptions<CacheKey>,
+) {
+  let element: ReactElement<any> | undefined;
+  let options: RenderOptions<CacheKey>;
 
-export function createServerRender<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
->(
-  getApp:
-    | ReactElement<any>
-    | ((
-        request: EnhancedRequest,
-        context: Context,
-      ) =>
-        | ReactElement<any>
-        | undefined
-        | Promise<ReactElement<any> | undefined>),
-  options?: ServerRenderOptions<Context, CacheKey>,
-): RequestHandler<Context>;
-export function createServerRender<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
->(options?: ServerRenderOptions<Context, CacheKey>): RequestHandler<Context>;
-export function createServerRender<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
->(
-  ...args: [
-    (
-      | ReactElement<any>
-      | ((
-          request: EnhancedRequest,
-          context: Context,
-        ) =>
-          | ReactElement<any>
-          | undefined
-          | Promise<ReactElement<any> | undefined>)
-      | ServerRenderOptions<Context, CacheKey>
-      | undefined
-    ),
-    ServerRenderOptions<Context, CacheKey>?,
-  ]
-): RequestHandler<Context> {
-  let getApp:
-    | ReactElement<any>
-    | ((
-        request: EnhancedRequest,
-        context: Context,
-      ) =>
-        | ReactElement<any>
-        | undefined
-        | Promise<ReactElement<any> | undefined>)
-    | undefined;
-  let options: ServerRenderOptions<Context, CacheKey>;
-
-  if (args.length > 1) {
-    getApp = args[0] as any;
-    options = (args[1] ?? {}) as any;
+  if (isValidElement(optionsOrElement)) {
+    element = optionsOrElement;
+    options = definitelyOptions!;
   } else {
-    options = (args[0] ?? {}) as any;
+    options = optionsOrElement as any;
   }
 
-  const stream = options.stream;
-
-  return async (request, requestContext) => {
-    const accepts = request.headers.get('Accept');
-
-    if (accepts != null && !accepts.includes('text/html')) return;
+  const {
+    request,
+    stream: shouldStream = false,
+    assets,
+    cacheKey: explicitCacheKey,
+    waitUntil = noop,
+    renderHTML,
+  } = options;
+
+  const baseUrl = (request as any).URL ?? new URL(request.url);
+
+  const cacheKey =
+    explicitCacheKey ??
+    (((await assets?.cacheKey?.(request)) ?? {}) as CacheKey);
+
+  const html = new HTMLManager();
+  const http = new HttpManager({headers: request.headers});
+  const assetsManager = new AssetsManager<CacheKey>({cacheKey});
+
+  let responseStatus = 200;
+  let appHeaders: Headers | undefined;
+  let appStream: ReadableStream<any> | undefined;
+
+  if (shouldStream === false && element != null) {
+    const rendered = await extract(element, {
+      decorate(element) {
+        return (
+          <ServerContext
+            http={http}
+            html={html}
+            url={baseUrl}
+            assets={assetsManager}
+          >
+            {element}
+          </ServerContext>
+        );
+      },
+    });
 
-    const renderResponse = stream
-      ? renderAppToStreamedResponse
-      : renderAppToResponse;
+    const {headers, statusCode = 200, redirectUrl} = http.state;
 
-    return renderResponse(
-      typeof getApp === 'function'
-        ? () => (getApp as any)(request, requestContext)
-        : getApp,
-      {
-        ...options,
+    if (redirectUrl) {
+      return new RedirectResponse(redirectUrl, {
+        status: statusCode as 301,
+        headers,
         request,
-        context: requestContext,
-        extract: {
-          ...options.extract,
-          context:
-            typeof options.extract?.context === 'function'
-              ? options.extract.context(request, requestContext)
-              : options.extract?.context,
-        },
-      },
-    );
-  };
-}
+      });
+    }
 
-export async function renderAppToResponse<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
->(
-  getApp:
-    | ReactElement<any>
-    | (() =>
-        | ReactElement<any>
-        | undefined
-        | Promise<ReactElement<any> | undefined>)
-    | undefined,
-  {
-    request,
-    context,
-    assets,
-    extract,
-    html: htmlOptions,
-  }: Pick<
-    ServerRenderOptions<Context, CacheKey>,
-    'assets' | 'html' | 'extract'
-  > & {readonly request: EnhancedRequest; readonly context: Context},
-) {
-  const app = typeof getApp === 'function' ? await getApp() : getApp;
-  const cacheKey = (await assets?.cacheKey?.(request)) as CacheKey;
-
-  const renderDetails = await serverRenderDetailsForApp(app, {
-    extract,
-    cacheKey,
-    url: request.url,
-    headers: request.headers,
-  });
+    appHeaders = headers;
+    responseStatus = statusCode;
 
-  const {headers, statusCode = 200, redirectUrl} = renderDetails.http.state;
+    const appTransformStream = new TransformStream();
+    const appWriter = appTransformStream.writable.getWriter();
+    appStream = appTransformStream.readable;
 
-  if (redirectUrl) {
-    return redirect(redirectUrl, {
-      status: statusCode as 301,
-      headers,
-    });
+    appWriter.write(rendered);
+    appWriter.close();
   }
 
-  const content = await renderAppDetailsToHtmlString<Context, CacheKey>(
-    renderDetails,
-    {
-      request,
-      context,
-      assets,
-      html: htmlOptions,
-    },
-  );
+  if (appStream == null) {
+    const appTransformStream = new TransformStream();
+    appStream = appTransformStream.readable;
+
+    const renderAppStream = async function renderAppStream() {
+      const appWriter = appTransformStream.writable.getWriter();
+
+      if (element != null) {
+        const rendered = await extract(element, {
+          decorate(element) {
+            return (
+              <ServerContext
+                http={http}
+                html={html}
+                url={baseUrl}
+                assets={assetsManager}
+              >
+                {element}
+              </ServerContext>
+            );
+          },
+        });
+
+        appWriter.write(rendered);
+      }
+
+      appWriter.close();
+    };
+
+    waitUntil(renderAppStream());
+  }
 
-  return html(content, {
+  const {headers, body} = await renderToHTMLStream(appStream);
+
+  return new HTMLResponse(body, {
+    status: responseStatus,
     headers,
-    status: statusCode,
   });
-}
 
-export async function renderAppToStreamedResponse<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
->(
-  getApp:
-    | ReactElement<any>
-    | (() =>
-        | ReactElement<any>
-        | undefined
-        | Promise<ReactElement<any> | undefined>)
-    | undefined,
-  {
-    request,
-    context,
-    assets,
-    extract,
-    html: htmlOptions,
-  }: Pick<
-    ServerRenderOptions<Context, CacheKey>,
-    'assets' | 'html' | 'extract'
-  > & {readonly request: EnhancedRequest; readonly context: Context},
-) {
-  const headers = new Headers();
-  const stream = new TransformStream();
+  async function renderToHTMLStream(content: ReadableStream<any>) {
+    const headers = new Headers(appHeaders);
+
+    const [synchronousAssets, preloadAssets] = await Promise.all([
+      assets?.entry({
+        cacheKey,
+        modules: assetsManager.usedModules({timing: 'load'}),
+      }),
+      assets?.modules(assetsManager.usedModules({timing: 'preload'}), {
+        cacheKey,
+      }),
+    ]);
+
+    if (synchronousAssets) {
+      for (const style of synchronousAssets.styles) {
+        headers.append(
+          'Link',
+          preloadHeader(styleAssetPreloadAttributes(style)),
+        );
+      }
+
+      for (const script of synchronousAssets.scripts) {
+        headers.append(
+          'Link',
+          preloadHeader(scriptAssetPreloadAttributes(script)),
+        );
+      }
+    }
 
-  const cacheKey = (await assets?.cacheKey?.(request)) as CacheKey;
-  const guaranteedAssets = await assets?.entry({cacheKey});
+    if (renderHTML) {
+      const body = await renderHTML(content, {
+        manager: html,
+        assets: synchronousAssets,
+        preloadAssets,
+      });
 
-  if (guaranteedAssets) {
-    for (const style of guaranteedAssets.styles) {
-      headers.append('Link', preloadHeader(styleAssetPreloadAttributes(style)));
+      return {headers, body};
     }
 
-    for (const script of guaranteedAssets.scripts) {
-      headers.append(
-        'Link',
-        preloadHeader(scriptAssetPreloadAttributes(script)),
+    const responseStream = new TextEncoderStream();
+    const body = responseStream.readable;
+
+    const renderFullHTML = async function renderFullHTML() {
+      const writer = responseStream.writable.getWriter();
+
+      writer.write(`<!DOCTYPE html>`);
+
+      const {htmlAttributes, bodyAttributes, ...headProps} = html.state;
+      const htmlContent = renderToStaticMarkup(
+        // eslint-disable-next-line jsx-a11y/html-has-lang
+        <html {...htmlAttributes}>
+          <head>
+            <Head {...headProps} />
+            {synchronousAssets?.scripts.map((script) => (
+              <Script key={script.source} asset={script} baseUrl={baseUrl} />
+            ))}
+            {synchronousAssets?.styles.map((style) => (
+              <Style key={style.source} asset={style} baseUrl={baseUrl} />
+            ))}
+            {preloadAssets?.styles.map((style) => (
+              <StylePreload
+                key={style.source}
+                asset={style}
+                baseUrl={baseUrl}
+              />
+            ))}
+            {preloadAssets?.scripts.map((script) => (
+              <ScriptPreload
+                key={script.source}
+                asset={script}
+                baseUrl={baseUrl}
+              />
+            ))}
+          </head>
+          <body
+            {...bodyAttributes}
+            dangerouslySetInnerHTML={{__html: '%%CONTENT%%'}}
+          ></body>
+        </html>,
       );
-    }
-  }
-
-  renderResponseToStream();
-
-  return html(stream.readable, {
-    headers,
-    status: 200,
-  });
 
-  async function renderResponseToStream() {
-    const app = typeof getApp === 'function' ? await getApp() : getApp;
+      const [firstChunk, secondChunk] = htmlContent.split('%%CONTENT%%');
+      writer.write(firstChunk);
+      if (element != null) writer.write(`<div id="app">`);
 
-    const renderDetails = await serverRenderDetailsForApp(app, {
-      extract,
-      cacheKey,
-      url: request.url,
-      headers: request.headers,
-    });
+      const reader = content.getReader();
 
-    const content = await renderAppDetailsToHtmlString<Context, CacheKey>(
-      renderDetails,
-      {
-        request,
-        context,
-        assets,
-        html: htmlOptions,
-      },
-    );
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        const {done, value} = await reader.read();
 
-    const encoder = new TextEncoder();
-    const writer = stream.writable.getWriter();
-    await writer.write(encoder.encode(content));
-    await writer.close();
-  }
-}
-
-async function serverRenderDetailsForApp<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
->(
-  app: ReactElement<any> | undefined,
-  {
-    url,
-    headers,
-    cacheKey,
-    extract: extractOptions,
-  }: Pick<ServerRenderOptions, 'extract'> & {
-    url?: string | URL;
-    cacheKey?: CacheKey;
-    headers?: NonNullable<
-      ConstructorParameters<typeof HttpManager>[0]
-    >['headers'];
-  } = {},
-): Promise<ServerRenderAppDetails<Context, CacheKey>> {
-  const html = new HtmlManager();
-  const http = new HttpManager({headers});
-  const assets = new AssetsManager<CacheKey>({cacheKey});
-
-  const {decorate, ...rest} = extractOptions ?? {};
-
-  const rendered = app
-    ? await extract(app, {
-        decorate(app) {
-          return (
-            <ServerContext http={http} html={html} url={url} assets={assets}>
-              {decorate?.(app) ?? app}
-            </ServerContext>
-          );
-        },
-        ...rest,
-      })
-    : undefined;
-
-  return {rendered, http, html, assets};
-}
+        if (done) {
+          break;
+        }
 
-async function renderAppDetailsToHtmlString<
-  Context = RequestContext,
-  CacheKey = AssetsCacheKey,
->(
-  details: ServerRenderAppDetails<Context, CacheKey>,
-  {
-    request,
-    context,
-    assets,
-    html: htmlOptions,
-  }: Pick<ServerRenderOptions<Context, CacheKey>, 'assets' | 'html'> & {
-    readonly request: EnhancedRequest;
-    readonly context: Context;
-    readonly cacheKey?: Partial<CacheKey>;
-  },
-) {
-  const {http, rendered, html: htmlManager, assets: assetsManager} = details;
+        writer.write(value);
+      }
 
-  const cacheKey = assetsManager.cacheKey as CacheKey;
-  const usedModules = assetsManager.usedModules({timing: 'load'});
+      if (element != null) writer.write(`</div>`);
 
-  const [entryAssets, preloadAssets] = assets
-    ? await Promise.all([
-        assets.entry({modules: usedModules, cacheKey}),
-        assets.modules(assetsManager.usedModules({timing: 'preload'}), {
+      const [newSynchronousAssets, newPreloadAssets] = await Promise.all([
+        assets?.entry({
           cacheKey,
+          modules: assetsManager.usedModules({timing: 'load'}),
         }),
-      ])
-    : [];
-
-  let renderHtml: ServerRenderHtmlRender<Context>;
-  let rootElement: HtmlProps['rootElement'];
-
-  if (typeof htmlOptions === 'function') {
-    renderHtml = htmlOptions;
-  } else {
-    rootElement = htmlOptions?.rootElement;
-    renderHtml = defaultRenderHtml;
-  }
+        assets?.modules(assetsManager.usedModules({timing: 'preload'}), {
+          cacheKey,
+        }),
+      ]);
 
-  const htmlElement = await renderHtml(rendered, {
-    request,
-    context,
-    html: htmlManager,
-    http,
-    assets: entryAssets,
-    preloadAssets,
-    rootElement,
-  });
+      if (newSynchronousAssets) {
+        const diffedSynchronousAssets = diffBrowserAssetsEntries(
+          newSynchronousAssets,
+          synchronousAssets!,
+        );
 
-  return renderHtmlToString(htmlElement);
-}
+        const diffedPreloadAssets = diffBrowserAssetsEntries(
+          newPreloadAssets!,
+          preloadAssets!,
+        );
 
-const defaultRenderHtml: ServerRenderHtmlRender<any> =
-  function defaultRenderHtml(
-    content,
-    {request, html, assets, preloadAssets, rootElement},
-  ) {
-    const baseUrl = new URL(request.url);
-
-    return (
-      <Html
-        manager={html}
-        rootElement={rootElement}
-        headEndContent={
+        const additionalAssetsContent = renderToStaticMarkup(
           <>
-            {assets &&
-              assets.styles.map((style) => {
-                const attributes = styleAssetAttributes(style, {baseUrl});
-                return <link key={style.source} {...(attributes as any)} />;
-              })}
-
-            {assets &&
-              assets.scripts.map((script) => {
-                const isModule = script.attributes?.type === 'module';
-
-                const attributes = scriptAssetAttributes(script, {
-                  baseUrl,
-                });
-
-                if (isModule) {
-                  return (
-                    <Fragment key={script.source}>
-                      <link
-                        {...(scriptAssetPreloadAttributes(script) as any)}
-                      />
-                      <script {...(attributes as any)} async />
-                    </Fragment>
-                  );
-                }
-
-                return (
-                  <script key={script.source} {...(attributes as any)} defer />
-                );
-              })}
-
-            {preloadAssets &&
-              preloadAssets.styles.map((style) => {
-                const attributes = styleAssetPreloadAttributes(style, {
-                  baseUrl,
-                });
-
-                return <link key={style.source} {...(attributes as any)} />;
-              })}
-
-            {preloadAssets &&
-              preloadAssets.scripts.map((script) => {
-                const attributes = scriptAssetPreloadAttributes(script, {
-                  baseUrl,
-                });
-
-                return <link key={script.source} {...(attributes as any)} />;
-              })}
-          </>
-        }
-      >
-        {content}
-      </Html>
-    );
-  };
+            {diffedSynchronousAssets.scripts.map((script) => (
+              <Script key={script.source} asset={script} baseUrl={baseUrl} />
+            ))}
+            {diffedSynchronousAssets.styles.map((style) => (
+              <Style key={style.source} asset={style} baseUrl={baseUrl} />
+            ))}
+            {diffedPreloadAssets.styles.map((style) => (
+              <StylePreload
+                key={style.source}
+                asset={style}
+                baseUrl={baseUrl}
+              />
+            ))}
+            {diffedPreloadAssets.scripts.map((script) => (
+              <ScriptPreload
+                key={script.source}
+                asset={script}
+                baseUrl={baseUrl}
+              />
+            ))}
+          </>,
+        );
+
+        writer.write(additionalAssetsContent);
+      }
+
+      writer.write(secondChunk);
+      writer.close();
+    };
+
+    waitUntil(renderFullHTML());
+
+    return {headers, body};
+  }
+}
 
 function preloadHeader(attributes: Partial<HTMLLinkElement>) {
   const {
@@ -480,3 +341,20 @@ function preloadHeader(attributes: Partial<HTMLLinkElement>) {
 
   return header;
 }
+
+function diffBrowserAssetsEntries(
+  newList: BrowserAssetsEntry,
+  oldList: BrowserAssetsEntry,
+): BrowserAssetsEntry {
+  const oldStyles = new Set(oldList.styles.map((style) => style.source));
+  const oldScripts = new Set(oldList.scripts.map((script) => script.source));
+
+  return {
+    styles: newList.styles.filter((style) => !oldStyles.has(style.source)),
+    scripts: newList.scripts.filter((script) => !oldScripts.has(script.source)),
+  };
+}
+
+function noop(..._args: any) {
+  // noop
+}