@remix-run/ui 0.1.0 → 0.1.2

package/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 {

package/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()}`)
+}

package/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
+}

package/src/runtime/core/props.ts

@@ -0,0 +1,185 @@
+import type { ElementProps } from '../jsx.ts'
+import {
+  canUseProperty,
+  getMergedClassName,
+  normalizeAttributeName,
+  serializeStyleObject,
+  toKebabCase,
+} from './attributes.ts'
+import { normalizeCssValue } from '../../style/style.ts'
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+function isFrameworkProp(name: string): boolean {
+  return (
+    name === 'children' ||
+    name === 'mix' ||
+    name === 'key' ||
+    name === 'animate' ||
+    name === 'innerHTML' ||
+    name === 'on'
+  )
+}
+
+function toLocalName(attrName: string): string {
+  let separatorIndex = attrName.indexOf(':')
+  if (separatorIndex === -1) return attrName
+  return attrName.slice(separatorIndex + 1)
+}
+
+function clearRuntimePropertyOnRemoval(dom: Element & Record<string, unknown>, name: string): void {
+  try {
+    if (name === 'value' || name === 'defaultValue') {
+      dom[name] = ''
+      return
+    }
+    if (name === 'checked' || name === 'defaultChecked' || name === 'selected') {
+      dom[name] = false
+      return
+    }
+    if (name === 'selectedIndex') {
+      dom[name] = -1
+    }
+  } catch {}
+}
+
+/**
+ * Patches DOM attributes and selected properties from old props to new props.
+ *
+ * @param curr Previous host props.
+ * @param next Next host props.
+ * @param dom Element to patch.
+ */
+export function patchHostProps(curr: ElementProps, next: ElementProps, dom: Element): void {
+  let isSvg = dom.namespaceURI === SVG_NS
+  let currClassName = getMergedClassName(curr)
+  let nextClassName = getMergedClassName(next)
+
+  if (currClassName !== nextClassName) {
+    if (nextClassName) {
+      dom.setAttribute('class', nextClassName)
+    } else {
+      dom.removeAttribute('class')
+    }
+  }
+
+  for (let name in curr) {
+    if (isFrameworkProp(name)) continue
+    if (name === 'class' || name === 'className') continue
+    if (name in next && next[name] != null) continue
+
+    if (canUseProperty(dom, name, isSvg)) {
+      clearRuntimePropertyOnRemoval(dom, name)
+    }
+
+    let { ns, attr } = normalizeAttributeName(name, isSvg)
+    if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
+    else dom.removeAttribute(attr)
+  }
+
+  for (let name in next) {
+    if (isFrameworkProp(name)) continue
+    if (name === 'class' || name === 'className') continue
+
+    let nextValue = next[name]
+    if (nextValue == null) continue
+
+    let prevValue = curr[name]
+    if (prevValue === nextValue) continue
+
+    if (name === 'style' && isStyleObject(nextValue)) {
+      if (isStyleObject(prevValue)) {
+        patchStyleObject(dom, prevValue, nextValue)
+      } else {
+        dom.removeAttribute('style')
+        patchStyleObject(dom, undefined, nextValue)
+      }
+      continue
+    }
+
+    patchHostProp(dom, name, nextValue, isSvg)
+  }
+}
+
+function patchHostProp(dom: Element, name: string, value: unknown, isSvg: boolean): void {
+  let { ns, attr } = normalizeAttributeName(name, isSvg)
+
+  if (attr === 'style' && isStyleObject(value)) {
+    patchStyleObject(dom, undefined, value)
+    return
+  }
+
+  if (attr === 'style' && typeof value === 'string') {
+    dom.setAttribute('style', value)
+    return
+  }
+
+  if (canUseProperty(dom, name, isSvg)) {
+    try {
+      dom[name] = value == null ? '' : value
+      return
+    } catch {}
+  }
+
+  if (typeof value === 'function') return
+
+  let isAriaOrData = name.startsWith('aria-') || name.startsWith('data-')
+  if (value != null && (value !== false || isAriaOrData)) {
+    let attrValue = name === 'popover' && value === true ? '' : String(value)
+    if (ns) dom.setAttributeNS(ns, attr, attrValue)
+    else dom.setAttribute(attr, attrValue)
+  } else {
+    if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
+    else dom.removeAttribute(attr)
+  }
+}
+
+function isStyleObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function patchStyleObject(
+  dom: Element,
+  curr: Record<string, unknown> | undefined,
+  next: Record<string, unknown>,
+): void {
+  if (!(dom instanceof HTMLElement || dom instanceof SVGElement)) {
+    dom.setAttribute('style', serializeStyleObject(next))
+    return
+  }
+
+  let style = dom.style
+  if (curr) {
+    for (let name in curr) {
+      let nextCssValue = styleValueToCss(name, next[name])
+      if (nextCssValue !== undefined) continue
+
+      let prevCssValue = styleValueToCss(name, curr[name])
+      if (prevCssValue === undefined) continue
+
+      style.removeProperty(toKebabCase(name))
+    }
+  }
+
+  for (let name in next) {
+    let nextCssValue = styleValueToCss(name, next[name])
+    if (nextCssValue === undefined) continue
+
+    let prevCssValue = curr ? styleValueToCss(name, curr[name]) : undefined
+    if (prevCssValue === nextCssValue) continue
+
+    style.setProperty(toKebabCase(name), nextCssValue)
+  }
+}
+
+function styleValueToCss(name: string, value: unknown): string | undefined {
+  if (value == null) return undefined
+  if (typeof value === 'boolean') return undefined
+  if (typeof value === 'number' && !Number.isFinite(value)) return undefined
+
+  if (Array.isArray(value)) {
+    return value.join(', ')
+  }
+
+  return normalizeCssValue(name, value)
+}

package/src/runtime/core/vnode.ts

@@ -0,0 +1,48 @@
+import type { ElementProps, ElementType, RemixElement, RemixNode } from '../jsx.ts'
+
+export function createRemixElement(
+  type: ElementType,
+  props: ElementProps | null | undefined,
+  key?: string,
+): RemixElement {
+  return {
+    $rmx: true,
+    key,
+    props: normalizeElementProps(props),
+    type,
+  }
+}
+
+export function isRemixElement(node: RemixNode): node is RemixElement {
+  return typeof node === 'object' && node !== null && '$rmx' in node
+}
+
+function normalizeElementProps(props: ElementProps | null | undefined): ElementProps {
+  if (!props) return {}
+  if (!('mix' in props)) return props
+
+  let { mix, ...rest } = props
+  let normalizedMix = normalizeMixValue(mix)
+  return normalizedMix === undefined ? rest : { ...rest, mix: normalizedMix }
+}
+
+function normalizeMixValue(mix: unknown): unknown[] | undefined {
+  if (!mix) return undefined
+
+  let normalizedMix: unknown[] = []
+  flattenMixValue(mix, normalizedMix)
+  return normalizedMix.length === 0 ? undefined : normalizedMix
+}
+
+function flattenMixValue(mix: unknown, out: unknown[]): void {
+  if (!mix) return
+
+  if (!Array.isArray(mix)) {
+    out.push(mix)
+    return
+  }
+
+  for (let item of mix) {
+    flattenMixValue(item, out)
+  }
+}

package/src/runtime/create-element.ts

@@ -1,5 +1,6 @@
 import { jsx } from './jsx.ts'
 import type { ElementType, RemixElement } from './jsx.ts'
+import { normalizeChildren } from './core/children.ts'
 
 /**
  * Creates a Remix virtual element from a JSX-like call signature.
@@ -20,7 +21,7 @@ export function createElement(
       console.error(new Error('mixin elements must not receive children'))
     }
   } else {
-    nextProps.children = children
+    nextProps.children = normalizeChildren(children)
   }
 
   if (nextProps.key != null) {