@quilted/quilt 0.5.64 → 0.5.67

package/build/typescript/html.d.ts

@@ -1,2 +1,3 @@
-export { Alternate, BodyAttributes, HtmlAttributes, Hydrator, Link, Meta, SearchRobots, ThemeColor, Title, Viewport, Favicon, useAlternateUrl, useSerialized, useBodyAttributes, useHtmlAttributes, useFavicon, useLink, useLocale, useMeta, useSearchRobots, useThemeColor, useTitle, useViewport, useHtmlUpdater, getSerialized, } from '@quilted/react-html';
+export { Alternate, BodyAttributes, HtmlAttributes, Hydrator, Link, Meta, SearchRobots, Serialize, ThemeColor, Title, Viewport, Favicon, useAlternateUrl, useSerialized, useBodyAttributes, useHtmlAttributes, useFavicon, useLink, useLocale, useMeta, useSearchRobots, useThemeColor, useTitle, useViewport, useHtmlUpdater, getSerialized, } from '@quilted/react-html';
+export type { Serializable } from '@quilted/react-html';
 //# sourceMappingURL=html.d.ts.map

package/build/typescript/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/html.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,eAAe,EACf,aAAa,EACb,QAAQ,EACR,WAAW,EACX,cAAc,EACd,aAAa,GACd,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/html.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,eAAe,EACf,aAAa,EACb,QAAQ,EACR,WAAW,EACX,cAAc,EACd,aAAa,GACd,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC"}

package/build/typescript/polyfills/crypto.d.ts

@@ -0,0 +1,2 @@
+import '@quilted/polyfills/crypto';
+//# sourceMappingURL=crypto.d.ts.map

package/build/typescript/polyfills/crypto.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crypto.d.ts","sourceRoot":"","sources":["../../../src/polyfills/crypto.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/build/typescript/server/http-handler.d.ts

@@ -1,10 +1,17 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactElement } from 'react';
 import type { AssetLoader } from '@quilted/async/server';
-import type { HttpHandler, RequestHandler, HttpHandlerOptions } from '@quilted/http-handlers';
-export interface Options extends Pick<HttpHandlerOptions, 'before'> {
-    assets: AssetLoader<unknown>;
+import type { Request, HttpHandler, RequestHandler } from '@quilted/http-handlers';
+export interface Options<Props = Record<string, never>> {
+    assets?: AssetLoader<unknown>;
     handler?: HttpHandler;
+    renderProps?(options: {
+        request: Request;
+    }): Props;
 }
-export declare function createServerRenderingRequestHandler(App: ComponentType<any>, { assets }: Pick<Options, 'assets'>): RequestHandler;
-export declare function createServerRenderingHttpHandler(App: ComponentType<any>, { assets, before, handler }: Options): HttpHandler;
+export declare function createServerRenderingRequestHandler<Props>(App: ComponentType<Props>, { assets, renderProps }?: Pick<Options<Props>, 'assets' | 'renderProps'>): RequestHandler;
+export declare function createServerRenderingHttpHandler<Props>(App: ComponentType<Props>, { assets, renderProps, handler }: Options<Props>): HttpHandler;
+export declare function renderToResponse(element: ReactElement<any>, request: Request, { assets }?: {
+    assets?: AssetLoader<unknown>;
+    request?: Request;
+}): Promise<import("@quilted/http-handlers").Response | undefined>;
 //# sourceMappingURL=http-handler.d.ts.map

package/build/typescript/server/http-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"http-handler.d.ts","sourceRoot":"","sources":["../../../src/server/http-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAIvD,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,OAAQ,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IACjE,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,wBAAgB,mCAAmC,CACjD,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,EACvB,EAAC,MAAM,EAAC,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,GAChC,cAAc,CAqDhB;AAED,wBAAgB,gCAAgC,CAC9C,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,EACvB,EAAC,MAAM,EAAE,MAAM,EAAE,OAAqC,EAAC,EAAE,OAAO,eAIjE"}
+{"version":3,"file":"http-handler.d.ts","sourceRoot":"","sources":["../../../src/server/http-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAE,YAAY,EAAC,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAIvD,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,cAAc,EACf,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;IACpD,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,CAAC,OAAO,EAAE;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,GAAG,KAAK,CAAC;CAClD;AAED,wBAAgB,mCAAmC,CAAC,KAAK,EACvD,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EACzB,EAAC,MAAM,EAAE,WAAW,EAAC,GAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAM,GACzE,cAAc,CAQhB;AAED,wBAAgB,gCAAgC,CAAC,KAAK,EACpD,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EACzB,EAAC,MAAM,EAAE,WAAW,EAAE,OAA6B,EAAC,EAAE,OAAO,CAAC,KAAK,CAAC,eAIrE;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,EAC1B,OAAO,EAAE,OAAO,EAChB,EAAC,MAAM,EAAC,GAAE;IAAC,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAM,kEAsDlE"}

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

@@ -9,5 +9,5 @@ export type { HttpState } from '@quilted/react-http/server';
 export { createHttpHandler } from '@quilted/http-handlers';
 export { renderApp } from './render';
 export { ServerContext } from './ServerContext';
-export { createServerRenderingRequestHandler, createServerRenderingHttpHandler, } from './http-handler';
+export { createServerRenderingRequestHandler, createServerRenderingHttpHandler, renderToResponse, } from './http-handler';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,gBAAgB,IAAI,qBAAqB,GAC1C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,OAAO,GACR,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAa,EACb,kBAAkB,GACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,IAAI,6BAA6B,GAClD,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAC,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACxD,YAAY,EAAC,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EACL,mCAAmC,EACnC,gCAAgC,GACjC,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,gBAAgB,IAAI,qBAAqB,GAC1C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,OAAO,GACR,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAa,EACb,kBAAkB,GACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,IAAI,6BAA6B,GAClD,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAC,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACxD,YAAY,EAAC,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EACL,mCAAmC,EACnC,gCAAgC,EAChC,gBAAgB,GACjB,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/quilt",
   "type": "module",
-  "version": "0.5.64",
+  "version": "0.5.67",
   "repository": {
     "type": "git",
     "url": "https://github.com/lemonmade/quilt.git",
@@ -103,6 +103,12 @@
       "import": "./build/esm/polyfills/base.mjs",
       "require": "./build/cjs/polyfills/base.cjs"
     },
+    "./polyfills/crypto": {
+      "quilt:from-source": "./src/polyfills/crypto.ts",
+      "quilt:esnext": "./build/esnext/polyfills/crypto.esnext",
+      "import": "./build/esm/polyfills/crypto.mjs",
+      "require": "./build/cjs/polyfills/crypto.cjs"
+    },
     "./polyfills/fetch": {
       "quilt:from-source": "./src/polyfills/fetch.ts",
       "quilt:esnext": "./build/esnext/polyfills/fetch.esnext",
@@ -167,6 +173,9 @@
       "polyfills/fetch": [
         "./build/typescript/polyfills/fetch.d.ts"
       ],
+      "polyfills/crypto": [
+        "./build/typescript/polyfills/crypto.d.ts"
+      ],
       "polyfills/noop": [
         "./build/typescript/polyfills/noop.d.ts"
       ],

package/src/html.ts

@@ -6,6 +6,7 @@ export {
   Link,
   Meta,
   SearchRobots,
+  Serialize,
   ThemeColor,
   Title,
   Viewport,
@@ -25,3 +26,4 @@ export {
   useHtmlUpdater,
   getSerialized,
 } from '@quilted/react-html';
+export type {Serializable} from '@quilted/react-html';

package/src/polyfills/crypto.ts

@@ -0,0 +1 @@
+import '@quilted/polyfills/crypto';

package/src/server/http-handler.tsx

@@ -1,84 +1,99 @@
-import type {ComponentType} from 'react';
+import type {ComponentType, ReactElement} from 'react';
 
 import type {AssetLoader} from '@quilted/async/server';
-import {render, Html} from '@quilted/react-html/server';
+import {render as renderToString, Html} from '@quilted/react-html/server';
 
 import {createHttpHandler, html, redirect} from '@quilted/http-handlers';
 import type {
+  Request,
   HttpHandler,
   RequestHandler,
-  HttpHandlerOptions,
 } from '@quilted/http-handlers';
 
 import {renderApp} from './render';
 
-export interface Options extends Pick<HttpHandlerOptions, 'before'> {
-  assets: AssetLoader<unknown>;
+export interface Options<Props = Record<string, never>> {
+  assets?: AssetLoader<unknown>;
   handler?: HttpHandler;
+  renderProps?(options: {request: Request}): Props;
 }
 
-export function createServerRenderingRequestHandler(
-  App: ComponentType<any>,
-  {assets}: Pick<Options, 'assets'>,
+export function createServerRenderingRequestHandler<Props>(
+  App: ComponentType<Props>,
+  {assets, renderProps}: Pick<Options<Props>, 'assets' | 'renderProps'> = {},
 ): RequestHandler {
-  return async (request) => {
-    const accepts = request.headers.get('Accept');
+  return (request) => {
+    return renderToResponse(
+      <App {...(renderProps?.({request}) as any)} />,
+      request,
+      {assets},
+    );
+  };
+}
 
-    if (accepts != null && !accepts.includes('text/html')) return;
+export function createServerRenderingHttpHandler<Props>(
+  App: ComponentType<Props>,
+  {assets, renderProps, handler = createHttpHandler()}: Options<Props>,
+) {
+  handler.get(createServerRenderingRequestHandler(App, {assets, renderProps}));
+  return handler;
+}
 
-    const {
-      html: htmlManager,
-      http,
-      markup,
-      asyncAssets,
-    } = await renderApp(<App />, {
-      url: request.url,
-      headers: request.headers,
-    });
+export async function renderToResponse(
+  element: ReactElement<any>,
+  request: Request,
+  {assets}: {assets?: AssetLoader<unknown>; request?: Request} = {},
+) {
+  const accepts = request.headers.get('Accept');
 
-    const {headers, statusCode = 200, redirectUrl} = http.state;
+  if (accepts != null && !accepts.includes('text/html')) return;
 
-    if (redirectUrl) {
-      return redirect(redirectUrl, {
-        status: statusCode as 301,
-        headers,
-      });
-    }
+  const {
+    html: htmlManager,
+    http,
+    markup,
+    asyncAssets,
+  } = await renderApp(element, {
+    url: request.url,
+    headers: request.headers,
+  });
 
-    const usedAssets = asyncAssets.used({timing: 'load'});
-    const assetOptions = {userAgent: request.headers.get('User-Agent')};
+  const {headers, statusCode = 200, redirectUrl} = http.state;
 
-    const [styles, scripts, preload] = await Promise.all([
-      assets.styles({async: usedAssets, options: assetOptions}),
-      assets.scripts({async: usedAssets, options: assetOptions}),
-      assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
-        options: assetOptions,
-      }),
-    ]);
+  if (redirectUrl) {
+    return redirect(redirectUrl, {
+      status: statusCode as 301,
+      headers,
+    });
+  }
 
-    return html(
-      render(
-        <Html
-          manager={htmlManager}
-          styles={styles}
-          scripts={scripts}
-          preloadAssets={preload}
-        >
-          {markup}
-        </Html>,
-      ),
-      {
-        headers,
-        status: statusCode,
-      },
-    );
-  };
-}
+  const usedAssets = asyncAssets.used({timing: 'load'});
+  const assetOptions = {userAgent: request.headers.get('User-Agent')};
 
-export function createServerRenderingHttpHandler(
-  App: ComponentType<any>,
-  {assets, before, handler = createHttpHandler({before})}: Options,
-) {
-  handler.get(createServerRenderingRequestHandler(App, {assets}));
-  return handler;
+  const [styles, scripts, preload] = assets
+    ? await Promise.all([
+        assets.styles({async: usedAssets, options: assetOptions}),
+        assets.scripts({async: usedAssets, options: assetOptions}),
+        assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
+          options: assetOptions,
+        }),
+      ])
+    : [];
+
+  return html(
+    renderToString(
+      <Html
+        manager={htmlManager}
+        styles={styles}
+        scripts={scripts}
+        preloadAssets={preload}
+      >
+        {markup}
+      </Html>,
+    ),
+    {
+      headers,
+      status: statusCode,
+    },
+  );
 }

package/src/server/index.ts

@@ -36,4 +36,5 @@ export {ServerContext} from './ServerContext';
 export {
   createServerRenderingRequestHandler,
   createServerRenderingHttpHandler,
+  renderToResponse,
 } from './http-handler';