30:Tcb1,function getImports(ast, {baseURI = 'https://api.observablehq.com/'} = {}) { const exportBody = getExportBody(ast); // import module var -> import path const modules = Object.fromEntries(findAll(ast.body, { type: 'ImportDeclaration', specifiers: { 0: { local: { $index: 'local' } } }, source: { $index: 'value' } }, d => [d.local.name, {path: baseURI ? `${new URL(d.value.value, baseURI)}` : d.value.value, imports: []}])); // runtime module var -> import module var const moduleMap = Object.fromEntries(findAll(exportBody, { type: 'VariableDeclaration', declarations: { 0: { type: 'VariableDeclarator', id: { $index: 'name' }, init: { type: 'CallExpression', $oneOf: [ // Branch: "runtime.module( ... );" { callee: { type: 'MemberExpression', object: { name: 'runtime' }, property: { name: 'module' }, }, arguments: { length: 1, 0: { $index: 'define' } } }, // Branch: "runtime.module( ... ).derive( ... );" { callee: { type: 'MemberExpression', object: { type: 'CallExpression', callee: { type: 'MemberExpression', object: { name: 'runtime' }, property: { name: 'module' }, }, arguments: { length: 1, 0: { $index: 'define' } } }, property: { name: 'derive' }, }, arguments: { length: 2, 0: { type: 'ArrayExpression', elements: { $index: 'derive' } } } } ], } } }, }, d => [d.name.name, { define: d.define.name, derive: (d.derive || []).map( n => n.type === 'Literal' ? {name: n.value, alias: null} : Object.fromEntries(n.properties.map(n => [n.key.name, n.value.value])) ), }])); //console.log({moduleMap}); const imports = findAll( exportBody, { type: 'ExpressionStatement', expression: { callee: { object: { name: 'main' }, property: { name: 'import' }, }, arguments: { $oneOf: [ { length: 2, 0: { $index: 'name' }, 1: { $index: 'module' }, }, { length: 3, 0: { $index: 'name' }, 1: { $index: 'alias' }, 2: { $index: 'module' }, } ], } } }, d => ({ module: d.module.name, name: d.name.value, alias: d.alias ? d.alias.value : null }) ); for(const {module, name, alias} of imports) { modules[moduleMap[module].define].imports.push({name, alias}); } return Object.fromEntries(Array.from( Object.values(modules), ({path, imports}) => [path, imports] )); }31:T579,getVariables = ast => { const exportBody = getExportBody(ast); const functions = Object.fromEntries(findAll(ast.body, { type: 'FunctionDeclaration', id: { $index: 'name' }, $index: 'node' }, ({name, node}) => [name.name, node])); const variables = findAll( exportBody, { type: 'ExpressionStatement', expression: { callee: { object: { callee: { object: { name: 'main' }, property: { name: 'variable' }, } }, property: { name: 'define', } }, arguments: { $oneOf: [ { length: 2, 0: { $index: 'name', type: 'Literal' }, 1: { $index: 'value' }, }, { length: 2, 0: { $index: 'inputs', type: 'ArrayExpression' }, 1: { $index: 'value' }, }, { length: 3, 0: { $index: 'name', type: 'Literal' }, 1: { $index: 'inputs', type: 'ArrayExpression' }, 2: { $index: 'value' }, }, ], }, } }, d => ({ name: d.name ? d.name.value : null, inputs: d.inputs ? d.inputs.elements.map(n => n.value) : [], value: functions[d.value.name] || d.value, }) ); return variables; }32:T45d,// Returns fileAttachments as object of {name: {name, url, mimeType}}. function getAttachments(ast) { const attachments = find( getExportBody(ast), { type: 'VariableDeclaration', declarations: { 0: { id: { name: 'fileAttachments' }, init: { type: 'NewExpression', callee: { name: 'Map' }, arguments: { 0: { type: 'ArrayExpression', elements: { $index: 'elements' }, } } } } }, }, d => d.elements, ) || {}; return Object.fromEntries(findAll( attachments, { elements: { 0: { type: 'Literal', value: { $index: 'name' }, }, 1: { type: 'ObjectExpression', properties: { 0: { key: { name: 'url' }, value: { $index: 'url' } }, 1: { key: { name: 'mimeType' }, value: { $index: 'mimeType' } }, } } } }, ({name, url, mimeType}) => [name, {name, url: url.value, mimeType: mimeType.value}] )); }33:Ta99,function variableList(variables, {local: localInputs, imported: importedInputs}, options = {}) { const { className = DOM.uid('variable-list').id, reformat = false, onlyNamed = false, } = options; const inputAttributes = { local: {class: 'local', title: 'local input'}, imported: {class: 'imported', title: 'imported input'}, builtin: {class: 'builtin', title: 'builtin input'}, }; const inputType = name => localInputs.has(name) ? 'local' : importedInputs.has(name) ? 'imported' : 'builtin'; return html`

${n}`)
      });
    }
      
    const s = highlight(reformat ? astring.generate(ast) : source);
    rows.push({
      type: 'source',
      label: 'Source',
      content: html`${s}`
    });
      
    return html`
${name == null ? html`#${i+1}` : html`${name}`}
${rows.map(r => html`${r.label} ${r.content}`)}
    `;
  }

  function css() {
    return `
:scope {
  --padding: 5px 10px;
  max-width: initial;
  font: 16px/1.5 var(--sans-serif);
  padding: 0;
  list-style: none;
}
:scope li:not(:first-child) { margin-top: .5em }
:scope .inputs {
  margin-top: .5em;
}
:scope li {
  border: 1px solid #efefef;
  border-radius: 3px;
}
:scope li > :first-child {
  display: block;
  background: #efefef;
  padding: var(--padding);
  font-weight: bold;
}
:scope .inputs,
:scope .inputs code {
  font-size: 13px;
}
:scope .inputs code {
  color: var(--syntax-keyword);
  cursor: help;
  border: 2px solid currentColor;
  padding: 3px;
  border-radius: 3px;
  display: inline-block;
  margin: 0 5px 5px 0;
}
:scope .inputs td {
  padding-bottom: 0;
}
:scope .inputs code.builtin {
  color: green;
}
:scope .inputs code.imported {
  color: hsl(200,100%,40%);
}
:scope li .value {
  margin-top: .5em;
  max-height: 300px;
  height: fit-content;
  border:1px solid #eee;
  padding: 5px;
  overflow: auto;
  background: #fafafa;
}
:scope pre {
  margin: 0;
}
:scope pre,
:scope pre > code {
  font-size: 13px;
}
:scope table {
  table-layout: fixed;
  width: 100%;
  max-width: none;
  margin: 5px 0;
}
:scope tr {
  border: none;
}
:scope th {
  width: 6ch;
}
:scope th,
:scope td {
  vertical-align: text-top;
  padding: var(--padding);
}
    `;
  }

}34:[]
2e:{"title":"Deconstructing a Notebook","cells":[{"id":0,"value":"# Deconstructing a Notebook\n\n\nObservable compiles notebooks to [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). Here we analyze a module's abstract syntax tree (AST) to extract information like imports, file attachments and variables.\n\n*JavaScript ASTs are verbose and complex to work with. This notebook was created to explore how an AST can be queried in a developer-friendly manner. See the section [AST Helpers](#s_ast) for more details.*\n\n\n\n---\n","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"viewof notebook = notebookInput({\n  label: 'Notebook',\n  width: 'min(100%, 600px)',\n  value: preset('p', datalist[0]),\n  datalist,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"### Viewing: [${notebook.title}](${notebook.url}) by [${notebook.name}](https://observablehq.com/@${notebook.login})\n\n${more(`Observable lacks an API to query a notebook's metadata. Instead we extract the information displayed above from the [frontmatter](https://www.seancdavis.com/posts/wtf-is-frontmatter/) of Observable's [legacy module format](https://api.observablehq.com/@observablehq/demo.js?v=1). See [Notebook Input](https://observablehq.com/@mootari/notebook-input) for details.`)}","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"\n  **Imports**
\n\n  ${more('Aliased imports are shown as `original` → `alias`.')}\n\n${fallback(\n  Object.entries(imports).map(([path, imports]) => {\n    const name = new URL(path).pathname.slice(1, -3);\n    const link = `[\\`${name}\\`](${presetUrl('p', name)})`;\n    const list = imports.map(({name, alias: a}) => `  - \\`${name}\\`${a == null ? '' : ` → \\`${a}\\``}\\n`).join('');\n    return `- ${link}\\n${list}`;\n  }),\n  `*This notebook has no imports.*`\n)}","pinned":false,"hidden":false,"mode":"md"},{"id":531,"value":"\n  **Attachments**
\n\n  ${more('The file icons below are derived from each file extension via the [`file-extension-icon-js`](https://github.com/minhazmiraz/file-extension-icon-JS) package. Hover over an icon to view the MIME type that was detected by Observable.')}\n\n${fallback(\n  Object.values(attachments).map(({name, url, mimeType}) => {\n    const icon = fileIcon(name);\n    return `-  [\\`${name}\\`](${url})\\n`;\n  }),\n  `*This notebook has no attachments.*`\n)}","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"s_variables = {\n\n  const options = Inputs.checkbox(['onlyNamed', 'reformat'], {\n    value: ['onlyNamed'],\n    format: d => ({reformat: 'Reformat sources', onlyNamed: 'Hide unnamed cells'}[d])\n  });\n\n  const vars = variables.map(({value: ast, ...v}, index) => ({\n    ...v, index, ast, source: source.slice(ast.start, ast.end),\n  }));\n\n  const list = html``;\n  const update = () => {\n    list.firstElementChild?.remove();\n    list.appendChild(variableList(vars, inputSources, {\n      reformat: options.value.includes('reformat'),\n      onlyNamed: options.value.includes('onlyNamed'),\n    }));\n  };\n  update();\n  options.addEventListener('input', update);\n\nreturn html`\nVariables
\n\n${more('Unnamed variables are enumerated as #123. Move the cursor over an input name to show its origin.')}\n\n${options} ${list}\n  `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"---\n## Data\n\nShown below is the [module source](${notebook.module3}) and the data that has been extracted from it. The syntax tree is created via the [acorn](https://github.com/acornjs/acorn) parser. A variable's `value` property references the AST node from which its original source can be recompiled (e.g. via [`astring`](https://github.com/davidbonnet/astring)).","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"viewof source = {\n  const text = await fetch(notebook.module3).then(r => r.text());\n  \n  const scope = DOM.uid().id;\n  const css = scoped(scope, `\n:scope {height: 200px; resize: vertical; overflow: auto; border: 1px solid #eee; padding: 0 10px; background: #fafafa }\n:scope pre, :scope code { font-size: 13px }\n  `);\n  const view = html`${highlight(text)}