2d:null 2e:["$","title",null,{"children":"npm Package Dependency Tree | Amogh Kambale | Observable"}] 33:T5a8,tree = { const divTree = document.querySelector('div#tree') divTree.innerHTML = ''; const tree = new DependenTree('div#tree', {textClick: (e, d) => window.open(d._link, '_blank')}); const img = document.querySelector('img#load'); const entitySelect = document.getElementById('list'); const upOrDownSelect = document.getElementById('upOrDown'); entitySelect.innerHTML = ''; document.querySelector('button#form-expand').addEventListener('click', () => tree.expandAll(5)); let currentEntity = pkg; let direction = 'upstream'; (async () => { img.style.display = 'block'; const response = await get(pkg); const data = JSON.parse(JSON.stringify(response)); tree.addEntities(data); const entityList = tree.getEntityList(); entityList.sort(); entityList.forEach(name => { const option = document.createElement('option'); option.value = name; const text = document.createTextNode(name); option.appendChild(text); entitySelect.appendChild(option); }); upOrDownSelect.addEventListener('change', e => { direction = e.target.value; tree.setTree(currentEntity, direction); }); entitySelect.addEventListener('change', e => { if (e.target.value === '') return; currentEntity = e.target.value; tree.setTree(currentEntity, direction); }); img.style.display = 'none'; tree.setTree(pkg); })(); return tree; }34:[] 31:{"id":"fe0b912f907d8724","slug":"npm-package-dependency-tree","title":"npm Package Dependency Tree","thumbnail":"8707e372e601895ac8e610bd7bbefb32468b5f6cfe8f33c9018232883e5e399d","access_level":"public","create_time":"$D2022-04-30T23:20:17.424Z","update_time":"$D2024-05-25T17:28:46.994Z","view_time":null,"first_public_time":"$D2022-05-01T00:50:16.437Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"f308c9e7270d1bab","login":"amogh","name":"Amogh Kambale","avatar_url":"https://avatars-next.observableusercontent.com/1a7fbf21e2e4aea979daf8014fbd02494a23ef9958b286415312ecd68bfe3392","tier":"starter_2024"},"version":201,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5f2fc24d2e6b18ba","login":"amogh","name":"Amogh Kambale","avatar_url":"https://avatars-next.observableusercontent.com/1a7fbf21e2e4aea979daf8014fbd02494a23ef9958b286415312ecd68bfe3392","tier":null}],"members":[{"type":"individual","id":"5f2fc24d2e6b18ba","login":"amogh","name":"Amogh Kambale","avatar_url":"https://avatars-next.observableusercontent.com/1a7fbf21e2e4aea979daf8014fbd02494a23ef9958b286415312ecd68bfe3392","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"npm Package Dependency Tree","cells":[{"id":0,"value":"# npm Package Dependency Tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"Edit `pkg` with the name of a published npm package. Visualize the dependency graph from any package, upstream or downstream. Fetching dependencies can take more than a minute depending on how many a package has.\n\nBuilt with [DependenTree](https://observablehq.com/@amogh/dependentree).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"pkg = 'vue'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"\n\n\n
\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"get = {\n const get = async name => {\n const store = new Set();\n let queue = [name];\n const data = {};\n \n while (queue.length) {\n const requests = queue.map(pkgName => getJson(pkgName))\n\n const infoArr = await Promise.all(requests);\n\n const pkgArr = infoArr.map(pkgInfo => new Pkg(pkgInfo));\n console.log(pkgArr);\n const newQ = []\n pkgArr.forEach(pkg => {\n data[pkg._name] = pkg;\n pkg._deps.forEach(dep => {\n if (!store.has(dep)) {\n store.add(dep);\n newQ.push(dep);\n }\n });\n });\n queue = newQ;\n }\n return data;\n }\n return get;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Pkg = {\n class Pkg {\n constructor({name, version, description, author, dependencies}) {\n this._name = name;\n this._deps = dependencies ? Object.keys(dependencies) : [];\n \n this.Author = typeof author === 'object' ? author.name : author;\n this.Version = version;\n this.Description = description;\n this._link = `https://www.npmjs.com/package/${name}`;\n }\n }\n return Pkg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"getJson = {\n const getJson = async moduleName => {\n if (!moduleName) return undefined;\n try {\n return await (await fetch(`https://unpkg.com/${moduleName}/package.json`)).json();\n } catch (e) {\n console.log(e);\n return false;\n }\n }\n return getJson;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"DependenTree = require('@square/dependentree@1.0.2/dist/dependentree.js');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"