31:T528,viewof dependencies = { const form = html`` const button = form.querySelector('button') const container = html`

` container.appendChild(form) form.addEventListener('submit', async event => { event.preventDefault() container.value = null container.dispatchEvent(new CustomEvent("input")) button.textContent = 'Fetching…' const input = Object.fromEntries(new FormData(form)) try { const pkgLock = await fetchDependencies(input) const items = Object.entries(pkgLock.dependencies) .filter(([key, value]) => { if (key === input.packageName) { if (!input.version || input.version === value.version) { return false } } return true }) .map(([key, value]) => `${key}@${value.version}`) .sort() container.value = items container.dispatchEvent(new CustomEvent("input")) } catch (error) { console.error(error) button.textContent = 'Error!' } button.textContent = 'Fetch' }) return container }32:[] 2f:{"title":"List the flattened dependencies of an NPM package","cells":[{"id":0,"value":"md`# List the flattened dependencies of an NPM package`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"dependencyList = dependencies ? html`

${dependencies.length === 1 ? '1 dependency' : `${dependencies.length} dependencies`}

${item}

` : html`

Analysing…

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"fetchDependencies = async (input) => {\n let url = 'https://ni.hubmed.org/p/' + encodeURIComponent(input.packageName.trim())\n\n if (input.version) {\n url += encodeURIComponent('@' + input.version.replace(/^@/, ''))\n }\n\n const response = await fetch(url)\n\n return response.json()\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}