Server-side rendering in Svelte

[beingflo]

Using plot in Svelte is very easy with the integration described here.
However this approach does not seem to support SSR out of the box. I've seen the examples in the docs, but they are about React and Vue, both virtual DOM frameworks.
I'm wondering if some brief documentation can be added to lay out how one would go about server-side rendering in Svelte, SolidJS or other compiler assisted frameworks.
Thanks a lot for the good work!

[mbostock]

I’m not enough of an expert with Svelte to know whether there’s a way to write a JavaScript component that generates DOM server-side with Svelte. If someone can point me to some examples, I’d be happy to investigate, but a preliminary read of Svelte’s documentation doesn’t suggest how this might be possible.

[beingflo]

Thanks for the quick reply!
I should have mentioned that I'm trying to get it working in SvelteKit. From some experimentation and asking on the SvelteKit discord I think it should be possible:

<script lang="ts">
    import * as Plot from '@observablehq/plot';
  
    const plot = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50" /> </svg>`;
</script>

{@html plot}

This will prerender the svg, I can see it in the server response.
Now, the only obstacle I suppose is the absence of document.

If I try this

<script lang="ts">
    import * as Plot from '@observablehq/plot';
  
    const plot = Plot.lineY([
        { x: 1, y: 1 },
        { x: 2, y: 2 },
    ]).plot();
</script>

{@html plot}

I get this error: Cannot read properties of undefined (reading 'documentElement')

[karimfromjordan]

I’m not enough of an expert with Svelte to know whether there’s a way to write a JavaScript component that generates DOM server-side with Svelte. If someone can point me to some examples, I’d be happy to investigate, but a preliminary read of Svelte’s documentation doesn’t suggest how this might be possible.

I think what you are referring to might be this: https://svelte.dev/docs#template-syntax-svelte-element

[mbostock]

Thanks for the guidance. I think {@html …} is what we’ll want here. We just need to pass Plot a DOM implementation that we can serialize to a string. JSDOM would work, but we can also adapt the tiny implementation I’ve written here:

plot/docs/components/PlotRender.js

Lines 4 to 111 in 0a38eb8

	class Document {
	constructor() {
	this.documentElement = new Element(this, "html");
	}
	createElementNS(namespace, tagName) {
	return new Element(this, tagName);
	}
	createElement(tagName) {
	return new Element(this, tagName);
	}
	createTextNode(value) {
	return new TextNode(this, value);
	}
	querySelector() {
	return null;
	}
	querySelectorAll() {
	return [];
	}
	}
	class Style {
	static empty = new Style();
	setProperty() {}
	removeProperty() {}
	}
	class Element {
	constructor(ownerDocument, tagName) {
	this.ownerDocument = ownerDocument;
	this.tagName = tagName;
	this.attributes = {};
	this.children = [];
	this.parentNode = null;
	}
	setAttribute(name, value) {
	this.attributes[name] = String(value);
	}
	setAttributeNS(namespace, name, value) {
	this.setAttribute(name, value);
	}
	getAttribute(name) {
	return this.attributes[name];
	}
	getAttributeNS(name) {
	return this.getAttribute(name);
	}
	hasAttribute(name) {
	return name in this.attributes;
	}
	hasAttributeNS(name) {
	return this.hasAttribute(name);
	}
	removeAttribute(name) {
	delete this.attributes[name];
	}
	removeAttributeNS(namespace, name) {
	this.removeAttribute(name);
	}
	appendChild(child) {
	this.children.push(child);
	child.parentNode = this;
	return child;
	}
	insertBefore(child, after) {
	if (after == null) {
	this.children.push(child);
	} else {
	const i = this.children.indexOf(after);
	if (i < 0) throw new Error("insertBefore reference node not found");
	this.children.splice(i, 0, child);
	}
	child.parentNode = this;
	return child;
	}
	querySelector() {
	return null;
	}
	querySelectorAll() {
	return [];
	}
	set textContent(value) {
	this.children = [this.ownerDocument.createTextNode(value)];
	}
	set style(value) {
	this.attributes.style = value;
	}
	get style() {
	return Style.empty;
	}
	toHyperScript() {
	return h(
	this.tagName,
	this.attributes,
	this.children.map((c) => c.toHyperScript())
	);
	}
	}
	class TextNode {
	constructor(ownerDocument, nodeValue) {
	this.ownerDocument = ownerDocument;
	this.nodeValue = String(nodeValue);
	}
	toHyperScript() {
	return this.nodeValue;
	}
	}

[beingflo]

Ok this seems to get rid of the error and I can see that the result of plot is an object which contains all the relevant bits.
To adapt the toHyperScript from the vue example I used this library, let me know if this makes any sense, I'm just throwing mud at the wall at this point.
This seems to give me a valid svg element, but I still don't manage to add it to the page. {@html } doesn't seem to do anything. Any clue how to proceed?

[jaysin586]

Would something like this work for you?

<script lang="ts">
    import * as Plot from '@observablehq/plot'
    import { onMount } from 'svelte'
    import * as d3 from 'd3'

    let data = d3.ticks(-2, 2, 200).map(Math.sin);

    onMount(() => {
        let div = document.querySelector('#myPlot')
        if (div) {
            let plotGraph = Plot.lineY(data).plot({grid: true})
            div.append(plotGraph)
        }
    })
</script>

<div id='myPlot'></div>

REPL

This allows the data to come from the server, and then it plots when the page is mounted.

Feedback is appreciated ❤️

[travishorn]

While the plot will render using your solution, it is rendered client-side (when the component mounts), not SSR.

[travishorn]

I was successful in forcing the plot to be generated server-side by creating a +page.server.js:

import * as Plot from '@observablehq/plot';
import { JSDOM } from 'jsdom';

const { document } = new JSDOM().window;

/** @type {import('./$types').PageServerLoad} */
export async function load() {
  const plot = Plot.plot({
    marks: [
      Plot.rectY(
        { length: 10000 },
        Plot.binX({ y: "count" }, { x: Math.random })
      )
    ],
    document
  }).outerHTML;

  return {
    plot
  };
}

Then, pick up the HTML string on +page.svelte:

<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

{@html data.plot}

FYI, I tried placing the rendering code in +page.svelte directly with no luck. It seems to only work in +page.server.js.