@quilted/quilt 0.5.129 → 0.5.131

package/build/typescript/server/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,gBAAgB,IAAI,qBAAqB,GAC1C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,0BAA0B,EAC1B,OAAO,GACR,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EACV,KAAK,EACL,aAAa,EACb,kBAAkB,EAClB,0BAA0B,EAC1B,aAAa,EACb,UAAU,EACV,eAAe,GAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,IAAI,6BAA6B,GAClD,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EAAC,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAC,+BAA+B,EAAC,MAAM,wCAAwC,CAAC;AACvF,YAAY,EACV,yBAAyB,EACzB,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,GACd,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,cAAc,EACd,0BAA0B,EAC1B,gBAAgB,EAChB,mBAAmB,EACnB,0BAA0B,GAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,yBAAyB,EAAC,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,kBAAkB,EAAE,mBAAmB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,gBAAgB,IAAI,qBAAqB,GAC1C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,0BAA0B,EAC1B,OAAO,GACR,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,2BAA2B,EAC3B,qBAAqB,EACrB,4BAA4B,GAC7B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,KAAK,EACL,kBAAkB,EAClB,oBAAoB,EACpB,0BAA0B,EAC1B,aAAa,EACb,UAAU,EACV,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,IAAI,6BAA6B,GAClD,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EAAC,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAC,+BAA+B,EAAC,MAAM,wCAAwC,CAAC;AACvF,YAAY,EACV,yBAAyB,EACzB,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,GACd,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,cAAc,EACd,0BAA0B,EAC1B,gBAAgB,EAChB,mBAAmB,EACnB,0BAA0B,GAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,yBAAyB,EAAC,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,2BAA2B,GAC5B,MAAM,kBAAkB,CAAC"}

package/build/typescript/server/request-router.d.ts

@@ -1,18 +1,27 @@
-import type { ReactElement } from 'react';
-import type { Asset, AssetManifest } from '@quilted/async/server';
+import { type ReactElement } from 'react';
+import { type AssetsEntry, type AssetManifest } from '@quilted/async/server';
+import { AsyncAssetManager } from '@quilted/react-async/server';
+import { HttpManager } from '@quilted/react-http/server';
+import { HtmlManager } from '@quilted/react-html/server';
 import type { Options as ExtractOptions, ServerRenderRequestContext } from '@quilted/react-server-render/server';
-import type { RequestRouter, EnhancedRequest, RequestHandler, RequestContext } from '@quilted/request-router';
-import { type RenderResult as RenderAppResult } from './render';
-export interface Options<Context = RequestContext> extends Omit<ExtractOptions, 'context'> {
+import type { EnhancedRequest, RequestHandler, RequestContext } from '@quilted/request-router';
+export interface ServerRenderOptions<Context = RequestContext> {
+    stream?: 'headers' | false;
     assets?: AssetManifest<unknown>;
-    router?: RequestRouter<Context>;
+    extract?: ExtractOptions;
     context?(request: EnhancedRequest, context: Context): ServerRenderRequestContext;
-    renderHtml?(content: string | undefined, request: Request, details: Omit<RenderAppResult, 'asyncAssets' | 'markup'> & {
-        readonly styles: readonly Asset[];
-        readonly scripts: readonly Asset[];
-        readonly preload: readonly Asset[];
+    renderHtml?(content: string | undefined, request: Request, details: Pick<ServerRenderAppDetails, 'http' | 'html'> & {
+        readonly assets?: AssetsEntry;
+        readonly preloadAssets?: AssetsEntry;
     }): ReactElement<any> | Promise<ReactElement<any>>;
 }
-export declare function createServerRender<Context = RequestContext>(render: (request: EnhancedRequest, context: Context) => ReactElement<any> | Promise<ReactElement<any>>, { context, ...options }?: Omit<Options<Context>, 'router'>): RequestHandler<Context>;
-export declare function renderAppToResponse(app: ReactElement<any>, request: Request, { assets, renderHtml, ...options }?: Omit<Options, 'handler' | 'renderProps'>): Promise<import("@quilted/request-router").EnhancedResponse>;
+export interface ServerRenderAppDetails {
+    readonly http: HttpManager;
+    readonly html: HtmlManager;
+    readonly rendered?: string;
+    readonly asyncAssets: AsyncAssetManager;
+}
+export declare function createServerRender<Context = RequestContext>(render: (request: EnhancedRequest, context: Context) => ReactElement<any> | Promise<ReactElement<any>>, { context, stream, ...options }?: ServerRenderOptions<Context>): RequestHandler<Context>;
+export declare function renderAppToResponse(app: ReactElement<any>, request: Request, { assets, extract, renderHtml, }?: Pick<ServerRenderOptions, 'assets' | 'renderHtml' | 'extract'>): Promise<import("@quilted/request-router").EnhancedResponse>;
+export declare function renderAppToStreamedResponse(app: ReactElement<any>, request: Request, { assets, extract, renderHtml, }?: Pick<ServerRenderOptions, 'assets' | 'renderHtml' | 'extract'>): Promise<import("@quilted/request-router").EnhancedResponse>;
 //# sourceMappingURL=request-router.d.ts.map

package/build/typescript/server/request-router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"request-router.d.ts","sourceRoot":"","sources":["../../../source/server/request-router.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAC,KAAK,EAAE,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EACV,OAAO,IAAI,cAAc,EACzB,0BAA0B,EAC3B,MAAM,qCAAqC,CAAC;AAG7C,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACd,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,KAAK,YAAY,IAAI,eAAe,EAAC,MAAM,UAAU,CAAC;AAEzE,MAAM,WAAW,OAAO,CAAC,OAAO,GAAG,cAAc,CAC/C,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IACvC,MAAM,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,CACN,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,OAAO,GACf,0BAA0B,CAAC;IAC9B,UAAU,CAAC,CACT,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,QAAQ,CAAC,GAAG;QACzD,QAAQ,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;QAClC,QAAQ,CAAC,OAAO,EAAE,SAAS,KAAK,EAAE,CAAC;QACnC,QAAQ,CAAC,OAAO,EAAE,SAAS,KAAK,EAAE,CAAC;KACpC,GACA,YAAY,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;CACnD;AAED,wBAAgB,kBAAkB,CAAC,OAAO,GAAG,cAAc,EACzD,MAAM,EAAE,CACN,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,OAAO,KACb,YAAY,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EACnD,EAAC,OAAO,EAAE,GAAG,OAAO,EAAC,GAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAM,GAC3D,cAAc,CAAC,OAAO,CAAC,CAazB;AAED,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,YAAY,CAAC,GAAG,CAAC,EACtB,OAAO,EAAE,OAAO,EAChB,EACE,MAAM,EACN,UAA8B,EAC9B,GAAG,OAAO,EACX,GAAE,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,aAAa,CAAM,+DA+CjD"}
+{"version":3,"file":"request-router.d.ts","sourceRoot":"","sources":["../../../source/server/request-router.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,YAAY,EAA0B,MAAM,OAAO,CAAC;AAE3E,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAEL,WAAW,EAEZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EACV,OAAO,IAAI,cAAc,EACzB,0BAA0B,EAC3B,MAAM,qCAAqC,CAAC;AAI7C,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,mBAAmB,CAAC,OAAO,GAAG,cAAc;IAC3D,MAAM,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,CACN,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,OAAO,GACf,0BAA0B,CAAC;IAC9B,UAAU,CAAC,CACT,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG;QACvD,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;QAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;KACtC,GACA,YAAY,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;CACzC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,GAAG,cAAc,EACzD,MAAM,EAAE,CACN,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,OAAO,KACb,YAAY,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EACnD,EAAC,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,EAAC,GAAE,mBAAmB,CAAC,OAAO,CAAM,GAC/D,cAAc,CAAC,OAAO,CAAC,CAuBzB;AAED,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,YAAY,CAAC,GAAG,CAAC,EACtB,OAAO,EAAE,OAAO,EAChB,EACE,MAAM,EACN,OAAO,EACP,UAAU,GACX,GAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAM,+DA0BvE;AAED,wBAAsB,2BAA2B,CAC/C,GAAG,EAAE,YAAY,CAAC,GAAG,CAAC,EACtB,OAAO,EAAE,OAAO,EAChB,EACE,MAAM,EACN,OAAO,EACP,UAAU,GACX,GAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAM,+DA4CvE"}

package/build/typescript/static/index.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { AssetManifest } from '@quilted/async/server';
+import { type AssetManifest } from '@quilted/async/server';
 import type { HttpState } from '@quilted/react-http/server';
 export interface RenderDetails {
     readonly route: string;

package/build/typescript/static/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/static/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAOzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAI1D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;CAC1B;AAOD,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD;AAID,wBAAsB,YAAY,CAChC,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,EACvB,EACE,MAAM,EACN,MAAM,EAAE,cAAc,EACtB,QAAQ,EACR,KAAY,EACZ,OAAkB,EAClB,QAAe,GAChB,EAAE,OAAO,iBAuOX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/static/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEzC,OAAO,EAKL,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAI1D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;CAC1B;AAOD,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD;AAID,wBAAsB,YAAY,CAChC,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,EACvB,EACE,MAAM,EACN,MAAM,EAAE,cAAc,EACtB,QAAQ,EACR,KAAY,EACZ,OAAkB,EAClB,QAAe,GAChB,EAAE,OAAO,iBAmQX"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/quilt",
   "type": "module",
-  "version": "0.5.129",
+  "version": "0.5.131",
   "repository": {
     "type": "git",
     "url": "https://github.com/lemonmade/quilt.git",
@@ -214,12 +214,12 @@
     "./build/esm/polyfills/*.mjs"
   ],
   "dependencies": {
-    "@quilted/async": "^0.3.12",
+    "@quilted/async": "^0.3.34",
     "@quilted/events": "^0.1.0",
     "@quilted/graphql": "^0.4.34",
     "@quilted/polyfills": "^0.2.12",
     "@quilted/react": "^18.2.0",
-    "@quilted/react-async": "^0.3.22",
+    "@quilted/react-async": "^0.3.43",
     "@quilted/react-dom": "^18.2.0",
     "@quilted/react-graphql": "^0.4.30",
     "@quilted/react-html": "^0.3.18",

package/source/html.ts

@@ -2,7 +2,6 @@ export {
   Alternate,
   BodyAttributes,
   HtmlAttributes,
-  Hydrator,
   Link,
   Meta,
   SearchRobots,

package/source/server/index.ts

@@ -13,15 +13,21 @@ export {
   ServerRenderManagerContext,
   extract,
 } from '@quilted/react-server-render/server';
-export {createAssetManifest} from '@quilted/async/server';
+export {
+  createAssetManifest,
+  styleAssetAttributes,
+  styleAssetPreloadAttributes,
+  scriptAssetAttributes,
+  scriptAssetPreloadAttributes,
+} from '@quilted/async/server';
 export type {
   Asset,
-  AssetSelector,
   AsyncAssetSelector,
+  AssetSelectorOptions,
   CreateAssetManifestOptions,
   AssetManifest,
   AssetBuild,
-  AssetBuildEntry,
+  AssetsEntry,
 } from '@quilted/async/server';
 export {
   AsyncAssetContext,
@@ -66,6 +72,9 @@ export type {
 } from '@quilted/request-router';
 export {parseAcceptLanguageHeader} from '@quilted/react-localize';
 
-export {renderApp} from './render';
 export {ServerContext} from './ServerContext';
-export {createServerRender, renderAppToResponse} from './request-router';
+export {
+  createServerRender,
+  renderAppToResponse,
+  renderAppToStreamedResponse,
+} from './request-router';

package/source/server/request-router.tsx

@@ -1,26 +1,39 @@
-import type {ReactElement} from 'react';
+import {Fragment, type ReactElement, type LinkHTMLAttributes} from 'react';
 
-import type {Asset, AssetManifest} from '@quilted/async/server';
-import {renderHtmlToString, Html} from '@quilted/react-html/server';
+import {
+  styleAssetAttributes,
+  styleAssetPreloadAttributes,
+  scriptAssetAttributes,
+  scriptAssetPreloadAttributes,
+  type AssetsEntry,
+  type AssetManifest,
+} from '@quilted/async/server';
+import {AsyncAssetManager} from '@quilted/react-async/server';
+import {HttpManager} from '@quilted/react-http/server';
+import {
+  renderHtmlToString,
+  HtmlManager,
+  Html,
+} 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 {
-  RequestRouter,
   EnhancedRequest,
   RequestHandler,
   RequestContext,
 } from '@quilted/request-router';
 
-import {renderApp, type RenderResult as RenderAppResult} from './render';
+import {ServerContext} from './ServerContext';
 
-export interface Options<Context = RequestContext>
-  extends Omit<ExtractOptions, 'context'> {
+export interface ServerRenderOptions<Context = RequestContext> {
+  stream?: 'headers' | false;
   assets?: AssetManifest<unknown>;
-  router?: RequestRouter<Context>;
+  extract?: ExtractOptions;
   context?(
     request: EnhancedRequest,
     context: Context,
@@ -28,20 +41,26 @@ export interface Options<Context = RequestContext>
   renderHtml?(
     content: string | undefined,
     request: Request,
-    details: Omit<RenderAppResult, 'asyncAssets' | 'markup'> & {
-      readonly styles: readonly Asset[];
-      readonly scripts: readonly Asset[];
-      readonly preload: readonly Asset[];
+    details: Pick<ServerRenderAppDetails, 'http' | 'html'> & {
+      readonly assets?: AssetsEntry;
+      readonly preloadAssets?: AssetsEntry;
     },
   ): ReactElement<any> | Promise<ReactElement<any>>;
 }
 
+export interface ServerRenderAppDetails {
+  readonly http: HttpManager;
+  readonly html: HtmlManager;
+  readonly rendered?: string;
+  readonly asyncAssets: AsyncAssetManager;
+}
+
 export function createServerRender<Context = RequestContext>(
   render: (
     request: EnhancedRequest,
     context: Context,
   ) => ReactElement<any> | Promise<ReactElement<any>>,
-  {context, ...options}: Omit<Options<Context>, 'router'> = {},
+  {context, stream, ...options}: ServerRenderOptions<Context> = {},
 ): RequestHandler<Context> {
   return async (request, requestContext) => {
     const accepts = request.headers.get('Accept');
@@ -50,9 +69,19 @@ export function createServerRender<Context = RequestContext>(
 
     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 as any),
+      extract: {
+        ...options.extract,
+        context:
+          options.extract ??
+          context?.(request, requestContext) ??
+          (requestContext as any),
+      },
     });
   };
 }
@@ -62,22 +91,17 @@ export async function renderAppToResponse(
   request: Request,
   {
     assets,
-    renderHtml = defaultRenderHtml,
-    ...options
-  }: Omit<Options, 'handler' | 'renderProps'> = {},
+    extract,
+    renderHtml,
+  }: Pick<ServerRenderOptions, 'assets' | 'renderHtml' | 'extract'> = {},
 ) {
-  const {
-    html: htmlManager,
-    http,
-    rendered,
-    asyncAssets,
-  } = await renderApp(app, {
-    ...options,
+  const renderDetails = await serverRenderDetailsForApp(app, {
+    extract,
     url: request.url,
     headers: request.headers,
   });
 
-  const {headers, statusCode = 200, redirectUrl} = http.state;
+  const {headers, statusCode = 200, redirectUrl} = renderDetails.http.state;
 
   if (redirectUrl) {
     return redirect(redirectUrl, {
@@ -86,56 +110,219 @@ export async function renderAppToResponse(
     });
   }
 
+  const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+    assets,
+    renderHtml,
+  });
+
+  return html(content, {
+    headers,
+    status: statusCode,
+  });
+}
+
+export async function renderAppToStreamedResponse(
+  app: ReactElement<any>,
+  request: Request,
+  {
+    assets,
+    extract,
+    renderHtml,
+  }: Pick<ServerRenderOptions, 'assets' | 'renderHtml' | 'extract'> = {},
+) {
+  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: ReactElement<any>,
+  {
+    url,
+    headers,
+    extract: extractOptions,
+  }: Pick<ServerRenderOptions, 'extract'> & {
+    url?: string | URL;
+    headers?: NonNullable<
+      ConstructorParameters<typeof HttpManager>[0]
+    >['headers'];
+  } = {},
+): Promise<ServerRenderAppDetails> {
+  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 (
+        <ServerContext
+          asyncAssets={asyncAssets}
+          http={http}
+          html={html}
+          url={url}
+        >
+          {decorate?.(app) ?? app}
+        </ServerContext>
+      );
+    },
+    ...rest,
+  });
+
+  return {rendered, http, html, asyncAssets};
+}
+
+async function renderAppDetailsToHtmlString(
+  details: ServerRenderAppDetails,
+  request: Request,
+  {
+    assets,
+    renderHtml = defaultRenderHtml,
+  }: Pick<ServerRenderOptions, 'assets' | 'renderHtml'> = {},
+) {
+  const {html: htmlManager, http, rendered, asyncAssets} = details;
+
   const usedAssets = asyncAssets.used({timing: 'load'});
-  const assetOptions = {userAgent: request.headers.get('User-Agent')};
+  const assetContext = {userAgent: request.headers.get('User-Agent')};
 
-  const [styles, scripts, preload] = assets
+  const [entryAssets, preloadAssets] = assets
     ? await Promise.all([
-        assets.styles({async: usedAssets, options: assetOptions}),
-        assets.scripts({async: usedAssets, options: assetOptions}),
+        assets.assets({async: usedAssets, context: assetContext}),
         assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
-          options: assetOptions,
+          context: assetContext,
         }),
       ])
-    : [[], [], []];
+    : [];
 
   const htmlElement = await renderHtml(rendered, request, {
     html: htmlManager,
     http,
-    styles,
-    scripts,
-    preload,
+    assets: entryAssets,
+    preloadAssets,
   });
 
-  return html(renderHtmlToString(htmlElement), {
-    headers,
-    status: statusCode,
-  });
+  return renderHtmlToString(htmlElement);
 }
 
-function defaultRenderHtml(
-  content: string | undefined,
-  request: Request,
-  {
-    html,
-    styles,
-    scripts,
-    preload,
-  }: Omit<RenderAppResult, 'asyncAssets' | 'markup'> & {
-    readonly styles: readonly Asset[];
-    readonly scripts: readonly Asset[];
-    readonly preload: readonly Asset[];
-  },
-) {
-  return (
-    <Html
-      url={new URL(request.url)}
-      manager={html}
-      styles={styles}
-      scripts={scripts}
-      preloadAssets={preload}
-    >
-      {content}
-    </Html>
-  );
+const defaultRenderHtml: NonNullable<ServerRenderOptions<any>['renderHtml']> =
+  function defaultRenderHtml(content, request, {html, assets, preloadAssets}) {
+    const baseUrl = new URL(request.url);
+
+    return (
+      <Html
+        manager={html}
+        headEndContent={
+          <>
+            {assets &&
+              [...assets.styles].map((style) => {
+                const attributes = styleAssetAttributes(style, {baseUrl});
+                return <link key={style.source} {...attributes} />;
+              })}
+
+            {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)} />
+                      <script {...attributes} async />
+                    </Fragment>
+                  );
+                }
+
+                return <script key={script.source} {...attributes} defer />;
+              })}
+
+            {preloadAssets &&
+              [...preloadAssets.styles].map((style) => {
+                const attributes = styleAssetPreloadAttributes(style, {
+                  baseUrl,
+                });
+
+                return <link key={style.source} {...attributes} />;
+              })}
+
+            {preloadAssets &&
+              [...preloadAssets.scripts].map((script) => {
+                const attributes = scriptAssetPreloadAttributes(script, {
+                  baseUrl,
+                });
+
+                return <link key={script.source} {...attributes} />;
+              })}
+          </>
+        }
+      >
+        {content}
+      </Html>
+    );
+  };
+
+function preloadHeader(attributes: LinkHTMLAttributes<HTMLLinkElement>) {
+  const {
+    as,
+    rel = 'preload',
+    href,
+    crossOrigin,
+    crossorigin,
+  } = attributes as any;
+
+  // 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;
 }

package/source/static/index.tsx

@@ -1,6 +1,12 @@
 import type {ComponentType} from 'react';
 
-import type {AssetManifest} from '@quilted/async/server';
+import {
+  styleAssetAttributes,
+  styleAssetPreloadAttributes,
+  scriptAssetAttributes,
+  scriptAssetPreloadAttributes,
+  type AssetManifest,
+} from '@quilted/async/server';
 import {renderHtmlToString, Html} from '@quilted/react-html/server';
 import type {RouteDefinition} from '@quilted/react-router';
 import {
@@ -224,44 +230,72 @@ export async function renderStatic(
 
     const usedAssets = asyncAssets.used({timing: 'load'});
 
-    const [
-      moduleStyles,
-      moduleScripts,
-      modulePreload,
-      nomoduleStyles,
-      nomoduleScripts,
-    ] = await Promise.all([
-      assets.styles({async: usedAssets, options: {modules: true}}),
-      assets.scripts({async: usedAssets, options: {modules: true}}),
+    const [moduleAssets, modulePreload, nomoduleAssets] = await Promise.all([
+      assets.assets({async: usedAssets, context: {modules: true}}),
       assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
-        options: {modules: true},
+        context: {modules: true},
       }),
-      assets.styles({async: usedAssets, options: {modules: false}}),
-      assets.scripts({async: usedAssets, options: {modules: false}}),
+      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 = 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(
       <Html
-        url={url}
         manager={htmlManager}
-        styles={styles}
-        scripts={scripts}
-        preloadAssets={preload}
+        headEndContent={
+          <>
+            {[...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} />;
+            })}
+
+            {[...nomoduleAssets.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}
+                />
+              );
+            })}
+
+            {[...modulePreload.styles].map((style) => {
+              const attributes = styleAssetPreloadAttributes(style, {
+                baseUrl: url,
+              });
+
+              return <link key={style.source} {...attributes} />;
+            })}
+
+            {[...modulePreload.scripts].map((script) => {
+              const attributes = scriptAssetPreloadAttributes(script, {
+                baseUrl: url,
+              });
+
+              return <link key={script.source} {...attributes} />;
+            })}
+          </>
+        }
       >
         {markup}
       </Html>,