@remix-run/cli 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/cli",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Command-line interface for Remix",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -34,10 +34,10 @@
     "jsonc-parser": "^3.3.1",
     "semver": "^7.7.4",
     "@remix-run/data-table": "^0.4.0",
-    "@remix-run/data-table-mysql": "^0.5.0",
+    "@remix-run/data-table-postgres": "^0.5.0",
     "@remix-run/data-table-sqlite": "^0.6.0",
+    "@remix-run/data-table-mysql": "^0.5.0",
     "@remix-run/terminal": "^0.1.1",
-    "@remix-run/data-table-postgres": "^0.5.0",
     "@remix-run/test": "^0.6.0"
   },
   "devDependencies": {

package/template/.agents/skills/remix/references/assets-and-browser-modules.md

@@ -84,7 +84,7 @@ let entryPreloads = await assetServer.getPreloads('app/actions/public/entry.ts')
 
 Use this when rendering documents or layouts that boot browser behavior with a known client entry.
 
-When resolving hydrated client entries during server rendering, pass the source entry ID from `clientEntry(import.meta.url, ...)` to `getHref()` inside `resolveClientEntry`. Keep export-name resolution in that render helper, and avoid hard-coding public asset URLs in source-owned component modules.
+When resolving hydrated client entries during server rendering, pass the source entry ID from `clientEntry(import.meta.url, ...)` to `getHref()` and `getPreloads()` inside `resolveClientEntry`. Return those preload hrefs through the entry's `preloads` property so the browser can fetch the module graph without walking it serially. Keep this resolution in the shared render helper rather than hard-coding public asset URLs in source-owned component modules.
 
 ## Development vs Deployment
 

package/template/.agents/skills/remix/references/hydration-frames-navigation.md

@@ -76,9 +76,15 @@ let stream = renderToStream(<App />, {
       throw new Error(`Unable to resolve client entry export for ${entryId}`)
     }
 
+    let [href, preloads] = await Promise.all([
+      assetServer.getHref(entryId),
+      assetServer.getPreloads(entryId),
+    ])
+
     return {
-      href: await assetServer.getHref(entryId),
+      href,
       exportName,
+      preloads,
     }
   },
 })
@@ -90,6 +96,8 @@ On the server, `clientEntry` components render like any other component. The ser
 
 Client entry props must be serializable: strings, numbers, booleans, `null`, `undefined`, plain objects/arrays of the above, JSX elements, and `<Frame>` elements. Functions and class instances cannot be passed.
 
+The resolved `preloads` array contains browser module hrefs. During server rendering these are emitted as `<link rel="modulepreload">` tags, including preloads discovered in blocking frames. When a later frame response introduces a client entry, its preloads start before the entry module is loaded.
+
 ## Booting the Client
 
 Use `run` to start the client runtime. It scans the document for client entry markers, loads modules, and hydrates each one:

package/template/app/middleware/render.tsx

@@ -16,7 +16,7 @@ export function render() {
           frameSrc: request.url,
           signal: request.signal,
           resolveFrame: (src) => resolveFrame(router, request, src),
-          // Server rendering turns client entries into browser module URLs.
+          // Server rendering turns client entries into browser module URLs and preloads.
           async resolveClientEntry(entryId, component) {
             if (!entryId.startsWith('file://')) {
               throw new Error(
@@ -24,9 +24,15 @@ export function render() {
               )
             }
 
+            let [href, preloads] = await Promise.all([
+              assetServer.getHref(entryId),
+              assetServer.getPreloads(entryId),
+            ])
+
             return {
-              href: await assetServer.getHref(entryId),
+              href,
               exportName: entryId.split('#')[1] || component.name || titleCaseFileName(entryId),
+              preloads,
             }
           },
         })