@vidact/runtime 0.2.0-beta.0 → 0.2.0-beta.11

package/src/dom/events.ts

@@ -0,0 +1,179 @@
+import { isReactFormChangeEvent, restoreControlledFormState } from './properties.ts'
+
+const DEV = typeof __VIDACT_DEV__ === 'undefined' || __VIDACT_DEV__
+const delegatedClick = Symbol('vidact.click')
+const delegatedClickCursor = Symbol('vidact.click.cursor')
+const delegatedClickRoots = new WeakMap<EventTarget, number>()
+export const COMPILED_DELEGATED_EVENT_INVOKE = Symbol('vidact.compiled-event.invoke')
+
+type DelegatedEventListener = EventListener & {
+  [COMPILED_DELEGATED_EVENT_INVOKE]?: EventListener
+}
+type DelegatedClickElement = Element & { [delegatedClick]?: DelegatedEventListener }
+type DelegatedClickEvent = Event & { [delegatedClickCursor]?: EventTarget }
+
+function isSupportedReactEventName(name: string): boolean {
+  return '|Abort|AnimationEnd|AnimationIteration|AnimationStart|AuxClick|BeforeInput|BeforeToggle|Blur|CanPlay|CanPlayThrough|Cancel|Change|Click|Close|CompositionEnd|CompositionStart|CompositionUpdate|ContextMenu|Copy|Cut|DoubleClick|Drag|DragEnd|DragEnter|DragExit|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Encrypted|Ended|Error|Focus|GotPointerCapture|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|LostPointerCapture|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|Paste|Pause|Play|Playing|PointerCancel|PointerDown|PointerEnter|PointerLeave|PointerMove|PointerOut|PointerOver|PointerUp|Progress|RateChange|Reset|Resize|Scroll|ScrollEnd|Seeked|Seeking|Select|Stalled|Submit|Suspend|TimeUpdate|Toggle|TouchCancel|TouchEnd|TouchMove|TouchStart|TransitionCancel|TransitionEnd|TransitionRun|TransitionStart|VolumeChange|Waiting|Wheel|'.includes(
+    `|${name}|`,
+  )
+}
+
+export function attachEventProp(element: Element, name: string, value: unknown): () => void {
+  if (value === null || value === undefined) return () => {}
+  if (typeof value !== 'function') {
+    throw new TypeError(DEV ? `event prop ${name} must be a function, null, or undefined` : 'V201')
+  }
+
+  const reactEventName = name.slice(2)
+  const capture = reactEventName.endsWith('Capture') && !reactEventName.endsWith('PointerCapture')
+  const eventNameWithoutPhase = capture
+    ? reactEventName.slice(0, -'Capture'.length)
+    : reactEventName
+  if (DEV && !isSupportedReactEventName(eventNameWithoutPhase)) {
+    throw new TypeError(DEV ? `unsupported event prop ${name}` : 'V202')
+  }
+  if (eventNameWithoutPhase === 'Change') {
+    return attachReactChangeEvent(element, value as EventListener, capture)
+  }
+
+  const eventName = nativeEventName(eventNameWithoutPhase)
+  if (eventName === 'input') {
+    const dispatch = (event: Event): void =>
+      invokeFormListener(element, value as EventListener, event)
+    element.addEventListener(eventName, dispatch, capture)
+    return () => element.removeEventListener(eventName, dispatch, capture)
+  }
+  const dispatch = (event: Event): void => (value as EventListener)(reactShapedEvent(event))
+  element.addEventListener(eventName, dispatch, capture)
+  return () => element.removeEventListener(eventName, dispatch, capture)
+}
+
+export function attachCompiledEventProp(
+  element: Element,
+  name: string,
+  value: unknown,
+): () => void {
+  if (name !== 'onClick') return attachEventProp(element, name, value)
+  if (value === null || value === undefined) return () => {}
+  if (typeof value !== 'function') {
+    throw new TypeError(DEV ? `event prop ${name} must be a function, null, or undefined` : 'V201')
+  }
+
+  const target = element as DelegatedClickElement
+  const listener = value as DelegatedEventListener
+  target[delegatedClick] = listener
+  return () => {
+    if (target[delegatedClick] === listener) delete target[delegatedClick]
+  }
+}
+
+export function retainCompiledEventRoot(root: EventTarget): () => void {
+  const references = delegatedClickRoots.get(root) ?? 0
+  if (references === 0) root.addEventListener('click', dispatchDelegatedClick)
+  delegatedClickRoots.set(root, references + 1)
+  let retained = true
+  return () => {
+    if (!retained) return
+    retained = false
+    const nextReferences = (delegatedClickRoots.get(root) ?? 1) - 1
+    if (nextReferences > 0) {
+      delegatedClickRoots.set(root, nextReferences)
+      return
+    }
+    delegatedClickRoots.delete(root)
+    root.removeEventListener('click', dispatchDelegatedClick)
+  }
+}
+
+export function isEventProp(name: string): boolean {
+  return /^on[A-Z]/.test(name)
+}
+
+function attachReactChangeEvent(
+  element: Element,
+  listener: EventListener,
+  capture: boolean,
+): () => void {
+  const dispatch = (event: Event): void => {
+    const target = event.target
+    if (!(target instanceof Element) || !isReactFormChangeEvent(target, event.type)) return
+    invokeFormListener(element, listener, event)
+  }
+  element.addEventListener('input', dispatch, capture)
+  element.addEventListener('change', dispatch, capture)
+  return () => {
+    element.removeEventListener('input', dispatch, capture)
+    element.removeEventListener('change', dispatch, capture)
+  }
+}
+
+function invokeFormListener(element: Element, listener: EventListener, event: Event): void {
+  try {
+    listener(reactShapedEvent(event))
+  } finally {
+    const target = event.target as Element
+    if (isReactFormChangeEvent(target, event.type) && (target === element || event.cancelBubble)) {
+      restoreControlledFormState(target)
+    }
+  }
+}
+
+function reactShapedEvent(event: Event): Event {
+  const shaped = event as Event & {
+    nativeEvent?: Event
+    isDefaultPrevented?: () => boolean
+    isPropagationStopped?: () => boolean
+    persist?: () => void
+  }
+  shaped.nativeEvent ??= event
+  shaped.isDefaultPrevented ??= () => event.defaultPrevented
+  shaped.isPropagationStopped ??= () => event.cancelBubble
+  shaped.persist ??= () => {}
+  return shaped
+}
+
+function dispatchDelegatedClick(event: Event): void {
+  const root = event.currentTarget
+  if (root === null) return
+  const path = event.composedPath()
+  const previousRoot = (event as DelegatedClickEvent)[delegatedClickCursor]
+  const start = previousRoot === undefined ? 0 : path.indexOf(previousRoot) + 1
+  for (let index = start; index < path.length; index += 1) {
+    const target = path[index]
+    if (target instanceof Element) {
+      const listener = (target as DelegatedClickElement)[delegatedClick]
+      if (listener !== undefined) invokeDelegatedClick(target, listener, event)
+    }
+    if (event.cancelBubble) break
+    if (target === root) break
+  }
+  ;(event as DelegatedClickEvent)[delegatedClickCursor] = root
+}
+
+function invokeDelegatedClick(
+  element: Element,
+  listener: DelegatedEventListener,
+  event: Event,
+): void {
+  const currentTarget = Object.getOwnPropertyDescriptor(event, 'currentTarget')
+  Object.defineProperty(event, 'currentTarget', { configurable: true, value: element })
+  try {
+    const shapedEvent = reactShapedEvent(event)
+    const compiledInvoke = listener[COMPILED_DELEGATED_EVENT_INVOKE]
+    if (compiledInvoke === undefined) listener(shapedEvent)
+    else compiledInvoke.call(listener, shapedEvent)
+  } finally {
+    if (currentTarget === undefined) {
+      Reflect.deleteProperty(event, 'currentTarget')
+    } else {
+      Object.defineProperty(event, 'currentTarget', currentTarget)
+    }
+  }
+}
+
+function nativeEventName(reactEventName: string): string {
+  if (reactEventName === 'DoubleClick') return 'dblclick'
+  if (reactEventName === 'Focus') return 'focusin'
+  if (reactEventName === 'Blur') return 'focusout'
+  return reactEventName.toLowerCase()
+}

package/src/dom/forms.ts

@@ -0,0 +1,220 @@
+type ControlledFormState = [value?: unknown, checked?: boolean]
+
+const controlledFormStates = new WeakMap<Element, ControlledFormState>()
+const controlledRestorationCleanups = new WeakMap<Element, () => void>()
+const DEV = typeof __VIDACT_DEV__ === 'undefined' || __VIDACT_DEV__
+
+export function isControlledFormProp(element: Element, name: string): boolean {
+  return (
+    (name === 'value' &&
+      (element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement)) ||
+    (name === 'checked' && element instanceof HTMLInputElement)
+  )
+}
+
+export function ensureControlledFormRestoration(element: Element): () => void {
+  const existing = controlledRestorationCleanups.get(element)
+  if (existing !== undefined) return () => {}
+
+  const schedule = (event: Event): void => {
+    if (!isReactFormChangeEvent(element, event.type)) return
+    const root = element.getRootNode()
+    let restored = false
+    const restore = (): void => {
+      if (restored) return
+      restored = true
+      root.removeEventListener(event.type, restore)
+      restoreControlledFormState(element)
+    }
+    root.addEventListener(event.type, restore, { once: true })
+    setTimeout(restore, 0)
+  }
+  element.addEventListener('input', schedule)
+  element.addEventListener('change', schedule)
+  const cleanup = (): void => {
+    element.removeEventListener('input', schedule)
+    element.removeEventListener('change', schedule)
+    controlledRestorationCleanups.delete(element)
+  }
+  controlledRestorationCleanups.set(element, cleanup)
+  return cleanup
+}
+
+export function isReactFormChangeEvent(element: Element, eventName: string): boolean {
+  if (element instanceof HTMLTextAreaElement) return eventName === 'input'
+  if (element instanceof HTMLSelectElement) return eventName === 'change'
+  if (!(element instanceof HTMLInputElement)) return false
+  return element.type === 'checkbox' || element.type === 'radio' || element.type === 'file'
+    ? eventName === 'change'
+    : eventName === 'input'
+}
+
+export function applyFormProp(element: Element, name: string, value: unknown): boolean {
+  if (name === 'value') {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+      if (value === undefined) {
+        delete remember(element)[0]
+        return true
+      }
+      const next = value === null || value === undefined ? '' : String(value)
+      remember(element)[0] = next
+      if (element.value !== next) element.value = next
+      return true
+    }
+    if (element instanceof HTMLSelectElement) {
+      if (value === undefined) {
+        delete remember(element)[0]
+        return true
+      }
+      const next = normalizeSelectValue(element, value)
+      remember(element)[0] = value
+      applySelectValue(element, next)
+      return true
+    }
+  }
+
+  if (name === 'checked' && element instanceof HTMLInputElement) {
+    if (value === undefined) {
+      delete remember(element)[1]
+      return true
+    }
+    const next = Boolean(value)
+    remember(element)[1] = next
+    if (element.checked !== next) element.checked = next
+    return true
+  }
+  if (name === 'defaultValue' && 'defaultValue' in element) {
+    const next = value === null || value === undefined ? '' : String(value)
+    if (Reflect.get(element, 'defaultValue') !== next) Reflect.set(element, 'defaultValue', next)
+    return true
+  }
+  if (name === 'defaultChecked' && element instanceof HTMLInputElement) {
+    element.defaultChecked = Boolean(value)
+    return true
+  }
+  if (name === 'selected' && element instanceof HTMLOptionElement) {
+    element.selected = Boolean(value)
+    return true
+  }
+  if (name === 'multiple' && element instanceof HTMLSelectElement) {
+    element.multiple = Boolean(value)
+    return true
+  }
+  if (name === 'muted' && element instanceof HTMLMediaElement) {
+    element.muted = Boolean(value)
+    return true
+  }
+  return false
+}
+
+function restoreControlledForm(form: HTMLFormElement): void {
+  for (const element of form.elements) {
+    if (element instanceof Element) restoreControlledFormState(element)
+  }
+}
+
+export function resetActionForm(form: HTMLFormElement): void {
+  for (const element of form.elements) {
+    const controlled = controlledFormStates.get(element)
+    if (controlled?.[0] !== undefined || controlled?.[1] !== undefined) continue
+    if (element instanceof HTMLInputElement) {
+      if (element.type === 'checkbox' || element.type === 'radio') {
+        element.checked = element.defaultChecked
+      } else {
+        element.value = element.type === 'file' ? '' : element.defaultValue
+      }
+      continue
+    }
+    if (element instanceof HTMLTextAreaElement) {
+      element.value = element.defaultValue
+      continue
+    }
+    if (element instanceof HTMLSelectElement) resetSelect(element)
+  }
+  restoreControlledForm(form)
+}
+
+export function restoreControlledFormState(element: Element): void {
+  restoreElement(element)
+  if (!(element instanceof HTMLInputElement) || element.type !== 'radio' || element.name === '') {
+    return
+  }
+
+  const root = element.getRootNode()
+  if (!(root instanceof Document || root instanceof ShadowRoot)) return
+  const escapedName = CSS.escape(element.name)
+  for (const candidate of root.querySelectorAll<HTMLInputElement>(
+    `input[type="radio"][name="${escapedName}"]`,
+  )) {
+    if (candidate !== element && candidate.form === element.form) restoreElement(candidate)
+  }
+}
+
+function restoreElement(element: Element): void {
+  const state = controlledFormStates.get(element)
+  if (state === undefined) return
+  if (state[0] !== undefined) {
+    if (element instanceof HTMLSelectElement) {
+      applySelectValue(element, normalizeSelectValue(element, state[0]))
+    } else if (
+      (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) &&
+      element.value !== state[0]
+    ) {
+      element.value = String(state[0])
+    }
+  }
+  if (
+    state[1] !== undefined &&
+    element instanceof HTMLInputElement &&
+    element.checked !== state[1]
+  ) {
+    element.checked = state[1]
+  }
+}
+
+function remember(element: Element): ControlledFormState {
+  const existing = controlledFormStates.get(element)
+  if (existing !== undefined) return existing
+  const state: ControlledFormState = []
+  controlledFormStates.set(element, state)
+  return state
+}
+
+function normalizeSelectValue(element: HTMLSelectElement, value: unknown): unknown {
+  if (!element.multiple) return value === null || value === undefined ? '' : String(value)
+  if (value === null || value === undefined) return []
+  if (!Array.isArray(value)) {
+    throw new TypeError(DEV ? 'a controlled <select multiple> value must be an array' : 'V301')
+  }
+  return value.map(String)
+}
+
+function applySelectValue(element: HTMLSelectElement, value: unknown): void {
+  if (!element.multiple) {
+    const selected = String(value)
+    let matched = false
+    for (const option of element.options) {
+      const next = option.value === selected
+      option.selected = next
+      matched ||= next
+    }
+    if (!matched) element.selectedIndex = -1
+    return
+  }
+
+  const selected = new Set(value as readonly string[])
+  for (const option of element.options) option.selected = selected.has(option.value)
+}
+
+function resetSelect(element: HTMLSelectElement): void {
+  let selected = false
+  for (const option of element.options) {
+    option.selected = option.defaultSelected
+    selected ||= option.selected
+  }
+  if (!element.multiple && !selected && element.options.length > 0) {
+    element.options[0]!.selected = true
+  }
+}

package/src/dom/intrinsic.ts

@@ -0,0 +1,94 @@
+const DEV = typeof __VIDACT_DEV__ === 'undefined' || __VIDACT_DEV__
+
+export const INTERNAL_NAMESPACE_PROP = '__vidactNamespace'
+export const INTERNAL_COMPONENT_SPREAD_PROP = Symbol(DEV ? 'Vidact.ComponentSpread' : undefined)
+
+export type IntrinsicNamespace = 'html' | 'svg' | 'mathml'
+
+interface NamespaceDomCapability {
+  readonly childrenNamespace: (type: string, namespace: IntrinsicNamespace) => IntrinsicNamespace
+  readonly createElement: (
+    document: Document,
+    type: string,
+    namespace: IntrinsicNamespace,
+  ) => Element
+  readonly resolveNamespace: (
+    type: string,
+    explicit: IntrinsicNamespace | undefined,
+    inherited: IntrinsicNamespace,
+  ) => IntrinsicNamespace
+}
+
+let activeNamespace: IntrinsicNamespace = 'html'
+let namespaceCapability: NamespaceDomCapability | undefined
+
+/** @internal */
+export function installNamespaceDomCapability(capability: NamespaceDomCapability): void {
+  namespaceCapability = capability
+}
+
+export function currentIntrinsicNamespace(): IntrinsicNamespace {
+  return activeNamespace
+}
+
+export function readIntrinsicNamespace(
+  props: Record<string, unknown> | null,
+): IntrinsicNamespace | undefined {
+  const value = props?.[INTERNAL_NAMESPACE_PROP]
+  return value === 'html' || value === 'svg' || value === 'mathml' ? value : undefined
+}
+
+export function createComponentProps(
+  props: Record<string, unknown> | null,
+  children: readonly unknown[],
+): Record<string, unknown> {
+  const publicProps: Record<string, unknown> = { ...props }
+  if (children.length === 1) publicProps.children = children[0]
+  else if (children.length > 1) publicProps.children = children
+  delete publicProps[INTERNAL_NAMESPACE_PROP]
+  delete publicProps.key
+  if (publicProps.ref === undefined) delete publicProps.ref
+  const propsWithDirective = publicProps as Record<PropertyKey, unknown>
+  const directive = propsWithDirective[INTERNAL_COMPONENT_SPREAD_PROP]
+  delete propsWithDirective[INTERNAL_COMPONENT_SPREAD_PROP]
+  return typeof directive === 'function'
+    ? (directive(publicProps) as Record<string, unknown>)
+    : publicProps
+}
+
+export function withIntrinsicNamespace<Result>(
+  namespace: IntrinsicNamespace | undefined,
+  render: () => Result,
+): Result {
+  const previous = activeNamespace
+  activeNamespace = namespace ?? previous
+  try {
+    return render()
+  } finally {
+    activeNamespace = previous
+  }
+}
+
+export function createIntrinsicElement(
+  document: Document,
+  type: string,
+  namespace: IntrinsicNamespace,
+): Element {
+  return (
+    namespaceCapability?.createElement(document, type, namespace) ?? document.createElement(type)
+  )
+}
+
+export function resolveIntrinsicNamespace(
+  type: string,
+  namespace: IntrinsicNamespace | undefined,
+): IntrinsicNamespace {
+  return namespaceCapability?.resolveNamespace(type, namespace, activeNamespace) ?? activeNamespace
+}
+
+export function intrinsicChildrenNamespace(
+  type: string,
+  namespace: IntrinsicNamespace,
+): IntrinsicNamespace {
+  return namespaceCapability?.childrenNamespace(type, namespace) ?? namespace
+}

package/src/dom/namespace.ts

@@ -0,0 +1,30 @@
+import { installNamespaceDomCapability, type IntrinsicNamespace } from './intrinsic.ts'
+import { MATHML_NAMESPACE, SVG_NAMESPACE } from './namespaces.ts'
+
+let enabled = false
+
+/** @internal Compiler-injected activation for SVG and MathML namespace behavior. */
+export function enableDomNamespace(): void {
+  if (enabled) return
+  enabled = true
+  installNamespaceDomCapability({
+    childrenNamespace: (type, namespace) =>
+      namespace === 'svg' && type === 'foreignObject' ? 'html' : namespace,
+    createElement(document, type, namespace) {
+      if (namespace === 'svg') return document.createElementNS(SVG_NAMESPACE, type)
+      if (namespace === 'mathml') return document.createElementNS(MATHML_NAMESPACE, type)
+      return document.createElement(type)
+    },
+    resolveNamespace(type, explicit, inherited) {
+      if (explicit !== undefined) return explicit
+      return rootNamespace(type, inherited)
+    },
+  })
+}
+
+function rootNamespace(type: string, inherited: IntrinsicNamespace): IntrinsicNamespace {
+  if (inherited !== 'html') return inherited
+  if (type === 'svg') return 'svg'
+  if (type === 'math') return 'mathml'
+  return inherited
+}

package/src/dom/namespaces.ts

@@ -0,0 +1,14 @@
+import type { IntrinsicNamespace } from './intrinsic.ts'
+
+export const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml'
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'
+export const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML'
+export const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink'
+export const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace'
+export const XMLNS_NAMESPACE = 'http://www.w3.org/2000/xmlns/'
+
+export function intrinsicNamespaceUrl(namespace: IntrinsicNamespace): string {
+  if (namespace === 'svg') return SVG_NAMESPACE
+  if (namespace === 'mathml') return MATHML_NAMESPACE
+  return HTML_NAMESPACE
+}