@quilted/quilt 0.5.136 → 0.5.138

package/source/server/request-router.tsx

@@ -1,14 +1,15 @@
-import {Fragment, type ReactElement, type LinkHTMLAttributes} from 'react';
+import {Fragment, type ReactElement} from 'react';
 
 import {
   styleAssetAttributes,
   styleAssetPreloadAttributes,
   scriptAssetAttributes,
   scriptAssetPreloadAttributes,
-  type AssetsEntry,
-  type AssetManifest,
-} from '@quilted/async/server';
-import {AsyncAssetManager} from '@quilted/react-async/server';
+  type AssetsCacheKey,
+  type BrowserAssets,
+  type BrowserAssetsEntry,
+} from '@quilted/assets';
+import {AssetsManager} from '@quilted/react-assets/server';
 import {HttpManager} from '@quilted/react-http/server';
 import {
   renderHtmlToString,
@@ -30,39 +31,52 @@ import type {
 
 import {ServerContext} from './ServerContext';
 
-export interface ServerRenderOptions<Context = RequestContext> {
+export interface ServerRenderOptions<
+  Context = RequestContext,
+  CacheKey = AssetsCacheKey,
+> {
   stream?: 'headers' | false;
-  assets?: AssetManifest<unknown>;
-  extract?: ExtractOptions;
-  context?(
-    request: EnhancedRequest,
-    context: Context,
-  ): ServerRenderRequestContext;
+  assets?: BrowserAssets<CacheKey>;
+  extract?: Omit<ExtractOptions, 'context'> & {
+    readonly context?:
+      | ServerRenderRequestContext
+      | ((
+          request: EnhancedRequest,
+          context: Context,
+        ) => ServerRenderRequestContext);
+  };
   renderHtml?(
     content: string | undefined,
-    request: Request,
     details: Pick<ServerRenderAppDetails, 'http' | 'html'> & {
-      readonly assets?: AssetsEntry;
-      readonly preloadAssets?: AssetsEntry;
+      readonly request: EnhancedRequest;
+      readonly context: Context;
+      readonly assets?: BrowserAssetsEntry;
+      readonly preloadAssets?: BrowserAssetsEntry;
     },
   ): ReactElement<any> | Promise<ReactElement<any>>;
 }
 
-export interface ServerRenderAppDetails {
+export interface ServerRenderAppDetails<
+  _Context = RequestContext,
+  CacheKey = AssetsCacheKey,
+> {
   readonly http: HttpManager;
   readonly html: HtmlManager;
+  readonly assets: AssetsManager<CacheKey>;
   readonly rendered?: string;
-  readonly asyncAssets: AsyncAssetManager;
 }
 
-export function createServerRender<Context = RequestContext>(
+export function createServerRender<
+  Context = RequestContext,
+  CacheKey = AssetsCacheKey,
+>(
   getApp:
     | ReactElement<any>
     | ((
         request: EnhancedRequest,
         context: Context,
       ) => ReactElement<any> | Promise<ReactElement<any>>),
-  {context, stream, ...options}: ServerRenderOptions<Context> = {},
+  {stream, ...options}: ServerRenderOptions<Context, CacheKey> = {},
 ): RequestHandler<Context> {
   return async (request, requestContext) => {
     const accepts = request.headers.get('Accept');
@@ -77,36 +91,46 @@ export function createServerRender<Context = RequestContext>(
       typeof getApp === 'function'
         ? () => getApp(request, requestContext)
         : getApp,
-      request,
       {
         ...options,
+        request,
+        context: requestContext,
         extract: {
           ...options.extract,
           context:
-            options.extract ??
-            context?.(request, requestContext) ??
-            (requestContext as any),
+            typeof options.extract?.context === 'function'
+              ? options.extract.context(request, requestContext)
+              : options.extract?.context,
         },
       },
     );
   };
 }
 
-export async function renderAppToResponse(
+export async function renderAppToResponse<
+  Context = RequestContext,
+  CacheKey = AssetsCacheKey,
+>(
   getApp:
     | ReactElement<any>
     | (() => ReactElement<any> | Promise<ReactElement<any>>),
-  request: Request,
   {
+    request,
+    context,
     assets,
     extract,
     renderHtml,
-  }: Pick<ServerRenderOptions, 'assets' | 'renderHtml' | 'extract'> = {},
+  }: Pick<
+    ServerRenderOptions<Context, CacheKey>,
+    'assets' | 'renderHtml' | '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,
   });
@@ -120,10 +144,15 @@ export async function renderAppToResponse(
     });
   }
 
-  const content = await renderAppDetailsToHtmlString(renderDetails, request, {
-    assets,
-    renderHtml,
-  });
+  const content = await renderAppDetailsToHtmlString<Context, CacheKey>(
+    renderDetails,
+    {
+      request,
+      context,
+      assets,
+      renderHtml,
+    },
+  );
 
   return html(content, {
     headers,
@@ -131,22 +160,29 @@ export async function renderAppToResponse(
   });
 }
 
-export async function renderAppToStreamedResponse(
+export async function renderAppToStreamedResponse<
+  Context = RequestContext,
+  CacheKey = AssetsCacheKey,
+>(
   getApp:
     | ReactElement<any>
     | (() => ReactElement<any> | Promise<ReactElement<any>>),
-  request: Request,
   {
+    request,
+    context,
     assets,
     extract,
     renderHtml,
-  }: Pick<ServerRenderOptions, 'assets' | 'renderHtml' | 'extract'> = {},
+  }: Pick<
+    ServerRenderOptions<Context, CacheKey>,
+    'assets' | 'renderHtml' | 'extract'
+  > & {readonly request: EnhancedRequest; readonly context: Context},
 ) {
   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)) as CacheKey;
+  const guaranteedAssets = await assets?.entry({cacheKey});
 
   if (guaranteedAssets) {
     for (const style of guaranteedAssets.styles) {
@@ -173,14 +209,20 @@ export async function renderAppToStreamedResponse(
 
     const renderDetails = await serverRenderDetailsForApp(app, {
       extract,
+      cacheKey,
       url: request.url,
       headers: request.headers,
     });
 
-    const content = await renderAppDetailsToHtmlString(renderDetails, request, {
-      assets,
-      renderHtml,
-    });
+    const content = await renderAppDetailsToHtmlString<Context, CacheKey>(
+      renderDetails,
+      {
+        request,
+        context,
+        assets,
+        renderHtml,
+      },
+    );
 
     const encoder = new TextEncoder();
     const writer = stream.writable.getWriter();
@@ -189,34 +231,34 @@ export async function renderAppToStreamedResponse(
   }
 }
 
-async function serverRenderDetailsForApp(
+async function serverRenderDetailsForApp<
+  Context = RequestContext,
+  CacheKey = AssetsCacheKey,
+>(
   app: ReactElement<any>,
   {
     url,
     headers,
+    cacheKey,
     extract: extractOptions,
   }: Pick<ServerRenderOptions, 'extract'> & {
     url?: string | URL;
+    cacheKey?: CacheKey;
     headers?: NonNullable<
       ConstructorParameters<typeof HttpManager>[0]
     >['headers'];
   } = {},
-): Promise<ServerRenderAppDetails> {
+): Promise<ServerRenderAppDetails<Context, CacheKey>> {
   const html = new HtmlManager();
-  const asyncAssets = new AsyncAssetManager();
   const http = new HttpManager({headers});
+  const assets = new AssetsManager<CacheKey>({cacheKey});
 
   const {decorate, ...rest} = extractOptions ?? {};
 
   const rendered = await extract(app, {
     decorate(app) {
       return (
-        <ServerContext
-          asyncAssets={asyncAssets}
-          http={http}
-          html={html}
-          url={url}
-        >
+        <ServerContext http={http} html={html} url={url} assets={assets}>
           {decorate?.(app) ?? app}
         </ServerContext>
       );
@@ -224,32 +266,42 @@ async function serverRenderDetailsForApp(
     ...rest,
   });
 
-  return {rendered, http, html, asyncAssets};
+  return {rendered, http, html, assets};
 }
 
-async function renderAppDetailsToHtmlString(
-  details: ServerRenderAppDetails,
-  request: Request,
+async function renderAppDetailsToHtmlString<
+  Context = RequestContext,
+  CacheKey = AssetsCacheKey,
+>(
+  details: ServerRenderAppDetails<Context, CacheKey>,
   {
+    request,
+    context,
     assets,
     renderHtml = defaultRenderHtml,
-  }: Pick<ServerRenderOptions, 'assets' | 'renderHtml'> = {},
+  }: Pick<ServerRenderOptions<Context, CacheKey>, 'assets' | 'renderHtml'> & {
+    readonly request: EnhancedRequest;
+    readonly context: Context;
+    readonly cacheKey?: Partial<CacheKey>;
+  },
 ) {
-  const {html: htmlManager, http, rendered, asyncAssets} = details;
+  const {http, rendered, html: htmlManager, assets: assetsManager} = details;
 
-  const usedAssets = asyncAssets.used({timing: 'load'});
-  const assetContext = {userAgent: request.headers.get('User-Agent')};
+  const cacheKey = assetsManager.cacheKey as CacheKey;
+  const usedModules = assetsManager.usedModules({timing: 'load'});
 
   const [entryAssets, preloadAssets] = assets
     ? await Promise.all([
-        assets.assets({async: usedAssets, context: assetContext}),
-        assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
-          context: assetContext,
+        assets.entry({modules: usedModules, cacheKey}),
+        assets.modules(assetsManager.usedModules({timing: 'preload'}), {
+          cacheKey,
         }),
       ])
     : [];
 
-  const htmlElement = await renderHtml(rendered, request, {
+  const htmlElement = await renderHtml(rendered, {
+    request,
+    context,
     html: htmlManager,
     http,
     assets: entryAssets,
@@ -260,7 +312,7 @@ async function renderAppDetailsToHtmlString(
 }
 
 const defaultRenderHtml: NonNullable<ServerRenderOptions<any>['renderHtml']> =
-  function defaultRenderHtml(content, request, {html, assets, preloadAssets}) {
+  function defaultRenderHtml(content, {request, html, assets, preloadAssets}) {
     const baseUrl = new URL(request.url);
 
     return (
@@ -269,14 +321,14 @@ const defaultRenderHtml: NonNullable<ServerRenderOptions<any>['renderHtml']> =
         headEndContent={
           <>
             {assets &&
-              [...assets.styles].map((style) => {
+              assets.styles.map((style) => {
                 const attributes = styleAssetAttributes(style, {baseUrl});
-                return <link key={style.source} {...attributes} />;
+                return <link key={style.source} {...(attributes as any)} />;
               })}
 
             {assets &&
-              [...assets.scripts].map((script) => {
-                const isModule = script.attributes.type === 'module';
+              assets.scripts.map((script) => {
+                const isModule = script.attributes?.type === 'module';
 
                 const attributes = scriptAssetAttributes(script, {
                   baseUrl,
@@ -285,31 +337,35 @@ const defaultRenderHtml: NonNullable<ServerRenderOptions<any>['renderHtml']> =
                 if (isModule) {
                   return (
                     <Fragment key={script.source}>
-                      <link {...scriptAssetPreloadAttributes(script)} />
-                      <script {...attributes} async />
+                      <link
+                        {...(scriptAssetPreloadAttributes(script) as any)}
+                      />
+                      <script {...(attributes as any)} async />
                     </Fragment>
                   );
                 }
 
-                return <script key={script.source} {...attributes} defer />;
+                return (
+                  <script key={script.source} {...(attributes as any)} defer />
+                );
               })}
 
             {preloadAssets &&
-              [...preloadAssets.styles].map((style) => {
+              preloadAssets.styles.map((style) => {
                 const attributes = styleAssetPreloadAttributes(style, {
                   baseUrl,
                 });
 
-                return <link key={style.source} {...attributes} />;
+                return <link key={style.source} {...(attributes as any)} />;
               })}
 
             {preloadAssets &&
-              [...preloadAssets.scripts].map((script) => {
+              preloadAssets.scripts.map((script) => {
                 const attributes = scriptAssetPreloadAttributes(script, {
                   baseUrl,
                 });
 
-                return <link key={script.source} {...attributes} />;
+                return <link key={script.source} {...(attributes as any)} />;
               })}
           </>
         }
@@ -319,7 +375,7 @@ const defaultRenderHtml: NonNullable<ServerRenderOptions<any>['renderHtml']> =
     );
   };
 
-function preloadHeader(attributes: LinkHTMLAttributes<HTMLLinkElement>) {
+function preloadHeader(attributes: Partial<HTMLLinkElement>) {
   const {
     as,
     rel = 'preload',

package/source/static/StaticContext.tsx

@@ -1,12 +1,9 @@
 import type {PropsWithChildren} from 'react';
 
+import {AssetsContext, type AssetsManager} from '@quilted/react-assets/server';
 import {InitialUrlContext} from '@quilted/react-router';
-import {HtmlContext} from '@quilted/react-html/server';
-import type {HtmlManager} from '@quilted/react-html/server';
-import {AsyncAssetContext} from '@quilted/react-async/server';
-import type {AsyncAssetManager} from '@quilted/react-async/server';
-import {HttpServerContext} from '@quilted/react-http/server';
-import type {HttpManager} from '@quilted/react-http/server';
+import {HtmlContext, type HtmlManager} from '@quilted/react-html/server';
+import {HttpServerContext, type HttpManager} from '@quilted/react-http/server';
 
 import {maybeWrapContext} from '../utilities/react';
 
@@ -14,21 +11,21 @@ interface Props {
   url?: string | URL;
   html?: HtmlManager;
   http?: HttpManager;
-  asyncAssets?: AsyncAssetManager;
+  assets?: AssetsManager;
 }
 
 export function StaticContext({
   url,
   html,
   http,
-  asyncAssets,
+  assets,
   children,
 }: PropsWithChildren<Props>) {
   const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
 
   return maybeWrapContext(
-    AsyncAssetContext,
-    asyncAssets,
+    AssetsContext,
+    assets,
     maybeWrapContext(
       HttpServerContext,
       http,

package/source/static/index.tsx

@@ -1,12 +1,12 @@
-import type {ComponentType} from 'react';
+import {Fragment, type ComponentType} from 'react';
 
 import {
   styleAssetAttributes,
   styleAssetPreloadAttributes,
   scriptAssetAttributes,
   scriptAssetPreloadAttributes,
-  type AssetManifest,
-} from '@quilted/async/server';
+  type BrowserAssets,
+} from '@quilted/assets';
 import {renderHtmlToString, Html} from '@quilted/react-html/server';
 import type {RouteDefinition} from '@quilted/react-router';
 import {
@@ -32,7 +32,7 @@ interface RenderableRoute {
 
 export interface Options {
   routes: string[];
-  assets: AssetManifest<{modules: boolean}>;
+  assets: BrowserAssets<any>;
   crawl?: boolean;
   baseUrl?: string;
   prettify?: boolean;
@@ -212,13 +212,16 @@ export async function renderStatic(
       forceFallback: fallback ? url.pathname : undefined,
     });
 
+    const initialCacheKey = await assets.cacheKey?.(new Request(url));
+
     const {
       http,
       html: htmlManager,
+      assets: assetsManager,
       markup,
-      asyncAssets,
     } = await renderApp(<App />, {
       url,
+      cacheKey: initialCacheKey,
       decorate(app) {
         return (
           <StaticRendererContext.Provider value={routeRecorder}>
@@ -228,71 +231,57 @@ export async function renderStatic(
       },
     });
 
-    const usedAssets = asyncAssets.used({timing: 'load'});
+    const cacheKey = assetsManager.cacheKey;
 
-    const [moduleAssets, modulePreload, nomoduleAssets] = await Promise.all([
-      assets.assets({async: usedAssets, context: {modules: true}}),
-      assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
-        context: {modules: true},
+    const [mainAssets, preloadAssets] = await Promise.all([
+      assets.entry({
+        modules: assetsManager.usedModules({timing: 'load'}),
+        cacheKey,
+      }),
+      assets.modules(assetsManager.usedModules({timing: 'preload'}), {
+        cacheKey,
       }),
-      assets.assets({async: usedAssets, context: {modules: false}}),
     ]);
 
-    // 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(
       <Html
         manager={htmlManager}
         headEndContent={
           <>
-            {[...styles].map((style) => {
+            {[...mainAssets.styles].map((style) => {
               const attributes = styleAssetAttributes(style, {baseUrl: url});
-              return <link key={style.source} {...attributes} />;
-            })}
-
-            {[...moduleAssets.scripts].map((script) => {
-              const attributes = scriptAssetAttributes(script, {
-                baseUrl: url,
-              });
-
-              return <script key={script.source} {...attributes} />;
+              return <link key={style.source} {...(attributes as any)} />;
             })}
 
-            {[...nomoduleAssets.scripts].map((script) => {
+            {[...mainAssets.scripts].map((script) => {
               const attributes = scriptAssetAttributes(script, {
                 baseUrl: url,
               });
 
-              return (
-                <script
-                  key={script.source}
-                  {...attributes}
-                  // @ts-expect-error Rendering to HTML, so using the lowercase name
-                  nomodule={moduleAssets.scripts.length > 0 ? true : undefined}
-                />
+              return attributes.type === 'module' ? (
+                <Fragment key={script.source}>
+                  <link {...(scriptAssetPreloadAttributes(script) as any)} />
+                  <script {...(attributes as any)} />
+                </Fragment>
+              ) : (
+                <script key={script.source} {...(attributes as any)} />
               );
             })}
 
-            {[...modulePreload.styles].map((style) => {
+            {[...preloadAssets.styles].map((style) => {
               const attributes = styleAssetPreloadAttributes(style, {
                 baseUrl: url,
               });
 
-              return <link key={style.source} {...attributes} />;
+              return <link key={style.source} {...(attributes as any)} />;
             })}
 
-            {[...modulePreload.scripts].map((script) => {
+            {[...preloadAssets.scripts].map((script) => {
               const attributes = scriptAssetPreloadAttributes(script, {
                 baseUrl: url,
               });
 
-              return <link key={script.source} {...attributes} />;
+              return <link key={script.source} {...(attributes as any)} />;
             })}
           </>
         }

package/source/static/render.tsx

@@ -4,34 +4,31 @@ import {extract} from '@quilted/react-server-render/server';
 import type {Options as ExtractOptions} 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 type {AssetsCacheKey} from '@quilted/assets';
 
 import {StaticContext} from './StaticContext';
 
-interface Options extends ExtractOptions {
+interface Options<CacheKey = AssetsCacheKey> extends ExtractOptions {
   url?: string | URL;
+  cacheKey?: CacheKey;
   headers?: NonNullable<
     ConstructorParameters<typeof HttpManager>[0]
   >['headers'];
 }
 
-export async function renderApp(
+export async function renderApp<CacheKey = AssetsCacheKey>(
   app: ReactElement<any>,
-  {decorate, url, headers, ...rest}: Options = {},
+  {decorate, url, headers, cacheKey, ...rest}: Options<CacheKey> = {},
 ) {
   const html = new HtmlManager();
-  const asyncAssets = new AsyncAssetManager();
   const http = new HttpManager({headers});
+  const assets = new AssetsManager<CacheKey>({cacheKey});
 
   const markup = await extract(app, {
     decorate(app) {
       return (
-        <StaticContext
-          asyncAssets={asyncAssets}
-          html={html}
-          http={http}
-          url={url}
-        >
+        <StaticContext html={html} http={http} url={url} assets={assets}>
           {decorate?.(app) ?? app}
         </StaticContext>
       );
@@ -39,5 +36,5 @@ export async function renderApp(
     ...rest,
   });
 
-  return {markup, http, html, asyncAssets};
+  return {markup, http, html, assets};
 }

package/tsconfig.json

@@ -7,11 +7,13 @@
   "include": ["source"],
   "exclude": ["quilt.project.ts", "**/*.test.ts", "**/*.test.tsx"],
   "references": [
+    {"path": "../assets"},
     {"path": "../async"},
     {"path": "../events"},
     {"path": "../graphql"},
     {"path": "../polyfills"},
     {"path": "../react"},
+    {"path": "../react-assets"},
     {"path": "../react-async"},
     {"path": "../react-dom"},
     {"path": "../react-graphql"},

package/source/magic/asset-manifest.ts

@@ -1,5 +0,0 @@
-import type {AssetManifest} from '@quilted/async/server';
-
-export declare function createAssetManifest(): AssetManifest<{
-  userAgent?: string;
-}>;