@deot/docs-playground 1.1.7 → 1.1.8

package/README.md

@@ -145,6 +145,7 @@ const handleMessage = async () => {
 | `slugifyPlaygroundTitle(title)` / `resolvePlaygroundTitleId(title, id?)` | 标题锚点 id，规则对齐 markdown-it-anchor。 |
 | `DEFAULT_CDN_URL` | 默认 CDN 根地址（jsDelivr）。 |
 | `createBuiltinImports(cdnURL?)` / `createBuiltinStyles(cdnURL?)` | 按 CDN 生成内置 import map 与预览样式表 URL。 |
+| `resolveCdnURL(url, cdnURL?, config?)` | 内置转换后调用可选 `resolve.cdn`；默认读取当前站点配置。 |
 | `normalizeCdnURL(value?)` | 规范化 CDN 根地址。 |
 
 同时导出 `PlaygroundFiles`、`PlaygroundView`、`PlaygroundViewport`、`PlaygroundOptions`、`PlaygroundPreviewOptions`、`EditorFilesChange` 和 `EditorFilesChangeAction` 类型。
@@ -154,9 +155,9 @@ const handleMessage = async () => {
 ## 运行环境
 
 - iframe 运行时通过公共 CDN 加载 Vue 和默认 import map 中的依赖；local 运行时加载 URL 覆盖或宿主未提供的模块时也需要网络访问。
-- 默认 CDN 为 `https://cdn.jsdelivr.net/npm`，可通过 `options.cdnURL` 换成 unpkg 等兼容 `/{package}/{file}` 路径的镜像；该地址用于预览样式和内置 import map。
-- `lodash-es` 和在线 Sass 编译器使用 jsDelivr 的 `/+esm` 入口；unpkg 等 CDN 不支持该路径。
-- 直接渲染时，宿主未提供且未配置的 npm 模块（含作用域包和子路径）自动从 jsDelivr 的 `/+esm` 入口加载；组件包的传递依赖也适用，`import()` 在调用时加载。可用 `options.builtinImportMap.imports` 指定依赖的版本和 URL。
+- 默认 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。
 - 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 缓存外部模块的下载和转换成果，并合并并发请求；切换文档时可复用，最多保留最近使用的 128 个模块。各预览仍独立执行模块并解析依赖覆盖；失败的加载不缓存，同源模块实时读取，刷新页面会清空缓存。

package/dist/{compile-CM_OyqYN.js → compile-BHlM2G35.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-DleINdoA.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-C25yWQa_.js";
 import { compileString } from "sass";
 //#region packages/playground/src/core/runtime/local/compile/scss.ts
 /**

package/dist/{compile-29EUKPOy.cjs → compile-QZ6cd8o0.cjs}

@@ -1,4 +1,4 @@
-const require_css = require("./css-DpqJBQ5c.cjs");
+const require_css = require("./css-O1VYXZtT.cjs");
 let sass = require("sass");
 //#region packages/playground/src/core/runtime/local/compile/scss.ts
 /**

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

@@ -53,6 +53,51 @@ var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
 });
 var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
 var resolveNpmImport = (specifier) => /^https?:\/\//.test(specifier) ? specifier : jsdelivrEsmURL(`${specifier}/+esm`);
+var docsCdnConfig = () => globalThis.window?.$docs || {};
+var npmCdnUrl = (value) => {
+	if (!/^https?:\/\//i.test(value)) return null;
+	const url = new URL(value);
+	const prefix = /(?:^|\.)jsdelivr\.net$/u.test(url.hostname) && url.pathname.startsWith("/npm/") ? "/npm/" : /^(?:esm\.)?unpkg\.com$/u.test(url.hostname) ? "/" : null;
+	if (!prefix) return null;
+	const asset = url.pathname.slice(prefix.length);
+	const match = asset.match(/^((?:@[^/]+\/)?[^/]+)(.*)$/u);
+	return match ? {
+		url,
+		asset,
+		name: match[1].replace(/@[^/@]+$/u, ""),
+		path: match[2]
+	} : null;
+};
+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;
+};
+var isCdnEsmURL = (url) => /\/\+esm(?:[?#]|$)/u.test(url) || npmCdnUrl(url)?.url.hostname === "esm.unpkg.com";
+var resolveCdnURL = (url, cdnURL, config = docsCdnConfig()) => {
+	const parsed = npmCdnUrl(url);
+	const target = config.runtime?.cdn || cdnURL;
+	let converted = url;
+	if (parsed && target) {
+		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`;
+		converted = `${origin}/${asset}${parsed.url.search}${parsed.url.hash}`;
+	}
+	return config.resolve?.cdn?.({ url: converted }) || converted;
+};
+var createCdnResolver = (cdnURL) => {
+	const resolved = /* @__PURE__ */ new Map();
+	return (url) => {
+		if (!resolved.has(url)) {
+			const target = resolveCdnURL(url, cdnURL);
+			resolved.set(url, target);
+			resolved.set(target, target);
+		}
+		return resolved.get(url);
+	};
+};
 //#endregion
 //#region packages/playground/src/core/scss.ts
 var SCHEME = "docs-playground";
@@ -84,7 +129,7 @@ var resolveSassModule = async (url) => {
 	return sass;
 };
 var loadSass = () => {
-	loadPromise ??= (() => resolveSassModule(SASS_CDN_URL))().then((sass) => {
+	loadPromise ??= (() => resolveSassModule(resolveCdnURL(SASS_CDN_URL)))().then((sass) => {
 		loadedSass = sass;
 		return sass;
 	});
@@ -577,4 +622,4 @@ var removeStyle = (id) => {
 	document.querySelector(`style[data-playground-id="${id}"]`)?.remove();
 };
 //#endregion
-export { normalizeCdnURL as C, NEW_SFC_CODE as D, DEFAULT_ENTRY as E, createBuiltinStyles as S, DEFAULT_CDN_URL as T, bindPlaygroundScss as _, transformScript as a, whenSassReady as b, createFileIndex as c, isIgnoredFilename as d, isInsideRoot as f, resolveModulePath as g, resolveEntry as h, rewriteImportMeta as i, getCommonRoot as l, normalizeVirtualPath as m, injectStyle as n, collectBareSpecifiers as o, isRelativeSpecifier as p, removeStyle as r, collectReachableFilenames as s, collectCss as t, getExtension as u, compileScssSource as v, resolveNpmImport as w, createBuiltinImports as x, extractScssExports as y };
+export { DEFAULT_ENTRY as A, createBuiltinStyles as C, resolveCdnURL as D, normalizeCdnURL as E, resolveNpmImport as O, createBuiltinImports as S, isCdnEsmURL as T, bindPlaygroundScss as _, transformScript as a, whenSassReady as b, createFileIndex as c, isIgnoredFilename as d, isInsideRoot as f, resolveModulePath as g, resolveEntry as h, rewriteImportMeta as i, NEW_SFC_CODE as j, DEFAULT_CDN_URL as k, getCommonRoot as l, normalizeVirtualPath as m, injectStyle as n, collectBareSpecifiers as o, isRelativeSpecifier as p, removeStyle as r, collectReachableFilenames as s, collectCss as t, getExtension as u, compileScssSource as v, createCdnResolver as w, cdnModuleName as x, extractScssExports as y };

package/dist/{css-DpqJBQ5c.cjs → css-O1VYXZtT.cjs}

@@ -85,6 +85,51 @@ var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
 });
 var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
 var resolveNpmImport = (specifier) => /^https?:\/\//.test(specifier) ? specifier : jsdelivrEsmURL(`${specifier}/+esm`);
+var docsCdnConfig = () => globalThis.window?.$docs || {};
+var npmCdnUrl = (value) => {
+	if (!/^https?:\/\//i.test(value)) return null;
+	const url = new URL(value);
+	const prefix = /(?:^|\.)jsdelivr\.net$/u.test(url.hostname) && url.pathname.startsWith("/npm/") ? "/npm/" : /^(?:esm\.)?unpkg\.com$/u.test(url.hostname) ? "/" : null;
+	if (!prefix) return null;
+	const asset = url.pathname.slice(prefix.length);
+	const match = asset.match(/^((?:@[^/]+\/)?[^/]+)(.*)$/u);
+	return match ? {
+		url,
+		asset,
+		name: match[1].replace(/@[^/@]+$/u, ""),
+		path: match[2]
+	} : null;
+};
+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;
+};
+var isCdnEsmURL = (url) => /\/\+esm(?:[?#]|$)/u.test(url) || npmCdnUrl(url)?.url.hostname === "esm.unpkg.com";
+var resolveCdnURL = (url, cdnURL, config = docsCdnConfig()) => {
+	const parsed = npmCdnUrl(url);
+	const target = config.runtime?.cdn || cdnURL;
+	let converted = url;
+	if (parsed && target) {
+		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`;
+		converted = `${origin}/${asset}${parsed.url.search}${parsed.url.hash}`;
+	}
+	return config.resolve?.cdn?.({ url: converted }) || converted;
+};
+var createCdnResolver = (cdnURL) => {
+	const resolved = /* @__PURE__ */ new Map();
+	return (url) => {
+		if (!resolved.has(url)) {
+			const target = resolveCdnURL(url, cdnURL);
+			resolved.set(url, target);
+			resolved.set(target, target);
+		}
+		return resolved.get(url);
+	};
+};
 //#endregion
 //#region packages/playground/src/core/scss.ts
 var SCHEME = "docs-playground";
@@ -117,7 +162,7 @@ var resolveSassModule = async (url) => {
 	return sass;
 };
 var loadSass = () => {
-	loadPromise ??= (testLoader ?? (() => resolveSassModule(SASS_CDN_URL)))().then((sass) => {
+	loadPromise ??= (testLoader ?? (() => resolveSassModule(resolveCdnURL(SASS_CDN_URL))))().then((sass) => {
 		loadedSass = sass;
 		return sass;
 	});
@@ -646,6 +691,12 @@ Object.defineProperty(exports, "bindPlaygroundScss", {
 		return bindPlaygroundScss;
 	}
 });
+Object.defineProperty(exports, "cdnModuleName", {
+	enumerable: true,
+	get: function() {
+		return cdnModuleName;
+	}
+});
 Object.defineProperty(exports, "collectBareSpecifiers", {
 	enumerable: true,
 	get: function() {
@@ -682,6 +733,12 @@ Object.defineProperty(exports, "createBuiltinStyles", {
 		return createBuiltinStyles;
 	}
 });
+Object.defineProperty(exports, "createCdnResolver", {
+	enumerable: true,
+	get: function() {
+		return createCdnResolver;
+	}
+});
 Object.defineProperty(exports, "createFileIndex", {
 	enumerable: true,
 	get: function() {
@@ -712,6 +769,12 @@ Object.defineProperty(exports, "injectStyle", {
 		return injectStyle;
 	}
 });
+Object.defineProperty(exports, "isCdnEsmURL", {
+	enumerable: true,
+	get: function() {
+		return isCdnEsmURL;
+	}
+});
 Object.defineProperty(exports, "isIgnoredFilename", {
 	enumerable: true,
 	get: function() {
@@ -748,6 +811,12 @@ Object.defineProperty(exports, "removeStyle", {
 		return removeStyle;
 	}
 });
+Object.defineProperty(exports, "resolveCdnURL", {
+	enumerable: true,
+	get: function() {
+		return resolveCdnURL;
+	}
+});
 Object.defineProperty(exports, "resolveEntry", {
 	enumerable: true,
 	get: function() {

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_css = require("./css-DpqJBQ5c.cjs");
+const require_css = require("./css-O1VYXZtT.cjs");
 let vue = require("vue");
 vue = require_css.__toESM(vue);
 let _deot_vc = require("@deot/vc");
@@ -2066,14 +2066,16 @@ var moduleSpecifier = (item) => item.type === "import-meta" || !item.specifier |
 * 发现自定义 ESM 的传递引用；缺失的 npm 包映射到 CDN，动态依赖只登记地址。
 * @param imports 当前预览的模块覆盖。
 * @param specifiers 源文件实际引用的模块。
+* @param resolve 本次预览共用的最终 URL 转换。
 * @returns 补齐后的 import map。
 */
-var resolveReplImports = async (imports, specifiers) => {
+var resolveReplImports = async (imports, specifiers, resolve = require_css.createCdnResolver()) => {
 	const resolved = { ...imports };
 	const visited = /* @__PURE__ */ new Set();
 	const visit = async (specifier, importer) => {
-		const url = require_css.isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier) ? new URL(specifier, importer || location.href).href : resolved[specifier] ||= require_css.resolveNpmImport(specifier);
-		if (visited.has(url) || /\/\+esm(?:[?#]|$)/.test(url)) return;
+		const source = require_css.isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier) ? new URL(specifier, importer || location.href).href : resolved[specifier] ||= require_css.resolveNpmImport(specifier);
+		const url = resolve(source);
+		if (visited.has(url) || require_css.isCdnEsmURL(source)) return;
 		visited.add(url);
 		const response = await fetch(url);
 		if (!response.ok) throw new Error(`${response.status} ${url}`);
@@ -2138,8 +2140,10 @@ var rewriteImportedExports = (code) => {
 /**
 * REPL 将 ./ 引用按 src 根目录解析，编译结果需要先转成文件表中的完整路径。
 * @param store iframe 预览的文件和编译结果。
+* @param getImportMap 未转换的原始 import map。
+* @param resolve 本次预览共用的最终 URL 转换。
 */
-var bindReplModules = (store) => {
+var bindReplModules = (store, getImportMap = store.getImportMap.bind(store), resolve = require_css.createCdnResolver()) => {
 	(0, vue.watch)(() => Object.values(store.files).map((file) => [
 		file.filename,
 		file.code,
@@ -2147,7 +2151,7 @@ var bindReplModules = (store) => {
 		file.compiled.ssr
 	]), () => {
 		const files = require_css.createFileIndex(Object.fromEntries(Object.entries(store.files).map(([name, file]) => [name, file.code])));
-		const importMap = store.getImportMap();
+		const importMap = getImportMap();
 		const imports = { ...importMap.imports };
 		let importsChanged = false;
 		for (const file of Object.values(store.files)) for (const output of ["js", "ssr"]) {
@@ -2167,7 +2171,11 @@ var bindReplModules = (store) => {
 						const target = `./${resolved.replace(/^\/?src\//, "")}`;
 						const text = item.type === "dynamic" ? JSON.stringify(target) : target;
 						code = code.slice(0, item.start) + text + code.slice(item.end);
-					} else if (!/^https?:\/\//.test(specifier) && !imports[specifier]) {
+					} else if (/^https?:\/\//.test(specifier)) {
+						const target = resolve(specifier);
+						const text = item.type === "dynamic" ? JSON.stringify(target) : target;
+						code = code.slice(0, item.start) + text + code.slice(item.end);
+					} else if (!imports[specifier]) {
 						imports[specifier] = require_css.resolveNpmImport(specifier);
 						importsChanged = true;
 					}
@@ -2204,13 +2212,14 @@ var escapeHtmlAttr = (value) => value.replace(/&/gu, "&").replace(/"/gu, "&q
 * `--vc-background-color-lightest` 不同，否则会出现色带割裂。
 */
 var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-lightest, var(--docs-background-color, #fff))";
-var createRuntimePreviewOptions = (cdnURL = require_css.DEFAULT_CDN_URL, options = {}) => {
+var createRuntimePreviewOptions = (cdnURL, options = {}) => {
 	const previewScroller = options.previewScroller === true;
+	const resolve = require_css.createCdnResolver(cdnURL);
 	const hrefs = Object.values({
 		...require_css.createBuiltinStyles(cdnURL),
 		...getPlaygroundSiteStyles(),
 		...getPlaygroundStyleOverrides()
-	});
+	}).map(resolve);
 	const styleBlocks = [
 		`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
 		"body{color:var(--vc-foreground-color,#080f20)}",
@@ -2254,7 +2263,7 @@ var createRuntimeImportOverrides = (builtinImportMap) => ({
 * @param cdnURL
 * @param builtinImportMap
 */
-var createRuntimeImports = (cdnURL = require_css.DEFAULT_CDN_URL, builtinImportMap) => ({
+var createRuntimeImports = (cdnURL, builtinImportMap) => ({
 	...require_css.createBuiltinImports(cdnURL),
 	...createRuntimeImportOverrides(builtinImportMap)
 });
@@ -2268,8 +2277,14 @@ var createRuntimeStore = (files, entry, options) => {
 	const mainFile = (0, vue.ref)(toReplFilename(entry));
 	const activeFilename = (0, vue.ref)(toReplFilename(entry));
 	const imports = createRuntimeImports(cdnURL, builtinImportMap);
+	const resolve = require_css.createCdnResolver(cdnURL);
+	const resourceLinks = (0, vue.unref)(storeOptions.resourceLinks);
 	const store = (0, _vue_repl.useStore)({
 		...storeOptions,
+		resourceLinks: (0, vue.ref)({
+			...resourceLinks,
+			esModuleShims: resolve(resourceLinks?.esModuleShims || "https://cdn.jsdelivr.net/npm/es-module-shims@1.5.18/dist/es-module-shims.wasm.js?raw")
+		}),
 		files: replFiles,
 		mainFile,
 		activeFilename,
@@ -2288,7 +2303,17 @@ var createRuntimeStore = (files, entry, options) => {
 		"import-map.json": store.files["import-map.json"].code,
 		...nextFiles
 	}, nextEntry);
-	bindReplModules(store);
+	const getImportMap = store.getImportMap.bind(store);
+	bindReplModules(store, getImportMap, resolve);
+	store.getImportMap = () => {
+		const map = getImportMap();
+		const convert = (items = {}) => Object.fromEntries(Object.entries(items).filter((item) => typeof item[1] === "string").map(([id, url]) => [id, resolve(url)]));
+		return {
+			...map,
+			imports: convert(map.imports),
+			scopes: map.scopes && Object.fromEntries(Object.entries(map.scopes).map(([scope, items]) => [resolve(scope), convert(items)]))
+		};
+	};
 	require_css.whenSassReady(files, () => {
 		const specifiers = require_css.collectBareSpecifiers(files, Object.keys(files));
 		if (!specifiers.length) {
@@ -2296,8 +2321,12 @@ var createRuntimeStore = (files, entry, options) => {
 			return;
 		}
 		store.loading = true;
-		resolveReplImports(imports, specifiers).then((resolved) => {
-			if (Object.keys(resolved).length !== Object.keys(imports).length) store.setImportMap({ imports: resolved }, true);
+		const currentImports = {
+			...imports,
+			...filterSafeHrefs(getImportMap().imports)
+		};
+		resolveReplImports(currentImports, specifiers, resolve).then((resolved) => {
+			if (Object.keys(resolved).length !== Object.keys(currentImports).length) store.setImportMap({ imports: resolved }, true);
 			store.init();
 		}).catch((error) => {
 			store.errors.push(error);
@@ -3098,12 +3127,15 @@ var readRemoteSource = (url) => {
 * @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) => {
+	const resolve = require_css.createCdnResolver(cdnURL);
+	const resolveUrl = (url) => resolve(moduleUrl(url));
 	const hostModules = {
 		"vue": builtins.vue,
 		"vue-router": builtins.vueRouter
@@ -3140,16 +3172,16 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	const dependencySpecifier = (from, specifier) => {
 		if (require_css.isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier)) {
 			const url = new URL(specifier, from);
-			const match = url.origin === "https://cdn.jsdelivr.net" ? url.pathname.match(/^\/npm\/((?:@[^/]+\/)?[^/@]+)(?:@[^/]+)?\/\+esm$/) : null;
-			if (match && (imports[match[1]] || localBuiltinIds.has(match[1]))) return match[1];
+			const name = require_css.cdnModuleName(url.href);
+			if (name && (imports[name] || localBuiltinIds.has(name))) return name;
 			return url.href;
 		}
 		return specifier;
 	};
 	const dependencyUrl = (from, id) => {
 		const specifier = dependencySpecifier(from, id);
-		if (/^https?:\/\//.test(specifier)) return specifier;
-		if (imports[specifier] && !prefersLocalBuiltin(specifier, imports, overrides)) return moduleUrl(imports[specifier]);
+		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) {
@@ -3164,12 +3196,12 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		const target = imports[specifier] ? specifier : resolveImportTarget(specifier, imports);
 		if (!target) {
 			imports[specifier] = require_css.resolveNpmImport(specifier);
-			return imports[specifier];
+			return resolveUrl(imports[specifier]);
 		}
-		return moduleUrl(imports[target]);
+		return resolveUrl(imports[target]);
 	};
 	const crawl = async (url, visited = /* @__PURE__ */ new Set()) => {
-		if (!overrides.size && /\/\+esm(?:[?#]|$)/.test(url)) {
+		if (!overrides.size && require_css.isCdnEsmURL(url)) {
 			await loadNative(url);
 			return;
 		}
@@ -3195,7 +3227,7 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		if (require_css.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}"`);
-		const loaded = evaluate(moduleUrl(imports[target]));
+		const loaded = evaluate(resolveUrl(imports[target]));
 		if (target === id) return loaded;
 		if (!resolveHostModule(id, { [target]: loaded }))
  /* istanbul ignore next -- 父包没有对应导出时才拒绝 */
@@ -3223,7 +3255,7 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	};
 	const loading = /* @__PURE__ */ new Map();
 	const load = (sourceUrl) => {
-		const url = moduleUrl(sourceUrl);
+		const url = resolveUrl(sourceUrl);
 		const pending = loading.get(url);
 		if (pending) return pending;
 		const task = (async () => {
@@ -3383,7 +3415,7 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 			publishError();
 			destroyPreview();
 			try {
-				const { compilePlayground } = await Promise.resolve().then(() => require("./compile-29EUKPOy.cjs"));
+				const { compilePlayground } = await Promise.resolve().then(() => require("./compile-QZ6cd8o0.cjs"));
 				/* istanbul ignore if -- 并发编译时只保留最后一次 */
 				if (current !== version) return;
 				const compiled = await compilePlayground(props.files, { entry: props.entry });
@@ -3402,7 +3434,7 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 				const remote = createRemoteLoader(imports, {
 					vue,
 					vueRouter: vue_router
-				}, overrides);
+				}, overrides, void 0, props.options.cdnURL);
 				const loaded = await loadLocalModules(specifiers, imports, {
 					vue,
 					vueRouter: vue_router
@@ -4277,6 +4309,7 @@ exports.normalizeCdnURL = require_css.normalizeCdnURL;
 exports.registerVueHighlight = registerVueHighlight;
 exports.removePlaygroundImportMapOverride = removePlaygroundImportMapOverride;
 exports.removePlaygroundStyleOverride = removePlaygroundStyleOverride;
+exports.resolveCdnURL = require_css.resolveCdnURL;
 exports.resolveHighlightLanguage = resolveHighlightLanguage;
 exports.resolvePlaygroundTitleId = resolvePlaygroundTitleId;
 exports.setPlaygroundImportMapOverrides = setPlaygroundImportMapOverrides;

package/dist/index.d.ts

@@ -81,6 +81,17 @@ export declare const applyPlaygroundStyleOverride: (alias: string, url: string)
     [x: string]: string;
 };
 
+declare interface CdnConfig {
+    runtime?: {
+        cdn?: string;
+    };
+    resolve?: {
+        cdn?: (context: {
+            url: string;
+        }) => string | null | undefined;
+    };
+}
+
 export declare const clearPlaygroundMaps: () => void;
 
 export declare const CodePreview: typeof __VLS_export;
@@ -250,6 +261,8 @@ export declare const removePlaygroundStyleOverride: (alias: string) => {
     [x: string]: string;
 };
 
+export declare const resolveCdnURL: (url: string, cdnURL?: string, config?: CdnConfig) => string;
+
 export declare const resolveHighlightLanguage: (filename: string) => "xml" | "javascript" | "typescript" | "css" | "scss" | "vue" | "json" | "plaintext";
 
 export declare const resolvePlaygroundTitleId: (title: string, explicitId?: string, isOccupied?: (id: string) => boolean) => string;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { C as normalizeCdnURL, D as NEW_SFC_CODE, E as DEFAULT_ENTRY, S as createBuiltinStyles, T as DEFAULT_CDN_URL, _ as bindPlaygroundScss, a as transformScript, b as whenSassReady, c as createFileIndex, d as isIgnoredFilename, f as isInsideRoot, g as resolveModulePath, i as rewriteImportMeta, l as getCommonRoot, m as normalizeVirtualPath, n as injectStyle, o as collectBareSpecifiers, p as isRelativeSpecifier, r as removeStyle, s as collectReachableFilenames, w as resolveNpmImport, x as createBuiltinImports } from "./css-DleINdoA.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-C25yWQa_.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";
@@ -2068,14 +2068,16 @@ var moduleSpecifier = (item) => item.type === "import-meta" || !item.specifier |
 * 发现自定义 ESM 的传递引用；缺失的 npm 包映射到 CDN，动态依赖只登记地址。
 * @param imports 当前预览的模块覆盖。
 * @param specifiers 源文件实际引用的模块。
+* @param resolve 本次预览共用的最终 URL 转换。
 * @returns 补齐后的 import map。
 */
-var resolveReplImports = async (imports, specifiers) => {
+var resolveReplImports = async (imports, specifiers, resolve = createCdnResolver()) => {
 	const resolved = { ...imports };
 	const visited = /* @__PURE__ */ new Set();
 	const visit = async (specifier, importer) => {
-		const url = isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier) ? new URL(specifier, importer || location.href).href : resolved[specifier] ||= resolveNpmImport(specifier);
-		if (visited.has(url) || /\/\+esm(?:[?#]|$)/.test(url)) return;
+		const source = isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier) ? new URL(specifier, importer || location.href).href : resolved[specifier] ||= resolveNpmImport(specifier);
+		const url = resolve(source);
+		if (visited.has(url) || isCdnEsmURL(source)) return;
 		visited.add(url);
 		const response = await fetch(url);
 		if (!response.ok) throw new Error(`${response.status} ${url}`);
@@ -2140,8 +2142,10 @@ var rewriteImportedExports = (code) => {
 /**
 * REPL 将 ./ 引用按 src 根目录解析，编译结果需要先转成文件表中的完整路径。
 * @param store iframe 预览的文件和编译结果。
+* @param getImportMap 未转换的原始 import map。
+* @param resolve 本次预览共用的最终 URL 转换。
 */
-var bindReplModules = (store) => {
+var bindReplModules = (store, getImportMap = store.getImportMap.bind(store), resolve = createCdnResolver()) => {
 	watch(() => Object.values(store.files).map((file) => [
 		file.filename,
 		file.code,
@@ -2149,7 +2153,7 @@ var bindReplModules = (store) => {
 		file.compiled.ssr
 	]), () => {
 		const files = createFileIndex(Object.fromEntries(Object.entries(store.files).map(([name, file]) => [name, file.code])));
-		const importMap = store.getImportMap();
+		const importMap = getImportMap();
 		const imports = { ...importMap.imports };
 		let importsChanged = false;
 		for (const file of Object.values(store.files)) for (const output of ["js", "ssr"]) {
@@ -2169,7 +2173,11 @@ var bindReplModules = (store) => {
 						const target = `./${resolved.replace(/^\/?src\//, "")}`;
 						const text = item.type === "dynamic" ? JSON.stringify(target) : target;
 						code = code.slice(0, item.start) + text + code.slice(item.end);
-					} else if (!/^https?:\/\//.test(specifier) && !imports[specifier]) {
+					} else if (/^https?:\/\//.test(specifier)) {
+						const target = resolve(specifier);
+						const text = item.type === "dynamic" ? JSON.stringify(target) : target;
+						code = code.slice(0, item.start) + text + code.slice(item.end);
+					} else if (!imports[specifier]) {
 						imports[specifier] = resolveNpmImport(specifier);
 						importsChanged = true;
 					}
@@ -2206,13 +2214,14 @@ var escapeHtmlAttr = (value) => value.replace(/&/gu, "&").replace(/"/gu, "&q
 * `--vc-background-color-lightest` 不同，否则会出现色带割裂。
 */
 var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-lightest, var(--docs-background-color, #fff))";
-var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
+var createRuntimePreviewOptions = (cdnURL, options = {}) => {
 	const previewScroller = options.previewScroller === true;
+	const resolve = createCdnResolver(cdnURL);
 	const hrefs = Object.values({
 		...createBuiltinStyles(cdnURL),
 		...getPlaygroundSiteStyles(),
 		...getPlaygroundStyleOverrides()
-	});
+	}).map(resolve);
 	const styleBlocks = [
 		`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
 		"body{color:var(--vc-foreground-color,#080f20)}",
@@ -2256,7 +2265,7 @@ var createRuntimeImportOverrides = (builtinImportMap) => ({
 * @param cdnURL
 * @param builtinImportMap
 */
-var createRuntimeImports = (cdnURL = DEFAULT_CDN_URL, builtinImportMap) => ({
+var createRuntimeImports = (cdnURL, builtinImportMap) => ({
 	...createBuiltinImports(cdnURL),
 	...createRuntimeImportOverrides(builtinImportMap)
 });
@@ -2270,8 +2279,14 @@ var createRuntimeStore = (files, entry, options) => {
 	const mainFile = ref(toReplFilename(entry));
 	const activeFilename = ref(toReplFilename(entry));
 	const imports = createRuntimeImports(cdnURL, builtinImportMap);
+	const resolve = createCdnResolver(cdnURL);
+	const resourceLinks = unref(storeOptions.resourceLinks);
 	const store = useStore({
 		...storeOptions,
+		resourceLinks: ref({
+			...resourceLinks,
+			esModuleShims: resolve(resourceLinks?.esModuleShims || "https://cdn.jsdelivr.net/npm/es-module-shims@1.5.18/dist/es-module-shims.wasm.js?raw")
+		}),
 		files: replFiles,
 		mainFile,
 		activeFilename,
@@ -2290,7 +2305,17 @@ var createRuntimeStore = (files, entry, options) => {
 		"import-map.json": store.files["import-map.json"].code,
 		...nextFiles
 	}, nextEntry);
-	bindReplModules(store);
+	const getImportMap = store.getImportMap.bind(store);
+	bindReplModules(store, getImportMap, resolve);
+	store.getImportMap = () => {
+		const map = getImportMap();
+		const convert = (items = {}) => Object.fromEntries(Object.entries(items).filter((item) => typeof item[1] === "string").map(([id, url]) => [id, resolve(url)]));
+		return {
+			...map,
+			imports: convert(map.imports),
+			scopes: map.scopes && Object.fromEntries(Object.entries(map.scopes).map(([scope, items]) => [resolve(scope), convert(items)]))
+		};
+	};
 	whenSassReady(files, () => {
 		const specifiers = collectBareSpecifiers(files, Object.keys(files));
 		if (!specifiers.length) {
@@ -2298,8 +2323,12 @@ var createRuntimeStore = (files, entry, options) => {
 			return;
 		}
 		store.loading = true;
-		resolveReplImports(imports, specifiers).then((resolved) => {
-			if (Object.keys(resolved).length !== Object.keys(imports).length) store.setImportMap({ imports: resolved }, true);
+		const currentImports = {
+			...imports,
+			...filterSafeHrefs(getImportMap().imports)
+		};
+		resolveReplImports(currentImports, specifiers, resolve).then((resolved) => {
+			if (Object.keys(resolved).length !== Object.keys(currentImports).length) store.setImportMap({ imports: resolved }, true);
 			store.init();
 		}).catch((error) => {
 			store.errors.push(error);
@@ -3097,12 +3126,15 @@ var readRemoteSource = (url) => {
 * @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) => {
+	const resolve = createCdnResolver(cdnURL);
+	const resolveUrl = (url) => resolve(moduleUrl(url));
 	const hostModules = {
 		"vue": builtins.vue,
 		"vue-router": builtins.vueRouter
@@ -3139,16 +3171,16 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	const dependencySpecifier = (from, specifier) => {
 		if (isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier)) {
 			const url = new URL(specifier, from);
-			const match = url.origin === "https://cdn.jsdelivr.net" ? url.pathname.match(/^\/npm\/((?:@[^/]+\/)?[^/@]+)(?:@[^/]+)?\/\+esm$/) : null;
-			if (match && (imports[match[1]] || localBuiltinIds.has(match[1]))) return match[1];
+			const name = cdnModuleName(url.href);
+			if (name && (imports[name] || localBuiltinIds.has(name))) return name;
 			return url.href;
 		}
 		return specifier;
 	};
 	const dependencyUrl = (from, id) => {
 		const specifier = dependencySpecifier(from, id);
-		if (/^https?:\/\//.test(specifier)) return specifier;
-		if (imports[specifier] && !prefersLocalBuiltin(specifier, imports, overrides)) return moduleUrl(imports[specifier]);
+		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) {
@@ -3163,12 +3195,12 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		const target = imports[specifier] ? specifier : resolveImportTarget(specifier, imports);
 		if (!target) {
 			imports[specifier] = resolveNpmImport(specifier);
-			return imports[specifier];
+			return resolveUrl(imports[specifier]);
 		}
-		return moduleUrl(imports[target]);
+		return resolveUrl(imports[target]);
 	};
 	const crawl = async (url, visited = /* @__PURE__ */ new Set()) => {
-		if (!overrides.size && /\/\+esm(?:[?#]|$)/.test(url)) {
+		if (!overrides.size && isCdnEsmURL(url)) {
 			await loadNative(url);
 			return;
 		}
@@ -3194,7 +3226,7 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		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}"`);
-		const loaded = evaluate(moduleUrl(imports[target]));
+		const loaded = evaluate(resolveUrl(imports[target]));
 		if (target === id) return loaded;
 		if (!resolveHostModule(id, { [target]: loaded }))
  /* istanbul ignore next -- 父包没有对应导出时才拒绝 */
@@ -3222,7 +3254,7 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	};
 	const loading = /* @__PURE__ */ new Map();
 	const load = (sourceUrl) => {
-		const url = moduleUrl(sourceUrl);
+		const url = resolveUrl(sourceUrl);
 		const pending = loading.get(url);
 		if (pending) return pending;
 		const task = (async () => {
@@ -3382,7 +3414,7 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			publishError();
 			destroyPreview();
 			try {
-				const { compilePlayground } = await import("./compile-CM_OyqYN.js");
+				const { compilePlayground } = await import("./compile-BHlM2G35.js");
 				/* istanbul ignore if -- 并发编译时只保留最后一次 */
 				if (current !== version) return;
 				const compiled = await compilePlayground(props.files, { entry: props.entry });
@@ -3401,7 +3433,7 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				const remote = createRemoteLoader(imports, {
 					vue: Vue,
 					vueRouter: VueRouter
-				}, overrides);
+				}, overrides, void 0, props.options.cdnURL);
 				const loaded = await loadLocalModules(specifiers, imports, {
 					vue: Vue,
 					vueRouter: VueRouter
@@ -4251,4 +4283,4 @@ var playground_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, PREVIEW_SCROLLER_USE_CODE, PREVIEW_SCROLL_CONTENT_CLASS, PREVIEW_SCROLL_HTML_CLASS, playground_default as Playground, PlaygroundService, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveHighlightLanguage, resolvePlaygroundTitleId, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, slugifyPlaygroundTitle, vueHighlight };
+export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, PREVIEW_SCROLLER_USE_CODE, PREVIEW_SCROLL_CONTENT_CLASS, PREVIEW_SCROLL_HTML_CLASS, playground_default as Playground, PlaygroundService, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveCdnURL, resolveHighlightLanguage, resolvePlaygroundTitleId, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, slugifyPlaygroundTitle, vueHighlight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/docs-playground",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -18,8 +18,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/docs-locale": "^1.1.4",
-    "@deot/docs-theme": "^1.1.4",
+    "@deot/docs-locale": "^1.1.5",
+    "@deot/docs-theme": "^1.1.5",
     "@deot/helper": "^1.1.21",
     "@deot/http": "^1.1.10",
     "@deot/vc": "^1.2.3",