31:T65a,# Convert JavaScript to Observable JavaScript At dinner on Saturday night, my friend Andi, a professional JavaScript programmer, said she’d tried Observable. But she quickly ran into the pesky little differences in writing JavaScript on Observable. And, as Aaron said, it’s often the littlest differences that are the most annoying. We hate the feeling of two things being [almost](https://twitter.com/tophtucker/status/1169082858939531264), but not quite, the same. As Claire called them, _faux amis_. I’ve seen this often when watching over the shoulder of a new user: the first thing they write is something like `const x = "…"`, and they immediately get an error! Maddening! For me, what makes the little differences in syntax worthwhile is the profound difference in the execution model. These differences are covered in-depth in [Observable’s not JavaScript](https://observablehq.com/@observablehq/observables-not-javascript) and [How Observable Runs](https://observablehq.com/@observablehq/how-observable-runs). But you can’t even start to appreciate how Observable runs if you can’t get a cell to run. Observable used to have a little magic wand that showed up to fix some common problems, but it was subtle and limited, and never got ported to the current version of the site. Automatically fixing every case would be hard. But some are easy. If you paste some standard JavaScript into the text box below, this notebook will try to convert it to “Observable JavaScript”, breaking up all the top-level statements into their own cells. For readability, it also turns comments into Markdown cells.32:T44d,viewof input = Inputs.textarea({value: `/* I’m going to demonstrate various standard JavaScript syntax features, some of which translate a little differently in Observable. */ // When you declare a top-level variable, you don’t use const, // let, or var. They’re all consts; you just do name = value. // And each statement goes in its own cell. const x = 1; let y = 2; var z = (x + y) / 2; // Observable shows the evaluated value of expressions, though // you can still use console.log if you want. x + y; // Object literals have to be wrapped in parentheses. (If you // just have curly braces, Observable treats the inside as a // function body where the parameters are cells it references.) const person = {first: "Toph", last: "Tucker"} // You can’t combine definitions, or define cells by // destructuring; these have to be split up into multiple cells. const i = 0, j = 0; const {first, last} = person; const {x: pi} = {x: Math.PI}; // You can define functions with the usual syntax. function add(a, b) { return a + b; }`, label: "Vanilla JavaScript", rows: 10, monospace: true})33:T9e3,cells = { const cells = []; for (let i = 0; i < nodes.length; i++) { const node = nodes[i]; switch (node.type) { case "Line": { // Combine consecutive single-line comments if (i && nodes[i - 1].type === node.type) { cells[cells.length - 1].value += "\n" + node.value.trim(); break; } // or else cascade to case "Block" } case "Block": { cells.push({ type: "md", value: node.value.trim() }); break; } case "VariableDeclaration": { // Can have multiple declarations in one statement: // const x = 0, y = 1; for (const declaration of node.declarations) { if (declaration.id.type === "Identifier") { const name = declaration.id.name; const value = input.slice( declaration.init.start, declaration.init.end ); if (declaration.init.type === "ObjectExpression") { // Special case for wrapping object literals in parentheses cells.push({ type: "js", value: `${name} = (${value})` }); } else { cells.push({ type: "js", value: `${name} = ${value}` }); } } else if (declaration.id.type === "ObjectPattern") { // Destructuring: // const {a, b} = {a: "toph", b: "tucker"}; // const {first: a, last: b} = {first: "toph", last: "tucker"}; // const {first, last} = user; for (let i = 0; i < declaration.id.properties.length; i++) { const key = declaration.id.properties[i].key.name; const name = declaration.id.properties[i].value.name; if (declaration.init.type === "Identifier") { cells.push({ type: "js", value: `${name} = ${declaration.init.name}.${key}` }); } else if (declaration.init.type === "ObjectExpression") { const { start, end } = declaration.init.properties.find( (d) => d.key.name === key ).value; const value = input.slice(start, end); cells.push({ type: "js", value: `${name} = ${value}` }); } } } } break; } case "EmptyStatement": { break; } default: { cells.push({ type: "js", value: input.slice(node.start, node.end) }); break; } } } return cells; }34:[{"id":"e5847a3a55ce633c5879b0ab54a72e51591dab8f5d6f4c918e4a91d494c0c37cf47eb938de6e9e652138cea738b6185ad8f543dfbfc545d68a4077fa9342afb0","href":"https://static.observableusercontent.com/files/e5847a3a55ce633c5879b0ab54a72e51591dab8f5d6f4c918e4a91d494c0c37cf47eb938de6e9e652138cea738b6185ad8f543dfbfc545d68a4077fa9342afb0","name":"Pasting converted cells.mov","type":"video/quicktime","lastModified":1664243959512.574,"size":6031934}] 2f:{"title":"Convert JavaScript to Observable JavaScript","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"**Converted to Observable JavaScript**","pinned":false,"hidden":false,"mode":"md"},{"id":561,"value":"

\n ${cells.map(({type, value}, i) => htl.html`

${type === \"js\" ? \"JavaScript\" : type === \"md\" ? \"Markdown\" : type}

${value}

`)}\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":535,"value":"copyCellButton(cells)","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"_Paste copied cells by pressing Esc and then Cmd-V:_","pinned":false,"hidden":false,"mode":"md"},{"id":701,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":539,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"nodes = {\n const comments = [];\n try {\n const nodes = acorn.parse(input, {\n ecmaVersion: 11,\n sourceType: \"module\",\n onComment: comments\n }).body;\n // Interleave top-level comments among AST nodes\n for (const comment of comments) {\n const {start} = comment;\n const priorNodes = nodes.filter((n) => n.start <= start);\n // Only splice in comment if it starts after the end of the previous node\n if (!priorNodes.length || priorNodes[priorNodes.length - 1].end < start) {\n nodes.splice(priorNodes.length, 0, comment);\n }\n }\n return nodes;\n } catch (err) {\n throw new Error(\"Cannot parse the vanilla JavaScript you entered above.\\n\" + err);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"acorn = require(\"acorn@8\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"import {copyCellButton} from \"@tophtucker/generate-copied-cells\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}