@remix-run/ui 0.7.0 → 0.9.0

package/src/runtime/diff-dom.ts

@@ -28,7 +28,7 @@ type BoundarySiblingUnit = {
 
 type SiblingUnit = NodeSiblingUnit | BoundarySiblingUnit
 
-const REMIX_PRESERVE_DOM_ATTRIBUTE = 'rmx-preserve-dom'
+const REMIX_PRESERVE_DOM_ATTRIBUTE = 'data-rmx-preserve-dom'
 
 export function diffNodes(curr: Node[], next: Node[], context: FrameContext) {
   let parent = curr[0]?.parentNode ?? context.regionParent ?? null
@@ -80,14 +80,17 @@ function diffNode(current: Node, next: Node, context: FrameContext): ChildNode |
           if (nextMarkerData.status === 'resolved') {
             let nextEnd = findFrameEndMarker(next)
             let nextContent = collectFrameContentFragment(current.ownerDocument, next, nextEnd)
-            void frame.renderMarkerContent(
+            let render = frame.renderMarkerContent(
               { ...nextMarkerData, id: getFrameId(next) },
               nextContent,
               {
                 data: context.data,
                 signal: context.signal,
+                reconciliationTracker: context.reconciliationTracker,
               },
             )
+            if (context.reconciliationTracker) context.reconciliationTracker.waitFor(render)
+            else void render
             return nextEnd
           }
 
@@ -237,20 +240,15 @@ function isPopoverOpen(element: Element): boolean {
 }
 
 function diffElementChildren(current: Element, next: Element, context: FrameContext): void {
-  let currentChildren: Node[]
-
-  // Allow actively managed preload link tags in the head to stay in the document
-  // during diffing rather than removing them which aborts the preload in Safari
-  if (context.isActiveModulePreload && current === current.ownerDocument.head) {
-    currentChildren = []
-    for (let node of current.childNodes) {
-      if (!context.isActiveModulePreload(node)) currentChildren.push(node)
-    }
-  } else {
-    currentChildren = Array.from(current.childNodes)
+  let shouldPreserveHeadNode = context.shouldPreserveHeadNode
+  let preservedHeadNodes: ChildNode[] = []
+  let currentChildren = Array.from(current.childNodes)
+  if (current === current.ownerDocument.head && shouldPreserveHeadNode) {
+    preservedHeadNodes = currentChildren.filter(shouldPreserveHeadNode)
+    currentChildren = currentChildren.filter((node) => !shouldPreserveHeadNode(node))
   }
   let nextChildren = Array.from(next.childNodes)
-  diffSiblingUnits(currentChildren, nextChildren, current, null, context)
+  diffSiblingUnits(currentChildren, nextChildren, current, preservedHeadNodes[0] ?? null, context)
 }
 
 function diffSiblingUnits(
@@ -446,7 +444,7 @@ function parseSiblingUnits(nodes: Node[]): SiblingUnit[] {
 
 function getSiblingUnitKey(unit: SiblingUnit): string | undefined {
   if (unit.kind !== 'node' || !isElement(unit.node)) return
-  return unit.node.getAttribute('data-key') ?? undefined
+  return unit.node.getAttribute('data-rmx-key') ?? undefined
 }
 
 function siblingUnitsComparable(current: SiblingUnit, next: SiblingUnit): boolean {

package/src/runtime/document-reload.ts

@@ -0,0 +1,14 @@
+const documentReloadInfo = 'remix-document-reload'
+
+export function isDocumentReload(info: unknown): boolean {
+  return info === documentReloadInfo
+}
+
+export function reloadDocument(doc: Document, href = doc.location.href): void {
+  let navigation = doc.defaultView?.navigation
+  if (navigation) {
+    navigation.navigate(href, { history: 'replace', info: documentReloadInfo })
+  } else {
+    doc.location.replace(href)
+  }
+}

package/src/runtime/dom.ts

@@ -1561,10 +1561,10 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
    * Preserve the current element attributes and children during frame DOM reconciliation.
    *
    * Server rendering and initial hydration still process this element and its children. On later
-   * frame reloads, a matched element with `rmx-preserve-dom` keeps its live DOM so custom elements
-   * and imperative widgets can own their subtree.
+   * frame reloads, a matched element with `data-rmx-preserve-dom` keeps its live DOM so custom
+   * elements and imperative widgets can own their subtree.
    */
-  'rmx-preserve-dom'?: Trackable<boolean | '' | undefined>
+  'data-rmx-preserve-dom'?: Trackable<boolean | '' | undefined>
 
   // RDFa Attributes
   /** The `about` HTML attribute. */
@@ -1786,14 +1786,16 @@ export interface PartialAnchorHTMLProps<
   referrerPolicy?: Trackable<HTMLAttributeReferrerPolicy | undefined>
 
   // Non-standard Attributes
-  /** The `rmx-target` HTML attribute. */
-  'rmx-target'?: Trackable<string | undefined>
-  /** The `rmx-src` HTML attribute. */
-  'rmx-src'?: Trackable<string | undefined>
+  /** The `data-rmx-document` HTML attribute. */
+  'data-rmx-document'?: Trackable<boolean | '' | undefined>
+  /** The `data-rmx-target` HTML attribute. */
+  'data-rmx-target'?: Trackable<string | undefined>
+  /** The `data-rmx-src` HTML attribute. */
+  'data-rmx-src'?: Trackable<string | undefined>
   /** Controls how activating this anchor updates the current history entry. */
-  'rmx-history'?: Trackable<'push' | 'replace' | undefined>
-  /** The `rmx-reset-scroll` HTML attribute. */
-  'rmx-reset-scroll'?: Trackable<string | undefined>
+  'data-rmx-history'?: Trackable<'push' | 'replace' | undefined>
+  /** The `data-rmx-reset-scroll` HTML attribute. */
+  'data-rmx-reset-scroll'?: Trackable<string | undefined>
 }
 
 export type AnchorAriaRoles =
@@ -2297,8 +2299,16 @@ export interface FormHTMLProps<
   target?: Trackable<string | undefined>
 
   // Non-standard Attributes
+  /** The `data-rmx-document` HTML attribute. */
+  'data-rmx-document'?: Trackable<boolean | '' | undefined>
+  /** The `data-rmx-target` HTML attribute. */
+  'data-rmx-target'?: Trackable<string | undefined>
+  /** The `data-rmx-src` HTML attribute. */
+  'data-rmx-src'?: Trackable<string | undefined>
   /** Overrides how submitting this form updates the current history entry. */
-  'rmx-history'?: Trackable<'push' | 'replace' | undefined>
+  'data-rmx-history'?: Trackable<'push' | 'replace' | undefined>
+  /** The `data-rmx-reset-scroll` HTML attribute. */
+  'data-rmx-reset-scroll'?: Trackable<string | undefined>
 }
 
 /**

package/src/runtime/event-types.ts

@@ -0,0 +1,27 @@
+/**
+ * Event type with `currentTarget` narrowed to the dispatched target.
+ */
+export type Dispatched<event extends Event, target extends EventTarget> = Omit<
+  event,
+  'currentTarget'
+> & {
+  currentTarget: target
+}
+
+/**
+ * Narrows non-event values to `never` and preserves dispatched event typing otherwise.
+ */
+export type EnsureEvent<event, target extends EventTarget> = event extends Event
+  ? Dispatched<event, target>
+  : never
+
+/**
+ * Event map resolved for a DOM element.
+ */
+export type EventMap<target extends Element> = target extends HTMLElement
+  ? HTMLElementEventMap
+  : target extends SVGSVGElement
+    ? SVGSVGElementEventMap
+    : target extends SVGElement
+      ? SVGElementEventMap
+      : ElementEventMap

package/src/runtime/frame-resolution.ts

@@ -1,10 +1,19 @@
 import type { FrameContent, FrameResolution } from './component.ts'
+import { getSpaResponseData } from './spa-response.ts'
 
 export async function unwrapFrameResolution(
   resolution: FrameResolution,
 ): Promise<{ content: FrameContent; redirectedTo?: string }> {
   if (!(resolution instanceof Response)) return { content: resolution }
 
+  let data = getSpaResponseData(resolution)
+  if (data) {
+    return {
+      content: data.node,
+      redirectedTo: data.redirectedTo,
+    }
+  }
+
   let content = resolution.body ?? (await resolution.text())
   return {
     content,