31:T7ca,md`# Imports: tips and tricks For an intro to the "\`import\`" keyword in Observable notebooks, see the tutorial ["Introduction to imports"](https://beta.observablehq.com/@mbostock/introduction-to-imports). Also, don't miss the amazing demo ["Coordinated imports"](https://beta.observablehq.com/@mbostock/coordinated-imports) by Mike Bostock. This notebook will demonstrate a few gotchas which aren't covered explicitly there. Feel free to suggest additions or corrections! *Last updated Oct. 4, 2019:* * [Importing from a URL](#url) * [Importing from a notebook more than once](#more) * [Importing imported cells](#imported) * [Importing & \`viewof\` or \`mutable\`](#importViewof) * [Importing cells that depend on view or mutable cells](#viewofDepend) * [Importing from a broken notebook](#importbad) `32:T560,md`Since this section was first written, the behavior of this case has changed. It now fails to resolve (which makes sense). ~~No errors, and the "last" definition of \`a\` takes effect!~~ ~~This makes sense in the following caricature of import mechanics: when notebooks are shared, their cells are transformed into code which define the cells as "variables" in an Observable runtime module. See [this link](https://api.observablehq.com/d/3c69b22e8a78157b.js) for the runtime v1 code for the test notebook, and [here](https://api.observablehq.com/d/3c69b22e8a78157b.js?v=3) for the v3 code.~~ ~~*If* import statements worked by importing that code, then when you write an \`import\` statement which references a given notebook, its shared runtime module code is evaluated and [later duplicate variable definitions override earlier ones](https://github.com/observablehq/runtime#variable_define).~~ ~~Contrary to claims in a previous version of this notebook though, notebook imports on Observable do **not** work by fetching and importing these shared code files. When you import a notebook, if you check the network requests in your browser's dev tools, you'll see that what's fetched is the ordinary "raw source" of the imported notebooks. This is presumably then "compiled" in-memory into runtime modules so that something similar to this override occurs then... (?)~~`33:[] 2f:{"title":"Imports: tips and tricks","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"md`## Importing a compiled notebook from a URL\n\nAlthough it's undocumented, I learned from [this forum post](https://talk.observablehq.com/t/in-defense-of-static-imports/2440/4) that it's possible (for now?) to import cells from compiled notebook modules from a URL:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"import { canvas } with {\n numStr,\n size\n} from 'https://gistcdn.githack.com/bryangingechen/03dfcef05981f7aec41745e8eccf4057/raw/ce1df31e7f2bbb9c3ee25779c858ded45c05e1f3/3x-1-paths-in-binary.js'\n// https://gist.github.com/bryangingechen/03dfcef05981f7aec41745e8eccf4057","pinned":true,"hidden":false,"mode":"ojs"},{"id":1431,"value":"canvas","pinned":true,"hidden":false,"mode":"ojs"},{"id":1435,"value":"numStr = '1001001'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"size = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"more = md`## Importing from a notebook more than once\n\nYou might find yourself actually wanting to import a cell from a notebook more than once. As mentioned in \"Introduction to imports\":\n\n> You can import the same notebook multiple times and references will resolve exactly. \n\nWhat this means is that, by default, the multiply-imported cells are not independent – the imported names will actually reference the same objects / values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"import {shellSort as shell1} from \"@tmcw/sorting\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"shell1","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`When we import this cell again, we only get a renamed copy. Because of the way Observable treats duplicated DOM elements, one of the two copies will be displayed as \\`SVGSVGElement {}\\`:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"import {shellSort as shell2} from \"@tmcw/sorting\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"shell2","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`Indeed, by default, having both\n\n\\`\\`\\`js\nimport {cell as cell1} from 'notebook'\n\\`\\`\\`\n\n\\`\\`\\`js\nimport {cell as cell2} from 'notebook'\n\\`\\`\\`\n\nin a notebook is identical to writing:\n\n\\`\\`\\`js\nimport {cell as cell1, cell as cell2} from 'notebook'\n\\`\\`\\`\n\nwhich just gives you two identical references \\`cell1,cell2\\` to \\`cell\\`. Useless!\n\n**Here's the fix:** Cells imported using \\`with\\` are independent from each other – even with empty braces like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"import {shellSort as shell3} with {} from \"@tmcw/sorting\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"shell3","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`Here we'll import yet another independent copy of that cell, just to show that you really don't have to do anything special with \\`with\\` to get multiple copies:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"import {shellSort as shell4} with {} from \"@tmcw/sorting\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"shell4","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`To be honest, every time I've actually had to import a cell from a notebook more than once, I already had to use \\`with\\` – for instance, to use the same imported chart cell to display multiple sets of data. So you too may have avoided this problem without even realizing it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"imported = md`## Importing imported cells\n\nThis is possible, but I don't recommend it since you will quickly find yourself fighting Observable's module / variable resolution system!\n\nIn the following example from Tom MacWright's \"[Sorting Overview](https://beta.observablehq.com/@tmcw/sorting-overview)\", note that \\`_gnomeSort\\` is defined as:\n\n\\`\\`\\`js\n_gnomeSort = gnomeSort\n\\`\\`\\`\n\nwhere \\`gnomeSort\\` arises from this import statement:\n\\`\\`\\`js\nimport {shellSort, bubbleSort, gnomeSort, cocktailSort, selectionSort, quickSort, heapSort} with {n, height} from \"@tmcw/sorting\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`Since \\`sortH\\` isn't defined, you might have expected the following to give an error, but \\`gnome4\\` is totally fine:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"import {_gnomeSort as gnome4} with {sortH as height} from \"@tmcw/sorting-overview\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`In fact, we can't use \\`import ... with\\` to override \\`height\\` (or any other variable used by \\`_gnomeSort\\`) here. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"gnome4","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`And importing again still gives us references to the same cell even though we're using the \\`with\\` trick:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"import {_gnomeSort as gnome5} with {} from \"@tmcw/sorting-overview\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"gnome5","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`Importing the imported \\`gnomeSort\\` from the notebook is also \"valid\", but as you might expect, it only gives yet another reference to the same cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"import {gnomeSort} from \"@tmcw/sorting-overview\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"gnomeSort","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"importViewof = md`## Import & \\`viewof\\` or \\`mutable\\`\n\nThe correct way to import a viewof cell is to import the viewof cell.\n\nSilly-sounding, but the point is you **don't** have to import its \"value\" cell as well. We'll see what happens if you do later on.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {viewof order as order1} with {} from '@fil/drag-to-re-arrange'","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"// try dragging the colored boxes left and right\nviewof order1","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`Doing so **automatically** imports its associated value cell:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"order1","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`(The [\"Coordinated imports\"](https://beta.observablehq.com/@mbostock/coordinated-imports) notebook demonstrates this too. See also [this forum post](https://talk.observablehq.com/t/importing-a-cell-that-depends-on-viewof-mutable-cells/1712/5) by Mike Bostock.)\n\nYou might have expected that we should write the alias for the import like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"import {viewof order as viewof order2} with {} from '@fil/drag-to-re-arrange'","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"md`... but as you can see, it doesn't work.\n\nHere's what happens if we import both \\`viewof order\\` and \\`order\\` (don't do this!):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"import {viewof order, order} from '@fil/drag-to-re-arrange'","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof order","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"order","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`Explicitly importing \\`order\\` breaks things here because it conflicts with the automatically-imported \\`order\\` from the \\`viewof order\\` import.\n\nThis means that the following funny-looking import actually works!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"import {viewof d, d as XXXX} from '@bumbeishvili/data-driven-range-sliders'","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"// The above graphic is a range slider, try dragging!\nviewof d","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"d","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"// This and d reference the same object\nXXXX","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`To be sure, the following doesn't exist:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"viewof XXXX","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"md`Similar comments hold for \\`mutable\\` imports. Import \\`mutable Y\\`, not \\`Y\\` and not both!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"viewofDepend = md`## Importing cells that depend on view or mutable cells\n\nWhen importing cells that **depend on** \\`viewof X\\` or \\`mutable Y\\`, we used to have to explicitly import those variables as well. The following import used to fail, but after [a bug was fixed](https://talk.observablehq.com/t/importing-a-cell-that-depends-on-viewof-mutable-cells/1712/4), it works!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"import {mutableWalls as mutableWalls0} with {} from '@observablehq/introduction-to-mutable-state'","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"mutableWalls0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1319,"value":"md`Of course, if you want to reference the mutable variable that this cell depends on, you'll have to import it ([see the previous section](#importViewof)).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"import {mutableWalls as mutableWalls1, mutable wall as wall1} with {} from '@observablehq/introduction-to-mutable-state'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1326,"value":"mutableWalls1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1329,"value":"wall1","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"importbad = md`## Importing from a broken notebook\n\nThis is just a little edge case that might be illuminating if you're starting to think about the \\`import\\` syntax in notebooks translates into operations on \"modules\" in [the Observable runtime](https://github.com/observablehq/runtime#modules). I've created [a test notebook](/d/3c69b22e8a78157b) with three cells:\n- a title cell\n- two conflicting code cells:\n - \\`a = 1\\`\n - \\`a = 2\\`\n\nIf you open the test notebook, the two code cells throw this error:\n\n\\`a = RuntimeError: a is defined more than once\\`\n\nHowever, what happens if we import it?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"import {a} from '3c69b22e8a78157b'","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"a","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"importWithViewof = md`## \\`import...with\\` with \\`viewof\\` and \\`mutable\\`\n\nIt's not (currently?) possible to use the \\`import...with\\` to replace view cells or mutable cells:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"import { viewof order as order3 } with {\n viewof d as viewof order\n} from '@fil/drag-to-re-arrange'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1379,"value":"md`Note the behavior of the following two imports. In the first, we attempt to replace the value of a view (\\`order\\`, the value of \\`viewof order\\`) with a view (\\`viewof d\\`):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"import { viewof order as order4 } with {\n viewof d as order\n} from '@fil/drag-to-re-arrange'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1344,"value":"viewof order4","pinned":true,"hidden":false,"mode":"ojs"},{"id":1391,"value":"md`What happened? Well, in fact \\`viewof order\\` was replaced by \\`viewof d\\` and thus \\`viewof order4\\` resolves to \\`viewof d\\` (and similarly \\`order4\\` resolves to \\`d\\`):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"viewof order4 === viewof d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1358,"value":"order4 === d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1412,"value":"md`This is a little strange but it's consistent with the [above syntax](#importViewof) for aliasing \\`viewof\\` and \\`mutable\\` cells.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"md`Here's what happens if you instead replace the value of a view with a cell:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"import { viewof order as order5 } with {\n d as order\n} from '@fil/drag-to-re-arrange'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1351,"value":"viewof order5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1360,"value":"order5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1408,"value":"viewof order5.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":1403,"value":"md`This breaks the connection between \\`viewof order5\\` and \\`order5\\`!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"viewof order5 === viewof d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1377,"value":"order5 === d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1419,"value":"md` Ordinarily, the \\`order5\\` cell is implemented as another variable that uses \\`Generators.input\\`. I believe that gets overwritten by the import of \\`d\\` and thus disappears.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}