2b:null 2c:["$","title",null,{"children":"Module require debugger | Jose Jimenez | Observable"}] 31:T46c,moduleName ? html`

Below are multiple strategies for loading this library. Those with a thumbs-up work, those with a frowny face don’t, and the ones with a shrug work, but have caveats.

${[basicRequire, dynamicImport, bundleRun, scavengingForLinks, globalLeaksPattern] .filter(Boolean) .sort((a, b) => a.type == success ? -1 : 1) .map(({code, type, error, description}) => html`

${emojis[type]} ${code}

${md`${description}`}

${error && parseForError(error) ? ('Check out these errors: ' + parseForError(error)) : '' }

`)}

` : html`Enter a module name above and click Go to get started`32:T5dd,html`

	entry point	description
${!!pkg.main ? `✓` : ''}	main	The original one: this was the first kind of entry point invented, and for a long time it was almost always code that would run in the Node.js environment.
${!!pkg.unpkg ? `✓` : ''}	unpkg	An entry point invented by unpkg, the web-friendly npm content delivery system. It’s usually a really good sign if we see one of these, because they’re supposed to be UMD files, which are very web-friendly.
${!!pkg.module ? `✓` : ''}	module	The entry point of the future! In this one should lie a ES Module - a new module syntax for JavaScript that’s built into the language itself. It’s great if we find one of these, but not a guaranteed win, because support and interoperability of this module type is pretty scarce.

Sometimes a package.json won’t have any of these, and that's fine. In that case, we are left to assume that the entry point is index.js

`33:T90d,globalLeaksPattern = { let error_encountered = ''; if (!moduleName) return undefined; const permaurl = (await fetch(`https://unpkg.com/${moduleName}`)).url; let errorEncountered = []; const allCandidates = [permaurl].concat(viableCandidates.map( candidate => `${permaurl}${candidate}`)); let iframe = document.createElement('iframe'); let html = ''; document.body.appendChild(iframe); let beforeKeys = new Set(Object.keys(iframe.contentWindow)); for (let i = 0; i < allCandidates.length; i++) { let localError = null; let candidate = allCandidates[i]; iframe.contentWindow.document.open(); let script = iframe.contentWindow.document.appendChild(iframe.contentWindow.document.createElement('script')); script.src = candidate; await new Promise((resolve, reject) => { script.addEventListener('load', resolve); script.addEventListener('error', reject) }).catch((someError) => { debugger; errorEncountered.push(someError); localError = someError}); let newKeys = Object.keys(iframe.contentWindow).filter(k => !beforeKeys.has(k)).filter(k => !['ENV', 'require'].includes(k)); iframe.contentWindow.document.close(); if (newKeys.length && !localError) { return { type: success, code: `require('${candidate.replace('https://unpkg.com/', '')}').catch(() => window.${newKeys[0]})`, description: `The ‘global leak’ pattern. It’s a doozy. Essentially a module that works in node, and works as a script tag, but doesn’t work with any specific loader. So we use require(), expect it to fail, and then grab the global that it adds to the window. There may be multiple variables attached to the window that way, so for completeness, here are all of them: ${newKeys.join(', ')}.` }; } } if (errorEncountered.length > 0) { return { type: failure, code: ``, description: `The ‘global leak’ pattern. It’s a doozy. Essentially a module that works in node, and works as a script tag, but doesn’t work with any specific loader. So we use require(), expect it to fail, and then grab the global that it adds to the window. There may be multiple variables attached to the window that way, but we didn't find any.`, errors: errorEncountered }; } }34:[] 2f:{"id":"be2272e5be7ce4a5","slug":"module-require-debugger","title":"Module require debugger","thumbnail":"61667b40111480a6071a37be1ae5c8f03a4b63a327831efc7be7ae23dca359bf","access_level":"public","create_time":"$D2018-03-29T17:04:49.710Z","update_time":"$D2018-03-29T19:21:35.175Z","view_time":null,"first_public_time":"$D2018-03-29T17:53:17.226Z","fork":{"id":"8bb4872a89cb6064","slug":"module-require-debugger","title":"Module require debugger","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":5,"starred":false,"owner":{"type":"team","id":"11eff763c21b0530","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":"starter_2024"},"version":774,"publish_version":774,"role":null,"authored":false,"authors":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null}],"members":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Module require debugger","cells":[{"id":0,"value":"md`# Module require debugger\n\n${!importSupport ? `**Note:** your browser doesn't support [dynamic import()](https://caniuse.com/#feat=es6-module), so this debugger will never recommend that option.` : ''}\n\nLoading modules is tricky! Because modules are tricky. Let's try to make them a little easier. Enter a module into the moduleName field below, click Go, and see which module-loading strategies will work.\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof moduleName = text({placeholder: \"module-name\", description: \"Enter the module’s name, as it is on npm. For example, try wcag-contrast.\", submit: \"Go\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"md`## Analysis\n\nOkay, what kind of entry points do we have here! “Entry point” is a fancy term for a property in package.json that points to a file that can be initially included as the module’s starting point. That entry point might require other files, but it’s the key starting point.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"parseForError = (error) => {\n return error.stack.split('\\n').filter( line => line.match(/ReferenceError/)).join('\\n')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"basicRequire = {\n if (!moduleName) return undefined;\n const permaurl = (await fetch(`https://unpkg.com/${moduleName}`)).url.replace('https://unpkg.com/', '');\n const res = {\n code: `require('${permaurl}')`,\n description: `This is the default, simplest method to require a module. It uses [d3-require](https://github.com/d3/d3-require) behind the scenes, pulls from unpkg by default, and supports UMD and AMD modules.`\n };\n try {\n await require(permaurl);\n return {\n type: success,\n ...res\n }\n } catch (e) {\n return {\n type: failure,\n error: e,\n ...res\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"importSupport = { try { eval(`import('test')`); return true; } catch (e) { return false; } }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"dynamicImport = {\n if (!moduleName || !importSupport) return undefined;\n const permaurl = (await fetch(`https://unpkg.com/${moduleName}?module`)).url;\n const res = {\n code: `import('${permaurl}')`,\n description: `This is the way of the future: it’s the only technique in the list that actually has your browser deal with importing modules, instead of bundling them all into one file. Advantage is that it’s super cool, and excellent for debugging - no need for sourcemaps, the files are more or less verbatim. The disadvantage is that browser support is [super slim](https://caniuse.com/#feat=es6-module).`\n };\n try {\n await eval(`import('${permaurl}')`);\n return {\n type: success,\n ...res\n }\n } catch (e) {\n return {\n type: failure,\n error: e,\n ...res\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"bundleRun = {\n if (!moduleName) return undefined;\n const res = {\n code: `require('https://bundle.run/${moduleName}@${pkg.version}')`,\n description: `[bundle.run](https://bundle.run/) is a freshened-up version of [wzrd.in](http://wzrd.in/), and the two tools serve the same purpose: to bundle modules. It runs [rollup](https://rollupjs.org/) and [browserify](http://browserify.org/) on the fly to combine multiple JavaScript files into one bundle that’s easily consumed by web browsers. The advantage is that it often works on stubborn modules that the author never expected to be run in a browser environment. The disadvantage is that it isn’t guaranteed to be as lightning-fast as unpkg.`\n };\n try {\n await require(`https://bundle.run/${moduleName}@${pkg.version}`);\n return {\n type: success,\n ...res\n }\n } catch (e) {\n return {\n type: failure,\n error: e,\n ...res\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"viableCandidates = {\n if (!moduleName) return undefined;\n const meta = await (await fetch(`https://unpkg.com/${moduleName}/?meta`)).json();\n function collectPaths(root) {\n let list = [];\n function collect(node) {\n node.files.forEach(f => {\n if (f.type == 'file') list.push(f.path);\n else collect(f);\n });\n }\n collect(root);\n return list;\n }\n let candidates = collectPaths(meta).filter(p => p.match(/(umd|amd|dist)/) && p.match(/js$/));\n return candidates;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"scavengingForLinks = {\n if (!moduleName) return undefined;\n for (let candidate of viableCandidates) {\n try {\n await require(`${moduleName}@${pkg.version}${candidate}`);\n return {\n type: success,\n code: `require('${moduleName}@${pkg.version}${candidate}')`,\n description: `This is _scavenging for dists_ mode: we looked through the files in this module and found one that mentioned dist, amd, or umd, and that worked.`\n }\n } catch (e) {}\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"pkg = moduleName && (await fetch(`https://unpkg.com/${moduleName}/package.json`)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"document.addEventListener('click', e => {\n if (e.target.className === 'copiable') {\n copy(e.target.textContent);\n e.target.classList.add('copied');\n setTimeout(() => e.target.classList.remove('copied'), 500);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"emojis = ({\n [failure]: '☹️',\n [success]: '👍',\n [maybe]: '🤷‍'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"success = Symbol('success')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"failure = Symbol('failure')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"maybe = Symbol('maybe')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"omit = Symbol('omit')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":582,"value":"function copy(text) {\n var fakeElem = document.body.appendChild(document.createElement('textarea'));\n fakeElem.style.position = 'absolute';\n fakeElem.style.left = '-9999px';\n fakeElem.setAttribute('readonly', '');\n fakeElem.value = text;\n fakeElem.select();\n try {\n return document.execCommand('copy');\n } catch (err) {\n return false;\n } finally {\n fakeElem.parentNode.removeChild(fakeElem);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"