@quilted/quilt 0.8.5 → 0.8.7

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @quilted/quilt
 
+## 0.8.7
+
+### Patch Changes
+
+- [`58cd0f9`](https://github.com/lemonmade/quilt/commit/58cd0f93429b3a0a11353303756deb3d3f9c9903) Thanks [@lemonmade](https://github.com/lemonmade)! - Make browser elements render natively for HTML renders
+
+- Updated dependencies [[`479fa1f`](https://github.com/lemonmade/quilt/commit/479fa1f923c9e968a248f23c146be8255347533c), [`58cd0f9`](https://github.com/lemonmade/quilt/commit/58cd0f93429b3a0a11353303756deb3d3f9c9903)]:
+  - @quilted/preact-browser@0.1.11
+  - @quilted/preact-localize@0.3.4
+
+## 0.8.6
+
+### Patch Changes
+
+- [`d409c19`](https://github.com/lemonmade/quilt/commit/d409c1930834449160e90b6bedf0fe3f7325d4b0) Thanks [@lemonmade](https://github.com/lemonmade)! - Add more server rendering hooks
+
+- Updated dependencies [[`c365777`](https://github.com/lemonmade/quilt/commit/c365777123caf40d2e08aa405180ea9efbd34cac), [`d409c19`](https://github.com/lemonmade/quilt/commit/d409c1930834449160e90b6bedf0fe3f7325d4b0), [`5a8036d`](https://github.com/lemonmade/quilt/commit/5a8036d39d93c576812428ecc8fe537a30696dba)]:
+  - @quilted/async@0.4.22
+  - @quilted/preact-browser@0.1.10
+  - @quilted/graphql@3.3.8
+
 ## 0.8.5
 
 ### Patch Changes

package/build/esm/server/ServerContext.mjs

@@ -1,15 +1,20 @@
-import { BrowserDetailsContext } from '@quilted/preact-browser/server';
+import { BrowserDetailsContext, BrowserAssetsManifestContext } from '@quilted/preact-browser/server';
 import { jsx } from 'preact/jsx-runtime';
 
 function ServerContext({
   browser,
+  assets,
   children
 }) {
   const withBrowser = browser ? jsx(BrowserDetailsContext.Provider, {
     value: browser,
     children: children
   }) : children;
-  return withBrowser;
+  const withAssets = assets ? jsx(BrowserAssetsManifestContext.Provider, {
+    value: assets,
+    children: withBrowser
+  }) : withBrowser;
+  return withAssets;
 }
 
 export { ServerContext };

package/build/esm/server/request-router.mjs

@@ -1,20 +1,11 @@
 import { isValidElement } from 'preact';
 import { renderToStringAsync, renderToStaticMarkup } from 'preact-render-to-string';
 import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes } from '@quilted/assets';
-import { BrowserResponse, ScriptAsset, StyleAsset, StyleAssetPreload, ScriptAssetPreload } from '@quilted/preact-browser/server';
+import { BrowserResponse, BrowserEffectsAreActiveContext, Title, Link, Meta, Serialization, ScriptAsset, StyleAsset, StyleAssetPreload, ScriptAssetPreload } from '@quilted/preact-browser/server';
 import { EnhancedResponse, HTMLResponse } from '@quilted/request-router';
 import { ServerContext } from './ServerContext.mjs';
 import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 
-async function renderToStringWithServerContext(element, {
-  browser
-} = {}) {
-  const rendered = await renderToStringAsync(jsx(ServerContext, {
-    browser: browser,
-    children: element
-  }));
-  return rendered;
-}
 async function renderToResponse(optionsOrElement, definitelyOptions) {
   let element;
   let options;
@@ -45,9 +36,11 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
   if (shouldStream === false && element != null) {
     let rendered;
     try {
-      rendered = await renderToStringWithServerContext(element, {
-        browser: browserResponse
-      });
+      rendered = await renderToStringAsync(jsx(ServerContext, {
+        assets: assets,
+        browser: browserResponse,
+        children: element
+      }));
     } catch (error) {
       if (error instanceof Response) {
         const mergedHeaders = new Headers(browserResponse.headers);
@@ -84,9 +77,11 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
         // this, they will explicitly turn on streaming and will have to use some in-app
         // to manually handle redirects (e.g., by rendering a script tag that uses JavaScript
         // to redirect)
-        const rendered = await renderToStringWithServerContext(element, {
-          browser: browserResponse
-        });
+        const rendered = await renderToStringAsync(jsx(ServerContext, {
+          assets: assets,
+          browser: browserResponse,
+          children: element
+        }));
         appWriter.write(rendered);
       }
       appWriter.close();
@@ -131,43 +126,43 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
           browserResponse.headers.append('Link', preloadHeader(scriptAssetPreloadAttributes(script)));
         }
       }
-      const htmlContent = renderToStaticMarkup(jsxs("html", {
-        ...browserResponse.htmlAttributes.value,
-        children: [jsxs("head", {
-          children: [browserResponse.title.value && jsx("title", {
-            children: browserResponse.title.value
-          }), browserResponse.links.value.map(link => jsx("link", {
-            ...link
-          })), browserResponse.metas.value.map(meta => jsx("meta", {
-            ...meta
-          })), browserResponse.serializations.value.map(({
-            name,
-            content
-          }) =>
-          // @ts-expect-error a custom element that I don’t want to define,
-          // since it’s an optional part of the browser library.
-          jsx("browser-serialization", {
-            name: name,
-            content: JSON.stringify(content)
-          })), synchronousAssets?.scripts.map(script => jsx(ScriptAsset, {
-            asset: script,
-            baseURL: baseURL
-          }, script.source)), synchronousAssets?.styles.map(style => jsx(StyleAsset, {
-            asset: style,
-            baseURL: baseURL
-          }, style.source)), preloadAssets?.styles.map(style => jsx(StyleAssetPreload, {
-            asset: style,
-            baseURL: baseURL
-          }, style.source)), preloadAssets?.scripts.map(script => jsx(ScriptAssetPreload, {
-            asset: script,
-            baseURL: baseURL
-          }, script.source))]
-        }), jsx("body", {
-          ...browserResponse.bodyAttributes.value,
-          dangerouslySetInnerHTML: {
-            __html: '%%CONTENT%%'
-          }
-        })]
+      const htmlContent = renderToStaticMarkup(jsx(BrowserEffectsAreActiveContext.Provider, {
+        value: false,
+        children: jsxs("html", {
+          ...browserResponse.htmlAttributes.value,
+          children: [jsxs("head", {
+            children: [jsx(Title, {
+              children: browserResponse.title.value
+            }), browserResponse.links.value.map(link => jsx(Link, {
+              ...link
+            })), browserResponse.metas.value.map(meta => jsx(Meta, {
+              ...meta
+            })), browserResponse.serializations.value.map(({
+              name,
+              content
+            }) => jsx(Serialization, {
+              name: name,
+              content: content
+            })), synchronousAssets?.scripts.map(script => jsx(ScriptAsset, {
+              asset: script,
+              baseURL: baseURL
+            }, script.source)), synchronousAssets?.styles.map(style => jsx(StyleAsset, {
+              asset: style,
+              baseURL: baseURL
+            }, style.source)), preloadAssets?.styles.map(style => jsx(StyleAssetPreload, {
+              asset: style,
+              baseURL: baseURL
+            }, style.source)), preloadAssets?.scripts.map(script => jsx(ScriptAssetPreload, {
+              asset: script,
+              baseURL: baseURL
+            }, script.source))]
+          }), jsx("body", {
+            ...browserResponse.bodyAttributes.value,
+            dangerouslySetInnerHTML: {
+              __html: '%%CONTENT%%'
+            }
+          })]
+        })
       }));
       const [firstChunk, secondChunk] = htmlContent.split('%%CONTENT%%');
       writer.write(firstChunk);
@@ -253,4 +248,4 @@ function noop(..._args) {
   // noop
 }
 
-export { renderToResponse, renderToStringWithServerContext };
+export { renderToResponse };

package/build/esm/server.browser.mjs

@@ -5,5 +5,8 @@ export { parseAcceptLanguageHeader } from '@quilted/preact-localize';
 function noopRenderToString() {}
 function noopCreateRequestRouterLocalization() {}
 function noopRenderToResponse() {}
+function NoopServerContext() {
+  return null;
+}
 
-export { noopCreateRequestRouterLocalization as createRequestRouterLocalization, noopRenderToResponse as renderToResponse, noopRenderToString as renderToStaticMarkup, noopRenderToString as renderToString, noopRenderToString as renderToStringAsync };
+export { NoopServerContext as ServerContext, noopCreateRequestRouterLocalization as createRequestRouterLocalization, noopRenderToResponse as renderToResponse, noopRenderToString as renderToStaticMarkup, noopRenderToString as renderToString, noopRenderToString as renderToStringAsync };

package/build/esm/server.mjs

@@ -3,4 +3,5 @@ export * from '@quilted/preact-browser/server';
 export * from '@quilted/assets';
 export { parseAcceptLanguageHeader } from '@quilted/preact-localize';
 export { createRequestRouterLocalization } from '@quilted/preact-localize/request-router';
-export { renderToResponse, renderToStringWithServerContext } from './server/request-router.mjs';
+export { renderToResponse } from './server/request-router.mjs';
+export { ServerContext } from './server/ServerContext.mjs';

package/build/esnext/server/ServerContext.esnext

@@ -1,9 +1,14 @@
 import { jsx } from 'preact/jsx-runtime';
-import { BrowserDetailsContext } from '@quilted/preact-browser/server';
+import { BrowserDetailsContext, BrowserAssetsManifestContext } from '@quilted/preact-browser/server';
 
-function ServerContext({ browser, children }) {
+function ServerContext({
+  browser,
+  assets,
+  children
+}) {
   const withBrowser = browser ? /* @__PURE__ */ jsx(BrowserDetailsContext.Provider, { value: browser, children }) : children;
-  return withBrowser;
+  const withAssets = assets ? /* @__PURE__ */ jsx(BrowserAssetsManifestContext.Provider, { value: assets, children: withBrowser }) : withBrowser;
+  return withAssets;
 }
 
 export { ServerContext };

package/build/esnext/server/request-router.esnext

@@ -2,16 +2,10 @@ import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { isValidElement } from 'preact';
 import { renderToStringAsync, renderToStaticMarkup } from 'preact-render-to-string';
 import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes } from '@quilted/assets';
-import { BrowserResponse, ScriptAsset, StyleAsset, StyleAssetPreload, ScriptAssetPreload } from '@quilted/preact-browser/server';
+import { BrowserResponse, BrowserEffectsAreActiveContext, Title, Link, Meta, Serialization, ScriptAsset, StyleAsset, StyleAssetPreload, ScriptAssetPreload } from '@quilted/preact-browser/server';
 import { EnhancedResponse, HTMLResponse } from '@quilted/request-router';
 import { ServerContext } from './ServerContext.esnext';
 
-async function renderToStringWithServerContext(element, { browser } = {}) {
-  const rendered = await renderToStringAsync(
-    /* @__PURE__ */ jsx(ServerContext, { browser, children: element })
-  );
-  return rendered;
-}
 async function renderToResponse(optionsOrElement, definitelyOptions) {
   let element;
   let options;
@@ -42,9 +36,9 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
   if (shouldStream === false && element != null) {
     let rendered;
     try {
-      rendered = await renderToStringWithServerContext(element, {
-        browser: browserResponse
-      });
+      rendered = await renderToStringAsync(
+        /* @__PURE__ */ jsx(ServerContext, { assets, browser: browserResponse, children: element })
+      );
     } catch (error) {
       if (error instanceof Response) {
         const mergedHeaders = new Headers(browserResponse.headers);
@@ -75,9 +69,9 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
     const renderAppStream = async function renderAppStream2() {
       const appWriter = appTransformStream.writable.getWriter();
       if (element != null) {
-        const rendered = await renderToStringWithServerContext(element, {
-          browser: browserResponse
-        });
+        const rendered = await renderToStringAsync(
+          /* @__PURE__ */ jsx(ServerContext, { assets, browser: browserResponse, children: element })
+        );
         appWriter.write(rendered);
       }
       appWriter.close();
@@ -128,22 +122,12 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
         }
       }
       const htmlContent = renderToStaticMarkup(
-        /* @__PURE__ */ jsxs("html", { ...browserResponse.htmlAttributes.value, children: [
+        /* @__PURE__ */ jsx(BrowserEffectsAreActiveContext.Provider, { value: false, children: /* @__PURE__ */ jsxs("html", { ...browserResponse.htmlAttributes.value, children: [
           /* @__PURE__ */ jsxs("head", { children: [
-            browserResponse.title.value && /* @__PURE__ */ jsx("title", { children: browserResponse.title.value }),
-            browserResponse.links.value.map((link) => /* @__PURE__ */ jsx("link", { ...link })),
-            browserResponse.metas.value.map((meta) => /* @__PURE__ */ jsx("meta", { ...meta })),
-            browserResponse.serializations.value.map(({ name, content: content2 }) => (
-              // @ts-expect-error a custom element that I don’t want to define,
-              // since it’s an optional part of the browser library.
-              /* @__PURE__ */ jsx(
-                "browser-serialization",
-                {
-                  name,
-                  content: JSON.stringify(content2)
-                }
-              )
-            )),
+            /* @__PURE__ */ jsx(Title, { children: browserResponse.title.value }),
+            browserResponse.links.value.map((link) => /* @__PURE__ */ jsx(Link, { ...link })),
+            browserResponse.metas.value.map((meta) => /* @__PURE__ */ jsx(Meta, { ...meta })),
+            browserResponse.serializations.value.map(({ name, content: content2 }) => /* @__PURE__ */ jsx(Serialization, { name, content: content2 })),
             synchronousAssets?.scripts.map((script) => /* @__PURE__ */ jsx(
               ScriptAsset,
               {
@@ -152,7 +136,14 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
               },
               script.source
             )),
-            synchronousAssets?.styles.map((style) => /* @__PURE__ */ jsx(StyleAsset, { asset: style, baseURL }, style.source)),
+            synchronousAssets?.styles.map((style) => /* @__PURE__ */ jsx(
+              StyleAsset,
+              {
+                asset: style,
+                baseURL
+              },
+              style.source
+            )),
             preloadAssets?.styles.map((style) => /* @__PURE__ */ jsx(
               StyleAssetPreload,
               {
@@ -177,7 +168,7 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
               dangerouslySetInnerHTML: { __html: "%%CONTENT%%" }
             }
           )
-        ] })
+        ] }) })
       );
       const [firstChunk, secondChunk] = htmlContent.split("%%CONTENT%%");
       writer.write(firstChunk);
@@ -276,4 +267,4 @@ function diffBrowserAssetsEntries(newList, oldList) {
 function noop(..._args) {
 }
 
-export { renderToResponse, renderToStringWithServerContext };
+export { renderToResponse };

package/build/esnext/server.browser.esnext

@@ -8,5 +8,8 @@ function noopCreateRequestRouterLocalization() {
 }
 function noopRenderToResponse() {
 }
+function NoopServerContext() {
+  return null;
+}
 
-export { noopCreateRequestRouterLocalization as createRequestRouterLocalization, noopRenderToResponse as renderToResponse, noopRenderToString as renderToStaticMarkup, noopRenderToString as renderToString, noopRenderToString as renderToStringAsync };
+export { NoopServerContext as ServerContext, noopCreateRequestRouterLocalization as createRequestRouterLocalization, noopRenderToResponse as renderToResponse, noopRenderToString as renderToStaticMarkup, noopRenderToString as renderToString, noopRenderToString as renderToStringAsync };

package/build/esnext/server.esnext

@@ -3,4 +3,5 @@ export * from '@quilted/preact-browser/server';
 export * from '@quilted/assets';
 export { parseAcceptLanguageHeader } from '@quilted/preact-localize';
 export { createRequestRouterLocalization } from '@quilted/preact-localize/request-router';
-export { renderToResponse, renderToStringWithServerContext } from './server/request-router.esnext';
+export { renderToResponse } from './server/request-router.esnext';
+export { ServerContext } from './server/ServerContext.esnext';