From 1846dcda6af23e8152e64d5aff50b56ffe2a0b34 Mon Sep 17 00:00:00 2001 From: lucas-spin Date: Fri, 12 Jun 2026 16:28:13 +0000 Subject: [PATCH] fix(playground): replace esm.sh with jsdelivr +esm for typecomposer CDN MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit esm.sh generates a split-entry bundle for typecomposer@0.1.56 that imports a generated /es2022/core.mjs sub-path. That sub-path returns HTTP 500: esbuild: No matching export in "node_modules/typecomposer/core/index.js" for import "Component" Root cause: typecomposer's core/* sub-modules re-import from "../.." (the root index), creating a circular dependency that esbuild (used by esm.sh) cannot resolve when building the split core.mjs entry. Fix: switch the import map URL to jsDelivr's +esm endpoint, which uses Rollup to produce a single-file ESM bundle from the root index.js directly. The resulting bundle is a flat 117 KB file with all named exports present and no circular dependency issue. Before: https://esm.sh/typecomposer@${VERSION} → 200 stub → imports /es2022/core.mjs → 500 After: https://cdn.jsdelivr.net/npm/typecomposer@${VERSION}/+esm → 200 single-bundle ESM (Rollup, 117 KB, CORS: *) Only PlaygroundView.ts is changed (1 line + updated comments). Build: ✓ 3486 modules, esbuild.wasm in dist/assets/, 15.32s --- src/views/playground/PlaygroundView.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/views/playground/PlaygroundView.ts b/src/views/playground/PlaygroundView.ts index e919509..12bcf38 100644 --- a/src/views/playground/PlaygroundView.ts +++ b/src/views/playground/PlaygroundView.ts @@ -312,11 +312,15 @@ export class PlaygroundView extends Component { * Create HTML document for iframe. * The compiled user code is injected as a blob: URL and referenced via * a dynamic import() inside the iframe module script. - * The import map resolves `typecomposer` to the esm.sh CDN — no text - * replacement needed (and text replacement was fragile anyway). + * The import map resolves `typecomposer` to the jsDelivr CDN (+esm single bundle). + * esm.sh is broken for this package (HTTP 500 on its generated core.mjs due to + * a circular re-export); jsDelivr bundles it correctly with Rollup. */ private createIframeHTML(compiledCode: string): string { - const typecomposerUrl = `https://esm.sh/typecomposer@${TYPECOMPOSER_VERSION}`; + // jsdelivr +esm bundles the package into a single ES module without the + // split-entry pattern that esm.sh uses — esm.sh@0.1.56 fails with HTTP 500 + // on its generated core.mjs due to a circular re-export in the package. + const typecomposerUrl = `https://cdn.jsdelivr.net/npm/typecomposer@${TYPECOMPOSER_VERSION}/+esm`; // Create a blob URL for the compiled user code. // Tracked in pendingBlobUrls so it is revoked on the next compile run.