Optimize UI runtime hot paths. (#11369)

Author: jacob-ebey

packages/ui/.changes/patch.runtime-rendering-performance.md

@@ -0,0 +1,8 @@
+Optimize UI runtime hot paths.
+
+- Fast path for plain `on()` mixins that patches host listeners in place.
+- Lazy direct listener closures for event listeners managed by the runtime.
+- Lazy mixin scope signals to avoid unnecessary AbortController work.
+- Faster keyed reconciliation for in-order, append-only, single-removal, and pair-swap lists.
+- Property-level patching for object styles during updates.
+- Bulk clearing for removable child lists, with an innerHTML guard.

packages/ui/bench/runner.ts

@@ -54,7 +54,7 @@ let { values: args } = parseArgs({
       type: 'string',
       multiple: true,
       short: 'f',
-      // default: ['remix', 'preact'],
+      default: ['remix', 'preact'],
     },
     benchmark: { type: 'string', multiple: true, short: 'b' },
   },

packages/ui/src/runtime/component.ts

@@ -227,113 +227,125 @@ export type ComponentHandle = ReturnType<typeof createComponent>
  * @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
+  return new ComponentRuntime<C>(config)
+}
 
-  let context: Context<C> = {
-    set: (value: C) => {
-      contextValue = value
-    },
-    get: (type: Component) => config.getContext(type),
-  }
+class ComponentRuntime<C = NoContext> {
+  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
+  #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.#connectedController?.signal.aborted) {
       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)
 
-    syncProps(handle.props, props)
+    let renderFn = this.#renderFn
+
+    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> => {
+    this.#connectedController?.abort()
+    this.#abortRenderSignal()
+    return this.#dequeueTasks()
   }
 
-  function setScheduleUpdate(nextScheduleUpdate: () => void) {
-    scheduleUpdate = nextScheduleUpdate
+  setScheduleUpdate = (nextScheduleUpdate: () => void): void => {
+    this.#scheduleUpdate = nextScheduleUpdate
   }
 
-  function getContextValue(): C | undefined {
-    return contextValue
+  getContextValue = (): C | undefined => this.#contextValue
+
+  #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) => {
+          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()
+      },
+    }
   }
 
-  return { render, remove, setScheduleUpdate, frame: config.frame, getContextValue }
+  #connectedSignal(): AbortSignal {
+    this.#connectedController ??= new AbortController()
+    return this.#connectedController.signal
+  }
+
+  #abortRenderSignal(): void {
+    this.#renderController?.abort()
+    this.#renderController = undefined
+  }
+
+  #dequeueTasks(): Array<() => void> {
+    let needsSignal = this.#tasks.some((task) => task.length >= 1)
+
+    if (needsSignal) {
+      this.#renderController ??= new AbortController()
+    }
+
+    let 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 {

packages/ui/src/runtime/core/attributes.ts

@@ -0,0 +1,97 @@
+import { normalizeCssValue } from '../../style/style.ts'
+import { normalizeSvgAttribute } from '../svg-attributes.ts'
+import type { ElementProps } from '../jsx.ts'
+
+const ATTRIBUTE_FALLBACK_NAMES = new Set([
+  'width',
+  'height',
+  'href',
+  'list',
+  'form',
+  'tabIndex',
+  'download',
+  'rowSpan',
+  'colSpan',
+  'role',
+  'popover',
+])
+
+export const FRAMEWORK_PROPS = new Set(['children', 'mix', 'key', 'animate', 'innerHTML', 'on'])
+
+export const SELF_CLOSING_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+])
+
+export function isChildlessElement(name: string): boolean {
+  return SELF_CLOSING_TAGS.has(name)
+}
+
+export function canUseProperty(
+  element: Element,
+  name: string,
+  isSvg: boolean,
+): element is Element & Record<string, unknown> {
+  if (isSvg) return false
+  if (ATTRIBUTE_FALLBACK_NAMES.has(name)) return false
+  return name in element
+}
+
+export function normalizeAttributeName(
+  name: string,
+  isSvg: boolean,
+): { ns?: string; attr: string } {
+  if (name.startsWith('aria-') || name.startsWith('data-')) return { attr: name }
+
+  if (name === 'className') return { attr: 'class' }
+
+  if (!isSvg) {
+    if (name === 'htmlFor') return { attr: 'for' }
+    if (name === 'tabIndex') return { attr: 'tabindex' }
+    if (name === 'acceptCharset') return { attr: 'accept-charset' }
+    if (name === 'httpEquiv') return { attr: 'http-equiv' }
+    return { attr: name.toLowerCase() }
+  }
+
+  return normalizeSvgAttribute(name)
+}
+
+export function serializeStyleObject(style: Record<string, unknown>): string {
+  let parts: string[] = []
+
+  for (let [key, value] of Object.entries(style)) {
+    if (value == null) continue
+    if (typeof value === 'boolean') continue
+    if (typeof value === 'number' && !Number.isFinite(value)) continue
+
+    let cssKey = toKebabCase(key)
+    let cssValue = Array.isArray(value) ? value.join(', ') : normalizeCssValue(key, value)
+
+    parts.push(`${cssKey}: ${cssValue};`)
+  }
+
+  return parts.join(' ')
+}
+
+export function getMergedClassName(props: ElementProps): string | undefined {
+  let classAttr = typeof props.class === 'string' ? props.class : ''
+  let className = typeof props.className === 'string' ? props.className : ''
+  let merged = classAttr && className ? `${classAttr} ${className}` : classAttr || className
+  return merged || undefined
+}
+
+export function toKebabCase(value: string): string {
+  return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+}

packages/ui/src/runtime/core/children.ts

@@ -0,0 +1,42 @@
+import type { RemixNode } from '../jsx.ts'
+
+export type EmptyChild = boolean | null | undefined
+export type PrimitiveChild = string | number | bigint
+
+export function isEmptyChild(value: RemixNode): value is EmptyChild {
+  return value == null || typeof value === 'boolean'
+}
+
+export function isPrimitiveChild(value: RemixNode): value is PrimitiveChild {
+  let type = typeof value
+  return type === 'string' || type === 'number' || type === 'bigint'
+}
+
+export function normalizeChildren(children: readonly RemixNode[]): RemixNode[] {
+  for (let child of children) {
+    if (Array.isArray(child)) {
+      return (children as unknown[]).flat(Infinity) as RemixNode[]
+    }
+  }
+
+  return children as RemixNode[]
+}
+
+export function packChildren(children: readonly RemixNode[]): RemixNode | undefined {
+  if (children.length === 0) {
+    return undefined
+  }
+
+  if (children.length === 1) {
+    let child = children[0]
+
+    if (child === undefined || isEmptyChild(child)) {
+      return undefined
+    }
+
+    return Array.isArray(child) ? normalizeChildren(child) : child
+  }
+
+  let normalized = normalizeChildren(children)
+  return normalized.length === 0 ? undefined : normalized
+}