better client-side hydration (#1560)

Author: mbostock

docs/components/PlotRender.js

@@ -116,6 +116,16 @@ class TextNode {
   }
 }
 
+// Converts the real DOM to virtual DOM (for client-side hydration).
+function toHyperScript(node) {
+  if (node.nodeType === 3) return node.nodeValue; // TextNode
+  const props = {};
+  for (const name of node.getAttributeNames()) props[name] = node.getAttribute(name);
+  const children = [];
+  for (let child = node.firstChild; child; child = child.nextSibling) children.push(toHyperScript(child));
+  return h(node.tagName, props, children);
+}
+
 export default {
   props: {
     options: Object,
@@ -197,6 +207,11 @@ export default {
         ]
       );
     }
-    return Plot[method]({...options, document: new Document()}).toHyperScript();
+    if (typeof document !== "undefined") {
+      const plot = Plot[method](options);
+      const replace = (el) => el.firstChild.replaceWith(plot);
+      return withDirectives(h("span", [toHyperScript(plot)]), [[{mounted: replace, updated: replace}]]);
+    }
+    return h("span", [Plot[method]({...options, document: new Document()}).toHyperScript()]);
   }
 };

docs/marks/auto.md

@@ -19,7 +19,7 @@ onMounted(() => {
 
 The magic ✨ **auto mark** automatically selects a mark type that best represents the given dimensions of the data according to some simple heuristics. The auto mark—which powers [Observable’s chart cell](https://observablehq.com/@observablehq/chart-cell)—is intended to support fast exploratory analysis where the goal is to get a useful plot as quickly as possible. For example, two quantitative dimensions make a scatterplot:
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-scatterplot
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-scatterplot
 ```js
 Plot.auto(penguins, {x: "body_mass_g", y: "flipper_length_mm"}).plot()
 ```
@@ -36,7 +36,7 @@ Because its heuristics are likely to evolve, they are not explicitly documented;
 
 A monotonically increasing dimension (here *Date*, as the data is ordered chronologically), paired with a numeric column (*Close*), makes a line chart:
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-line-chart
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-line-chart
 ```js
 Plot.auto(aapl, {x: "Date", y: "Close"}).plot()
 ```
@@ -50,7 +50,7 @@ Plot.auto(olympians, {x: "weight"}).plot()
 ```
 :::
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-ordinal-histogram
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-ordinal-histogram
 ```js
 Plot.auto(penguins, {x: "island"}).plot()
 ```
@@ -60,7 +60,7 @@ This is easier than deciding whether to use bin and rect, or group and bar: the
 
 If you’d like to explicitly avoid grouping the data, you can opt out of the reducer, and get a one-dimensional plot:
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-barcode
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-barcode
 ```js
 Plot.auto(penguins, {x: "body_mass_g", y: {reduce: null}}).plot()
 ```
@@ -92,21 +92,21 @@ Plot.auto(olympians, {x: "weight", y: "sex", color: "count"}).plot()
 
 Similarly, with explicit marks and transforms, changing a vertical histogram to a horizontal histogram involves switching [rectY](./rect.md#recty-data-options) to [rectX](./rect.md#rectx-data-options), [binX](../transforms/bin.md#binx-outputs-options) to [binY](../transforms/bin.md#biny-outputs-options), **x** to **y**, and **y** to **x**. With the auto mark, just specify **y** instead of **x**:
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-horizontal-histogram
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-horizontal-histogram
 ```js
 Plot.auto(penguins, {y: "island"}).plot()
 ```
 :::
 
 For the sake of seamless switching, the auto mark has just one color channel, which it assigns to either **fill** or **stroke** depending on the mark. We can see that clearly by overriding a line chart with the **mark** option to make an area chart:
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-color-channel
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-color-channel
 ```js
 Plot.auto(industries, {x: "date", y: "unemployed", color: "industry"}).plot()
 ```
 :::
 
-:::plot defer
+:::plot
 ```js
 Plot.auto(industries, {x: "date", y: "unemployed", color: "industry", mark: "area"}).plot()
 ```
@@ -126,15 +126,15 @@ Plot
 
 You can similarly pass a **zero** option to indicate that zero is meaningful for either **x** or **y**. This adds a corresponding rule to the returned mark.
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-zero-option
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-zero-option
 ```js
 Plot.auto(industries, {x: "date", y: {value: "unemployed", zero: true}, color: "industry"}).plot()
 ```
 :::
 
 The auto mark has a **size** channel, which (currently) always results in a dot. For now, it’s an alias for the dot’s **r** channel; in the future it will also represent a vector’s **length** channel.
 
-:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-size-channel
+:::plot https://observablehq.com/@observablehq/plot-auto-mark-size-channel
 ```js
 Plot.auto(aapl, {x: "Date", y: "Close", size: "Volume"}).plot()
 ```