2c:["$","title",null,{"children":"An Unofficial ObservableHQ Compiler 💻 | Alex Garcia | Observable"}] 31:T49a, md`The Observable team has open sourced [several amazing libraries and tools](https://github.com/observablehq) relating to Observable notebooks - the [inspector](https://github.com/observablehq/inspector), [standard library](https://github.com/observablehq/stdlib), even [syntax highlighting](https://github.com/observablehq/highlight.js). And then there is the crown jewel: the Observable [runtime](https://github.com/observablehq/runtime). This library is, in my opinion, the coolest and most powerful piece of software that I have played with - it is the engine that powers the reactive variables of every Observable notebook, and enables seamless imports and dependency injections across all notebooks. However, it's pretty hard to use this runtime by itself - the inputs are cryptic, and the Observable parser (which should be the input to the runtime) also have very cryptic outputs. The Observable team has [talked about](https://github.com/observablehq/runtime/issues/166#issuecomment-500472558) there being a "compile" library that's not open sourced that could bridge these two tools. And now, we have an unofficial compiler that does exactly this! 🎉 `32:T468,md`## Where can this be used? Anywhere javascript runs! But seriously, it doesn't make sense to use this in Observable notebooks (since it already has the official compiler), but it *could* be used in places where you want Observable syntax/features (reactive variables, inspector, etc.). For example: ### Text editor extensions! Imagine being able to write, render, and preview Observable notebooks in Atom, VS Code, etc... It's not far from imagination anymore! Here's a WIP [notebook renderer](https://github.com/asg017/atom-observable) in Atom - local notebook development is possible! ### Self-hosted notebooks You could create your own Observable notebook editor in React/Vue/Preact/whatever else, and use this compiler to essentially make your own self-hosted notebook server. ### Node.js powered notebooks Being able to run Observable notebooks in a non-browser enviroment would be awesome! More CPU/GPU/memory, more libraries that you can use, filesystem access. It would take a new stdlib (since the current one is very browser/DOM dependent), but you can still use this compiler with any stdlib as you wish! `33:[] 2f:{"id":"74f872c4fde62e35","slug":"an-unofficial-observablehq-compiler","title":"An Unofficial ObservableHQ Compiler 💻","thumbnail":"30e53bf49d605c15ecada6a58033575b350cd14bb18e00796d405a2c62dfe6e5","access_level":"public","create_time":"$D2019-09-11T08:28:58.005Z","update_time":"$D2021-05-13T17:25:36.506Z","view_time":null,"first_public_time":"$D2020-01-23T20:07:56.861Z","has_unpublished_edits":null,"fork":false,"stars":31,"starred":false,"owner":{"type":"team","id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":"starter_2024"},"version":217,"publish_version":217,"role":null,"authored":false,"authors":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null}],"members":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"titling":"auto","title":"An Unofficial ObservableHQ Compiler 💻","cells":[{"id":206,"value":"md`# An Unofficial ObservableHQ Compiler 💻`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`

Rejoice! a new compiler version is here

\n\n

This notebook describes the old version of the compiler, v0.5.0, but the new version v0.6.0 is currently in beta. It has many more features and is overall much cooler, so checkout [this notebook](https://observablehq.com/d/08e4561406113d87) for more!

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`## Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"compiler = require('@alex.garcia/unofficial-observablehq-compiler@v0.5.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"compile = new compiler.Compiler()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`And that's it! You can use \\`compile\\` to either compile an individual cell with \\`compile.cell(\"content\")\\`\nor \\`compile.module(\"content\")\\` to compile a module (list of cell definitions). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`A compiled output is just a [\\`define\\`](https://github.com/observablehq/runtime#runtime_module) function - so to see a better output, let's create a helper \nfunction with the observable runtime:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"runtime = require('@observablehq/runtime')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"// takes in a \"define\" function (from compiler) and renders it to an html element\nrender = define => {\n const div = html`

`;\n const rt = new runtime.Runtime();\n rt.module(define, runtime.Inspector.into(div));\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`Let's see this in action!\n\n### Regular \"Hello World\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"render(\n await compile.module(`\n\na=1\n\nb = 2\n\nc = a + b\n`)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"compile.moduleToESModule(`\n\na=1\n\nb = 2\n\nc = a + b\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`### Using stdlib tools`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"render(\n await compile.module(`\n\nmd\\`This cell contains **markdown**\n- ~~isn't~~ \n- *this*\n- [cool](https://www.youtube.com/watch?v=dQw4w9WgXcQ)?\\`\n\n{\n let i = 1;\n while(i) {\n yield Promises.tick(100, ++i);\n }\n}\n\nd3 = require('d3-array')\n\nhtml\\`

\\`\n\n`)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`### Importing from observablehq notebooks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"render(\n await compile.module(`\nimport {ramp} from \"@mbostock/color-ramp\"\n\nramp(t => \\`hsl(\\${t * 360}, 100%, 50%)\\`)\n\nimport {map} from \"@d3/interrupted-sinu-mollweide\"\n\nmap\n\nimport {giraffe} from \"https://observablehq.com/@lemonnish/animated-canvas-layers\"\n\ngiraffe\n`)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`### Redefining cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"{\n // Wait for user to scroll to this cell (hi!)\n await visibility();\n\n let define;\n const div = html`

`;\n yield div;\n const rt = new runtime.Runtime();\n const observer = runtime.Inspector.into(div);\n\n // this is the starting definitions for a, b, c. We will redefine these cells later.\n define = await compile.module(`\n\na = 1;\n\nb = 2;\n\nc = a + b;\n`);\n const main = rt.module(define, observer);\n\n // wait 2 seconds, then redefine a to be 100. This means c will become 102.\n await Promises.delay(2000);\n await compile.cell(`a = 100`).then(({ redefine }) => {\n redefine(main);\n });\n\n // Wait 2 more seconds, redefine b to be twice the value of a.\n await Promises.delay(2000);\n await compile.cell(`b = 2 * a`).then(({ redefine }) => {\n redefine(main);\n });\n\n // Wait 2 more seconds, create new cell d to be a string.\n await Promises.delay(2000);\n await compile.cell(`d = \"hi, I'm d!\"`).then(({ define }) => {\n define(main, observer);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`### Compiling to an ES Module`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"compile.moduleToESModule(`a = 1\n\nb = 2\n\nc = a + b\n\nviewof d = html\\`\\`\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"compile.cell","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`## Help make this better!\n\nIf you want to contribute to this compiler, head over to [the project's repository](https://github.com/asg017/unofficial-observablehq-compiler) and take a look at the open issues!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@asg017/an-unofficial-observablehq-compiler;307;"}