Keep the compiler at a trusted server boundary

01 / HostCompile outside reactive component state

The contract is one sentence: take source plus a validated fence, call compileSchematic, mount the trusted result. Never import a DOM implementation, and never recompile because some unrelated piece of UI state moved — the compiler is a pure function of source and fence, and treating it as one is what keeps a component cheap.

export function renderDiagram(source: string) {
	return compileSchematic(source, {
		bounds: { width: 760, height: 320 },
		title: 'Framework-neutral source',
		mode: 'embedded-css'
	}).svg;
}

connector:IN "input" at (80, 130) #blue
amplifier:A "op-amp" right-of IN by 150 #cyan [type=opamp]
connector:OUT "output" right-of A by 180 #emerald

IN.out -> A.positive #blue [line]
A.out -> OUT.in #emerald [line]

Svelte derives the SVG from source and fence alone; React memoizes on those same two values; Vue and Angular hand the string through their trusted-HTML boundary. Note that this boundary is for compiler output and nothing else — arbitrary user HTML must never travel the same door.