AI-Native Rendering Engine (@vue/compiler-json)

[likeswinds]

RFC: AI-Native Rendering Engine (@vue/compiler-json)

Summary

Proposing @vue/compiler-json, a dedicated core package designed to treat normalized, flattened JSON schemas as high-performance rendering inputs. Unlike standard runtime JSON-to-VDOM mappers, this engine implements Ahead-of-Time (AOT) and Just-in-Time (JIT) optimizations—specifically Static Hoisting and Patch Flags—to bridge the gap between AI-generated data and Vue’s optimized virtual DOM.

Motivation

As the industry shifts toward AI-Driven Development, the primary consumer of UI frameworks is increasingly AI models rather than human developers.

1. LLM Token Efficiency: AI models are significantly more reliable and cost-effective when generating structured JSON compared to complex SFC (Single File Component) templates.
2. Structural Determinism: JSON schemas eliminate common AI "hallucinations" such as syntax errors, missing closing tags, or incorrect ESM imports.
3. Streaming UI: In modern AI workflows (e.g., v0, Bolt.new), UI must be streamed and rendered dynamically. A native JSON compiler allows Vue to render these streams with the same performance as pre-compiled templates, without a heavy build step.

Detailed Design

1. The Normalized Flat Schema

To optimize for AI generation and runtime lookup, the compiler utilizes a flat element map:

{
  "root": "vnode_1",
  "elements": {
    "vnode_1": {
      "type": "div",
      "props": { "class": "container" },
      "children": ["vnode_2"]
    },
    "vnode_2": {
      "type": "span",
      "props": { "content": "{{ user.name }}" }
    }
  }
}

2. Compiler Optimizations

The engine will port core logic from compiler-dom to the JSON context:

• Static Hoisting: Elements marked with patchFlag: -1 (or detected as static) are hoisted out of the render function to avoid memory re-allocation during re-renders.
• Patch Flags: The compiler pre-identifies dynamic parts (Text, Class, Props). The runtime uses these bitwise flags to skip diffing for static attributes.
• JIT Render Function: The compiler generates a highly optimized function body string and instantiates it via new Function(), ensuring execution speed is indistinguishable from standard Vue components.

3. Proposed API

import { compileJSON } from '@vue/compiler-json';

// 1. Compile the JSON schema into an optimized render function
const renderFn = compileJSON(mySchema);

// 2. Use within a Vue component
export default {
  setup(props) {
    return () => renderFn({
      ...props.context
    });
  }
}

Drawbacks

• Security: The use of JIT compilation (new Function) requires a strict security policy and potentially a "no-eval" version for restricted environments.
• Bundle Size: Adding compiler logic to the runtime build increases the initial library footprint.

Adoption Strategy

This should be introduced as an experimental, standalone package (@vue/compiler-json). If the community adopts it as the standard for AI-generated UI or Server-Driven UI (SDUI), it can be integrated deeper into the Vue core.

Unresolved questions

• How to handle Scoped Slots and complex Component Events within the JSON schema?
• Integration with Vue DevTools for debugging compiled JSON structures.
  抱歉，英文比较差，只能求助AI了，可以看下这个,感觉用vue底层实现优势更大 https://json-render.dev/

[qianYuanJ]

牛逼

[yuguaa]

支持！

[aniruddhaadak80]

Hey @likeswinds,

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!