1.3.0 (#1048)

* update dependencies

* 1.3.0

* only notify if dark changed

* ylgnbu

Author: mbostock

docs/config.md

@@ -167,7 +167,7 @@ export default {
 
 The base path when serving the site. Currently this only affects the custom 404 page, if any.
 
-## cleanUrls <a href="https://github.com/observablehq/framework/pull/1037" target="_blank" class="observablehq-version-badge" data-version="prerelease" title="Added in #1037"></a>
+## cleanUrls <a href="https://github.com/observablehq/framework/releases/tag/v1.3.0" target="_blank" class="observablehq-version-badge" data-version="^1.3.0" title="Added in 1.3.0"></a>
 
 Whether page links should be “clean”, _i.e._, formatted without a `.html` extension. Defaults to true. If true, a link to `config.html` will be formatted as `config`. Regardless of this setting, a link to an index page will drop the implied `index.html`; for example `foo/index.html` will be formatted as `foo/`.
 
@@ -200,7 +200,7 @@ toc: false
 
 Whether to enable [search](./search) on the project; defaults to false.
 
-## interpreters <a href="https://github.com/observablehq/framework/pull/935" target="_blank" class="observablehq-version-badge" data-version="prerelease" title="Added in #935"></a>
+## interpreters <a href="https://github.com/observablehq/framework/releases/tag/v1.3.0" target="_blank" class="observablehq-version-badge" data-version="^1.3.0" title="Added in 1.3.0"></a>
 
 The **interpreters** option specifies additional interpreted languages for data loaders, indicating the file extension and associated interpreter. (See [loader routing](./loaders#routing) for more.) The default list of interpreters is:
 

docs/getting-started.md

@@ -221,7 +221,7 @@ Or with Yarn:
 
 You should see something like this:
 
-<pre data-copy="none"><b class="green">Observable Framework</b> v1.2.0
+<pre data-copy="none"><b class="green">Observable Framework</b> v1.3.0
 ↳ <u><a href="http://127.0.0.1:3000/" style="color: inherit;">http://127.0.0.1:3000/</a></u></pre>
 
 <div class="tip">

docs/lib/generators.md

@@ -75,24 +75,26 @@ const width = Generators.width(document.querySelector("main"));
 width
 ```
 
-## dark() <a href="https://github.com/observablehq/framework/pull/1025" target="_blank" class="observablehq-version-badge" data-version="prerelease" title="Added in #1025"></a>
+## dark() <a href="https://github.com/observablehq/framework/releases/tag/v1.3.0" target="_blank" class="observablehq-version-badge" data-version="^1.3.0" title="Added in 1.3.0"></a>
 
-Returns an async generator that yields a boolean indicating whether the page is currently displayed with a dark [color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme).
+Returns an async generator that yields a boolean indicating whether the page is currently displayed with a dark [color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme).
 
-If the page supports dark mode (for example with the default Framework themes), the value reflects the user’s preferred color scheme. It will yield if that value changes, and update the charts that depend on it without needing to reload the page — this happens at dusk (if the user settings adapt from light to dark), and conversely at dawn, from dark to light; and of course, when the user is playing with their settings.
+If the page supports both light and dark mode (as with the [default theme](../themes)), the value reflects the user’s [preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). The generator will yield a new value if the preferred color changes — as when the user changes their system settings, or if the user’s system adapts automatically to the diurnal cycle — allowing you to update the display as needed without requiring a page reload.
 
-If the page does _not_ support dark mode, and only has a light theme, the value is always false, and likewise it is always true if the page only has a dark theme.
+If the page only supports light mode, the value is always false; likewise it is always true if the page only has a dark theme.
 
-```js echo
-html`<em>Current theme: ${dark ? "dark" : "light"}</em>`
+The current theme is: *${dark ? "dark" : "light"}*.
+
+```md run=false
+The current theme is: *${dark ? "dark" : "light"}*.
 ```
 
 This generator is available by default as `dark` in Markdown. It can be used to pick a [color scheme](https://observablehq.com/plot/features/scales#color-scales) for a chart, or an appropriate [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode):
 
 ```js echo
 Plot.plot({
   height: 260,
-  color: {scheme: dark ? "turbo" : "blues"},
+  color: {scheme: dark ? "turbo" : "ylgnbu"},
   marks: [
     Plot.rectY(
       olympians,

docs/lib/mosaic.md

@@ -3,7 +3,7 @@ sql:
   trips: nyc-taxi.parquet
 ---
 
-# Mosaic vgplot <a href="https://github.com/observablehq/framework/pull/1015" target="_blank" class="observablehq-version-badge" data-version="prerelease" title="Added in #1015"></a>
+# Mosaic vgplot <a href="https://github.com/observablehq/framework/releases/tag/v1.3.0" target="_blank" class="observablehq-version-badge" data-version="^1.3.0" title="Added in 1.3.0"></a>
 
 [Mosaic](https://uwdata.github.io/mosaic/) is a system for linking data visualizations, tables, and inputs, leveraging [DuckDB](./duckdb) for scalable processing. Mosaic includes an interactive grammar of graphics, [Mosaic vgplot](https://uwdata.github.io/mosaic/vgplot/), built on [Observable Plot](./plot). With vgplot, you can interactively visualize and explore millions — even billions — of data points.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@observablehq/framework",
   "license": "ISC",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -63,7 +63,7 @@
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
     "d3-array": "^3.2.4",
-    "esbuild": "^0.19.8",
+    "esbuild": "^0.20.1",
     "fast-array-diff": "^1.1.0",
     "gray-matter": "^4.0.3",
     "he": "^1.2.0",
@@ -72,11 +72,11 @@
     "is-wsl": "^3.1.0",
     "jsdom": "^24.0.0",
     "jszip": "^3.10.1",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^14.0.0",
     "markdown-it-anchor": "^8.6.7",
-    "mime": "^3.0.0",
+    "mime": "^4.0.0",
     "minisearch": "^6.3.0",
-    "open": "^9.1.0",
+    "open": "^10.1.0",
     "rollup": "^4.6.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "semver": "^7.5.4",
@@ -100,9 +100,9 @@
     "@types/send": "^0.17.2",
     "@types/tar-stream": "^3.1.3",
     "@types/ws": "^8.5.6",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
-    "c8": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "c8": "^9.1.0",
     "chai": "^4.3.10",
     "chai-http": "^4.4.0",
     "concurrently": "^8.2.2",
@@ -118,7 +118,7 @@
     "rimraf": "^5.0.5",
     "tempy": "^3.1.0",
     "typescript": "^5.2.2",
-    "undici": "^5.27.2"
+    "undici": "^6.7.1"
   },
   "engines": {
     "node": ">=18"

src/client/stdlib/generators/dark.ts

@@ -4,8 +4,13 @@ import {observe} from "./observe.js";
 // TODO: in preview, also watch for changes in the theme meta.
 export function dark() {
   return observe((notify: (dark: boolean) => void) => {
+    let dark: boolean | undefined;
     const media = matchMedia("(prefers-color-scheme: dark)");
-    const changed = () => notify(getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark");
+    const changed = () => {
+      const d = getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark";
+      if (dark === d) return; // only notify if changed
+      notify((dark = d));
+    };
     changed();
     media.addEventListener("change", changed);
     return () => media.removeEventListener("change", changed);

test/output/build/imports/foo/foo.html

@@ -21,7 +21,7 @@
 import {define} from "../_observablehq/client.js";
 import {registerFile} from "../_observablehq/stdlib.js";
 
-registerFile("../top.js", {"name":"../top.js","mimeType":"application/javascript","path":"../_file/top.a53c5d5b.js"});
+registerFile("../top.js", {"name":"../top.js","mimeType":"text/javascript","path":"../_file/top.a53c5d5b.js"});
 
 define({id: "261e010e", inputs: ["display","FileAttachment"], outputs: ["d3","bar","top"], body: async (display,FileAttachment) => {
 const [d3, {bar}, {top}] = await Promise.all([import("../_npm/[email protected]/+esm.js"), import("../_import/bar/bar.13bb8056.js"), import("../_import/top.160847a6.js")]);