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

package/src/dom/properties.ts

@@ -0,0 +1,355 @@
+import { validateRawHtmlRelatedProp } from '../raw-html.ts'
+import {
+  MATHML_NAMESPACE,
+  SVG_NAMESPACE,
+  XLINK_NAMESPACE,
+  XML_NAMESPACE,
+  XMLNS_NAMESPACE,
+} from './namespaces.ts'
+
+const DEV = typeof __VIDACT_DEV__ === 'undefined' || __VIDACT_DEV__
+const UNSAFE_HTML = typeof __VIDACT_UNSAFE_HTML__ === 'undefined' || __VIDACT_UNSAFE_HTML__
+
+const booleanAttributes = new Set([
+  'allowFullScreen',
+  'async',
+  'autoFocus',
+  'autoPlay',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'disablePictureInPicture',
+  'disableRemotePlayback',
+  'formNoValidate',
+  'hidden',
+  'inert',
+  'itemScope',
+  'loop',
+  'noModule',
+  'noValidate',
+  'open',
+  'playsInline',
+  'readOnly',
+  'required',
+  'reversed',
+])
+const booleanishStringAttributes = new Set(['contentEditable', 'draggable', 'spellCheck'])
+const overloadedBooleanAttributes = new Set(['capture', 'download'])
+const mathBooleanishStringAttributes = new Set([
+  'accent',
+  'accentunder',
+  'displaystyle',
+  'fence',
+  'largeop',
+  'movablelimits',
+  'separator',
+  'stretchy',
+  'symmetric',
+])
+const svgBooleanishStringAttributes = new Set(['focusable', 'preserveAlpha'])
+
+const kebabCaseSvgAttributes = new Set([
+  'accentHeight',
+  'alignmentBaseline',
+  'arabicForm',
+  'baselineShift',
+  'capHeight',
+  'clipPath',
+  'clipRule',
+  'colorInterpolation',
+  'colorInterpolationFilters',
+  'colorProfile',
+  'colorRendering',
+  'dominantBaseline',
+  'enableBackground',
+  'fillOpacity',
+  'fillRule',
+  'floodColor',
+  'floodOpacity',
+  'fontFamily',
+  'fontSize',
+  'fontSizeAdjust',
+  'fontStretch',
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'glyphName',
+  'glyphOrientationHorizontal',
+  'glyphOrientationVertical',
+  'horizAdvX',
+  'horizOriginX',
+  'imageRendering',
+  'letterSpacing',
+  'lightingColor',
+  'markerEnd',
+  'markerMid',
+  'markerStart',
+  'overlinePosition',
+  'overlineThickness',
+  'paintOrder',
+  'pointerEvents',
+  'renderingIntent',
+  'shapeRendering',
+  'stopColor',
+  'stopOpacity',
+  'strikethroughPosition',
+  'strikethroughThickness',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeLinecap',
+  'strokeLinejoin',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+  'textAnchor',
+  'textDecoration',
+  'textRendering',
+  'transformOrigin',
+  'underlinePosition',
+  'underlineThickness',
+  'unicodeBidi',
+  'unicodeRange',
+  'unitsPerEm',
+  'vAlphabetic',
+  'vHanging',
+  'vIdeographic',
+  'vMathematical',
+  'vectorEffect',
+  'vertAdvY',
+  'vertOriginX',
+  'vertOriginY',
+  'wordSpacing',
+  'writingMode',
+  'xHeight',
+])
+
+type DomPropHandler = (element: Element, name: string, value: unknown) => boolean
+
+export interface FormDomCapability {
+  readonly applyProp: DomPropHandler
+  readonly ensureControlledRestoration: (element: Element) => () => void
+  readonly isControlledProp: (element: Element, name: string) => boolean
+  readonly isReactChangeEvent: (element: Element, eventName: string) => boolean
+  readonly restoreControlledState: (element: Element) => void
+}
+
+type StyleDomCapability = (element: Element, value: unknown) => void
+
+let formCapability: FormDomCapability | undefined
+let styleCapability: StyleDomCapability | undefined
+const NOOP = (): void => {}
+
+/** @internal */
+export function installFormDomCapability(capability: FormDomCapability): void {
+  formCapability = capability
+}
+
+/** @internal */
+export function installStyleDomCapability(capability: StyleDomCapability): void {
+  styleCapability = capability
+}
+
+/** @internal */
+export function ensureControlledFormRestoration(element: Element): () => void {
+  return formCapability?.ensureControlledRestoration(element) ?? NOOP
+}
+
+/** @internal */
+export function isControlledFormProp(element: Element, name: string): boolean {
+  return formCapability?.isControlledProp(element, name) ?? false
+}
+
+/** @internal */
+export function isReactFormChangeEvent(element: Element, eventName: string): boolean {
+  return formCapability?.isReactChangeEvent(element, eventName) ?? false
+}
+
+/** @internal */
+export function restoreControlledFormState(element: Element): void {
+  formCapability?.restoreControlledState(element)
+}
+
+export let applyDomProp = applyBaseDomProp
+
+export function installDomPropHandler(handler: DomPropHandler): void {
+  const fallback = applyDomProp
+  applyDomProp = (element, name, value) => {
+    if (!handler(element, name, value)) fallback(element, name, value)
+  }
+}
+
+/** @internal Specialized capabilities may own a prop while reusing the base policy. */
+export function applyBaseDomProp(element: Element, name: string, value: unknown): void {
+  if (typeof value === 'symbol') {
+    throw new TypeError(DEV ? `DOM prop ${name} cannot receive a symbol value` : 'V105')
+  }
+  if (name === 'dangerouslySetInnerHTML') {
+    throw new Error(
+      DEV ? 'dangerouslySetInnerHTML must be handled as an owned opaque subtree' : 'V401',
+    )
+  }
+  if (name === 'style') {
+    if (styleCapability === undefined) {
+      throw new Error(DEV ? 'style prop requires the DOM style capability' : 'V503')
+    }
+    styleCapability(element, value)
+    return
+  }
+  if (formCapability?.applyProp(element, name, value)) return
+  if (name.startsWith('data-') || name.startsWith('aria-')) {
+    applyStringAttribute(element, name, value)
+    return
+  }
+  if (element.namespaceURI === SVG_NAMESPACE || element.namespaceURI === MATHML_NAMESPACE) {
+    applyNamespacedAttribute(element, name, value)
+    return
+  }
+
+  const attribute = htmlAttributeName(name)
+  if (value === null || value === undefined) {
+    element.removeAttribute(attribute)
+    if (isCustomElement(element) && name in element) Reflect.set(element, name, null)
+    validateRawHtmlProp(element, name)
+    return
+  }
+  if (booleanishStringAttributes.has(name)) {
+    element.setAttribute(attribute, String(value))
+    return
+  }
+  if (overloadedBooleanAttributes.has(name)) {
+    if (value === false) element.removeAttribute(attribute)
+    else element.setAttribute(attribute, value === true ? '' : String(value))
+    return
+  }
+  if (booleanAttributes.has(name)) {
+    if (name in element) {
+      const next = Boolean(value)
+      if (!Object.is(Reflect.get(element, name), next)) Reflect.set(element, name, next)
+    } else if (value) element.setAttribute(attribute, '')
+    else element.removeAttribute(attribute)
+    return
+  }
+  if (typeof value === 'boolean') {
+    element.removeAttribute(attribute)
+    return
+  }
+  const serialized = String(value)
+  if (element.getAttribute(attribute) === serialized) {
+    validateRawHtmlProp(element, name)
+    return
+  }
+  if (name in element) {
+    const current = Reflect.get(element, name)
+    if (
+      !isCustomElement(element) &&
+      (Object.is(current, value) || String(current) === serialized)
+    ) {
+      validateRawHtmlProp(element, name)
+      return
+    }
+    if (Reflect.set(element, name, value)) {
+      validateRawHtmlProp(element, name)
+      return
+    }
+  }
+  if (element.getAttribute(attribute) !== serialized) {
+    element.setAttribute(attribute, serialized)
+  }
+  validateRawHtmlProp(element, name)
+}
+
+function applyStringAttribute(element: Element, name: string, value: unknown): void {
+  if (value === null || value === undefined) element.removeAttribute(name)
+  else {
+    if (typeof value === 'symbol') {
+      throw new TypeError(`cannot apply a Symbol value to DOM attribute ${name}`)
+    }
+    let serialized: string
+    try {
+      serialized = String(value)
+    } catch (cause) {
+      const detail = Array.isArray(value)
+        ? value.map((item) => (typeof item === 'symbol' ? String(item) : typeof item)).join(',')
+        : typeof value
+      throw new TypeError(`cannot serialize DOM attribute ${name} from ${detail}`, { cause })
+    }
+    if (element.getAttribute(name) !== serialized) element.setAttribute(name, serialized)
+  }
+}
+
+function applyNamespacedAttribute(element: Element, name: string, value: unknown): void {
+  const descriptor = namespacedAttribute(name)
+  if (value === null || value === undefined) {
+    if (descriptor.namespace === null) element.removeAttribute(descriptor.qualifiedName)
+    else element.removeAttributeNS(descriptor.namespace, descriptor.localName)
+    return
+  }
+  if (
+    (element.namespaceURI === MATHML_NAMESPACE && mathBooleanishStringAttributes.has(name)) ||
+    (element.namespaceURI === SVG_NAMESPACE && svgBooleanishStringAttributes.has(name))
+  ) {
+    element.setAttribute(descriptor.qualifiedName, String(value))
+    return
+  }
+  if (value === false) {
+    if (descriptor.namespace === null) element.removeAttribute(descriptor.qualifiedName)
+    else element.removeAttributeNS(descriptor.namespace, descriptor.localName)
+    return
+  }
+  const serialized = value === true ? '' : String(value)
+  if (descriptor.namespace === null) element.setAttribute(descriptor.qualifiedName, serialized)
+  else element.setAttributeNS(descriptor.namespace, descriptor.qualifiedName, serialized)
+}
+
+function namespacedAttribute(name: string): {
+  namespace: string | null
+  qualifiedName: string
+  localName: string
+} {
+  if (name.startsWith('xlink') && name.length > 5) {
+    const localName = lowerInitial(name.slice(5))
+    return { namespace: XLINK_NAMESPACE, qualifiedName: `xlink:${localName}`, localName }
+  }
+  if (name === 'xmlnsXlink') {
+    return {
+      namespace: XMLNS_NAMESPACE,
+      qualifiedName: 'xmlns:xlink',
+      localName: 'xlink',
+    }
+  }
+  if (name.startsWith('xml') && name.length > 3) {
+    const localName = lowerInitial(name.slice(3))
+    return { namespace: XML_NAMESPACE, qualifiedName: `xml:${localName}`, localName }
+  }
+  const qualifiedName = svgAttributeName(name)
+  return { namespace: null, qualifiedName, localName: qualifiedName }
+}
+
+function svgAttributeName(name: string): string {
+  if (name === 'className') return 'class'
+  if (name === 'crossOrigin') return 'crossorigin'
+  if (name === 'tabIndex') return 'tabindex'
+  if (!kebabCaseSvgAttributes.has(name)) return name
+  return name.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)
+}
+
+function htmlAttributeName(name: string): string {
+  if (name === 'className') return 'class'
+  if (name === 'htmlFor') return 'for'
+  if (name === 'acceptCharset') return 'accept-charset'
+  if (name === 'httpEquiv') return 'http-equiv'
+  return name
+}
+
+function isCustomElement(element: Element): element is HTMLElement {
+  return element instanceof HTMLElement && element.localName.includes('-')
+}
+
+function validateRawHtmlProp(element: Element, name: string): void {
+  if (UNSAFE_HTML && element instanceof HTMLElement) validateRawHtmlRelatedProp(element, name)
+}
+
+function lowerInitial(value: string): string {
+  return `${value.charAt(0).toLowerCase()}${value.slice(1)}`
+}

package/src/dom/style-properties.ts

@@ -0,0 +1,46 @@
+export const UNITLESS_STYLE_PROPERTIES: ReadonlySet<string> = new Set([
+  'animationIterationCount',
+  'aspectRatio',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'fillOpacity',
+  'flex',
+  'flexGrow',
+  'flexNegative',
+  'flexOrder',
+  'flexPositive',
+  'flexShrink',
+  'floodOpacity',
+  'fontWeight',
+  'gridArea',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnSpan',
+  'gridColumnStart',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowSpan',
+  'gridRowStart',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'scale',
+  'stopOpacity',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+])

package/src/dom/styles.ts

@@ -0,0 +1,86 @@
+import { isHydrating } from '../hydration-bridge.ts'
+import { UNITLESS_STYLE_PROPERTIES } from './style-properties.ts'
+
+const DEV = typeof __VIDACT_DEV__ === 'undefined' || __VIDACT_DEV__
+let retainedUiEnabled = typeof __VIDACT_RETAINED_UI__ !== 'undefined' && __VIDACT_RETAINED_UI__
+
+/** @internal */
+export function enableRetainedUiStyles(): void {
+  retainedUiEnabled = true
+}
+
+const appliedStyleNames = new WeakMap<Element, Set<string>>()
+
+export function applyStyleProp(element: Element, value: unknown): void {
+  const style = Reflect.get(element, 'style')
+  if (!(style instanceof CSSStyleDeclaration)) {
+    throw new TypeError(
+      DEV ? 'style is only supported on elements with CSS style declarations' : 'V501',
+    )
+  }
+  if (value !== null && value !== undefined && typeof value !== 'object') {
+    throw new TypeError(DEV ? 'style prop expects an object, null, or undefined' : 'V502')
+  }
+
+  const previous = appliedStyleNames.get(element) ?? new Set<string>()
+  const nextEntries =
+    value === null || value === undefined ? [] : Object.entries(value as Record<string, unknown>)
+  const nextNames = new Set<string>()
+  for (const [name] of nextEntries) nextNames.add(name)
+
+  for (const name of previous) {
+    if (!nextNames.has(name)) setStyleValue(style, name, '')
+  }
+  for (const [name, next] of nextEntries) {
+    const serialized = serializeStyleValue(name, next)
+    if (
+      !retainedUiEnabled ||
+      !isHydrating() ||
+      hydrationStyleValue(element, style, name) !== serialized
+    ) {
+      setStyleValue(style, name, serialized)
+    }
+  }
+
+  if (nextNames.size === 0) {
+    appliedStyleNames.delete(element)
+    if (element.getAttribute('style') === '') element.removeAttribute('style')
+  } else {
+    appliedStyleNames.set(element, nextNames)
+  }
+}
+
+function hydrationStyleValue(element: Element, style: CSSStyleDeclaration, name: string): string {
+  if (
+    name === 'display' &&
+    style.display === 'none' &&
+    style.getPropertyPriority('display') === 'important'
+  ) {
+    const cssText = element.getAttribute('style')
+    const hiddenDeclaration = 'display:none!important'
+    if (cssText?.endsWith(hiddenDeclaration)) {
+      const authored = document.createElement('div').style
+      authored.cssText = cssText.slice(0, -hiddenDeclaration.length)
+      return authored.display
+    }
+  }
+  if (name.startsWith('--') || name.includes('-')) return style.getPropertyValue(name)
+  return String(Reflect.get(style, name === 'float' ? 'cssFloat' : name) ?? '')
+}
+
+function serializeStyleValue(name: string, value: unknown): string {
+  if (value === null || value === undefined || typeof value === 'boolean' || value === '') return ''
+  if (name.startsWith('--')) return String(value).trim()
+  if (typeof value === 'number' && value !== 0 && !UNITLESS_STYLE_PROPERTIES.has(name)) {
+    return `${value}px`
+  }
+  return String(value).trim()
+}
+
+function setStyleValue(style: CSSStyleDeclaration, name: string, value: string): void {
+  if (name.startsWith('--') || name.includes('-')) {
+    style.setProperty(name, value)
+    return
+  }
+  Reflect.set(style, name === 'float' ? 'cssFloat' : name, value)
+}

package/src/dom-forms.ts

@@ -0,0 +1,23 @@
+import {
+  applyFormProp,
+  ensureControlledFormRestoration,
+  isControlledFormProp,
+  isReactFormChangeEvent,
+  restoreControlledFormState,
+} from './dom/forms.ts'
+import { installFormDomCapability } from './dom/properties.ts'
+
+let enabled = false
+
+/** @internal Compiler-injected activation for form-specific DOM behavior. */
+export function enableDomForms(): void {
+  if (enabled) return
+  enabled = true
+  installFormDomCapability({
+    applyProp: applyFormProp,
+    ensureControlledRestoration: ensureControlledFormRestoration,
+    isControlledProp: isControlledFormProp,
+    isReactChangeEvent: isReactFormChangeEvent,
+    restoreControlledState: restoreControlledFormState,
+  })
+}

package/src/dom-styles.ts

@@ -0,0 +1,11 @@
+import { installStyleDomCapability } from './dom/properties.ts'
+import { applyStyleProp } from './dom/styles.ts'
+
+let enabled = false
+
+/** @internal Compiler-injected activation for object-valued style props. */
+export function enableDomStyles(): void {
+  if (enabled) return
+  enabled = true
+  installStyleDomCapability(applyStyleProp)
+}

package/src/env.d.ts

@@ -0,0 +1,6 @@
+// oxlint-disable-next-line no-underscore-dangle -- Compiler/runtime production define.
+/* oxlint-disable no-underscore-dangle -- Runtime build constants intentionally use reserved global names. */
+
+declare const __VIDACT_DEV__: boolean
+declare const __VIDACT_UNSAFE_HTML__: boolean
+declare const __VIDACT_RETAINED_UI__: boolean