@remix-run/ui 0.7.0 → 0.9.0

package/src/runtime/scheduler.ts

@@ -35,13 +35,21 @@ export interface Scheduler {
   dequeue(): void
 }
 
-// Protect against infinite cascading updates (e.g. handle.update() during render)
-const MAX_CASCADING_UPDATES = 50
+const CASCADING_UPDATE_WARN_THRESHOLD = 50
+const MAX_CASCADING_COMPONENT_UPDATES = 50
 
 export type SchedulerPhaseEvent = Event & {
   parents: ParentNode[]
 }
 
+function getComponentName(vnode: CommittedComponentNode): string {
+  return vnode.type.name || 'Anonymous'
+}
+
+function formatComponentCounts(counts: Map<string, number>): string {
+  return Array.from(counts, ([name, count]) => `${name} x${count}`).join(', ')
+}
+
 /**
  * Creates the DOM update scheduler used by the component runtime.
  *
@@ -62,7 +70,10 @@ export function createScheduler(
   let postCommitTasks: EmptyFn[] = []
   let flushScheduled = false
   let flushing = false
-  let cascadingUpdateCount = 0
+  let cascadingComponentUpdateCount = 0
+  let cascadingComponentUpdateCounts = new WeakMap<CommittedComponentNode, number>()
+  let cascadingComponentNameCounts = new Map<string, number>()
+  let warnedAboutCascadingUpdates = false
   let resetScheduled = false
   let phaseEvents = new EventTarget()
   let phaseListenerCounts: Record<SchedulerPhaseType, number> = {
@@ -82,11 +93,48 @@ export function createScheduler(
     // Reset when control returns to the event loop while still allowing
     // microtask-driven flushes in the same turn to count as cascading.
     setTimeout(() => {
-      cascadingUpdateCount = 0
+      cascadingComponentUpdateCount = 0
+      cascadingComponentUpdateCounts = new WeakMap()
+      cascadingComponentNameCounts = new Map()
+      warnedAboutCascadingUpdates = false
       resetScheduled = false
     }, 0)
   }
 
+  function trackCascadingUpdate(vnode: CommittedComponentNode): boolean {
+    cascadingComponentUpdateCount++
+
+    let componentName = getComponentName(vnode)
+    cascadingComponentNameCounts.set(
+      componentName,
+      (cascadingComponentNameCounts.get(componentName) ?? 0) + 1,
+    )
+
+    let componentUpdateCount = (cascadingComponentUpdateCounts.get(vnode) ?? 0) + 1
+    cascadingComponentUpdateCounts.set(vnode, componentUpdateCount)
+    scheduleCounterReset()
+
+    if (
+      !warnedAboutCascadingUpdates &&
+      cascadingComponentUpdateCount >= CASCADING_UPDATE_WARN_THRESHOLD
+    ) {
+      warnedAboutCascadingUpdates = true
+      console.warn(
+        `${cascadingComponentUpdateCount} cascading component updates detected in one event loop turn. Consider reducing hydration regions. Components: ${formatComponentCounts(cascadingComponentNameCounts)}`,
+      )
+    }
+
+    if (componentUpdateCount > MAX_CASCADING_COMPONENT_UPDATES) {
+      let error = new Error(
+        `handle.update() infinite loop detected in ${componentName} after ${componentUpdateCount} cascading updates. Components: ${formatComponentCounts(cascadingComponentNameCounts)}`,
+      )
+      dispatchError(error)
+      return false
+    }
+
+    return true
+  }
+
   function flush() {
     if (flushing) return
     flushing = true
@@ -104,15 +152,6 @@ export function createScheduler(
           postCommitTasks.length > 0
         if (!hasWork) return
 
-        cascadingUpdateCount++
-        scheduleCounterReset()
-
-        if (cascadingUpdateCount > MAX_CASCADING_UPDATES) {
-          let error = new Error('handle.update() infinite loop detected')
-          dispatchError(error)
-          return
-        }
-
         documentState.capture()
 
         let updateParents = batch.size > 0 ? Array.from(new Set(batch.values())) : []
@@ -125,6 +164,7 @@ export function createScheduler(
 
           for (let [vnode, domParent] of vnodes) {
             if (ancestorIsScheduled(vnode, batch, noScheduledAncestor)) continue
+            if (!trackCascadingUpdate(vnode)) return
             let curr = vnode._content
             // Calculate anchor at render time from current vdom position (never stale).
             // Needed for fragment self-updates that add children - without this, new children

package/src/runtime/spa-response.ts

@@ -0,0 +1,56 @@
+import type { RemixNode } from './jsx.ts'
+
+type SPAResponseData = {
+  node: RemixNode
+  redirectedTo?: string
+}
+
+let spaResponses: WeakMap<Response, SPAResponseData> | undefined
+
+/**
+ * Creates and finalizes responses carrying renderable Remix nodes for the SPA runtime.
+ */
+export const spaResponse = {
+  /**
+   * Creates a bodyless response associated with a renderable Remix node.
+   *
+   * @param node Node to render when the response resolves a frame.
+   * @param init Standard response status, status text, and headers.
+   * @returns A response understood by the SPA runtime.
+   * @throws {TypeError} When called outside a browser environment.
+   */
+  create(node: RemixNode, init?: ResponseInit): Response {
+    if (typeof document === 'undefined') {
+      throw new TypeError('spaResponse.create() can only be used in a browser')
+    }
+
+    let response = new Response(null, init)
+    let responses = (spaResponses ??= new WeakMap())
+    responses.set(response, { node })
+    return response
+  },
+
+  /**
+   * Prepares the final route response for frame resolution.
+   *
+   * @param response Final response returned by the SPA router.
+   * @param redirectedTo Final redirect URL, when the route followed redirects.
+   * @returns The same response after validating it and recording its redirect URL.
+   * @throws {TypeError} When the response was not created by `spaResponse.create()`.
+   */
+  finalize(response: Response, redirectedTo?: string): Response {
+    let data = getSpaResponseData(response)
+    if (!data) throw new TypeError('Expected a Remix SPA response')
+
+    if (redirectedTo === undefined) {
+      delete data.redirectedTo
+    } else {
+      data.redirectedTo = redirectedTo
+    }
+    return response
+  },
+}
+
+export function getSpaResponseData(response: Response): SPAResponseData | undefined {
+  return spaResponses?.get(response)
+}

package/src/runtime/to-vnode.ts

@@ -5,7 +5,7 @@ import { isEmptyChild, isPrimitiveChild, isRemixNode, normalizeChildren } from '
 import type { RemixNode } from './jsx.ts'
 import type { ElementFunction } from './element-function.ts'
 import type { FrameProps } from './component.ts'
-import { isMixinDescriptor } from './mixins/mixin.ts'
+import { isMixinDescriptor } from './core/mix.ts'
 import {
   isRemixElement,
   NON_RENDER_NODE,

package/src/runtime/typed-event-target.ts

@@ -1,12 +1,7 @@
 /**
  * An `EventTarget` subclass with typed event maps.
  */
-export class TypedEventTarget<eventMap> extends EventTarget {
-  /**
-   * Phantom property that carries the event map type on instances.
-   */
-  declare readonly __eventMap?: eventMap
-}
+export class TypedEventTarget<eventMap> extends EventTarget {}
 
 /**
  * Interface surface for {@link TypedEventTarget} with typed listener overloads.

package/src/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