ead of splitting fields into disabled / disabledOn, Flux treats disabled as a single field. The compiler analyzes the value and classifies it into one of five node types:

type CompiledValueNode<T> =
  | { kind: 'static-node'; value: T }
  | { kind: 'expression-node'; source: string; compiled: CompiledExpression<T> }
  | { kind: 'template-node'; source: string; compiled: CompiledStringTemplate<T> }
  | { kind: 'array-node'; items: CompiledValueNode[] }
  | { kind: 'object-node'; keys: string[]; entries: Record<string, CompiledValueNode> };

At runtime, these compile-time nodes are wrapped into executable CompiledRuntimeValue structures:

type CompiledRuntimeValue<T> =
  | { kind: 'static'; isStatic: true; node: StaticValueNode<T>; value: T }
  | {
      kind: 'dynamic';
      isStatic: false;
      node: DynamicValueNode<T>;
      createState(): RuntimeValueState<T>;
      exec(context, env, state): ValueEvaluationResult<T>;
    };

Static nodes follow a zero-cost fast path. Dynamic nodes carry evaluation closures and state tracking. Constant expressions are automatically optimized to static values during compilation, eliminating dynamic overhead. Literal $ symbols in templates are escaped via ${'$'}.

Full-Value Tree Compilation

Flux compiles the entire schema value tree, not just isolated expressions. For purely static configurations:

{
  "type": "button",
  "label": "Submit",
  "disabled": false,
  "className": "btn-primary"
}

The compiler triggers a one-time JIT compilation, recognizes the static node, caches the result, and returns direct object references on subsequent accesses.

For mixed static/dynamic configurations:

{
  "type": "button",
  "label": "Submit",
  "disabled": "${$form.submitting}",
  "className": "${$form.submitting ? 'btn-disabled' : 'btn-primary'}"
}

The compiler generates an object-node where each dynamic field maintains independent evaluation state. At runtime, RuntimeValueState tracks previous computed values. The assembled object is compared using shallowEqual; if field references remain unchanged, the previous object reference is reused. The reusedReference flag in ValueEvaluationResult signals callers whether a new allocation occurred. This guarantees reference stability for React's reconciliation algorithm, preventing unnecessary subtree re-renders.

Pitfall Guide

1. Elevating Value Semantics to Schema Structure: Avoid splitting properties into xxx and xxxOn variants. This externalizes value-level distinctions to the object structure, causing schema bloat and extension conflicts. Let the compiler handle static vs dynamic classification at the value level.
2. Ignoring Compile-Time Constant Folding: Writing ${1 + 2} instead of 3 is syntactically valid but defeats the static fast path. Trust the compiler's constant folding; avoid wrapping trivial static data in expression syntax unless runtime variability is explicitly required.
3. Prop Drilling for System Context: Passing store, env, data, and render functions through every component layer breaks encapsulation and inflates renderer interfaces. Centralize system dependencies at the renderer boundary using a unified execution context or dependency injection.
4. Mutating Compiled Runtime Values: CompiledRuntimeValue is an executable wrapper, not a mutable data container. Direct mutation bypasses state tracking, corrupts RuntimeValueState, and breaks shallowEqual reference reuse. Always route updates through the framework's evaluation pipeline.
5. Over-Optimizing AI-Generated Schemas: AI generation favors explicit, deterministic schemas over implicit conventions. Do not force implicit defaults or aggressive minification that break AI predictability. Embrace schema redundancy when it improves reviewability and local modification reliability.
6. Bypassing RuntimeValueState for Dynamic Nodes: Each dynamic field must maintain isolated state. Sharing state across fields causes cross-contamination, incorrect dependency tracking, and false reusedReference flags. Ensure state initialization is scoped per-node during compilation.
7. Assuming Runtime Expression Evaluation is Free: Traditional frameworks evaluate expressions on every render pass. Without compile-time classification, dynamic evaluation incurs closure creation, context binding, and garbage collection overhead. Always leverage the compiled tree to separate static fast paths from dynamic evaluation boundaries.

Deliverables

• Flux Architecture Blueprint: Complete compilation pipeline flowchart covering schema ingestion, CompiledValueNode classification, JIT compilation, runtime execution context, and React reconciliation integration.
• Schema Validation & AI-Generation Checklist: 12-point verification matrix for unified value semantics, compile-time optimization readiness, reference stability guarantees, and AI-friendly explicitness standards.
• Configuration Templates: Production-ready TypeScript definitions for CompiledValueNode and CompiledRuntimeValue, runtime context initialization boilerplate, and RuntimeValueState management patterns for custom renderers.