diff --git a/.gitignore b/.gitignore index c82ae3624..303f644da 100644 --- 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 index fe12e75bc..202f6ae00 100644 --- 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 index d5abe5885..20b86870e 100644 --- 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 ``` -
Observable Plot’s title and subtitle options generate h2 and h3 elements, respectively, and so will inherit these card styles. +
Observable Plot’s title and subtitle options generate h2 and h3 elements, respectively, and so will inherit these card styles.
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 index d990d47a0..90e63060c 100644 --- 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/${latitude},${longitude}`); const forecast = await json(station.properties.forecastHourly); -process.stdout.write(JSON.stringify(forecast)); +process.stdout.write(JSON.stringify(forecast));
```js const location = view(Locator([-122.47, 37.8])); diff --git a/docs/inputs/button.md b/docs/inputs/button.md index 1a0301db4..6cc07b018 100644 --- a/docs/inputs/button.md +++ b/docs/inputs/button.md @@ -2,7 +2,7 @@ API · Source · 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. - + ```js echo const replay = view(Inputs.button("Replay")); diff --git a/docs/inputs/search.md b/docs/inputs/search.md index 186cd7cb0..3f5422ca5 100644 --- 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 new file mode 100644 index 000000000..c399d5689 --- /dev/null +++ b/docs/javascript/bar.js @@ -0,0 +1 @@ +export const bar = "bar"; diff --git a/docs/javascript/files.md b/docs/javascript/files.md index 263eac835..1d14a19c4 100644 --- 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 `` 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. -