Don't load transitive notebook modules if they aren't referenced

[mootari]

Is your feature request related to a problem? Please describe.
The Observable compiler currently translates notebook imports to static import statements. This causes transitive notebook modules to be loaded even if no observed runtime variables depend on them.

Example:

import {samples} from "@mbostock/evenly-spaced-sampling"

will also load the notebook @observablehq/inputs, even though samples does not depend on any of its cells.

Authors will often import notebooks which are only used for documentation / demonstration purposes.

Describe the solution you'd like
Only load notebook modules if cells depend on them.

Describe alternatives you've considered
Notebooks can be loaded lazily by dynamically importing and instantiating them through a separate Runtime instance. However, these separate runtime modules cannot be integrated easily, and the separate d3-require instance can cause conflicts.

[asg017]

+1 this! This is basically tree shaking for Observable notebooks. I have a similar problem when embeding Observable notebooks into external sites, the compiled ES module includes ALL named and unnamed cells, and their imports, even when I'm never going to use them.

For example, the compiled d3 bar chart source code includes unnamed markdown documentation that I would probably never use, because all I care about is the chart cell and injecting my own data. I know I can specify to only execute chart and the dependent cells with the runtime/observer, but including that code is unnecessary bloat.

One strategy could be to include a new query parameter option cells to the "Download code" endpoint that allows you to explicitly state which cells you want to use, and the returned ES module returns only the compiled cells that are needed to make that happen. For example:

https://api.observablehq.com/@d3/bar-chart.js?v=3&cells=chart would return:

// https://observablehq.com/@d3/bar-chart@262
export default function define(runtime, observer) {
  const main = runtime.module();
  const fileAttachments = new Map([["alphabet.csv","https://static.observableusercontent.com/files/09f63bb9ff086fef80717e2ea8c974f918a996d2bfa3d8773d3ae12753942c002d0dfab833d7bee1e0c9cd358cd3578c1cd0f9435595e76901508adc3964bbdc"]]);
  main.builtin("FileAttachment", runtime.fileAttachments(name => fileAttachments.get(name)));
-main.variable(observer()).define(["md"], function(md){return(
-md`# Bar Chart
-
-This chart shows the relative frequency of letters in the English language. This is a vertical bar chart, also known as a *column* chart. Compare to a [horizontal bar chart](/@d3/horizontal-bar-chart).`
-)});
  main.variable(observer("chart")).define("chart", ["d3","width","height","color","data","x","y","xAxis","yAxis"], function(d3,width,height,color,data,x,y,xAxis,yAxis)
{
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  svg.append("g")
      .attr("fill", color)
    .selectAll("rect")
    .data(data)
    .join("rect")
      .attr("x", (d, i) => x(i))
      .attr("y", d => y(d.value))
      .attr("height", d => y(0) - y(d.value))
      .attr("width", x.bandwidth());

  svg.append("g")
      .call(xAxis);

  svg.append("g")
      .call(yAxis);

  return svg.node();
}
);
  main.variable(observer("data")).define("data", ["d3","FileAttachment"], async function(d3,FileAttachment){return(
Object.assign(d3.csvParse(await FileAttachment("alphabet.csv").text(), ({letter, frequency}) => ({name: letter, value: +frequency})).sort((a, b) => d3.descending(a.value, b.value)), {format: "%", y: "↑ Frequency"})
)});
  main.variable(observer("x")).define("x", ["d3","data","margin","width"], function(d3,data,margin,width){return(
d3.scaleBand()
    .domain(d3.range(data.length))
    .range([margin.left, width - margin.right])
    .padding(0.1)
)});
  main.variable(observer("y")).define("y", ["d3","data","height","margin"], function(d3,data,height,margin){return(
d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top])
)});
  main.variable(observer("xAxis")).define("xAxis", ["height","margin","d3","x","data"], function(height,margin,d3,x,data){return(
g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0))
)});
  main.variable(observer("yAxis")).define("yAxis", ["margin","d3","y","data"], function(margin,d3,y,data){return(
g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(null, data.format))
    .call(g => g.select(".domain").remove())
    .call(g => g.append("text")
        .attr("x", -margin.left)
        .attr("y", 10)
        .attr("fill", "currentColor")
        .attr("text-anchor", "start")
        .text(data.y))
)});
  main.variable(observer("color")).define("color", function(){return(
"steelblue"
)});
  main.variable(observer("height")).define("height", function(){return(
500
)});
  main.variable(observer("margin")).define("margin", function(){return(
{top: 30, right: 0, bottom: 30, left: 40}
)});
  main.variable(observer("d3")).define("d3", ["require"], function(require){return(
require("d3@6")
)});
  return main;
}

(notice the unnamed cell does not appear in the compiled output)

https://api.observablehq.com/@d3/bar-chart.js?v=3&cells=x&cells=y would return:

// https://observablehq.com/@d3/bar-chart@262
export default function define(runtime, observer) {
  const main = runtime.module();
  const fileAttachments = new Map([["alphabet.csv","https://static.observableusercontent.com/files/09f63bb9ff086fef80717e2ea8c974f918a996d2bfa3d8773d3ae12753942c002d0dfab833d7bee1e0c9cd358cd3578c1cd0f9435595e76901508adc3964bbdc"]]);
  main.builtin("FileAttachment", runtime.fileAttachments(name => fileAttachments.get(name)));
-  main.variable(observer()).define(["md"], function(md){return(
-md`# Bar Chart
-
-This chart shows the relative frequency of letters in the English language. This is a vertical bar chart, also known as a *column* chart. Compare to a [horizontal bar chart](/@d3/horizontal-bar-chart).`
-)});
-  main.variable(observer("chart")).define("chart", ["d3","width","height","color","data","x","y","xAxis","yAxis"], function(d3,width,height,color,data,x,y,xAxis,yAxis)
-{
-  const svg = d3.create("svg")
-      .attr("viewBox", [0, 0, width, height]);
-
-  svg.append("g")
-      .attr("fill", color)
-    .selectAll("rect")
-    .data(data)
-    .join("rect")
-      .attr("x", (d, i) => x(i))
-      .attr("y", d => y(d.value))
-      .attr("height", d => y(0) - y(d.value))
-      .attr("width", x.bandwidth());
-
-  svg.append("g")
-      .call(xAxis);
-
-  svg.append("g")
-      .call(yAxis);
-
-  return svg.node();
-}
-);
  main.variable(observer("data")).define("data", ["d3","FileAttachment"], async function(d3,FileAttachment){return(
Object.assign(d3.csvParse(await FileAttachment("alphabet.csv").text(), ({letter, frequency}) => ({name: letter, value: +frequency})).sort((a, b) => d3.descending(a.value, b.value)), {format: "%", y: "↑ Frequency"})
)});
  main.variable(observer("x")).define("x", ["d3","data","margin","width"], function(d3,data,margin,width){return(
d3.scaleBand()
    .domain(d3.range(data.length))
    .range([margin.left, width - margin.right])
    .padding(0.1)
)});
  main.variable(observer("y")).define("y", ["d3","data","height","margin"], function(d3,data,height,margin){return(
d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top])
)});
-  main.variable(observer("xAxis")).define("xAxis", ["height","margin","d3","x","data"], function(height,margin,d3,x,data)-{return(
-g => g
-    .attr("transform", `translate(0,${height - margin.bottom})`)
-    .call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0))
-)});
-  main.variable(observer("yAxis")).define("yAxis", ["margin","d3","y","data"], function(margin,d3,y,data){return(
-g => g
-    .attr("transform", `translate(${margin.left},0)`)
-    .call(d3.axisLeft(y).ticks(null, data.format))
-    .call(g => g.select(".domain").remove())
-    .call(g => g.append("text")
-        .attr("x", -margin.left)
-        .attr("y", 10)
-        .attr("fill", "currentColor")
-        .attr("text-anchor", "start")
-        .text(data.y))
-)});
-  main.variable(observer("color")).define("color", function(){return(
-"steelblue"
-)});
  main.variable(observer("height")).define("height", function(){return(
500
)});
  main.variable(observer("margin")).define("margin", function(){return(
{top: 30, right: 0, bottom: 30, left: 40}
)});
  main.variable(observer("d3")).define("d3", ["require"], function(require){return(
require("d3@6")
)});
  return main;
}

Notice how xAxis, yAxis, chart, and color are not included in the compiled module, since they are not needed to compute x and y

[mootari]

@asg017 That sounds like a more fundamental change and may deserve its own issue.

[mbostock]

This has now been implemented in the ?v=4 compiled format using dynamic imports. You will need Runtime 4.25.0 or later. For more, see observablehq/runtime#341.