@deot/docs-playground 1.1.8 → 1.2.0

package/README.md

@@ -53,7 +53,7 @@ const files = ref({
 | `id` | `string` | `''` | 标题锚点 id；未传时从 `title` 自动生成。仅挂在内联 runtime 标题上，弹窗不重复。 |
 | `expandable` | `true \| number` | `undefined` | 开启预览高度展开；未传不显示控件；`true` 展开到剩余视口；正数为目标高度（px）。 |
 | `previewScroller` | `boolean` | `false` | 在 iframe 内用 `@deot/vc` Scroller 替换原生滚动条；开启后会动态探测 `Scroller`，不存在则回退原生滚动。 |
-| `local` | `boolean` | `true` | 在当前文档编译并挂载。内置模块默认继承宿主，可通过 import map 逐个覆盖；预览使用所选 Vue 运行时挂载。 |
+| `local` | `boolean` | `true` | 在当前文档编译并挂载。业务模块通过运行时 ESM 加载，可通过 import map 逐个覆盖；预览使用所选 Vue 运行时挂载。 |
 | `options` | `PlaygroundOptions` | `{}` | 传给 Vue REPL store 的实例级选项；`cdnURL` 会同时作用于预览样式和默认 import map。 |
 | `previewOptions` | `SandboxProps['previewOptions']` | `undefined` | 传给当前 iframe 的 preview 选项。 |
 | `locale` | `Language` | `en-US` | 界面语言；未传入时使用上层 Locale Provider。 |
@@ -154,16 +154,25 @@ const handleMessage = async () => {
 
 ## 运行环境
 
-- iframe 运行时通过公共 CDN 加载 Vue 和默认 import map 中的依赖；local 运行时加载 URL 覆盖或宿主未提供的模块时也需要网络访问。
+- iframe 运行时通过公共 CDN 加载 Vue 和默认 import map 中的依赖；local 运行时默认复用宿主 Vue 和 vue-router，业务包通过 ESM 加载，需要网络访问或配置可访问的本地 ESM 地址。
+- iframe 模式初始化时会补齐宿主页缺失的 `globalThis.process` 和 `process.env`，兼容 `@vue/repl` 的 JSX/TSX 编译；已有对象及环境值保持不变，不模拟其他 Node API。
 - 默认 CDN 为 `https://cdn.jsdelivr.net/npm`；未使用 launch 时可通过 `options.cdnURL` 调整默认节点。launch 已选点时统一使用 `$docs.runtime.cdn`，优先于实例 `cdnURL`。
 - jsDelivr npm、旧 `unpkg.com` 和 `esm.unpkg.com` 地址在实际加载时转换，再经过可选 `$docs.resolve.cdn({ url })`。jsDelivr 转换入口使用 `/+esm`，ESM UNPKG 使用包或文件入口。预览 CSS、import map、裸包回退和 Sass 共用该规则；原始映射与缓存不被改写。
-- 直接渲染时，宿主未提供且未配置的 npm 模块（含作用域包和子路径）自动通过上述 ESM 规则加载；组件包的传递依赖也适用，`import()` 在调用时加载。可用 `options.builtinImportMap.imports` 指定依赖的版本和 URL。
+- 直接渲染时，未配置的 npm 模块（含作用域包、版本和子路径）自动通过上述 ESM 规则加载，无需预先登记包名。组件包的传递依赖也适用，预览文件和远程模块中的 `import()` 在调用时加载。可用 `options.builtinImportMap.imports` 指定依赖的版本和 URL；显式 URL 加载失败会直接报错。
 - Vue SFC 的 `<style lang="scss">` / `lang="sass"` 以及独立 `.scss` / `.sass` 文件会在浏览器里编译；`_partial.scss` 只作为 `@use` 依赖。
-- local 模式按模块识别显式 URL 覆盖，即使地址与内置默认相同也会加载该 URL。覆盖 `vue` 时，预览的编译产物、挂载、组件引用和注入使用这份 Vue；内置组件、hooks、locale、Pinia 和 vue-router 随之重新加载以匹配 Vue，未覆盖的普通工具模块继续复用宿主。不同预览的覆盖互不影响，显式覆盖的模块在各自预览内执行。
+- local 模式按模块识别显式 URL 覆盖，即使地址与内置默认相同也会加载该 URL。组件包和工具包统一经运行时加载器读取 ESM，不复用宿主的业务包副本。远程模块的 Vue 导入统一绑定到所选运行时；覆盖 `vue` 时，编译产物、挂载、组件引用、注入和 vue-router 使用对应的远程运行时。不同预览的覆盖互不影响，各预览独立执行远程模块。
 - local 模式在当前页面按 URL 缓存外部模块的下载和转换成果，并合并并发请求；切换文档时可复用，最多保留最近使用的 128 个模块。各预览仍独立执行模块并解析依赖覆盖；失败的加载不缓存，同源模块实时读取，刷新页面会清空缓存。
 - 每个 Playground 实例都使用自己的 preview 配置和 iframe 消息来源校验。
 - `local` 默认开启：同一份 `files` 在当前文档里编译。直接渲染不撑开预览高度，`expandable` 固定为关闭，`docs:playground.run` 不会申请临时高度；`<DocsLink>` 仍通过 `docs:navigate` 通知。`local: false` 改回 iframe Sandbox。
 
+## 运行时模块加载
+
+加载器按模块说明符解析依赖，不识别组件名，不维护可选依赖白名单。静态导入在挂载前准备，动态导入在实际调用时准备；组件库内部的可选依赖沿用组件自身的加载时机。因此普通示例不会因加载组件包而预先下载所有动态依赖，也无需给组件额外增加异步包装。
+
+显式模块地址优先于默认 CDN。CDN 返回的带版本依赖地址会保留版本；同名显式覆盖可以替换该依赖。失败后可再次调用动态导入或刷新预览重试，错误包含请求地址与原因；模块自身的执行异常继续报错。
+
+依赖须能作为浏览器 ESM 执行。若 CDN 转换产物无法正常运行，可通过现有模块配置指定包的原始 ESM 文件，无需增加包名适配。加载器不猜测 npm 包对应的全局变量名，也不向 `window` 写入依赖；若库自身优先读取已有全局实现，该行为由库保留。已在宿主页其他位置执行的原生 `import()` 不受接管，iframe Sandbox 继续使用自己的 import map 机制。
+
 ## 仓库内 examples
 
 在 monorepo 根目录执行 `npm run dev` 可预览 [`packages/playground/examples`](examples/) 下的单文件与多文件 Playground 示例。

package/dist/{compile-BHlM2G35.js → compile-D33div4Y.js}

@@ -1,4 +1,4 @@
-import { a as transformScript, c as createFileIndex, h as resolveEntry, m as normalizeVirtualPath, s as collectReachableFilenames, t as collectCss, u as getExtension, v as compileScssSource, y as extractScssExports } from "./css-C25yWQa_.js";
+import { a as transformScript, c as createFileIndex, h as resolveEntry, m as normalizeVirtualPath, s as collectReachableFilenames, t as collectCss, u as getExtension, v as compileScssSource, y as extractScssExports } from "./css-sV_dM9Hl.js";
 import { compileString } from "sass";
 //#region packages/playground/src/core/runtime/local/compile/scss.ts
 /**

package/dist/{css-C25yWQa_.js → css-sV_dM9Hl.js}

@@ -8,6 +8,7 @@ var DEFAULT_CDN_URL = "https://cdn.jsdelivr.net/npm";
 var NEW_SFC_CODE = `<script setup lang="ts"><\/script>\n\n<template>\n  <div>\n    <slot />\n  <\/div>\n<\/template>\n`;
 //#endregion
 //#region packages/playground/src/cdn.ts
+var DOCS_ESM_ENTRY = /^@deot\/docs-(?:client|locale|markdown|playground|renderer|theme)$/u;
 var PREVIEW_STYLE_ASSETS = [
 	"@deot/style/dist/index.normalize-only.css",
 	"@deot/vc-components/dist/index.style.css",
@@ -70,7 +71,7 @@ var npmCdnUrl = (value) => {
 };
 var cdnModuleName = (url) => {
 	const parsed = npmCdnUrl(url);
-	return parsed && (!parsed.path || parsed.path === "/+esm" || /^\/(?:es\d+|esnext)\/[^/]+\.m?js$/u.test(parsed.path)) ? parsed.name : null;
+	return parsed && (!parsed.path || parsed.path === "/+esm" || DOCS_ESM_ENTRY.test(parsed.name) && parsed.path === "/dist/index.js" || /^\/(?:es\d+|esnext)\/[^/]+\.m?js$/u.test(parsed.path)) ? parsed.name : null;
 };
 var isCdnEsmURL = (url) => /\/\+esm(?:[?#]|$)/u.test(url) || npmCdnUrl(url)?.url.hostname === "esm.unpkg.com";
 var resolveCdnURL = (url, cdnURL, config = docsCdnConfig()) => {
@@ -81,8 +82,10 @@ var resolveCdnURL = (url, cdnURL, config = docsCdnConfig()) => {
 		const origin = normalizeCdnURL(target);
 		const unpkg = new URL(origin).hostname === "esm.unpkg.com";
 		let asset = parsed.asset;
-		if (unpkg) asset = asset.replace(/\/\+esm$/u, "");
-		else if (!parsed.path.endsWith("/+esm") && (!parsed.path || !/\.[^/]+$/u.test(parsed.path) || /unpkg\.com$/u.test(parsed.url.hostname) && /\.[cm]?[jt]sx?$/u.test(parsed.path))) asset = `${asset.replace(/\/+$/u, "")}/+esm`;
+		if (unpkg) {
+			asset = asset.replace(/\/\+esm$/u, "");
+			if (DOCS_ESM_ENTRY.test(parsed.name) && (!parsed.path || parsed.path === "/+esm")) asset += "/dist/index.js";
+		} else if (!parsed.path.endsWith("/+esm") && (!parsed.path || !/\.[^/]+$/u.test(parsed.path) || /unpkg\.com$/u.test(parsed.url.hostname) && /\.[cm]?[jt]sx?$/u.test(parsed.path))) asset = `${asset.replace(/\/+$/u, "")}/+esm`;
 		converted = `${origin}/${asset}${parsed.url.search}${parsed.url.hash}`;
 	}
 	return config.resolve?.cdn?.({ url: converted }) || converted;
@@ -454,12 +457,14 @@ var isInsideRoot = (filename, root) => {
 /**
 * 静态 import / export-from / import() 的模块说明符。
 * @param code 源码文本。
+* @param includeDynamic 是否收集动态导入；local 运行时在调用时单独加载。
 * @returns 按出现顺序收集到的说明符。
 */
-var listImportSpecifiers = (code) => {
+var listImportSpecifiers = (code, includeDynamic = true) => {
 	const result = [];
 	const source = String(code || "");
-	for (const match of source.matchAll(/(?:\bfrom\s+|import\s*\(\s*|import\s+)['"]([^'"]+)['"]/gu)) if (match[1]) result.push(match[1]);
+	const re = includeDynamic ? /(?:\bfrom\s+|import\s*\(\s*|import\s+)['"]([^'"]+)['"]/gu : /(?:\bfrom\s+|import\s+)['"]([^'"]+)['"]/gu;
+	for (const match of source.matchAll(re)) if (match[1]) result.push(match[1]);
 	return result;
 };
 var isRelativeSpecifier = (id) => id === "." || id === ".." || id.startsWith("./") || id.startsWith("../") || id.startsWith("/");
@@ -486,12 +491,12 @@ var collectReachableFilenames = (files, entry) => {
 	visit(entry);
 	return ordered;
 };
-var collectBareSpecifiers = (files, filenames) => {
+var collectBareSpecifiers = (files, filenames, includeDynamic = true) => {
 	const index = createFileIndex(files);
 	const result = [];
 	const seen = /* @__PURE__ */ new Set();
 	filenames.forEach((filename) => {
-		listImportSpecifiers(index.get(normalizeVirtualPath(filename)) || "").forEach((specifier) => {
+		listImportSpecifiers(index.get(normalizeVirtualPath(filename)) || "", includeDynamic).forEach((specifier) => {
 			if (!specifier || isRelativeSpecifier(specifier) || seen.has(specifier) || /\.(?:css|scss|sass)(?:[?#]|$)/.test(specifier)) return;
 			seen.add(specifier);
 			result.push(specifier);
@@ -501,7 +506,15 @@ var collectBareSpecifiers = (files, filenames) => {
 };
 //#endregion
 //#region packages/playground/src/core/runtime/local/compile/script.ts
-var { babelParse, walkIdentifiers, MagicString } = VueCompiler;
+var { babelParse, walk, walkIdentifiers, MagicString } = VueCompiler;
+var rewriteDynamicImports = (code) => {
+	if (!code.includes("import")) return code;
+	const source = new MagicString(code);
+	walk(babelParse(code, { sourceType: "module" }), { enter(node) {
+		if (node.type === "ImportExpression" || node.type === "CallExpression" && node.callee?.type === "Import") source.overwrite(node.start, node.start + 6, "__docs_import");
+	} });
+	return source.toString();
+};
 var rewriteJsxAttributes = (code) => {
 	const replacements = [];
 	for (const match of code.matchAll(/\b([\w-]+:[\w-]+)\s*=\s*\{/g)) {
@@ -580,15 +593,17 @@ var transformScript = (code, filename, options = {}) => {
 	try {
 		const script = wantTs ? removeImportedTypeExports(code) : code;
 		const source = options.jsx ? `import { h as __docs_h, Fragment as __docs_Fragment } from 'vue';\n${rewriteJsxAttributes(script)}` : script;
-		return `${rewriteImportMeta(transform(source, {
+		const result = transform(source, {
 			transforms,
+			preserveDynamicImport: true,
 			disableESTransforms: true,
 			production: true,
 			jsxRuntime: "classic",
 			jsxPragma: "__docs_h",
 			jsxFragmentPragma: "__docs_Fragment",
 			filePath: filename
-		}).code, filename)}\n//# sourceURL=playground://${filename}`;
+		});
+		return `${rewriteImportMeta(options.esm ? result.code : rewriteDynamicImports(result.code), filename)}\n//# sourceURL=playground://${filename}`;
 	} catch (error) {
 		const message = error instanceof Error ? error.message : String(error);
 		throw new Error(`[Playground] 脚本转换失败 ${filename}: ${message}`, { cause: error });

package/dist/index.js

@@ -1,7 +1,6 @@
-import { A as DEFAULT_ENTRY, C as createBuiltinStyles, D as resolveCdnURL, E as normalizeCdnURL, O as resolveNpmImport, S as createBuiltinImports, T as isCdnEsmURL, _ as bindPlaygroundScss, a as transformScript, b as whenSassReady, c as createFileIndex, d as isIgnoredFilename, f as isInsideRoot, g as resolveModulePath, i as rewriteImportMeta, j as NEW_SFC_CODE, k as DEFAULT_CDN_URL, l as getCommonRoot, m as normalizeVirtualPath, n as injectStyle, o as collectBareSpecifiers, p as isRelativeSpecifier, r as removeStyle, s as collectReachableFilenames, w as createCdnResolver, x as cdnModuleName } from "./css-C25yWQa_.js";
+import { A as DEFAULT_ENTRY, C as createBuiltinStyles, D as resolveCdnURL, E as normalizeCdnURL, O as resolveNpmImport, S as createBuiltinImports, T as isCdnEsmURL, _ as bindPlaygroundScss, a as transformScript, b as whenSassReady, c as createFileIndex, d as isIgnoredFilename, f as isInsideRoot, g as resolveModulePath, i as rewriteImportMeta, j as NEW_SFC_CODE, k as DEFAULT_CDN_URL, l as getCommonRoot, m as normalizeVirtualPath, n as injectStyle, o as collectBareSpecifiers, p as isRelativeSpecifier, r as removeStyle, s as collectReachableFilenames, w as createCdnResolver, x as cdnModuleName } from "./css-sV_dM9Hl.js";
 import * as Vue from "vue";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import * as Vc from "@deot/vc";
 import { Clipboard, Dropdown, DropdownItem, DropdownMenu, Message, Popconfirm, Portal, Scroller, TransitionFade } from "@deot/vc";
 import { provideLocale, useLocale } from "@deot/docs-locale";
 import hljs from "highlight.js";
@@ -15,9 +14,6 @@ import { init, parse } from "es-module-lexer";
 import { transform } from "sucrase";
 import * as VueCompiler from "@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
 import * as VueRouter from "vue-router";
-import * as Pinia from "pinia";
-import * as VcComponents from "@deot/vc-components";
-import * as VcHooks from "@deot/vc-hooks";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -2270,6 +2266,9 @@ var createRuntimeImports = (cdnURL, builtinImportMap) => ({
 	...createRuntimeImportOverrides(builtinImportMap)
 });
 var createRuntimeStore = (files, entry, options) => {
+	const host = globalThis;
+	const replProcess = host.process ??= {};
+	replProcess.env ??= {};
 	const { cdnURL, builtinImportMap, ...storeOptions } = options;
 	const replFiles = ref(Object.fromEntries(Object.entries(files).map(([filename, code]) => {
 		const file = createReplFile(filename, code);
@@ -2698,56 +2697,6 @@ var formatPlaygroundRuntimeError = (error) => {
 	return text;
 };
 //#endregion
-//#region packages/playground/src/core/runtime/local/builtins.ts
-var loaders = {
-	"vue": () => import("vue"),
-	"vue-router": () => import("vue-router"),
-	"pinia": async () => Pinia,
-	"@deot/helper": () => import("@deot/helper"),
-	"@deot/helper-cache": () => import("@deot/helper-cache"),
-	"@deot/helper-device": () => import("@deot/helper-device"),
-	"@deot/helper-dom": () => import("@deot/helper-dom"),
-	"@deot/helper-emitter": () => import("@deot/helper-emitter"),
-	"@deot/helper-fp": () => import("@deot/helper-fp"),
-	"@deot/helper-is": () => import("@deot/helper-is"),
-	"@deot/helper-load": () => import("@deot/helper-load"),
-	"@deot/helper-resize": () => import("@deot/helper-resize"),
-	"@deot/helper-route": () => import("@deot/helper-route"),
-	"@deot/helper-scheduler": () => import("@deot/helper-scheduler"),
-	"@deot/helper-shared": () => import("@deot/helper-shared"),
-	"@deot/helper-unicode": () => import("@deot/helper-unicode"),
-	"@deot/helper-utils": () => import("@deot/helper-utils"),
-	"@deot/helper-validator": () => import("@deot/helper-validator"),
-	"@deot/helper-wheel": () => import("@deot/helper-wheel"),
-	"@deot/http-client": () => import("@deot/http-client"),
-	"@deot/http-core": () => import("@deot/http-core"),
-	"@deot/http-hooks": () => import("@deot/http-hooks"),
-	"@deot/http": () => import("@deot/http"),
-	"@deot/vc": async () => Vc,
-	"@deot/vc-components": async () => VcComponents,
-	"@deot/vc-hooks": async () => VcHooks,
-	"@deot/vc-locale": () => import("@deot/vc-locale"),
-	"lodash-es": () => import("lodash-es"),
-	"echarts": () => import("echarts"),
-	"photoswipe": () => import("photoswipe"),
-	"jszip": () => import("jszip"),
-	"jspdf": () => import("jspdf"),
-	"dayjs": async () => (await import("dayjs")).default
-};
-var cache = /* @__PURE__ */ new Map();
-/** 直接渲染可从宿主包注入的说明符；与 Vue 无关的大型依赖按需加载。 */
-var localBuiltinIds = new Set(Object.keys(loaders));
-var ensureLocalBuiltin = (id) => {
-	const loader = loaders[id];
-	if (!loader) return Promise.reject(/* @__PURE__ */ new Error(`[Playground] 没有本地模块 "${id}"`));
-	let pending = cache.get(id);
-	if (!pending) {
-		pending = loader();
-		cache.set(id, pending);
-	}
-	return pending;
-};
-//#endregion
 //#region packages/playground/src/core/runtime/local/modules.ts
 var SKIP_COPY_KEYS = /* @__PURE__ */ new Set([
 	"prototype",
@@ -2817,15 +2766,10 @@ var resolveHostModule = (id, modules) => {
 	}
 	return null;
 };
-var HOST_VUE_SPECIFIERS = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
-var VUE_DEPENDENT_BUILTINS = /* @__PURE__ */ new Set([
+var HOST_MODULES = /* @__PURE__ */ new Set([
+	"vue",
 	"vue/server-renderer",
-	"vue-router",
-	"pinia",
-	"@deot/vc",
-	"@deot/vc-components",
-	"@deot/vc-hooks",
-	"@deot/vc-locale"
+	"vue-router"
 ]);
 var messageOf = (error) => error instanceof Error ? error.message : String(error);
 /**
@@ -2845,13 +2789,13 @@ var resolveImportTarget = (id, imports) => {
 		cursor = parent;
 	}
 };
-var prefersLocalBuiltin = (id, imports, overrides = new Set(Object.keys(imports))) => {
-	if (!localBuiltinIds.has(id) && !HOST_VUE_SPECIFIERS.has(id)) return false;
+var usesHostRuntime = (id, imports, overrides = new Set(Object.keys(imports))) => {
+	if (!HOST_MODULES.has(id)) return false;
 	if (overrides.has(id)) return false;
-	return !VUE_DEPENDENT_BUILTINS.has(id) || !overrides.has("vue");
+	return id === "vue" || !overrides.has("vue");
 };
 /**
-* 内置依赖默认注入宿主副本，显式 URL 按模块覆盖，包括与默认 CDN 相同的地址。
+* Vue 运行时默认注入宿主副本，其他模块按显式 URL 或默认 CDN 加载。
 * @param specifiers 本次预览用到的裸模块说明符。
 * @param imports 合并后的 import map。
 * @param builtins 宿主 Vue 与 vue-router。
@@ -2868,43 +2812,18 @@ var loadLocalModules = async (specifiers, imports, builtins, loader, overrides =
 	};
 	const errors = [];
 	const targets = /* @__PURE__ */ new Set();
-	const localIds = /* @__PURE__ */ new Set();
-	specifiers.forEach((specifier) => {
-		let local = false;
-		if (prefersLocalBuiltin(specifier, imports, overrides)) localIds.add(specifier);
-		else {
-			let cursor = specifier;
-			while (true) {
-				const slash = cursor.lastIndexOf("/");
-				if (slash <= 0) break;
-				const parent = cursor.slice(0, slash);
-				if (prefersLocalBuiltin(parent, imports, overrides)) {
-					localIds.add(parent);
-					local = true;
-					break;
-				}
-				cursor = parent;
-			}
-		}
-		const target = resolveImportTarget(specifier, imports);
-		if (target && prefersLocalBuiltin(target, imports, overrides)) localIds.add(target);
-		else if (target) targets.add(target);
-		else if (!local && !localIds.has(specifier)) {
-			imports[specifier] = resolveNpmImport(specifier);
-			targets.add(specifier);
-		}
-	});
-	await Promise.all([...localIds].map(async (id) => {
-		if (id === "vue" || id === "vue-router") return;
-		if (id === "vue/server-renderer") {
-			modules[id] = builtins.vue;
-			return;
+	for (const specifier of specifiers) {
+		if (usesHostRuntime(specifier, imports, overrides)) {
+			if (specifier === "vue/server-renderer") modules[specifier] = builtins.vue;
+			continue;
 		}
-		modules[id] = await ensureLocalBuiltin(id);
-	}));
+		const target = resolveImportTarget(specifier, imports) || specifier;
+		imports[target] ||= resolveNpmImport(target);
+		targets.add(target);
+	}
 	for (const id of targets) {
 		const url = imports[id];
-		if (!url || prefersLocalBuiltin(id, imports, overrides)) continue;
+		if (!url || usesHostRuntime(id, imports, overrides)) continue;
 		try {
 			modules[id] = await loader(url);
 		} catch (error) {
@@ -3040,7 +2959,11 @@ var linkPlayground = (compiled, files, options = {}) => {
 		cache.set(key, module.exports);
 		visiting.add(key);
 		try {
-			new Function("require", "module", "exports", mod.js)(requireFn(key), module, module.exports);
+			new Function("require", "module", "exports", "__docs_import", mod.js)(requireFn(key), module, module.exports, async (id) => {
+				if (isRelativeSpecifier(id) || resolveHostModule(id, modules)) return requireFn(key)(id);
+				if (options.loadModule) return toHostModule(await options.loadModule(id));
+				return requireFn(key)(id);
+			});
 			cache.set(key, module.exports);
 			return module.exports;
 		} catch (error) {
@@ -3080,7 +3003,6 @@ var linkPlayground = (compiled, files, options = {}) => {
 };
 //#endregion
 //#region packages/playground/src/core/runtime/local/remote.ts
-var HOST_VUE = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
 var moduleUrl = (url) => new URL(url, globalThis.location?.href).href;
 var REMOTE_SOURCE_CACHE_LIMIT = 128;
 var sourceCache = /* @__PURE__ */ new Map();
@@ -3125,54 +3047,25 @@ var readRemoteSource = (url) => {
 * @param imports 合并后的 import map。
 * @param builtins 宿主 Vue 与 vue-router。
 * @param overrides 显式配置的模块名，与自动补齐的默认地址区分。
-* @param importModule 浏览器原生 ESM 加载器。
 * @param cdnURL 没有 launch 选点结果时使用的实例 CDN。
 * @returns 按 URL 加载并执行远程模块的加载器。
 */
-var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imports)), importModule = (url) => import(
-	/* @vite-ignore */
-	url
-), cdnURL) => {
+var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imports)), cdnURL) => {
 	const resolve = createCdnResolver(cdnURL);
 	const resolveUrl = (url) => resolve(moduleUrl(url));
 	const hostModules = {
 		"vue": builtins.vue,
+		"vue/server-renderer": builtins.vue,
 		"vue-router": builtins.vueRouter
 	};
-	const pendingBuiltins = /* @__PURE__ */ new Set();
 	const sources = /* @__PURE__ */ new Map();
 	const pendingSources = /* @__PURE__ */ new Map();
 	const evaluated = /* @__PURE__ */ new Map();
-	const nativeModules = /* @__PURE__ */ new Map();
-	const loadNative = (url) => {
-		let pending = nativeModules.get(url);
-		if (!pending) {
-			pending = importModule(url).then((module) => {
-				const exports = toHostModule(module);
-				evaluated.set(url, exports);
-				return exports;
-			});
-			nativeModules.set(url, pending);
-		}
-		return pending;
-	};
-	const localBuiltinId = (id) => {
-		if (imports[id] && !prefersLocalBuiltin(id, imports, overrides)) return null;
-		if (prefersLocalBuiltin(id, imports, overrides)) return id;
-		let cursor = id;
-		while (true) {
-			const slash = cursor.lastIndexOf("/");
-			if (slash <= 0) return null;
-			const parent = cursor.slice(0, slash);
-			if (prefersLocalBuiltin(parent, imports, overrides)) return parent;
-			cursor = parent;
-		}
-	};
 	const dependencySpecifier = (from, specifier) => {
 		if (isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier)) {
 			const url = new URL(specifier, from);
 			const name = cdnModuleName(url.href);
-			if (name && (imports[name] || localBuiltinIds.has(name))) return name;
+			if (name && (overrides.has(name) || usesHostRuntime(name, imports, overrides))) return name;
 			return url.href;
 		}
 		return specifier;
@@ -3180,35 +3073,21 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	const dependencyUrl = (from, id) => {
 		const specifier = dependencySpecifier(from, id);
 		if (/^https?:\/\//.test(specifier)) return resolveUrl(specifier);
-		if (imports[specifier] && !prefersLocalBuiltin(specifier, imports, overrides)) return resolveUrl(imports[specifier]);
-		if (HOST_VUE.has(specifier) && prefersLocalBuiltin(specifier, imports, overrides)) return null;
-		let cursor = specifier;
-		while (cursor) {
-			if (localBuiltinIds.has(cursor) && prefersLocalBuiltin(cursor, imports, overrides)) {
-				pendingBuiltins.add(cursor);
-				return null;
-			}
-			const slash = cursor.lastIndexOf("/");
-			if (slash <= 0) break;
-			cursor = cursor.slice(0, slash);
-		}
+		if (imports[specifier] && !usesHostRuntime(specifier, imports, overrides)) return resolveUrl(imports[specifier]);
+		if (usesHostRuntime(specifier, imports, overrides)) return null;
 		const target = imports[specifier] ? specifier : resolveImportTarget(specifier, imports);
-		if (!target) {
-			imports[specifier] = resolveNpmImport(specifier);
-			return resolveUrl(imports[specifier]);
-		}
+		if (!target) return resolveUrl(resolveNpmImport(specifier));
 		return resolveUrl(imports[target]);
 	};
 	const crawl = async (url, visited = /* @__PURE__ */ new Set()) => {
-		if (!overrides.size && isCdnEsmURL(url)) {
-			await loadNative(url);
-			return;
-		}
 		if (visited.has(url)) return;
 		visited.add(url);
 		let pending = pendingSources.get(url);
 		if (!pending) {
-			pending = readRemoteSource(url);
+			pending = readRemoteSource(url).catch((error) => {
+				pendingSources.delete(url);
+				throw error;
+			});
 			pendingSources.set(url, pending);
 		}
 		const source = await pending;
@@ -3220,12 +3099,10 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	};
 	const requireFrom = (from) => (specifier) => {
 		const id = dependencySpecifier(from, specifier);
-		if (HOST_VUE.has(id) && prefersLocalBuiltin(id, imports, overrides)) return toHostModule(builtins.vue);
-		const builtinId = localBuiltinId(id);
-		if (builtinId) return toHostModule(hostModules[builtinId]);
+		if (usesHostRuntime(id, imports, overrides)) return toHostModule(hostModules[id]);
 		if (isRelativeSpecifier(id) || /^https?:\/\//.test(id)) return evaluate(dependencyUrl(from, id));
 		const target = imports[id] ? id : resolveImportTarget(id, imports);
-		if (!target || !imports[target]) throw new Error(`[Playground] 未注册的模块 "${id}"`);
+		if (!target) return evaluate(dependencyUrl(from, id));
 		const loaded = evaluate(resolveUrl(imports[target]));
 		if (target === id) return loaded;
 		if (!resolveHostModule(id, { [target]: loaded }))
@@ -3237,18 +3114,19 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		if (evaluated.has(url)) return evaluated.get(url);
 		const source = sources.get(url);
 		if (!source) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
-		const module = { exports: {} };
+		const module = { exports: Object.defineProperty({}, "__esModule", {
+			value: true,
+			writable: true
+		}) };
 		evaluated.set(url, module.exports);
 		const runner = source.run;
-		runner(requireFrom(url), module, module.exports, async (id) => {
-			const next = dependencyUrl(url, id);
-			if (next) await load(next);
-			else {
-				const builtinId = localBuiltinId(dependencySpecifier(url, id));
-				if (builtinId && !(builtinId in hostModules)) hostModules[builtinId] = await ensureLocalBuiltin(builtinId);
-			}
-			return requireFrom(url)(id);
-		});
+		try {
+			runner(requireFrom(url), module, module.exports, (id) => loadModule(id, url));
+		} catch (error) {
+			evaluated.delete(url);
+			throw error;
+		}
+		module.exports.__esModule = true;
 		evaluated.set(url, module.exports);
 		return module.exports;
 	};
@@ -3259,16 +3137,23 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		if (pending) return pending;
 		const task = (async () => {
 			await crawl(url);
-			await Promise.all([...pendingBuiltins].map(async (id) => {
-				if (id === "vue" || id === "vue-router") return;
-				hostModules[id] = await ensureLocalBuiltin(id);
-			}));
 			return evaluate(url);
-		})();
+		})().catch((error) => {
+			loading.delete(url);
+			throw new Error(`[Playground] 无法加载模块 (${url}): ${error instanceof Error ? error.message : String(error)}`, { cause: error });
+		});
 		loading.set(url, task);
 		return task;
 	};
-	return { load };
+	const loadModule = async (id, from = globalThis.location?.href) => {
+		const url = dependencyUrl(from, id);
+		if (url) await load(url);
+		return requireFrom(from)(id);
+	};
+	return {
+		load,
+		loadModule
+	};
 };
 //#endregion
 //#region packages/playground/src/core/runtime/local/local-sandbox.vue?vue&type=script&setup=true&lang.ts
@@ -3414,7 +3299,7 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			publishError();
 			destroyPreview();
 			try {
-				const { compilePlayground } = await import("./compile-BHlM2G35.js");
+				const { compilePlayground } = await import("./compile-D33div4Y.js");
 				/* istanbul ignore if -- 并发编译时只保留最后一次 */
 				if (current !== version) return;
 				const compiled = await compilePlayground(props.files, { entry: props.entry });
@@ -3427,13 +3312,13 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				}
 				const imports = createRuntimeImports(props.options.cdnURL, props.options.builtinImportMap);
 				const overrides = new Set(Object.keys(createRuntimeImportOverrides(props.options.builtinImportMap)));
-				const specifiers = collectBareSpecifiers(props.files, collectReachableFilenames(props.files, compiled.entry));
+				const specifiers = collectBareSpecifiers(props.files, collectReachableFilenames(props.files, compiled.entry), false);
 				specifiers.push("vue");
 				if (props.previewScroller === true) specifiers.push("@deot/vc");
 				const remote = createRemoteLoader(imports, {
 					vue: Vue,
 					vueRouter: VueRouter
-				}, overrides, void 0, props.options.cdnURL);
+				}, overrides, props.options.cdnURL);
 				const loaded = await loadLocalModules(specifiers, imports, {
 					vue: Vue,
 					vueRouter: VueRouter
@@ -3445,7 +3330,10 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					publishError();
 					return;
 				}
-				const linked = linkPlayground(compiled, props.files, { modules: loaded.modules });
+				const linked = linkPlayground(compiled, props.files, {
+					modules: loaded.modules,
+					loadModule: remote.loadModule
+				});
 				/* istanbul ignore if -- 并发编译时只保留最后一次 */
 				if (current !== version) return;
 				if (linked.errors.length || !linked.component) {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@deot/docs-playground",
-  "version": "1.1.8",
+  "version": "1.2.0",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -18,8 +19,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/docs-locale": "^1.1.5",
-    "@deot/docs-theme": "^1.1.5",
+    "@deot/docs-locale": "^1.2.0",
+    "@deot/docs-theme": "^1.2.0",
     "@deot/helper": "^1.1.21",
     "@deot/http": "^1.1.10",
     "@deot/vc": "^1.2.3",
@@ -30,15 +31,8 @@
     "@vue/compiler-sfc": "^3.5.43",
     "@vue/repl": "^4.7.2",
     "codemirror": "^6.0.2",
-    "dayjs": "^1.11.23",
-    "echarts": "^6.1.0",
     "es-module-lexer": "^3.0.3",
     "highlight.js": "^11.12.0",
-    "jspdf": "^4.2.1",
-    "jszip": "^3.10.2",
-    "lodash-es": "^4.18.1",
-    "photoswipe": "^5.4.4",
-    "pinia": "^4.0.3",
     "sass": "^1.105.1",
     "sucrase": "^3.35.1",
     "vue-router": "^5.4.0"