@quilted/quilt 0.5.64 → 0.5.67

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @quilted/quilt
 
+## 0.5.67
+
+### Patch Changes
+
+- [`ec90a3f`](https://github.com/lemonmade/quilt/commit/ec90a3f0de7366a42fd1e13b903154f5bc8c0a54) Thanks [@lemonmade](https://github.com/lemonmade)! - Add simpler way of rendering React to a http-handlers response
+
+## 0.5.66
+
+### Patch Changes
+
+- [`fb10e01`](https://github.com/lemonmade/quilt/commit/fb10e0181c26b6faedaea6f7fc5d88d7ccccc3d1) Thanks [@lemonmade](https://github.com/lemonmade)! - Add web crypto polyfill
+
+* [`33c1a59`](https://github.com/lemonmade/quilt/commit/33c1a59c89fd9aeae81cb6072b4100d706268985) Thanks [@lemonmade](https://github.com/lemonmade)! - Add ability to nest http handlers
+
+## 0.5.65
+
+### Patch Changes
+
+- [`c58ca94`](https://github.com/lemonmade/quilt/commit/c58ca9468f24c1cc193d67f56692e07e71e918ab) Thanks [@lemonmade](https://github.com/lemonmade)! - Add `Serialize` component
+
+* [`f75a035`](https://github.com/lemonmade/quilt/commit/f75a035e5a6ec857497f28da9f0f0ba2d5d6112a) Thanks [@lemonmade](https://github.com/lemonmade)! - Add props customization to Quilt server handler
+
 ## 0.5.64
 
 ### Patch Changes

package/build/cjs/html.cjs

@@ -38,6 +38,10 @@ Object.defineProperty(exports, 'SearchRobots', {
   enumerable: true,
   get: function () { return reactHtml.SearchRobots; }
 });
+Object.defineProperty(exports, 'Serialize', {
+  enumerable: true,
+  get: function () { return reactHtml.Serialize; }
+});
 Object.defineProperty(exports, 'ThemeColor', {
   enumerable: true,
   get: function () { return reactHtml.ThemeColor; }

package/build/cjs/server/http-handler.cjs

@@ -8,74 +8,85 @@ var render = require('./render.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function createServerRenderingRequestHandler(App, {
-  assets
-}) {
-  return async request => {
-    const accepts = request.headers.get('Accept');
-    if (accepts != null && !accepts.includes('text/html')) return;
-    const {
-      html: htmlManager,
-      http,
-      markup,
-      asyncAssets
-    } = await render.renderApp( /*#__PURE__*/jsxRuntime.jsx(App, {}), {
-      url: request.url,
-      headers: request.headers
-    });
-    const {
-      headers,
-      statusCode = 200,
-      redirectUrl
-    } = http.state;
-
-    if (redirectUrl) {
-      return httpHandlers.redirect(redirectUrl, {
-        status: statusCode,
-        headers
-      });
-    }
-
-    const usedAssets = asyncAssets.used({
-      timing: 'load'
-    });
-    const assetOptions = {
-      userAgent: request.headers.get('User-Agent')
-    };
-    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
-    })]);
-    return httpHandlers.html(server.render( /*#__PURE__*/jsxRuntime.jsx(server.Html, {
-      manager: htmlManager,
-      styles: styles,
-      scripts: scripts,
-      preloadAssets: preload,
-      children: markup
-    })), {
-      headers,
-      status: statusCode
+  assets,
+  renderProps
+} = {}) {
+  return request => {
+    return renderToResponse( /*#__PURE__*/jsxRuntime.jsx(App, { ...renderProps?.({
+        request
+      })
+    }), request, {
+      assets
     });
   };
 }
 function createServerRenderingHttpHandler(App, {
   assets,
-  before,
-  handler = httpHandlers.createHttpHandler({
-    before
-  })
+  renderProps,
+  handler = httpHandlers.createHttpHandler()
 }) {
   handler.get(createServerRenderingRequestHandler(App, {
-    assets
+    assets,
+    renderProps
   }));
   return handler;
 }
+async function renderToResponse(element, request, {
+  assets
+} = {}) {
+  const accepts = request.headers.get('Accept');
+  if (accepts != null && !accepts.includes('text/html')) return;
+  const {
+    html: htmlManager,
+    http,
+    markup,
+    asyncAssets
+  } = await render.renderApp(element, {
+    url: request.url,
+    headers: request.headers
+  });
+  const {
+    headers,
+    statusCode = 200,
+    redirectUrl
+  } = http.state;
+
+  if (redirectUrl) {
+    return httpHandlers.redirect(redirectUrl, {
+      status: statusCode,
+      headers
+    });
+  }
+
+  const usedAssets = asyncAssets.used({
+    timing: 'load'
+  });
+  const assetOptions = {
+    userAgent: request.headers.get('User-Agent')
+  };
+  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 httpHandlers.html(server.render( /*#__PURE__*/jsxRuntime.jsx(server.Html, {
+    manager: htmlManager,
+    styles: styles,
+    scripts: scripts,
+    preloadAssets: preload,
+    children: markup
+  })), {
+    headers,
+    status: statusCode
+  });
+}
 
 exports.createServerRenderingHttpHandler = createServerRenderingHttpHandler;
 exports.createServerRenderingRequestHandler = createServerRenderingRequestHandler;
+exports.renderToResponse = renderToResponse;

package/build/cjs/server/index.cjs

@@ -86,3 +86,4 @@ exports.renderApp = render.renderApp;
 exports.ServerContext = ServerContext.ServerContext;
 exports.createServerRenderingHttpHandler = httpHandler.createServerRenderingHttpHandler;
 exports.createServerRenderingRequestHandler = httpHandler.createServerRenderingRequestHandler;
+exports.renderToResponse = httpHandler.renderToResponse;

package/build/esm/html.mjs

@@ -1 +1 @@
-export { Alternate, BodyAttributes, Favicon, HtmlAttributes, Hydrator, Link, Meta, SearchRobots, ThemeColor, Title, Viewport, getSerialized, useAlternateUrl, useBodyAttributes, useFavicon, useHtmlAttributes, useHtmlUpdater, useLink, useLocale, useMeta, useSearchRobots, useSerialized, useThemeColor, useTitle, useViewport } from '@quilted/react-html';
+export { Alternate, BodyAttributes, Favicon, HtmlAttributes, Hydrator, Link, Meta, SearchRobots, Serialize, ThemeColor, Title, Viewport, getSerialized, useAlternateUrl, useBodyAttributes, useFavicon, useHtmlAttributes, useHtmlUpdater, useLink, useLocale, useMeta, useSearchRobots, useSerialized, useThemeColor, useTitle, useViewport } from '@quilted/react-html';

package/build/esm/server/http-handler.mjs

@@ -1,76 +1,86 @@
 import { render, Html } from '@quilted/react-html/server';
-import { redirect, html, createHttpHandler } from '@quilted/http-handlers';
+import { createHttpHandler, redirect, html } from '@quilted/http-handlers';
 import { renderApp } from './render.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 function createServerRenderingRequestHandler(App, {
-  assets
-}) {
-  return async request => {
-    const accepts = request.headers.get('Accept');
-    if (accepts != null && !accepts.includes('text/html')) return;
-    const {
-      html: htmlManager,
-      http,
-      markup,
-      asyncAssets
-    } = await renderApp( /*#__PURE__*/jsx(App, {}), {
-      url: request.url,
-      headers: request.headers
-    });
-    const {
-      headers,
-      statusCode = 200,
-      redirectUrl
-    } = http.state;
-
-    if (redirectUrl) {
-      return redirect(redirectUrl, {
-        status: statusCode,
-        headers
-      });
-    }
-
-    const usedAssets = asyncAssets.used({
-      timing: 'load'
-    });
-    const assetOptions = {
-      userAgent: request.headers.get('User-Agent')
-    };
-    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
-    })]);
-    return html(render( /*#__PURE__*/jsx(Html, {
-      manager: htmlManager,
-      styles: styles,
-      scripts: scripts,
-      preloadAssets: preload,
-      children: markup
-    })), {
-      headers,
-      status: statusCode
+  assets,
+  renderProps
+} = {}) {
+  return request => {
+    return renderToResponse( /*#__PURE__*/jsx(App, { ...renderProps?.({
+        request
+      })
+    }), request, {
+      assets
     });
   };
 }
 function createServerRenderingHttpHandler(App, {
   assets,
-  before,
-  handler = createHttpHandler({
-    before
-  })
+  renderProps,
+  handler = createHttpHandler()
 }) {
   handler.get(createServerRenderingRequestHandler(App, {
-    assets
+    assets,
+    renderProps
   }));
   return handler;
 }
+async function renderToResponse(element, request, {
+  assets
+} = {}) {
+  const accepts = request.headers.get('Accept');
+  if (accepts != null && !accepts.includes('text/html')) return;
+  const {
+    html: htmlManager,
+    http,
+    markup,
+    asyncAssets
+  } = await renderApp(element, {
+    url: request.url,
+    headers: request.headers
+  });
+  const {
+    headers,
+    statusCode = 200,
+    redirectUrl
+  } = http.state;
+
+  if (redirectUrl) {
+    return redirect(redirectUrl, {
+      status: statusCode,
+      headers
+    });
+  }
+
+  const usedAssets = asyncAssets.used({
+    timing: 'load'
+  });
+  const assetOptions = {
+    userAgent: request.headers.get('User-Agent')
+  };
+  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(render( /*#__PURE__*/jsx(Html, {
+    manager: htmlManager,
+    styles: styles,
+    scripts: scripts,
+    preloadAssets: preload,
+    children: markup
+  })), {
+    headers,
+    status: statusCode
+  });
+}
 
-export { createServerRenderingHttpHandler, createServerRenderingRequestHandler };
+export { createServerRenderingHttpHandler, createServerRenderingRequestHandler, renderToResponse };

package/build/esm/server/index.mjs

@@ -6,4 +6,4 @@ export { renderEmail } from '@quilted/react-email/server';
 export { createHttpHandler } from '@quilted/http-handlers';
 export { renderApp } from './render.mjs';
 export { ServerContext } from './ServerContext.mjs';
-export { createServerRenderingHttpHandler, createServerRenderingRequestHandler } from './http-handler.mjs';
+export { createServerRenderingHttpHandler, createServerRenderingRequestHandler, renderToResponse } from './http-handler.mjs';

package/build/esnext/html.esnext

@@ -1 +1 @@
-export { Alternate, BodyAttributes, Favicon, HtmlAttributes, Hydrator, Link, Meta, SearchRobots, ThemeColor, Title, Viewport, getSerialized, useAlternateUrl, useBodyAttributes, useFavicon, useHtmlAttributes, useHtmlUpdater, useLink, useLocale, useMeta, useSearchRobots, useSerialized, useThemeColor, useTitle, useViewport } from '@quilted/react-html';
+export { Alternate, BodyAttributes, Favicon, HtmlAttributes, Hydrator, Link, Meta, SearchRobots, Serialize, ThemeColor, Title, Viewport, getSerialized, useAlternateUrl, useBodyAttributes, useFavicon, useHtmlAttributes, useHtmlUpdater, useLink, useLocale, useMeta, useSearchRobots, useSerialized, useThemeColor, useTitle, useViewport } from '@quilted/react-html';

package/build/esnext/server/http-handler.esnext

@@ -1,76 +1,86 @@
 import { render, Html } from '@quilted/react-html/server';
-import { redirect, html, createHttpHandler } from '@quilted/http-handlers';
+import { createHttpHandler, redirect, html } from '@quilted/http-handlers';
 import { renderApp } from './render.esnext';
 import { jsx } from 'react/jsx-runtime';
 
 function createServerRenderingRequestHandler(App, {
-  assets
-}) {
-  return async request => {
-    const accepts = request.headers.get('Accept');
-    if (accepts != null && !accepts.includes('text/html')) return;
-    const {
-      html: htmlManager,
-      http,
-      markup,
-      asyncAssets
-    } = await renderApp( /*#__PURE__*/jsx(App, {}), {
-      url: request.url,
-      headers: request.headers
-    });
-    const {
-      headers,
-      statusCode = 200,
-      redirectUrl
-    } = http.state;
-
-    if (redirectUrl) {
-      return redirect(redirectUrl, {
-        status: statusCode,
-        headers
-      });
-    }
-
-    const usedAssets = asyncAssets.used({
-      timing: 'load'
-    });
-    const assetOptions = {
-      userAgent: request.headers.get('User-Agent')
-    };
-    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
-    })]);
-    return html(render( /*#__PURE__*/jsx(Html, {
-      manager: htmlManager,
-      styles: styles,
-      scripts: scripts,
-      preloadAssets: preload,
-      children: markup
-    })), {
-      headers,
-      status: statusCode
+  assets,
+  renderProps
+} = {}) {
+  return request => {
+    return renderToResponse( /*#__PURE__*/jsx(App, { ...renderProps?.({
+        request
+      })
+    }), request, {
+      assets
     });
   };
 }
 function createServerRenderingHttpHandler(App, {
   assets,
-  before,
-  handler = createHttpHandler({
-    before
-  })
+  renderProps,
+  handler = createHttpHandler()
 }) {
   handler.get(createServerRenderingRequestHandler(App, {
-    assets
+    assets,
+    renderProps
   }));
   return handler;
 }
+async function renderToResponse(element, request, {
+  assets
+} = {}) {
+  const accepts = request.headers.get('Accept');
+  if (accepts != null && !accepts.includes('text/html')) return;
+  const {
+    html: htmlManager,
+    http,
+    markup,
+    asyncAssets
+  } = await renderApp(element, {
+    url: request.url,
+    headers: request.headers
+  });
+  const {
+    headers,
+    statusCode = 200,
+    redirectUrl
+  } = http.state;
+
+  if (redirectUrl) {
+    return redirect(redirectUrl, {
+      status: statusCode,
+      headers
+    });
+  }
+
+  const usedAssets = asyncAssets.used({
+    timing: 'load'
+  });
+  const assetOptions = {
+    userAgent: request.headers.get('User-Agent')
+  };
+  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(render( /*#__PURE__*/jsx(Html, {
+    manager: htmlManager,
+    styles: styles,
+    scripts: scripts,
+    preloadAssets: preload,
+    children: markup
+  })), {
+    headers,
+    status: statusCode
+  });
+}
 
-export { createServerRenderingHttpHandler, createServerRenderingRequestHandler };
+export { createServerRenderingHttpHandler, createServerRenderingRequestHandler, renderToResponse };

package/build/esnext/server/index.esnext

@@ -6,4 +6,4 @@ export { renderEmail } from '@quilted/react-email/server';
 export { createHttpHandler } from '@quilted/http-handlers';
 export { renderApp } from './render.esnext';
 export { ServerContext } from './ServerContext.esnext';
-export { createServerRenderingHttpHandler, createServerRenderingRequestHandler } from './http-handler.esnext';
+export { createServerRenderingHttpHandler, createServerRenderingRequestHandler, renderToResponse } from './http-handler.esnext';