Fix serializations

.changeset/tender-trees-retire.md

@@ -0,0 +1,8 @@
+---
+'@quilted/react-query': patch
+'@quilted/preact-browser': patch
+'@quilted/browser': patch
+'@quilted/quilt': patch
+---
+
+Fix serialization in edge cases where scripts load before DOMContentLoaded

integrations/react-query/source/ReactQueryContext.tsx

@@ -1,5 +1,4 @@
 import type {RenderableProps, ComponentType} from 'preact';
-import {Suspense} from 'preact/compat';
 import {
   dehydrate,
   QueryClient,
@@ -34,49 +33,16 @@ export function ReactQueryContext({
       <HydrationBoundary state={dehydratedState}>
         {children as any}
       </HydrationBoundary>
-
-      {/**
-       * This must run after any children that perform queries on the server. The
-       * `Serializer` component will wait until any pending queries are resolved,
-       * and once resolved, will add a serialization for the contents of the
-       * React Query client. We wrap this process in a Suspense boundary so that
-       * it just makes the server wait, but does not force any parent components to
-       * re-render once the suspense promise resolves.
-       */}
-      <Suspense fallback={null}>
-        <Serializer client={client} />
-      </Suspense>
+      {typeof document === 'undefined' && (
+        <Serialize
+          id={SERIALIZATION_ID}
+          value={() =>
+            dehydrate(client, {
+              shouldDehydrateQuery: () => true,
+            })
+          }
+        />
+      )}
     </QueryClientProvider>
   );
 }
-
-function Serializer({client}: {client: QueryClient}) {
-  if (typeof document === 'object') return null;
-
-  const promises: Promise<any>[] = [];
-
-  for (const query of client.getQueryCache().getAll()) {
-    const {state, options, meta} = query;
-
-    if (state.status === 'success' || state.status === 'error') continue;
-    if ((options as any).enabled === false) continue;
-    if (meta != null && meta.server === false) continue;
-
-    promises.push(query.fetch());
-  }
-
-  if (promises.length > 0) {
-    throw Promise.all(promises).then(() => {});
-  }
-
-  return (
-    <Serialize
-      id={SERIALIZATION_ID}
-      value={() =>
-        dehydrate(client, {
-          shouldDehydrateQuery: () => true,
-        })
-      }
-    />
-  );
-}

packages/browser/source/browser.ts

@@ -182,9 +182,9 @@ export class BrowserElementAttributes<Element extends HTMLElement> {
 export class BrowserSerializations {
   private readonly serializations = new Map<string, unknown>(
     Array.from(
-      document.querySelectorAll<HTMLMetaElement>(`meta[name^="serialized"]`),
+      document.querySelectorAll<HTMLMetaElement>(`meta[name^="serialized:"]`),
     ).map((node) => [
-      node.name.replace(/^serialized-/, ''),
+      node.name.replace(/^serialized:/, ''),
       getSerializedFromNode(node),
     ]),
   );

packages/browser/source/server.ts

@@ -131,7 +131,9 @@ export class BrowserResponseHeadElements<
   )[] = [];
 
   get value() {
-    return this.elements.map(resolveSignalOrValue);
+    return this.elements.map((element) =>
+      resolveSignalOrValue<Partial<HTMLElementTagNameMap[Element]>>(element),
+    );
   }
 
   constructor(readonly selector: Element) {}
@@ -160,6 +162,13 @@ export class BrowserResponseElementAttributes<Attributes> {
 }
 
 export class BrowserResponseSerializations {
+  get value() {
+    return [...this.serializations].map(([id, value]) => ({
+      id,
+      value: (typeof value === 'function' ? value() : value) as unknown,
+    }));
+  }
+
   constructor(private readonly serializations = new Map<string, unknown>()) {}
 
   get(id: string) {

packages/preact-browser/source/server.ts

@@ -29,6 +29,7 @@ export {
 } from './server/hooks/response-cookie.ts';
 export {useResponseStatus} from './server/hooks/response-status.ts';
 export {useSearchRobots} from './server/hooks/search-robots.ts';
+export {useResponseSerialization} from './server/hooks/serialized.ts';
 export {useStrictTransportSecurity} from './server/hooks/strict-transport-security.ts';
 export {useViewport} from './server/hooks/viewport.ts';
 

packages/preact-browser/source/server/components/Serialize.tsx

@@ -1,10 +1,13 @@
-export function Serialize<T>({id, value}: {id: string; value: T | (() => T)}) {
-  return (
-    <meta
-      name={`serialized-${id}`}
-      content={JSON.stringify(
-        typeof value === 'function' ? (value as any)() : value,
-      )}
-    />
-  );
+import {useResponseSerialization} from '../hooks/serialized.ts';
+
+export function Serialize<T = unknown>({
+  id,
+  value,
+}: {
+  id: string;
+  value: T | (() => T);
+}) {
+  if (typeof document === 'object') return null;
+  useResponseSerialization(id, value);
+  return null;
 }

packages/preact-browser/source/server/hooks/serialized.ts

@@ -0,0 +1,13 @@
+import {useBrowserResponseAction} from './browser-response-action.ts';
+
+/**
+ * Sets a serialization for the HTML response. This value can then be read using
+ * the `useSerialization` hook.
+ */
+export function useResponseSerialization(key: string, value: unknown) {
+  if (typeof document === 'object') return;
+
+  useBrowserResponseAction((response) => {
+    response.serializations.set(key, value);
+  });
+}

packages/quilt/source/server/request-router.tsx

@@ -1,4 +1,4 @@
-import {isValidElement, type VNode} from 'preact';
+import {isValidElement, type VNode, type JSX} from 'preact';
 import {
   renderToStaticMarkup,
   renderToStringAsync,
@@ -191,11 +191,14 @@ export async function renderToResponse(
             {browserResponse.title.value && (
               <title>{browserResponse.title.value}</title>
             )}
-            {browserResponse.links.value.map((link, index) => (
-              <link key={index} {...link} />
+            {browserResponse.links.value.map((link) => (
+              <link {...(link as JSX.HTMLAttributes<HTMLLinkElement>)} />
             ))}
-            {browserResponse.metas.value.map((meta, index) => (
-              <meta key={index} {...meta} />
+            {browserResponse.metas.value.map((meta) => (
+              <meta {...(meta as JSX.HTMLAttributes<HTMLMetaElement>)} />
+            ))}
+            {browserResponse.serializations.value.map(({id, value}) => (
+              <meta name={`serialized:${id}`} content={JSON.stringify(value)} />
             ))}
             {synchronousAssets?.scripts.map((script) => (
               <ScriptAsset