2e:null 2f:["$","title",null,{"children":"npm Dependents Browser | Fabian Iwand | Observable"}] 34: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 } }); }35:T777,style = html` `36:[] 32:{"id":"8388185f0d308f83","slug":"npm-dependents-browser","title":"npm Dependents Browser","thumbnail":"9624f2613741985639615cbc247bffe3cf47358592c3308c88771162499d5a5b","access_level":"public","create_time":"$D2018-06-02T08:19:57.381Z","update_time":"$D2018-08-16T21:15:37.128Z","view_time":null,"first_public_time":"$D2018-06-02T18:05:31.361Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":269,"publish_version":269,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"399483b51800a77d","slug":"graveyard","title":"Graveyard","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof name = text({ placeholder: 'Enter npm package name', submit: 'Submit' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function corsProxy(url) {\n return 'https://cors-anywhere.herokuapp.com/' + url;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Vue = require('vue@2.5.16/dist/vue.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"import {text} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"