[elonehoo]

Summary

Playground boot was blocked on importing every Destyler package sequentially, then waiting for Monaco + Volar (TypeScript @latest from jsDelivr) before hiding the splash. The preview iframe also lived in a display:none Splitter slot and was appendChild’d into the visible panel, which reloaded it; a fake 500ms timer then marked it “loaded”.

This PR keeps Destyler component APIs, in-browser SFC compile, and framework switching unchanged. The default Vue checkbox + counter demo still only needs @destyler/checkbox + @destyler/vue.

What changed

1. Trim destyler import map / preload

   • Scan playground files for from '…' / import('…') (and export-from).
   • Import map + preload only those Destyler packages, plus the active framework adapter and framework runtime (vue / react / …).
   • Other Destyler packages are lazy-loaded when the compiler / getFile / require path needs them (Vue/React/Solid/Svelte).
   • Remaining preloads use a bounded Promise.all pool (concurrency 8). Failures log and do not stall boot.
   • Concrete Destyler versions stay pinned on esm.sh (@x.y.z); latest is still unpinned.

2. Unblock first paint

   • Hide “Loading Playground…” after the shell is painted and iframe srcdoc is assigned.
   • Do not wait for Monaco language service.
   • setupLanguageService is deferred via requestIdleCallback (timeout 2s).
   • Only the active framework Monaco worker is dynamically imported.
   • Worker TypeScript CDN version is pinned to 5.6.2 instead of typescript@latest.

3. Iframe

   • Reparent editor/preview into #editor-panel / #preview-panel before assigning srcdoc, so the iframe is not moved while hidden (avoids reload).
   • Use iframe.onload instead of a 500ms isIframeLoaded timer.

Why

Default boot was paying for ~40 unused Destyler packages, serial await import(), Volar/TS worker init, and an extra iframe navigation. First paint and first preview should only pay for Vue + checkbox + the shell.

Test plan

• Default Vue playground: splash hides quickly; checkbox + counter render.
• Add import * as dialog from '@destyler/dialog' in App.vue and use it — preview hot-updates without a full Destyler catalog preload.
• Switch Vue → React → Solid → Svelte; each default checkbox demo still works.
• Select a concrete Destyler version (not latest) and confirm esm.sh URLs include @<version>.
• Editor still gets Vue completions after idle (Volar deferred, not removed).
• Resize splitter / reload page: preview iframe does not flash a double load.

Remaining caveats

• First Destyler import of a package that was not in the initial scan still pays a CDN round-trip (lazy load).
• Monaco/Volar is ready slightly after the editor appears; go-to-definition / diagnostics may lag on first paint.
• latest Destyler (and framework CORE_IMPORTS on esm.sh) remain unpinned until a version is chosen.
• Splitter still renders Astro children into a hidden source node, then moves them once; we only changed when that move happens (before srcdoc).
• Worker TypeScript pin (5.6.2) is independent of whatever typescript@latest would have resolved to on jsDelivr.

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}

[github-actions]

🧹 PR Preview has been removed

The Zeabur preview service for this PR has been deleted.

• Closed: 2026-09-03T09:16:20.681Z
• GitHub Actions