@quilted/quilt 0.5.130 → 0.5.131

package/build/esm/server/request-router.mjs

@@ -1,34 +1,39 @@
-import { renderHtmlToString, Html } from '@quilted/react-html/server';
+import { Fragment as Fragment$1 } from 'react';
+import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, scriptAssetAttributes } from '@quilted/async/server';
+import { AsyncAssetManager } from '@quilted/react-async/server';
+import { HttpManager } from '@quilted/react-http/server';
+import { HtmlManager, renderHtmlToString, Html } from '@quilted/react-html/server';
+import { extract } from '@quilted/react-server-render/server';
 import { redirect, html } from '@quilted/request-router';
-import { renderApp } from './render.mjs';
-import { jsx } from 'react/jsx-runtime';
+import { ServerContext } from './ServerContext.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function createServerRender(render, {
   context,
+  stream,
   ...options
 } = {}) {
   return async (request, requestContext) => {
     const accepts = request.headers.get('Accept');
     if (accepts != null && !accepts.includes('text/html')) return;
     const app = await render(request, requestContext);
-    return renderAppToResponse(app, request, {
+    const renderResponse = stream ? renderAppToStreamedResponse : renderAppToResponse;
+    return renderResponse(app, request, {
       ...options,
-      context: context?.(request, requestContext) ?? requestContext
+      extract: {
+        ...options.extract,
+        context: options.extract ?? context?.(request, requestContext) ?? requestContext
+      }
     });
   };
 }
 async function renderAppToResponse(app, request, {
   assets,
-  renderHtml = defaultRenderHtml,
-  ...options
+  extract,
+  renderHtml
 } = {}) {
-  const {
-    html: htmlManager,
-    http,
-    rendered,
-    asyncAssets
-  } = await renderApp(app, {
-    ...options,
+  const renderDetails = await serverRenderDetailsForApp(app, {
+    extract,
     url: request.url,
     headers: request.headers
   });
@@ -36,56 +41,200 @@ async function renderAppToResponse(app, request, {
     headers,
     statusCode = 200,
     redirectUrl
-  } = http.state;
+  } = renderDetails.http.state;
   if (redirectUrl) {
     return redirect(redirectUrl, {
       status: statusCode,
       headers
     });
   }
+  const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+    assets,
+    renderHtml
+  });
+  return html(content, {
+    headers,
+    status: statusCode
+  });
+}
+async function renderAppToStreamedResponse(app, request, {
+  assets,
+  extract,
+  renderHtml
+} = {}) {
+  const headers = new Headers();
+  const stream = new TransformStream();
+  const assetContext = {
+    userAgent: request.headers.get('User-Agent')
+  };
+  const guaranteedAssets = await assets?.assets({
+    context: assetContext
+  });
+  if (guaranteedAssets) {
+    for (const style of guaranteedAssets.styles) {
+      headers.append('Link', preloadHeader(styleAssetPreloadAttributes(style)));
+    }
+    for (const script of guaranteedAssets.scripts) {
+      headers.append('Link', preloadHeader(scriptAssetPreloadAttributes(script)));
+    }
+  }
+  renderResponseToStream();
+  return html(stream.readable, {
+    headers,
+    status: 200
+  });
+  async function renderResponseToStream() {
+    const renderDetails = await serverRenderDetailsForApp(app, {
+      extract,
+      url: request.url,
+      headers: request.headers
+    });
+    const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+      assets,
+      renderHtml
+    });
+    const writer = stream.writable.getWriter();
+    await writer.write(content);
+    await writer.close();
+  }
+}
+async function serverRenderDetailsForApp(app, {
+  url,
+  headers,
+  extract: extractOptions
+} = {}) {
+  const html = new HtmlManager();
+  const asyncAssets = new AsyncAssetManager();
+  const http = new HttpManager({
+    headers
+  });
+  const {
+    decorate,
+    ...rest
+  } = extractOptions ?? {};
+  const rendered = await extract(app, {
+    decorate(app) {
+      return /*#__PURE__*/jsx(ServerContext, {
+        asyncAssets: asyncAssets,
+        http: http,
+        html: html,
+        url: url,
+        children: decorate?.(app) ?? app
+      });
+    },
+    ...rest
+  });
+  return {
+    rendered,
+    http,
+    html,
+    asyncAssets
+  };
+}
+async function renderAppDetailsToHtmlString(details, request, {
+  assets,
+  renderHtml = defaultRenderHtml
+} = {}) {
+  const {
+    html: htmlManager,
+    http,
+    rendered,
+    asyncAssets
+  } = details;
   const usedAssets = asyncAssets.used({
     timing: 'load'
   });
-  const assetOptions = {
+  const assetContext = {
     userAgent: request.headers.get('User-Agent')
   };
-  const [styles, scripts, preload] = assets ? await Promise.all([assets.styles({
+  const [entryAssets, preloadAssets] = assets ? await Promise.all([assets.assets({
     async: usedAssets,
-    options: assetOptions
-  }), assets.scripts({
-    async: usedAssets,
-    options: assetOptions
+    context: assetContext
   }), assets.asyncAssets(asyncAssets.used({
     timing: 'preload'
   }), {
-    options: assetOptions
-  })]) : [[], [], []];
+    context: assetContext
+  })]) : [];
   const htmlElement = await renderHtml(rendered, request, {
     html: htmlManager,
     http,
-    styles,
-    scripts,
-    preload
-  });
-  return html(renderHtmlToString(htmlElement), {
-    headers,
-    status: statusCode
+    assets: entryAssets,
+    preloadAssets
   });
+  return renderHtmlToString(htmlElement);
 }
-function defaultRenderHtml(content, request, {
+const defaultRenderHtml = function defaultRenderHtml(content, request, {
   html,
-  styles,
-  scripts,
-  preload
+  assets,
+  preloadAssets
 }) {
+  const baseUrl = new URL(request.url);
   return /*#__PURE__*/jsx(Html, {
-    url: new URL(request.url),
     manager: html,
-    styles: styles,
-    scripts: scripts,
-    preloadAssets: preload,
+    headEndContent: /*#__PURE__*/jsxs(Fragment, {
+      children: [assets && [...assets.styles].map(style => {
+        const attributes = styleAssetAttributes(style, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsx("link", {
+          ...attributes
+        }, style.source);
+      }), assets && [...assets.scripts].map(script => {
+        const isModule = script.attributes.type === 'module';
+        const attributes = scriptAssetAttributes(script, {
+          baseUrl
+        });
+        if (isModule) {
+          return /*#__PURE__*/jsxs(Fragment$1, {
+            children: [/*#__PURE__*/jsx("link", {
+              ...scriptAssetPreloadAttributes(script)
+            }), /*#__PURE__*/jsx("script", {
+              ...attributes,
+              async: true
+            })]
+          }, script.source);
+        }
+        return /*#__PURE__*/jsx("script", {
+          ...attributes,
+          defer: true
+        }, script.source);
+      }), preloadAssets && [...preloadAssets.styles].map(style => {
+        const attributes = styleAssetPreloadAttributes(style, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsx("link", {
+          ...attributes
+        }, style.source);
+      }), preloadAssets && [...preloadAssets.scripts].map(script => {
+        const attributes = scriptAssetPreloadAttributes(script, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsx("link", {
+          ...attributes
+        }, script.source);
+      })]
+    }),
     children: content
   });
+};
+function preloadHeader(attributes) {
+  const {
+    as,
+    rel = 'preload',
+    href,
+    crossOrigin,
+    crossorigin
+  } = attributes;
+
+  // Support both property and attribute versions of the casing
+  const finalCrossOrigin = crossOrigin ?? crossorigin;
+  let header = `<${href}>; rel="${rel}"; as="${as}"`;
+  if (finalCrossOrigin === '' || finalCrossOrigin === true) {
+    header += `; crossorigin`;
+  } else if (typeof finalCrossOrigin === 'string') {
+    header += `; crossorigin="${finalCrossOrigin}"`;
+  }
+  return header;
 }
 
-export { createServerRender, renderAppToResponse };
+export { createServerRender, renderAppToResponse, renderAppToStreamedResponse };

package/build/esm/static/index.mjs

@@ -1,7 +1,8 @@
+import { styleAssetAttributes, scriptAssetAttributes, styleAssetPreloadAttributes, scriptAssetPreloadAttributes } from '@quilted/async/server';
 import { renderHtmlToString, Html } from '@quilted/react-html/server';
 import { StaticRenderer, StaticRendererContext } from '@quilted/react-router/static';
 import { renderApp } from './render.mjs';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const BASE_URL = 'http://localhost:3000';
 async function renderStatic(App, {
@@ -173,30 +174,20 @@ async function renderStatic(App, {
     const usedAssets = asyncAssets.used({
       timing: 'load'
     });
-    const [moduleStyles, moduleScripts, modulePreload, nomoduleStyles, nomoduleScripts] = await Promise.all([assets.styles({
+    const [moduleAssets, modulePreload, nomoduleAssets] = await Promise.all([assets.assets({
       async: usedAssets,
-      options: {
-        modules: true
-      }
-    }), assets.scripts({
-      async: usedAssets,
-      options: {
+      context: {
         modules: true
       }
     }), assets.asyncAssets(asyncAssets.used({
       timing: 'preload'
     }), {
-      options: {
+      context: {
         modules: true
       }
-    }), assets.styles({
-      async: usedAssets,
-      options: {
-        modules: false
-      }
-    }), assets.scripts({
+    }), assets.assets({
       async: usedAssets,
-      options: {
+      context: {
         modules: false
       }
     })]);
@@ -204,22 +195,49 @@ async function renderStatic(App, {
     // We don’t want to load styles from both bundles, so we only use module styles,
     // since modules are intended to be the default and CSS (usually) doesn’t
     // have features that meaningfully break older user agents.
-    const styles = moduleStyles.length > 0 ? moduleStyles : nomoduleStyles;
-
-    // If there are nomodule scripts, we can’t really do preloading, because we can’t
-    // prevent the nomodule scripts from being preloaded in module browsers. If there
-    // are only module scripts, we can preload those.
-    const preload = nomoduleScripts.length > 0 ? [] : modulePreload;
-    const scripts = [...moduleScripts, ...nomoduleScripts.map(script => ({
-      ...script,
-      nomodule: true
-    }))];
+    const styles = moduleAssets.styles.length > 0 ? moduleAssets.styles : nomoduleAssets.styles;
     const minifiedHtml = renderHtmlToString( /*#__PURE__*/jsx(Html, {
-      url: url,
       manager: htmlManager,
-      styles: styles,
-      scripts: scripts,
-      preloadAssets: preload,
+      headEndContent: /*#__PURE__*/jsxs(Fragment, {
+        children: [[...styles].map(style => {
+          const attributes = styleAssetAttributes(style, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsx("link", {
+            ...attributes
+          }, style.source);
+        }), [...moduleAssets.scripts].map(script => {
+          const attributes = scriptAssetAttributes(script, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsx("script", {
+            ...attributes
+          }, script.source);
+        }), [...nomoduleAssets.scripts].map(script => {
+          const attributes = scriptAssetAttributes(script, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsx("script", {
+            ...attributes,
+            // @ts-expect-error Rendering to HTML, so using the lowercase name
+            nomodule: moduleAssets.scripts.length > 0 ? true : undefined
+          }, script.source);
+        }), [...modulePreload.styles].map(style => {
+          const attributes = styleAssetPreloadAttributes(style, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsx("link", {
+            ...attributes
+          }, style.source);
+        }), [...modulePreload.scripts].map(script => {
+          const attributes = scriptAssetPreloadAttributes(script, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsx("link", {
+            ...attributes
+          }, script.source);
+        })]
+      }),
       children: markup
     }));
     const html = prettify ? await prettifyHtml(minifiedHtml) : minifiedHtml;

package/build/esnext/server/index.esnext

@@ -1,10 +1,9 @@
 export { SERVER_ACTION_ID as HTML_SERVER_ACTION_ID, Html, HtmlContext, HtmlManager, Serialize, renderHtmlToString } from '@quilted/react-html/server';
 export { ServerAction, ServerRenderManager, ServerRenderManagerContext, extract, useServerAction } from '@quilted/react-server-render/server';
-export { createAssetManifest } from '@quilted/async/server';
+export { createAssetManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/async/server';
 export { SERVER_ACTION_ID as ASYNC_ASSETS_SERVER_ACTION_ID, AsyncAssetContext, AsyncAssetManager } from '@quilted/react-async/server';
 export { createRequestRouterLocalization } from '@quilted/react-localize/request-router';
 export { EnhancedRequest, EnhancedResponse, Request, Response, createHeaders, createRequestRouter } from '@quilted/request-router';
 export { parseAcceptLanguageHeader } from '@quilted/react-localize';
-export { renderApp } from './render.esnext';
 export { ServerContext } from './ServerContext.esnext';
-export { createServerRender, renderAppToResponse } from './request-router.esnext';
+export { createServerRender, renderAppToResponse, renderAppToStreamedResponse } from './request-router.esnext';

package/build/esnext/server/request-router.esnext

@@ -1,34 +1,39 @@
-import { renderHtmlToString, Html } from '@quilted/react-html/server';
+import { Fragment as Fragment$1 } from 'react';
+import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, scriptAssetAttributes } from '@quilted/async/server';
+import { AsyncAssetManager } from '@quilted/react-async/server';
+import { HttpManager } from '@quilted/react-http/server';
+import { HtmlManager, renderHtmlToString, Html } from '@quilted/react-html/server';
+import { extract } from '@quilted/react-server-render/server';
 import { redirect, html } from '@quilted/request-router';
-import { renderApp } from './render.esnext';
-import { jsx } from 'react/jsx-runtime';
+import { ServerContext } from './ServerContext.esnext';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function createServerRender(render, {
   context,
+  stream,
   ...options
 } = {}) {
   return async (request, requestContext) => {
     const accepts = request.headers.get('Accept');
     if (accepts != null && !accepts.includes('text/html')) return;
     const app = await render(request, requestContext);
-    return renderAppToResponse(app, request, {
+    const renderResponse = stream ? renderAppToStreamedResponse : renderAppToResponse;
+    return renderResponse(app, request, {
       ...options,
-      context: context?.(request, requestContext) ?? requestContext
+      extract: {
+        ...options.extract,
+        context: options.extract ?? context?.(request, requestContext) ?? requestContext
+      }
     });
   };
 }
 async function renderAppToResponse(app, request, {
   assets,
-  renderHtml = defaultRenderHtml,
-  ...options
+  extract,
+  renderHtml
 } = {}) {
-  const {
-    html: htmlManager,
-    http,
-    rendered,
-    asyncAssets
-  } = await renderApp(app, {
-    ...options,
+  const renderDetails = await serverRenderDetailsForApp(app, {
+    extract,
     url: request.url,
     headers: request.headers
   });
@@ -36,56 +41,200 @@ async function renderAppToResponse(app, request, {
     headers,
     statusCode = 200,
     redirectUrl
-  } = http.state;
+  } = renderDetails.http.state;
   if (redirectUrl) {
     return redirect(redirectUrl, {
       status: statusCode,
       headers
     });
   }
+  const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+    assets,
+    renderHtml
+  });
+  return html(content, {
+    headers,
+    status: statusCode
+  });
+}
+async function renderAppToStreamedResponse(app, request, {
+  assets,
+  extract,
+  renderHtml
+} = {}) {
+  const headers = new Headers();
+  const stream = new TransformStream();
+  const assetContext = {
+    userAgent: request.headers.get('User-Agent')
+  };
+  const guaranteedAssets = await assets?.assets({
+    context: assetContext
+  });
+  if (guaranteedAssets) {
+    for (const style of guaranteedAssets.styles) {
+      headers.append('Link', preloadHeader(styleAssetPreloadAttributes(style)));
+    }
+    for (const script of guaranteedAssets.scripts) {
+      headers.append('Link', preloadHeader(scriptAssetPreloadAttributes(script)));
+    }
+  }
+  renderResponseToStream();
+  return html(stream.readable, {
+    headers,
+    status: 200
+  });
+  async function renderResponseToStream() {
+    const renderDetails = await serverRenderDetailsForApp(app, {
+      extract,
+      url: request.url,
+      headers: request.headers
+    });
+    const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+      assets,
+      renderHtml
+    });
+    const writer = stream.writable.getWriter();
+    await writer.write(content);
+    await writer.close();
+  }
+}
+async function serverRenderDetailsForApp(app, {
+  url,
+  headers,
+  extract: extractOptions
+} = {}) {
+  const html = new HtmlManager();
+  const asyncAssets = new AsyncAssetManager();
+  const http = new HttpManager({
+    headers
+  });
+  const {
+    decorate,
+    ...rest
+  } = extractOptions ?? {};
+  const rendered = await extract(app, {
+    decorate(app) {
+      return /*#__PURE__*/jsx(ServerContext, {
+        asyncAssets: asyncAssets,
+        http: http,
+        html: html,
+        url: url,
+        children: decorate?.(app) ?? app
+      });
+    },
+    ...rest
+  });
+  return {
+    rendered,
+    http,
+    html,
+    asyncAssets
+  };
+}
+async function renderAppDetailsToHtmlString(details, request, {
+  assets,
+  renderHtml = defaultRenderHtml
+} = {}) {
+  const {
+    html: htmlManager,
+    http,
+    rendered,
+    asyncAssets
+  } = details;
   const usedAssets = asyncAssets.used({
     timing: 'load'
   });
-  const assetOptions = {
+  const assetContext = {
     userAgent: request.headers.get('User-Agent')
   };
-  const [styles, scripts, preload] = assets ? await Promise.all([assets.styles({
+  const [entryAssets, preloadAssets] = assets ? await Promise.all([assets.assets({
     async: usedAssets,
-    options: assetOptions
-  }), assets.scripts({
-    async: usedAssets,
-    options: assetOptions
+    context: assetContext
   }), assets.asyncAssets(asyncAssets.used({
     timing: 'preload'
   }), {
-    options: assetOptions
-  })]) : [[], [], []];
+    context: assetContext
+  })]) : [];
   const htmlElement = await renderHtml(rendered, request, {
     html: htmlManager,
     http,
-    styles,
-    scripts,
-    preload
-  });
-  return html(renderHtmlToString(htmlElement), {
-    headers,
-    status: statusCode
+    assets: entryAssets,
+    preloadAssets
   });
+  return renderHtmlToString(htmlElement);
 }
-function defaultRenderHtml(content, request, {
+const defaultRenderHtml = function defaultRenderHtml(content, request, {
   html,
-  styles,
-  scripts,
-  preload
+  assets,
+  preloadAssets
 }) {
+  const baseUrl = new URL(request.url);
   return /*#__PURE__*/jsx(Html, {
-    url: new URL(request.url),
     manager: html,
-    styles: styles,
-    scripts: scripts,
-    preloadAssets: preload,
+    headEndContent: /*#__PURE__*/jsxs(Fragment, {
+      children: [assets && [...assets.styles].map(style => {
+        const attributes = styleAssetAttributes(style, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsx("link", {
+          ...attributes
+        }, style.source);
+      }), assets && [...assets.scripts].map(script => {
+        const isModule = script.attributes.type === 'module';
+        const attributes = scriptAssetAttributes(script, {
+          baseUrl
+        });
+        if (isModule) {
+          return /*#__PURE__*/jsxs(Fragment$1, {
+            children: [/*#__PURE__*/jsx("link", {
+              ...scriptAssetPreloadAttributes(script)
+            }), /*#__PURE__*/jsx("script", {
+              ...attributes,
+              async: true
+            })]
+          }, script.source);
+        }
+        return /*#__PURE__*/jsx("script", {
+          ...attributes,
+          defer: true
+        }, script.source);
+      }), preloadAssets && [...preloadAssets.styles].map(style => {
+        const attributes = styleAssetPreloadAttributes(style, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsx("link", {
+          ...attributes
+        }, style.source);
+      }), preloadAssets && [...preloadAssets.scripts].map(script => {
+        const attributes = scriptAssetPreloadAttributes(script, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsx("link", {
+          ...attributes
+        }, script.source);
+      })]
+    }),
     children: content
   });
+};
+function preloadHeader(attributes) {
+  const {
+    as,
+    rel = 'preload',
+    href,
+    crossOrigin,
+    crossorigin
+  } = attributes;
+
+  // Support both property and attribute versions of the casing
+  const finalCrossOrigin = crossOrigin ?? crossorigin;
+  let header = `<${href}>; rel="${rel}"; as="${as}"`;
+  if (finalCrossOrigin === '' || finalCrossOrigin === true) {
+    header += `; crossorigin`;
+  } else if (typeof finalCrossOrigin === 'string') {
+    header += `; crossorigin="${finalCrossOrigin}"`;
+  }
+  return header;
 }
 
-export { createServerRender, renderAppToResponse };
+export { createServerRender, renderAppToResponse, renderAppToStreamedResponse };