@remix-run/ui 0.1.1 → 0.2.0

package/src/components/select/select.tsx

@@ -1,5 +1,3 @@
-// @jsxRuntime classic
-// @jsx createElement
 import {
   attrs,
   createElement,
@@ -8,9 +6,11 @@ import {
   on,
   ref,
   type CSSMixinDescriptor,
+  type Dispatched,
   type ElementProps,
   type Handle,
   type MixinHandle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
@@ -28,7 +28,10 @@ import type { AnchorOptions } from '../anchor/anchor.ts'
 const SELECT_CHANGE_EVENT = 'rmx:select-change' as const
 const LABEL_SWAP_DELAY_MS = 75
 
-type SelectChangeHandler = (event: SelectChangeEvent, signal: AbortSignal) => void | Promise<void>
+type SelectChangeHandler<target extends HTMLElement> = (
+  event: Dispatched<SelectChangeEvent, target>,
+  signal: AbortSignal,
+) => void | Promise<void>
 
 declare global {
   interface HTMLElementEventMap {
@@ -74,12 +77,7 @@ export interface SelectProps extends Omit<Props<'button'>, 'children' | 'name'>
 
 export type SelectOptionProps = Props<'div'> & Omit<listbox.ListboxOption, 'id'>
 
-enum State {
-  Initializing = 'initializing',
-  Closed = 'closed',
-  Open = 'open',
-  Selecting = 'selecting',
-}
+type State = 'initializing' | 'closed' | 'open' | 'selecting'
 
 type PendingChange = {
   label: string | null
@@ -109,13 +107,13 @@ interface SelectContextValue {
   unregisterTrigger: (node: HTMLButtonElement) => void
 }
 
-function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>) {
+function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>): () => RemixNode {
   let triggerRef: HTMLButtonElement | undefined
   let listboxRef: listbox.ListboxRef | undefined
   let surfaceRef: HTMLElement | undefined
   let popoverContextRef: popover.PopoverContext | undefined
 
-  let state: State = State.Initializing
+  let state: State = 'initializing'
 
   let value: listbox.ListboxValue = null
   let activeValue: listbox.ListboxValue = null
@@ -128,14 +126,14 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
   let listId = `${handle.id}-list`
 
   function open() {
-    if (state !== State.Closed || handle.props.disabled) return
-    state = State.Open
+    if (state !== 'closed' || handle.props.disabled) return
+    state = 'open'
     activeValue = value
     handle.update()
   }
 
   function syncPopoverMinWidth() {
-    if (state !== State.Open || !surfaceRef || !triggerRef) {
+    if (state !== 'open' || !surfaceRef || !triggerRef) {
       return
     }
 
@@ -165,8 +163,8 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
   }
 
   function close() {
-    if (state !== State.Open) return
-    state = State.Closed
+    if (state !== 'open') return
+    state = 'closed'
     handle.update()
   }
 
@@ -215,22 +213,22 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
     nextValue: listbox.ListboxValue,
     option: listbox.ListboxOption | undefined,
   ) {
-    if (state !== State.Open) return
+    if (state !== 'open') return
     pendingChange = getPendingChange(nextValue, option)
     setSelectedOption(nextValue, option)
     handle.update()
   }
 
   async function settleSelectedOption() {
-    if (state !== State.Open) return
+    if (state !== 'open') return
 
     let change = pendingChange
     pendingChange = null
-    state = State.Selecting
+    state = 'selecting'
 
     if (!surfaceRef) {
       displayedLabel = selectedLabel
-      state = State.Closed
+      state = 'closed'
       let signal = await handle.update()
       if (signal.aborted) return
       dispatchChange(change)
@@ -241,14 +239,14 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
     await wait(LABEL_SWAP_DELAY_MS) // UX delay label swap for clear value change
     if (handle.signal.aborted) return
     displayedLabel = selectedLabel
-    state = State.Closed
+    state = 'closed'
     let signal = await handle.update()
     if (signal.aborted) return
     dispatchChange(change)
   }
 
   function selectTypeaheadMatch(text: string) {
-    if (state !== State.Closed || handle.props.disabled) return
+    if (state !== 'closed' || handle.props.disabled) return
 
     let option = listboxRef?.matchSearchText(text, value)
     if (!option) return
@@ -266,7 +264,7 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
     nextActiveValue: listbox.ListboxValue,
     option: listbox.ListboxOption | undefined,
   ) {
-    if (state !== State.Open) return
+    if (state !== 'open') return
     activeValue = nextActiveValue
     activeId = option?.id
     handle.update()
@@ -286,11 +284,11 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
     },
 
     get isExpanded() {
-      return state === State.Open || state === State.Selecting
+      return state === 'open' || state === 'selecting'
     },
 
     get isOpen() {
-      return state === State.Open
+      return state === 'open'
     },
 
     get listId() {
@@ -356,11 +354,11 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>)
   })
 
   return () => {
-    if (state === State.Initializing) {
+    if (state === 'initializing') {
       selectedLabel = displayedLabel = handle.props.defaultLabel
       value = handle.props.defaultValue ?? null
       activeValue = value
-      state = State.Closed
+      state = 'closed'
 
       handle.queueTask(() => {
         if (selectedId || !surfaceRef) {
@@ -399,7 +397,11 @@ function getSelectContext(handle: Handle | MixinHandle) {
   return handle.context.get(SelectProvider)
 }
 
-const triggerMixin = createMixin<HTMLButtonElement, [], ElementProps>((handle) => {
+const triggerMixin: MixinFactory<HTMLButtonElement, [], ElementProps> = createMixin<
+  HTMLButtonElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return (props) => [
@@ -431,7 +433,11 @@ const triggerMixin = createMixin<HTMLButtonElement, [], ElementProps>((handle) =
   ]
 })
 
-const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const popoverMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
   let popoverState = handle.context.get(popover.Context)
 
@@ -456,7 +462,11 @@ const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const listMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return () => [
@@ -469,7 +479,11 @@ const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const hiddenInputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
+const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = createMixin<
+  HTMLInputElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getSelectContext(handle)
 
   return () =>
@@ -532,17 +546,20 @@ const select = {
   trigger,
 } as const
 
-export function onSelectChange(handler: SelectChangeHandler, captureBoolean?: boolean) {
-  return on<HTMLElement, typeof SELECT_CHANGE_EVENT>(SELECT_CHANGE_EVENT, handler, captureBoolean)
+export function onSelectChange<target extends HTMLElement>(
+  handler: SelectChangeHandler<target>,
+  captureBoolean?: boolean,
+): ReturnType<typeof on<target, typeof SELECT_CHANGE_EVENT>> {
+  return on(SELECT_CHANGE_EVENT, handler, captureBoolean)
 }
 
-function SelectLabel(handle: Handle) {
+function SelectLabel(handle: Handle): () => RemixNode {
   let context = getSelectContext(handle)
 
   return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
 }
 
-export function Select(handle: Handle<SelectProps>) {
+export function Select(handle: Handle<SelectProps>): () => RemixNode {
   return () => {
     let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props
 
@@ -568,7 +585,7 @@ export function Select(handle: Handle<SelectProps>) {
   }
 }
 
-export function Option(handle: Handle<SelectOptionProps>) {
+export function Option(handle: Handle<SelectOptionProps>): () => RemixNode {
   return () => {
     let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props
 

package/src/components/tabs/tabs.tsx

@@ -1,5 +1,3 @@
-// @jsxRuntime classic
-// @jsx createElement
 import {
   attrs,
   css,
@@ -7,6 +5,7 @@ import {
   createMixin,
   on,
   type CSSMixinDescriptor,
+  type Dispatched,
   type ElementProps,
   type Handle,
   type MixinHandle,
@@ -18,7 +17,10 @@ import { theme } from '../../theme/theme.ts'
 
 const TABS_CHANGE_EVENT = 'rmx:tabs-change' as const
 
-type TabsChangeHandler = (event: TabsChangeEvent, signal: AbortSignal) => void | Promise<void>
+type TabsChangeHandler<target extends HTMLElement> = (
+  event: Dispatched<TabsChangeEvent, target>,
+  signal: AbortSignal,
+) => void | Promise<void>
 
 const tabsListCss: CSSMixinDescriptor = css({
   display: 'inline-flex',
@@ -446,8 +448,11 @@ export const trigger = triggerMixin
 
 const tabs = { Context, list, panel, trigger } as const
 
-export function onTabsChange(handler: TabsChangeHandler, captureBoolean?: boolean) {
-  return on<HTMLElement, typeof TABS_CHANGE_EVENT>(TABS_CHANGE_EVENT, handler, captureBoolean)
+export function onTabsChange<target extends HTMLElement>(
+  handler: TabsChangeHandler<target>,
+  captureBoolean?: boolean,
+) {
+  return on(TABS_CHANGE_EVENT, handler, captureBoolean)
 }
 
 export function Tabs(handle: Handle<TabsProps>) {

package/src/index.ts

@@ -51,6 +51,7 @@ export type { HostProps, LayoutAnimationConfig } from './runtime/dom.ts'
 export { createMixin } from './runtime/mixins/mixin.ts'
 export type {
   MixinDescriptor,
+  MixinFactory,
   MixinHandle,
   MixinType,
   MixInput,
@@ -58,8 +59,8 @@ export type {
 } from './runtime/mixins/mixin.ts'
 export { TypedEventTarget } from './runtime/typed-event-target.ts'
 export { addEventListeners } from './runtime/event-listeners.ts'
+export type { Dispatched } from './runtime/event-listeners.ts'
 export { on } from './runtime/mixins/on-mixin.ts'
-export type { Dispatched } from './runtime/mixins/on-mixin.ts'
 export { link } from './runtime/mixins/link-mixin.ts'
 export { ref } from './runtime/mixins/ref-mixin.ts'
 export type { RefCallback } from './runtime/mixins/ref-mixin.ts'

package/src/runtime/component.ts

@@ -118,13 +118,18 @@ export type ContextFrom<ComponentType> =
 
 /**
  * Context storage API exposed on component handles.
+ *
+ * Context values are keyed by provider component identity. `get(Component)`
+ * reads the nearest ancestor instance whose component function is exactly
+ * `Component`, so nested instances of the same provider shadow outer instances
+ * while different component types remain independent.
  */
 export interface Context<C> {
   /** Replaces the current context value for this component instance. */
   set(values: C): void
-  /** Reads the context value associated with the given component type. */
+  /** Reads the context value from the nearest ancestor instance of the given component type. */
   get<ComponentType>(component: ComponentType): ContextFrom<ComponentType>
-  /** Reads the context value associated with the given component key. */
+  /** Reads an unknown context value for an untyped lookup. */
   get(component: ElementType | symbol): unknown | undefined
 }
 
@@ -218,7 +223,14 @@ type ComponentConfig = {
 /**
  * Runtime handle returned by {@link createComponent}.
  */
-export type ComponentHandle = ReturnType<typeof createComponent>
+export interface ComponentHandle<C = NoContext> {
+  frame: FrameHandle
+  render(nextProps: ElementProps): [RemixNode, Array<() => void>]
+  remove(): Array<() => void>
+  setScheduleUpdate(nextScheduleUpdate: () => void): void
+  getContextValue(): C | undefined
+  isRemoved(): boolean
+}
 
 /**
  * Creates the internal runtime wrapper for a component instance.
@@ -226,114 +238,136 @@ export type ComponentHandle = ReturnType<typeof createComponent>
  * @param config Component runtime configuration.
  * @returns Component runtime helpers used by the reconciler.
  */
-export function createComponent<C = NoContext>(config: ComponentConfig) {
-  let taskQueue: Task[] = []
-  let renderCtrl: AbortController | null = null
-  let connectedCtrl: AbortController | null = null
-  let contextValue: C | undefined = undefined
-
-  function getConnectedSignal() {
-    if (!connectedCtrl) connectedCtrl = new AbortController()
-    return connectedCtrl.signal
-  }
-
-  let getContent: null | RenderFn = null
-  let scheduleUpdate: () => void = () => {
-    throw new Error('scheduleUpdate not implemented')
-  }
-  let props = {} as ElementProps
+export function createComponent<C = NoContext>(config: ComponentConfig): ComponentHandle<C> {
+  return new ComponentRuntime<C>(config)
+}
 
-  let context: Context<C> = {
-    set: (value: C) => {
-      contextValue = value
-    },
-    get: (type: Component) => config.getContext(type),
-  }
+class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
+  frame: FrameHandle
 
-  let handle: Handle<ElementProps, C> = {
-    id: config.id,
-    props,
-    update: () =>
-      new Promise((resolve) => {
-        taskQueue.push((signal) => resolve(signal))
-        scheduleUpdate()
-      }),
-    queueTask: (task: Task) => {
-      taskQueue.push(task)
-    },
-    frame: config.frame,
-    frames: {
-      get top() {
-        return config.getTopFrame?.() ?? config.frame
-      },
-      get(name: string) {
-        return config.getFrameByName(name)
-      },
-    },
-    context: context,
-    get signal() {
-      return config.signal ?? getConnectedSignal()
-    },
+  #config: ComponentConfig
+  #connectedController: AbortController | undefined
+  #contextValue: C | undefined
+  #handle: Handle<ElementProps, C>
+  #props = {} as ElementProps
+  #renderController: AbortController | undefined
+  #renderFn: RenderFn | undefined
+  #removed = false
+  #scheduleUpdate: () => void = () => {
+    throw new Error('scheduleUpdate not implemented')
   }
+  #tasks: Task[] = []
 
-  function dequeueTasks(): (() => void)[] {
-    // Only create render controller if any task expects a signal (has length >= 1)
-    let needsSignal = taskQueue.some((task) => task.length >= 1)
-    if (needsSignal && !renderCtrl) {
-      renderCtrl = new AbortController()
-    }
-    let signal = renderCtrl?.signal
-    return taskQueue.splice(0, taskQueue.length).map((task) => () => task(signal!))
+  constructor(config: ComponentConfig) {
+    this.#config = config
+    this.frame = config.frame
+    this.#handle = this.#createHandle()
   }
 
-  function render(props: ElementProps): [RemixNode, Array<() => void>] {
-    if (connectedCtrl?.signal.aborted) {
+  render = (nextProps: ElementProps): [RemixNode, Array<() => void>] => {
+    if (this.#removed) {
       console.warn('render called after component was removed, potential application memory leak')
       return [null, []]
     }
 
-    // Only abort render controller if it was initialized
-    if (renderCtrl) {
-      renderCtrl.abort()
-      renderCtrl = null
-    }
+    this.#abortRenderSignal()
+    syncProps(this.#props, nextProps)
+
+    let renderFn = this.#renderFn
 
-    syncProps(handle.props, props)
+    if (renderFn === undefined) {
+      let result = this.#config.type(this.#handle)
 
-    let renderContent = getContent
-    if (!renderContent) {
-      let result = config.type(handle)
       if (typeof result !== 'function') {
-        let name = config.type.name || 'Anonymous'
+        let name = this.#config.type.name || 'Anonymous'
         throw new Error(`${name} must return a render function, received ${typeof result}`)
-      } else {
-        getContent = result
-        renderContent = result
       }
-    }
-    if (!renderContent) {
-      throw new Error('component render function was not initialized')
+
+      renderFn = result as RenderFn
+      this.#renderFn = renderFn
     }
 
-    let node = renderContent(handle.props)
-    return [node, dequeueTasks()]
+    return [renderFn(this.#props), this.#dequeueTasks()]
   }
 
-  function remove(): (() => void)[] {
-    connectedCtrl?.abort()
-    renderCtrl?.abort()
-    return dequeueTasks()
+  remove = (): Array<() => void> => {
+    if (this.#removed) return []
+    this.#removed = true
+    this.#connectedController?.abort()
+    this.#abortRenderSignal()
+    return this.#dequeueTasks(AbortSignal.abort())
   }
 
-  function setScheduleUpdate(nextScheduleUpdate: () => void) {
-    scheduleUpdate = nextScheduleUpdate
+  setScheduleUpdate = (nextScheduleUpdate: () => void): void => {
+    this.#scheduleUpdate = nextScheduleUpdate
   }
 
-  function getContextValue(): C | undefined {
-    return contextValue
+  getContextValue = (): C | undefined => this.#contextValue
+
+  isRemoved = (): boolean => this.#removed
+
+  #createHandle(): Handle<ElementProps, C> {
+    let component = this
+    let context: Context<C> = {
+      set: (value: C) => {
+        this.#contextValue = value
+      },
+      get: (type: ElementType | symbol) => this.#config.getContext(type as Component),
+    }
+
+    return {
+      id: this.#config.id,
+      props: this.#props,
+      update: () =>
+        new Promise((resolve) => {
+          if (component.#removed) {
+            resolve(AbortSignal.abort())
+            return
+          }
+
+          this.#tasks.push((signal) => resolve(signal))
+          this.#scheduleUpdate()
+        }),
+      queueTask: (task: Task) => {
+        this.#tasks.push(task)
+      },
+      frame: this.#config.frame,
+      frames: {
+        get top() {
+          return component.#config.getTopFrame?.() ?? component.#config.frame
+        },
+        get(name: string) {
+          return component.#config.getFrameByName(name)
+        },
+      },
+      context,
+      get signal() {
+        return component.#config.signal ?? component.#connectedSignal()
+      },
+    }
+  }
+
+  #connectedSignal(): AbortSignal {
+    this.#connectedController ??= new AbortController()
+    return this.#connectedController.signal
+  }
+
+  #abortRenderSignal(): void {
+    this.#renderController?.abort()
+    this.#renderController = undefined
   }
 
-  return { render, remove, setScheduleUpdate, frame: config.frame, getContextValue }
+  #dequeueTasks(signal?: AbortSignal): Array<() => void> {
+    let needsSignal = signal === undefined && this.#tasks.some((task) => task.length >= 1)
+
+    if (needsSignal) {
+      this.#renderController ??= new AbortController()
+    }
+
+    signal ??= this.#renderController?.signal
+    let tasks = this.#tasks.splice(0, this.#tasks.length)
+    return tasks.map((task) => () => task(signal!))
+  }
 }
 
 function syncProps(target: ElementProps, next: ElementProps): void {
@@ -354,7 +388,7 @@ function syncProps(target: ElementProps, next: ElementProps): void {
  * @param handle Component handle for the frame instance.
  * @returns A placeholder render function handled by the reconciler.
  */
-export function Frame(handle: Handle<FrameProps, FrameHandle>) {
+export function Frame(handle: Handle<FrameProps, FrameHandle>): RenderFn {
   void handle
   return () => null // reconciler renders
 }
@@ -365,7 +399,7 @@ export function Frame(handle: Handle<FrameProps, FrameHandle>) {
  * @param handle Component handle for the fragment instance.
  * @returns A placeholder render function handled by the reconciler.
  */
-export function Fragment(handle: Handle<FragmentProps>) {
+export function Fragment(handle: Handle<FragmentProps>): RenderFn {
   void handle
   return () => null // reconciler renders
 }