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: 340 },
		title: 'Framework-neutral source',
		mode: 'embedded-css'
	}).svg;
}

source:CELL2 "3 V" at (80, 130) #blue [type=battery]
resistor:RLIM "100 \Omega" at (330, 130) #amber
diode:IND "power" at (580, 130) #emerald [type=led]
ground:G2 "0 V" at (580, 260) #slate

CELL2.positive -> RLIM.in #blue [ortho]
RLIM.out -> IND.anode #amber [ortho]
IND.cathode -> G2.in #emerald [ortho]

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.