@use-voltra/core 2.0.0-rc.4 → 2.1.0

package/src/payload/short-names.ts

@@ -0,0 +1,379 @@
+/* eslint-disable */
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+/**
+ * Unified mapping from full names to short names
+ * Used for props and style properties
+ */
+export const NAME_TO_SHORT: Record<string, string> = {
+  absolutePosition: 'ap',
+  accentedRenderingMode: 'arm',
+  alignItems: 'ai',
+  alignment: 'al',
+  alignSelf: 'as',
+  alpha: 'a',
+  aspectRatio: 'ar',
+  assetName: 'an',
+  background: 'bkg',
+  backgroundColor: 'bg',
+  backgroundImage: 'bgi',
+  backgroundStyle: 'bgs',
+  base64: 'b64',
+  border: 'bd',
+  borderColor: 'bc',
+  borderRadius: 'br',
+  borderWidth: 'bw',
+  bottom: 'b',
+  buttonStyle: 'bs',
+  chartScrollableAxes: 'csa',
+  checked: 'chk',
+  checkedColor: 'chc',
+  clipped: 'clip',
+  color: 'c',
+  colorFilter: 'cf',
+  colors: 'cls',
+  columns: 'cols',
+  contentAlignment: 'ca',
+  contentColor: 'cc',
+  contentDescription: 'cdesc',
+  contentScale: 'csc',
+  cornerRadius: 'cr',
+  countDown: 'cd',
+  currentValueLabel: 'cvl',
+  deepLinkUrl: 'dlu',
+  defaultValue: 'dv',
+  destination: 'dest',
+  direction: 'dir',
+  dither: 'dth',
+  durationMs: 'dur',
+  enabled: 'en',
+  endAtMs: 'end',
+  endPoint: 'ep',
+  fallback: 'flb',
+  fillMaxHeight: 'fmh',
+  fillMaxWidth: 'fmw',
+  fixedSizeHorizontal: 'fsh',
+  fixedSizeVertical: 'fsv',
+  flex: 'fl',
+  flexBasis: 'fb',
+  flexDirection: 'fdir',
+  flexGrow: 'fg',
+  flexGrowWidth: 'fgw',
+  flexShrink: 'fk',
+  font: 'fnt',
+  fontFamily: 'ff',
+  fontSize: 'fs',
+  fontVariant: 'fvar',
+  fontWeight: 'fw',
+  foregroundStyle: 'fgs',
+  foregroundStyleScale: 'fss',
+  frame: 'f',
+  gap: 'g',
+  gaugeStyle: 'gs',
+  glassEffect: 'ge',
+  height: 'h',
+  horizontalAlignment: 'halig',
+  horizontalPadding: 'hp',
+  icon: 'ic',
+  iconColor: 'icc',
+  id: 'id',
+  italic: 'it',
+  justifyContent: 'jc',
+  kerning: 'kern',
+  label: 'lbl',
+  layout: 'ly',
+  layoutPriority: 'lp',
+  left: 'l',
+  legendVisibility: 'lgv',
+  letterSpacing: 'ls',
+  lineHeight: 'lh',
+  lineLimit: 'll',
+  lineSpacing: 'lsp',
+  lineWidth: 'lw',
+  margin: 'm',
+  marginBottom: 'mb',
+  marginHorizontal: 'mh',
+  marginLeft: 'ml',
+  marginRight: 'mr',
+  marginTop: 'mt',
+  marginVertical: 'mv',
+  marks: 'mrk',
+  maskElement: 'me',
+  maxHeight: 'maxh',
+  maximumValue: 'max',
+  maximumValueLabel: 'maxl',
+  maxLines: 'mxl',
+  maxWidth: 'maxw',
+  minHeight: 'minh',
+  minimumValue: 'min',
+  minimumValueLabel: 'minvl',
+  minLength: 'minl',
+  minWidth: 'minw',
+  monospacedDigit: 'md',
+  multilineTextAlignment: 'mta',
+  name: 'n',
+  numberOfLines: 'nol',
+  offset: 'off',
+  offsetX: 'ox',
+  offsetY: 'oy',
+  opacity: 'op',
+  overflow: 'ov',
+  padding: 'pad',
+  paddingBottom: 'pb',
+  paddingHorizontal: 'ph',
+  paddingLeft: 'pl',
+  paddingRight: 'pr',
+  paddingTop: 'pt',
+  paddingVertical: 'pv',
+  position: 'pos',
+  progress: 'prg',
+  progressColor: 'pc',
+  resizeMode: 'rm',
+  right: 'r',
+  rotationEffect: 're',
+  scale: 'sc',
+  scaleEffect: 'sce',
+  shadow: 'sh',
+  shadowColor: 'shc',
+  shadowOffset: 'sho',
+  shadowOpacity: 'shop',
+  shadowRadius: 'shr',
+  showHours: 'shrs',
+  size: 'sz',
+  smallCaps: 'smc',
+  source: 'src',
+  spacing: 'sp',
+  startAtMs: 'start',
+  startIcon: 'sic',
+  startPoint: 'stp',
+  stops: 'sts',
+  strikethrough: 'st',
+  style: 's',
+  systemImage: 'si',
+  text: 'txt',
+  textAlign: 'ta',
+  textColor: 'txc',
+  textDecorationLine: 'tdl',
+  textStyle: 'ts',
+  textTemplates: 'tt',
+  thumb: 'th',
+  thumbCheckedColor: 'thc',
+  thumbUncheckedColor: 'thu',
+  tint: 'tnt',
+  tintColor: 'tc',
+  title: 'ttl',
+  top: 't',
+  trackCheckedColor: 'trkc',
+  trackColor: 'trc',
+  trackUncheckedColor: 'trku',
+  transform: 'tf',
+  type: 'typ',
+  uncheckedColor: 'uchc',
+  underline: 'ul',
+  value: 'v',
+  verticalAlignment: 'valig',
+  weight: 'wt',
+  width: 'w',
+  xAxisGridStyle: 'xgs',
+  xAxisVisibility: 'xav',
+  yAxisGridStyle: 'ygs',
+  yAxisVisibility: 'yav',
+  zIndex: 'zi',
+}
+
+/**
+ * Reverse mapping from short names to full names
+ */
+export const SHORT_TO_NAME: Record<string, string> = {
+  ap: 'absolutePosition',
+  arm: 'accentedRenderingMode',
+  ai: 'alignItems',
+  al: 'alignment',
+  as: 'alignSelf',
+  a: 'alpha',
+  ar: 'aspectRatio',
+  an: 'assetName',
+  bkg: 'background',
+  bg: 'backgroundColor',
+  bgi: 'backgroundImage',
+  bgs: 'backgroundStyle',
+  b64: 'base64',
+  bd: 'border',
+  bc: 'borderColor',
+  br: 'borderRadius',
+  bw: 'borderWidth',
+  b: 'bottom',
+  bs: 'buttonStyle',
+  csa: 'chartScrollableAxes',
+  chk: 'checked',
+  chc: 'checkedColor',
+  clip: 'clipped',
+  c: 'color',
+  cf: 'colorFilter',
+  cls: 'colors',
+  cols: 'columns',
+  ca: 'contentAlignment',
+  cc: 'contentColor',
+  cdesc: 'contentDescription',
+  csc: 'contentScale',
+  cr: 'cornerRadius',
+  cd: 'countDown',
+  cvl: 'currentValueLabel',
+  dlu: 'deepLinkUrl',
+  dv: 'defaultValue',
+  dest: 'destination',
+  dir: 'direction',
+  dth: 'dither',
+  dur: 'durationMs',
+  en: 'enabled',
+  end: 'endAtMs',
+  ep: 'endPoint',
+  flb: 'fallback',
+  fmh: 'fillMaxHeight',
+  fmw: 'fillMaxWidth',
+  fsh: 'fixedSizeHorizontal',
+  fsv: 'fixedSizeVertical',
+  fl: 'flex',
+  fb: 'flexBasis',
+  fdir: 'flexDirection',
+  fg: 'flexGrow',
+  fgw: 'flexGrowWidth',
+  fk: 'flexShrink',
+  fnt: 'font',
+  ff: 'fontFamily',
+  fs: 'fontSize',
+  fvar: 'fontVariant',
+  fw: 'fontWeight',
+  fgs: 'foregroundStyle',
+  fss: 'foregroundStyleScale',
+  f: 'frame',
+  g: 'gap',
+  gs: 'gaugeStyle',
+  ge: 'glassEffect',
+  h: 'height',
+  halig: 'horizontalAlignment',
+  hp: 'horizontalPadding',
+  ic: 'icon',
+  icc: 'iconColor',
+  id: 'id',
+  it: 'italic',
+  jc: 'justifyContent',
+  kern: 'kerning',
+  lbl: 'label',
+  ly: 'layout',
+  lp: 'layoutPriority',
+  l: 'left',
+  lgv: 'legendVisibility',
+  ls: 'letterSpacing',
+  lh: 'lineHeight',
+  ll: 'lineLimit',
+  lsp: 'lineSpacing',
+  lw: 'lineWidth',
+  m: 'margin',
+  mb: 'marginBottom',
+  mh: 'marginHorizontal',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mt: 'marginTop',
+  mv: 'marginVertical',
+  mrk: 'marks',
+  me: 'maskElement',
+  maxh: 'maxHeight',
+  max: 'maximumValue',
+  maxl: 'maximumValueLabel',
+  mxl: 'maxLines',
+  maxw: 'maxWidth',
+  minh: 'minHeight',
+  min: 'minimumValue',
+  minvl: 'minimumValueLabel',
+  minl: 'minLength',
+  minw: 'minWidth',
+  md: 'monospacedDigit',
+  mta: 'multilineTextAlignment',
+  n: 'name',
+  nol: 'numberOfLines',
+  off: 'offset',
+  ox: 'offsetX',
+  oy: 'offsetY',
+  op: 'opacity',
+  ov: 'overflow',
+  pad: 'padding',
+  pb: 'paddingBottom',
+  ph: 'paddingHorizontal',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  pt: 'paddingTop',
+  pv: 'paddingVertical',
+  pos: 'position',
+  prg: 'progress',
+  pc: 'progressColor',
+  rm: 'resizeMode',
+  r: 'right',
+  re: 'rotationEffect',
+  sc: 'scale',
+  sce: 'scaleEffect',
+  sh: 'shadow',
+  shc: 'shadowColor',
+  sho: 'shadowOffset',
+  shop: 'shadowOpacity',
+  shr: 'shadowRadius',
+  shrs: 'showHours',
+  sz: 'size',
+  smc: 'smallCaps',
+  src: 'source',
+  sp: 'spacing',
+  start: 'startAtMs',
+  sic: 'startIcon',
+  stp: 'startPoint',
+  sts: 'stops',
+  st: 'strikethrough',
+  s: 'style',
+  si: 'systemImage',
+  txt: 'text',
+  ta: 'textAlign',
+  txc: 'textColor',
+  tdl: 'textDecorationLine',
+  ts: 'textStyle',
+  tt: 'textTemplates',
+  th: 'thumb',
+  thc: 'thumbCheckedColor',
+  thu: 'thumbUncheckedColor',
+  tnt: 'tint',
+  tc: 'tintColor',
+  ttl: 'title',
+  t: 'top',
+  trkc: 'trackCheckedColor',
+  trc: 'trackColor',
+  trku: 'trackUncheckedColor',
+  tf: 'transform',
+  typ: 'type',
+  uchc: 'uncheckedColor',
+  ul: 'underline',
+  v: 'value',
+  valig: 'verticalAlignment',
+  wt: 'weight',
+  w: 'width',
+  xgs: 'xAxisGridStyle',
+  xav: 'xAxisVisibility',
+  ygs: 'yAxisGridStyle',
+  yav: 'yAxisVisibility',
+  zi: 'zIndex',
+}
+
+/**
+ * Shorten a name using the unified mapping
+ * Returns the original name if no short form exists
+ */
+export function shorten(name: string): string {
+  return NAME_TO_SHORT[name] ?? name
+}
+
+/**
+ * Expand a short name back to the full name
+ * Returns the original value if no expansion exists
+ */
+export function expand(short: string): string {
+  return SHORT_TO_NAME[short] ?? short
+}

package/src/payload.ts

@@ -0,0 +1,23 @@
+const MAX_ACTIVITYKIT_BYTES = 4096
+const EFFECTIVE_JSON_BUDGET = 3345
+
+const utf8ByteLength = (s: string): number => {
+  try {
+    if (typeof TextEncoder !== 'undefined') return new TextEncoder().encode(s).length
+  } catch {}
+  try {
+    return encodeURI(s).replace(/%[A-F\d]{2}/gi, 'X').length
+  } catch {
+    return s.length
+  }
+}
+
+export const ensurePayloadWithinBudget = (compressedPayload: string): void => {
+  const bytes = utf8ByteLength(compressedPayload)
+
+  if (bytes > EFFECTIVE_JSON_BUDGET) {
+    throw new Error(
+      `[Voltra] Compressed payload size ${bytes}B exceeds safe budget ${EFFECTIVE_JSON_BUDGET}B (ActivityKit hard cap ${MAX_ACTIVITYKIT_BYTES}B). You need to reduce the complexity of your UI.`
+    )
+  }
+}

package/src/renderer/context-registry.ts

@@ -0,0 +1,40 @@
+import { Context } from 'react'
+
+declare module 'react' {
+  interface Context<T> {
+    _currentValue: T
+  }
+}
+
+export type ContextRegistry = {
+  pushProvider: <T>(context: Context<T>, value: T) => void
+  popProvider: <T>(context: Context<T>) => void
+  readContext: <T>(context: Context<T>) => T
+}
+
+export const getContextRegistry = (): ContextRegistry => {
+  const contextMap = new Map()
+
+  return {
+    pushProvider: <T>(context: Context<T>, value: T) => {
+      const stack = contextMap.get(context) || []
+      stack.push(value)
+      contextMap.set(context, stack)
+    },
+    popProvider: <T>(context: Context<T>) => {
+      const stack = contextMap.get(context)
+      if (stack) {
+        stack.pop()
+      }
+    },
+    readContext: <T>(context: Context<T>) => {
+      const stack = contextMap.get(context)
+
+      if (stack && stack.length > 0) {
+        return stack[stack.length - 1]
+      }
+
+      return context._currentValue
+    },
+  }
+}

package/src/renderer/dispatcher.ts

@@ -0,0 +1,105 @@
+import React, { Context, ReactDispatcher, ReactHooksDispatcher } from 'react'
+
+import { ContextRegistry } from './context-registry.js'
+
+const REACT_CONTEXT_TYPE = Symbol.for('react.context')
+const REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel')
+
+declare module 'react' {
+  type HookFn = (...args: any[]) => any
+
+  export type ReactHooksDispatcher = {
+    useState: HookFn
+    useReducer: HookFn
+    useEffect: HookFn
+    useLayoutEffect: HookFn
+    useInsertionEffect: HookFn
+    useCallback: HookFn
+    useMemo: HookFn
+    useRef: HookFn
+    useContext: HookFn
+    useId: HookFn
+    useImperativeHandle: HookFn
+    useDebugValue: HookFn
+    useDeferredValue: HookFn
+    useTransition: HookFn
+    useSyncExternalStore: HookFn
+    use: HookFn
+    useActionState: HookFn
+    useOptimistic: HookFn
+    useEffectEvent: HookFn
+    useMemoCache: HookFn
+    useCacheRefresh: HookFn
+  }
+
+  export type ReactDispatcher = {
+    H: ReactHooksDispatcher
+  }
+
+  let __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE: ReactDispatcher
+}
+
+export const getHooksDispatcher = (registry: ContextRegistry): ReactHooksDispatcher => ({
+  useContext: <T>(context: Context<T>) => registry.readContext(context),
+  use: <T>(usable: React.Usable<T>): T => {
+    if (
+      usable !== null &&
+      typeof usable === 'object' &&
+      (usable as { $$typeof?: symbol }).$$typeof === REACT_CONTEXT_TYPE
+    ) {
+      return registry.readContext(usable as unknown as Context<T>)
+    }
+
+    if (
+      usable !== null &&
+      (typeof usable === 'object' || typeof usable === 'function') &&
+      typeof (usable as { then?: unknown }).then === 'function'
+    ) {
+      throw new Error(
+        'use() with promises is not supported in Voltra. Async data fetching is not available in this synchronous renderer.'
+      )
+    }
+
+    throw new Error(`An unsupported type was passed to use(): ${String(usable)}`)
+  },
+  useState: <S>(initial?: S | (() => S)) => [
+    typeof initial === 'function' ? (initial as () => S)() : initial,
+    () => {},
+  ],
+  useReducer: <S, I, A extends React.AnyActionArg>(
+    _: (prevState: S, ...args: A) => S,
+    initialArg: I,
+    init?: (i: I) => S
+  ): [S, React.ActionDispatch<A>] => {
+    const state = init ? init(initialArg) : initialArg
+    return [state as S, () => {}]
+  },
+  useMemo: (factory) => factory(),
+  useCallback: (cb) => cb,
+  useRef: (initial) => ({ current: initial }),
+  useEffect: () => {},
+  useLayoutEffect: () => {},
+  useInsertionEffect: () => {},
+  useId: () => Math.random().toString(36).substr(2, 9),
+  useDebugValue: () => {},
+  useImperativeHandle: () => {},
+  useDeferredValue: <T>(value: T) => value,
+  useTransition: () => [false, (func: () => void) => func()],
+  useSyncExternalStore: (_, getSnapshot) => getSnapshot(),
+  useActionState: <S>(_: unknown, initialState: S, _permalink?: string) =>
+    [initialState, () => {}, false] as [S, () => void, boolean],
+  useOptimistic: <T>(passthrough: T) => [passthrough, () => {}] as [T, (action: unknown) => void],
+  useEffectEvent: <T extends Function>(callback: T): T => callback,
+  useMemoCache: (size: number) => {
+    const data = new Array<unknown>(size)
+    for (let i = 0; i < size; i++) {
+      data[i] = REACT_MEMO_CACHE_SENTINEL
+    }
+    return data
+  },
+  useCacheRefresh: () => () => {},
+})
+
+export const getReactCurrentDispatcher = (): ReactDispatcher => {
+  return React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+}

package/src/renderer/element-registry.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react'
+
+import { VoltraNodeJson } from '../types.js'
+
+export type ElementRegistry = {
+  isRegistered: (element: ReactNode) => number | undefined
+  register: (element: ReactNode, rendered: VoltraNodeJson) => number
+  getElements: () => VoltraNodeJson[]
+}
+
+export const createElementRegistry = (): ElementRegistry => {
+  const elementToIndex = new Map<ReactNode, number>()
+  const elements: VoltraNodeJson[] = []
+
+  return {
+    isRegistered: (element: ReactNode): number | undefined => {
+      return elementToIndex.get(element)
+    },
+    register: (element: ReactNode, rendered: VoltraNodeJson): number => {
+      const index = elements.length
+      elementToIndex.set(element, index)
+      elements.push(rendered)
+      return index
+    },
+    getElements: (): VoltraNodeJson[] => elements,
+  }
+}
+
+export const preScanForDuplicates = (element: ReactNode): Set<ReactNode> => {
+  const seen = new Set<ReactNode>()
+  const duplicates = new Set<ReactNode>()
+
+  const scan = (node: ReactNode): void => {
+    if (node === null || node === undefined || typeof node !== 'object') {
+      return
+    }
+
+    if (Array.isArray(node)) {
+      for (const child of node) {
+        scan(child)
+      }
+      return
+    }
+
+    if (seen.has(node)) {
+      duplicates.add(node)
+    } else {
+      seen.add(node)
+    }
+
+    if ('props' in node) {
+      const props = (node as { props: Record<string, unknown> }).props
+      if (props) {
+        if (props.children !== undefined) {
+          scan(props.children as ReactNode)
+        }
+
+        for (const [key, value] of Object.entries(props)) {
+          if (key !== 'children' && value && typeof value === 'object' && 'type' in value && 'props' in value) {
+            scan(value as ReactNode)
+          }
+        }
+      }
+    }
+  }
+
+  scan(element)
+  return duplicates
+}

package/src/renderer/flatten-styles.ts

@@ -0,0 +1,24 @@
+type StyleProp<T> = T | T[] | null | undefined | false
+
+type FlatStyleProp<T> = T extends (infer U)[] ? FlatStyleProp<U> : T
+
+export const flattenStyle = <T extends StyleProp<unknown>>(style: T | null | undefined): FlatStyleProp<T> | null => {
+  if (!style) {
+    return null
+  }
+
+  if (!Array.isArray(style)) {
+    return style as FlatStyleProp<T>
+  }
+
+  const result: Record<string, unknown> = {}
+  for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
+    const computedStyle = flattenStyle(style[i])
+    if (computedStyle) {
+      for (const key in computedStyle) {
+        result[key] = computedStyle[key]
+      }
+    }
+  }
+  return result as FlatStyleProp<T>
+}

package/src/renderer/index.ts

@@ -0,0 +1,14 @@
+export { type ContextRegistry, getContextRegistry } from './context-registry.js'
+export { getHooksDispatcher, getReactCurrentDispatcher } from './dispatcher.js'
+export { createElementRegistry, type ElementRegistry, preScanForDuplicates } from './element-registry.js'
+export { flattenStyle } from './flatten-styles.js'
+export { getRenderCache, type RenderCache } from './render-cache.js'
+export {
+  type ComponentRegistry,
+  createVoltraRenderer,
+  renderVariantToJson,
+  transformProps,
+  VOLTRA_PAYLOAD_VERSION,
+} from './renderer.js'
+export { createStylesheetRegistry, type StylesheetRegistry } from './stylesheet-registry.js'
+export type { VoltraVariantRenderer } from './types.js'

package/src/renderer/render-cache.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react'
+
+import { VoltraNodeJson } from '../types.js'
+import { VoltraVariantRenderer } from './types.js'
+
+export type RenderCache = {
+  getOrRender: VoltraVariantRenderer
+}
+
+export const getRenderCache = (renderer: VoltraVariantRenderer): RenderCache => {
+  const renderCache = new Map<ReactNode, VoltraNodeJson>()
+
+  return {
+    getOrRender: (node: ReactNode): VoltraNodeJson => {
+      const cached = renderCache.get(node)
+
+      if (cached) {
+        return cached
+      }
+
+      const result = renderer(node)
+      renderCache.set(node, result)
+
+      return result
+    },
+  }
+}