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

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