v1.6.0

Node imports 📦

You can now import from node_modules! This lets you manage dependencies with a package manager such as npm or Yarn, import private packages from the npm registry, or import from a different package registry such as GitHub. For example, to use canvas-confetti, first install it (here using npm):

npm install canvas-confetti

Then import it:

import confetti from "canvas-confetti";

You can import named exports or import as a namespace, too. For example, here’s how you might import Apache Arrow:

import * as Arrow from "apache-arrow";

You can import specific entry points by adding the entry point subpath after the package name. For example, to import mime’s lite entry point:

import mime from "mime/lite";

Note: not all Node packages are usable in the browser; Node imports are only supported for modules that do not rely on Node-specific APIs and that can be converted to ES modules via esbuild. If you have difficulty importing a module, please ask for help by opening a discussion.

We also made some improvements to npm: imports: entry points without a file extension, such as npm:mime/lite, now implicitly get /+esm added to generate an ES module; an /+esm import no longer collides with a non-/+esm import of the same entry point; and undeclared dependencies are now correctly resolved, fixing certain imports.

More documentation 📚

We’ve overhauled and improved our documentation. Please take a look and let us know what you think. Thank you to @CAYdenberg for the thoughtful feedback, and @Stroked for helping to improve our wording. We also fixed a few links, added deep links to Observable where needed, added an interactive version of the mortgage rates dashboard, and clarified how to install markdown-it plugins.

And check out this new deck.gl example visualizing more than 100,000 reported collisions on roads in Great Britain for the year 2022:

It’s written using a data loader (dft-road-collisions.csv.sh) that fetches almost 9M records from the Department for Transport and filters them using DuckDB, reducing the data from 1.2GB to 2.1MB. Here’s what it looks like if you display the entire dataset:

This data is a strong proxy for population density (and more specifically traffic density), so the major highways are strikingly visible.

Deploy improvements 🚀

We fixed a bug where observable deploy could deploy a stale build if you recently modified your source files before deploying. Now observable deploy will always ask if you want to build. For example, it might say:

◆  You built this project 6 minutes ago. Would you like to build again before deploying?
│  ● Yes, build and then deploy / ○ No, deploy as is

If you’ve not yet built your project, you will see:

◆  No build files found. Do you want to build the project now?
│  ● Yes, build and then deploy / ○ No, cancel deploy

In non-interactive terminals, observable deploy will build automatically if the build is missing and otherwise deploy as-is. You can use the new --build flag to force a fresh build on deploy, or the --no-build flag to force a deploy of your existing build. These new flags replace the --if-stale and --if-missing flags. We also fixed a race condition that could cause deploying to Observable to fail.

Other improvements 🆕

Sidebar sections can now be marked as non-collapsible by setting collapsible: false. Use this for a cleaner sidebar if you always want the section to be open. For example:

export default {
  title: "Sample project",
  pages: [
    {name: "Page 1", path: "/page-1"},
    {name: "Page 2", path: "/page-2"},
    {
      name: "Sample section",
      collapsible: false, // always open!
      pages: [
        {name: "Item 1", path: "/section/item-1"},
        {name: "Item 2", path: "/section/item-2"}
      ]
    }
  ]
};

The new FileAttachment.dsv method allows you to load delimiter-separated files like CSV or TSV, but with an arbitrary delimiter. For example, to load semicolon-separated values:

const capitals = FileAttachment("us-state-capitals.csv").dsv({delimiter: ";", typed: true});

The “empty” project template (which is used if you answer “No” to “Include sample files to help you get started?” during observable create) is now emptier than before, with no included sample data. observable create now sets a default favicon when creating a project, and survives errors that may occur during the initial build such as a network configuration problem.

There’s a new jQuery UI example. We fixed a bug where certain runtime errors would not be cleared in code blocks that don’t otherwise display. The head, header, and footer front matter options are now correctly suppressed when set to false.

Full Changelog: v1.5.1...v1.6.0