2a:null 2b:["$","title",null,{"children":"Exporter: Single File Serializer | Tom Larkworthy | Observable"}] 30:T406,# Exporter: Single File Serializer ## [video explainer](https://www.youtube.com/watch?v=wx93r1pY_6Y) Serialize literate computational notebooks with their dependancies into single files. Double click to open locally. No server required, works in a `file://` context for simplicity. - **File-first** representation. The [Observable Runtime](https://github.com/observablehq/runtime) and common builtins like `Inputs`, `htl`, `highlight`, `_` (lodash) and `markdown` are bundled for offline operation. directly push to S3 or S3-like too if you want - **Recursive and self-sustaining**, the exporter is implemented in userspace and can be invoked again after exporting. - **Fast**, single file notebooks open fast! - **Moldable**, the file format is uncompressed, readable, editable with a text editor, and diffable by Git. - **Runtime-as-the-source-of-truth**, format derived from the live [Obervable Runtime](https://github.com/observablehq/runtime) representation. - **No boxing**, the notebook is rendered without an iframe 31:T66b,## Usage Guide You can use the UI here to export any Observable notebook to a single file. But that's not the coolest thing. If you include the exporter in the notebook to be exported, you will enable recursive exporting. You can get a feel for that by running the exporter in *this* notebook. Try clicking "Preview" which will open an in-memory copy of a notebook exporter in a new browser tab in a `blob://` url. You can keep pressing "Preview"!. To put the exporter in one of your notebooks, first import the UI builder. ```js import {exporter } from '@tomlarkworthy/exporter' ``` Then call the builder to make the UI. You don't need to pass any options, but the options is where you can customise the output format. ```js exporter({ handler: (action, state) => {...}, // Optional UI click handler style: // customer reference to a style DOM node or a string to insert as a style block output: (out) => ... // hook to get result of exporting notebook_url: // hardcode the default notebook_url headless: false // Use an empty inspector and no placement div. }) ``` If you want it to remember your settings, its a [composite view](https://observablehq.com/@tomlarkworthy/view) so you can script it or bind it to a storage solution, _e.g._ ```js viewof parameters = Inputs.bind( exporter(), localStorageView(`exporter-${document.baseURI}`, { json: true, defaultValue: exporter().value }) ) ``` If you want to export without a UI, use the function `exportToHTML`, see the [example](https://observablehq.com/@tomlarkworthy/export-to-html-example) ```js import {exportToHTML } from '@tomlarkworthy/exporter' ```32:T85d,## Lope Format Specification The HTML file is split into several ` ~~~ ### Modules Modules are serialised Observable notebooks that are loaded into the runtime. The content of these look similar to the format used in the 1st party [download code](https://observablehq.com/@observablehq/advanced-embeds) feature. The contain cell definitions, and a module's [`define`](https://github.com/observablehq/runtime?tab=readme-ov-file#runtimemoduledefine-observer) which can import them into a running Runtime instance. ~~~html ~~~ ### Bootloader The bootloader is normal ``3e:T57c,lopemodule = async (module) => { if (module.url === TRACE_MODULE) { debugger; } const files = module.fileAttachments ? await Promise.all( [...module.fileAttachments.entries()].map( async ([name, attachment]) => { const url = attachment.url || attachment; // Get from local when possible const lopefile = !url.startsWith("blob:") && document.querySelector( `script[type=lope-file][module='${CSS.escape( module.url )}'][file='${CSS.escape(encodeURIComponent(name))}']` ); let data64, mime = undefined; if (!lopefile) { const response = await fetch(url); data64 = await response.arrayBuffer().then(arrayBufferToBase64); mime = response.headers.get("content-type"); } else { data64 = lopefile.textContent; mime = lopefile.getAttribute("mime"); } return `\n`; } ) ) : []; return `${files.join("")}\n`; }3f:[{"id":"8c023b23f74fc71c20788401809972126cac904295cdec6dfdadab14bb64343e81ea1fdec65846f8895dc69e651549e4ab42d132eb9f5642115cf57ef10f3765","href":"https://static.observableusercontent.com/files/8c023b23f74fc71c20788401809972126cac904295cdec6dfdadab14bb64343e81ea1fdec65846f8895dc69e651549e4ab42d132eb9f5642115cf57ef10f3765","name":"marked.0.3.12.min.js.gz","type":"application/gzip","lastModified":1731100312089.228,"size":5482},{"id":"b15345a9bdee9bc6f67062f10f758e2245f9e20f1592197f2013d9654cd74c2de343dbf3934ececc46ebd1638a57e0b7ad79f07177845e36e7830f6f577d5983","href":"https://static.observableusercontent.com/files/b15345a9bdee9bc6f67062f10f758e2245f9e20f1592197f2013d9654cd74c2de343dbf3934ececc46ebd1638a57e0b7ad79f07177845e36e7830f6f577d5983","name":"inputs.2.min.js.gz","type":"application/gzip","lastModified":1731100529037.423,"size":9713},{"id":"8cccd6235f8a3942c32b63f3eb9b0d4dde38e067e535593d175973050f65ae06e1854be4392aee9bc4e185a83f144f78c499dca7f5c214026ad2491e46a175fd","href":"https://static.observableusercontent.com/files/8cccd6235f8a3942c32b63f3eb9b0d4dde38e067e535593d175973050f65ae06e1854be4392aee9bc4e185a83f144f78c499dca7f5c214026ad2491e46a175fd","name":"runtime.js.gz","type":"application/gzip","lastModified":1730674272420.844,"size":37193},{"id":"10aa6cd8431a9f6f37b802d743e52b63fee1435d20eefd8eb46bdb88844572231522c632f2a21e33d242d95292d54097dd4f0207828087a101e45f1e3bb5d049","href":"https://static.observableusercontent.com/files/10aa6cd8431a9f6f37b802d743e52b63fee1435d20eefd8eb46bdb88844572231522c632f2a21e33d242d95292d54097dd4f0207828087a101e45f1e3bb5d049","name":"disk-floppy-memory-svgrepo-com@2.svg","type":"image/svg+xml","lastModified":1731242057246.171,"size":613},{"id":"89ac144b19271334c5a22fc61324f2524080c11edfa3598660200804a0fb83651d547287a8c57f4f6c9f6d136f2b6e85277a1d653f9df9f34a7d0993cd29a3d4","href":"https://static.observableusercontent.com/files/89ac144b19271334c5a22fc61324f2524080c11edfa3598660200804a0fb83651d547287a8c57f4f6c9f6d136f2b6e85277a1d653f9df9f34a7d0993cd29a3d4","name":"htl.js.gz","type":"application/gzip","lastModified":1730925611597.986,"size":4078},{"id":"0a5ad0fdb81f6488ff02d6425b61c9051e55fddf43964b6835150ae1c1c51ec11e6bd085e71545759be99c8d4f0a2f2f0ed41db84a14a3ec5f3e99def2247993","href":"https://static.observableusercontent.com/files/0a5ad0fdb81f6488ff02d6425b61c9051e55fddf43964b6835150ae1c1c51ec11e6bd085e71545759be99c8d4f0a2f2f0ed41db84a14a3ec5f3e99def2247993","name":"lodash-4.17.21.min.js.gz","type":"application/gzip","lastModified":1731533445944.834,"size":25949},{"id":"4d2241c76436d0407df3339a922f819bebb5477681a0e3b11e46007b65b76adda67807209d9ba414d6826f73df7d108542f45b5f186998c61b82dd7614202c2e","href":"https://static.observableusercontent.com/files/4d2241c76436d0407df3339a922f819bebb5477681a0e3b11e46007b65b76adda67807209d9ba414d6826f73df7d108542f45b5f186998c61b82dd7614202c2e","name":"highlight.js-2.0.0.min.js.gz","type":"application/gzip","lastModified":1731533724017.821,"size":6256},{"id":"9d154f8fe30deb729ad929181696f76264282798fe8129d0506d143504071413c20443b11afe2486499f33504f6762c50c1e5a29b45ae6e460ed5707babee2cc","href":"https://static.observableusercontent.com/files/9d154f8fe30deb729ad929181696f76264282798fe8129d0506d143504071413c20443b11afe2486499f33504f6762c50c1e5a29b45ae6e460ed5707babee2cc","name":"d3.v7.min.js.gz","type":"application/gzip","lastModified":1737320461283.547,"size":92731},{"id":"373466aede61ed5462c26d8553b428d84f3b257a34ee7df13051b3e5113017598d66082575f6b5f2e304157cdc243cb5bfabce8c9263d3e17c7f51b28b2004c6","href":"https://static.observableusercontent.com/files/373466aede61ed5462c26d8553b428d84f3b257a34ee7df13051b3e5113017598d66082575f6b5f2e304157cdc243cb5bfabce8c9263d3e17c7f51b28b2004c6","name":"plot.umd.min.js.gz","type":"application/gzip","lastModified":1737320461283.547,"size":68105}] 2e:{"id":"03dda470c56b93ff","slug":"exporter","title":"Exporter: Single File Serializer","thumbnail":"57a32f3a5eb16b7b257e3a5ed7bf6cb221e75c830d606b8fa14c1512d9def91f","access_level":"public","create_time":"$D2024-10-11T18:03:02.215Z","update_time":"$D2026-06-06T13:22:03.054Z","view_time":null,"first_public_time":"$D2024-11-16T10:28:59.591Z","fork":{"id":"ae2987be1d73ac7e","slug":"robocoop-blank-slate","title":"Roboco-op: Blank Slate ","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":22,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":8396,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[{"id":"92c4ad54d35f3d05","reply_to_id":null,"content":"It would be nice if you could expose these values in an editable text area that would allow users to modify the style sheet without having to make temporary changes to the code.","create_time":"$D2024-11-24T15:35:30.201Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"8034be43a3ba2be3","reply_to_id":null,"content":"It seems that I cannot fork this to my account and have it work? When I try this, the previews are blank.","create_time":"$D2024-11-24T15:36:17.524Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"9f4e0fcc75b66cb4","reply_to_id":"8034be43a3ba2be3","content":"I cannot repro this, I just tested on my alt and it worked for me even is a private notebook. Maybe refresh and try again?","create_time":"$D2024-11-24T15:47:01.102Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"e6432f2e169300b3","reply_to_id":"92c4ad54d35f3d05","content":"I exposed it as an option to \n\nexporter({\n style: ...\n})","create_time":"$D2024-11-24T15:57:12.578Z","update_time":"$D2024-11-24T16:02:34.421Z","resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"bf7ab93f762ba04e","reply_to_id":"8034be43a3ba2be3","content":"the other way is import the exporter function and instanciate it, but forking should work too.","create_time":"$D2024-11-24T16:03:12.990Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"332cf84cc8a57479","reply_to_id":"8034be43a3ba2be3","content":"I just tried again and got the same issue. I am using a notebook URL. Tried both private fork and making this listed. Reference notebook is published unlisted. Attempted with two notebooks.","create_time":"$D2024-11-24T18:41:51.222Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"dc4a459127c0d040","reply_to_id":"8034be43a3ba2be3","content":"link?","create_time":"$D2024-11-24T19:32:09.217Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"7e022240dd16199b","reply_to_id":"8034be43a3ba2be3","content":"is the notebook URL you are targeting public?","create_time":"$D2024-11-24T19:34:51.499Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"bfabce020221267d","reply_to_id":"8034be43a3ba2be3","content":"Yes. Here's a view of the error message when I hit download:\nhttps://observablehq.com/d/2eca9b0a203b713f\n\nI tried just now with https://observablehq.com/@ambassadors/noaa-urban-heat-island-mapping (and have tried others).\n\nHere's my forked version:\nhttps://observablehq.com/d/de30b581458f2082","create_time":"$D2024-11-24T19:40:48.506Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"a2caea74b80ba506","reply_to_id":"92c4ad54d35f3d05","content":"Ah, I meant in the context of this notebook. I.e. for those simply wishing to use this/your source and not fork or embed within a notebook.","create_time":"$D2024-11-24T19:43:41.645Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"a86550845fb22784","reply_to_id":"8034be43a3ba2be3","content":"Ahhh! Looks like unreferenced fileattachments are wiped after a fork. I have fixed it with https://observablehq.com/@tomlarkworthy/exporter#fileAttachmentKeepAlive\nso forking should work now. Thanks for letting me know!","create_time":"$D2024-11-25T04:54:30.406Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"03dde0db988cb0d9","login":"tlark","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/f62b41a96c9fca15ac738f69395f348a7effe0a8722daf8f28c85dffcc068d20","tier":null}},{"id":"7516b33307da5c8c","reply_to_id":"8034be43a3ba2be3","content":"Excellent 👌 Thank you! This is a fantastic tool!.","create_time":"$D2024-11-25T11:43:50.760Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"d234d0214f490a70","reply_to_id":"92c4ad54d35f3d05","content":"yeah I want to keep this notebook lean and if someone wants to spend time customizing CSS they should probably do it in another notebook so they have the settings persisted and can iterate on them. Basically everything in this notebook gets replicated on every export so smaller is better.","create_time":"$D2024-11-27T07:45:44.106Z","update_time":"$D2024-11-27T07:46:16.885Z","resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"a076cd0db9fc116b","reply_to_id":"92c4ad54d35f3d05","content":"Fair. Now that you resolved forking this is a non-issue (though I always prefer using a source notebook). Please feel welcome to close this thread.","create_time":"$D2024-11-28T03:37:14.831Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":12,"collection":{"id":"fea74dcd856c60a7","slug":"lopecode-old","title":"lopecode-old","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Exporter: Single File Serializer","cells":[{"id":3113,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8391,"value":"⚠️ A new version of exporter with vastly better themed CSS is available [here](https://observablehq.com/@tomlarkworthy/exporter-2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6439,"value":"viewof parameters = Inputs.bind(\n exporter({\n style: default_style,\n output: (out) => {\n viewof output.value = out;\n viewof output.dispatchEvent(new Event(\"input\"));\n }\n }),\n localStorageView(`exporter-${document.baseURI}`, {\n json: true,\n defaultValue: exporter().value\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6931,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7489,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7579,"value":"## Debugging\n\nTo help understand the information flow, the bundling processes is implemented as reactive dataflow, so you can inspect the steps after you serialize. To help composability, that dataflow is encapsulated into a promise using [@tomlarkworthy/flow-queue](https://observablehq.com/@tomlarkworthy/flow-queue).\n\nWhile helpful, the dataflow is not enough to debug problems! The Javascript `debugger` statement is placed at parts of the code that *should never happen*™️. If you are lucky, simply serializing a notebook with the developer tools open might lead you straight to the problem areas.\n\nFurthermore, when debugging difficult cases I add additional `debugger` statements conditioned on the execution context. As Observable is executing Javascript, the browser's developer tool features like `debugger` and REPL are invaluable tools to track down bugs and gather more information at problem sites.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7960,"value":"## Persisted Hash URL\n\nTo help carry state across an export, the URL hash parameter is remembered and set automatically when opening the file. If you need to move large amount of data, use a [local FileAttachment](https://observablehq.com/@tomlarkworthy/fileattachments) instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5688,"value":"### TODO\n- Bug: Every recursive cycle more imports cells are created\n- Improve: Set S3 URL in arg\n- Improve: Refactor the bootloader so its not an inline string. (would avoids some escaping issues)\n\n### Known Issues\n - Doesn't work for `with` clauses in imports. Fixing is not a priority, they are complex.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7661,"value":"viewof example = exporter()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6695,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6841,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8173,"value":"async function exportToHTML({\n notebook, // String, name of module e.g. \"@tomlarkworthy/exporter\"\n module = main, // Module, main module reference\n modules, // Optional Map additional modules to add e.g. \"@tomlarkworthy/agent\" -> Module\n options // Object, export options, e.g. headless\n} = {}) {\n // Force observation of response\n keepalive(exporter_module, \"tomlarkworthy_exporter_task\");\n const response = await viewof task.send({\n notebook,\n module,\n modules,\n options\n });\n return response;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5813,"value":"getSourceModule = async (state) => {\n if (state.source == \"this notebook\")\n return {\n notebook: notebook_name,\n module: main\n };\n const url =\n state.source == \"a notebook url\"\n ? state.notebook_url.child\n : state.top_100.child;\n\n const notebook = url.trim().replace(\"https://observablehq.com/\", \"\");\n const [{ Runtime, Inspector }, { default: define }] = await Promise.all([\n import(\n \"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js\"\n ),\n import(`https://api.observablehq.com/${notebook}.js?v=4`)\n ]);\n return {\n notebook,\n module: new Runtime().module(define)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6477,"value":"function createShowable(child, { show = true } = {}) {\n const showVariable = variable(show, { name: \"show\" });\n const showable = view`

${[\"show\", showVariable]}${[\"child\", child]}`;\n\n // The showable logic is to toggle the visibility of the enclosing div based\n // on the show variable state\n const updateDisplay = () => {\n if (showVariable.value) {\n showable.style.display = \"inline\";\n } else {\n showable.style.display = \"none\";\n }\n };\n // Variables have additional assign event so presentation can be\n // updated as soon as variables change but before dataflow\n // because this is a pure presentation state it makes sense not to trigger\n // dataflow so we do not use 'input' event\n showVariable.addEventListener(\"assign\", updateDisplay);\n\n updateDisplay();\n return showable;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7386,"value":"reportValidity = (view, invalidation) => {\n const input = view.querySelector(\"input\");\n const report = () => view.reportValidity();\n input.addEventListener(\"input\", report);\n invalidation.then(() => input.removeEventListener(\"input\", report));\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6503,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4506,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":5443,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":7822,"value":"notebook_name = document.querySelector(\"title\")?.innerHTML ||\n new URL(document.baseURI).pathname.replace(\"/\", \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4746,"value":"### Single File Notebook Generator Flow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8107,"value":"TRACE_MODULE = \"-\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4750,"value":"viewof task = flowQueue({ timeout_ms: 10000 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7753,"value":"task","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7292,"value":"main_module = task.module","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8013,"value":"task_runtime = main_module?._runtime","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6289,"value":"runtime_variables = [...task_runtime._variables].map(variableToObject)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7818,"value":"module_map = {\n debugger;\n return moduleMap(task_runtime);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4776,"value":"excluded_module_names = {\n submit_summary;\n return [\"TBD\", \"error\", \"builtin\", \"main\", task.notebook];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4769,"value":"excluded_modules = new Map(\n [...module_map.entries()].filter(([m, info]) =>\n excluded_module_names.includes(info.name)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4785,"value":"included_modules = new Map(\n [...module_map.entries()].filter(\n ([m, info]) => !excluded_module_names.includes(info.name)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7814,"value":"moduleLookup = new Map(\n [...included_modules.entries()].map(([m, info]) => [m, info.name])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8271,"value":"module_specs = module_specs_new","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4789,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8255,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4798,"value":"findImports = (cells) =>\n [...cells.keys()]\n .filter((name) => typeof name === \"string\" && name.startsWith(\"module \"))\n .map((name) => name.replace(\"module \", \"\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5637,"value":"getFileAttachments = (module) => {\n let fileMap;\n const FileAttachment = module._builtins.get(\"FileAttachment\");\n const backup_get = Map.prototype.get;\n const backup_has = Map.prototype.has;\n Map.prototype.has = Map.prototype.get = function (...args) {\n fileMap = this;\n };\n try {\n FileAttachment(\"\");\n } catch (e) {}\n Map.prototype.has = backup_has;\n Map.prototype.get = backup_get;\n return fileMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4817,"value":"book = {\n const book = await lopebook(\n {\n url: task.notebook,\n modules: module_specs\n },\n {\n title: task.notebook,\n ...task.options\n }\n );\n console.log(\"book\", book);\n return book;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6349,"value":"Inputs.table(\n [\n ...module_specs.entries().map(([name, spec]) => ({\n name,\n source: spec.source.length,\n\n imports: spec.imports,\n fileAttachments: spec.fileAttachments\n }))\n ],\n {\n width: {\n name: 250,\n source: 50\n },\n format: {\n fileAttachments: (f) =>\n !f\n ? \"none\"\n : Inputs.table([\n ...f.entries().map(([name, f]) => ({ name, url: f.url || f }))\n ]),\n\n imports: (f) => Inputs.table(f.map((i) => ({ name: i })))\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7232,"value":"##### Generate a report on the sizes of components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7228,"value":"report = {\n let report;\n try {\n report = [\n ...new DOMParser()\n .parseFromString(book, \"text/html\")\n .querySelectorAll(\"script\")\n ].map((script) => ({\n ...(script.getAttribute(\"file\") && {\n file: script.getAttribute(\"file\"),\n module: script.getAttribute(\"module\")\n }),\n type: script.type,\n size: script.text.length,\n id: script.id\n }));\n } catch (err) {\n report = err;\n }\n\n console.log(\"report\", report);\n return report;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4822,"value":"tomlarkworthy_exporter_task = {\n const result = {\n source: book,\n report: report\n };\n console.log(\"resolving exporter_task\", result);\n futureExportedState;\n exporter_module;\n return viewof task.resolve(result);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3371,"value":"### Module Source Generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4093,"value":"generate_module_source = async (\n spec,\n scope,\n cells,\n fileAttachments,\n { extraModuleLookup = new Map() } = {}\n) =>\n `${await generate_definitions(cells, { extraModuleLookup })}\n${await generate_define(spec, scope, cells, fileAttachments, {\n extraModuleLookup\n})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4102,"value":"generate_definitions = async (cells) =>\n [\n ...(await Promise.all(\n [...cells.entries()].map(([name, variables]) =>\n cellToDefinition(name, variables)\n )\n )),\n importCell.toString() // for all modules\n ]\n .flat()\n .join(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3530,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7059,"value":"isLiveImport = (variable) =>\n variable._definition\n .toString()\n .includes(\"observablehq\" + \"--inspect \" + \"observablehq--import\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8301,"value":"contentHash = (s) => {\n s = String(s);\n let h = 2166136261;\n for (let i = 0; i < s.length; i++)\n h = Math.imul(h ^ s.charCodeAt(i), 16777619);\n return (h >>> 0).toString(36); // compact rep\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4118,"value":"cellToDefinition = (name, variables) => {\n if (typeof name == \"string\") {\n if (name.startsWith(\"module \")) {\n return \"\";\n }\n if (name.startsWith(\"dynamic \")) {\n return \"\";\n }\n if (name.startsWith(\"viewof \")) {\n name = name.replace(\"viewof \", \"\");\n } else {\n if (name.startsWith(\"mutable \")) {\n name = name.replace(\"mutable \", \"\");\n }\n }\n } else if (isLiveImport(variables[0])) {\n return \"\"; //`const _${name} = () => \"live imports are stripped\";\\n`;\n } else {\n return `const _${contentHash(\n variables[0]._definition\n )} = ${variables[0]._definition.toString()};\\n`;\n }\n return `const _${name} = ${variables[0]._definition.toString()};\\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5519,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3588,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4690,"value":"## Assemble ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3154,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3176,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4209,"value":"escapeScriptTags = (str) => str.replaceAll(\" {\n let modified = module.source;\n module.imports.forEach((i) => {\n modified = modified.replaceAll(\n new RegExp('\"/?' + i + '[^\"]*\"', \"g\"),\n `\"${i}\"`\n );\n });\n return modified;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5700,"value":"async function arrayBufferToBase64(buffer) {\n const bytes = new Uint8Array(buffer);\n const binary = bytes.reduce(\n (data, byte) => data + String.fromCharCode(byte),\n \"\"\n );\n return btoa(binary);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5618,"value":"### Bundled Deps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6206,"value":"decompress_sledfile = async (file) => {\n const source = document.querySelector(\n 'script[type=lope-file][file=\"' + file + '\"]'\n );\n const base64 = source.text;\n const binary = atob(base64);\n const array = new Uint8Array(binary.length);\n for (var i = 0; i < binary.length; i++) {\n array[i] = binary.charCodeAt(i);\n }\n const blob = new Blob([array], {\n type: \"application/octet-stream\"\n });\n const decompressedStream = (await blob.stream()).pipeThrough(\n new DecompressionStream(\"gzip\")\n );\n const arrayBuffer = await new Response(decompressedStream).arrayBuffer();\n\n // Create a Blob from the ArrayBuffer\n const decompressed_blob = new Blob([arrayBuffer], {\n type: \"application/javascript\"\n });\n\n return URL.createObjectURL(decompressed_blob);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6188,"value":"builtin_def = `({\n \"htl@0.3.1/dist/htl.min.js\": async () =>\n import(await decompress_sledfile(\"htl.js.gz\")),\n \"@observablehq/inputs@0.11.0/dist/inputs.min.js\": async () => decompress_sledfile(\"inputs.2.min.js.gz\"),\n \"marked@0.3.12/marked.min.js\": () =>\n decompress_sledfile(\"marked.0.3.12.min.js.gz\"),\n \"lodash@4.17.21/lodash.min.js\": () => decompress_sledfile(\"lodash-4.17.21.min.js.gz\"),\n \"@observablehq/highlight.js@2.0.0/highlight.min.js\": () => decompress_sledfile(\"highlight.js-2.0.0.min.js.gz\"),\n \"d3@7.9.0/dist/d3.min.js\": () => {\n console.log(\"d3@7.9.0/dist/d3.min.js\")\n return decompress_sledfile(\"d3.v7.min.js.gz\")\n },\n \"@observablehq/plot@0.6.16/dist/plot.umd.min.js\": () => {\n console.log(\"@observablehq/plot@0.6.16/dist/plot.umd.min.js\")\n return decompress_sledfile(\"plot.umd.min.js.gz\")\n }\n})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6118,"value":"builtins = eval(builtin_def)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7778,"value":"fileAttachmentKeepAlive = {\n // Unused file attachments are wiped after fork, so we need to manually reference them\n FileAttachment(\"highlight.js-2.0.0.min.js.gz\");\n FileAttachment(\"htl.js.gz\");\n FileAttachment(\"inputs.2.min.js.gz\");\n FileAttachment(\"lodash-4.17.21.min.js.gz\");\n FileAttachment(\"marked.0.3.12.min.js.gz\");\n FileAttachment(\"runtime.js.gz\");\n FileAttachment(\"d3.v7.min.js.gz\");\n FileAttachment(\"plot.umd.min.js.gz\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7959,"value":"### URL Hash Handling\n\nWe use a FileAttachment to carry the hash state to an exported notebook, and it is restored on first page load","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7958,"value":"import {\n jsonFileAttachment,\n setFileAttachment,\n getFileAttachment\n} from \"@tomlarkworthy/fileattachments\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7957,"value":"import { hash } from \"@jashkenas/url-querystrings-and-hash-parameters\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7956,"value":"exportState = {\n let state;\n try {\n state =\n (await getFileAttachment(\"export_state.json\", exporter_module)?.json()) ||\n {};\n } catch (err) {\n state = {};\n }\n if (state.hash && !location.hash) {\n try {\n history.replaceState(null, \"\", state.hash);\n } catch (err) {\n console.error(err);\n }\n }\n console.log(\"export_state.json\", state);\n return state;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7955,"value":"futureExportedState = {\n hash;\n exportState; // ensure we get the current value first\n const savedState = {\n ...exportState,\n ...(location.hash && { hash: location.hash })\n };\n console.log(\"futureExportedState\", savedState);\n await save_exporter_state(savedState);\n\n return savedState;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8058,"value":"async function save_exporter_state(state) {\n console.log(\"save_exporter_state\", state);\n const current = await getFileAttachments(exporter_module);\n await setFileAttachment(\n jsonFileAttachment(\"export_state.json\", state),\n exporter_module\n );\n const newest = await getFileAttachments(exporter_module);\n return;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7976,"value":"### Global Output","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7783,"value":"viewof output = Inputs.input(undefined)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7947,"value":"## Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7949,"value":"function getCompactISODate() {\n const date = new Date();\n\n const year = date.getUTCFullYear();\n const month = String(date.getUTCMonth() + 1).padStart(2, \"0\");\n const day = String(date.getUTCDate()).padStart(2, \"0\");\n const hours = String(date.getUTCHours()).padStart(2, \"0\");\n const minutes = String(date.getUTCMinutes()).padStart(2, \"0\");\n const seconds = String(date.getUTCSeconds()).padStart(2, \"0\");\n\n return `${year}${month}${day}T${hours}${minutes}${seconds}Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8051,"value":"viewof exporter_module = thisModule()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6826,"value":"diskImgUrl = FileAttachment(\"disk-floppy-memory-svgrepo-com@2.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4639,"value":"import { flowQueue } from \"@tomlarkworthy/flow-queue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8248,"value":"import { cellMap } from \"@tomlarkworthy/cell-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3846,"value":"import {\n findModuleName,\n sourceModule,\n findImportedName,\n variableToObject,\n parser,\n decompress_url\n} from \"@tomlarkworthy/observablejs-toolchain\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6343,"value":"import { view, variable, bindOneWay } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6346,"value":"import { reversibleAttach } from \"@tomlarkworthy/reversible-attachment\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6690,"value":"import { localStorageView } from \"@tomlarkworthy/local-storage-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7088,"value":"import { AwsClient, AwsV4Signer } from \"@tomlarkworthy/aws4fetch\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7265,"value":"import { domView } from \"@tomlarkworthy/dom-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7807,"value":"import { moduleMap, submit_summary, forcePeek } from \"@tomlarkworthy/module-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8048,"value":"import {\n thisModule,\n keepalive,\n runtime,\n main\n} from \"@tomlarkworthy/runtime-sdk\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8296,"value":"import { expect } from \"@tomlarkworthy/jest-expect-standalone\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 2f:"$2e:body"