2c:null 2d:["$","title",null,{"children":"require() → import converter | Observable Ambassadors | Observable"}] 32:T1f20,// builds the paste-ready import snippet for a resolved result; returns null if nothing // usable was found (used both for per-card rendering and the "copy all" button) function buildSnippet(r) { if (r.merge) { if (!r.parts.every((p) => p.info.recommendedUrl)) return null; const seen = new Set(); const ids = r.parts.map((p) => { let id = toIdentifier(p.info.name || p.spec) || "mod"; let candidate = id, i = 2; while (seen.has(candidate)) candidate = id + i++; seen.add(candidate); return candidate; }); // EDGE CASE: same default-vs-namespace distinction as the single-package case below, // applied per-part -- a default-only merge part still needs `import x from`, since // `import * as x` would bind it to `{default: ...}` and break `Object.assign`. const importLines = r.parts.map((p, i) => `import ${p.info.recommendedIsDefaultOnly ? "" : "* as "}${ids[i]} from "${p.info.recommendedUrl}";`); const mergeLine = `const ${r.varName || "merged"} = Object.assign({}, ${ids.join(", ")});`; return [...importLines, mergeLine].join("\n"); } if (!r.recommendedUrl) return null; // EDGE CASE, found via testing qrcode@1.4.4/build/qrcode.min.js (see tryDynamicImport): // when the resolved module's only export is "default" -- a CJS module whose whole // `module.exports` was a single value -- 1.0's require() bound the variable directly to // that value with no namespace wrapping. `import * as X from "..."` here would instead // bind X to `{default: ...}`, so e.g. `X.create(...)` breaks while `X.default.create(...)` // works. A real `import X from "..."` default import unwraps that one level and matches // 1.0's actual behavior. return `import ${r.recommendedIsDefaultOnly ? "" : "* as "}${r.varName || "mod"} from "${r.recommendedUrl}";`; } async function copyToClipboard(text) { if (navigator.clipboard?.writeText) { try { await navigator.clipboard.writeText(text); return true; } catch (e) {} } // fallback for browsers/contexts without the async Clipboard API const el = document.body.appendChild(document.createElement("textarea")); el.style.position = "absolute"; el.style.left = "-9999px"; el.value = text; el.select(); try { return document.execCommand("copy"); } finally { el.remove(); } } const importLines = resolved.map(buildSnippet).filter(Boolean); const copyAllButton = html``; copyAllButton.disabled = importLines.length === 0; copyAllButton.onclick = async () => { const ok = await copyToClipboard(importLines.join("\n")); copyAllButton.textContent = ok ? "✅ Copied!" : "❌ Copy failed"; setTimeout(() => (copyAllButton.textContent = "📋 Copy all imports"), 1200); }; // the cards themselves live in a fixed-height, independently-scrolling box, so a long // pasted list of require() calls doesn't push the rest of the notebook (e.g. the "How it // works" section below) far down the page -- everything stays within readable scope. const cardsBox = html`

`; for (const r of resolved) { // error-only card: covers malformed require() calls, unsupported template placeholders, // and (below) merge groups where at least one part failed if (r.error && !r.merge) { cardsBox.append(html.fragment`

${r.spec}

${r.error}

`); continue; } if (r.merge) { const snippet = buildSnippet(r); const card = html`

require(${r.spec})${r.varName ? html.fragment` → variable ${r.varName}` : ""} (multi-package merge)

${snippet ? html.fragment`

${snippet}

` : html.fragment`

${r.error}

${p.info.recommendedUrl ? "✅" : "❌"} ${p.spec}${p.info.recommendedUrl ? html.fragment` via ${p.info.recommendedVia}` : html.fragment` — ${p.info.error ?? "no working import found on any CDN"}`}

`; if (snippet) { const btn = card.querySelector("button"); btn.onclick = async () => { const ok = await copyToClipboard(snippet); btn.textContent = ok ? "✅ copied" : "❌ failed"; setTimeout(() => (btn.textContent = "📋 copy"), 1200); }; } cardsBox.append(card); continue; } const attemptsList = html.fragment`

${a.ok ? "✅" : "❌"} ${a.name} — ${a.url}${!a.ok ? html.fragment` (${a.error})` : ""}

`; const card = html`

${r.spec}${r.varName ? html.fragment` → variable ${r.varName}` : ""}

${r.recommendedUrl ? html.fragment`

${buildSnippet(r)}

` : html.fragment`

No CDN could convert this to ESM.${ r.globalLeak?.ok ? html.fragment` Falling back to the legacy global-leak pattern — this module attaches ${r.globalLeak.globals.join(", ")} to window when loaded as a plain script.` : " Even the global-leak fallback failed — this package may not be usable in a browser at all." }

${r.version ? html.fragment`resolved version: ${r.version}
` : ""} real dynamic-import attempts:${attemptsList} ${r.legacyResolvedUrl ? html.fragment`what Observable 1.0's require() itself resolved this to (via d3-require's real resolver — informational, not necessarily valid ESM): ${r.legacyResolvedUrl}` : ""}

`; if (r.recommendedUrl) { const perCardButton = card.querySelector("button"); const line = buildSnippet(r); perCardButton.onclick = async () => { const ok = await copyToClipboard(line); perCardButton.textContent = ok ? "✅ copied" : "❌ failed"; setTimeout(() => (perCardButton.textContent = "📋 copy"), 1200); }; } cardsBox.append(card); } const outputDiv = html`

`; outputDiv.append(copyAllButton, cardsBox); display(outputDiv); 33:T16f9,## How it works (Observable AI generated) You can't reliably guess a package's ESM path by hand — `/dist/foo.esm.js` is just one convention among many, and plenty of old packages (like `compromise`) have no real ESM build at all despite misleading filenames. So instead of guessing: 1. **Pin an exact version.** Tags/ranges like `4` or `latest` are resolved to a real semver via jsDelivr's API before anything else. 2. **Actually attempt real dynamic imports**, in priority order, against CDNs that both locate the right entry point *and* rewrite CJS/bare specifiers on the fly: jsDelivr `+esm` → esm.sh → Skypack. The first one that doesn't throw *and* actually has exports wins (see the empty-module edge case below) — deliberately empirical rather than inferred from `package.json` metadata, which can lie or be absent. 3. **Fall back to the legacy global-leak pattern** if no CDN can convert it: load the file as a plain `