observablehq · mbostock · Feb 15, 2024 · Feb 17, 2024 · Feb 17, 2024 · Feb 17, 2024
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,6 @@ docs/themes.md
 docs/theme/*.md
 dist/
 node_modules/
-test/output/*-changed.*
-test/output/build/*-changed/
+test/output/**/*-changed.*
+test/output/build/**/*-changed/
 yarn-error.log
diff --git a/bin/observable.ts b/bin/observable.ts
@@ -2,7 +2,6 @@ import {type ParseArgsConfig, parseArgs} from "node:util";
 import * as clack from "@clack/prompts";
 import {readConfig} from "../src/config.js";
 import {CliError} from "../src/error.js";
-import {enableNpmVersionResolution, enableRemoteModulePreload} from "../src/javascript/imports.js";
 import {faint, link, red} from "../src/tty.js";
 
 const args = process.argv.slice(2);
@@ -150,8 +149,6 @@ try {
         else if (name === "open") values.open = true;
       }
       const {config, root, host, port, open} = values;
-      enableNpmVersionResolution(false);
-      enableRemoteModulePreload(false);
       await import("../src/preview.js").then(async (preview) =>
         preview.preview({
           config: await readConfig(config, root),

diff --git a/docs/css/card.md b/docs/css/card.md
@@ -10,7 +10,7 @@ The `card` class is used to group and delineate content. The `card` classes appl
 </div>
 ```
 
-<div class="tip"><a href="../lib/plot">Observable Plot</a>’s <b>title</b> and <b>subtitle</b> options generate <code>h2</code> and <code>h3</code> elements, respectively, and so will inherit these card styles.<code>
+<div class="tip"><a href="../lib/plot">Observable Plot</a>’s <b>title</b> and <b>subtitle</b> options generate <code>h2</code> and <code>h3</code> elements, respectively, and so will inherit these card styles.</div>
 
 Cards can be used on their own, but they most often exist in a [grid](./grid). Cards can contain whatever you like, including text, images, charts, tables, inputs, and more.
 

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -303,7 +303,7 @@ async function json(url) {
 const station = await json(`https://api.weather.gov/points/&dollar;{latitude},&dollar;{longitude}`);
 const forecast = await json(station.properties.forecastHourly);
 
-process.stdout.write(JSON.stringify(forecast));</pre>
+process.stdout.write(JSON.stringify(forecast));</code></pre>
 
 ```js
 const location = view(Locator([-122.47, 37.8]));

diff --git a/docs/inputs/button.md b/docs/inputs/button.md
@@ -2,7 +2,7 @@
 
 <a href="https://github.com/observablehq/inputs/blob/main/README.md#button" target="_blank">API</a> · <a href="https://github.com/observablehq/inputs/blob/main/src/button.js" target="_blank">Source</a> · The button input emits an *input* event when you click it. Buttons may be used to trigger the evaluation of cells, say to restart an animation. For example, below is an animation that progressively hides a bar. Clicking the button will restart the animation.
 
-<canvas id="canvas" width="360" height="20" style="max-width: 100%; color: var(--theme-foreground-focus); border: solid 1px var(--theme-foreground);">
+<canvas id="canvas" width="360" height="20" style="max-width: 100%; color: var(--theme-foreground-focus); border: solid 1px var(--theme-foreground);"></canvas>
 
 ```js echo
 const replay = view(Inputs.button("Replay"));

diff --git a/docs/inputs/search.md b/docs/inputs/search.md
@@ -4,7 +4,12 @@
 
 By default, the query is split into terms separated by spaces; each term is then prefix-matched against the property values (the fields) of each row in the data. Try searching for “gen” below to find Gentoo penguins.
 
-```js echo
+```js
+const searchInput = Inputs.search(penguins, {placeholder: "Search penguins…"});
+const search = view(searchInput);
+```
+
+```js run=false
 const search = view(Inputs.search(penguins, {placeholder: "Search penguins…"}));
 ```
 
@@ -19,11 +24,11 @@ Inputs.table(search)
 ```
 
 ```js
-const input = document.querySelector("input[placeholder='Search penguins…']");
 for (const abbr of document.querySelectorAll("abbr")) {
   abbr.title = `Search for “${abbr.textContent}”`;
   abbr.style.cursor = "default";
   abbr.onclick = () => {
+    const input = searchInput.querySelector("input");
     input.value = abbr.textContent;
     input.dispatchEvent(new Event("input", {bubbles: true}));
   };

diff --git a/docs/javascript/bar.js b/docs/javascript/bar.js
@@ -0,0 +1 @@
+export const bar = "bar";
diff --git a/docs/javascript/files.md b/docs/javascript/files.md
@@ -145,15 +145,15 @@ A common gotcha with JSON is that it has no built-in date type; dates are theref
 
 To display an image, you can use a static image in [Markdown](../markdown) such as `<img src="horse.jpg">` or `![horse](horse.jpg)`. Likewise, you can use a `video` or `audio` element. Per [file-based routing](../routing#files), static references to these files are automatically detected and therefore these files will be included in the built output.
 
-<video src="horse.mp4" autoplay muted loop controls>
+<video src="horse.mp4" autoplay muted loop controls></video>
 
-```md
-<video src="horse.mp4" autoplay muted loop controls>
+```html run=false
+<video src="horse.mp4" autoplay muted loop controls></video>
 ```
 
 If you want to manipulate an image in JavaScript, use `file.image`. For example, below we load an image and invert the RGB channel values.
 
-<canvas id="horse-canvas" width="640" height="512" style="max-width: 100%;">
+<canvas id="horse-canvas" width="640" height="512" style="max-width: 100%;"></canvas>
 
 ```js echo
 const canvas = document.querySelector("#horse-canvas");

diff --git a/docs/javascript/foo.js b/docs/javascript/foo.js
@@ -1 +1,2 @@
+export {bar} from "./bar.js"
 export const foo = 42;
diff --git a/docs/javascript/reactivity.md b/docs/javascript/reactivity.md
@@ -38,7 +38,7 @@ const colors = ["#4269d0", "#efb118", "#ff725c", "#6cc5b0"];
 const duration = 2000;
 ```
 
-<canvas id="canvas" width="640" height="30" style="max-width: 100%; height: 30px;">
+<canvas id="canvas" width="640" height="30" style="max-width: 100%; height: 30px;"></canvas>
 
 ```js echo
 const canvas = document.querySelector("#canvas");
@@ -60,7 +60,7 @@ invalidation.then(() => cancelAnimationFrame(frame));
 
 The `visibility` function returns a promise that resolves when the code block’s display root is visible. This allows you to defer animation or computation until the content scrolls into view. If you missed the animation, try reloading the page and then scrolling down.
 
-<canvas id="canvas2" width="640" height="30" style="max-width: 100%; height: 30px;">
+<canvas id="canvas2" width="640" height="30" style="max-width: 100%; height: 30px;"></canvas>
 
 ```js echo
 await visibility(); // wait until this node is visible

diff --git a/docs/lib/shapefile.md b/docs/lib/shapefile.md
@@ -43,7 +43,9 @@ Plot.plot({
 
 Or, streaming to a canvas:
 
-<canvas id="map-canvas" width="960" height="491" style="max-width: 100%;">
+<figure style="max-width: 100%;">
+  <canvas id="map-canvas" width="960" height="491"></canvas>
+</figure>
 
 ```js echo
 const canvas = document.querySelector("#map-canvas");
@@ -52,8 +54,12 @@ context.fillStyle = getComputedStyle(canvas).color;
 context.clearRect(0, 0, canvas.width, canvas.height);
 
 const path = d3.geoPath(d3.geoEquirectangular(), context);
-const stream = await FileAttachment("ne_110m_land/ne_110m_land.shp").url();
-const source = await shapefile.open(stream);
+const source = await shapefile.open(
+  ...(await Promise.all([
+    FileAttachment("ne_110m_land/ne_110m_land.shp").stream(),
+    FileAttachment("ne_110m_land/ne_110m_land.dbf").stream()
+  ]))
+);
 
 while (true) {
   const {done, value} = await source.read();

diff --git a/docs/lib/vega-lite.md b/docs/lib/vega-lite.md
@@ -25,33 +25,17 @@ Or you can use a [Vega-Lite JSON view specification](https://vega.github.io/vega
 ```js echo
 vl.render({
   spec: {
-    "width": 640,
-    "height": 400,
-    "data": {
-      "url": await FileAttachment("gistemp.csv").url()
-    },
-    "mark": "point",
-    "encoding": {
-      "x": {
-        "type": "temporal",
-        "field": "Date"
-      },
-      "y": {
-        "type": "quantitative",
-        "field": "Anomaly"
-      },
-      "color": {
-        "type": "quantitative",
-        "field": "Anomaly",
-        "scale": {
-          "range": "diverging",
-          "reverse": true
-        }
-      }
+    width: 640,
+    height: 400,
+    data: {url: await FileAttachment("gistemp.csv").url(), format: {type: "csv"}},
+    mark: "point",
+    encoding: {
+      x: {type: "temporal", field: "Date"},
+      y: {type: "quantitative", field: "Anomaly"},
+      color: {type: "quantitative", field: "Anomaly", scale: {range: "diverging", reverse: true}}
     }
   }
 })
 ```
 
 <div class="tip">When loading data from a file as above, use <a href="../javascript/files"><code>FileAttachment</code></a> so that referenced files are included on <a href="../getting-started#build">build</a>.</div>
-
diff --git a/docs/lib/xlsx.md b/docs/lib/xlsx.md
@@ -60,6 +60,6 @@ Some additional details on values: dates are interpreted as UTC; formula results
 
 If you’d prefer to use [ExcelJS](https://github.com/exceljs/exceljs) directly, you can import it like so:
 
-```js echo
+```js run=false
 import Excel from "npm:exceljs";
 ```
diff --git a/docs/markdown.md b/docs/markdown.md
@@ -2,8 +2,6 @@
 
 Markdown in Observable Framework follows the [CommonMark spec](https://spec.commonmark.org/) and is powered by [markdown-it](https://github.com/markdown-it/markdown-it).  We also feature [live JavaScript](./javascript) as either [fenced code blocks](./javascript#fenced-code-blocks) (<code>```js</code>) or [inline expressions](./javascript#inline-expressions) (<code>$\{…}</code>), and [HTML in Markdown](#html), and [front matter](#front-matter) for page-level configuration. If you don’t already know Markdown, please see [GitHub’s guide to Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) for an introduction.
 
-<div class="note">Observable Framework currently deviates from CommonMark in how blank lines are handled in HTML; see below. This is a limitation of our parser needed for incremental update during preview.</div>
-
 Here are a few examples of Markdown content to get you started.
 
 ## Front matter
@@ -104,30 +102,4 @@ This produces:
   This text is not visible by default.
 </details>
 
-In Markdown, blank lines denote separate HTML blocks; be sure to avoid blank lines if you want to treat a chunk of HTML as a single block. For example, write this:
-
-```md
-<!-- 👍 one HTML block -->
-<ul>
-  <li>one</li>
-  <li>two</li>
-  <li>three</li>
-</ul>
-```
-
-Don’t write this:
-
-```md
-<!-- 👎 three HTML blocks -->
-<ul>
-
-  <li>one</li>
-  <li>two</li>
-  <li>three</li>
-
-</ul>
-```
-
-In the latter case, the li elements become top-level and wrapped in a span, rather than children of the ul.
-
 Also see [Hypertext Literal](./lib/htl) for generating dynamic HTML in JavaScript.
diff --git a/package.json b/package.json
@@ -55,21 +55,21 @@
     "ci-info": "^4.0.0",
     "esbuild": "^0.19.8",
     "fast-array-diff": "^1.1.0",
-    "fast-deep-equal": "^3.1.3",
     "gray-matter": "^4.0.3",
     "he": "^1.2.0",
     "highlight.js": "^11.8.0",
     "is-docker": "^3.0.0",
     "is-wsl": "^3.1.0",
+    "jsdom": "^24.0.0",
     "jszip": "^3.10.1",
-    "linkedom": "^0.15.6",
     "markdown-it": "^13.0.2",
     "markdown-it-anchor": "^8.6.7",
     "mime": "^3.0.0",
     "minisearch": "^6.3.0",
     "open": "^9.1.0",
     "rollup": "^4.6.0",
     "rollup-plugin-esbuild": "^6.1.0",
+    "semver": "^7.5.4",
     "send": "^0.18.0",
     "tar-stream": "^3.1.6",
     "tsx": "~4.2.1",
@@ -78,7 +78,9 @@
     "ws": "^8.14.2"
   },
   "devDependencies": {
+    "@types/d3-array": "^3.2.1",
     "@types/he": "^1.2.3",
+    "@types/jsdom": "^21.1.6",
     "@types/markdown-it": "^13.0.2",
     "@types/mime": "^3.0.2",
     "@types/mocha": "^10.0.2",
@@ -98,6 +100,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
+    "fast-deep-equal": "^3.1.3",
     "mocha": "^10.2.0",
     "prettier": "^3.0.3 <3.1",
     "typescript": "^5.2.2",
-Original file line number
+Diff line change
@@ Expand Up @@
     </div>
     ```
-    <div class="tip"><a href="../lib/plot">Observable Plot</a>’s <b>title</b> and <b>subtitle</b> options generate <code>h2</code> and <code>h3</code> elements, respectively, and so will inherit these card styles.<code>
+    <div class="tip"><a href="../lib/plot">Observable Plot</a>’s <b>title</b> and <b>subtitle</b> options generate <code>h2</code> and <code>h3</code> elements, respectively, and so will inherit these card styles.</div>
     Cards can be used on their own, but they most often exist in a [grid](./grid). Cards can contain whatever you like, including text, images, charts, tables, inputs, and more.
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export {bar} from "./bar.js"
		export const foo = 42;