@remix-run/ui 0.0.0 → 0.1.0

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

@@ -0,0 +1,67 @@
+/**
+ * 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
+}
+
+/**
+ * Interface surface for {@link TypedEventTarget} with typed listener overloads.
+ */
+export interface TypedEventTarget<eventMap> {
+  /**
+   * Adds a listener for a typed event name from the event map.
+   *
+   * @param type Event name to listen for.
+   * @param listener Listener to invoke when the event fires.
+   * @param options Listener registration options.
+   */
+  addEventListener<type extends Extract<keyof eventMap, string>>(
+    type: type,
+    listener: TypedEventListener<eventMap>[type],
+    options?: AddEventListenerOptions,
+  ): void
+  /**
+   * Adds a listener using the standard untyped `EventTarget` signature.
+   *
+   * @param type Event name to listen for.
+   * @param listener Listener to invoke when the event fires.
+   * @param options Listener registration options.
+   */
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: boolean | AddEventListenerOptions,
+  ): void
+  /**
+   * Removes a listener for a typed event name from the event map.
+   *
+   * @param type Event name to stop listening for.
+   * @param listener Previously registered listener.
+   * @param options Listener removal options.
+   */
+  removeEventListener<type extends Extract<keyof eventMap, string>>(
+    type: type,
+    listener: TypedEventListener<eventMap>[type],
+    options?: EventListenerOptions,
+  ): void
+  /**
+   * Removes a listener using the standard untyped `EventTarget` signature.
+   *
+   * @param type Event name to stop listening for.
+   * @param listener Previously registered listener.
+   * @param options Listener removal options.
+   */
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: EventListenerOptions,
+  ): void
+}
+
+type TypedEventListener<eventMap> = {
+  [key in keyof eventMap]: (event: eventMap[key]) => void
+}

package/src/runtime/vdom.ts

@@ -0,0 +1,295 @@
+import type { FrameContent, FrameHandle } from './component.ts'
+import { createFrameHandle } from './component.ts'
+import { invariant } from './invariant.ts'
+import type { RemixNode } from './jsx.ts'
+import {
+  createComponentErrorEvent,
+  getComponentError,
+  type ComponentErrorEvent,
+} from './error-event.ts'
+import { createScheduler, type Scheduler } from './scheduler.ts'
+import { diffVNodes, remove as removeVNode } from './reconcile.ts'
+import { toVNode } from './to-vnode.ts'
+import { TypedEventTarget } from './typed-event-target.ts'
+import { ROOT_VNODE, type VNode } from './vnode.ts'
+import { resetStyleState, defaultStyleManager } from './diff-props.ts'
+import type { StyleManager } from '../style/index.ts'
+
+/**
+ * Events emitted by virtual roots.
+ */
+export type VirtualRootEventMap = {
+  error: ComponentErrorEvent
+}
+
+/**
+ * Root controller returned by {@link createRoot} and {@link createRangeRoot}.
+ */
+export type VirtualRoot = TypedEventTarget<VirtualRootEventMap> & {
+  render: (element: RemixNode) => void
+  dispose: () => void
+  flush: () => void
+}
+
+/**
+ * Options for creating a virtual DOM root with {@link createRoot} or {@link createRangeRoot}.
+ */
+export type VirtualRootOptions = {
+  frame?: FrameHandle
+  scheduler?: Scheduler
+  styleManager?: StyleManager
+  frameInit?: {
+    src?: string
+    resolveFrame: (
+      src: string,
+      signal?: AbortSignal,
+      target?: string,
+    ) => Promise<FrameContent> | FrameContent
+    loadModule?: (moduleUrl: string, exportName: string) => Promise<Function> | Function
+  }
+}
+
+export { createScheduler, type Scheduler }
+export { diffVNodes, toVNode }
+export { resetStyleState }
+
+function getHydrationComponentIdFromRangeStart(start: Node): string | undefined {
+  if (!(start instanceof Comment)) return undefined
+  let marker = start.data.trim()
+  if (!marker.startsWith('rmx:h:')) return undefined
+  let id = marker.slice('rmx:h:'.length)
+  return id.length > 0 ? id : undefined
+}
+
+/**
+ * Creates a virtual root bounded by two DOM nodes.
+ *
+ * @param boundaries Start and end marker nodes that define the render region.
+ * @param options Root configuration.
+ * @returns A virtual root controller.
+ */
+export function createRangeRoot(
+  boundaries: [Node, Node],
+  options: VirtualRootOptions = {},
+): VirtualRoot {
+  let [start, end] = boundaries
+  let vroot: VNode | null = null
+  let styles = options.styleManager ?? defaultStyleManager
+
+  let container = end.parentNode
+  invariant(container, 'Expected parent node')
+  invariant(start.parentNode === container, 'Boundaries must share parent')
+  let parent = container
+
+  let hydrationCursor = start.nextSibling
+
+  let eventTarget = new TypedEventTarget<VirtualRootEventMap>()
+  let scheduler =
+    options.scheduler ?? createScheduler(parent.ownerDocument ?? document, eventTarget, styles)
+  let frameStub =
+    options.frame ??
+    createRootFrameHandle({
+      src: options.frameInit?.src,
+      resolveFrame: options.frameInit?.resolveFrame,
+      loadModule: options.frameInit?.loadModule,
+      errorTarget: eventTarget,
+      scheduler,
+      styleManager: styles,
+    })
+
+  let isErrorForwardingAttached = false
+  function forwardDomError(event: Event) {
+    eventTarget.dispatchEvent(createComponentErrorEvent(getComponentError(event)))
+  }
+  function attachDomErrorForwarding() {
+    if (isErrorForwardingAttached) return
+    parent.addEventListener('error', forwardDomError)
+    isErrorForwardingAttached = true
+  }
+  function detachDomErrorForwarding() {
+    if (!isErrorForwardingAttached) return
+    parent.removeEventListener('error', forwardDomError)
+    isErrorForwardingAttached = false
+  }
+  attachDomErrorForwarding()
+
+  return Object.assign(eventTarget, {
+    render(element: RemixNode) {
+      attachDomErrorForwarding()
+
+      let vnode = toVNode(element)
+      let vParent: VNode = {
+        type: ROOT_VNODE,
+        _svg: false,
+        _rangeStart: start,
+        _rangeEnd: end,
+        _pendingHydrationComponentId: getHydrationComponentIdFromRangeStart(start),
+      }
+      scheduler.enqueueWork([
+        () => {
+          diffVNodes(
+            vroot,
+            vnode,
+            parent,
+            frameStub,
+            scheduler,
+            styles,
+            vParent,
+            eventTarget,
+            end,
+            hydrationCursor,
+          )
+          vroot = vnode
+          hydrationCursor = null
+        },
+      ])
+      scheduler.dequeue()
+    },
+
+    dispose() {
+      detachDomErrorForwarding()
+
+      if (!vroot) return
+      let current = vroot
+      vroot = null
+      scheduler.enqueueWork([() => removeVNode(current, parent, scheduler, styles)])
+      scheduler.dequeue()
+    },
+
+    flush() {
+      scheduler.dequeue()
+    },
+  })
+}
+
+/**
+ * Creates a virtual root for a host container element.
+ *
+ * @param container Host element to render into.
+ * @param options Root configuration.
+ * @returns A virtual root controller.
+ */
+export function createRoot(container: HTMLElement, options: VirtualRootOptions = {}): VirtualRoot {
+  let vroot: VNode | null = null
+  let styles = options.styleManager ?? defaultStyleManager
+  let hydrationCursor = container.innerHTML.trim() !== '' ? container.firstChild : undefined
+
+  let eventTarget = new TypedEventTarget<VirtualRootEventMap>()
+  let scheduler =
+    options.scheduler ?? createScheduler(container.ownerDocument ?? document, eventTarget, styles)
+  let frameStub =
+    options.frame ??
+    createRootFrameHandle({
+      src: options.frameInit?.src,
+      resolveFrame: options.frameInit?.resolveFrame,
+      loadModule: options.frameInit?.loadModule,
+      errorTarget: eventTarget,
+      scheduler,
+      styleManager: styles,
+    })
+
+  let isErrorForwardingAttached = false
+  function forwardDomError(event: Event) {
+    eventTarget.dispatchEvent(createComponentErrorEvent(getComponentError(event)))
+  }
+  function attachDomErrorForwarding() {
+    if (isErrorForwardingAttached) return
+    container.addEventListener('error', forwardDomError)
+    isErrorForwardingAttached = true
+  }
+  function detachDomErrorForwarding() {
+    if (!isErrorForwardingAttached) return
+    container.removeEventListener('error', forwardDomError)
+    isErrorForwardingAttached = false
+  }
+  attachDomErrorForwarding()
+
+  return Object.assign(eventTarget, {
+    render(element: RemixNode) {
+      attachDomErrorForwarding()
+
+      let vnode = toVNode(element)
+      let vParent: VNode = { type: ROOT_VNODE, _svg: false }
+      scheduler.enqueueWork([
+        () => {
+          diffVNodes(
+            vroot,
+            vnode,
+            container,
+            frameStub,
+            scheduler,
+            styles,
+            vParent,
+            eventTarget,
+            undefined,
+            hydrationCursor,
+          )
+          vroot = vnode
+          hydrationCursor = undefined
+        },
+      ])
+      scheduler.dequeue()
+    },
+
+    dispose() {
+      detachDomErrorForwarding()
+
+      if (!vroot) return
+      let current = vroot
+      vroot = null
+      scheduler.enqueueWork([() => removeVNode(current, container, scheduler, styles)])
+      scheduler.dequeue()
+    },
+
+    flush() {
+      scheduler.dequeue()
+    },
+  })
+}
+
+function createRootFrameHandle(init: {
+  src?: string
+  resolveFrame?: (
+    src: string,
+    signal?: AbortSignal,
+    target?: string,
+  ) => Promise<FrameContent> | FrameContent
+  loadModule?: (moduleUrl: string, exportName: string) => Promise<Function> | Function
+  errorTarget: EventTarget
+  scheduler: Scheduler
+  styleManager: StyleManager
+}): FrameHandle {
+  let resolveFrame =
+    init.resolveFrame ??
+    (() => {
+      throw new Error(
+        'Cannot render <Frame /> without frame runtime. Use run() or pass frameInit to createRoot/createRangeRoot.',
+      )
+    })
+
+  let frame = createFrameHandle({
+    src: init.src ?? '/',
+    $runtime: {
+      canResolveFrames: !!init.resolveFrame,
+      topFrame: undefined,
+      loadModule:
+        init.loadModule ??
+        (() => {
+          throw new Error('loadModule is required to hydrate client entries inside <Frame />')
+        }),
+      resolveFrame,
+      errorTarget: init.errorTarget,
+      pendingClientEntries: new Map(),
+      scheduler: init.scheduler,
+      styleManager: init.styleManager,
+      data: {},
+      moduleCache: new Map(),
+      moduleLoads: new Map(),
+      frameInstances: new WeakMap(),
+      namedFrames: new Map(),
+    },
+  })
+  let runtime = frame.$runtime as { topFrame?: FrameHandle } | undefined
+  if (runtime) runtime.topFrame = frame
+  return frame
+}

package/src/runtime/vnode.ts

@@ -0,0 +1,137 @@
+import type { ComponentHandle, Component } from './component.ts'
+import { Fragment, Frame } from './component.ts'
+import type { ElementProps, RemixElement, RemixNode } from './jsx.ts'
+
+export const TEXT_NODE = Symbol('TEXT_NODE')
+export const ROOT_VNODE = Symbol('ROOT_VNODE')
+
+export type VNodeType =
+  | typeof ROOT_VNODE
+  | string // host element
+  | Function // component
+  | typeof TEXT_NODE
+  | typeof Fragment
+  | typeof Frame
+
+export type VNode<T extends VNodeType = VNodeType> = {
+  type: T
+  props?: ElementProps
+  _mixedProps?: ElementProps
+  key?: string
+
+  // _prefixes assigned during reconciliation
+  _parent?: VNode
+  _children?: VNode[]
+  _dom?: unknown
+  _controller?: AbortController
+  _mixState?: unknown
+  _controlledState?: unknown
+  _svg?: boolean
+  // Range roots render between comment boundary markers
+  _rangeStart?: Node
+  _rangeEnd?: Node
+  _pendingHydrationComponentId?: string
+  _frameInstance?: unknown
+  _frameFallbackRoot?: { render: (element: RemixNode) => void; dispose: () => void }
+  _frameResolveToken?: number
+  _frameResolveController?: AbortController
+  _frameResolved?: boolean
+
+  // Internal diffing fields
+  _index?: number
+  _flags?: number
+
+  // TEXT_NODE
+  _text?: string
+
+  // Component
+  _handle?: ComponentHandle
+  _id?: string
+  _content?: VNode
+
+  // Mixin-persisted node removal state
+  _persistedByMixins?: boolean
+  _persistedParentByMixins?: ParentNode
+  _persistedRemovalToken?: number
+}
+
+export type FragmentNode = VNode & {
+  type: typeof Fragment
+  _children: VNode[]
+}
+
+export type TextNode = VNode & {
+  type: typeof TEXT_NODE
+  _text: string
+}
+
+export type CommittedTextNode = TextNode & {
+  _dom: Text
+}
+
+export type HostNode = VNode & {
+  type: string
+  props: ElementProps
+  _children: VNode[]
+}
+
+export type CommittedHostNode = HostNode & {
+  _dom: Element
+  _controller?: AbortController
+}
+
+export type ComponentNode = VNode & {
+  type: Function
+  props: ElementProps
+  _handle: ComponentHandle
+}
+
+export type CommittedComponentNode = VNode & {
+  type: Function
+  props: ElementProps
+  _content: VNode
+  _handle: ComponentHandle
+}
+
+export function isFragmentNode(node: VNode): node is FragmentNode {
+  return node.type === Fragment
+}
+
+export function isTextNode(node: VNode): node is TextNode {
+  return node.type === TEXT_NODE
+}
+
+export function isCommittedTextNode(node: VNode): node is CommittedTextNode {
+  return isTextNode(node) && node._dom instanceof Text
+}
+
+export function isHostNode(node: VNode): node is HostNode {
+  return typeof node.type === 'string'
+}
+
+export function isCommittedHostNode(node: VNode): node is CommittedHostNode {
+  return isHostNode(node) && node._dom instanceof Element
+}
+
+export function isComponentNode(node: VNode): node is ComponentNode {
+  return typeof node.type === 'function' && node.type !== Frame
+}
+
+export function isCommittedComponentNode(node: VNode): node is CommittedComponentNode {
+  return isComponentNode(node) && node._content !== undefined
+}
+
+export function isRemixElement(node: RemixNode): node is RemixElement {
+  return typeof node === 'object' && node !== null && '$rmx' in node
+}
+
+export function findContextFromAncestry(node: VNode, type: Component): unknown {
+  let current: VNode | undefined = node
+  while (current) {
+    if (current.type === type && isComponentNode(current)) {
+      return current._handle.getContextValue()
+    }
+    current = current._parent
+  }
+  return undefined
+}