# Feature request: conditional imports

**URL:** <https://talk.observablehq.com/t/feature-request-conditional-imports/2379>\
**Category:** Feedback\
**Created:** [September 13, 2019, 5:05pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379 "2019-09-13T17:05:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [September 13, 2019, 5:05pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379/1 "2019-09-13T17:05:01Z")

</div>

Recently, @kappelmann and I were discussing a notebook where it would be convenient to import a different notebook depending on user input, e.g. something like this (or maybe with more specialized syntax):

```js
import {cell} with {...} from `${toggle 
  ? 'notebook1' 
  : 'notebook2'
}`

```

instead of:

```js
import {cell as cell1} from 'notebook1'

```

```js
import {cell as cell2} from 'notebook2'

```

```js
cell = toggle ? cell1 : cell2

```

For instance if evaluating `cell1` and `cell2` require downloading large files, the latter will require that both sets of files are downloaded before `cell` resolves. In principle it’s possible to change things upstream to delay their execution (e.g. wrapping things in [“thunks”](https://en.wikipedia.org/wiki/Thunk)) but this could require a lot of work.

The main obstacle to this suggestion is that it would require such an import cell to be treated at a “meta” level, since dependencies for some cells could change at “run time” rather than “compile time”. I haven’t thought too hard about this yet, but it does seem like variables which modify the dependency graph would have to be treated very carefully.

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [September 13, 2019, 5:50pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379/2 "2019-09-13T17:50:22Z")

</div>

I don’t have a great answer for you right now, @bgchen — but I just wanted to let you know that this sort of thing is an important topic that we’ve been thinking through quite seriously. To briefly describe the problem space:

- Observable notebooks are versioned, but can load code and data in many ways: `import` from a notebook, dynamic `import()`, `require()` from npm, `fetch()`, `XMLHTTPRequest`, `DatabaseClient()`, and more…
- Some of those forms are amenable to static analysis, where we can determine (without running the code), what exact external resources a notebook depends on, and some are not.
- Some forms are dynamic, where you can conditionally choose to load dependencies, or generate identifiers to load different resources, and some are not.
- Some forms are lazy, where even if _what_ you are going to load can be determined statically, you don’t have to actually load it until first use.
- Some forms are versioned, where there are semantics around which version of the named resource you receive when you request it, and some just load by opaque identifier.
- Some forms are cached, where if you request the same identifier multiple times, only one request will be made (and therefore unsuitable for frequently mutating resources).

Improvements to the status quo need to take these qualities and differing behaviors into account.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [September 13, 2019, 6:02pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379/3 "2019-09-13T18:02:58Z")

</div>

Possibly related: ["Recompute with...", or: a way to "climb the ladder of abstraction"](https://talk.observablehq.com/t/recompute-with-or-a-way-to-climb-the-ladder-of-abstraction/2008)

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [September 13, 2019, 6:19pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379/4 "2019-09-13T18:19:10Z")

</div>

If I might add my two cents: I think the current `import with` syntax should be deprecated and replaced with an import helper in the stdlib or runtime that works similarly to d3-require (and would likely just end up being a custom resolver?).

Let’s be honest, the current syntax is confusing as hell when you’re not familiar with this Observable feature:

- syntax mimics static import syntax, but only supports a fraction of the actual syntax
- allows only notebook imports
- notebook imports look like npm package identifiers, but are notebooks exclusively hosted on [observablehq.com](http://observablehq.com)
- `with` syntax is completely non-standard (unless I’ve missed something?) and makes the whole thing even weirder

`viewof` and `mutable` are less problematic because they don’t redefine existing keywords.

---

<div class="post-metadata">

**Author:** ![john-guerra](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/john-guerra/32/3497_2.png) [@john-guerra](https://talk.observablehq.com/u/john-guerra)\
**Post date:** [August 15, 2020, 4:08pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379/5 "2020-08-15T16:08:17Z")

</div>

+1 for this, what should one do for conditional imports right now?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 15, 2020, 9:13pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379/6 "2020-08-15T21:13:38Z")

</div>

This might help:

> **[Dataflow](https://observablehq.com/@mbostock/dataflow)**
>
> An Observable notebook by Mike Bostock.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [December 7, 2020, 10:31pm UTC](https://talk.observablehq.com/t/feature-request-conditional-imports/2379/7 "2020-12-07T22:31:45Z")

</div>

I imagine this may also apply to “lazy” imports. Right now notebook imports get transcoded to static imports, which means that every referenced notebook gets fetched, even if none of its cells are imported.