@quilted/quilt 0.5.136 → 0.5.137

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

@@ -1,5 +1,6 @@
 import { Fragment as Fragment$1 } from 'react';
-import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, scriptAssetAttributes } from '@quilted/async/server';
+import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, scriptAssetAttributes } from '@quilted/assets';
+import { AssetsManager } from '@quilted/react-assets/server';
 import { AsyncAssetManager } from '@quilted/react-async/server';
 import { HttpManager } from '@quilted/react-http/server';
 import { HtmlManager, renderHtmlToString, Html } from '@quilted/react-html/server';
@@ -9,7 +10,6 @@ import { ServerContext } from './ServerContext.esnext';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function createServerRender(getApp, {
-  context,
   stream,
   ...options
 } = {}) {
@@ -17,23 +17,29 @@ function createServerRender(getApp, {
     const accepts = request.headers.get('Accept');
     if (accepts != null && !accepts.includes('text/html')) return;
     const renderResponse = stream ? renderAppToStreamedResponse : renderAppToResponse;
-    return renderResponse(typeof getApp === 'function' ? () => getApp(request, requestContext) : getApp, request, {
+    return renderResponse(typeof getApp === 'function' ? () => getApp(request, requestContext) : getApp, {
       ...options,
+      request,
+      context: requestContext,
       extract: {
         ...options.extract,
-        context: options.extract ?? context?.(request, requestContext) ?? requestContext
+        context: typeof options.extract?.context === 'function' ? options.extract.context(request, requestContext) : options.extract?.context
       }
     });
   };
 }
-async function renderAppToResponse(getApp, request, {
+async function renderAppToResponse(getApp, {
+  request,
+  context,
   assets,
   extract,
   renderHtml
-} = {}) {
+}) {
   const app = typeof getApp === 'function' ? await getApp() : getApp;
+  const cacheKey = await assets?.cacheKey?.(request);
   const renderDetails = await serverRenderDetailsForApp(app, {
     extract,
+    cacheKey,
     url: request.url,
     headers: request.headers
   });
@@ -48,7 +54,9 @@ async function renderAppToResponse(getApp, request, {
       headers
     });
   }
-  const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+  const content = await renderAppDetailsToHtmlString(renderDetails, {
+    request,
+    context,
     assets,
     renderHtml
   });
@@ -57,18 +65,18 @@ async function renderAppToResponse(getApp, request, {
     status: statusCode
   });
 }
-async function renderAppToStreamedResponse(getApp, request, {
+async function renderAppToStreamedResponse(getApp, {
+  request,
+  context,
   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
+  const cacheKey = await assets?.cacheKey?.(request);
+  const guaranteedAssets = await assets?.entry({
+    cacheKey
   });
   if (guaranteedAssets) {
     for (const style of guaranteedAssets.styles) {
@@ -87,10 +95,13 @@ async function renderAppToStreamedResponse(getApp, request, {
     const app = typeof getApp === 'function' ? await getApp() : getApp;
     const renderDetails = await serverRenderDetailsForApp(app, {
       extract,
+      cacheKey,
       url: request.url,
       headers: request.headers
     });
-    const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+    const content = await renderAppDetailsToHtmlString(renderDetails, {
+      request,
+      context,
       assets,
       renderHtml
     });
@@ -103,6 +114,7 @@ async function renderAppToStreamedResponse(getApp, request, {
 async function serverRenderDetailsForApp(app, {
   url,
   headers,
+  cacheKey,
   extract: extractOptions
 } = {}) {
   const html = new HtmlManager();
@@ -110,6 +122,9 @@ async function serverRenderDetailsForApp(app, {
   const http = new HttpManager({
     headers
   });
+  const assets = new AssetsManager({
+    cacheKey
+  });
   const {
     decorate,
     ...rest
@@ -121,6 +136,7 @@ async function serverRenderDetailsForApp(app, {
         http: http,
         html: html,
         url: url,
+        assets: assets,
         children: decorate?.(app) ?? app
       });
     },
@@ -130,34 +146,38 @@ async function serverRenderDetailsForApp(app, {
     rendered,
     http,
     html,
-    asyncAssets
+    asyncAssets,
+    assets
   };
 }
-async function renderAppDetailsToHtmlString(details, request, {
+async function renderAppDetailsToHtmlString(details, {
+  request,
+  context,
   assets,
   renderHtml = defaultRenderHtml
-} = {}) {
+}) {
   const {
-    html: htmlManager,
     http,
     rendered,
-    asyncAssets
+    asyncAssets,
+    html: htmlManager,
+    assets: assetsManager
   } = details;
-  const usedAssets = asyncAssets.used({
+  const usedModules = asyncAssets.used({
     timing: 'load'
   });
-  const assetContext = {
-    userAgent: request.headers.get('User-Agent')
-  };
-  const [entryAssets, preloadAssets] = assets ? await Promise.all([assets.assets({
-    async: usedAssets,
-    context: assetContext
-  }), assets.asyncAssets(asyncAssets.used({
+  const cacheKey = assetsManager.cacheKey;
+  const [entryAssets, preloadAssets] = assets ? await Promise.all([assets.entry({
+    modules: usedModules,
+    cacheKey
+  }), assets.modules(asyncAssets.used({
     timing: 'preload'
   }), {
-    context: assetContext
+    cacheKey
   })]) : [];
-  const htmlElement = await renderHtml(rendered, request, {
+  const htmlElement = await renderHtml(rendered, {
+    request,
+    context,
     html: htmlManager,
     http,
     assets: entryAssets,
@@ -165,7 +185,8 @@ async function renderAppDetailsToHtmlString(details, request, {
   });
   return renderHtmlToString(htmlElement);
 }
-const defaultRenderHtml = function defaultRenderHtml(content, request, {
+const defaultRenderHtml = function defaultRenderHtml(content, {
+  request,
   html,
   assets,
   preloadAssets
@@ -174,15 +195,15 @@ const defaultRenderHtml = function defaultRenderHtml(content, request, {
   return /*#__PURE__*/jsx(Html, {
     manager: html,
     headEndContent: /*#__PURE__*/jsxs(Fragment, {
-      children: [assets && [...assets.styles].map(style => {
+      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';
+      }), assets && assets.scripts.map(script => {
+        const isModule = script.attributes?.type === 'module';
         const attributes = scriptAssetAttributes(script, {
           baseUrl
         });
@@ -200,14 +221,14 @@ const defaultRenderHtml = function defaultRenderHtml(content, request, {
           ...attributes,
           defer: true
         }, script.source);
-      }), preloadAssets && [...preloadAssets.styles].map(style => {
+      }), preloadAssets && preloadAssets.styles.map(style => {
         const attributes = styleAssetPreloadAttributes(style, {
           baseUrl
         });
         return /*#__PURE__*/jsx("link", {
           ...attributes
         }, style.source);
-      }), preloadAssets && [...preloadAssets.scripts].map(script => {
+      }), preloadAssets && preloadAssets.scripts.map(script => {
         const attributes = scriptAssetPreloadAttributes(script, {
           baseUrl
         });

package/build/esnext/static/StaticContext.esnext

@@ -1,3 +1,4 @@
+import { AssetsContext } from '@quilted/react-assets/server';
 import { InitialUrlContext } from '@quilted/react-router';
 import { HtmlContext } from '@quilted/react-html/server';
 import { AsyncAssetContext } from '@quilted/react-async/server';
@@ -8,11 +9,12 @@ function StaticContext({
   url,
   html,
   http,
+  assets,
   asyncAssets,
   children
 }) {
   const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
-  return maybeWrapContext(AsyncAssetContext, asyncAssets, maybeWrapContext(HttpServerContext, http, maybeWrapContext(HtmlContext, html, maybeWrapContext(InitialUrlContext, normalizedUrl, children))));
+  return maybeWrapContext(AssetsContext, assets, maybeWrapContext(AsyncAssetContext, asyncAssets, maybeWrapContext(HttpServerContext, http, maybeWrapContext(HtmlContext, html, maybeWrapContext(InitialUrlContext, normalizedUrl, children)))));
 }
 
 export { StaticContext };

package/build/esnext/static/index.esnext

@@ -1,4 +1,5 @@
-import { styleAssetAttributes, scriptAssetAttributes, styleAssetPreloadAttributes, scriptAssetPreloadAttributes } from '@quilted/async/server';
+import { Fragment as Fragment$1 } from 'react';
+import { styleAssetAttributes, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
 import { renderHtmlToString, Html } from '@quilted/react-html/server';
 import { StaticRenderer, StaticRendererContext } from '@quilted/react-router/static';
 import { renderApp } from './render.esnext';
@@ -157,13 +158,16 @@ async function renderStatic(App, {
     const routeRecorder = new StaticRenderer({
       forceFallback: fallback ? url.pathname : undefined
     });
+    const initialCacheKey = await assets.cacheKey?.(new Request(url));
     const {
       http,
       html: htmlManager,
+      assets: assetsManager,
       markup,
       asyncAssets
     } = await renderApp( /*#__PURE__*/jsx(App, {}), {
       url,
+      cacheKey: initialCacheKey,
       decorate(app) {
         return /*#__PURE__*/jsx(StaticRendererContext.Provider, {
           value: routeRecorder,
@@ -171,65 +175,48 @@ async function renderStatic(App, {
         });
       }
     });
-    const usedAssets = asyncAssets.used({
-      timing: 'load'
-    });
-    const [moduleAssets, modulePreload, nomoduleAssets] = await Promise.all([assets.assets({
-      async: usedAssets,
-      context: {
-        modules: true
-      }
-    }), assets.asyncAssets(asyncAssets.used({
+    const cacheKey = assetsManager.cacheKey;
+    const [mainAssets, preloadAssets] = await Promise.all([assets.entry({
+      modules: asyncAssets.used({
+        timing: 'load'
+      }),
+      cacheKey
+    }), assets.modules(asyncAssets.used({
       timing: 'preload'
     }), {
-      context: {
-        modules: true
-      }
-    }), assets.assets({
-      async: usedAssets,
-      context: {
-        modules: false
-      }
+      cacheKey
     })]);
-
-    // 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 = moduleAssets.styles.length > 0 ? moduleAssets.styles : nomoduleAssets.styles;
     const minifiedHtml = renderHtmlToString( /*#__PURE__*/jsx(Html, {
       manager: htmlManager,
       headEndContent: /*#__PURE__*/jsxs(Fragment, {
-        children: [[...styles].map(style => {
+        children: [[...mainAssets.styles].map(style => {
           const attributes = styleAssetAttributes(style, {
             baseUrl: url
           });
           return /*#__PURE__*/jsx("link", {
             ...attributes
           }, style.source);
-        }), [...moduleAssets.scripts].map(script => {
+        }), [...mainAssets.scripts].map(script => {
           const attributes = scriptAssetAttributes(script, {
             baseUrl: url
           });
-          return /*#__PURE__*/jsx("script", {
+          return attributes.type === 'module' ? /*#__PURE__*/jsxs(Fragment$1, {
+            children: [/*#__PURE__*/jsx("link", {
+              ...scriptAssetPreloadAttributes(script)
+            }), /*#__PURE__*/jsx("script", {
+              ...attributes
+            })]
+          }, script.source) : /*#__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 => {
+        }), [...preloadAssets.styles].map(style => {
           const attributes = styleAssetPreloadAttributes(style, {
             baseUrl: url
           });
           return /*#__PURE__*/jsx("link", {
             ...attributes
           }, style.source);
-        }), [...modulePreload.scripts].map(script => {
+        }), [...preloadAssets.scripts].map(script => {
           const attributes = scriptAssetPreloadAttributes(script, {
             baseUrl: url
           });

package/build/esnext/static/render.esnext

@@ -2,6 +2,7 @@ import { extract } from '@quilted/react-server-render/server';
 import { HtmlManager } from '@quilted/react-html/server';
 import { HttpManager } from '@quilted/react-http/server';
 import { AsyncAssetManager } from '@quilted/react-async/server';
+import { AssetsManager } from '@quilted/react-assets/server';
 import { StaticContext } from './StaticContext.esnext';
 import { jsx } from 'react/jsx-runtime';
 
@@ -9,6 +10,7 @@ async function renderApp(app, {
   decorate,
   url,
   headers,
+  cacheKey,
   ...rest
 } = {}) {
   const html = new HtmlManager();
@@ -16,6 +18,9 @@ async function renderApp(app, {
   const http = new HttpManager({
     headers
   });
+  const assets = new AssetsManager({
+    cacheKey
+  });
   const markup = await extract(app, {
     decorate(app) {
       return /*#__PURE__*/jsx(StaticContext, {
@@ -32,6 +37,7 @@ async function renderApp(app, {
     markup,
     http,
     html,
+    assets,
     asyncAssets
   };
 }