remix 3.0.0-beta.9 → 3.0.0-rc.2

package/src/ui/README.md

@@ -79,10 +79,9 @@ function Actions() {
 }
 ```
 
-## Frame Navigation
+## Client Entry Loading
 
-`run()` progressively enhances same-origin links and forms using a default `resolveFrame` that
-fetches the frame source:
+`run()` hydrates client entries by calling `loadModule` for each component module:
 
 ```tsx
 import { run } from 'remix/ui'
@@ -97,6 +96,47 @@ let app = run({
 await app.ready()
 ```
 
+Client entries introduced after the initial document may depend on import maps added at runtime.
+When targeting browsers without native support for multiple import maps, use
+`remix/multiple-import-maps-polyfill` to load these modules and process their preloads:
+
+```tsx
+import {
+  detectMultipleImportMapSupport,
+  importModule,
+  preloadShim,
+} from 'remix/multiple-import-maps-polyfill'
+
+let app = run({
+  async loadModule(moduleUrl, exportName) {
+    let module = await importModule(moduleUrl)
+    let Component = module[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 []
+  },
+})
+```
+
+## Frame Navigation
+
+The same runtime represents the current document as `app.frames.top` and intercepts eligible
+same-origin links and forms through the browser's Navigation API. Those navigations fetch HTML with
+the frame resolver and update the existing document in place instead of loading a new document.
+This soft-navigation behavior applies even when the page only uses `clientEntry()` and does not
+render an explicit `<Frame>`.
+
+Frame navigation requires both `window.navigation` and `NavigateEvent.sourceElement`. Browsers
+missing either capability use document navigation for links, forms, and `navigate()`. Hydration and
+explicit frame reloads still work.
+
 The default resolver is equivalent to:
 
 ```js
@@ -108,7 +148,8 @@ async function resolveFrame(src, options) {
     signal: options?.signal,
   })
 
-  if (!response.ok) {
+  let isHtml = response.headers.get('Content-Type')?.toLowerCase().includes('text/html')
+  if (response.status >= 500 || (response.status >= 300 && !isHtml)) {
     throw new Error(`Failed to resolve frame: ${response.status} ${response.statusText}`.trimEnd())
   }
 
@@ -149,13 +190,20 @@ CRLF-delimited text, and `multipart/form-data` submissions use `FormData`. Pass
 `resolveFrame` when the server requires additional headers, another body encoding, or a different
 response policy.
 
-Add `rmx-document` to a link or form to leave its navigation to the browser.
+Add `data-rmx-document` to a link or form to leave that navigation to the browser. To keep all links
+and forms as document navigations while still hydrating client entries and using explicit frames,
+register a listener before calling `run()`:
+
+```ts
+window.navigation?.addEventListener('navigate', (e) => e.stopImmediatePropagation())
+```
+
+This prevents Remix from intercepting Navigation API events. Explicit frame reloads such as
+`handle.frame.reload()` continue to use the frame resolver.
 
-The default resolver rejects non-OK responses with an error containing their status and status text.
-A custom `resolveFrame` may return a `Response` with any status when it wants Remix UI to render the
-response body.
+The default resolver accepts `2xx` responses and `3xx` or `4xx` responses whose `Content-Type` includes `text/html`, ignoring case. It rejects other `3xx` or `4xx` responses and all `5xx` responses with an error containing their status and status text. A custom `resolveFrame` may return a `Response` with any status when it wants Remix UI to render the response body.
 
-Forms remain ordinary HTML forms before the runtime starts. Add `rmx-target` to reload a named frame, or `rmx-document` to require a full-document submission:
+Forms remain ordinary HTML forms before the runtime starts. Add `data-rmx-target` to reload a named frame, or `data-rmx-document` to require a full-document submission:
 
 ```tsx
 import { Frame } from 'remix/ui'
@@ -164,7 +212,7 @@ function AccountPage() {
   return () => (
     <>
       <Frame name="account" src="/account/edit" />
-      <form action="/account/edit" method="post" rmx-target="account">
+      <form action="/account/edit" method="post" data-rmx-target="account">
         <label for="display-name">Display name</label>
         <input id="display-name" name="displayName" required />
         <button type="submit">Save</button>
@@ -176,19 +224,47 @@ function AccountPage() {
 
 Native constraint validation and submitter overrides still apply. GET form values arrive in `src`; non-GET forms provide `formData`, `method`, and `encType` to the resolver. See [Frames](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#form-navigation) for targeting, history behavior, request encoding, opt-outs, and server response guidance.
 
-Use `rmx-history="push|replace"` on an enhanced anchor or form to control how the navigation updates history. This can override the automatic replacement used for non-GET form submissions to the current URL.
+Use `data-rmx-history="push|replace"` on an enhanced anchor or form to control how the navigation updates history. This can override the automatic replacement used for non-GET form submissions to the current URL.
+
+## Single-page Applications
+
+Use `render` and `run` from `remix/spa` when every route runs in the browser and returns a Remix UI
+tree instead of an HTTP response body. The render middleware keeps the router's standard `Request`
+to `Response` contract while associating the response with a node for the top frame to render:
+
+```tsx
+import { createRouter } from 'remix/router'
+import { render, run } from 'remix/spa'
+
+let router = createRouter({ middleware: [render()] })
+
+router.get('/', ({ render }) => render(<h1>Home</h1>))
+router.get('/about', ({ render }) => render(<h1>About</h1>))
+
+function LoadingPage() {
+  return () => <p role="status">Loading…</p>
+}
+
+let app = run(router, { fallback: <LoadingPage /> })
+await app.ready()
+```
+
+The optional `fallback` is a live Remix node displayed while the initial route loads.
+`app.ready()` resolves after the initial URL has replaced it with the routed node. The runtime then
+reuses frame navigation for same-origin links, forms, history traversal, redirects, cancellation,
+and `rmx-target`.
 
 ## Preserving Client-Owned DOM
 
-Use `rmx-preserve-dom` on the smallest element whose live DOM should belong to client code after initial render, such as a custom element or third-party widget:
+Use `data-rmx-preserve-dom` on the smallest element whose live DOM should belong to client code after initial render, such as a custom element or third-party widget:
 
 ```tsx
-<pagefind-ui data-key="search" rmx-preserve-dom>
+<pagefind-ui data-rmx-key="search" data-rmx-preserve-dom>
   <button type="button">Search</button>
 </pagefind-ui>
 ```
 
-Remix UI still renders the element's children during SSR and still hydrates any initial client entries inside it. On later frame reloads, matched `rmx-preserve-dom` elements keep their current attributes and children instead of accepting incoming DOM updates. See [Preserving client-owned DOM](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#preserving-client-owned-dom) for guidance and caveats.
+Remix UI still renders the element's children during SSR and still hydrates any initial client entries inside it. On later frame reloads, matched `data-rmx-preserve-dom` elements keep their current attributes and children instead of accepting incoming DOM updates. See [Preserving client-owned DOM](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#preserving-client-owned-dom) for guidance and caveats.
 
 ## Cascade Layers
 

package/src/ui/server/README.md

@@ -33,12 +33,10 @@ let stream = renderToStream(<App />, {
     return fetchHtml(frameUrl)
   },
   async resolveClientEntry(entryId, component) {
-    let [href, preloads] = await Promise.all([
-      assetServer.getHref(entryId),
-      assetServer.getPreloads(entryId),
-    ])
+    let { href, importMap, preloads } = await assetServer.getScriptEntry(entryId)
     return {
       href,
+      importMap,
       exportName: entryId.split('#')[1] || component.name,
       preloads,
     }
@@ -59,7 +57,7 @@ return new Response(stream, {
 - **`topFrameSrc`** - Overrides the root frame URL used for `handle.frames.top.src`. This is mainly useful when calling `renderToStream()` from inside `resolveFrame()` for a nested frame render.
 - **`signal`** - Cancels pending server rendering work. Pass `request.signal` so client disconnects can stop unresolved frame work without invoking `onError` for the disconnect itself.
 - **`resolveFrame(src, target, context)`** - Called when a `<Frame>` needs its content. Return a string of HTML, a `ReadableStream<Uint8Array>`, or a promise of either. `context.currentFrameSrc` is the URL for the frame that contains the `<Frame>`, and `context.topFrameSrc` is the outer document URL. Required if your component tree contains `<Frame>` elements.
-- **`resolveClientEntry(entryId, component)`** - Resolves the public module URL, export name, and optional module preload hrefs for a hydrated client entry.
+- **`resolveClientEntry(entryId, component)`** - Resolves the public module URL, export name, optional import map, and optional module preload hrefs for a hydrated client entry.
 - **`onError(error)`** - Called when a rendering error occurs. If not provided, the stream rejects with the error.
 
 When you render nested frame responses with `renderToStream()` inside `resolveFrame()`, pass `frameSrc` for the frame being rendered and carry `topFrameSrc` forward from the parent context. That preserves `handle.frames.top.src` across the whole SSR frame tree.
@@ -97,6 +95,28 @@ function ProductPage() {
 
 Components using the `css(...)` mixin through `mix` have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
 
+### Import maps
+
+Use `<ImportMap>` when the document needs one initial import map containing both authored mappings and mappings from blocking client entries. The server merges these mappings into the component before sending the initial HTML.
+
+Regular `<script type="importmap">` elements remain supported. The server leaves them unchanged and emits any additional client entry mappings separately, omitting entries already present in authored maps.
+
+```tsx
+import type { Handle, RemixNode } from 'remix/ui'
+import { ImportMap } from 'remix/ui/server'
+
+function Document(handle: Handle<{ children: RemixNode }>) {
+  return () => (
+    <html>
+      <head>
+        <ImportMap value={scriptEntry.importMap} />
+      </head>
+      <body>{handle.props.children}</body>
+    </html>
+  )
+}
+```
+
 ## See Also
 
 - [Hydration](https://github.com/remix-run/remix/blob/main/packages/ui/docs/hydration.md) - Making server-rendered components interactive on the client

package/src/ui-hmr/README.md

@@ -35,12 +35,14 @@ let isDevelopment = process.env.NODE_ENV === 'development'
 
 let assetServer = createAssetServer({
   basePath: '/assets',
-  fileMap: { '/app/*path': 'app/*path' },
   allowFiles: ['app/routes.ts', 'app/**/public/**'],
   allowPackages: ['remix'],
   denyFiles: ['app/**/*.test.*'],
   hmr: isDevelopment
-    ? 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: isDevelopment ? [uiHmr()] : undefined,
@@ -49,6 +51,8 @@ let assetServer = createAssetServer({
 })
 ```
 
+HMR appends mappings for updated modules to the document in additional `<script type="importmap">` elements. The module importer allows browsers without native support for multiple import maps to load these updates.
+
 ## Direct Transforms
 
 Use the direct transform APIs when you are writing your own loader, Node module hooks, or build integration.

package/dist/static-files-middleware.d.ts

@@ -1,2 +0,0 @@
-export * from '@remix-run/static-files-middleware';
-//# sourceMappingURL=static-files-middleware.d.ts.map

package/dist/static-files-middleware.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"static-files-middleware.d.ts","sourceRoot":"","sources":["../src/static-files-middleware.ts"],"names":[],"mappings":"AACA,cAAc,oCAAoC,CAAA"}