feat(joint-react): server-side rendering + new @joint/svg-shim package

[samuelgja]

Description

Adds server-side rendering for JointJS and a new reusable package that makes it possible.

New package: @joint/svg-shim

A headless DOM + SVG-geometry shim so @joint/core's Vectorizer / dia.Paper runs in Node, with no browser. It plugs exactly the holes a headless DOM leaves:

• Installs a headless DOM (jsdom by default; happy-dom or a custom window factory also supported).
• Polyfills the missing SVG geometry — getBBox, SVGMatrix/SVGPoint/SVGTransform, transform lists, font-size coercion, HTMLImageElement.
• Measures text with the real font via the bundled @napi-rs/canvas, so server-measured labels match the browser pixel-for-pixel.

Production-ready: ESM/CJS/types build, Jest tests, shared @joint/eslint-config, README, .gitignore. Exports ., ./install (side-effect entry), and a client-safe ./flag subpath (zero Node imports) so the browser bundle never pulls the Node-only shim. It is reusable by both @joint/core (pure) and @joint/react via an injectable text-style resolver.

@joint/react server rendering

import '@joint/react/server' installs the shim and registers a server paper renderer, so a plain <GraphProvider><Paper renderElement={…}/></GraphProvider> rendered with renderToString emits the full diagram SVG inline, which then hydrates into the live, interactive paper on the client. jsdom/@napi-rs/canvas moved to optional peers on @joint/svg-shim, so client-only consumers install nothing extra.

Examples (packages/joint-svg-shim/examples)

• react-ssr — Vite + Express: server-render the interactive diagram, ship it as SVG, hydrate on the client. Styled. Works with JavaScript disabled.
• core-static — pure @joint/core: build a diagram in Node, serialize with paper.svg.outerHTML, serve as static HTML. No React, no client JS.

Motivation and Context

JointJS builds diagrams from real SVG DOM and measures geometry through it (getBBox, matrices, text width). In Node there is no DOM, and even a headless DOM implements no SVG layout — so a server-rendered paper collapses (labels lose size, links lose geometry). @joint/svg-shim makes server rendering work and correct, unlocking SEO-friendly first paint, emailable diagrams, and @joint/react SSR + hydration. The shim is isolated as its own package so @joint/core can reuse it later without depending on React.

Screenshots (if appropriate):

@joint/core on the server — pure @joint/core + @joint/svg-shim: the diagram is built in Node, serialized with paper.svg.outerHTML, and shipped as static SVG in the HTML. No browser, no client JavaScript, not interactive.

@joint/react on the server — renderToString ships the full diagram as SVG in the HTML (works with JavaScript disabled), then hydrates into the live, interactive JointJS paper on the client.