@json-render/codegen

Utilities for generating code from UI trees.

Tree Traversal

traverseTree

Walk the UI tree depth-first.

function traverseTree(
  tree: UITree,
  visitor: TreeVisitor,
  startKey?: string
): void

interface TreeVisitor {
  (element: UIElement, depth: number, parent: UIElement | null): void;
}

collectUsedComponents

Get all unique component types used in a tree.

function collectUsedComponents(tree: UITree): Set<string>

// Example
const components = collectUsedComponents(tree);
// Set { 'Card', 'Metric', 'Chart' }

collectDataPaths

Get all data paths referenced in props (valuePath, dataPath, bindPath, etc.).

function collectDataPaths(tree: UITree): Set<string>

// Example
const paths = collectDataPaths(tree);
// Set { 'analytics/revenue', 'analytics/customers' }

collectActions

Get all action names used in the tree.

function collectActions(tree: UITree): Set<string>

// Example
const actions = collectActions(tree);
// Set { 'submit_form', 'refresh_data' }

Serialization

serializePropValue

Serialize a single value to a code string.

function serializePropValue(
  value: unknown,
  options?: SerializeOptions
): { value: string; needsBraces: boolean }

// Examples
serializePropValue("hello")
// { value: '"hello"', needsBraces: false }

serializePropValue(42)
// { value: '42', needsBraces: true }

serializePropValue({ path: 'user/name' })
// { value: '{ path: "user/name" }', needsBraces: true }

serializeProps

Serialize a props object to a JSX attributes string.

function serializeProps(
  props: Record<string, unknown>,
  options?: SerializeOptions
): string

// Example
serializeProps({ title: 'Dashboard', columns: 3, disabled: true })
// 'title="Dashboard" columns={3} disabled'

escapeString

Escape a string for use in code.

function escapeString(
  str: string,
  quotes?: 'single' | 'double'
): string

Types

GeneratedFile

interface GeneratedFile {
  /** File path relative to project root */
  path: string;
  /** File contents */
  content: string;
}

CodeGenerator

interface CodeGenerator {
  /** Generate files from a UI tree */
  generate(tree: UITree): GeneratedFile[];
}

SerializeOptions

interface SerializeOptions {
  /** Quote style for strings */
  quotes?: 'single' | 'double';
  /** Indent for objects/arrays */
  indent?: number;
}