Dash.resize → resize

docs/grid.md

@@ -3,10 +3,6 @@ toc: false
 theme: dashboard
 ---
 
-```js
-import {resize} from "npm:@observablehq/dash";
-```
-
 ```js
 function AppleStockChart({width}) {
   return Plot.plot({

docs/javascript/display.md

@@ -92,6 +92,30 @@ ${display(1), display(2)}
 ${display(1), display(2)}
 ```
 
+## Responsive display
+
+In Markdown, the built-in `width` reactive variable represents the current width of the main element. This can be a handy thing to pass, say, as the **width** option to [Observable Plot](../lib/plot).
+
+```html echo
+The current width is ${width}.
+```
+
+```js
+import {resize} from "npm:@observablehq/stdlib";
+```
+
+For more control, or in a grid where you want to respond to either width or height changing, use the built-in `resize` helper. This takes a render function which is called whenever the width or height changes; the element returned by the render function is inserted into the DOM.
+
+```html echo
+<div class="grid grid-cols-4">
+  <div class="card">
+    ${resize((width) => html`This card is ${width}px wide.`)}
+  </div>
+</div>
+```
+
+See also [`Generators.width`](../lib/generators#width(element)).
+
 ## display(*value*)
 
 If `value` is a DOM node, adds it to the page. Otherwise, converts the given `value` to a suitable DOM node and displays that instead. Returns the given `value`.

examples/google-analytics/docs/index.md

@@ -1,5 +1,6 @@
-<link rel="preload" as="style" href="styles/dashboard.css">
-<link rel="stylesheet" type="text/css" href="styles/dashboard.css">
+---
+theme: dashboard
+---
 
 ```js
 // Data
@@ -286,31 +287,31 @@ function worldMap(data, {width, height, title, caption}) {
 _Summary of metrics from the [Google Analytics Data API](https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries), pulled on ${date(d3.max(summary, d => d.date))}_
 
 <div class="grid grid-cols-4" style="grid-auto-rows: 165px;">
-  <div class="grid-colspan-1 grid-rowspan-1 bigNumber">
-    ${Dash.resize((width) => BigNumber(`${summary[summary.length-1].active28d.toLocaleString("en-US")}`, {title: "Rolling 28-day Active users", plot: areaChart(summary, {width, metric: 'active28d'}), trend: getCompareValue(summary, 'active28d'), trendFormat: bigNumber}))}
+  <div class="card grid-colspan-1 grid-rowspan-1 bigNumber">
+    ${resize((width) => BigNumber(`${summary[summary.length-1].active28d.toLocaleString("en-US")}`, {title: "Rolling 28-day Active users", plot: areaChart(summary, {width, metric: 'active28d'}), trend: getCompareValue(summary, 'active28d'), trendFormat: bigNumber}))}
   </div>
-    <div class="grid-colspan-1 grid-rowspan-1 bigNumber">
-    ${Dash.resize((width) => BigNumber(`${bigPercent(summary[summary.length-1].engagementRate)}`, {title: "Engagement Rate", plot: lineChart(summary, {width, metric: 'engagementRate'}), trend: getCompareValue(summary, 'engagementRate'), trendFormat: percent}))}
+    <div class="card grid-colspan-1 grid-rowspan-1 bigNumber">
+    ${resize((width) => BigNumber(`${bigPercent(summary[summary.length-1].engagementRate)}`, {title: "Engagement Rate", plot: lineChart(summary, {width, metric: 'engagementRate'}), trend: getCompareValue(summary, 'engagementRate'), trendFormat: percent}))}
   </div>
-  <div class="grid-colspan-1 grid-rowspan-1 bigNumber">
-    ${Dash.resize((width) => BigNumber(`${bigPercent(summary[summary.length-1].wauPerMau)}`, {title: "WAU to MAU ratio", plot: lineChart(summary, {width, metric: 'wauPerMau'}), trend: getCompareValue(summary, 'wauPerMau'), trendFormat: percent}))}
+  <div class="card grid-colspan-1 grid-rowspan-1 bigNumber">
+    ${resize((width) => BigNumber(`${bigPercent(summary[summary.length-1].wauPerMau)}`, {title: "WAU to MAU ratio", plot: lineChart(summary, {width, metric: 'wauPerMau'}), trend: getCompareValue(summary, 'wauPerMau'), trendFormat: percent}))}
   </div>
-    <div class="grid-colspan-1 grid-rowspan-1 bigNumber">
-    ${Dash.resize((width) => BigNumber(`${summary[summary.length-1].engagedSessions.toLocaleString("en-US")}`, {title: "Engaged Sessions", plot: areaChart(summary, {width, metric: 'engagedSessions'}), trend: getCompareValue(summary, 'engagedSessions'), trendFormat: bigNumber}))}
+    <div class="card grid-colspan-1 grid-rowspan-1 bigNumber">
+    ${resize((width) => BigNumber(`${summary[summary.length-1].engagedSessions.toLocaleString("en-US")}`, {title: "Engaged Sessions", plot: areaChart(summary, {width, metric: 'engagedSessions'}), trend: getCompareValue(summary, 'engagedSessions'), trendFormat: bigNumber}))}
   </div>
 </div>
 
 <div class="grid grid-cols-2" style="grid-auto-rows: 140px;">
-  <div class="grid-colspan-1 grid-rowspan-4">
-    ${Dash.resize((width, height) => horizonChart(channels, {width, height, metric:'active28d', title: 'Active users by channel', caption: 'Rolling 28-day active users', format: 's', z: 'channelGroup', color, order: color.domain.slice(1)}))}
+  <div class="card grid-colspan-1 grid-rowspan-4">
+    ${resize((width, height) => horizonChart(channels, {width, height, metric:'active28d', title: 'Active users by channel', caption: 'Rolling 28-day active users', format: 's', z: 'channelGroup', color, order: color.domain.slice(1)}))}
   </div>
-  <div class="grid-colspan-1 grid-rowspan-3">
-    ${Dash.resize((width, height) => worldMap(countryData, {width, height, title: "Active users by country", caption: 'Current rolling 28-day active users by country', lookup: countryLookup}))}
+  <div class="card grid-colspan-1 grid-rowspan-3">
+    ${resize((width, height) => worldMap(countryData, {width, height, title: "Active users by country", caption: 'Current rolling 28-day active users by country', lookup: countryLookup}))}
   </div>
-  <div class="grid-colspan-1 grid-rowspan-3">
-    ${Dash.resize((width, height) => marrimekoChart(filteredChannelBreakdown, {width, height, metric:'active28d', title: 'New vs. returning users by channel', caption: 'Rolling 28-day active users by channel and split by new vs. returning', format: '%', yDim: 'channelGroup', xDim: 'type', color}))}
+  <div class="card grid-colspan-1 grid-rowspan-3">
+    ${resize((width, height) => marrimekoChart(filteredChannelBreakdown, {width, height, metric:'active28d', title: 'New vs. returning users by channel', caption: 'Rolling 28-day active users by channel and split by new vs. returning', format: '%', yDim: 'channelGroup', xDim: 'type', color}))}
   </div>
-  <div class="grid-colspan-1 grid-rowspan-2">
-    ${Dash.resize((width, height) => Punchcard(hourly, {width, height, label: "active users"}))}
+  <div class="card grid-colspan-1 grid-rowspan-2">
+    ${resize((width, height) => Punchcard(hourly, {width, height, label: "active users"}))}
   </div>
 </div>

examples/plot/README.md

@@ -32,4 +32,4 @@ Key performance indicators are displayed as “big numbers” with, in some case
 
 The charts are drawn — quite obviously ☺️ — with Observable Plot. The code for the downloads chart is isolated in the [`components/dailyPlot.js`](./docs/components/dailyPlot.js) file. The code for the burndown chart is adapted from Tom MacWright’s [GitHub Burndown chart](https://observablehq.com/@tmcw/github-burndown).
 
-The size of the charts automatically adapts to their container’s dimensions with the built-in [`Dash.resize`](https://cli.observablehq.com/lib/dash) helper — part of a collection of helpers currently under development.
+The size of the charts automatically adapts to their container’s dimensions with the built-in `resize` helper — part of a collection of helpers currently under development.

examples/plot/docs/index.md

@@ -57,11 +57,11 @@ const burndown = issues
 </div>
 
 <div class="card grid grid-cols-1" style="grid-auto-rows: calc(260px + 2rem);">
-  ${Dash.resize((width, height) => DailyPlot(downloads, {width, height, title: "Daily npm downloads", label: "downloads", domain: [0, 6000], versions}))}
+  ${resize((width, height) => DailyPlot(downloads, {width, height, title: "Daily npm downloads", label: "downloads", domain: [0, 6000], versions}))}
 </div>
 
 <div class="card grid grid-cols-1">
-  ${Dash.resize((width) => Plot.plot({
+  ${resize((width) => Plot.plot({
     width,
     caption: "Downloads per version (last 7 days)",
     x: {label: null, tickFormat: "s", round: true, axis: "top"},
@@ -107,7 +107,7 @@ const burndown = issues
 </div>
 
 <div class="grid grid-cols-2" style="grid-auto-rows: 276px;">
-  <div class="card">${Dash.resize((width, height) => Plot.plot({
+  <div class="card">${resize((width, height) => Plot.plot({
     width,
     height,
     marginLeft: 0,

src/build.ts

@@ -21,7 +21,6 @@ function clientBundles(clientPath: string): [entry: string, name: string][] {
   return [
     [clientPath, "client.js"],
     ["./src/client/stdlib.js", "stdlib.js"],
-    ["./src/client/stdlib/dash.js", "stdlib/dash.js"],
     ["./src/client/stdlib/dot.js", "stdlib/dot.js"],
     ["./src/client/stdlib/duckdb.js", "stdlib/duckdb.js"],
     ["./src/client/stdlib/inputs.css", "stdlib/inputs.css"],

src/client/main.js

@@ -1,13 +1,14 @@
 import {Runtime} from "observablehq:runtime";
 import {registerDatabase, registerFile} from "observablehq:stdlib";
-import {DatabaseClient, FileAttachment, Generators, Mutable} from "observablehq:stdlib";
+import {DatabaseClient, FileAttachment, Generators, Mutable, resize} from "observablehq:stdlib";
 import {inspect, inspectError} from "./inspect.js";
 import * as recommendedLibraries from "./stdlib/recommendedLibraries.js";
 import * as sampleDatasets from "./stdlib/sampleDatasets.js";
 
 const library = {
   now: () => Generators.now(),
   width: () => Generators.width(document.querySelector("main")),
+  resize: () => resize,
   DatabaseClient: () => DatabaseClient,
   FileAttachment: () => FileAttachment,
   Generators: () => Generators,

src/client/stdlib.js

@@ -2,3 +2,4 @@ export {DatabaseClient, registerDatabase} from "./stdlib/databaseClient.js";
 export {AbstractFile, FileAttachment, registerFile} from "./stdlib/fileAttachment.js";
 export * as Generators from "./stdlib/generators/index.js";
 export {Mutable} from "./stdlib/mutable.js";
+export {resize} from "./stdlib/resize.js";

src/client/stdlib/recommendedLibraries.js

@@ -2,7 +2,6 @@ export const _ = () => import("npm:lodash").then((lodash) => lodash.default);
 export const aq = () => import("npm:arquero");
 export const Arrow = () => import("npm:apache-arrow");
 export const d3 = () => import("npm:d3");
-export const Dash = () => import("observablehq:stdlib/dash");
 export const dot = () => import("observablehq:stdlib/dot").then((dot) => dot.default);
 export const duckdb = () => import("npm:@duckdb/duckdb-wasm");
 export const DuckDBClient = () => import("observablehq:stdlib/duckdb").then((duckdb) => duckdb.DuckDBClient);

src/javascript/imports.ts

@@ -263,8 +263,6 @@ export function createImportResolver(root: string, base: "." | "_import" = "."):
       ? resolveBuiltin(base, path, "runtime.js")
       : specifier === "npm:@observablehq/stdlib"
       ? resolveBuiltin(base, path, "stdlib.js")
-      : specifier === "npm:@observablehq/dash"
-      ? resolveBuiltin(base, path, "stdlib/dash.js") // TODO publish to npm
       : specifier === "npm:@observablehq/dot"
       ? resolveBuiltin(base, path, "stdlib/dot.js") // TODO publish to npm
       : specifier === "npm:@observablehq/duckdb"

src/rollup.ts

@@ -63,12 +63,12 @@ export async function rollupClient(clientPath: string, {minify = false} = {}): P
 }
 
 // For reasons not entirely clear (to me), when we resolve a relative import to
-// a TypeScript file, such as resolving observablehq:stdlib/dash to
-// ./src/client/stdlib/dash.js, Rollup (or rollup-plugin-esbuild?) notices that
-// there is a dash.ts and rewrites the import to dash.ts. But the imported file
-// at runtime won’t be TypeScript and will only exist at dash.js, so here we
-// rewrite the import back to what it was supposed to be. This is a dirty hack
-// but it gets the job done. 🤷 https://github.com/observablehq/cli/issues/478
+// a TypeScript file, such as resolving observablehq:stdlib/foo to
+// ./src/client/stdlib/foo.js, Rollup (or rollup-plugin-esbuild?) notices that
+// there is a foo.ts and rewrites the import to foo.ts. But the imported file at
+// runtime won’t be TypeScript and will only exist at foo.js, so here we rewrite
+// the import back to what it was supposed to be. This is a dirty hack but it
+// gets the job done. 🤷 https://github.com/observablehq/cli/issues/478
 function rewriteTypeScriptImports(code: string): string {
   return code.replace(/(?<=\bimport\(([`'"])[\w./]+)\.ts(?=\1\))/g, ".js");
 }
@@ -91,8 +91,6 @@ async function resolveImport(source: string, specifier: string | AstNode): Promi
     ? {id: relativeUrl(source, getClientPath("./src/client/runtime.js")), external: true}
     : specifier === "npm:@observablehq/stdlib"
     ? {id: relativeUrl(source, getClientPath("./src/client/stdlib.js")), external: true}
-    : specifier === "npm:@observablehq/dash"
-    ? {id: relativeUrl(source, getClientPath("./src/client/stdlib/dash.js")), external: true} // TODO publish to npm
     : specifier === "npm:@observablehq/dot"
     ? {id: relativeUrl(source, getClientPath("./src/client/stdlib/dot.js")), external: true} // TODO publish to npm
     : specifier === "npm:@observablehq/duckdb"

test/deploy-test.ts

@@ -18,7 +18,6 @@ const EXTRA_FILES: string[] = [
   "_observablehq/client.js",
   "_observablehq/runtime.js",
   "_observablehq/stdlib.js",
-  "_observablehq/stdlib/dash.js",
   "_observablehq/stdlib/dot.js",
   "_observablehq/stdlib/duckdb.js",
   "_observablehq/stdlib/inputs.css",