@remix-run/cli 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/cli",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Command-line interface for Remix",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -33,13 +33,13 @@
   "dependencies": {
     "jsonc-parser": "^3.3.1",
     "semver": "^7.7.4",
-    "@remix-run/data-table": "^0.5.0",
-    "@remix-run/data-table-postgres": "^0.5.1",
-    "@remix-run/data-table-mysql": "^0.5.1",
-    "@remix-run/data-table-sqlite": "^0.6.1",
-    "@remix-run/assets": "^0.6.0",
-    "@remix-run/test": "^0.6.0",
-    "@remix-run/terminal": "^0.1.1"
+    "@remix-run/assets": "^0.7.0",
+    "@remix-run/data-table": "^0.5.1",
+    "@remix-run/data-table-postgres": "^0.5.2",
+    "@remix-run/data-table-mysql": "^0.5.2",
+    "@remix-run/data-table-sqlite": "^0.6.2",
+    "@remix-run/terminal": "^0.1.1",
+    "@remix-run/test": "^0.6.0"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",

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

@@ -5,7 +5,7 @@
 How to serve browser scripts and styles from source. Read this when the task involves:
 
 - Configuring `createAssetServer` (`basePath`, `mounts`, `allowFiles`, `allowPackages`, `denyFiles`, fingerprinting, compiler options)
-- Choosing between `staticFiles()` for already-built files and `createAssetServer()` for source assets that need import rewriting, preloads, or fingerprinted URLs
+- Choosing between `staticFiles()` for already-built files and `createAssetServer()` for source assets that need dependency resolution, preloads, or fingerprinted URLs
 - Generating script URLs or `<link rel="modulepreload">` tags for a client entry
 - Enabling browser HMR for source-served modules
 - Keeping files such as tests out of the browser via `denyFiles` rules
@@ -16,7 +16,7 @@ For routing the URL namespace itself, see `routing-and-controllers.md`. For clie
 
 Use `remix/assets` when the app serves browser JavaScript, TypeScript, or CSS from source files. This is the right tool for client entrypoints, browser-only helpers, styles, and monorepo code that should be compiled and served under a public URL namespace.
 
-Use `staticFiles()` for files that already exist on disk exactly as they should be served. Use `createAssetServer()` for source scripts or styles that need rewriting, dependency scanning, preloads, sourcemaps, or fingerprinted URLs.
+Use `staticFiles()` for files that already exist on disk exactly as they should be served. Use `createAssetServer()` for source scripts or styles that need compilation, dependency scanning, preloads, sourcemaps, or fingerprinted URLs.
 
 ## Default Pattern
 
@@ -71,16 +71,17 @@ export default createController(routes, {
 
 ## Rendering HTML
 
-Use `getHref()` when you need the public URL for one module, and `getPreloads()` when you want `<link rel="modulepreload">` tags or `Link` headers for one or more entrypoints and their dependencies.
+Use `getScriptEntry()` when rendering a browser script entry. Scripts keep JavaScript imports as authored, so a rendered script entry needs its public URL, modulepreload hints, and an import map.
 
 ```typescript
-let entryHref = await assets.getHref('app/actions/public/entry.ts')
-let entryPreloads = await assets.getPreloads('app/actions/public/entry.ts')
+let { href, importMap, preloads } = await assets.getScriptEntry('app/actions/public/entry.ts')
 ```
 
-Use this when rendering documents or layouts that boot browser behavior with a known client entry.
+Render `importMap` with `ImportMap` from `remix/ui/server` before the modulepreload links and module script. This combines its mappings with import maps from blocking client entries.
 
-For normal Remix applications, pass the asset server to `render({ assets })` from `remix/middleware/render`. The middleware resolves source entry IDs from `clientEntry(import.meta.url, ...)` with `getHref()` and `getPreloads()` and applies the UI renderer's explicit-hash or named-component export rules. Use a custom `resolveClientEntry` callback only when building a custom rendering pipeline.
+Use `getHref()` directly when you need the public URL for a non-script asset, and `getPreloads()` when you need lower-level preload control for one or more entrypoints.
+
+For normal Remix applications, pass the asset server to `render({ assets })` from `remix/middleware/render`. The middleware resolves source entry IDs from `clientEntry(import.meta.url, ...)` with `getScriptEntry()`, includes their import maps, and applies the UI renderer's explicit-hash or named-component export rules. Use a custom `resolveClientEntry` callback only when building a custom rendering pipeline.
 
 ## Development vs Deployment
 
@@ -91,12 +92,15 @@ In development:
 - Enable source maps when debugging browser code
 - Use `hmr` only when the app is running under `remix/node-hmr`
 - Use `scripts.loaders` for development-only browser transforms such as `uiHmr()`
+- Configure `hmr.moduleImporter` with `remix/multiple-import-maps-polyfill` when HMR must support browsers without native support for multiple import maps. HMR appends updated mappings in additional `<script type="importmap">` elements
 
 In deployment:
 
 - Set `watch: false`
-- Use `fingerprint: { buildId }` for long-lived immutable caching
-- Make sure `buildId` changes for each deploy
+- Use `fingerprint: true` for content-based fingerprints and long-lived immutable caching
+- Render the script import map before modulepreload links and module scripts
+- Keep bare-import resolution uniform for files in the same directory; different directories may use
+  different resolutions through more-specific import map scopes
 
 Fingerprinting assumes files on disk are stable and requires `watch: false`.
 
@@ -117,7 +121,10 @@ const assetServer = createAssetServer({
   denyFiles: ['app/**/*.test.*'],
   watch: isDevelopment,
   hmr: isHmr
-    ? async () => (await import('remix/node-hmr/runtime')).createBrowserHmrChannel()
+    ? {
+        channel: async () => (await import('remix/node-hmr/runtime')).createBrowserHmrChannel(),
+        moduleImporter: 'remix/multiple-import-maps-polyfill',
+      }
     : undefined,
   scripts: {
     loaders: isHmr ? [uiHmr()] : undefined,

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

@@ -88,6 +88,42 @@ The resolved `preloads` array contains browser module hrefs. During server rende
 
 Use `run` to start the client runtime. It scans the document for client entry markers, loads modules, and hydrates each one:
 
+Client entries introduced by later frame responses may depend on import map entries that were not in the initial document. Browsers without native support for multiple import maps cannot resolve those modules with `import()`. Apps that use asset server import maps and target these browsers can opt into `remix/multiple-import-maps-polyfill`:
+
+```tsx
+import {
+  detectMultipleImportMapSupport,
+  importModule,
+  preloadShim,
+} from 'remix/multiple-import-maps-polyfill'
+import { run } from 'remix/ui'
+
+const app = run({
+  async loadModule(moduleUrl, exportName) {
+    let mod = await importModule(moduleUrl)
+    let Component = mod[exportName]
+    if (typeof Component !== 'function') {
+      throw new Error(`Unknown component: ${moduleUrl}#${exportName}`)
+    }
+    return Component
+  },
+  async processClientEntryPreloads(preloads) {
+    if (await detectMultipleImportMapSupport()) return preloads
+
+    preloadShim(preloads)
+    return []
+  },
+})
+
+app.addEventListener('error', (event) => {
+  console.error('Component error:', event.error)
+})
+
+await app.ready()
+```
+
+The support check keeps native imports and modulepreload links in browsers that support multiple import maps. Other browsers use the polyfill for late client entries and their preloads. Apps that do not need this compatibility can use `import()` directly in `loadModule` and omit `processClientEntryPreloads`.
+
 ```tsx
 import { run } from 'remix/ui'
 

package/template/.agents/skills/remix/references/middleware-and-server.md

@@ -69,7 +69,7 @@ let router = createRouter({ middleware })
 ### Static files vs browser modules
 
 - Use `staticFiles()` for files that should be served directly from disk, such as images, fonts, or already-built assets in the root `public/` directory
-- Use `remix/assets` when browser modules should be compiled and served from source files with import rewriting, preloads, or fingerprinted URLs
+- Use `remix/assets` when browser modules should be compiled and served from source files with dependency resolution, preloads, or fingerprinted URLs
 - `public/` directories inside `app/` hold browser-reachable source for the asset server
 
 ### Ordering notes

package/template/app/actions/document.tsx

@@ -1,7 +1,8 @@
 import type { Handle, RemixNode } from 'remix/ui'
 import { css } from 'remix/ui'
+import { ImportMap } from 'remix/ui/server'
 
-import { entryHref, entryPreloads } from '../assets.ts'
+import { scriptEntry } from '../assets.ts'
 
 export interface DocumentProps {
   children?: RemixNode
@@ -14,6 +15,7 @@ const DEFAULT_TITLE = readAppDisplayName('%%RMX_APP_DISPLAY_NAME_URI_COMPONENT%%
 export function Document(handle: Handle<DocumentProps>) {
   return () => {
     let { children, head, title = DEFAULT_TITLE } = handle.props
+    let { href, importMap, preloads } = scriptEntry
 
     return (
       <html lang="en">
@@ -24,10 +26,11 @@ export function Document(handle: Handle<DocumentProps>) {
           <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
           <title>{title}</title>
           {head}
-          {entryPreloads.map((href) => (
-            <link key={href} rel="modulepreload" href={href} />
+          <ImportMap value={importMap} />
+          {preloads.map((preloadHref) => (
+            <link key={preloadHref} rel="modulepreload" href={preloadHref} />
           ))}
-          <script type="module" src={entryHref}></script>
+          <script type="module" src={href}></script>
         </head>
         <body mix={css({ margin: 0 })}>{children}</body>
       </html>

package/template/app/actions/public/entry.ts

@@ -1,23 +1,24 @@
+import {
+  detectMultipleImportMapSupport,
+  importModule,
+  preloadShim,
+} from 'remix/multiple-import-maps-polyfill'
 import { run } from 'remix/ui'
 
 const app = run({
   async loadModule(moduleUrl, exportName) {
-    let mod = await import(moduleUrl)
-    return mod[exportName]
-  },
-  async resolveFrame(src, options) {
-    let response = await fetch(src, {
-      headers: { Accept: 'text/html' },
-      method: options?.method,
-      body: getRequestBody(options?.formData, options?.method, options?.encType),
-      signal: options?.signal,
-    })
-    if (!response.ok) {
-      return `<pre>Frame error: ${response.status} ${response.statusText}</pre>`
+    let mod = await importModule(moduleUrl)
+    let Component = mod[exportName]
+    if (typeof Component !== 'function') {
+      throw new Error(`Unknown component: ${moduleUrl}#${exportName}`)
     }
+    return Component
+  },
+  async processClientEntryPreloads(preloads) {
+    if (await detectMultipleImportMapSupport()) return preloads
 
-    if (response.body) return response.body
-    return await response.text()
+    preloadShim(preloads)
+    return []
   },
 })
 
@@ -31,18 +32,3 @@ if (import.meta.hot) {
     }
   })
 }
-
-function getRequestBody(
-  formData?: FormData,
-  method?: string,
-  encType?: string,
-): BodyInit | undefined {
-  if (!formData || method?.toLowerCase() === 'get') return
-  if (encType !== 'application/x-www-form-urlencoded') return formData
-
-  let body = new URLSearchParams()
-  for (let [name, value] of formData) {
-    body.append(name, typeof value === 'string' ? value : value.name)
-  }
-  return body
-}

package/template/app/assets.ts

@@ -17,12 +17,14 @@ export const assets = createAssetServer({
   minify: !isDevelopment,
   watch: isDevelopment,
   hmr: isHmr
-    ? async () => (await import('remix/node-hmr/runtime')).createBrowserHmrChannel()
+    ? {
+        channel: async () => (await import('remix/node-hmr/runtime')).createBrowserHmrChannel(),
+        moduleImporter: 'remix/multiple-import-maps-polyfill',
+      }
     : undefined,
   scripts: { loaders: isHmr ? [uiHmr()] : undefined },
 })
 
 const entry = 'app/actions/public/entry.ts'
 
-export const entryHref = await assets.getHref(entry)
-export const entryPreloads = await assets.getPreloads(entry)
+export const scriptEntry = await assets.getScriptEntry(entry)