31:Ta22,{ if(!name.length) { yield html`

`; return; } Vue.component('item', { template: `

`, props: { model: Object }, data: function () { return { open: false, loading: false, loaded: false, empty: false } }, computed: { url: function() { return 'https://www.npmjs.com/package/' + this.model.name; } }, methods: { toggle: async function () { if(this.loaded) { this.open = !this.open; return; } if(!this.loading) { this.loading = true; Vue.set(this.model, 'children', []); const delayOffset = Date.now(); this.model.children.push(...(await queryDependents(this.model.name, 0, 1000))); const visualDelay = Math.max(200 + delayOffset - Date.now(), 0); // UX: Force spinner to be shown even for cached responses. if(visualDelay) await Promises.delay(visualDelay); this.empty = !this.model.children.length; this.loading = false; this.loaded = true; this.open = true; } }, } }); yield md`*Fetching dependent packages ...*`; const data = await queryDependents(name); if(!data.length) { yield md`*No dependent packages found.*`; return ; } const container = html`

`; yield container; const app = new Vue({ el: container, data: { treeData: data } }); }32:T777,style = html` `33:[] 2f:{"title":"npm Dependents Browser","cells":[{"id":0,"value":"md`\n# npm Dependents Browser\n\nFind packages that depend on other packages.\n\n*Note: This notebook uses a [CORS proxy](https://cors-anywhere.herokuapp.com/) to perform cross-origin requests to [replicate.npmjs.com](https://replicate.npmjs.com/). If the proxy should reach its bandwidth limit check the Implementation Notes at the end for alternative proxies.*\n\n***Update: NPM finally killed off the API this notebook depends on.***\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof name = text({ placeholder: 'Enter npm package name', submit: 'Submit' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"function queryDependents(name, offset = 0, limit = 20) {\n const viewPath = 'https://replicate.npmjs.com/registry/_design/app/_view/dependedUpon';\n const params = {\n group_level: 3,\n startkey: JSON.stringify([name]),\n endkey: JSON.stringify([name, {}]),\n skip: offset,\n limit: limit\n };\n \n const url = corsProxy(viewPath + '?' + encodeQuery(params));\n const response = fetch(url, {\n mode: 'cors',\n cache: 'force-cache' // Chrome support only in Nightly\n });\n return response.then(r => r.json()).then(d => d.rows.map(row => ({\n name: row.key[1],\n desc: row.key[2]\n })));\n\n function encodeQuery(params) {\n return Object.keys(params).reduce((arr, n) => {\n arr.push(encodeURIComponent(n) + '=' + encodeURIComponent(params[n]));\n return arr;\n }, []).join('&');\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"function corsProxy(url) {\n return 'https://cors-anywhere.herokuapp.com/' + url;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`\n## Implementation Notes\n- CORS proxies: https://gist.github.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347\n- Deprecation: https://blog.npmjs.org/post/173939360180/couchdb-browse-views-unavailable\n- CouchDB app: https://github.com/npm/npm-registry-couchapp/blob/master/registry/views.js#L587\n- Vue tree example: https://jsfiddle.net/chrisvfritz/pnqzspoe/?utm_source=website&utm_medium=embed&utm_campaign=pnqzspoe\n- Dependant vs. dependent: http://grammarist.com/spelling/dependant-dependent/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"Vue = require('vue@2.5.16/dist/vue.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"import {text} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}