partial-vue

Prefix-tolerant compiler and state-preserving renderer for streaming Vue single-file components. Like .svelte, the .vue format is its own file type, so this package owns both GenUI roles: the prefix completer and the renderer.

Input

import { GenUIVueRenderer } from "partial-vue";

const renderer = GenUIVueRenderer.create(document.getElementById("preview"));
renderer.render('<script setup>\nimport { ref } from "vue"\nconst count = ref(0)\n</script>\n<template><button @click="count++">{{ count }}', undefined, true);

Output

• normalizeGeneratedVue(code) returns a compilable SFC, and is monotonic: rendered output only ever grows across prefix frames — content that appeared never disappears. The edge-case policy matches partial-tsx:
  • Markdown fences stripped; incomplete top-level blocks closed (<script>/<style> raw text repaired, <template> tags force-closed).
  • Plain string attribute values may stream partially (class="p-4 tex → closed quote).
  • Expressions are never auto-completed: an unclosed mustache ({{ count) or an unsafe directive tail (:title="user.) rolls back instead of guessing.
  • An incomplete structural directive (v-if / v-else-if / v-for / v-show) defers the whole element — committing it unconditionally and hiding it a frame later would regress rendered output.
  • Incomplete trailing script statements roll back to the last safe boundary, scanning strings/templates/comments/regex as opaque.
• createVueCompiler().compile(code, { partial: true }) compiles fully in the browser via @vue/compiler-sfc: script and template compile separately (non-inline) so a template-only frame yields a standalone render-function module; TS is stripped and imports rewritten through the import map by @esm.sh/tsx in one pass.
• collectVueDiagnostics(code) is a non-throwing compiler-only pass (not a semantic type checker).

Demo editor

The demo's Vue editor uses a lazy Volar + TypeScript worker for script/template diagnostics, inferred hover types, member completion, definitions and references. Diagnostics map back to the original SFC, not the generated TS. Installed Vue, TypeScript and Volar declarations are bundled with the worker, so core type checking does not depend on a runtime type CDN. React/TSX pages do not load this worker. Editing is debounced and stale results are discarded after edits, language switches or model disposal. Startup failures are reported in the editor and retried on edit.

This is a single-file demo language environment, not a full project IDE: arbitrary remote npm/import-map types and Pug/preprocessor templates are not supported by this worker.

State preservation

The default vue import target is the dev runtime build (vue.runtime.esm-browser.js), which installs __VUE_HMR_RUNTIME__. The renderer keys every compile to a stable __hmrId:

• Same compiled component setup and scoped-style flag across frames → the new render function swaps in through rerender, patching the DOM in place: refs, focus, and input state survive.
• Changed setup or style scope → clean remount; state resets. The signature includes template-used imports, v-model setters, and CSS v-bind() variables emitted by compileScript, not just the raw <script> text.
• Ordinary CSS-only edits replace the stylesheet without remounting. Changing the import map forces a remount.

DOM-node identity across a rerender additionally requires a stable template root shape (element → fragment re-creates nodes); reactive state survives either way.

Test

bun test lib/partial-vue