@remix-run/ui 0.0.0 → 0.1.0

package/src/runtime/mixins/on-mixin.ts

@@ -0,0 +1,89 @@
+import { createMixin } from './mixin.ts'
+import type { ElementProps } from '../jsx.ts'
+import type { MixinDescriptor } from './mixin.ts'
+import type {
+  EventType as AddEventType,
+  ListenerFor as AddEventListenerFor,
+} from '../event-listeners.ts'
+
+export type { Dispatched } from '../event-listeners.ts'
+
+type SignaledListener<event extends Event> = (
+  event: event,
+  signal: AbortSignal,
+) => void | Promise<void>
+
+type EventType<target extends Element> = Extract<AddEventType<target>, string>
+type ListenerFor<target extends Element, type extends EventType<target>> = SignaledListener<
+  Parameters<AddEventListenerFor<target, type>>[0]
+>
+
+const onMixin = createMixin<
+  Element,
+  [type: string, handler: SignaledListener<Event>, captureBoolean?: boolean],
+  ElementProps
+>((handle) => {
+  let currentHandler: SignaledListener<Event> = () => {}
+  let currentType = ''
+  let currentCapture = false
+  let currentNode: Element | null = null
+  let reentry: AbortController | null = null
+
+  let stableHandler = (event: Event) => {
+    reentry?.abort(new DOMException('', 'EventReentry'))
+    reentry = new AbortController()
+    void currentHandler(event, reentry.signal)
+  }
+
+  handle.addEventListener('insert', (event) => {
+    currentNode = event.node
+    currentNode.addEventListener(currentType, stableHandler, currentCapture)
+  })
+
+  handle.addEventListener('remove', () => {
+    currentNode?.removeEventListener(currentType, stableHandler, currentCapture)
+    currentNode = null
+    reentry?.abort(new DOMException('', 'AbortError'))
+  })
+
+  return (type, handler, captureBoolean = false) => {
+    let previousType = currentType
+    let previousCapture = currentCapture
+    let needsRebind = currentType !== type || currentCapture !== captureBoolean
+    currentType = type
+    currentHandler = handler
+    currentCapture = captureBoolean
+
+    if (needsRebind && currentNode) {
+      currentNode.removeEventListener(previousType, stableHandler, previousCapture)
+      currentNode.addEventListener(type, stableHandler, captureBoolean)
+    }
+
+    return handle.element
+  }
+})
+
+/**
+ * Attaches a typed DOM event handler through the mixin system.
+ *
+ * @param type Event type to listen for.
+ * @param handler Event handler.
+ * @param captureBoolean Whether to listen during capture.
+ * @returns A mixin descriptor for the target element.
+ */
+export function on<
+  target extends Element = Element,
+  type extends EventType<target> = EventType<target>,
+>(
+  type: type,
+  handler: ListenerFor<target, type>,
+  captureBoolean?: boolean,
+): MixinDescriptor<target, [type, ListenerFor<target, type>, boolean?], ElementProps> {
+  // Keep this typed wrapper so JSX host context can infer event/currentTarget
+  // from `type`, rather than exposing the raw `string` + `Event` runtime signature.
+  return onMixin(
+    type as string,
+    handler as unknown as SignaledListener<Event>,
+    captureBoolean,
+  ) as unknown as MixinDescriptor<target, [type, ListenerFor<target, type>, boolean?], ElementProps>
+}

package/src/runtime/mixins/ref-mixin.ts

@@ -0,0 +1,32 @@
+import { createMixin } from './mixin.ts'
+import type { ElementProps } from '../jsx.ts'
+
+/**
+ * Callback invoked with the bound node and a lifetime signal.
+ */
+export type RefCallback<node extends EventTarget> = (node: node, signal: AbortSignal) => void
+
+/**
+ * Calls a callback when an element is inserted and aborts it when removed.
+ */
+export const ref = createMixin<Element, [callback: RefCallback<Element>], ElementProps>(
+  (handle) => {
+    let controller: AbortController | undefined
+
+    handle.addEventListener('insert', (event) => {
+      controller = new AbortController()
+      callback(event.node, controller.signal)
+    })
+
+    handle.addEventListener('remove', () => {
+      controller?.abort(new DOMException('', 'AbortError'))
+      controller = undefined
+    })
+
+    let callback: RefCallback<Element> = () => {}
+    return (nextCallback) => {
+      callback = nextCallback
+      return handle.element
+    }
+  },
+)

package/src/runtime/navigation.ts

@@ -0,0 +1,136 @@
+import { getTopFrame, getNamedFrame } from './run.ts'
+
+type NavigationState = {
+  target: string | undefined
+  src: string
+  resetScroll: boolean
+  $rmx: true
+}
+
+type SourceElementNavigateEvent = NavigateEvent & {
+  sourceElement?: Element | null
+}
+
+/**
+ * Options for client-side frame-aware navigation.
+ */
+export type NavigationOptions = {
+  src?: string
+  target?: string
+  history?: 'push' | 'replace'
+  resetScroll?: boolean
+}
+
+/**
+ * Performs a Navigation API transition understood by Remix frame runtime state.
+ *
+ * @param href Destination URL.
+ * @param options Navigation options.
+ */
+export async function navigate(href: string, options?: NavigationOptions) {
+  let state = {
+    target: options?.target,
+    src: options?.src ?? href,
+    resetScroll: options?.resetScroll !== false,
+    $rmx: true,
+  } satisfies NavigationState
+  let transition = window.navigation.navigate(href, { state, history: options?.history })
+  await transition.finished
+}
+
+/**
+ * Starts listening for Navigation API transitions and routes them through frame reloads.
+ *
+ * @param signal Abort signal used to remove the listener.
+ */
+export function startNavigationListener(signal: AbortSignal) {
+  let navigation = window.navigation
+
+  navigation.updateCurrentEntry({
+    state: { target: undefined, src: window.location.href, resetScroll: true, $rmx: true },
+  })
+
+  navigation.addEventListener(
+    'navigate',
+    (event) => {
+      if (!event.canIntercept) return
+
+      let state = getRuntimeNavigationState(event)
+      if (!state) return
+
+      let topFrame = getTopFrame()
+      let namedFrame = state.target ? getNamedFrame(state.target) : undefined
+      let frame = namedFrame ?? topFrame
+
+      event.intercept({
+        async handler() {
+          if (event.navigationType !== 'traverse') {
+            navigation.updateCurrentEntry({ state })
+          }
+
+          frame.src = frame === topFrame ? event.destination.url : state.src
+          await frame.reload()
+
+          let isNewEntry = event.navigationType === 'push' || event.navigationType === 'replace'
+          if (state.resetScroll && isNewEntry) {
+            window.scrollTo(0, 0)
+          }
+        },
+      })
+    },
+    { signal },
+  )
+}
+
+function isRuntimeNavigation(info: unknown): info is NavigationState {
+  return typeof info === 'object' && info != null && '$rmx' in info
+}
+
+function getRuntimeNavigationState(event: NavigateEvent): NavigationState | undefined {
+  if (event.navigationType === 'traverse') {
+    return getTraverseNavigationState(event)
+  }
+
+  let sourceState = getSourceElementNavigationState(event)
+  if (sourceState) return sourceState
+
+  let destinationState = event.destination.getState()
+  if (isRuntimeNavigation(destinationState)) return destinationState
+}
+
+function getTraverseNavigationState(event: NavigateEvent): NavigationState | undefined {
+  let destinationState = event.destination.getState()
+  if (isRuntimeNavigation(destinationState)) {
+    return destinationState
+  }
+
+  // Safari returns `null` for destination.getState(), even though its in the
+  // navigation.entries(), so we do its job for it and look it up.
+  let navigation = window.navigation
+  let matchingEntry = navigation.entries().find((entry) => entry.key === event.destination.key)
+  if (matchingEntry) {
+    let state = matchingEntry.getState()
+    if (isRuntimeNavigation(state)) {
+      return state
+    }
+  }
+
+  return undefined
+}
+
+function getSourceElementNavigationState(event: NavigateEvent): NavigationState | undefined {
+  let sourceEvent = event as SourceElementNavigateEvent
+  let sourceElement = sourceEvent.sourceElement
+  if (!(sourceElement instanceof Element)) return
+  let linkElement = sourceElement.closest('a, area')
+  if (!(linkElement instanceof Element)) return
+  if (linkElement.hasAttribute('rmx-document')) return
+  if (linkElement.hasAttribute('download')) return
+
+  return {
+    target: linkElement.getAttribute('rmx-target') ?? undefined,
+    src: linkElement.getAttribute('rmx-src') ?? event.destination.url,
+    resetScroll: linkElement.getAttribute('rmx-reset-scroll') !== 'false',
+    $rmx: true,
+  } satisfies NavigationState
+}