@deot/docs-playground 1.1.6 → 1.1.7

package/README.md

@@ -159,6 +159,7 @@ const handleMessage = async () => {
 - 直接渲染时，宿主未提供且未配置的 npm 模块（含作用域包和子路径）自动从 jsDelivr 的 `/+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 个模块。各预览仍独立执行模块并解析依赖覆盖；失败的加载不缓存，同源模块实时读取，刷新页面会清空缓存。
 - 每个 Playground 实例都使用自己的 preview 配置和 iframe 消息来源校验。
 - `local` 默认开启：同一份 `files` 在当前文档里编译。直接渲染不撑开预览高度，`expandable` 固定为关闭，`docs:playground.run` 不会申请临时高度；`<DocsLink>` 仍通过 `docs:navigate` 通知。`local: false` 改回 iframe Sandbox。
 

package/dist/index.cjs

@@ -3054,6 +3054,43 @@ var linkPlayground = (compiled, files, options = {}) => {
 //#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();
+var prepareRemoteSource = async (url) => {
+	const response = await fetch(url);
+	if (!response.ok) throw new Error(`${response.status} ${url}`);
+	const text = await response.text();
+	await (0, es_module_lexer.init)();
+	const [specifiers] = (0, es_module_lexer.parse)(text);
+	let source = text;
+	for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
+	const cjs = (0, sucrase.transform)(require_css.rewriteImportMeta(source, url), {
+		transforms: ["imports"],
+		disableESTransforms: true,
+		production: true,
+		filePath: url
+	}).code;
+	return {
+		dependencies: specifiers.filter((item) => item.type === "static" || item.type === "reexport-star").map((item) => item.specifier),
+		run: new Function("require", "module", "exports", "__import", cjs)
+	};
+};
+var readRemoteSource = (url) => {
+	if (new URL(url).origin === globalThis.location?.origin) return prepareRemoteSource(url);
+	const cached = sourceCache.get(url);
+	if (cached) {
+		sourceCache.delete(url);
+		sourceCache.set(url, cached);
+		return cached;
+	}
+	const task = prepareRemoteSource(url).catch((error) => {
+		if (sourceCache.get(url) === task) sourceCache.delete(url);
+		throw error;
+	});
+	sourceCache.set(url, task);
+	if (sourceCache.size > REMOTE_SOURCE_CACHE_LIMIT) sourceCache.delete(sourceCache.keys().next().value);
+	return task;
+};
 /**
 * 把 CDN 上的 ESM 先拉完整张依赖图，再在当前页面里执行。
 * 裸导入优先走 import map，缺失的 npm 依赖回退到 CDN ESM；import() 按需加载。
@@ -3072,9 +3109,9 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		"vue-router": builtins.vueRouter
 	};
 	const pendingBuiltins = /* @__PURE__ */ new Set();
-	const texts = /* @__PURE__ */ new Map();
+	const sources = /* @__PURE__ */ new Map();
+	const pendingSources = /* @__PURE__ */ new Map();
 	const evaluated = /* @__PURE__ */ new Map();
-	const crawled = /* @__PURE__ */ new Set();
 	const nativeModules = /* @__PURE__ */ new Map();
 	const loadNative = (url) => {
 		let pending = nativeModules.get(url);
@@ -3131,25 +3168,23 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		}
 		return moduleUrl(imports[target]);
 	};
-	const crawl = async (url) => {
+	const crawl = async (url, visited = /* @__PURE__ */ new Set()) => {
 		if (!overrides.size && /\/\+esm(?:[?#]|$)/.test(url)) {
 			await loadNative(url);
 			return;
 		}
-		if (crawled.has(url)) return;
-		crawled.add(url);
-		const response = await fetch(url);
-		if (!response.ok) throw new Error(`${response.status} ${url}`);
-		const text = await response.text();
-		await (0, es_module_lexer.init)();
-		const [specifiers] = (0, es_module_lexer.parse)(text);
-		let source = text;
-		for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
-		texts.set(url, source);
-		await Promise.all(specifiers.map(async (item) => {
-			if (item.type !== "static" && item.type !== "reexport-star") return;
-			const next = dependencyUrl(url, item.specifier);
-			if (next) await crawl(next);
+		if (visited.has(url)) return;
+		visited.add(url);
+		let pending = pendingSources.get(url);
+		if (!pending) {
+			pending = readRemoteSource(url);
+			pendingSources.set(url, pending);
+		}
+		const source = await pending;
+		sources.set(url, source);
+		await Promise.all(source.dependencies.map(async (specifier) => {
+			const next = dependencyUrl(url, specifier);
+			if (next) await crawl(next, visited);
 		}));
 	};
 	const requireFrom = (from) => (specifier) => {
@@ -3169,17 +3204,12 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	};
 	const evaluate = (url) => {
 		if (evaluated.has(url)) return evaluated.get(url);
-		const text = texts.get(url);
-		if (text == null) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
-		const cjs = (0, sucrase.transform)(require_css.rewriteImportMeta(text, url), {
-			transforms: ["imports"],
-			disableESTransforms: true,
-			production: true,
-			filePath: url
-		}).code;
+		const source = sources.get(url);
+		if (!source) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
 		const module = { exports: {} };
 		evaluated.set(url, module.exports);
-		new Function("require", "module", "exports", "__import", cjs)(requireFrom(url), module, module.exports, async (id) => {
+		const runner = source.run;
+		runner(requireFrom(url), module, module.exports, async (id) => {
 			const next = dependencyUrl(url, id);
 			if (next) await load(next);
 			else {

package/dist/index.js

@@ -3053,6 +3053,43 @@ var linkPlayground = (compiled, files, options = {}) => {
 //#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();
+var prepareRemoteSource = async (url) => {
+	const response = await fetch(url);
+	if (!response.ok) throw new Error(`${response.status} ${url}`);
+	const text = await response.text();
+	await init();
+	const [specifiers] = parse(text);
+	let source = text;
+	for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
+	const cjs = transform(rewriteImportMeta(source, url), {
+		transforms: ["imports"],
+		disableESTransforms: true,
+		production: true,
+		filePath: url
+	}).code;
+	return {
+		dependencies: specifiers.filter((item) => item.type === "static" || item.type === "reexport-star").map((item) => item.specifier),
+		run: new Function("require", "module", "exports", "__import", cjs)
+	};
+};
+var readRemoteSource = (url) => {
+	if (new URL(url).origin === globalThis.location?.origin) return prepareRemoteSource(url);
+	const cached = sourceCache.get(url);
+	if (cached) {
+		sourceCache.delete(url);
+		sourceCache.set(url, cached);
+		return cached;
+	}
+	const task = prepareRemoteSource(url).catch((error) => {
+		if (sourceCache.get(url) === task) sourceCache.delete(url);
+		throw error;
+	});
+	sourceCache.set(url, task);
+	if (sourceCache.size > REMOTE_SOURCE_CACHE_LIMIT) sourceCache.delete(sourceCache.keys().next().value);
+	return task;
+};
 /**
 * 把 CDN 上的 ESM 先拉完整张依赖图，再在当前页面里执行。
 * 裸导入优先走 import map，缺失的 npm 依赖回退到 CDN ESM；import() 按需加载。
@@ -3071,9 +3108,9 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		"vue-router": builtins.vueRouter
 	};
 	const pendingBuiltins = /* @__PURE__ */ new Set();
-	const texts = /* @__PURE__ */ new Map();
+	const sources = /* @__PURE__ */ new Map();
+	const pendingSources = /* @__PURE__ */ new Map();
 	const evaluated = /* @__PURE__ */ new Map();
-	const crawled = /* @__PURE__ */ new Set();
 	const nativeModules = /* @__PURE__ */ new Map();
 	const loadNative = (url) => {
 		let pending = nativeModules.get(url);
@@ -3130,25 +3167,23 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 		}
 		return moduleUrl(imports[target]);
 	};
-	const crawl = async (url) => {
+	const crawl = async (url, visited = /* @__PURE__ */ new Set()) => {
 		if (!overrides.size && /\/\+esm(?:[?#]|$)/.test(url)) {
 			await loadNative(url);
 			return;
 		}
-		if (crawled.has(url)) return;
-		crawled.add(url);
-		const response = await fetch(url);
-		if (!response.ok) throw new Error(`${response.status} ${url}`);
-		const text = await response.text();
-		await init();
-		const [specifiers] = parse(text);
-		let source = text;
-		for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
-		texts.set(url, source);
-		await Promise.all(specifiers.map(async (item) => {
-			if (item.type !== "static" && item.type !== "reexport-star") return;
-			const next = dependencyUrl(url, item.specifier);
-			if (next) await crawl(next);
+		if (visited.has(url)) return;
+		visited.add(url);
+		let pending = pendingSources.get(url);
+		if (!pending) {
+			pending = readRemoteSource(url);
+			pendingSources.set(url, pending);
+		}
+		const source = await pending;
+		sources.set(url, source);
+		await Promise.all(source.dependencies.map(async (specifier) => {
+			const next = dependencyUrl(url, specifier);
+			if (next) await crawl(next, visited);
 		}));
 	};
 	const requireFrom = (from) => (specifier) => {
@@ -3168,17 +3203,12 @@ var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imp
 	};
 	const evaluate = (url) => {
 		if (evaluated.has(url)) return evaluated.get(url);
-		const text = texts.get(url);
-		if (text == null) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
-		const cjs = transform(rewriteImportMeta(text, url), {
-			transforms: ["imports"],
-			disableESTransforms: true,
-			production: true,
-			filePath: url
-		}).code;
+		const source = sources.get(url);
+		if (!source) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
 		const module = { exports: {} };
 		evaluated.set(url, module.exports);
-		new Function("require", "module", "exports", "__import", cjs)(requireFrom(url), module, module.exports, async (id) => {
+		const runner = source.run;
+		runner(requireFrom(url), module, module.exports, async (id) => {
 			const next = dependencyUrl(url, id);
 			if (next) await load(next);
 			else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/docs-playground",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {