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]

支持！