2c:null 2d:["$","title",null,{"children":"Visualizing JS execution #2 — w/o generators | Kelley van Evert | Observable"}] 32:T58f,{ const Y = code.split("\n").length; const hpad = 3; const vpad = 0; const el = this && this.Y === Y && this.fontCss === fontCss ? this : html`

${Array.from({ length: Y }) .map( () => `

` ) .join("")}

`; el.Y = Y; el.fontCss = fontCss; el.querySelector("pre").innerHTML = highlight_bold( code, step.info ? step.info.loc : undefined ); const markers = el.querySelectorAll(".marker"); if (step.loc) { const ranges = loc_to_ranges(code, step.loc); markers.forEach((marker, i) => { const range = ranges[Math.min(i, ranges.length - 1)]; marker.style.background = colors[step.time].bg; marker.style.top = `${(range.line - 1) * H - vpad}px`; marker.style.height = `${H + 2 * vpad}px`; marker.style.left = `${range.a * W - hpad}px`; marker.style.width = `${(range.b - range.a) * W + 2 * hpad}px`; }); } else { markers.forEach(marker => { marker.style.width = marker.style.height = 0; }); } return el; }33:T170a,visitor = meta => { let _cache_id = -1; const visitor = { VariableDeclaration(path) { // This is an ugly trick to get the scope data "out" easily // If we leave the variables as let and const, then we run into non-initialized errors // when reporting back the scope's contents. path.node.kind = "var"; }, Statement(path) { if (t.isBlockStatement(path.node)) return; path.insertBefore( t.expressionStatement( t.callExpression(t.identifier(N.report), [ meta("statement", path.node, path.scope, "before") ]) ) ); const report_before = path.getSibling(path.key - 1); report_before.skip(); path.insertAfter( t.expressionStatement( t.callExpression(t.identifier(N.report), [ meta("statement", path.node, path.scope, "after") ]) ) ); const report_after = path.getSibling(path.key + 1); report_after.skip(); if (t.isReturnStatement(path)) { path.scope._hasReturn = true; path.replaceWith( t.expressionStatement( t.assignmentExpression( "=", t.identifier(N.return), u(path.node.argument) ) ) ); path.skip(); path .get("expression") .get("right") .traverse(visitor); // recurse report_after.insertAfter(t.returnStatement(t.identifier(N.return))); report_after.getSibling(report_after.key + 1).skip(); } }, Function(path) { if (t.isArrowFunctionExpression(path)) { const block = t.isBlockStatement(path.node.body); path.replaceWith( t.callExpression(t.identifier(N.report), [ meta( "expression", path.node, // No idea why, but for some // reason the scope of an ArrowFunctionExpression node // is not the surrounding scope of it as an expression, // but rather it's own scope. Not what we're looking for! path.parentPath.scope, "after" ), t.callExpression( t.memberExpression( t.functionExpression( null, path.node.params, block ? path.node.body : t.blockStatement([t.returnStatement(u(path.node.body))]) ), t.identifier("bind") ), [t.thisExpression()] ) ]) ); path.skip(); const body = path .get("arguments")[1] .get("callee") .get("object") .get("body"); if (block) { body.traverse(visitor); // recurse } else { body .get("body")[0] .get("argument") .traverse(visitor); // recurse } } }, Expression(path) { // console.log("E", path.node.type, "@", path.node.loc.start); // preventloop(); if (t.isCallExpression(path)) { const contextual = t.isMemberExpression(path.get("callee")); // Automatically works even if non-contextual, // because then the absence of the assignment, // the cached item will undefined const cached_context = contextual ? t.memberExpression( t.identifier(N.cache), t.numericLiteral(++_cache_id), true ) : t.identifier("undefined"); const computed = contextual ? path.node.callee.computed : "irrelevant"; const report_before_call = t.callExpression(t.identifier(N.report), [ meta("expression", path.node, path.scope, "before") ]); path.replaceWith( t.callExpression(t.identifier(N.report), [ meta("expression", path.node, path.scope, "after"), t.callExpression( t.memberExpression( contextual ? t.callExpression(t.identifier(N.report), [ meta("expression", path.node.callee, path.scope, "after"), t.memberExpression( t.assignmentExpression( "=", cached_context, u(path.node.callee.object) ), computed ? u(path.node.callee.property) : path.node.callee.property, computed ) ]) : u(path.node.callee), t.identifier("call") ), [cached_context, ...path.node.arguments.map(u)] ) ]) ); path.skip(); const expr = path.get("arguments")[1]; const call = expr; let caller = call.get("callee").get("object"); if (contextual) { caller = caller.get("arguments")[1]; caller .get("object") .get("right") .traverse(visitor); // recurse if (computed) { caller.get("property").traverse(visitor); // recurse } } else { caller.traverse(visitor); // recurse } call .get("arguments") .slice(1) .forEach(argPath => { argPath.traverse(visitor); // recurse }); } else { path.replaceWith( t.callExpression(t.identifier(N.report), [ meta("expression", path.node, path.scope, "after"), path.node ]) ); path.skip(); path.get("arguments")[1].traverse(visitor); // recurse } } }; return visitor; }34:T418,// highlight( // code, // step.info ? step.info.loc : undefined, // step.type === "statement" ? "#fffad2" : "#d5e6ed" // ) function highlight(code, loc, color = "#d5e6ed") { if (!loc) { return html`${code}`; } const lines = code.split("\n"); const before = [ ...lines.slice(0, loc.start.line - 1), lines[loc.start.line - 1].slice(0, loc.start.column) ].join("\n"); const highlighted = loc.start.line === loc.end.line ? lines[loc.start.line - 1].slice(loc.start.column, loc.end.column) : [ lines[loc.start.line - 1].slice(loc.start.column), ...lines.slice(loc.start.line, loc.end.line - 1), lines[loc.end.line - 1].slice(0, loc.end.column) ].join("\n"); const after = [ lines[loc.end.line - 1].slice(loc.end.column), ...lines.slice(loc.end.line) ].join("\n"); return html`${before}${highlighted}${after}`; }35:[] 30:{"id":"b03e303df1821c0a","slug":"visualizing-js-execution-2-w-o-generators","title":"Visualizing JS execution #2 — w/o generators","thumbnail":"193b295ca378c9ab035d7d001f1aced04e4393e9f774848a5738e141e901b4ee","access_level":"public","create_time":"$D2020-01-14T16:56:10.876Z","update_time":"$D2020-01-17T18:42:08.195Z","view_time":null,"first_public_time":"$D2020-01-14T22:04:34.927Z","has_unpublished_edits":null,"fork":{"id":"885ffcf2ce04c4d8","slug":"visualizing-js-execution-2","title":"Visualizing JS execution #2","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":5,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1007,"publish_version":1007,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing JS execution #2 — w/o generators","cells":[{"id":0,"value":"md`# Visualizing JS execution #2 — w/o generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`See [previous notebook](https://observablehq.com/@kelleyvanevert/visualizing-js-execution-2) for more info.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"viewof step = mapinputdata(\n slider({\n title: \"Execution step\",\n value: 0,\n min: 0,\n max: steps.length - 1,\n step: 1\n }),\n stepno => steps[stepno]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"step.error\n ? html`

Error: ${step.error.message}

`\n : html`

${\n step.time === \"before\"\n ? `about to ${step.category === \"statement\" ? \"execute\" : \"evaluate\"}`\n : step.type === \"statement\"\n ? \"executed\"\n : \"evaluated\"\n } ${step.category} of type ${\n step.type\n } ${\n step.time === \"after\" && step.category === \"expression\"\n ? `to:`\n : \"\"\n }

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"step.category === \"expression\" ? step.value : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"md`***The current scope's contents:***`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"step.scope || md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md`***Console logs:***`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"steps\n .slice(0, step.num + 1)\n .map(s => s.logs)\n .flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof code = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"steps = eval(`\n((() => {\n const ${N.ns} = {\n _steps: [],\n _logs: []\n };\n ${N.ns}.__console_log = console.log;\n console.log = (...args) => ${N.ns}._logs.push(...args);\n ${N.cache} = {};\n ${N.report} = function(meta, value) {\n meta.num = ${N.ns}._steps.push(meta) - 1;\n meta.value = value;\n meta.logs = ${N.ns}._logs;\n ${N.ns}._logs = [];\n return value;\n };\n ${transpiled};\n console.log = ${N.ns}.__console_log;\n return ${N.ns}._steps;\n})())\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"transpiled = {\n const ast = babel.parse(code);\n traverse(ast, visitor(meta));\n return generate(ast).code.replace(/\\n\\n/g, \"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"{\n const ast = babel.parse(code);\n traverse(ast, visitor(() => t.nullLiteral()));\n return generate(ast).code.replace(/\\n\\n/g, \"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`## The transpiler`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"N = ({\n ns: \"___V\",\n cache: \"___V.cache\",\n return: \"___V.return\",\n report: \"___V.report\",\n logs: \"___V.logs\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"function meta(category, node, scope, time) {\n // return json(node.type);\n const metadata = {\n category,\n time,\n loc: node.loc,\n type: node.type,\n scope: Object.fromEntries(\n Object.keys(scope.bindings).map(id => [id, { $ast: t.identifier(id) }])\n )\n };\n\n // if (scope._hasReturn) {\n // metadata.scope[\"$return\"] = { $ast: t.identifier(N.return) };\n // }\n\n return json(metadata);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"// A dirty trick to get expressionPath.traverse(visitor)\n// to work also on the top level expression:\n// just perform it on a sequence expression wrapped\n// version of the expression\nfunction u(expressionNode) {\n return t.sequenceExpression([expressionNode]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"function json(data) {\n if (typeof data === \"string\") {\n return t.stringLiteral(data);\n } else if (typeof data === \"number\") {\n return t.numericLiteral(data);\n } else if (data === null) {\n return t.nullLiteral();\n } else if (data === void 0) {\n return t.identifier(\"undefined\");\n } else if (data instanceof Array) {\n return t.arrayExpression(data.map(json));\n } else if (data.$ast) {\n return data.$ast;\n } else {\n return t.objectExpression(\n Object.entries(data).map(([key, value]) => {\n return t.objectProperty(t.stringLiteral(key), json(value));\n })\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"colors = ({\n before: { bg: \"#fbf1a0\", fg: \"#d0bf3a\" },\n after: { bg: \"#4dd4aa\", fg: \"#2eb98e\" }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`## Babel packages`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"generate = (await require('https://bundle.run/@babel/generator@7.8.0')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"t = require('https://bundle.run/@babel/types@7.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"traverse = (await require('https://bundle.run/@babel/traverse@7.8.0')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"babel = require('https://bundle.run/@babel/parser@7.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`## Other dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"function highlight_bold(code, loc) {\n if (!loc) {\n return code;\n }\n\n const lines = code.split(\"\\n\");\n\n const before = [\n ...lines.slice(0, loc.start.line - 1),\n lines[loc.start.line - 1].slice(0, loc.start.column)\n ].join(\"\\n\");\n\n const highlighted =\n loc.start.line === loc.end.line\n ? lines[loc.start.line - 1].slice(loc.start.column, loc.end.column)\n : [\n lines[loc.start.line - 1].slice(loc.start.column),\n ...lines.slice(loc.start.line, loc.end.line - 1),\n lines[loc.end.line - 1].slice(0, loc.end.column)\n ].join(\"\\n\");\n\n const after = [\n lines[loc.end.line - 1].slice(loc.end.column),\n ...lines.slice(loc.end.line)\n ].join(\"\\n\");\n\n return `${before}${highlighted}${after}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"function loc_to_ranges(code, loc) {\n const { start, end } = loc;\n const codelines = code.split(\"\\n\");\n return start.line === end.line\n ? [{ line: start.line, a: start.column, b: end.column }]\n : [\n {\n line: start.line,\n a: start.column,\n b: codelines[start.line - 1].length\n },\n ...Array.from({ length: end.line - start.line - 1 })\n .map((_, i) => i + start.line + 1)\n .map(line => ({ line, a: 0, b: codelines[line - 1].length })),\n { line: end.line, a: 0, b: end.column }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"H = 28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"viewof W = {\n const X = 50;\n\n const el = html`${Array(X + 1).join(\"X\")}`;\n\n setTimeout(() => {\n el.value = el.clientWidth / X;\n el.dispatchEvent(new CustomEvent(\"input\"));\n }, 20);\n\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"fontCss = `\nfont-family: Menlo, Consolas, monospace;\nfont-size: 20px;\nline-height: ${H}px;\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"import { toggle, mapinputdata } from \"@kelleyvanevert/little-things\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"