Add preloads to default HTML

lemonmade · Oct 20, 2024 · 5619e19 · 5619e19
1 parent eb2b1f8
commit 5619e19
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/packages/preact-browser/source/server.ts b/packages/preact-browser/source/server.ts
@@ -72,6 +72,7 @@ export {
   HTMLPlaceholderContent,
   HTMLPlaceholderAsyncAssets,
   HTMLPlaceholderEntryAssets,
+  HTMLPlaceholderPreloadAssets,
   HTMLPlaceholderSerializations,
 } from './server/components/HTMLPlaceholder.tsx';
 export {ResponseStreamBoundary} from './server/components/ResponseStreamBoundary.tsx';

diff --git a/packages/preact-browser/source/server/components/HTML.tsx b/packages/preact-browser/source/server/components/HTML.tsx
@@ -6,6 +6,7 @@ import {
   HTMLPlaceholderContent,
   HTMLPlaceholderAsyncAssets,
   HTMLPlaceholderEntryAssets,
+  HTMLPlaceholderPreloadAssets,
   HTMLPlaceholderSerializations,
 } from './HTMLPlaceholder.tsx';
 
@@ -89,6 +90,7 @@ export function HTMLBody({
       </div>
 
       <HTMLPlaceholderAsyncAssets />
+      <HTMLPlaceholderPreloadAssets />
     </>
   );
 

diff --git a/packages/preact-browser/source/server/components/HTMLPlaceholder.tsx b/packages/preact-browser/source/server/components/HTMLPlaceholder.tsx
@@ -17,3 +17,8 @@ export function HTMLPlaceholderAsyncAssets() {
   // @ts-expect-error Just used as a placeholder
   return <browser-response-placeholder-async-assets />;
 }
+
+export function HTMLPlaceholderPreloadAssets() {
+  // @ts-expect-error Just used as a placeholder
+  return <browser-response-placeholder-preload-assets />;
+}
diff --git a/packages/preact-browser/source/server/render.tsx b/packages/preact-browser/source/server/render.tsx
@@ -18,7 +18,9 @@ import {
 import {HTML} from './components/HTML.tsx';
 import {Serialization} from './components/Serialization.tsx';
 import {ScriptAssets} from './components/ScriptAssets.tsx';
+import {ScriptAssetsPreload} from './components/ScriptAssetsPreload.tsx';
 import {StyleAssets} from './components/StyleAssets.tsx';
+import {StyleAssetsPreload} from './components/StyleAssetsPreload.tsx';
 
 export type RenderAppValue =
   | string
@@ -424,7 +426,27 @@ async function renderHTMLChunk(
 
           break;
         }
-        // Add more cases for other placeholder types if needed
+        case 'preload-assets': {
+          if (assets == null) {
+            throw new Error(
+              `Found the preload-assets placeholder, but no assets were provided while rendering`,
+            );
+          }
+
+          const preloadAssets = assets.modules(
+            browser.assets.get({timing: 'preload'}),
+            {request: browser.request},
+          );
+
+          replacement = renderToString(
+            <>
+              <ScriptAssetsPreload scripts={preloadAssets.scripts} />
+              <StyleAssetsPreload styles={preloadAssets.styles} />
+            </>,
+          );
+
+          break;
+        }
         default: {
           throw new Error(
             `Unknown placeholder element: <browser-response-placeholder-${name}>`,

diff --git a/tests/e2e/integrations/htmx.test.ts b/tests/e2e/integrations/htmx.test.ts
@@ -85,7 +85,7 @@ describe('htmx', () => {
         import '@quilted/quilt/globals';
         import {parseHTMXRequestHeaders, HTMXResponse} from '@quilted/htmx';
         import {RequestRouter} from '@quilted/quilt/request-router';
-        import {renderToHTMLResponse, HTML, HTMLPlaceholderEntryAssets  } from '@quilted/quilt/server';
+        import {renderToHTMLResponse, HTML, HTMLPlaceholderEntryAssets} from '@quilted/quilt/server';
         import {BrowserAssets} from 'quilt:module/assets';
         
         const router = new RequestRouter();