@deot/docs-playground 1.1.2 → 1.1.3

package/README.md

@@ -53,6 +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` | `false` | 在当前文档编译并挂载，不使用 iframe。`vue` 使用宿主同一份实例；其余 import map 仍是 URL，加载后作为模块变量。 |
 | `options` | `PlaygroundOptions` | `{}` | 传给 Vue REPL store 的实例级选项；`cdnURL` 会同时作用于预览样式和默认 import map。 |
 | `previewOptions` | `SandboxProps['previewOptions']` | `undefined` | 传给当前 iframe 的 preview 选项。 |
 | `locale` | `Language` | `en-US` | 界面语言；未传入时使用上层 Locale Provider。 |
@@ -158,6 +159,7 @@ const handleMessage = async () => {
 - Vue SFC 的 `<style lang="scss">` / `lang="sass"` 以及独立 `.scss` / `.sass` 文件会在浏览器里编译；`_partial.scss` 只作为 `@use` 依赖。
 - `options.builtinImportMap.imports` 可以覆盖默认模块 URL。Vue 运行时仍从 `play.vuejs.org` 加载。
 - 每个 Playground 实例都使用自己的 preview 配置和 iframe 消息来源校验。
+- `local` 默认开启：同一份 `files` 在当前文档里编译。内置依赖默认用宿主副本；`modules` 里与默认 CDN 不同的地址会覆盖，包括 `vue` 和 `vue/server-renderer`。直接渲染不撑开预览高度，`expandable` 固定为关闭，`docs:playground.run` 不会申请临时高度；`<DocsLink>` 仍通过 `docs:navigate` 通知。`local: false` 改回 iframe Sandbox。
 
 ## 仓库内 examples
 

package/dist/cdn-Czve5_9b.cjs

@@ -0,0 +1,94 @@
+//#region packages/playground/src/constants.ts
+var DEFAULT_ENTRY = "App.vue";
+/** 预览样式和默认 import map 共用的 npm CDN 前缀。 */
+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 PREVIEW_STYLE_ASSETS = [
+	"@deot/style/dist/index.normalize-only.css",
+	"@deot/vc-components/dist/index.style.css",
+	"@deot/style/dist/index.css"
+];
+var BUILTIN_IMPORT_ASSETS = {
+	"@deot/vc": "@deot/vc/dist/index.js",
+	"@deot/vc-shared": "@deot/vc-shared/dist/index.js",
+	"@deot/vc-hooks": "@deot/vc-hooks/dist/index.js",
+	"@deot/vc-locale": "@deot/vc-locale/dist/index.js",
+	"@deot/vc-components": "@deot/vc-components/dist/index.js",
+	"@deot/helper-resize": "@deot/helper-resize/dist/index.js",
+	"@deot/helper-utils": "@deot/helper-utils/dist/index.js",
+	"@deot/helper-cache": "@deot/helper-cache/dist/index.js",
+	"@deot/helper-fp": "@deot/helper-fp/dist/index.js",
+	"@deot/helper-dom": "@deot/helper-dom/dist/index.js",
+	"@deot/helper-wheel": "@deot/helper-wheel/dist/index.js",
+	"@deot/helper-validator": "@deot/helper-validator/dist/index.js",
+	"@deot/helper-load": "@deot/helper-load/dist/index.js",
+	"@deot/helper-scheduler": "@deot/helper-scheduler/dist/index.js",
+	"@deot/helper-emitter": "@deot/helper-emitter/dist/index.js",
+	"@deot/helper-is": "@deot/helper-is/dist/index.js",
+	"@deot/helper-device": "@deot/helper-device/dist/index.js",
+	"@deot/helper-route": "@deot/helper-route/dist/index.js",
+	"@deot/helper-unicode": "@deot/helper-unicode/dist/index.js",
+	"@deot/helper": "@deot/helper/dist/index.js",
+	"normalize-wheel": "normalize-wheel-es/dist/index.mjs",
+	"photoswipe": "photoswipe/dist/photoswipe.esm.js",
+	"photoswipe/lightbox": "photoswipe/dist/photoswipe-lightbox.esm.js",
+	"vue": "vue/dist/vue.runtime.esm-browser.js",
+	"vue/server-renderer": "vue/dist/server-renderer.esm-browser.js"
+};
+var normalizeCdnURL = (cdnURL = DEFAULT_CDN_URL) => {
+	return cdnURL.trim().replace(/\/+$/u, "") || "https://cdn.jsdelivr.net/npm";
+};
+var cdnJoin = (origin, asset) => `${origin}/${asset.replace(/^\/+/u, "")}`;
+var jsdelivrEsmURL = (asset) => cdnJoin(DEFAULT_CDN_URL, asset);
+var SASS_CDN_URL = jsdelivrEsmURL("sass/+esm");
+var cdnAsset = (cdnURL, asset) => cdnJoin(normalizeCdnURL(cdnURL), asset);
+var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
+	...Object.fromEntries(Object.entries(BUILTIN_IMPORT_ASSETS).map(([specifier, asset]) => [specifier, cdnAsset(cdnURL, asset)])),
+	"lodash-es": jsdelivrEsmURL("lodash-es/+esm")
+});
+var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
+//#endregion
+Object.defineProperty(exports, "DEFAULT_CDN_URL", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_CDN_URL;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_ENTRY", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_ENTRY;
+	}
+});
+Object.defineProperty(exports, "NEW_SFC_CODE", {
+	enumerable: true,
+	get: function() {
+		return NEW_SFC_CODE;
+	}
+});
+Object.defineProperty(exports, "SASS_CDN_URL", {
+	enumerable: true,
+	get: function() {
+		return SASS_CDN_URL;
+	}
+});
+Object.defineProperty(exports, "createBuiltinImports", {
+	enumerable: true,
+	get: function() {
+		return createBuiltinImports;
+	}
+});
+Object.defineProperty(exports, "createBuiltinStyles", {
+	enumerable: true,
+	get: function() {
+		return createBuiltinStyles;
+	}
+});
+Object.defineProperty(exports, "normalizeCdnURL", {
+	enumerable: true,
+	get: function() {
+		return normalizeCdnURL;
+	}
+});

package/dist/cdn-DEvdGJu2.js

@@ -0,0 +1,53 @@
+//#region packages/playground/src/constants.ts
+var DEFAULT_ENTRY = "App.vue";
+/** 预览样式和默认 import map 共用的 npm CDN 前缀。 */
+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 PREVIEW_STYLE_ASSETS = [
+	"@deot/style/dist/index.normalize-only.css",
+	"@deot/vc-components/dist/index.style.css",
+	"@deot/style/dist/index.css"
+];
+var BUILTIN_IMPORT_ASSETS = {
+	"@deot/vc": "@deot/vc/dist/index.js",
+	"@deot/vc-shared": "@deot/vc-shared/dist/index.js",
+	"@deot/vc-hooks": "@deot/vc-hooks/dist/index.js",
+	"@deot/vc-locale": "@deot/vc-locale/dist/index.js",
+	"@deot/vc-components": "@deot/vc-components/dist/index.js",
+	"@deot/helper-resize": "@deot/helper-resize/dist/index.js",
+	"@deot/helper-utils": "@deot/helper-utils/dist/index.js",
+	"@deot/helper-cache": "@deot/helper-cache/dist/index.js",
+	"@deot/helper-fp": "@deot/helper-fp/dist/index.js",
+	"@deot/helper-dom": "@deot/helper-dom/dist/index.js",
+	"@deot/helper-wheel": "@deot/helper-wheel/dist/index.js",
+	"@deot/helper-validator": "@deot/helper-validator/dist/index.js",
+	"@deot/helper-load": "@deot/helper-load/dist/index.js",
+	"@deot/helper-scheduler": "@deot/helper-scheduler/dist/index.js",
+	"@deot/helper-emitter": "@deot/helper-emitter/dist/index.js",
+	"@deot/helper-is": "@deot/helper-is/dist/index.js",
+	"@deot/helper-device": "@deot/helper-device/dist/index.js",
+	"@deot/helper-route": "@deot/helper-route/dist/index.js",
+	"@deot/helper-unicode": "@deot/helper-unicode/dist/index.js",
+	"@deot/helper": "@deot/helper/dist/index.js",
+	"normalize-wheel": "normalize-wheel-es/dist/index.mjs",
+	"photoswipe": "photoswipe/dist/photoswipe.esm.js",
+	"photoswipe/lightbox": "photoswipe/dist/photoswipe-lightbox.esm.js",
+	"vue": "vue/dist/vue.runtime.esm-browser.js",
+	"vue/server-renderer": "vue/dist/server-renderer.esm-browser.js"
+};
+var normalizeCdnURL = (cdnURL = DEFAULT_CDN_URL) => {
+	return cdnURL.trim().replace(/\/+$/u, "") || "https://cdn.jsdelivr.net/npm";
+};
+var cdnJoin = (origin, asset) => `${origin}/${asset.replace(/^\/+/u, "")}`;
+var jsdelivrEsmURL = (asset) => cdnJoin(DEFAULT_CDN_URL, asset);
+var SASS_CDN_URL = jsdelivrEsmURL("sass/+esm");
+var cdnAsset = (cdnURL, asset) => cdnJoin(normalizeCdnURL(cdnURL), asset);
+var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
+	...Object.fromEntries(Object.entries(BUILTIN_IMPORT_ASSETS).map(([specifier, asset]) => [specifier, cdnAsset(cdnURL, asset)])),
+	"lodash-es": jsdelivrEsmURL("lodash-es/+esm")
+});
+var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
+//#endregion
+export { DEFAULT_CDN_URL as a, normalizeCdnURL as i, createBuiltinImports as n, DEFAULT_ENTRY as o, createBuiltinStyles as r, NEW_SFC_CODE as s, SASS_CDN_URL as t };

package/dist/compile-Bw7v7QE-.js

@@ -0,0 +1,333 @@
+import { n as compileScssSource } from "./scss-Co2it4vB.js";
+import { collectReachableFilenames, createFileIndex, getExtension, normalizeVirtualPath, resolveEntry } from "./files-C5UMzYxA.js";
+import { n as transformScript } from "./script-xKUjE8pf.js";
+import { n as collectCss } from "./local-sandbox-B8IJ5jWb.js";
+import { compileString } from "sass";
+//#region packages/playground/src/core/runtime/local/compile/scss.ts
+/**
+* 直接渲染使用已安装的 sass，importer 与 iframe 预览共用，不注入额外 BEM。
+*/
+var compiler = { compileString(source, options) {
+	return { css: compileString(source, options).css };
+} };
+var toScssFiles = (files) => {
+	const map = {};
+	Object.entries(files || {}).forEach(([filename, code]) => {
+		const normalized = filename.replace(/\\/gu, "/");
+		map[normalized] = code;
+		map[normalized.replace(/^\/+/u, "")] = code;
+	});
+	return map;
+};
+var compileLocalScss = (source, filename, files, lang) => {
+	try {
+		return compileScssSource(source, filename.replace(/^\/+/u, ""), compiler, toScssFiles(files), lang);
+	} catch (error) {
+		/* istanbul ignore next -- Sass 失败时 message 总是字符串 */
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`[Playground] SCSS 编译失败 ${filename}: ${message}`, { cause: error });
+	}
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/compile/sfc.ts
+var compilerPromise = null;
+/**
+* 只加载浏览器构建，避免 `@vue/compiler-sfc` 的 Node 主入口碰文件系统。
+* @returns 浏览器版 compiler-sfc。
+*/
+var loadCompiler = () => {
+	compilerPromise ??= import("@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js").then((mod) => {
+		return mod.default || mod;
+	});
+	return compilerPromise;
+};
+var hashId = (filename) => {
+	let hash = 0;
+	for (let i = 0; i < filename.length; i += 1) {
+		hash = (hash << 5) - hash + filename.charCodeAt(i);
+		hash |= 0;
+	}
+	return Math.abs(hash).toString(36).slice(0, 8);
+};
+var messageOf$1 = (error) => error instanceof Error ? error.message : String(error);
+var isScssLang = (lang) => lang === "scss" || lang === "sass";
+var isSupportedStyleLang = (lang) => !lang || lang === "css" || isScssLang(lang);
+var compileSfc = async (code, filename, files = {}) => {
+	const compiler = await loadCompiler();
+	const errors = [];
+	const id = hashId(filename);
+	const { descriptor, errors: parseErrors } = compiler.parse(code, {
+		filename,
+		sourceMap: false
+	});
+	parseErrors.forEach((error) => {
+		errors.push(messageOf$1(error));
+	});
+	if (errors.length) return {
+		js: "export default {}",
+		css: "",
+		errors
+	};
+	const srcBlock = [
+		descriptor.script,
+		descriptor.scriptSetup,
+		descriptor.template,
+		...descriptor.styles
+	].find((block) => block?.src);
+	if (srcBlock) {
+		errors.push(`[Playground] 不支持 <${srcBlock.type} src>，请把源码放进 files。文件: ${filename}`);
+		return {
+			js: "export default {}",
+			css: "",
+			errors
+		};
+	}
+	const hasScript = !!(descriptor.script || descriptor.scriptSetup);
+	const isTS = !!(descriptor.script?.lang?.startsWith("ts") || descriptor.scriptSetup?.lang?.startsWith("ts"));
+	let clientCode;
+	let bindings;
+	if (hasScript) try {
+		const scriptResult = compiler.compileScript(descriptor, {
+			id,
+			inlineTemplate: true,
+			genDefaultAs: "__sfc__",
+			templateOptions: {
+				filename,
+				id,
+				scoped: descriptor.styles.some((style) => style.scoped)
+			}
+		});
+		clientCode = scriptResult.content;
+		bindings = scriptResult.bindings;
+	} catch (error) {
+		errors.push(`[Playground] compileScript ${filename}: ${messageOf$1(error)}`);
+		return {
+			js: "export default {}",
+			css: "",
+			errors
+		};
+	}
+	else clientCode = "const __sfc__ = {};";
+	const templateInlined = !!(descriptor.scriptSetup && hasScript);
+	if (descriptor.template && !templateInlined) try {
+		const templateResult = compiler.compileTemplate({
+			id,
+			filename,
+			source: descriptor.template.content,
+			scoped: descriptor.styles.some((style) => style.scoped),
+			compilerOptions: {
+				bindingMetadata: bindings,
+				isTS
+			}
+		});
+		if (templateResult.errors?.length) templateResult.errors.forEach((error) => {
+			errors.push(messageOf$1(error));
+		});
+		else {
+			clientCode += `\n${templateResult.code}`;
+			clientCode += "\n__sfc__.render = typeof render === \"function\" ? render : exports.render;";
+		}
+	} catch (error) {
+		errors.push(`[Playground] compileTemplate ${filename}: ${messageOf$1(error)}`);
+	}
+	if (descriptor.styles.some((style) => style.scoped)) clientCode += `\n__sfc__.__scopeId = ${JSON.stringify(`data-v-${id}`)};`;
+	clientCode += `\n__sfc__.__file = ${JSON.stringify(filename)};`;
+	clientCode += "\nexport default __sfc__;";
+	let css = "";
+	for (const style of descriptor.styles) {
+		if (!isSupportedStyleLang(style.lang)) {
+			errors.push(`[Playground] <style lang="${style.lang}"> 暂不支持（仅 CSS / SCSS / Sass）。文件: ${filename}`);
+			continue;
+		}
+		let source = style.content;
+		if (isScssLang(style.lang)) try {
+			source = compileLocalScss(source, filename, files, style.lang);
+		} catch (error) {
+			errors.push(messageOf$1(error));
+			continue;
+		}
+		try {
+			const styleResult = await compiler.compileStyleAsync({
+				id: style.scoped ? `data-v-${id}` : id,
+				filename,
+				source,
+				scoped: !!style.scoped
+			});
+			if (styleResult.errors?.length) styleResult.errors.forEach((error) => {
+				errors.push(messageOf$1(error));
+			});
+			else css += `${styleResult.code}\n`;
+		} catch (error) {
+			/* istanbul ignore next -- 样式编译失败会走 errors 数组，这里只兜底抛错 */
+			errors.push(`[Playground] compileStyle ${filename}: ${messageOf$1(error)}`);
+		}
+	}
+	return {
+		js: clientCode,
+		css,
+		errors
+	};
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/compile/index.ts
+var JSON_IDENT = /^[$A-Z_][0-9A-Z_$]*$/iu;
+var messageOf = (error) => error instanceof Error ? error.message : String(error);
+/**
+* Vite 语义：default 是整份对象，合法标识符键再挂成具名导出。
+* @param parsed JSON.parse 的结果。
+* @param filename 当前虚拟文件名，写入 sourceURL。
+* @returns 可执行的 CJS 文本。
+*/
+var transformJson = (parsed, filename) => {
+	const lines = [`exports.default = ${JSON.stringify(parsed)};`];
+	if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) Object.keys(parsed).forEach((key) => {
+		if (!JSON_IDENT.test(key) || key === "__esModule" || key === "default") return;
+		lines.push(`exports[${JSON.stringify(key)}] = exports.default[${JSON.stringify(key)}];`);
+	});
+	lines.push(`//# sourceURL=playground://${filename}`);
+	return lines.join("\n");
+};
+var compileOne = async (filename, code, files) => {
+	const ext = getExtension(filename);
+	const errors = [];
+	if (ext === ".vue") {
+		if (/lang\s*=\s*["']jsx["']/iu.test(code) || /lang\s*=\s*["']tsx["']/iu.test(code)) {
+			errors.push(`[Playground] JSX/TSX 暂不支持: ${filename}`);
+			return {
+				filename,
+				js: "exports.default = {}",
+				css: "",
+				errors
+			};
+		}
+		const result = await compileSfc(code, filename, files);
+		errors.push(...result.errors);
+		return {
+			filename,
+			js: transformScript(result.js, filename, { typescript: true }),
+			css: result.css,
+			errors
+		};
+	}
+	if (ext === ".css") return {
+		filename,
+		js: `exports.default = {};\n//# sourceURL=playground://${filename}`,
+		css: code,
+		errors
+	};
+	if (ext === ".scss" || ext === ".sass") try {
+		const css = compileLocalScss(code, filename, files);
+		return {
+			filename,
+			js: `exports.default = {};\n//# sourceURL=playground://${filename}`,
+			css,
+			errors
+		};
+	} catch (error) {
+		errors.push(messageOf(error));
+		return {
+			filename,
+			js: "exports.default = {};",
+			css: "",
+			errors
+		};
+	}
+	if (ext === ".json") try {
+		return {
+			filename,
+			js: transformJson(JSON.parse(code), filename),
+			css: "",
+			errors
+		};
+	} catch (error) {
+		errors.push(`[Playground] JSON 解析失败 ${filename}: ${messageOf(error)}`);
+		return {
+			filename,
+			js: "exports.default = {};",
+			css: "",
+			errors
+		};
+	}
+	if (ext === ".js" || ext === ".ts" || ext === ".jsx" || ext === ".tsx") {
+		if (ext === ".jsx" || ext === ".tsx") {
+			errors.push(`[Playground] JSX/TSX 暂不支持: ${filename}`);
+			return {
+				filename,
+				js: "exports.default = {};",
+				css: "",
+				errors
+			};
+		}
+		try {
+			return {
+				filename,
+				js: transformScript(code, filename, { typescript: ext === ".ts" }),
+				css: "",
+				errors
+			};
+		} catch (error) {
+			errors.push(messageOf(error));
+			return {
+				filename,
+				js: "exports.default = {};",
+				css: "",
+				errors
+			};
+		}
+	}
+	errors.push(`[Playground] 不支持的文件类型: ${filename}`);
+	return {
+		filename,
+		js: "exports.default = {};",
+		css: "",
+		errors
+	};
+};
+/**
+* 浏览器内编译整份 files。入口和相对路径与 Playground 的 files 键一致。
+* @param files 当前 Playground 文件表。
+* @param entryOrOptions 入口文件名，或带入口的编译选项。
+* @returns 编译出的模块、样式和错误。
+*/
+var compilePlayground = async (files, entryOrOptions) => {
+	const options = typeof entryOrOptions === "string" ? { entry: entryOrOptions } : entryOrOptions || {};
+	const errors = [];
+	let entry;
+	try {
+		entry = resolveEntry(files, options.entry);
+	} catch (error) {
+		return {
+			entry: "",
+			modules: {},
+			css: [],
+			errors: [messageOf(error)]
+		};
+	}
+	const fileIndex = createFileIndex(files);
+	const reachable = collectReachableFilenames(files, entry);
+	const modules = {};
+	const cssChunks = [];
+	for (const filename of reachable) {
+		const code = fileIndex.get(filename);
+		if (typeof code !== "string") continue;
+		const compiled = await compileOne(filename, code, files);
+		errors.push(...compiled.errors);
+		modules[filename] = {
+			filename,
+			js: compiled.js,
+			css: compiled.css
+		};
+		cssChunks.push(...collectCss([compiled.css]));
+	}
+	const normalizedEntry = normalizeVirtualPath(entry);
+	/* istanbul ignore if -- 可达编译总会留下入口模块 */
+	if (!modules[normalizedEntry]) errors.push(`[Playground] 入口编译结果缺失: ${normalizedEntry}`);
+	return {
+		entry: normalizedEntry,
+		modules,
+		css: cssChunks,
+		errors
+	};
+};
+//#endregion
+export { compilePlayground };