2f:T417,viewof input = { switch (inputtype) { case "url": { const form = html``; form.text.value = 'https://gist.githubusercontent.com/mbostock/3a87eff4c752341faa485a29d4459b52/raw/910e72da4e154ed95d69e76ca763f383b2888c34/package-lock.json'; form.text.oninput = event => event.stopPropagation(); form.value = fetch(form.text.value).then(response => response.text()); form.onsubmit = event => { form.value = fetch(form.text.value).then(response => response.text()); form.dispatchEvent(new CustomEvent("input")); event.preventDefault(); }; return form; } case "text": { return html`

`;
    }
    case "file": {
      const form = html`<form><input name=i type=file accept=.json>`;
      form.oninput = () => form.value = Files.text(form.i.files[0]);
      return form;
    }
  }
}30:[]
2d:{"title":"Package-lock.json Visualizer","cells":[{"id":0,"value":"md`# Package-lock.json Visualizer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof inputtype = html`<select>\n  <option value=url selected>URL\n  <option value=file>File\n  <option value=text>Text\n</select>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"viewof orient = html`<select>\n<option value=LR selected>left-to-right\n<option value=RL>right-to-left\n<option value=TB>top-to-bottom\n<option value=BT>bottom-to-top\n</select>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"chart = /* dot`digraph \"${data.name}\" {\nrankdir = ${orient};\nnode [color = none, fontcolor = grey]\n${data.nodes.map(node => `\"${node}\" [\n  style = filled,\n  color = black,\n  fontcolor = black,\n  fillcolor = white,\n  href = \"https://www.npmjs.com/package/${node.split(\"@\").join(\"/v/\")}\",\n  target = _blank\n]`).join(\"\\n\")}\n${data.edges.map(([source, target]) => `\"${source}\" -> \"${target}\"`).join(\"\\n\")}\n}` */","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html`\n${DOM.download(await rasterize(chart), null, \"Download as PNG\")}\n${DOM.download(await serialize(chart), null, \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"JSON.parse(input)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = {\n  const root = JSON.parse(input);\n  const nodes = [];\n  const nodeSet = new Set();\n  const edges = [];\n  const edgeSet = new Set();\n  const ancestors = [root];\n\n  for (let dep of root.dependencies) {\n\n  return { name: root.name, nodes, edges };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"style = html`<style>\n\ntextarea {\n  display: block;\n  box-sizing: border-box;\n  background: transparent;\n  width: calc(100% + 28px);\n  font: var(--mono_fonts);\n  border: none;\n  padding: 6px 10px;\n  margin: 0 -14px;\n  tab-size: 2;\n  resize: none;\n  background: rgb(247,247,249);\n}\n\ntextarea:focus {\n  outline: none;\n}\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"dot = require(\"@observablehq/graphviz@0.2\").then(dot => dot.options({TOTAL_MEMORY: 1024 * 1024 * 64}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"semver = {\n  const module = window.module = {};\n  await require(\"semver@5\").catch(() => {});\n  delete window.module;\n  delete window.exports;\n  return module.exports;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}
</article></body></html>