SVG to PNG with a React graph component

Installation

yarn install

Running the service

make dev

Visit it in your browser

open http://localhost:8080/graph
open http://localhost:8080/graph.svg
open http://localhost:8080/graph.png
open http://localhost:8080/graph.jpeg

How does it work?

It's a simple express service that uses a custom engine (see engines/react-typescript.mjs) that does the following:

1. Transpile the React components from components/**/* to a commonjs module with _jsx calls (not React.createComponent, see https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
2. Transform the transpiled output (a string) to a module
3. Feed that module to ReactDOMServer.renderToStaticMarkup to receive the finalized markup – it's an SVG powered by visx.

The resulting SVG is rasterized to either a PNG or JPEG file using sharp – see util/rasterize.mjs.