@remix-run/render-middleware 0.2.0 → 0.3.0

package/README.md

@@ -6,7 +6,7 @@ Request-scoped response rendering for Remix. It provides the conventional Remix
 
 - **Remix UI rendering** - Stream nodes to HTML responses with `render()`
 - **Framework-owned frames** - Resolve nested and targeted `<Frame>` requests through the current router
-- **Client entry assets** - Resolve source-based `clientEntry()` modules and their preloads through an asset server
+- **Client entry assets** - Resolve source-based `clientEntry()` modules, import maps, and preloads through an asset server
 - **Typed context** - Preserve renderer input and response option types on `context.render`
 - **Custom renderers** - Install JSON, email, or other response pipelines with `renderWith()`
 
@@ -72,7 +72,7 @@ The middleware forwards request credentials and session headers to internal fram
 
 ### Options
 
-- **`assets`** - An asset server that resolves source-based client entry IDs to browser module URLs and preload URLs. Omit it when client entries already use public URLs or the app has no client entries.
+- **`assets`** - An asset server that resolves source-based client entry IDs to browser module URLs, import maps, and preload URLs. Omit it when client entries already use public URLs or the app has no client entries.
 - **`onError`** - A callback for server rendering errors. When omitted, the UI renderer uses its default error reporting.
 
 ## Custom renderers

package/dist/lib/render-ui.d.ts

@@ -5,8 +5,8 @@ import { type Renderer } from './render.ts';
 type RemixNode = Parameters<typeof renderToStream>[0];
 /** Options for the standard Remix UI renderer. */
 export interface RenderOptions {
-    /** Asset server used to turn source-based client entry IDs into browser module and preload URLs. */
-    assets?: Pick<AssetServer, 'getHref' | 'getPreloads'>;
+    /** Asset server used to turn source-based client entry IDs into browser module metadata. */
+    assets?: Pick<AssetServer, 'getScriptEntry'>;
     /** Error hook invoked when server rendering fails. */
     onError?: (error: unknown) => void;
 }

package/dist/lib/render-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-ui.d.ts","sourceRoot":"","sources":["../../src/lib/render-ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,yBAAyB,CAAA;AAEzE,OAAO,EAAE,cAAc,EAA4B,MAAM,sBAAsB,CAAA;AAE/E,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGvD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAqCrD,kDAAkD;AAClD,MAAM,WAAW,aAAa;IAC5B,oGAAoG;IACpG,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,aAAa,CAAC,CAAA;IACrD,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED,mDAAmD;AACnD,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,YAAY,KAAK,QAAQ,CAAA;AAE/E;;;;;GAKG;AACH,wBAAgB,MAAM,CACpB,OAAO,GAAE,aAAkB,GAC1B,UAAU,CAAC;IAAE,GAAG,EAAE,OAAO,QAAQ,CAAC;IAAC,KAAK,EAAE,cAAc,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,CAqBjF"}
+{"version":3,"file":"render-ui.d.ts","sourceRoot":"","sources":["../../src/lib/render-ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,yBAAyB,CAAA;AAEzE,OAAO,EAAE,cAAc,EAAgD,MAAM,sBAAsB,CAAA;AAEnG,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGvD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAqCrD,kDAAkD;AAClD,MAAM,WAAW,aAAa;IAC5B,4FAA4F;IAC5F,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAC5C,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED,mDAAmD;AACnD,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,YAAY,KAAK,QAAQ,CAAA;AAE/E;;;;;GAKG;AACH,wBAAgB,MAAM,CACpB,OAAO,GAAE,aAAkB,GAC1B,UAAU,CAAC;IAAE,GAAG,EAAE,OAAO,QAAQ,CAAC;IAAC,KAAK,EAAE,cAAc,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,CAqBjF"}

package/dist/lib/render-ui.js

@@ -146,11 +146,8 @@ async function resolveClientEntry(assets, entryId, component) {
         }
         if (!exportName)
             throw createMissingExportNameError(entryId, true);
-        let [href, preloads] = await Promise.all([
-            assets.getHref(sourceId),
-            assets.getPreloads(sourceId),
-        ]);
-        return { href, exportName, preloads };
+        let { href, importMap, preloads } = await assets.getScriptEntry(sourceId);
+        return { href, importMap, exportName, preloads };
     }
     if (!exportName)
         throw createMissingExportNameError(entryId, assets != null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/render-middleware",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Conventional Remix UI and custom request-scoped render middleware",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -28,15 +28,15 @@
   "devDependencies": {
     "@types/node": "^24.6.0",
     "typescript": "^7.0.2",
-    "@remix-run/fetch-router": "0.21.0",
     "@remix-run/assert": "0.3.0",
-    "@remix-run/test": "0.6.0"
+    "@remix-run/test": "0.6.0",
+    "@remix-run/fetch-router": "0.22.0"
   },
   "dependencies": {
-    "@remix-run/assets": "^0.6.0",
-    "@remix-run/ui": "^0.8.0",
+    "@remix-run/assets": "^0.7.0",
     "@remix-run/response": "^0.3.8",
-    "@remix-run/fetch-router": "^0.21.0"
+    "@remix-run/fetch-router": "^0.22.0",
+    "@remix-run/ui": "^0.9.0"
   },
   "keywords": [
     "fetch",

package/src/lib/render-ui.ts

@@ -1,7 +1,7 @@
 import type { AssetServer } from '@remix-run/assets'
 import type { Middleware, RequestContext } from '@remix-run/fetch-router'
 import { createHtmlResponse } from '@remix-run/response/html'
-import { renderToStream, type ResolveFrameContext } from '@remix-run/ui/server'
+import { renderToStream, type ImportMapData, type ResolveFrameContext } from '@remix-run/ui/server'
 
 import { renderWith, type Renderer } from './render.ts'
 
@@ -45,8 +45,8 @@ const CROSS_ORIGIN_FRAME_HEADERS = [
 
 /** Options for the standard Remix UI renderer. */
 export interface RenderOptions {
-  /** Asset server used to turn source-based client entry IDs into browser module and preload URLs. */
-  assets?: Pick<AssetServer, 'getHref' | 'getPreloads'>
+  /** Asset server used to turn source-based client entry IDs into browser module metadata. */
+  assets?: Pick<AssetServer, 'getScriptEntry'>
   /** Error hook invoked when server rendering fails. */
   onError?: (error: unknown) => void
 }
@@ -191,10 +191,10 @@ function createCrossOriginFrameHeaders(headers: Headers): Headers {
 }
 
 async function resolveClientEntry(
-  assets: Pick<AssetServer, 'getHref' | 'getPreloads'> | undefined,
+  assets: Pick<AssetServer, 'getScriptEntry'> | undefined,
   entryId: string,
   component: { readonly name: string },
-): Promise<{ href: string; exportName: string; preloads?: string[] }> {
+): Promise<{ href: string; importMap?: ImportMapData; exportName: string; preloads?: string[] }> {
   let hashIndex = entryId.lastIndexOf('#')
   let sourceId = hashIndex === -1 ? entryId : entryId.slice(0, hashIndex)
   let explicitExportName = hashIndex === -1 ? '' : entryId.slice(hashIndex + 1)
@@ -208,12 +208,9 @@ async function resolveClientEntry(
     }
     if (!exportName) throw createMissingExportNameError(entryId, true)
 
-    let [href, preloads] = await Promise.all([
-      assets.getHref(sourceId),
-      assets.getPreloads(sourceId),
-    ])
+    let { href, importMap, preloads } = await assets.getScriptEntry(sourceId)
 
-    return { href, exportName, preloads }
+    return { href, importMap, exportName, preloads }
   }
 
   if (!exportName) throw createMissingExportNameError(entryId, assets != null)