@quilted/quilt 0.5.130 → 0.5.131

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @quilted/quilt
 
+## 0.5.131
+
+### Patch Changes
+
+- [#508](https://github.com/lemonmade/quilt/pull/508) [`befb2aa9`](https://github.com/lemonmade/quilt/commit/befb2aa9d374aff66cbfe54fc8157522e3d3af21) Thanks [@lemonmade](https://github.com/lemonmade)! - Move logic out of HTML component
+
 ## 0.5.130
 
 ### Patch Changes

package/build/cjs/server/index.cjs

@@ -7,7 +7,6 @@ var server$3 = require('@quilted/react-async/server');
 var requestRouter = require('@quilted/react-localize/request-router');
 var requestRouter$1 = require('@quilted/request-router');
 var reactLocalize = require('@quilted/react-localize');
-var render = require('./render.cjs');
 var ServerContext = require('./ServerContext.cjs');
 var requestRouter$2 = require('./request-router.cjs');
 
@@ -61,6 +60,22 @@ Object.defineProperty(exports, 'createAssetManifest', {
   enumerable: true,
   get: function () { return server$2.createAssetManifest; }
 });
+Object.defineProperty(exports, 'scriptAssetAttributes', {
+  enumerable: true,
+  get: function () { return server$2.scriptAssetAttributes; }
+});
+Object.defineProperty(exports, 'scriptAssetPreloadAttributes', {
+  enumerable: true,
+  get: function () { return server$2.scriptAssetPreloadAttributes; }
+});
+Object.defineProperty(exports, 'styleAssetAttributes', {
+  enumerable: true,
+  get: function () { return server$2.styleAssetAttributes; }
+});
+Object.defineProperty(exports, 'styleAssetPreloadAttributes', {
+  enumerable: true,
+  get: function () { return server$2.styleAssetPreloadAttributes; }
+});
 Object.defineProperty(exports, 'ASYNC_ASSETS_SERVER_ACTION_ID', {
   enumerable: true,
   get: function () { return server$3.SERVER_ACTION_ID; }
@@ -105,7 +120,7 @@ Object.defineProperty(exports, 'parseAcceptLanguageHeader', {
   enumerable: true,
   get: function () { return reactLocalize.parseAcceptLanguageHeader; }
 });
-exports.renderApp = render.renderApp;
 exports.ServerContext = ServerContext.ServerContext;
 exports.createServerRender = requestRouter$2.createServerRender;
 exports.renderAppToResponse = requestRouter$2.renderAppToResponse;
+exports.renderAppToStreamedResponse = requestRouter$2.renderAppToStreamedResponse;

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

@@ -1,36 +1,41 @@
 'use strict';
 
-var server = require('@quilted/react-html/server');
+var react = require('react');
+var server = require('@quilted/async/server');
+var server$2 = require('@quilted/react-async/server');
+var server$3 = require('@quilted/react-http/server');
+var server$1 = require('@quilted/react-html/server');
+var server$4 = require('@quilted/react-server-render/server');
 var requestRouter = require('@quilted/request-router');
-var render = require('./render.cjs');
+var ServerContext = require('./ServerContext.cjs');
 var jsxRuntime = require('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 render.renderApp(app, {
-    ...options,
+  const renderDetails = await serverRenderDetailsForApp(app, {
+    extract,
     url: request.url,
     headers: request.headers
   });
@@ -38,57 +43,202 @@ async function renderAppToResponse(app, request, {
     headers,
     statusCode = 200,
     redirectUrl
-  } = http.state;
+  } = renderDetails.http.state;
   if (redirectUrl) {
     return requestRouter.redirect(redirectUrl, {
       status: statusCode,
       headers
     });
   }
+  const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+    assets,
+    renderHtml
+  });
+  return requestRouter.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(server.styleAssetPreloadAttributes(style)));
+    }
+    for (const script of guaranteedAssets.scripts) {
+      headers.append('Link', preloadHeader(server.scriptAssetPreloadAttributes(script)));
+    }
+  }
+  renderResponseToStream();
+  return requestRouter.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 server$1.HtmlManager();
+  const asyncAssets = new server$2.AsyncAssetManager();
+  const http = new server$3.HttpManager({
+    headers
+  });
+  const {
+    decorate,
+    ...rest
+  } = extractOptions ?? {};
+  const rendered = await server$4.extract(app, {
+    decorate(app) {
+      return /*#__PURE__*/jsxRuntime.jsx(ServerContext.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 requestRouter.html(server.renderHtmlToString(htmlElement), {
-    headers,
-    status: statusCode
+    assets: entryAssets,
+    preloadAssets
   });
+  return server$1.renderHtmlToString(htmlElement);
 }
-function defaultRenderHtml(content, request, {
+const defaultRenderHtml = function defaultRenderHtml(content, request, {
   html,
-  styles,
-  scripts,
-  preload
+  assets,
+  preloadAssets
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(server.Html, {
-    url: new URL(request.url),
+  const baseUrl = new URL(request.url);
+  return /*#__PURE__*/jsxRuntime.jsx(server$1.Html, {
     manager: html,
-    styles: styles,
-    scripts: scripts,
-    preloadAssets: preload,
+    headEndContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [assets && [...assets.styles].map(style => {
+        const attributes = server.styleAssetAttributes(style, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsxRuntime.jsx("link", {
+          ...attributes
+        }, style.source);
+      }), assets && [...assets.scripts].map(script => {
+        const isModule = script.attributes.type === 'module';
+        const attributes = server.scriptAssetAttributes(script, {
+          baseUrl
+        });
+        if (isModule) {
+          return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx("link", {
+              ...server.scriptAssetPreloadAttributes(script)
+            }), /*#__PURE__*/jsxRuntime.jsx("script", {
+              ...attributes,
+              async: true
+            })]
+          }, script.source);
+        }
+        return /*#__PURE__*/jsxRuntime.jsx("script", {
+          ...attributes,
+          defer: true
+        }, script.source);
+      }), preloadAssets && [...preloadAssets.styles].map(style => {
+        const attributes = server.styleAssetPreloadAttributes(style, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsxRuntime.jsx("link", {
+          ...attributes
+        }, style.source);
+      }), preloadAssets && [...preloadAssets.scripts].map(script => {
+        const attributes = server.scriptAssetPreloadAttributes(script, {
+          baseUrl
+        });
+        return /*#__PURE__*/jsxRuntime.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;
 }
 
 exports.createServerRender = createServerRender;
 exports.renderAppToResponse = renderAppToResponse;
+exports.renderAppToStreamedResponse = renderAppToStreamedResponse;

package/build/cjs/static/index.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var server$1 = require('@quilted/async/server');
 var server = require('@quilted/react-html/server');
 var _static = require('@quilted/react-router/static');
 var render = require('./render.cjs');
@@ -175,30 +176,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
       }
     })]);
@@ -206,22 +197,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 = server.renderHtmlToString( /*#__PURE__*/jsxRuntime.jsx(server.Html, {
-      url: url,
       manager: htmlManager,
-      styles: styles,
-      scripts: scripts,
-      preloadAssets: preload,
+      headEndContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [[...styles].map(style => {
+          const attributes = server$1.styleAssetAttributes(style, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsxRuntime.jsx("link", {
+            ...attributes
+          }, style.source);
+        }), [...moduleAssets.scripts].map(script => {
+          const attributes = server$1.scriptAssetAttributes(script, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsxRuntime.jsx("script", {
+            ...attributes
+          }, script.source);
+        }), [...nomoduleAssets.scripts].map(script => {
+          const attributes = server$1.scriptAssetAttributes(script, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsxRuntime.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 = server$1.styleAssetPreloadAttributes(style, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsxRuntime.jsx("link", {
+            ...attributes
+          }, style.source);
+        }), [...modulePreload.scripts].map(script => {
+          const attributes = server$1.scriptAssetPreloadAttributes(script, {
+            baseUrl: url
+          });
+          return /*#__PURE__*/jsxRuntime.jsx("link", {
+            ...attributes
+          }, script.source);
+        })]
+      }),
       children: markup
     }));
     const html = prettify ? await prettifyHtml(minifiedHtml) : minifiedHtml;

package/build/esm/server/index.mjs

@@ -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.mjs';
 export { ServerContext } from './ServerContext.mjs';
-export { createServerRender, renderAppToResponse } from './request-router.mjs';
+export { createServerRender, renderAppToResponse, renderAppToStreamedResponse } from './request-router.mjs';