@quilted/quilt 0.5.66 → 0.5.67

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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

@@ -9,62 +9,14 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function createServerRenderingRequestHandler(App, {
   assets,
-  renderProps = () => ({})
-}) {
-  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, { ...renderProps?.({
+  renderProps
+} = {}) {
+  return request => {
+    return renderToResponse( /*#__PURE__*/jsxRuntime.jsx(App, { ...renderProps?.({
         request
       })
-    }), {
-      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
+    }), request, {
+      assets
     });
   };
 }
@@ -79,6 +31,62 @@ function createServerRenderingHttpHandler(App, {
   }));
   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/server/http-handler.mjs

@@ -1,66 +1,18 @@
 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,
-  renderProps = () => ({})
-}) {
-  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, { ...renderProps?.({
+  renderProps
+} = {}) {
+  return request => {
+    return renderToResponse( /*#__PURE__*/jsx(App, { ...renderProps?.({
         request
       })
-    }), {
-      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
+    }), request, {
+      assets
     });
   };
 }
@@ -75,5 +27,60 @@ function createServerRenderingHttpHandler(App, {
   }));
   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/server/http-handler.esnext

@@ -1,66 +1,18 @@
 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,
-  renderProps = () => ({})
-}) {
-  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, { ...renderProps?.({
+  renderProps
+} = {}) {
+  return request => {
+    return renderToResponse( /*#__PURE__*/jsx(App, { ...renderProps?.({
         request
       })
-    }), {
-      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
+    }), request, {
+      assets
     });
   };
 }
@@ -75,5 +27,60 @@ function createServerRenderingHttpHandler(App, {
   }));
   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';