@deot/docs-playground 1.1.4 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/dist/{compile-Da095AyM.cjs → compile-29EUKPOy.cjs} +11 -14
- package/dist/{compile-BHD98Ttf.js → compile-CM_OyqYN.js} +1 -4
- package/dist/css-DleINdoA.js +580 -0
- package/dist/css-DpqJBQ5c.cjs +786 -0
- package/dist/index.cjs +1935 -79
- package/dist/index.js +1888 -24
- package/dist/index.style.css +1 -1
- package/package.json +18 -18
- package/dist/cdn-BoYKnGD3.cjs +0 -101
- package/dist/cdn-DQoETju_.js +0 -54
- package/dist/files-BqucFldk.js +0 -207
- package/dist/files-BsAOZiPN.cjs +0 -267
- package/dist/linker-DIpEiean.cjs +0 -167
- package/dist/linker-xqjVl0X0.js +0 -166
- package/dist/local-sandbox-0ojvBQPO.cjs +0 -432
- package/dist/local-sandbox-DvcgaBOa.js +0 -424
- package/dist/modules-BGzPcoRR.js +0 -217
- package/dist/modules-E6kK6ZJH.cjs +0 -223
- package/dist/remote-BG0E1Ugo.cjs +0 -152
- package/dist/remote-mq4zvrI1.js +0 -152
- package/dist/rolldown-runtime-C0BPl7ul.cjs +0 -43
- package/dist/script-BiCcpu3G.cjs +0 -111
- package/dist/script-DjUf9uWK.js +0 -98
- package/dist/scss-B8OFbz1k.cjs +0 -251
- package/dist/scss-DIh6971q.js +0 -227
- package/dist/store-BOyC8F2y.js +0 -910
- package/dist/store-DKawhFZu.cjs +0 -1109
package/dist/index.cjs
CHANGED
|
@@ -1,20 +1,30 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const
|
|
3
|
-
const require_cdn = require("./cdn-BoYKnGD3.cjs");
|
|
4
|
-
const require_store = require("./store-DKawhFZu.cjs");
|
|
5
|
-
const require_scss = require("./scss-B8OFbz1k.cjs");
|
|
6
|
-
const require_files = require("./files-BsAOZiPN.cjs");
|
|
2
|
+
const require_css = require("./css-DpqJBQ5c.cjs");
|
|
7
3
|
let vue = require("vue");
|
|
4
|
+
vue = require_css.__toESM(vue);
|
|
8
5
|
let _deot_vc = require("@deot/vc");
|
|
6
|
+
_deot_vc = require_css.__toESM(_deot_vc);
|
|
9
7
|
let _deot_docs_locale = require("@deot/docs-locale");
|
|
10
8
|
let highlight_js = require("highlight.js");
|
|
11
|
-
highlight_js =
|
|
9
|
+
highlight_js = require_css.__toESM(highlight_js);
|
|
12
10
|
let _vue_repl = require("@vue/repl");
|
|
13
11
|
let codemirror = require("codemirror");
|
|
14
12
|
let _codemirror_lang_css = require("@codemirror/lang-css");
|
|
15
13
|
let _codemirror_lang_javascript = require("@codemirror/lang-javascript");
|
|
16
14
|
let _codemirror_lang_vue = require("@codemirror/lang-vue");
|
|
17
15
|
let _codemirror_view = require("@codemirror/view");
|
|
16
|
+
let es_module_lexer = require("es-module-lexer");
|
|
17
|
+
let sucrase = require("sucrase");
|
|
18
|
+
let _vue_compiler_sfc_dist_compiler_sfc_esm_browser_js = require("@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js");
|
|
19
|
+
_vue_compiler_sfc_dist_compiler_sfc_esm_browser_js = require_css.__toESM(_vue_compiler_sfc_dist_compiler_sfc_esm_browser_js);
|
|
20
|
+
let vue_router = require("vue-router");
|
|
21
|
+
vue_router = require_css.__toESM(vue_router);
|
|
22
|
+
let pinia = require("pinia");
|
|
23
|
+
pinia = require_css.__toESM(pinia);
|
|
24
|
+
let _deot_vc_components = require("@deot/vc-components");
|
|
25
|
+
_deot_vc_components = require_css.__toESM(_deot_vc_components);
|
|
26
|
+
let _deot_vc_hooks = require("@deot/vc-hooks");
|
|
27
|
+
_deot_vc_hooks = require_css.__toESM(_deot_vc_hooks);
|
|
18
28
|
//#region packages/playground/src/highlight.ts
|
|
19
29
|
var vueHighlight = (api) => ({
|
|
20
30
|
subLanguage: "xml",
|
|
@@ -122,7 +132,7 @@ var PLAYGROUND_ICONS = {
|
|
|
122
132
|
};
|
|
123
133
|
//#endregion
|
|
124
134
|
//#region packages/playground/src/icon/icon.vue?vue&type=script&setup=true&lang.ts
|
|
125
|
-
var _hoisted_1$
|
|
135
|
+
var _hoisted_1$8 = ["fill", "stroke"];
|
|
126
136
|
var _hoisted_2$7 = ["d"];
|
|
127
137
|
//#endregion
|
|
128
138
|
//#region packages/playground/src/icon/icon.vue
|
|
@@ -154,16 +164,16 @@ var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
154
164
|
"stroke-linecap": "round",
|
|
155
165
|
"stroke-linejoin": "round",
|
|
156
166
|
"aria-hidden": "true"
|
|
157
|
-
}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$
|
|
167
|
+
}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$8);
|
|
158
168
|
};
|
|
159
169
|
}
|
|
160
170
|
});
|
|
161
171
|
//#endregion
|
|
162
172
|
//#region packages/playground/src/core/code-preview/github.css?inline
|
|
163
|
-
var github_default = "pre code.hljs{display:block;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}";
|
|
173
|
+
var github_default = "pre code.hljs{display:block;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}@media screen{[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}}";
|
|
164
174
|
//#endregion
|
|
165
175
|
//#region packages/playground/src/core/code-preview/code-preview.scss?inline
|
|
166
|
-
var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s
|
|
176
|
+
var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s;transition:opacity .15s}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-border-color,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s,background-color .15s;transition:opacity .15s,background-color .15s}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-lightest,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__scroller{width:100%;height:100%;min-width:0;min-height:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code{width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:0}.docs-code-preview__code,.docs-code-preview__code code.hljs{min-width:100%;min-height:100%;overflow:visible;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{display:block;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
|
|
167
177
|
//#endregion
|
|
168
178
|
//#region packages/playground/src/core/code-preview/style.ts
|
|
169
179
|
var CODE_PREVIEW_STYLE_ID = "docs-code-preview-style";
|
|
@@ -180,7 +190,7 @@ var ensureCodePreviewStyle = () => {
|
|
|
180
190
|
};
|
|
181
191
|
//#endregion
|
|
182
192
|
//#region packages/playground/src/core/code-preview/code-preview.vue?vue&type=script&setup=true&lang.ts
|
|
183
|
-
var _hoisted_1$
|
|
193
|
+
var _hoisted_1$7 = { class: "docs-code-preview" };
|
|
184
194
|
var _hoisted_2$6 = ["title"];
|
|
185
195
|
var _hoisted_3$6 = { class: "docs-code-preview__code" };
|
|
186
196
|
var _hoisted_4$6 = ["innerHTML"];
|
|
@@ -214,7 +224,7 @@ var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
214
224
|
const highlightLanguage = (0, vue.computed)(() => props.language || resolveHighlightLanguage(props.filename));
|
|
215
225
|
const highlightedCode = (0, vue.computed)(() => highlightCodeByLanguage(props.code, highlightLanguage.value));
|
|
216
226
|
return (_ctx, _cache) => {
|
|
217
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$
|
|
227
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$7, [
|
|
218
228
|
languageLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
|
|
219
229
|
key: 0,
|
|
220
230
|
class: "docs-code-preview__language",
|
|
@@ -254,7 +264,7 @@ var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
254
264
|
});
|
|
255
265
|
//#endregion
|
|
256
266
|
//#region packages/playground/src/core/files-preview/files-preview.vue?vue&type=script&setup=true&lang.ts
|
|
257
|
-
var _hoisted_1$
|
|
267
|
+
var _hoisted_1$6 = { class: "docs-playground-files" };
|
|
258
268
|
var _hoisted_2$5 = { class: "docs-playground-files__tabs-row" };
|
|
259
269
|
var _hoisted_3$5 = ["data-filename", "onClick"];
|
|
260
270
|
var _hoisted_4$5 = {
|
|
@@ -283,7 +293,7 @@ var files_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
283
293
|
if (filename !== props.activeFilename) emit("active-change", filename);
|
|
284
294
|
};
|
|
285
295
|
return (_ctx, _cache) => {
|
|
286
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$
|
|
296
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$6, [(0, vue.createElementVNode)("div", _hoisted_2$5, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
|
|
287
297
|
class: "docs-playground-files__scroller",
|
|
288
298
|
"auto-resize": true,
|
|
289
299
|
native: false,
|
|
@@ -428,7 +438,7 @@ var Drag = class {
|
|
|
428
438
|
};
|
|
429
439
|
//#endregion
|
|
430
440
|
//#region packages/playground/src/editor/editor.vue?vue&type=script&setup=true&lang.ts
|
|
431
|
-
var _hoisted_1$
|
|
441
|
+
var _hoisted_1$5 = { class: "docs-playground-editor" };
|
|
432
442
|
var _hoisted_2$4 = ["title"];
|
|
433
443
|
var _hoisted_3$4 = { class: "docs-playground-editor__files" };
|
|
434
444
|
var _hoisted_4$4 = [
|
|
@@ -572,7 +582,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
572
582
|
const filename = nextFilename();
|
|
573
583
|
editorFiles.value = {
|
|
574
584
|
...editorFiles.value,
|
|
575
|
-
[filename]:
|
|
585
|
+
[filename]: require_css.NEW_SFC_CODE
|
|
576
586
|
};
|
|
577
587
|
activeFilename.value = filename;
|
|
578
588
|
notifyFilesChange({
|
|
@@ -678,7 +688,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
678
688
|
editor.value?.destroy();
|
|
679
689
|
});
|
|
680
690
|
return (_ctx, _cache) => {
|
|
681
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$
|
|
691
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$5, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.TransitionFade), { onAfterLeave: handleHide }, {
|
|
682
692
|
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
|
|
683
693
|
ref_key: "wrapper",
|
|
684
694
|
ref: wrapper,
|
|
@@ -837,6 +847,316 @@ var resolvePlaygroundTitleId = (title, explicitId = "", isOccupied) => {
|
|
|
837
847
|
while (isOccupied(`${base}-${index}`)) index += 1;
|
|
838
848
|
return `${base}-${index}`;
|
|
839
849
|
};
|
|
850
|
+
//#endregion
|
|
851
|
+
//#region packages/playground/src/core/preview-scroll.ts
|
|
852
|
+
/** iframe 包装成功后挂在 `html` 上,供样式与 auto-height 识别。 */
|
|
853
|
+
var PREVIEW_SCROLL_HTML_CLASS = "docs-playground-preview-scroll";
|
|
854
|
+
/** Scroller 内容节点 class,auto-height 优先测量该节点。 */
|
|
855
|
+
var PREVIEW_SCROLL_CONTENT_CLASS = "docs-playground-preview-scroll__content";
|
|
856
|
+
/** 重评时先清掉 html class,避免 `await import` 期间仍套用 `height:100%`。 */
|
|
857
|
+
var PREVIEW_SCROLL_RESET_CODE = `document.documentElement.classList.remove("${PREVIEW_SCROLL_HTML_CLASS}");`;
|
|
858
|
+
/** 动态探测 `@deot/vc`;失败时为空对象,不阻断 DocsLink / 预览挂载。 */
|
|
859
|
+
var PREVIEW_SCROLLER_IMPORT_CODE = "const __docsVc=await import(\"@deot/vc\").catch(()=>({}))";
|
|
860
|
+
/**
|
|
861
|
+
* Vue 的 `mount` 闭包的是 `createApp(root)` 时的根组件,改 `app._component` 不会生效。
|
|
862
|
+
* 因此劫持 `app.mount`:等全部 useCode 注册完后,再 `createApp` 包一层 Scroller。
|
|
863
|
+
* 前导分号避免接在 `app.component(...)` 后被 ASI 解析成调用返回值。
|
|
864
|
+
*/
|
|
865
|
+
var PREVIEW_SCROLLER_USE_CODE = [
|
|
866
|
+
";(()=>{",
|
|
867
|
+
PREVIEW_SCROLL_RESET_CODE,
|
|
868
|
+
"const __DocsScroller=__docsVc&&__docsVc.Scroller;",
|
|
869
|
+
"if(!__DocsScroller)return;",
|
|
870
|
+
"const UserApp=app._component;",
|
|
871
|
+
"app.mount=(container,...rest)=>{",
|
|
872
|
+
"const next=_createApp({",
|
|
873
|
+
"name:\"DocsPreviewRoot\",",
|
|
874
|
+
"setup(){return()=>__docsH(__DocsScroller,{",
|
|
875
|
+
"height:\"100%\",",
|
|
876
|
+
"native:false,",
|
|
877
|
+
"autoResize:true,",
|
|
878
|
+
"showBar:true,",
|
|
879
|
+
`contentClass:"${PREVIEW_SCROLL_CONTENT_CLASS}"`,
|
|
880
|
+
"},{default:()=>__docsH(UserApp)})}",
|
|
881
|
+
"});",
|
|
882
|
+
"next.config.errorHandler=app.config.errorHandler;",
|
|
883
|
+
"if(app._context&&next._context){",
|
|
884
|
+
"if(app._context.components)Object.assign(next._context.components,app._context.components);",
|
|
885
|
+
"if(app._context.directives)Object.assign(next._context.directives,app._context.directives);",
|
|
886
|
+
"Object.assign(next._context.provides,app._context.provides);",
|
|
887
|
+
"next._context.mixins.push(...app._context.mixins);",
|
|
888
|
+
"}",
|
|
889
|
+
"window.__app__=next;",
|
|
890
|
+
`document.documentElement.classList.add("${PREVIEW_SCROLL_HTML_CLASS}");`,
|
|
891
|
+
"return next.mount(container,...rest)",
|
|
892
|
+
"}",
|
|
893
|
+
"})()"
|
|
894
|
+
].join("");
|
|
895
|
+
var PREVIEW_SCROLLER_STYLE = [
|
|
896
|
+
`html.${PREVIEW_SCROLL_HTML_CLASS},`,
|
|
897
|
+
`html.${PREVIEW_SCROLL_HTML_CLASS} body,`,
|
|
898
|
+
`html.${PREVIEW_SCROLL_HTML_CLASS} #app{`,
|
|
899
|
+
"height:100%;min-height:100%;margin:0;overflow:hidden",
|
|
900
|
+
"}",
|
|
901
|
+
`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller{`,
|
|
902
|
+
"height:100%;max-height:100%;box-sizing:border-box",
|
|
903
|
+
"}"
|
|
904
|
+
].join("");
|
|
905
|
+
var resolveSandboxContainer = (sandbox) => sandbox?.container ? (0, vue.unref)(sandbox.container) : null;
|
|
906
|
+
var resolveSandboxMessageSource = (sandbox) => {
|
|
907
|
+
const exposed = sandbox?.messageSource ? (0, vue.unref)(sandbox.messageSource) : null;
|
|
908
|
+
if (exposed && typeof exposed.postMessage === "function") return exposed;
|
|
909
|
+
return (resolveSandboxContainer(sandbox)?.querySelector("iframe"))?.contentWindow ?? null;
|
|
910
|
+
};
|
|
911
|
+
/**
|
|
912
|
+
* iframe 的 contentWindow 在 jsdom 里可能是 null,仍要和旧的元素校验一致。
|
|
913
|
+
* 直接渲染会暴露真实的 messageSource。
|
|
914
|
+
* @param sandbox
|
|
915
|
+
* @param event
|
|
916
|
+
*/
|
|
917
|
+
var isSandboxMessage = (sandbox, event) => {
|
|
918
|
+
const explicit = sandbox?.messageSource ? (0, vue.unref)(sandbox.messageSource) : null;
|
|
919
|
+
if (explicit && typeof explicit.postMessage === "function") return event.source === explicit;
|
|
920
|
+
const iframe = resolveSandboxContainer(sandbox)?.querySelector("iframe");
|
|
921
|
+
return !!iframe && event.source === iframe.contentWindow;
|
|
922
|
+
};
|
|
923
|
+
var resolveScrollContent = (iframeDocument) => {
|
|
924
|
+
if (!iframeDocument.documentElement.classList.contains("docs-playground-preview-scroll")) return null;
|
|
925
|
+
return iframeDocument.querySelector(`.${PREVIEW_SCROLL_CONTENT_CLASS}`);
|
|
926
|
+
};
|
|
927
|
+
var useSandboxAutoHeight = (sandboxRef) => {
|
|
928
|
+
const height = (0, vue.ref)(24);
|
|
929
|
+
let container = null;
|
|
930
|
+
let iframe = null;
|
|
931
|
+
let containerObserver = null;
|
|
932
|
+
let contentObserver = null;
|
|
933
|
+
let scrollMountObserver = null;
|
|
934
|
+
let observedScrollNode = null;
|
|
935
|
+
let frameId = 0;
|
|
936
|
+
const cancelMeasure = () => {
|
|
937
|
+
if (!frameId) return;
|
|
938
|
+
cancelAnimationFrame(frameId);
|
|
939
|
+
frameId = 0;
|
|
940
|
+
};
|
|
941
|
+
const measureDocumentContent = (iframeWindow, iframeDocument) => {
|
|
942
|
+
const { body, documentElement } = iframeDocument;
|
|
943
|
+
const bodyStyle = iframeWindow.getComputedStyle(body);
|
|
944
|
+
const bodyMargins = (Number.parseFloat(bodyStyle.marginTop) || 0) + (Number.parseFloat(bodyStyle.marginBottom) || 0);
|
|
945
|
+
const rootTop = documentElement.getBoundingClientRect().top;
|
|
946
|
+
const bodyRect = body.getBoundingClientRect();
|
|
947
|
+
const collapsedTop = Math.max(0, bodyRect.top - rootTop);
|
|
948
|
+
let childrenBottom = 0;
|
|
949
|
+
for (const child of body.children) {
|
|
950
|
+
if (iframeWindow.getComputedStyle(child).position === "fixed") continue;
|
|
951
|
+
const rect = child.getBoundingClientRect();
|
|
952
|
+
const marginBottom = Number.parseFloat(iframeWindow.getComputedStyle(child).marginBottom) || 0;
|
|
953
|
+
childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
|
|
954
|
+
}
|
|
955
|
+
const scrollHeight = Math.max(body.scrollHeight, documentElement.scrollHeight);
|
|
956
|
+
const overflowingHeight = scrollHeight > (iframe?.clientHeight || 0) + 1 ? scrollHeight : 0;
|
|
957
|
+
return Math.ceil(Math.max(body.offsetHeight + bodyMargins + collapsedTop, bodyRect.height + bodyMargins + collapsedTop, childrenBottom, overflowingHeight));
|
|
958
|
+
};
|
|
959
|
+
const measureScrollContent = (scrollContent) => {
|
|
960
|
+
const contentStyle = scrollContent.ownerDocument.defaultView?.getComputedStyle(scrollContent);
|
|
961
|
+
const margins = contentStyle ? (Number.parseFloat(contentStyle.marginTop) || 0) + (Number.parseFloat(contentStyle.marginBottom) || 0) : 0;
|
|
962
|
+
let childrenBottom = 0;
|
|
963
|
+
const rootTop = scrollContent.getBoundingClientRect().top;
|
|
964
|
+
for (const child of scrollContent.children) {
|
|
965
|
+
const rect = child.getBoundingClientRect();
|
|
966
|
+
const marginBottom = Number.parseFloat(scrollContent.ownerDocument.defaultView?.getComputedStyle(child).marginBottom || "0") || 0;
|
|
967
|
+
childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
|
|
968
|
+
}
|
|
969
|
+
return Math.ceil(Math.max(scrollContent.scrollHeight + margins, scrollContent.offsetHeight + margins, childrenBottom + margins));
|
|
970
|
+
};
|
|
971
|
+
const isPendingPreviewApp = (iframeDocument) => {
|
|
972
|
+
const app = iframeDocument.getElementById("app");
|
|
973
|
+
return app ? app.childElementCount === 0 : !!iframe?.srcdoc;
|
|
974
|
+
};
|
|
975
|
+
const releaseBootstrapHeight = (target) => {
|
|
976
|
+
(0, vue.nextTick)(() => {
|
|
977
|
+
if (iframe === target) target.style.height = "100%";
|
|
978
|
+
});
|
|
979
|
+
};
|
|
980
|
+
const measureElementChildren = (root) => {
|
|
981
|
+
const view = root.ownerDocument.defaultView || window;
|
|
982
|
+
const rootTop = root.getBoundingClientRect().top;
|
|
983
|
+
let childrenBottom = 0;
|
|
984
|
+
for (const child of root.children) {
|
|
985
|
+
if (view.getComputedStyle(child).position === "fixed") continue;
|
|
986
|
+
const rect = child.getBoundingClientRect();
|
|
987
|
+
const marginBottom = Number.parseFloat(view.getComputedStyle(child).marginBottom) || 0;
|
|
988
|
+
childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
|
|
989
|
+
}
|
|
990
|
+
const overflowingHeight = root.scrollHeight > root.clientHeight + 1 ? root.scrollHeight : 0;
|
|
991
|
+
const naturalHeight = root.classList.contains("docs-playground-local__mount--auto") ? root.offsetHeight : 0;
|
|
992
|
+
return Math.ceil(Math.max(childrenBottom, overflowingHeight, naturalHeight));
|
|
993
|
+
};
|
|
994
|
+
const measureLocalContainer = () => {
|
|
995
|
+
if (!container) return;
|
|
996
|
+
const scrollContent = container.querySelector(`.${PREVIEW_SCROLL_CONTENT_CLASS}`);
|
|
997
|
+
const mount = container.querySelector(".docs-playground-local__mount");
|
|
998
|
+
const target = scrollContent || mount;
|
|
999
|
+
if (!target || !scrollContent && target.childElementCount === 0) return;
|
|
1000
|
+
const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureElementChildren(target);
|
|
1001
|
+
const nextHeight = Math.max(contentHeight, 24);
|
|
1002
|
+
if (height.value !== nextHeight) height.value = nextHeight;
|
|
1003
|
+
};
|
|
1004
|
+
const isLocalContainer = (element) => element?.classList.contains("docs-playground-local") === true;
|
|
1005
|
+
const measure = () => {
|
|
1006
|
+
frameId = 0;
|
|
1007
|
+
if (isLocalContainer(container)) {
|
|
1008
|
+
measureLocalContainer();
|
|
1009
|
+
return;
|
|
1010
|
+
}
|
|
1011
|
+
if (!iframe) return;
|
|
1012
|
+
try {
|
|
1013
|
+
const iframeWindow = iframe.contentWindow;
|
|
1014
|
+
const iframeDocument = iframe.contentDocument;
|
|
1015
|
+
if (!iframeWindow || !iframeDocument?.body) return;
|
|
1016
|
+
const scrollContent = resolveScrollContent(iframeDocument);
|
|
1017
|
+
if (!scrollContent && isPendingPreviewApp(iframeDocument)) return;
|
|
1018
|
+
const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureDocumentContent(iframeWindow, iframeDocument);
|
|
1019
|
+
const nextHeight = Math.max(contentHeight, 24);
|
|
1020
|
+
if (height.value !== nextHeight) height.value = nextHeight;
|
|
1021
|
+
releaseBootstrapHeight(iframe);
|
|
1022
|
+
} catch {
|
|
1023
|
+
if (height.value !== 24) height.value = 24;
|
|
1024
|
+
}
|
|
1025
|
+
};
|
|
1026
|
+
const scheduleMeasure = () => {
|
|
1027
|
+
if (frameId) return;
|
|
1028
|
+
frameId = requestAnimationFrame(measure);
|
|
1029
|
+
};
|
|
1030
|
+
const disconnectContent = () => {
|
|
1031
|
+
contentObserver?.disconnect();
|
|
1032
|
+
contentObserver = null;
|
|
1033
|
+
scrollMountObserver?.disconnect();
|
|
1034
|
+
scrollMountObserver = null;
|
|
1035
|
+
observedScrollNode = null;
|
|
1036
|
+
cancelMeasure();
|
|
1037
|
+
};
|
|
1038
|
+
const observeContent = () => {
|
|
1039
|
+
disconnectContent();
|
|
1040
|
+
if (!iframe) return;
|
|
1041
|
+
try {
|
|
1042
|
+
const iframeWindow = iframe.contentWindow;
|
|
1043
|
+
const iframeDocument = iframe.contentDocument;
|
|
1044
|
+
const Observer = iframeWindow?.ResizeObserver;
|
|
1045
|
+
if (!iframeWindow || !iframeDocument?.body || !Observer) {
|
|
1046
|
+
scheduleMeasure();
|
|
1047
|
+
return;
|
|
1048
|
+
}
|
|
1049
|
+
const observer = new Observer(scheduleMeasure);
|
|
1050
|
+
observer.observe(iframeDocument.documentElement);
|
|
1051
|
+
observer.observe(iframeDocument.body);
|
|
1052
|
+
contentObserver = observer;
|
|
1053
|
+
const attachScrollContent = (node) => {
|
|
1054
|
+
if (!node || !contentObserver) return false;
|
|
1055
|
+
if (observedScrollNode === node) return true;
|
|
1056
|
+
if (observedScrollNode) contentObserver.unobserve(observedScrollNode);
|
|
1057
|
+
observedScrollNode = node;
|
|
1058
|
+
contentObserver.observe(node);
|
|
1059
|
+
return true;
|
|
1060
|
+
};
|
|
1061
|
+
const syncScrollContent = () => {
|
|
1062
|
+
attachScrollContent(resolveScrollContent(iframeDocument));
|
|
1063
|
+
scheduleMeasure();
|
|
1064
|
+
};
|
|
1065
|
+
scrollMountObserver = new MutationObserver(syncScrollContent);
|
|
1066
|
+
scrollMountObserver.observe(iframeDocument.documentElement, {
|
|
1067
|
+
attributes: true,
|
|
1068
|
+
attributeFilter: ["class"]
|
|
1069
|
+
});
|
|
1070
|
+
scrollMountObserver.observe(iframeDocument.body, {
|
|
1071
|
+
childList: true,
|
|
1072
|
+
subtree: true
|
|
1073
|
+
});
|
|
1074
|
+
syncScrollContent();
|
|
1075
|
+
} catch {
|
|
1076
|
+
if (height.value !== 24) height.value = 24;
|
|
1077
|
+
}
|
|
1078
|
+
};
|
|
1079
|
+
const handleIframeLoad = () => observeContent();
|
|
1080
|
+
const setIframe = (nextIframe) => {
|
|
1081
|
+
if (iframe === nextIframe) return;
|
|
1082
|
+
iframe?.removeEventListener("load", handleIframeLoad);
|
|
1083
|
+
disconnectContent();
|
|
1084
|
+
iframe = nextIframe;
|
|
1085
|
+
if (!iframe) {
|
|
1086
|
+
height.value = 24;
|
|
1087
|
+
return;
|
|
1088
|
+
}
|
|
1089
|
+
iframe.addEventListener("load", handleIframeLoad);
|
|
1090
|
+
iframe.style.height = `${Math.max(window.innerHeight, 24)}px`;
|
|
1091
|
+
observeContent();
|
|
1092
|
+
};
|
|
1093
|
+
const observeLocal = () => {
|
|
1094
|
+
disconnectContent();
|
|
1095
|
+
if (!container || typeof ResizeObserver === "undefined") {
|
|
1096
|
+
scheduleMeasure();
|
|
1097
|
+
return;
|
|
1098
|
+
}
|
|
1099
|
+
const observer = new ResizeObserver(scheduleMeasure);
|
|
1100
|
+
observer.observe(container);
|
|
1101
|
+
const mount = container.querySelector(".docs-playground-local__mount");
|
|
1102
|
+
if (mount) observer.observe(mount);
|
|
1103
|
+
contentObserver = observer;
|
|
1104
|
+
scrollMountObserver = new MutationObserver(() => {
|
|
1105
|
+
const nextMount = container?.querySelector(".docs-playground-local__mount");
|
|
1106
|
+
if (nextMount && contentObserver) {
|
|
1107
|
+
contentObserver.observe(nextMount);
|
|
1108
|
+
for (const child of nextMount.children) contentObserver.observe(child);
|
|
1109
|
+
}
|
|
1110
|
+
scheduleMeasure();
|
|
1111
|
+
});
|
|
1112
|
+
scrollMountObserver.observe(container, {
|
|
1113
|
+
childList: true,
|
|
1114
|
+
subtree: true
|
|
1115
|
+
});
|
|
1116
|
+
scheduleMeasure();
|
|
1117
|
+
};
|
|
1118
|
+
const syncIframe = () => {
|
|
1119
|
+
if (isLocalContainer(container)) {
|
|
1120
|
+
iframe?.removeEventListener("load", handleIframeLoad);
|
|
1121
|
+
iframe = null;
|
|
1122
|
+
observeLocal();
|
|
1123
|
+
return;
|
|
1124
|
+
}
|
|
1125
|
+
setIframe(container?.querySelector("iframe") || null);
|
|
1126
|
+
};
|
|
1127
|
+
const setContainer = (nextContainer) => {
|
|
1128
|
+
if (container === nextContainer) return;
|
|
1129
|
+
containerObserver?.disconnect();
|
|
1130
|
+
containerObserver = null;
|
|
1131
|
+
disconnectContent();
|
|
1132
|
+
iframe?.removeEventListener("load", handleIframeLoad);
|
|
1133
|
+
iframe = null;
|
|
1134
|
+
container = nextContainer;
|
|
1135
|
+
if (!container) {
|
|
1136
|
+
height.value = 24;
|
|
1137
|
+
return;
|
|
1138
|
+
}
|
|
1139
|
+
if (isLocalContainer(container)) {
|
|
1140
|
+
observeLocal();
|
|
1141
|
+
return;
|
|
1142
|
+
}
|
|
1143
|
+
containerObserver = new MutationObserver(syncIframe);
|
|
1144
|
+
containerObserver.observe(container, {
|
|
1145
|
+
childList: true,
|
|
1146
|
+
subtree: true
|
|
1147
|
+
});
|
|
1148
|
+
syncIframe();
|
|
1149
|
+
};
|
|
1150
|
+
(0, vue.watch)(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
|
|
1151
|
+
flush: "post",
|
|
1152
|
+
immediate: true
|
|
1153
|
+
});
|
|
1154
|
+
(0, vue.onBeforeUnmount)(() => {
|
|
1155
|
+
setContainer(null);
|
|
1156
|
+
cancelMeasure();
|
|
1157
|
+
});
|
|
1158
|
+
return height;
|
|
1159
|
+
};
|
|
840
1160
|
var resolvePreviewBoxHeight = (contentHeight, verticalInset = 0, borderWidth = 1) => {
|
|
841
1161
|
const content = Number.isFinite(contentHeight) ? Math.max(0, contentHeight) : 0;
|
|
842
1162
|
const inset = Number.isFinite(verticalInset) ? Math.max(0, verticalInset) : 0;
|
|
@@ -915,6 +1235,68 @@ var scrollPlaygroundToViewportStart = (el) => {
|
|
|
915
1235
|
});
|
|
916
1236
|
};
|
|
917
1237
|
//#endregion
|
|
1238
|
+
//#region packages/playground/src/core/runtime/error-guard.ts
|
|
1239
|
+
var UNKNOWN_RUNTIME_ERROR = "运行时发生未知错误";
|
|
1240
|
+
var MODULE_SPECIFIER_RE = /Failed to resolve module specifier|Error resolving module specifier/u;
|
|
1241
|
+
var forwardSandboxRuntimeError = (event) => {
|
|
1242
|
+
if (!(event instanceof ErrorEvent) || event.error != null || !event.message) return;
|
|
1243
|
+
event.stopImmediatePropagation();
|
|
1244
|
+
if (event.message === "ResizeObserver loop limit exceeded" || event.message === "ResizeObserver loop completed with undelivered notifications.") return;
|
|
1245
|
+
window.parent.postMessage({
|
|
1246
|
+
action: "error",
|
|
1247
|
+
value: event.message
|
|
1248
|
+
}, "*");
|
|
1249
|
+
};
|
|
1250
|
+
var SANDBOX_RUNTIME_ERROR_CAPTURE_HTML = [
|
|
1251
|
+
"<script>",
|
|
1252
|
+
`window.addEventListener('error', ${forwardSandboxRuntimeError.toString()}, true);`,
|
|
1253
|
+
"<\/script>"
|
|
1254
|
+
].join("\n");
|
|
1255
|
+
var toRuntimeErrorMessage = (value, message) => {
|
|
1256
|
+
if (typeof value === "string" && value) return value;
|
|
1257
|
+
if (value instanceof Error && value.message) return value.message;
|
|
1258
|
+
if (value && typeof value === "object" && "message" in value) {
|
|
1259
|
+
const valueMessage = value.message;
|
|
1260
|
+
if (typeof valueMessage === "string" && valueMessage) return valueMessage;
|
|
1261
|
+
}
|
|
1262
|
+
if (typeof message === "string" && message) return message;
|
|
1263
|
+
if (value !== null && value !== void 0) try {
|
|
1264
|
+
return String(value);
|
|
1265
|
+
} catch {
|
|
1266
|
+
return UNKNOWN_RUNTIME_ERROR;
|
|
1267
|
+
}
|
|
1268
|
+
return UNKNOWN_RUNTIME_ERROR;
|
|
1269
|
+
};
|
|
1270
|
+
var normalizeRuntimeErrorMessage = (data) => {
|
|
1271
|
+
if (!data || typeof data !== "object") return false;
|
|
1272
|
+
const message = data;
|
|
1273
|
+
if (message.action !== "error") return false;
|
|
1274
|
+
message.value = toRuntimeErrorMessage(message.value, message.message);
|
|
1275
|
+
return true;
|
|
1276
|
+
};
|
|
1277
|
+
var toErrorText = (value) => {
|
|
1278
|
+
if (typeof value === "string" && value) return value;
|
|
1279
|
+
if (value instanceof Error && value.message) return value.message;
|
|
1280
|
+
return "";
|
|
1281
|
+
};
|
|
1282
|
+
var formatSandboxRuntimeError = (message, importMapTip) => {
|
|
1283
|
+
if (!MODULE_SPECIFIER_RE.test(message)) return message;
|
|
1284
|
+
return `${message.replace(/\. Relative references must.*$/u, "").replace(/\.$/u, "")}.\n${importMapTip}`;
|
|
1285
|
+
};
|
|
1286
|
+
var useSandboxRuntimeErrorGuard = (sandboxRef) => {
|
|
1287
|
+
const error = (0, vue.ref)("");
|
|
1288
|
+
if (typeof window === "undefined") return error;
|
|
1289
|
+
const handleMessage = (event) => {
|
|
1290
|
+
const source = resolveSandboxMessageSource(sandboxRef.value);
|
|
1291
|
+
if (!source || event.source !== source) return;
|
|
1292
|
+
if (!normalizeRuntimeErrorMessage(event.data)) return;
|
|
1293
|
+
error.value = event.data.value;
|
|
1294
|
+
};
|
|
1295
|
+
window.addEventListener("message", handleMessage, true);
|
|
1296
|
+
(0, vue.onBeforeUnmount)(() => window.removeEventListener("message", handleMessage, true));
|
|
1297
|
+
return error;
|
|
1298
|
+
};
|
|
1299
|
+
//#endregion
|
|
918
1300
|
//#region packages/playground/src/core/runtime/viewport.ts
|
|
919
1301
|
var DEFAULT_VIEWPORT_OPTIONS = ["auto", 375];
|
|
920
1302
|
var isValidViewport = (viewport) => {
|
|
@@ -1078,7 +1460,7 @@ var useSandboxTheme = (sandboxRef) => {
|
|
|
1078
1460
|
}
|
|
1079
1461
|
syncIframe();
|
|
1080
1462
|
};
|
|
1081
|
-
(0, vue.watch)(() =>
|
|
1463
|
+
(0, vue.watch)(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
|
|
1082
1464
|
flush: "post",
|
|
1083
1465
|
immediate: true
|
|
1084
1466
|
});
|
|
@@ -1120,7 +1502,7 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
|
|
|
1120
1502
|
sync();
|
|
1121
1503
|
};
|
|
1122
1504
|
const handleMessage = async (event) => {
|
|
1123
|
-
const current =
|
|
1505
|
+
const current = resolveSandboxMessageSource(sandbox.value);
|
|
1124
1506
|
const data = event.data;
|
|
1125
1507
|
if (!current || event.source !== current || data?.action !== "docs:height" || typeof data.session !== "string") return;
|
|
1126
1508
|
if (data.operation === "start") {
|
|
@@ -1154,7 +1536,7 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
|
|
|
1154
1536
|
accepted
|
|
1155
1537
|
}, "*");
|
|
1156
1538
|
};
|
|
1157
|
-
(0, vue.watch)(() =>
|
|
1539
|
+
(0, vue.watch)(() => resolveSandboxMessageSource(sandbox.value), reset, { flush: "sync" });
|
|
1158
1540
|
if (typeof window !== "undefined") window.addEventListener("message", handleMessage);
|
|
1159
1541
|
(0, vue.onBeforeUnmount)(() => {
|
|
1160
1542
|
disposed = true;
|
|
@@ -1165,7 +1547,7 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
|
|
|
1165
1547
|
}
|
|
1166
1548
|
//#endregion
|
|
1167
1549
|
//#region packages/playground/src/core/runtime/toolbar.vue?vue&type=script&setup=true&lang.ts
|
|
1168
|
-
var _hoisted_1$
|
|
1550
|
+
var _hoisted_1$4 = { class: "docs-playground__tools" };
|
|
1169
1551
|
var _hoisted_2$3 = {
|
|
1170
1552
|
key: 0,
|
|
1171
1553
|
class: "docs-playground__tool-group"
|
|
@@ -1255,7 +1637,7 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1255
1637
|
if (!enabled) viewportMenuVisible.value = false;
|
|
1256
1638
|
});
|
|
1257
1639
|
return (_ctx, _cache) => {
|
|
1258
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$
|
|
1640
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$4, [
|
|
1259
1641
|
__props.showRuntimeActions ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [
|
|
1260
1642
|
__props.viewportOptions.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$3, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Dropdown), {
|
|
1261
1643
|
modelValue: viewportMenuVisible.value,
|
|
@@ -1380,8 +1762,554 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1380
1762
|
}
|
|
1381
1763
|
});
|
|
1382
1764
|
//#endregion
|
|
1765
|
+
//#region packages/playground/src/import-map.ts
|
|
1766
|
+
/**
|
|
1767
|
+
* 站点级同步内存:`$docs.modules` / `$docs.styles` 与管理页 import、CSS 覆盖。
|
|
1768
|
+
*/
|
|
1769
|
+
var normalize = (value) => value.trim();
|
|
1770
|
+
var isSafePlaygroundHref = (href) => {
|
|
1771
|
+
const next = href.trim();
|
|
1772
|
+
if (!next) return false;
|
|
1773
|
+
if (/^https?:\/\//iu.test(next)) return true;
|
|
1774
|
+
return next.startsWith("/") && !next.startsWith("//");
|
|
1775
|
+
};
|
|
1776
|
+
var filterSafeHrefs = (value = {}) => Object.fromEntries(Object.entries(value).filter((entry) => typeof entry[1] === "string" && isSafePlaygroundHref(entry[1])));
|
|
1777
|
+
var sanitizeMap = (value = {}) => filterSafeHrefs(Object.fromEntries(Object.entries(value).map(([alias, url]) => [normalize(alias), normalize(url)]).filter(([alias]) => Boolean(alias))));
|
|
1778
|
+
var createMapStore = () => {
|
|
1779
|
+
let data = {};
|
|
1780
|
+
const snapshot = () => ({ ...data });
|
|
1781
|
+
const drop = (alias) => {
|
|
1782
|
+
if (data[alias] === void 0) return snapshot();
|
|
1783
|
+
const next = { ...data };
|
|
1784
|
+
delete next[alias];
|
|
1785
|
+
data = next;
|
|
1786
|
+
return snapshot();
|
|
1787
|
+
};
|
|
1788
|
+
return {
|
|
1789
|
+
get: snapshot,
|
|
1790
|
+
set: (value = {}) => {
|
|
1791
|
+
data = sanitizeMap(value);
|
|
1792
|
+
},
|
|
1793
|
+
apply: (alias, url) => {
|
|
1794
|
+
const nextAlias = normalize(alias);
|
|
1795
|
+
const nextUrl = normalize(url);
|
|
1796
|
+
if (!nextAlias) return snapshot();
|
|
1797
|
+
if (!isSafePlaygroundHref(nextUrl)) return drop(nextAlias);
|
|
1798
|
+
data = {
|
|
1799
|
+
...data,
|
|
1800
|
+
[nextAlias]: nextUrl
|
|
1801
|
+
};
|
|
1802
|
+
return snapshot();
|
|
1803
|
+
},
|
|
1804
|
+
remove: (alias) => {
|
|
1805
|
+
const nextAlias = normalize(alias);
|
|
1806
|
+
return nextAlias ? drop(nextAlias) : snapshot();
|
|
1807
|
+
}
|
|
1808
|
+
};
|
|
1809
|
+
};
|
|
1810
|
+
var siteModules = createMapStore();
|
|
1811
|
+
var siteStyles = createMapStore();
|
|
1812
|
+
var importOverrides = createMapStore();
|
|
1813
|
+
var styleOverrides = createMapStore();
|
|
1814
|
+
/**
|
|
1815
|
+
* 站点默认 import。合并时夹在内置 CDN 与实例 `builtinImportMap` 之间。
|
|
1816
|
+
*/
|
|
1817
|
+
var getPlaygroundSiteModules = siteModules.get;
|
|
1818
|
+
var setPlaygroundSiteModules = siteModules.set;
|
|
1819
|
+
/**
|
|
1820
|
+
* 站点默认预览 CSS。合并时夹在内置样式表与管理页覆盖之间。
|
|
1821
|
+
*/
|
|
1822
|
+
var getPlaygroundSiteStyles = siteStyles.get;
|
|
1823
|
+
var setPlaygroundSiteStyles = siteStyles.set;
|
|
1824
|
+
var getPlaygroundImportMapOverrides = importOverrides.get;
|
|
1825
|
+
var setPlaygroundImportMapOverrides = importOverrides.set;
|
|
1826
|
+
var applyPlaygroundImportMapOverride = importOverrides.apply;
|
|
1827
|
+
var removePlaygroundImportMapOverride = importOverrides.remove;
|
|
1828
|
+
var getPlaygroundStyleOverrides = styleOverrides.get;
|
|
1829
|
+
var setPlaygroundStyleOverrides = styleOverrides.set;
|
|
1830
|
+
var applyPlaygroundStyleOverride = styleOverrides.apply;
|
|
1831
|
+
var removePlaygroundStyleOverride = styleOverrides.remove;
|
|
1832
|
+
var clearPlaygroundMaps = () => {
|
|
1833
|
+
[
|
|
1834
|
+
siteModules,
|
|
1835
|
+
siteStyles,
|
|
1836
|
+
importOverrides,
|
|
1837
|
+
styleOverrides
|
|
1838
|
+
].forEach((store) => store.set());
|
|
1839
|
+
};
|
|
1840
|
+
//#endregion
|
|
1841
|
+
//#region packages/playground/src/preview-service.ts
|
|
1842
|
+
/** Preview iframe 内的高度服务;class 会被序列化到 iframe 执行。 */
|
|
1843
|
+
var PlaygroundService = class {
|
|
1844
|
+
target;
|
|
1845
|
+
vue;
|
|
1846
|
+
session;
|
|
1847
|
+
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1848
|
+
sequence = 0;
|
|
1849
|
+
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1850
|
+
disposed = false;
|
|
1851
|
+
manual;
|
|
1852
|
+
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1853
|
+
requests = /* @__PURE__ */ new Set();
|
|
1854
|
+
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1855
|
+
owners = /* @__PURE__ */ new Set();
|
|
1856
|
+
/**
|
|
1857
|
+
* @param target 当前预览窗口。
|
|
1858
|
+
* @param vue 与预览应用共用的 Vue 实例。
|
|
1859
|
+
*/
|
|
1860
|
+
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1861
|
+
constructor(target, vue) {
|
|
1862
|
+
this.target = target;
|
|
1863
|
+
this.vue = vue;
|
|
1864
|
+
this.session = `${Date.now()}-${Math.random()}`;
|
|
1865
|
+
this.dispose = this.dispose.bind(this);
|
|
1866
|
+
this.post("start");
|
|
1867
|
+
this.target.addEventListener("pagehide", this.dispose);
|
|
1868
|
+
}
|
|
1869
|
+
/**
|
|
1870
|
+
* 申请手动临时高度;新请求会替换上一个手动请求。
|
|
1871
|
+
* @param height iframe 最小高度。
|
|
1872
|
+
* @returns iframe 是否在超时前应用目标高度。
|
|
1873
|
+
*/
|
|
1874
|
+
enable(height) {
|
|
1875
|
+
this.validateHeight(height);
|
|
1876
|
+
this.manual?.release();
|
|
1877
|
+
this.manual = this.createRequest(height);
|
|
1878
|
+
return this.manual.ready;
|
|
1879
|
+
}
|
|
1880
|
+
/** 释放手动临时高度,不影响 `run` 创建的请求。 */
|
|
1881
|
+
disable() {
|
|
1882
|
+
this.manual?.release();
|
|
1883
|
+
this.manual = void 0;
|
|
1884
|
+
}
|
|
1885
|
+
/**
|
|
1886
|
+
* 创建等待高度后执行的事件处理函数。
|
|
1887
|
+
* @param height iframe 最小高度。
|
|
1888
|
+
* @param optionsOrHandler 可见状态配置,或最后一个 handler。
|
|
1889
|
+
* @param lastHandler 使用配置时的最后一个 handler。
|
|
1890
|
+
* @returns 保留 handler 参数和结果的异步事件处理函数。
|
|
1891
|
+
*/
|
|
1892
|
+
run(height, optionsOrHandler, lastHandler) {
|
|
1893
|
+
this.validateHeight(height);
|
|
1894
|
+
if (optionsOrHandler === void 0) return (visible) => {
|
|
1895
|
+
if (visible) return this.enable(height);
|
|
1896
|
+
this.disable();
|
|
1897
|
+
return Promise.resolve(void 0);
|
|
1898
|
+
};
|
|
1899
|
+
const visible = (typeof optionsOrHandler === "function" ? {} : optionsOrHandler).visible;
|
|
1900
|
+
if (visible !== void 0 && !this.vue.isRef(visible) && typeof visible !== "function") throw new TypeError("Playground visible must be a ref or getter");
|
|
1901
|
+
const handler = typeof optionsOrHandler === "function" ? optionsOrHandler : lastHandler ?? (this.vue.isRef(visible) ? () => {
|
|
1902
|
+
visible.value = true;
|
|
1903
|
+
} : void 0);
|
|
1904
|
+
if (typeof handler !== "function") throw new TypeError("Playground run requires a handler");
|
|
1905
|
+
let ownerDisposed = false;
|
|
1906
|
+
let current;
|
|
1907
|
+
let pending;
|
|
1908
|
+
const disposeOwner = () => {
|
|
1909
|
+
ownerDisposed = true;
|
|
1910
|
+
current?.release();
|
|
1911
|
+
this.owners.delete(disposeOwner);
|
|
1912
|
+
};
|
|
1913
|
+
this.owners.add(disposeOwner);
|
|
1914
|
+
if (this.vue.getCurrentScope()) this.vue.onScopeDispose(disposeOwner);
|
|
1915
|
+
return (...args) => {
|
|
1916
|
+
if (this.disposed || ownerDisposed) return Promise.resolve(void 0);
|
|
1917
|
+
if (pending) return pending;
|
|
1918
|
+
const request = current = this.createRequest(height);
|
|
1919
|
+
let executionFinished = false;
|
|
1920
|
+
const unlock = () => {
|
|
1921
|
+
if (executionFinished && request.released && current === request) {
|
|
1922
|
+
pending = void 0;
|
|
1923
|
+
current = void 0;
|
|
1924
|
+
}
|
|
1925
|
+
};
|
|
1926
|
+
request.closed.then(unlock);
|
|
1927
|
+
const execution = (async () => {
|
|
1928
|
+
try {
|
|
1929
|
+
if (!await request.ready || ownerDisposed || this.disposed) return void 0;
|
|
1930
|
+
if (visible) request.watch(visible);
|
|
1931
|
+
const result = await handler(...args);
|
|
1932
|
+
if (!visible || !this.vue.toValue(visible)) request.release();
|
|
1933
|
+
return result;
|
|
1934
|
+
} catch (error) {
|
|
1935
|
+
request.release();
|
|
1936
|
+
throw error;
|
|
1937
|
+
} finally {
|
|
1938
|
+
executionFinished = true;
|
|
1939
|
+
unlock();
|
|
1940
|
+
}
|
|
1941
|
+
})();
|
|
1942
|
+
pending = execution;
|
|
1943
|
+
return execution;
|
|
1944
|
+
};
|
|
1945
|
+
}
|
|
1946
|
+
/** 释放当前预览应用持有的全部高度和监听。 */
|
|
1947
|
+
/* istanbul ignore next -- 注入测试会从序列化后的 iframe class 调用该方法。 */
|
|
1948
|
+
dispose() {
|
|
1949
|
+
if (this.disposed) return;
|
|
1950
|
+
this.disposed = true;
|
|
1951
|
+
for (const disposeOwner of this.owners) disposeOwner();
|
|
1952
|
+
for (const request of this.requests) request.release();
|
|
1953
|
+
this.post("stop");
|
|
1954
|
+
this.target.removeEventListener("pagehide", this.dispose);
|
|
1955
|
+
if (this.target.$docsPlayground === this) delete this.target.$docsPlayground;
|
|
1956
|
+
}
|
|
1957
|
+
/** @param height iframe 最小高度。 */
|
|
1958
|
+
validateHeight(height) {
|
|
1959
|
+
if (!Number.isFinite(height) || height <= 0) throw new TypeError("Playground height must be a positive finite number");
|
|
1960
|
+
}
|
|
1961
|
+
/**
|
|
1962
|
+
* @param operation 请求操作。
|
|
1963
|
+
* @param id 请求标识。
|
|
1964
|
+
* @param height iframe 最小高度。
|
|
1965
|
+
*/
|
|
1966
|
+
/* istanbul ignore next -- 构造和销毁时会从序列化后的 iframe class 调用该方法。 */
|
|
1967
|
+
post(operation, id = 0, height = 0) {
|
|
1968
|
+
this.target.parent.postMessage({
|
|
1969
|
+
action: "docs:height",
|
|
1970
|
+
session: this.session,
|
|
1971
|
+
operation,
|
|
1972
|
+
id,
|
|
1973
|
+
height
|
|
1974
|
+
}, "*");
|
|
1975
|
+
}
|
|
1976
|
+
/**
|
|
1977
|
+
* @param height iframe 最小高度。
|
|
1978
|
+
* @returns 内部等待与释放句柄。
|
|
1979
|
+
*/
|
|
1980
|
+
createRequest(height) {
|
|
1981
|
+
this.validateHeight(height);
|
|
1982
|
+
const id = ++this.sequence;
|
|
1983
|
+
let released = false;
|
|
1984
|
+
let settled = false;
|
|
1985
|
+
let frame = 0;
|
|
1986
|
+
let timer = 0;
|
|
1987
|
+
let stopWatch;
|
|
1988
|
+
let resolveReady;
|
|
1989
|
+
let resolveClosed;
|
|
1990
|
+
const ready = new Promise((resolve) => {
|
|
1991
|
+
resolveReady = resolve;
|
|
1992
|
+
});
|
|
1993
|
+
const closed = new Promise((resolve) => {
|
|
1994
|
+
resolveClosed = resolve;
|
|
1995
|
+
});
|
|
1996
|
+
const stopWaiting = () => {
|
|
1997
|
+
this.target.cancelAnimationFrame(frame);
|
|
1998
|
+
if (timer) {
|
|
1999
|
+
this.target.clearTimeout(timer);
|
|
2000
|
+
timer = 0;
|
|
2001
|
+
}
|
|
2002
|
+
this.target.removeEventListener("message", onMessage);
|
|
2003
|
+
};
|
|
2004
|
+
const release = () => {
|
|
2005
|
+
if (released) return;
|
|
2006
|
+
released = true;
|
|
2007
|
+
stopWaiting();
|
|
2008
|
+
stopWatch?.();
|
|
2009
|
+
resolveReady(false);
|
|
2010
|
+
resolveClosed();
|
|
2011
|
+
this.requests.delete(request);
|
|
2012
|
+
this.post("release", id);
|
|
2013
|
+
};
|
|
2014
|
+
const check = () => {
|
|
2015
|
+
if (released) return;
|
|
2016
|
+
if (this.target.innerHeight >= height) {
|
|
2017
|
+
settled = true;
|
|
2018
|
+
stopWaiting();
|
|
2019
|
+
resolveReady(true);
|
|
2020
|
+
} else frame = this.target.requestAnimationFrame(check);
|
|
2021
|
+
};
|
|
2022
|
+
const onMessage = (event) => {
|
|
2023
|
+
const data = event.data;
|
|
2024
|
+
if (event.source !== this.target.parent || data?.action !== "docs:height:applied" || data.session !== this.session || data.id !== id || settled) return;
|
|
2025
|
+
if (!data.accepted) release();
|
|
2026
|
+
else check();
|
|
2027
|
+
};
|
|
2028
|
+
const request = {
|
|
2029
|
+
ready,
|
|
2030
|
+
closed,
|
|
2031
|
+
get released() {
|
|
2032
|
+
return released;
|
|
2033
|
+
},
|
|
2034
|
+
release,
|
|
2035
|
+
watch: (visible) => {
|
|
2036
|
+
stopWatch = this.vue.watch(() => this.vue.toValue(visible), (value) => {
|
|
2037
|
+
if (!value) release();
|
|
2038
|
+
}, { flush: "sync" });
|
|
2039
|
+
}
|
|
2040
|
+
};
|
|
2041
|
+
this.requests.add(request);
|
|
2042
|
+
if (this.disposed) release();
|
|
2043
|
+
else {
|
|
2044
|
+
this.target.addEventListener("message", onMessage);
|
|
2045
|
+
timer = this.target.setTimeout(() => {
|
|
2046
|
+
timer = 0;
|
|
2047
|
+
release();
|
|
2048
|
+
}, 2e3);
|
|
2049
|
+
this.post("enable", id, height);
|
|
2050
|
+
}
|
|
2051
|
+
return request;
|
|
2052
|
+
}
|
|
2053
|
+
};
|
|
2054
|
+
var PREVIEW_SERVICE_IMPORT_CODE = "import * as __docsPreviewVue from \"vue\"";
|
|
2055
|
+
var PREVIEW_SERVICE_USE_CODE = [
|
|
2056
|
+
`;const __docsPlayground=new (${PlaygroundService.toString()})(window,__docsPreviewVue);`,
|
|
2057
|
+
"app.provide(\"docs:playground\",__docsPlayground);",
|
|
2058
|
+
"window.$docsPlayground=__docsPlayground;",
|
|
2059
|
+
"app.mixin({beforeUnmount(){if(this===this.$root)__docsPlayground.dispose()}});"
|
|
2060
|
+
].join("");
|
|
2061
|
+
//#endregion
|
|
2062
|
+
//#region packages/playground/src/core/repl-modules.ts
|
|
2063
|
+
var { babelParse, MagicString, walkIdentifiers } = _vue_compiler_sfc_dist_compiler_sfc_esm_browser_js;
|
|
2064
|
+
var moduleSpecifier = (item) => item.type === "import-meta" || !item.specifier || item.type === "dynamic" && item.glob ? void 0 : item.specifier;
|
|
2065
|
+
/**
|
|
2066
|
+
* 发现自定义 ESM 的传递引用;缺失的 npm 包映射到 CDN,动态依赖只登记地址。
|
|
2067
|
+
* @param imports 当前预览的模块覆盖。
|
|
2068
|
+
* @param specifiers 源文件实际引用的模块。
|
|
2069
|
+
* @returns 补齐后的 import map。
|
|
2070
|
+
*/
|
|
2071
|
+
var resolveReplImports = async (imports, specifiers) => {
|
|
2072
|
+
const resolved = { ...imports };
|
|
2073
|
+
const visited = /* @__PURE__ */ new Set();
|
|
2074
|
+
const visit = async (specifier, importer) => {
|
|
2075
|
+
const url = require_css.isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier) ? new URL(specifier, importer || location.href).href : resolved[specifier] ||= require_css.resolveNpmImport(specifier);
|
|
2076
|
+
if (visited.has(url) || /\/\+esm(?:[?#]|$)/.test(url)) return;
|
|
2077
|
+
visited.add(url);
|
|
2078
|
+
const response = await fetch(url);
|
|
2079
|
+
if (!response.ok) throw new Error(`${response.status} ${url}`);
|
|
2080
|
+
const modules = (0, es_module_lexer.parse)(await response.text())[0];
|
|
2081
|
+
await Promise.all(modules.flatMap((item) => {
|
|
2082
|
+
const dependency = moduleSpecifier(item);
|
|
2083
|
+
return dependency ? [visit(dependency, url)] : [];
|
|
2084
|
+
}));
|
|
2085
|
+
};
|
|
2086
|
+
await Promise.all(specifiers.map((specifier) => visit(specifier)));
|
|
2087
|
+
return resolved;
|
|
2088
|
+
};
|
|
2089
|
+
var rewriteImportedExports = (code) => {
|
|
2090
|
+
const statements = babelParse(code, { sourceType: "module" }).program.body;
|
|
2091
|
+
const bindings = /* @__PURE__ */ new Map();
|
|
2092
|
+
const source = new MagicString(code);
|
|
2093
|
+
for (const statement of statements) {
|
|
2094
|
+
if (statement.type !== "ImportDeclaration") continue;
|
|
2095
|
+
for (const spec of statement.specifiers) {
|
|
2096
|
+
if (spec.type === "ImportNamespaceSpecifier") continue;
|
|
2097
|
+
const imported = spec.type === "ImportDefaultSpecifier" ? "default" : spec.imported.type === "Identifier" ? spec.imported.name : JSON.stringify(spec.imported.value);
|
|
2098
|
+
bindings.set(spec.local.name, {
|
|
2099
|
+
imported,
|
|
2100
|
+
source: statement.source.value,
|
|
2101
|
+
rename: (name) => source.overwrite(spec.local.start, spec.local.end, spec.type === "ImportSpecifier" && spec.imported.start === spec.local.start ? `${imported} as ${name}` : name)
|
|
2102
|
+
});
|
|
2103
|
+
}
|
|
2104
|
+
}
|
|
2105
|
+
const aliases = /* @__PURE__ */ new Map();
|
|
2106
|
+
const rewritten = /* @__PURE__ */ new Set();
|
|
2107
|
+
for (const statement of statements) {
|
|
2108
|
+
if (statement.type !== "ExportNamedDeclaration" || statement.source || statement.declaration) continue;
|
|
2109
|
+
const exports = statement.specifiers.map((spec) => {
|
|
2110
|
+
if (spec.type !== "ExportSpecifier") return "";
|
|
2111
|
+
const local = spec.local.name;
|
|
2112
|
+
const exported = spec.exported.type === "Identifier" ? spec.exported.name : JSON.stringify(spec.exported.value);
|
|
2113
|
+
const binding = bindings.get(local);
|
|
2114
|
+
if (!binding) return `export { ${local} as ${exported} };`;
|
|
2115
|
+
if (!aliases.has(local)) {
|
|
2116
|
+
const alias = `__docs_reexport_${aliases.size}__`;
|
|
2117
|
+
aliases.set(local, alias);
|
|
2118
|
+
binding.rename(alias);
|
|
2119
|
+
}
|
|
2120
|
+
return `export { ${binding.imported} as ${exported} } from ${JSON.stringify(binding.source)};`;
|
|
2121
|
+
});
|
|
2122
|
+
if (statement.specifiers.some((spec) => spec.type === "ExportSpecifier" && bindings.has(spec.local.name))) {
|
|
2123
|
+
source.overwrite(statement.start, statement.end, exports.join("\n"));
|
|
2124
|
+
rewritten.add(statement);
|
|
2125
|
+
}
|
|
2126
|
+
}
|
|
2127
|
+
for (const statement of statements) {
|
|
2128
|
+
if (statement.type === "ImportDeclaration" || rewritten.has(statement)) continue;
|
|
2129
|
+
walkIdentifiers(statement, (id, parent) => {
|
|
2130
|
+
const alias = aliases.get(id.name);
|
|
2131
|
+
if (!alias) return;
|
|
2132
|
+
if (parent?.type === "ObjectProperty" && parent.shorthand) source.appendLeft(id.end, `: ${alias}`);
|
|
2133
|
+
else source.overwrite(id.start, id.end, alias);
|
|
2134
|
+
});
|
|
2135
|
+
}
|
|
2136
|
+
return source.toString();
|
|
2137
|
+
};
|
|
2138
|
+
/**
|
|
2139
|
+
* REPL 将 ./ 引用按 src 根目录解析,编译结果需要先转成文件表中的完整路径。
|
|
2140
|
+
* @param store iframe 预览的文件和编译结果。
|
|
2141
|
+
*/
|
|
2142
|
+
var bindReplModules = (store) => {
|
|
2143
|
+
(0, vue.watch)(() => Object.values(store.files).map((file) => [
|
|
2144
|
+
file.filename,
|
|
2145
|
+
file.code,
|
|
2146
|
+
file.compiled.js,
|
|
2147
|
+
file.compiled.ssr
|
|
2148
|
+
]), () => {
|
|
2149
|
+
const files = require_css.createFileIndex(Object.fromEntries(Object.entries(store.files).map(([name, file]) => [name, file.code])));
|
|
2150
|
+
const importMap = store.getImportMap();
|
|
2151
|
+
const imports = { ...importMap.imports };
|
|
2152
|
+
let importsChanged = false;
|
|
2153
|
+
for (const file of Object.values(store.files)) for (const output of ["js", "ssr"]) {
|
|
2154
|
+
if (!file.compiled[output]) continue;
|
|
2155
|
+
try {
|
|
2156
|
+
let code = /\.[jt]sx?$/.test(file.filename) ? require_css.transformScript(file.code, file.filename, {
|
|
2157
|
+
esm: true,
|
|
2158
|
+
jsx: /\.[jt]sx$/.test(file.filename)
|
|
2159
|
+
}) : require_css.rewriteImportMeta(file.compiled[output], file.filename);
|
|
2160
|
+
code = rewriteImportedExports(code);
|
|
2161
|
+
for (const item of [...(0, es_module_lexer.parse)(code)[0]].reverse()) {
|
|
2162
|
+
const specifier = moduleSpecifier(item);
|
|
2163
|
+
if (!specifier) continue;
|
|
2164
|
+
if (require_css.isRelativeSpecifier(specifier)) {
|
|
2165
|
+
const resolved = require_css.resolveModulePath(file.filename, specifier, files);
|
|
2166
|
+
if (!resolved) continue;
|
|
2167
|
+
const target = `./${resolved.replace(/^\/?src\//, "")}`;
|
|
2168
|
+
const text = item.type === "dynamic" ? JSON.stringify(target) : target;
|
|
2169
|
+
code = code.slice(0, item.start) + text + code.slice(item.end);
|
|
2170
|
+
} else if (!/^https?:\/\//.test(specifier) && !imports[specifier]) {
|
|
2171
|
+
imports[specifier] = require_css.resolveNpmImport(specifier);
|
|
2172
|
+
importsChanged = true;
|
|
2173
|
+
}
|
|
2174
|
+
}
|
|
2175
|
+
if (file.compiled[output] !== code) file.compiled[output] = code;
|
|
2176
|
+
} catch (error) {
|
|
2177
|
+
store.errors.push(error instanceof Error ? error : String(error));
|
|
2178
|
+
}
|
|
2179
|
+
}
|
|
2180
|
+
if (importsChanged) store.setImportMap({
|
|
2181
|
+
...importMap,
|
|
2182
|
+
imports
|
|
2183
|
+
});
|
|
2184
|
+
}, { immediate: true });
|
|
2185
|
+
};
|
|
2186
|
+
//#endregion
|
|
2187
|
+
//#region packages/playground/src/core/store.ts
|
|
2188
|
+
var DOCS_LINK_IMPORT_CODE = "import { h as __docsH } from \"vue\"";
|
|
2189
|
+
var DOCS_LINK_USE_CODE = [
|
|
2190
|
+
PREVIEW_SCROLL_RESET_CODE,
|
|
2191
|
+
"app.component(\"DocsLink\",{",
|
|
2192
|
+
"props:{to:{type:String,default:\"\"}},",
|
|
2193
|
+
"setup(props,{slots}){return()=>__docsH(\"a\",{",
|
|
2194
|
+
"href:props.to,",
|
|
2195
|
+
"style:{color:\"inherit\",textDecoration:\"none\"},",
|
|
2196
|
+
"onClick(event){event.preventDefault();window.parent.postMessage({action:\"docs:navigate\",to:props.to},\"*\")}",
|
|
2197
|
+
"},slots.default?.())}",
|
|
2198
|
+
"})"
|
|
2199
|
+
].join("");
|
|
2200
|
+
var escapeHtmlAttr = (value) => value.replace(/&/gu, "&").replace(/"/gu, """).replace(/'/gu, "'").replace(/</gu, "<").replace(/>/gu, ">");
|
|
2201
|
+
/**
|
|
2202
|
+
* runtime 画布色。`previewInset` 露出的 padding、iframe chrome 和 sandbox
|
|
2203
|
+
* `html`/`body` 必须共用这一变量,暗色下 `--docs-background-color` 与
|
|
2204
|
+
* `--vc-background-color-lightest` 不同,否则会出现色带割裂。
|
|
2205
|
+
*/
|
|
2206
|
+
var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-lightest, var(--docs-background-color, #fff))";
|
|
2207
|
+
var createRuntimePreviewOptions = (cdnURL = require_css.DEFAULT_CDN_URL, options = {}) => {
|
|
2208
|
+
const previewScroller = options.previewScroller === true;
|
|
2209
|
+
const hrefs = Object.values({
|
|
2210
|
+
...require_css.createBuiltinStyles(cdnURL),
|
|
2211
|
+
...getPlaygroundSiteStyles(),
|
|
2212
|
+
...getPlaygroundStyleOverrides()
|
|
2213
|
+
});
|
|
2214
|
+
const styleBlocks = [
|
|
2215
|
+
`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
|
|
2216
|
+
"body{color:var(--vc-foreground-color,#080f20)}",
|
|
2217
|
+
...previewScroller ? [PREVIEW_SCROLLER_STYLE] : []
|
|
2218
|
+
];
|
|
2219
|
+
return {
|
|
2220
|
+
showRuntimeError: false,
|
|
2221
|
+
showRuntimeWarning: false,
|
|
2222
|
+
headHTML: [
|
|
2223
|
+
SANDBOX_RUNTIME_ERROR_CAPTURE_HTML,
|
|
2224
|
+
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
|
|
2225
|
+
...hrefs.map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
|
|
2226
|
+
"<style>",
|
|
2227
|
+
...styleBlocks,
|
|
2228
|
+
"</style>"
|
|
2229
|
+
].join("\n"),
|
|
2230
|
+
customCode: {
|
|
2231
|
+
importCode: `${DOCS_LINK_IMPORT_CODE}\n${PREVIEW_SERVICE_IMPORT_CODE}`,
|
|
2232
|
+
useCode: `${DOCS_LINK_USE_CODE}\n${PREVIEW_SERVICE_USE_CODE}`
|
|
2233
|
+
}
|
|
2234
|
+
};
|
|
2235
|
+
};
|
|
2236
|
+
var toReplFilename = (filename) => filename === "import-map.json" || filename.startsWith("src/") ? filename : `src/${filename}`;
|
|
2237
|
+
var createReplFile = (filename, code) => {
|
|
2238
|
+
const replFilename = toReplFilename(filename);
|
|
2239
|
+
return new _vue_repl.File(replFilename, code);
|
|
2240
|
+
};
|
|
2241
|
+
/**
|
|
2242
|
+
* 保留显式配置的模块,供 local 区分宿主默认与 URL 覆盖。
|
|
2243
|
+
* @param builtinImportMap 实例层 import map。
|
|
2244
|
+
* @returns 按优先级合并的显式模块地址。
|
|
2245
|
+
*/
|
|
2246
|
+
var createRuntimeImportOverrides = (builtinImportMap) => ({
|
|
2247
|
+
...getPlaygroundSiteModules(),
|
|
2248
|
+
...getPlaygroundImportMapOverrides(),
|
|
2249
|
+
...filterSafeHrefs(builtinImportMap?.imports)
|
|
2250
|
+
});
|
|
2251
|
+
/**
|
|
2252
|
+
* 默认 CDN → 站点 modules → 管理页覆盖 → 实例 builtinImportMap。
|
|
2253
|
+
* iframe import map 与直接渲染加载的是同一份地址表。
|
|
2254
|
+
* @param cdnURL
|
|
2255
|
+
* @param builtinImportMap
|
|
2256
|
+
*/
|
|
2257
|
+
var createRuntimeImports = (cdnURL = require_css.DEFAULT_CDN_URL, builtinImportMap) => ({
|
|
2258
|
+
...require_css.createBuiltinImports(cdnURL),
|
|
2259
|
+
...createRuntimeImportOverrides(builtinImportMap)
|
|
2260
|
+
});
|
|
2261
|
+
var createRuntimeStore = (files, entry, options) => {
|
|
2262
|
+
const { cdnURL, builtinImportMap, ...storeOptions } = options;
|
|
2263
|
+
const replFiles = (0, vue.ref)(Object.fromEntries(Object.entries(files).map(([filename, code]) => {
|
|
2264
|
+
const file = createReplFile(filename, code);
|
|
2265
|
+
return [file.filename, file];
|
|
2266
|
+
})));
|
|
2267
|
+
replFiles.value["import-map.json"] ??= new _vue_repl.File("import-map.json", "{}");
|
|
2268
|
+
const mainFile = (0, vue.ref)(toReplFilename(entry));
|
|
2269
|
+
const activeFilename = (0, vue.ref)(toReplFilename(entry));
|
|
2270
|
+
const imports = createRuntimeImports(cdnURL, builtinImportMap);
|
|
2271
|
+
const store = (0, _vue_repl.useStore)({
|
|
2272
|
+
...storeOptions,
|
|
2273
|
+
files: replFiles,
|
|
2274
|
+
mainFile,
|
|
2275
|
+
activeFilename,
|
|
2276
|
+
builtinImportMap: (0, vue.ref)({
|
|
2277
|
+
...builtinImportMap,
|
|
2278
|
+
imports
|
|
2279
|
+
}),
|
|
2280
|
+
template: (0, vue.ref)({
|
|
2281
|
+
welcomeSFC: files[entry],
|
|
2282
|
+
newSFC: require_css.NEW_SFC_CODE
|
|
2283
|
+
})
|
|
2284
|
+
});
|
|
2285
|
+
require_css.bindPlaygroundScss(store);
|
|
2286
|
+
const setFiles = store.setFiles.bind(store);
|
|
2287
|
+
store.setFiles = (nextFiles, nextEntry) => setFiles({
|
|
2288
|
+
"import-map.json": store.files["import-map.json"].code,
|
|
2289
|
+
...nextFiles
|
|
2290
|
+
}, nextEntry);
|
|
2291
|
+
bindReplModules(store);
|
|
2292
|
+
require_css.whenSassReady(files, () => {
|
|
2293
|
+
const specifiers = require_css.collectBareSpecifiers(files, Object.keys(files));
|
|
2294
|
+
if (!specifiers.length) {
|
|
2295
|
+
store.init();
|
|
2296
|
+
return;
|
|
2297
|
+
}
|
|
2298
|
+
store.loading = true;
|
|
2299
|
+
resolveReplImports(imports, specifiers).then((resolved) => {
|
|
2300
|
+
if (Object.keys(resolved).length !== Object.keys(imports).length) store.setImportMap({ imports: resolved }, true);
|
|
2301
|
+
store.init();
|
|
2302
|
+
}).catch((error) => {
|
|
2303
|
+
store.errors.push(error);
|
|
2304
|
+
}).finally(() => {
|
|
2305
|
+
store.loading = false;
|
|
2306
|
+
});
|
|
2307
|
+
});
|
|
2308
|
+
return store;
|
|
2309
|
+
};
|
|
2310
|
+
//#endregion
|
|
1383
2311
|
//#region packages/playground/src/core/runtime/alone/wrapper.vue?vue&type=script&setup=true&lang.ts
|
|
1384
|
-
var _hoisted_1$
|
|
2312
|
+
var _hoisted_1$3 = ["aria-label"];
|
|
1385
2313
|
var _hoisted_2$2 = { class: "docs-playground-popup__frame" };
|
|
1386
2314
|
var _hoisted_3$2 = { class: "docs-playground-popup__header" };
|
|
1387
2315
|
var _hoisted_4$2 = ["title"];
|
|
@@ -1426,7 +2354,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1426
2354
|
"portal-fulfilled"
|
|
1427
2355
|
],
|
|
1428
2356
|
setup(__props, { emit: __emit }) {
|
|
1429
|
-
const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() =>
|
|
2357
|
+
const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => local_sandbox_exports));
|
|
1430
2358
|
const props = __props;
|
|
1431
2359
|
const emit = __emit;
|
|
1432
2360
|
const { t } = (0, _deot_docs_locale.useLocale)();
|
|
@@ -1443,11 +2371,11 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1443
2371
|
const temporaryHeight = usePreviewHeightBridge(sandboxRef, availableHeight);
|
|
1444
2372
|
const sandboxKey = (0, vue.ref)(0);
|
|
1445
2373
|
const layoutTick = (0, vue.ref)(0);
|
|
1446
|
-
const runtimeError =
|
|
2374
|
+
const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
|
|
1447
2375
|
useSandboxTheme(sandboxRef);
|
|
1448
|
-
const storeErrors = (0, vue.computed)(() => props.local ? localError.value.compile : (props.store?.errors || []).map(
|
|
2376
|
+
const storeErrors = (0, vue.computed)(() => props.local ? localError.value.compile : (props.store?.errors || []).map(toErrorText).filter(Boolean).join("\n"));
|
|
1449
2377
|
const errorText = (0, vue.computed)(() => {
|
|
1450
|
-
const runtime = props.local ? localError.value.runtime : runtimeError.value ?
|
|
2378
|
+
const runtime = props.local ? localError.value.runtime : runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
|
|
1451
2379
|
return [storeErrors.value, runtime].filter(Boolean).join("\n\n");
|
|
1452
2380
|
});
|
|
1453
2381
|
const layout = (0, vue.computed)(() => {
|
|
@@ -1470,7 +2398,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1470
2398
|
const canvasStyle = (0, vue.computed)(() => ({
|
|
1471
2399
|
width: `${layout.value.canvasWidth}px`,
|
|
1472
2400
|
height: `${layout.value.canvasHeight}px`,
|
|
1473
|
-
background:
|
|
2401
|
+
background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
|
|
1474
2402
|
}));
|
|
1475
2403
|
const handleRefresh = () => {
|
|
1476
2404
|
runtimeError.value = "";
|
|
@@ -1502,7 +2430,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1502
2430
|
layoutTick.value++;
|
|
1503
2431
|
};
|
|
1504
2432
|
const handleBridgeMessage = (event) => {
|
|
1505
|
-
if (!
|
|
2433
|
+
if (!isSandboxMessage(sandboxRef.value, event)) return;
|
|
1506
2434
|
const data = event.data;
|
|
1507
2435
|
if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
|
|
1508
2436
|
emit("navigate", data.to);
|
|
@@ -1595,7 +2523,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1595
2523
|
])) : (0, vue.createCommentVNode)("v-if", true)], 4)]),
|
|
1596
2524
|
_: 1
|
|
1597
2525
|
})])
|
|
1598
|
-
])], 4)], 8, _hoisted_1$
|
|
2526
|
+
])], 4)], 8, _hoisted_1$3);
|
|
1599
2527
|
};
|
|
1600
2528
|
}
|
|
1601
2529
|
});
|
|
@@ -1607,6 +2535,935 @@ var Alone = new _deot_vc.Portal(wrapper_default, {
|
|
|
1607
2535
|
multiple: false
|
|
1608
2536
|
});
|
|
1609
2537
|
//#endregion
|
|
2538
|
+
//#region packages/playground/src/core/runtime/local/playground.ts
|
|
2539
|
+
/**
|
|
2540
|
+
* 直接渲染与页面同文档,弹层不需要临时撑高。
|
|
2541
|
+
* `run` 仍返回可调用函数,但不会申请高度,也不会改动预览尺寸。
|
|
2542
|
+
* @param vue 当前预览的 Vue,只用其中的 `isRef`。
|
|
2543
|
+
* @returns 注入给预览的 `docs:playground`。
|
|
2544
|
+
*/
|
|
2545
|
+
var createLocalPlayground = (vue) => {
|
|
2546
|
+
const run = (_height, optionsOrHandler, lastHandler) => {
|
|
2547
|
+
const visible = (typeof optionsOrHandler === "function" || optionsOrHandler == null ? {} : optionsOrHandler).visible;
|
|
2548
|
+
const handler = typeof optionsOrHandler === "function" ? optionsOrHandler : typeof lastHandler === "function" ? lastHandler : vue.isRef(visible) ? () => {
|
|
2549
|
+
visible.value = true;
|
|
2550
|
+
} : void 0;
|
|
2551
|
+
return (...args) => {
|
|
2552
|
+
if (typeof handler !== "function") return void 0;
|
|
2553
|
+
return handler(...args);
|
|
2554
|
+
};
|
|
2555
|
+
};
|
|
2556
|
+
return {
|
|
2557
|
+
enable: () => Promise.resolve(true),
|
|
2558
|
+
disable() {},
|
|
2559
|
+
dispose() {},
|
|
2560
|
+
run
|
|
2561
|
+
};
|
|
2562
|
+
};
|
|
2563
|
+
//#endregion
|
|
2564
|
+
//#region packages/playground/src/core/runtime/local/port.ts
|
|
2565
|
+
/** 只在桥接 iframe 内部转发,保证父页面收到的 source 是该 iframe。 */
|
|
2566
|
+
var LOCAL_BRIDGE_CHANNEL = "docs:local-out";
|
|
2567
|
+
var BRIDGE_INSTALLER = `
|
|
2568
|
+
if (!window.__docsLocalBridge) {
|
|
2569
|
+
window.__docsLocalBridge = true;
|
|
2570
|
+
window.addEventListener('message', function (event) {
|
|
2571
|
+
var data = event.data;
|
|
2572
|
+
if (!data || data.channel !== ${JSON.stringify(LOCAL_BRIDGE_CHANNEL)}) return;
|
|
2573
|
+
window.parent.postMessage(data.payload, '*');
|
|
2574
|
+
});
|
|
2575
|
+
}
|
|
2576
|
+
`;
|
|
2577
|
+
var LOCAL_BRIDGE_SRCDOC = `<!doctype html><html><head></head><body><script>${BRIDGE_INSTALLER}<\/script></body></html>`;
|
|
2578
|
+
/**
|
|
2579
|
+
* 在同源空白 iframe 里安装转发脚本。调用发生在 iframe realm,父页面看到的 source 才是它。
|
|
2580
|
+
* @param iframe 用作消息身份的空白 iframe。
|
|
2581
|
+
* @returns 脚本是否已经装上。
|
|
2582
|
+
*/
|
|
2583
|
+
var installLocalBridge = (iframe) => {
|
|
2584
|
+
const win = iframe.contentWindow;
|
|
2585
|
+
if (!win || win.__docsLocalBridge) return Boolean(win?.__docsLocalBridge);
|
|
2586
|
+
win.eval(BRIDGE_INSTALLER);
|
|
2587
|
+
return Boolean(win.__docsLocalBridge);
|
|
2588
|
+
};
|
|
2589
|
+
/**
|
|
2590
|
+
* 满足 PlaygroundService 现有 Window 调用的预览窗口。
|
|
2591
|
+
* 出站消息经 iframe 转发,入站回复再交回服务,协议仍是 docs:height / docs:navigate。
|
|
2592
|
+
*/
|
|
2593
|
+
var LocalPreviewPort = class {
|
|
2594
|
+
iframe;
|
|
2595
|
+
parent;
|
|
2596
|
+
listeners = /* @__PURE__ */ new Map();
|
|
2597
|
+
constructor(iframe) {
|
|
2598
|
+
this.iframe = iframe;
|
|
2599
|
+
this.parent = { postMessage: (data) => {
|
|
2600
|
+
this.iframe.contentWindow?.postMessage({
|
|
2601
|
+
channel: LOCAL_BRIDGE_CHANNEL,
|
|
2602
|
+
payload: data
|
|
2603
|
+
}, "*");
|
|
2604
|
+
} };
|
|
2605
|
+
}
|
|
2606
|
+
get contentWindow() {
|
|
2607
|
+
return this.iframe.contentWindow;
|
|
2608
|
+
}
|
|
2609
|
+
get innerHeight() {
|
|
2610
|
+
const fromWindow = this.iframe.contentWindow?.innerHeight ?? 0;
|
|
2611
|
+
if (fromWindow > 0) return fromWindow;
|
|
2612
|
+
return this.iframe.clientHeight || this.iframe.parentElement?.clientHeight || 0;
|
|
2613
|
+
}
|
|
2614
|
+
addEventListener(type, listener) {
|
|
2615
|
+
const win = this.iframe.contentWindow;
|
|
2616
|
+
if (!win) return;
|
|
2617
|
+
if (type !== "message") {
|
|
2618
|
+
win.addEventListener(type, listener);
|
|
2619
|
+
return;
|
|
2620
|
+
}
|
|
2621
|
+
const wrapped = (event) => {
|
|
2622
|
+
const message = event;
|
|
2623
|
+
const data = message.data;
|
|
2624
|
+
if (data && data.channel === "docs:local-out") return;
|
|
2625
|
+
listener({
|
|
2626
|
+
data: message.data,
|
|
2627
|
+
source: this.parent
|
|
2628
|
+
});
|
|
2629
|
+
};
|
|
2630
|
+
this.listeners.set(listener, wrapped);
|
|
2631
|
+
win.addEventListener("message", wrapped);
|
|
2632
|
+
}
|
|
2633
|
+
removeEventListener(type, listener) {
|
|
2634
|
+
const win = this.iframe.contentWindow;
|
|
2635
|
+
if (!win) return;
|
|
2636
|
+
const wrapped = this.listeners.get(listener);
|
|
2637
|
+
if (wrapped) {
|
|
2638
|
+
this.listeners.delete(listener);
|
|
2639
|
+
win.removeEventListener(type, wrapped);
|
|
2640
|
+
return;
|
|
2641
|
+
}
|
|
2642
|
+
win.removeEventListener(type, listener);
|
|
2643
|
+
}
|
|
2644
|
+
requestAnimationFrame(callback) {
|
|
2645
|
+
return window.requestAnimationFrame(callback);
|
|
2646
|
+
}
|
|
2647
|
+
cancelAnimationFrame(handle) {
|
|
2648
|
+
window.cancelAnimationFrame(handle);
|
|
2649
|
+
}
|
|
2650
|
+
setTimeout(handler, timeout, ...args) {
|
|
2651
|
+
return window.setTimeout(handler, timeout, ...args);
|
|
2652
|
+
}
|
|
2653
|
+
clearTimeout(handle) {
|
|
2654
|
+
window.clearTimeout(handle);
|
|
2655
|
+
}
|
|
2656
|
+
};
|
|
2657
|
+
//#endregion
|
|
2658
|
+
//#region packages/playground/src/core/runtime/local/format-error.ts
|
|
2659
|
+
/**
|
|
2660
|
+
* 空 reject(例如弹层取消)不要渲染成红条。
|
|
2661
|
+
* @param error 运行时抛出的值。
|
|
2662
|
+
* @returns 可展示的错误文本;空取消返回空字符串。
|
|
2663
|
+
*/
|
|
2664
|
+
var formatPlaygroundRuntimeError = (error) => {
|
|
2665
|
+
if (error == null) return "";
|
|
2666
|
+
const raw = typeof error === "object" && "message" in error ? error.message : error;
|
|
2667
|
+
if (raw == null || raw === "") return "";
|
|
2668
|
+
const text = String(raw);
|
|
2669
|
+
if (text === "undefined" || text === "null") return "";
|
|
2670
|
+
return text;
|
|
2671
|
+
};
|
|
2672
|
+
//#endregion
|
|
2673
|
+
//#region packages/playground/src/core/runtime/local/builtins.ts
|
|
2674
|
+
var loaders = {
|
|
2675
|
+
"vue": () => import("vue"),
|
|
2676
|
+
"vue-router": () => import("vue-router"),
|
|
2677
|
+
"pinia": async () => pinia,
|
|
2678
|
+
"@deot/helper": () => import("@deot/helper"),
|
|
2679
|
+
"@deot/helper-cache": () => import("@deot/helper-cache"),
|
|
2680
|
+
"@deot/helper-device": () => import("@deot/helper-device"),
|
|
2681
|
+
"@deot/helper-dom": () => import("@deot/helper-dom"),
|
|
2682
|
+
"@deot/helper-emitter": () => import("@deot/helper-emitter"),
|
|
2683
|
+
"@deot/helper-fp": () => import("@deot/helper-fp"),
|
|
2684
|
+
"@deot/helper-is": () => import("@deot/helper-is"),
|
|
2685
|
+
"@deot/helper-load": () => import("@deot/helper-load"),
|
|
2686
|
+
"@deot/helper-resize": () => import("@deot/helper-resize"),
|
|
2687
|
+
"@deot/helper-route": () => import("@deot/helper-route"),
|
|
2688
|
+
"@deot/helper-scheduler": () => import("@deot/helper-scheduler"),
|
|
2689
|
+
"@deot/helper-shared": () => import("@deot/helper-shared"),
|
|
2690
|
+
"@deot/helper-unicode": () => import("@deot/helper-unicode"),
|
|
2691
|
+
"@deot/helper-utils": () => import("@deot/helper-utils"),
|
|
2692
|
+
"@deot/helper-validator": () => import("@deot/helper-validator"),
|
|
2693
|
+
"@deot/helper-wheel": () => import("@deot/helper-wheel"),
|
|
2694
|
+
"@deot/http-client": () => import("@deot/http-client"),
|
|
2695
|
+
"@deot/http-core": () => import("@deot/http-core"),
|
|
2696
|
+
"@deot/http-hooks": () => import("@deot/http-hooks"),
|
|
2697
|
+
"@deot/http": () => import("@deot/http"),
|
|
2698
|
+
"@deot/vc": async () => _deot_vc,
|
|
2699
|
+
"@deot/vc-components": async () => _deot_vc_components,
|
|
2700
|
+
"@deot/vc-hooks": async () => _deot_vc_hooks,
|
|
2701
|
+
"@deot/vc-locale": () => import("@deot/vc-locale"),
|
|
2702
|
+
"lodash-es": () => import("lodash-es"),
|
|
2703
|
+
"echarts": () => import("echarts"),
|
|
2704
|
+
"photoswipe": () => import("photoswipe"),
|
|
2705
|
+
"jszip": () => import("jszip"),
|
|
2706
|
+
"jspdf": () => import("jspdf"),
|
|
2707
|
+
"dayjs": async () => (await import("dayjs")).default
|
|
2708
|
+
};
|
|
2709
|
+
var cache = /* @__PURE__ */ new Map();
|
|
2710
|
+
/** 直接渲染可从宿主包注入的说明符;与 Vue 无关的大型依赖按需加载。 */
|
|
2711
|
+
var localBuiltinIds = new Set(Object.keys(loaders));
|
|
2712
|
+
var ensureLocalBuiltin = (id) => {
|
|
2713
|
+
const loader = loaders[id];
|
|
2714
|
+
if (!loader) return Promise.reject(/* @__PURE__ */ new Error(`[Playground] 没有本地模块 "${id}"`));
|
|
2715
|
+
let pending = cache.get(id);
|
|
2716
|
+
if (!pending) {
|
|
2717
|
+
pending = loader();
|
|
2718
|
+
cache.set(id, pending);
|
|
2719
|
+
}
|
|
2720
|
+
return pending;
|
|
2721
|
+
};
|
|
2722
|
+
//#endregion
|
|
2723
|
+
//#region packages/playground/src/core/runtime/local/modules.ts
|
|
2724
|
+
var SKIP_COPY_KEYS = /* @__PURE__ */ new Set([
|
|
2725
|
+
"prototype",
|
|
2726
|
+
"caller",
|
|
2727
|
+
"arguments"
|
|
2728
|
+
]);
|
|
2729
|
+
var toHostModule = (ns) => {
|
|
2730
|
+
if (ns == null || typeof ns !== "object" && typeof ns !== "function") return {
|
|
2731
|
+
__esModule: true,
|
|
2732
|
+
default: ns
|
|
2733
|
+
};
|
|
2734
|
+
const source = ns;
|
|
2735
|
+
const mod = { __esModule: true };
|
|
2736
|
+
const assignKey = (key) => {
|
|
2737
|
+
if (SKIP_COPY_KEYS.has(key) || key === "__esModule") return;
|
|
2738
|
+
try {
|
|
2739
|
+
mod[key] = source[key];
|
|
2740
|
+
} catch {}
|
|
2741
|
+
};
|
|
2742
|
+
try {
|
|
2743
|
+
Object.keys(source).forEach(assignKey);
|
|
2744
|
+
} catch {}
|
|
2745
|
+
try {
|
|
2746
|
+
Object.getOwnPropertyNames(source).forEach(assignKey);
|
|
2747
|
+
} catch {}
|
|
2748
|
+
if (!("default" in mod) || mod.default === void 0) mod.default = source.default !== void 0 ? source.default : source;
|
|
2749
|
+
return mod;
|
|
2750
|
+
};
|
|
2751
|
+
var lookupHostModule = (id, modules) => {
|
|
2752
|
+
if (Object.prototype.hasOwnProperty.call(modules, id)) return toHostModule(modules[id]);
|
|
2753
|
+
return null;
|
|
2754
|
+
};
|
|
2755
|
+
var pickNestedExport = (rootMod, rest) => {
|
|
2756
|
+
if (!rest) return void 0;
|
|
2757
|
+
const parts = rest.split("/").filter(Boolean);
|
|
2758
|
+
let current = rootMod;
|
|
2759
|
+
for (const part of parts) {
|
|
2760
|
+
if (current == null || typeof current !== "object" && typeof current !== "function") return;
|
|
2761
|
+
const record = current;
|
|
2762
|
+
if (!(part in record)) return void 0;
|
|
2763
|
+
current = record[part];
|
|
2764
|
+
}
|
|
2765
|
+
return current;
|
|
2766
|
+
};
|
|
2767
|
+
/**
|
|
2768
|
+
* 先精确匹配,再从右往左剥路径,把剩余段当成导出属性。
|
|
2769
|
+
* 模块表只来自当前 Playground,不写入全局注册表。
|
|
2770
|
+
* @param id 裸模块说明符。
|
|
2771
|
+
* @param modules 当前 Playground 的模块表。
|
|
2772
|
+
* @returns 可被 `require` 使用的模块;找不到时返回 null。
|
|
2773
|
+
*/
|
|
2774
|
+
var resolveHostModule = (id, modules) => {
|
|
2775
|
+
const exact = lookupHostModule(id, modules);
|
|
2776
|
+
if (exact) return exact;
|
|
2777
|
+
let cursor = id;
|
|
2778
|
+
while (true) {
|
|
2779
|
+
const slash = cursor.lastIndexOf("/");
|
|
2780
|
+
if (slash <= 0) break;
|
|
2781
|
+
const parent = cursor.slice(0, slash);
|
|
2782
|
+
const rest = id.slice(parent.length + 1);
|
|
2783
|
+
const rootMod = lookupHostModule(parent, modules);
|
|
2784
|
+
if (rootMod) {
|
|
2785
|
+
const nested = pickNestedExport(rootMod, rest);
|
|
2786
|
+
if (nested !== void 0) return toHostModule(nested);
|
|
2787
|
+
}
|
|
2788
|
+
cursor = parent;
|
|
2789
|
+
}
|
|
2790
|
+
return null;
|
|
2791
|
+
};
|
|
2792
|
+
var HOST_VUE_SPECIFIERS = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
|
|
2793
|
+
var VUE_DEPENDENT_BUILTINS = /* @__PURE__ */ new Set([
|
|
2794
|
+
"vue/server-renderer",
|
|
2795
|
+
"vue-router",
|
|
2796
|
+
"pinia",
|
|
2797
|
+
"@deot/vc",
|
|
2798
|
+
"@deot/vc-components",
|
|
2799
|
+
"@deot/vc-hooks",
|
|
2800
|
+
"@deot/vc-locale"
|
|
2801
|
+
]);
|
|
2802
|
+
var messageOf = (error) => error instanceof Error ? error.message : String(error);
|
|
2803
|
+
/**
|
|
2804
|
+
* 找到 import map 里能覆盖该说明符的键。子路径没有独立 URL 时回退到父包。
|
|
2805
|
+
* @param id 裸模块说明符。
|
|
2806
|
+
* @param imports 合并后的 import map。
|
|
2807
|
+
* @returns 命中的 import map 键;没有地址时返回 null。
|
|
2808
|
+
*/
|
|
2809
|
+
var resolveImportTarget = (id, imports) => {
|
|
2810
|
+
if (imports[id]) return id;
|
|
2811
|
+
let cursor = id;
|
|
2812
|
+
while (true) {
|
|
2813
|
+
const slash = cursor.lastIndexOf("/");
|
|
2814
|
+
if (slash <= 0) return null;
|
|
2815
|
+
const parent = cursor.slice(0, slash);
|
|
2816
|
+
if (imports[parent]) return parent;
|
|
2817
|
+
cursor = parent;
|
|
2818
|
+
}
|
|
2819
|
+
};
|
|
2820
|
+
var prefersLocalBuiltin = (id, imports, overrides = new Set(Object.keys(imports))) => {
|
|
2821
|
+
if (!localBuiltinIds.has(id) && !HOST_VUE_SPECIFIERS.has(id)) return false;
|
|
2822
|
+
if (overrides.has(id)) return false;
|
|
2823
|
+
return !VUE_DEPENDENT_BUILTINS.has(id) || !overrides.has("vue");
|
|
2824
|
+
};
|
|
2825
|
+
/**
|
|
2826
|
+
* 内置依赖默认注入宿主副本,显式 URL 按模块覆盖,包括与默认 CDN 相同的地址。
|
|
2827
|
+
* @param specifiers 本次预览用到的裸模块说明符。
|
|
2828
|
+
* @param imports 合并后的 import map。
|
|
2829
|
+
* @param builtins 宿主 Vue 与 vue-router。
|
|
2830
|
+
* @param builtins.vue 当前页面的 Vue 模块。
|
|
2831
|
+
* @param builtins.vueRouter 打包进来的 vue-router,可被 import map 覆盖。
|
|
2832
|
+
* @param loader 按 URL 加载远程模块。
|
|
2833
|
+
* @param overrides 显式配置的模块名,与自动补齐的默认地址区分。
|
|
2834
|
+
* @returns 模块表和加载错误。
|
|
2835
|
+
*/
|
|
2836
|
+
var loadLocalModules = async (specifiers, imports, builtins, loader, overrides = new Set(Object.keys(imports))) => {
|
|
2837
|
+
const modules = {
|
|
2838
|
+
"vue": builtins.vue,
|
|
2839
|
+
"vue-router": builtins.vueRouter
|
|
2840
|
+
};
|
|
2841
|
+
const errors = [];
|
|
2842
|
+
const targets = /* @__PURE__ */ new Set();
|
|
2843
|
+
const localIds = /* @__PURE__ */ new Set();
|
|
2844
|
+
specifiers.forEach((specifier) => {
|
|
2845
|
+
let local = false;
|
|
2846
|
+
if (prefersLocalBuiltin(specifier, imports, overrides)) localIds.add(specifier);
|
|
2847
|
+
else {
|
|
2848
|
+
let cursor = specifier;
|
|
2849
|
+
while (true) {
|
|
2850
|
+
const slash = cursor.lastIndexOf("/");
|
|
2851
|
+
if (slash <= 0) break;
|
|
2852
|
+
const parent = cursor.slice(0, slash);
|
|
2853
|
+
if (prefersLocalBuiltin(parent, imports, overrides)) {
|
|
2854
|
+
localIds.add(parent);
|
|
2855
|
+
local = true;
|
|
2856
|
+
break;
|
|
2857
|
+
}
|
|
2858
|
+
cursor = parent;
|
|
2859
|
+
}
|
|
2860
|
+
}
|
|
2861
|
+
const target = resolveImportTarget(specifier, imports);
|
|
2862
|
+
if (target && prefersLocalBuiltin(target, imports, overrides)) localIds.add(target);
|
|
2863
|
+
else if (target) targets.add(target);
|
|
2864
|
+
else if (!local && !localIds.has(specifier)) {
|
|
2865
|
+
imports[specifier] = require_css.resolveNpmImport(specifier);
|
|
2866
|
+
targets.add(specifier);
|
|
2867
|
+
}
|
|
2868
|
+
});
|
|
2869
|
+
await Promise.all([...localIds].map(async (id) => {
|
|
2870
|
+
if (id === "vue" || id === "vue-router") return;
|
|
2871
|
+
if (id === "vue/server-renderer") {
|
|
2872
|
+
modules[id] = builtins.vue;
|
|
2873
|
+
return;
|
|
2874
|
+
}
|
|
2875
|
+
modules[id] = await ensureLocalBuiltin(id);
|
|
2876
|
+
}));
|
|
2877
|
+
for (const id of targets) {
|
|
2878
|
+
const url = imports[id];
|
|
2879
|
+
if (!url || prefersLocalBuiltin(id, imports, overrides)) continue;
|
|
2880
|
+
try {
|
|
2881
|
+
modules[id] = await loader(url);
|
|
2882
|
+
} catch (error) {
|
|
2883
|
+
errors.push(`[Playground] 无法加载模块 "${id}" (${url}): ${messageOf(error)}`);
|
|
2884
|
+
}
|
|
2885
|
+
}
|
|
2886
|
+
return {
|
|
2887
|
+
modules,
|
|
2888
|
+
errors
|
|
2889
|
+
};
|
|
2890
|
+
};
|
|
2891
|
+
//#endregion
|
|
2892
|
+
//#region packages/playground/src/core/runtime/local/vue-guard.ts
|
|
2893
|
+
/**
|
|
2894
|
+
* 给 files 注入选定的 Vue,但 `createApp().mount` 不会卸掉页面。
|
|
2895
|
+
* 防护按本次 link 创建,多个 Playground 互不覆盖。
|
|
2896
|
+
* @param capture 本次链接收集到的根组件、局部组件和 provide。
|
|
2897
|
+
* @param vue 当前预览选定的 Vue。
|
|
2898
|
+
* @returns 带防护的 Vue 模块。
|
|
2899
|
+
*/
|
|
2900
|
+
var createGuardedVue = (capture, vue$4 = vue) => {
|
|
2901
|
+
const createApp = (rootComponent, rootProps) => {
|
|
2902
|
+
const fakeApp = {
|
|
2903
|
+
_component: rootComponent,
|
|
2904
|
+
_props: rootProps,
|
|
2905
|
+
config: {
|
|
2906
|
+
errorHandler: null,
|
|
2907
|
+
warnHandler: null,
|
|
2908
|
+
globalProperties: {}
|
|
2909
|
+
},
|
|
2910
|
+
_context: {
|
|
2911
|
+
provides: Object.create(null),
|
|
2912
|
+
components: Object.create(null),
|
|
2913
|
+
directives: Object.create(null),
|
|
2914
|
+
mixins: []
|
|
2915
|
+
},
|
|
2916
|
+
use() {
|
|
2917
|
+
return fakeApp;
|
|
2918
|
+
},
|
|
2919
|
+
mixin(mixin) {
|
|
2920
|
+
fakeApp._context.mixins.push(mixin);
|
|
2921
|
+
return fakeApp;
|
|
2922
|
+
},
|
|
2923
|
+
component(name, component) {
|
|
2924
|
+
if (component) {
|
|
2925
|
+
fakeApp._context.components[name] = component;
|
|
2926
|
+
return fakeApp;
|
|
2927
|
+
}
|
|
2928
|
+
return fakeApp._context.components[name];
|
|
2929
|
+
},
|
|
2930
|
+
directive() {
|
|
2931
|
+
return fakeApp;
|
|
2932
|
+
},
|
|
2933
|
+
provide(key, value) {
|
|
2934
|
+
fakeApp._context.provides[key] = value;
|
|
2935
|
+
return fakeApp;
|
|
2936
|
+
},
|
|
2937
|
+
mount() {
|
|
2938
|
+
capture.components = { ...fakeApp._context.components };
|
|
2939
|
+
capture.provides = { ...fakeApp._context.provides };
|
|
2940
|
+
capture.mountedComponent = vue$4.defineComponent({
|
|
2941
|
+
name: "PlaygroundCapturedApp",
|
|
2942
|
+
components: fakeApp._context.components,
|
|
2943
|
+
setup() {
|
|
2944
|
+
Reflect.ownKeys(fakeApp._context.provides).forEach((key) => {
|
|
2945
|
+
vue$4.provide(key, fakeApp._context.provides[key]);
|
|
2946
|
+
});
|
|
2947
|
+
return () => vue$4.h(rootComponent, rootProps || null);
|
|
2948
|
+
}
|
|
2949
|
+
});
|
|
2950
|
+
return capture.mountedComponent;
|
|
2951
|
+
},
|
|
2952
|
+
unmount() {},
|
|
2953
|
+
onUnmount() {
|
|
2954
|
+
return fakeApp;
|
|
2955
|
+
}
|
|
2956
|
+
};
|
|
2957
|
+
return fakeApp;
|
|
2958
|
+
};
|
|
2959
|
+
return new Proxy(vue$4, { get(target, prop, receiver) {
|
|
2960
|
+
if (prop === "createApp" || prop === "createSSRApp") return createApp;
|
|
2961
|
+
if (prop === "default") return receiver;
|
|
2962
|
+
return Reflect.get(target, prop, receiver);
|
|
2963
|
+
} });
|
|
2964
|
+
};
|
|
2965
|
+
//#endregion
|
|
2966
|
+
//#region packages/playground/src/core/runtime/local/linker.ts
|
|
2967
|
+
/**
|
|
2968
|
+
* 在当前页面链接编译结果,返回入口组件。
|
|
2969
|
+
* 给选定的 Vue 加上 mount 防护,避免字符串入口卸掉页面。
|
|
2970
|
+
* @param compiled 浏览器编译结果。
|
|
2971
|
+
* @param files 当前 Playground 文件表。
|
|
2972
|
+
* @param options 可选的宿主模块表。
|
|
2973
|
+
* @returns 入口组件、样式和链接错误。
|
|
2974
|
+
*/
|
|
2975
|
+
var linkPlayground = (compiled, files, options = {}) => {
|
|
2976
|
+
const errors = [...compiled.errors || []];
|
|
2977
|
+
if (!compiled.entry || errors.length) return {
|
|
2978
|
+
component: null,
|
|
2979
|
+
css: compiled.css || [],
|
|
2980
|
+
errors
|
|
2981
|
+
};
|
|
2982
|
+
const capture = {
|
|
2983
|
+
mountedComponent: null,
|
|
2984
|
+
components: {},
|
|
2985
|
+
provides: {}
|
|
2986
|
+
};
|
|
2987
|
+
const modules = { ...options.modules || {} };
|
|
2988
|
+
modules.vue = createGuardedVue(capture, modules.vue || vue);
|
|
2989
|
+
const fileIndex = require_css.createFileIndex(files);
|
|
2990
|
+
const root = require_css.getCommonRoot([...fileIndex.keys()]);
|
|
2991
|
+
const cache = /* @__PURE__ */ new Map();
|
|
2992
|
+
const visiting = /* @__PURE__ */ new Set();
|
|
2993
|
+
const requireFn = (fromFilename) => (id) => {
|
|
2994
|
+
if (require_css.isRelativeSpecifier(id)) {
|
|
2995
|
+
const resolved = require_css.resolveModulePath(fromFilename, id, fileIndex);
|
|
2996
|
+
if (!resolved) throw new Error(`[Playground] 无法解析相对模块 "${id}"(来自 ${fromFilename})`);
|
|
2997
|
+
/* istanbul ignore if -- 公共根已包含全部 files,正常解析不会逃出 */
|
|
2998
|
+
if (!require_css.isInsideRoot(resolved, root)) throw new Error(`[Playground] 模块逃出虚拟根: ${resolved}`);
|
|
2999
|
+
return loadModule(resolved);
|
|
3000
|
+
}
|
|
3001
|
+
const host = resolveHostModule(id, modules);
|
|
3002
|
+
if (host) return host;
|
|
3003
|
+
throw new Error(`[Playground] 未注册的模块 "${id}"。请在 import map 中提供可加载的地址。`);
|
|
3004
|
+
};
|
|
3005
|
+
const loadModule = (filename) => {
|
|
3006
|
+
const key = require_css.normalizeVirtualPath(filename);
|
|
3007
|
+
if (cache.has(key)) return cache.get(key);
|
|
3008
|
+
if (visiting.has(key)) return cache.get(key);
|
|
3009
|
+
const mod = compiled.modules[key];
|
|
3010
|
+
if (!mod) throw new Error(`[Playground] 缺少编译模块: ${key}`);
|
|
3011
|
+
const module = { exports: {} };
|
|
3012
|
+
cache.set(key, module.exports);
|
|
3013
|
+
visiting.add(key);
|
|
3014
|
+
try {
|
|
3015
|
+
new Function("require", "module", "exports", mod.js)(requireFn(key), module, module.exports);
|
|
3016
|
+
cache.set(key, module.exports);
|
|
3017
|
+
return module.exports;
|
|
3018
|
+
} catch (error) {
|
|
3019
|
+
const message = error instanceof Error ? error.message : String(error);
|
|
3020
|
+
errors.push(`[Playground] 执行失败 ${key}: ${message}`);
|
|
3021
|
+
throw error;
|
|
3022
|
+
} finally {
|
|
3023
|
+
visiting.delete(key);
|
|
3024
|
+
}
|
|
3025
|
+
};
|
|
3026
|
+
try {
|
|
3027
|
+
const entryExports = loadModule(compiled.entry);
|
|
3028
|
+
let component = entryExports?.default ?? entryExports;
|
|
3029
|
+
if (capture.mountedComponent) component = capture.mountedComponent;
|
|
3030
|
+
/* istanbul ignore if -- 空入口在编译阶段已经报错 */
|
|
3031
|
+
if (!component) {
|
|
3032
|
+
errors.push("[Playground] 入口必须 export default 组件,或调用 createApp(App).mount()");
|
|
3033
|
+
return {
|
|
3034
|
+
component: null,
|
|
3035
|
+
css: compiled.css || [],
|
|
3036
|
+
errors
|
|
3037
|
+
};
|
|
3038
|
+
}
|
|
3039
|
+
return {
|
|
3040
|
+
component,
|
|
3041
|
+
css: compiled.css || [],
|
|
3042
|
+
errors
|
|
3043
|
+
};
|
|
3044
|
+
} catch (error) {
|
|
3045
|
+
if (!errors.length) errors.push(error instanceof Error ? error.message : String(error));
|
|
3046
|
+
return {
|
|
3047
|
+
component: null,
|
|
3048
|
+
css: compiled.css || [],
|
|
3049
|
+
errors
|
|
3050
|
+
};
|
|
3051
|
+
}
|
|
3052
|
+
};
|
|
3053
|
+
//#endregion
|
|
3054
|
+
//#region packages/playground/src/core/runtime/local/remote.ts
|
|
3055
|
+
var HOST_VUE = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
|
|
3056
|
+
var moduleUrl = (url) => new URL(url, globalThis.location?.href).href;
|
|
3057
|
+
/**
|
|
3058
|
+
* 把 CDN 上的 ESM 先拉完整张依赖图,再在当前页面里执行。
|
|
3059
|
+
* 裸导入优先走 import map,缺失的 npm 依赖回退到 CDN ESM;import() 按需加载。
|
|
3060
|
+
* @param imports 合并后的 import map。
|
|
3061
|
+
* @param builtins 宿主 Vue 与 vue-router。
|
|
3062
|
+
* @param overrides 显式配置的模块名,与自动补齐的默认地址区分。
|
|
3063
|
+
* @param importModule 浏览器原生 ESM 加载器。
|
|
3064
|
+
* @returns 按 URL 加载并执行远程模块的加载器。
|
|
3065
|
+
*/
|
|
3066
|
+
var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imports)), importModule = (url) => import(
|
|
3067
|
+
/* @vite-ignore */
|
|
3068
|
+
url
|
|
3069
|
+
)) => {
|
|
3070
|
+
const hostModules = {
|
|
3071
|
+
"vue": builtins.vue,
|
|
3072
|
+
"vue-router": builtins.vueRouter
|
|
3073
|
+
};
|
|
3074
|
+
const pendingBuiltins = /* @__PURE__ */ new Set();
|
|
3075
|
+
const texts = /* @__PURE__ */ new Map();
|
|
3076
|
+
const evaluated = /* @__PURE__ */ new Map();
|
|
3077
|
+
const crawled = /* @__PURE__ */ new Set();
|
|
3078
|
+
const nativeModules = /* @__PURE__ */ new Map();
|
|
3079
|
+
const loadNative = (url) => {
|
|
3080
|
+
let pending = nativeModules.get(url);
|
|
3081
|
+
if (!pending) {
|
|
3082
|
+
pending = importModule(url).then((module) => {
|
|
3083
|
+
const exports = toHostModule(module);
|
|
3084
|
+
evaluated.set(url, exports);
|
|
3085
|
+
return exports;
|
|
3086
|
+
});
|
|
3087
|
+
nativeModules.set(url, pending);
|
|
3088
|
+
}
|
|
3089
|
+
return pending;
|
|
3090
|
+
};
|
|
3091
|
+
const localBuiltinId = (id) => {
|
|
3092
|
+
if (imports[id] && !prefersLocalBuiltin(id, imports, overrides)) return null;
|
|
3093
|
+
if (prefersLocalBuiltin(id, imports, overrides)) return id;
|
|
3094
|
+
let cursor = id;
|
|
3095
|
+
while (true) {
|
|
3096
|
+
const slash = cursor.lastIndexOf("/");
|
|
3097
|
+
if (slash <= 0) return null;
|
|
3098
|
+
const parent = cursor.slice(0, slash);
|
|
3099
|
+
if (prefersLocalBuiltin(parent, imports, overrides)) return parent;
|
|
3100
|
+
cursor = parent;
|
|
3101
|
+
}
|
|
3102
|
+
};
|
|
3103
|
+
const dependencySpecifier = (from, specifier) => {
|
|
3104
|
+
if (require_css.isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier)) {
|
|
3105
|
+
const url = new URL(specifier, from);
|
|
3106
|
+
const match = url.origin === "https://cdn.jsdelivr.net" ? url.pathname.match(/^\/npm\/((?:@[^/]+\/)?[^/@]+)(?:@[^/]+)?\/\+esm$/) : null;
|
|
3107
|
+
if (match && (imports[match[1]] || localBuiltinIds.has(match[1]))) return match[1];
|
|
3108
|
+
return url.href;
|
|
3109
|
+
}
|
|
3110
|
+
return specifier;
|
|
3111
|
+
};
|
|
3112
|
+
const dependencyUrl = (from, id) => {
|
|
3113
|
+
const specifier = dependencySpecifier(from, id);
|
|
3114
|
+
if (/^https?:\/\//.test(specifier)) return specifier;
|
|
3115
|
+
if (imports[specifier] && !prefersLocalBuiltin(specifier, imports, overrides)) return moduleUrl(imports[specifier]);
|
|
3116
|
+
if (HOST_VUE.has(specifier) && prefersLocalBuiltin(specifier, imports, overrides)) return null;
|
|
3117
|
+
let cursor = specifier;
|
|
3118
|
+
while (cursor) {
|
|
3119
|
+
if (localBuiltinIds.has(cursor) && prefersLocalBuiltin(cursor, imports, overrides)) {
|
|
3120
|
+
pendingBuiltins.add(cursor);
|
|
3121
|
+
return null;
|
|
3122
|
+
}
|
|
3123
|
+
const slash = cursor.lastIndexOf("/");
|
|
3124
|
+
if (slash <= 0) break;
|
|
3125
|
+
cursor = cursor.slice(0, slash);
|
|
3126
|
+
}
|
|
3127
|
+
const target = imports[specifier] ? specifier : resolveImportTarget(specifier, imports);
|
|
3128
|
+
if (!target) {
|
|
3129
|
+
imports[specifier] = require_css.resolveNpmImport(specifier);
|
|
3130
|
+
return imports[specifier];
|
|
3131
|
+
}
|
|
3132
|
+
return moduleUrl(imports[target]);
|
|
3133
|
+
};
|
|
3134
|
+
const crawl = async (url) => {
|
|
3135
|
+
if (!overrides.size && /\/\+esm(?:[?#]|$)/.test(url)) {
|
|
3136
|
+
await loadNative(url);
|
|
3137
|
+
return;
|
|
3138
|
+
}
|
|
3139
|
+
if (crawled.has(url)) return;
|
|
3140
|
+
crawled.add(url);
|
|
3141
|
+
const response = await fetch(url);
|
|
3142
|
+
if (!response.ok) throw new Error(`${response.status} ${url}`);
|
|
3143
|
+
const text = await response.text();
|
|
3144
|
+
await (0, es_module_lexer.init)();
|
|
3145
|
+
const [specifiers] = (0, es_module_lexer.parse)(text);
|
|
3146
|
+
let source = text;
|
|
3147
|
+
for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
|
|
3148
|
+
texts.set(url, source);
|
|
3149
|
+
await Promise.all(specifiers.map(async (item) => {
|
|
3150
|
+
if (item.type !== "static" && item.type !== "reexport-star") return;
|
|
3151
|
+
const next = dependencyUrl(url, item.specifier);
|
|
3152
|
+
if (next) await crawl(next);
|
|
3153
|
+
}));
|
|
3154
|
+
};
|
|
3155
|
+
const requireFrom = (from) => (specifier) => {
|
|
3156
|
+
const id = dependencySpecifier(from, specifier);
|
|
3157
|
+
if (HOST_VUE.has(id) && prefersLocalBuiltin(id, imports, overrides)) return toHostModule(builtins.vue);
|
|
3158
|
+
const builtinId = localBuiltinId(id);
|
|
3159
|
+
if (builtinId) return toHostModule(hostModules[builtinId]);
|
|
3160
|
+
if (require_css.isRelativeSpecifier(id) || /^https?:\/\//.test(id)) return evaluate(dependencyUrl(from, id));
|
|
3161
|
+
const target = imports[id] ? id : resolveImportTarget(id, imports);
|
|
3162
|
+
if (!target || !imports[target]) throw new Error(`[Playground] 未注册的模块 "${id}"`);
|
|
3163
|
+
const loaded = evaluate(moduleUrl(imports[target]));
|
|
3164
|
+
if (target === id) return loaded;
|
|
3165
|
+
if (!resolveHostModule(id, { [target]: loaded }))
|
|
3166
|
+
/* istanbul ignore next -- 父包没有对应导出时才拒绝 */
|
|
3167
|
+
throw new Error(`[Playground] 未注册的模块 "${id}"`);
|
|
3168
|
+
return loaded;
|
|
3169
|
+
};
|
|
3170
|
+
const evaluate = (url) => {
|
|
3171
|
+
if (evaluated.has(url)) return evaluated.get(url);
|
|
3172
|
+
const text = texts.get(url);
|
|
3173
|
+
if (text == null) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
|
|
3174
|
+
const cjs = (0, sucrase.transform)(require_css.rewriteImportMeta(text, url), {
|
|
3175
|
+
transforms: ["imports"],
|
|
3176
|
+
disableESTransforms: true,
|
|
3177
|
+
production: true,
|
|
3178
|
+
filePath: url
|
|
3179
|
+
}).code;
|
|
3180
|
+
const module = { exports: {} };
|
|
3181
|
+
evaluated.set(url, module.exports);
|
|
3182
|
+
new Function("require", "module", "exports", "__import", cjs)(requireFrom(url), module, module.exports, async (id) => {
|
|
3183
|
+
const next = dependencyUrl(url, id);
|
|
3184
|
+
if (next) await load(next);
|
|
3185
|
+
else {
|
|
3186
|
+
const builtinId = localBuiltinId(dependencySpecifier(url, id));
|
|
3187
|
+
if (builtinId && !(builtinId in hostModules)) hostModules[builtinId] = await ensureLocalBuiltin(builtinId);
|
|
3188
|
+
}
|
|
3189
|
+
return requireFrom(url)(id);
|
|
3190
|
+
});
|
|
3191
|
+
evaluated.set(url, module.exports);
|
|
3192
|
+
return module.exports;
|
|
3193
|
+
};
|
|
3194
|
+
const loading = /* @__PURE__ */ new Map();
|
|
3195
|
+
const load = (sourceUrl) => {
|
|
3196
|
+
const url = moduleUrl(sourceUrl);
|
|
3197
|
+
const pending = loading.get(url);
|
|
3198
|
+
if (pending) return pending;
|
|
3199
|
+
const task = (async () => {
|
|
3200
|
+
await crawl(url);
|
|
3201
|
+
await Promise.all([...pendingBuiltins].map(async (id) => {
|
|
3202
|
+
if (id === "vue" || id === "vue-router") return;
|
|
3203
|
+
hostModules[id] = await ensureLocalBuiltin(id);
|
|
3204
|
+
}));
|
|
3205
|
+
return evaluate(url);
|
|
3206
|
+
})();
|
|
3207
|
+
loading.set(url, task);
|
|
3208
|
+
return task;
|
|
3209
|
+
};
|
|
3210
|
+
return { load };
|
|
3211
|
+
};
|
|
3212
|
+
//#endregion
|
|
3213
|
+
//#region packages/playground/src/core/runtime/local/local-sandbox.vue?vue&type=script&setup=true&lang.ts
|
|
3214
|
+
var _hoisted_1$2 = ["srcdoc"];
|
|
3215
|
+
var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
|
|
3216
|
+
__name: "local-sandbox",
|
|
3217
|
+
props: {
|
|
3218
|
+
files: {},
|
|
3219
|
+
entry: {},
|
|
3220
|
+
options: {},
|
|
3221
|
+
previewScroller: {
|
|
3222
|
+
type: Boolean,
|
|
3223
|
+
default: false
|
|
3224
|
+
},
|
|
3225
|
+
clearConsole: {
|
|
3226
|
+
type: Boolean,
|
|
3227
|
+
default: false
|
|
3228
|
+
},
|
|
3229
|
+
autoHeight: {
|
|
3230
|
+
type: Boolean,
|
|
3231
|
+
default: false
|
|
3232
|
+
}
|
|
3233
|
+
},
|
|
3234
|
+
emits: ["error"],
|
|
3235
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
3236
|
+
const props = __props;
|
|
3237
|
+
const emit = __emit;
|
|
3238
|
+
const bridgeSrcdoc = LOCAL_BRIDGE_SRCDOC;
|
|
3239
|
+
const containerEl = (0, vue.ref)(null);
|
|
3240
|
+
const bridgeEl = (0, vue.ref)(null);
|
|
3241
|
+
const mountEl = (0, vue.ref)(null);
|
|
3242
|
+
const compileError = (0, vue.ref)("");
|
|
3243
|
+
const runtimeError = (0, vue.ref)("");
|
|
3244
|
+
const messageSource = (0, vue.shallowRef)(null);
|
|
3245
|
+
let port = null;
|
|
3246
|
+
let previewApp = null;
|
|
3247
|
+
let version = 0;
|
|
3248
|
+
let pendingMount = null;
|
|
3249
|
+
const styleId = `docs-local-${Math.random().toString(36).slice(2, 10)}`;
|
|
3250
|
+
const publishError = () => {
|
|
3251
|
+
emit("error", {
|
|
3252
|
+
compile: compileError.value,
|
|
3253
|
+
runtime: runtimeError.value
|
|
3254
|
+
});
|
|
3255
|
+
};
|
|
3256
|
+
(0, vue.watch)([compileError, runtimeError], publishError);
|
|
3257
|
+
const createDocsLink = (preview, vue$2) => vue$2.defineComponent({
|
|
3258
|
+
name: "DocsLink",
|
|
3259
|
+
props: { to: {
|
|
3260
|
+
type: String,
|
|
3261
|
+
default: ""
|
|
3262
|
+
} },
|
|
3263
|
+
setup(linkProps, { slots }) {
|
|
3264
|
+
return () => vue$2.h("a", {
|
|
3265
|
+
href: linkProps.to,
|
|
3266
|
+
style: {
|
|
3267
|
+
color: "inherit",
|
|
3268
|
+
textDecoration: "none"
|
|
3269
|
+
},
|
|
3270
|
+
onClick(event) {
|
|
3271
|
+
event.preventDefault();
|
|
3272
|
+
preview.parent.postMessage({
|
|
3273
|
+
action: "docs:navigate",
|
|
3274
|
+
to: linkProps.to
|
|
3275
|
+
});
|
|
3276
|
+
}
|
|
3277
|
+
}, slots.default?.());
|
|
3278
|
+
}
|
|
3279
|
+
});
|
|
3280
|
+
const destroyPreview = () => {
|
|
3281
|
+
previewApp?.unmount();
|
|
3282
|
+
previewApp = null;
|
|
3283
|
+
require_css.removeStyle(styleId);
|
|
3284
|
+
};
|
|
3285
|
+
const mountPreview = (job, preview) => {
|
|
3286
|
+
if (!mountEl.value) return;
|
|
3287
|
+
const { component, vue: vue$3, scroller, css } = job;
|
|
3288
|
+
destroyPreview();
|
|
3289
|
+
require_css.injectStyle(styleId, css);
|
|
3290
|
+
if (props.clearConsole) console.clear();
|
|
3291
|
+
const app = vue$3.createApp({
|
|
3292
|
+
name: "LocalSandboxRoot",
|
|
3293
|
+
setup() {
|
|
3294
|
+
const service = createLocalPlayground(vue$3);
|
|
3295
|
+
vue$3.provide("docs:playground", service);
|
|
3296
|
+
vue$3.onErrorCaptured((error) => {
|
|
3297
|
+
const message = formatPlaygroundRuntimeError(error);
|
|
3298
|
+
if (message) runtimeError.value = message;
|
|
3299
|
+
return false;
|
|
3300
|
+
});
|
|
3301
|
+
vue$3.onBeforeUnmount(() => service.dispose());
|
|
3302
|
+
return () => {
|
|
3303
|
+
const content = vue$3.h(component);
|
|
3304
|
+
if (!scroller) return content;
|
|
3305
|
+
return vue$3.h(scroller, {
|
|
3306
|
+
height: "100%",
|
|
3307
|
+
native: false,
|
|
3308
|
+
autoResize: true,
|
|
3309
|
+
showBar: true,
|
|
3310
|
+
contentClass: PREVIEW_SCROLL_CONTENT_CLASS
|
|
3311
|
+
}, { default: () => content });
|
|
3312
|
+
};
|
|
3313
|
+
}
|
|
3314
|
+
});
|
|
3315
|
+
app.component("DocsLink", createDocsLink(preview, vue$3));
|
|
3316
|
+
app.config.errorHandler = (error) => {
|
|
3317
|
+
const message = formatPlaygroundRuntimeError(error);
|
|
3318
|
+
if (message) runtimeError.value = message;
|
|
3319
|
+
};
|
|
3320
|
+
app.mount(mountEl.value);
|
|
3321
|
+
previewApp = app;
|
|
3322
|
+
};
|
|
3323
|
+
const ensurePort = () => {
|
|
3324
|
+
const iframe = bridgeEl.value;
|
|
3325
|
+
if (!iframe?.contentWindow) return null;
|
|
3326
|
+
try {
|
|
3327
|
+
if (!installLocalBridge(iframe)) return null;
|
|
3328
|
+
} catch {
|
|
3329
|
+
return null;
|
|
3330
|
+
}
|
|
3331
|
+
port ??= new LocalPreviewPort(iframe);
|
|
3332
|
+
messageSource.value = iframe.contentWindow;
|
|
3333
|
+
return port;
|
|
3334
|
+
};
|
|
3335
|
+
const tryMount = async () => {
|
|
3336
|
+
const job = pendingMount;
|
|
3337
|
+
/* istanbul ignore if -- 桥接 iframe 尚未就绪或编译已被取代 */
|
|
3338
|
+
if (!job || job.version !== version) return;
|
|
3339
|
+
const preview = ensurePort();
|
|
3340
|
+
/* istanbul ignore if -- 挂载点在编译完成时已经存在 */
|
|
3341
|
+
if (!preview || !mountEl.value) return;
|
|
3342
|
+
await (0, vue.nextTick)();
|
|
3343
|
+
/* istanbul ignore if -- 桥接 iframe 尚未就绪或编译已被取代 */
|
|
3344
|
+
if (pendingMount !== job || !mountEl.value) return;
|
|
3345
|
+
pendingMount = null;
|
|
3346
|
+
mountPreview(job, preview);
|
|
3347
|
+
};
|
|
3348
|
+
const run = async () => {
|
|
3349
|
+
const current = ++version;
|
|
3350
|
+
pendingMount = null;
|
|
3351
|
+
compileError.value = "";
|
|
3352
|
+
runtimeError.value = "";
|
|
3353
|
+
publishError();
|
|
3354
|
+
destroyPreview();
|
|
3355
|
+
try {
|
|
3356
|
+
const { compilePlayground } = await Promise.resolve().then(() => require("./compile-29EUKPOy.cjs"));
|
|
3357
|
+
/* istanbul ignore if -- 并发编译时只保留最后一次 */
|
|
3358
|
+
if (current !== version) return;
|
|
3359
|
+
const compiled = await compilePlayground(props.files, { entry: props.entry });
|
|
3360
|
+
/* istanbul ignore if -- 并发编译时只保留最后一次 */
|
|
3361
|
+
if (current !== version) return;
|
|
3362
|
+
if (compiled.errors.length || !compiled.entry) {
|
|
3363
|
+
compileError.value = compiled.errors.join("\n") || "[Playground] 未能确定入口";
|
|
3364
|
+
publishError();
|
|
3365
|
+
return;
|
|
3366
|
+
}
|
|
3367
|
+
const imports = createRuntimeImports(props.options.cdnURL, props.options.builtinImportMap);
|
|
3368
|
+
const overrides = new Set(Object.keys(createRuntimeImportOverrides(props.options.builtinImportMap)));
|
|
3369
|
+
const specifiers = require_css.collectBareSpecifiers(props.files, require_css.collectReachableFilenames(props.files, compiled.entry));
|
|
3370
|
+
specifiers.push("vue");
|
|
3371
|
+
if (props.previewScroller === true) specifiers.push("@deot/vc");
|
|
3372
|
+
const remote = createRemoteLoader(imports, {
|
|
3373
|
+
vue,
|
|
3374
|
+
vueRouter: vue_router
|
|
3375
|
+
}, overrides);
|
|
3376
|
+
const loaded = await loadLocalModules(specifiers, imports, {
|
|
3377
|
+
vue,
|
|
3378
|
+
vueRouter: vue_router
|
|
3379
|
+
}, (url) => remote.load(url), overrides);
|
|
3380
|
+
/* istanbul ignore if -- 并发编译时只保留最后一次 */
|
|
3381
|
+
if (current !== version) return;
|
|
3382
|
+
if (loaded.errors.length) {
|
|
3383
|
+
compileError.value = loaded.errors.join("\n");
|
|
3384
|
+
publishError();
|
|
3385
|
+
return;
|
|
3386
|
+
}
|
|
3387
|
+
const linked = linkPlayground(compiled, props.files, { modules: loaded.modules });
|
|
3388
|
+
/* istanbul ignore if -- 并发编译时只保留最后一次 */
|
|
3389
|
+
if (current !== version) return;
|
|
3390
|
+
if (linked.errors.length || !linked.component) {
|
|
3391
|
+
compileError.value = (linked.errors.length ? linked.errors : ["[Playground] 未能解析入口组件"]).join("\n");
|
|
3392
|
+
publishError();
|
|
3393
|
+
return;
|
|
3394
|
+
}
|
|
3395
|
+
pendingMount = {
|
|
3396
|
+
component: linked.component,
|
|
3397
|
+
vue: loaded.modules.vue,
|
|
3398
|
+
scroller: props.previewScroller === true ? loaded.modules["@deot/vc"].Scroller : void 0,
|
|
3399
|
+
css: linked.css,
|
|
3400
|
+
version: current
|
|
3401
|
+
};
|
|
3402
|
+
await tryMount();
|
|
3403
|
+
} catch (error) {
|
|
3404
|
+
/* istanbul ignore next -- 编译器自身异常才进入,普通错误走结果里的 errors */
|
|
3405
|
+
if (current !== version) return;
|
|
3406
|
+
/* istanbul ignore next -- 同上,只兜底编译器抛错 */
|
|
3407
|
+
compileError.value = error instanceof Error ? error.message : String(error);
|
|
3408
|
+
/* istanbul ignore next -- 同上,只兜底编译器抛错 */
|
|
3409
|
+
publishError();
|
|
3410
|
+
}
|
|
3411
|
+
};
|
|
3412
|
+
const handleBridgeLoad = () => {
|
|
3413
|
+
tryMount();
|
|
3414
|
+
};
|
|
3415
|
+
(0, vue.onMounted)(() => {
|
|
3416
|
+
run();
|
|
3417
|
+
});
|
|
3418
|
+
(0, vue.watch)(() => [
|
|
3419
|
+
props.files,
|
|
3420
|
+
props.entry,
|
|
3421
|
+
props.options,
|
|
3422
|
+
props.previewScroller
|
|
3423
|
+
], () => {
|
|
3424
|
+
if (!containerEl.value) return;
|
|
3425
|
+
run();
|
|
3426
|
+
}, { deep: true });
|
|
3427
|
+
(0, vue.onBeforeUnmount)(() => {
|
|
3428
|
+
version += 1;
|
|
3429
|
+
pendingMount = null;
|
|
3430
|
+
destroyPreview();
|
|
3431
|
+
});
|
|
3432
|
+
__expose({
|
|
3433
|
+
container: containerEl,
|
|
3434
|
+
messageSource,
|
|
3435
|
+
local: true,
|
|
3436
|
+
refresh: () => {
|
|
3437
|
+
run();
|
|
3438
|
+
}
|
|
3439
|
+
});
|
|
3440
|
+
return (_ctx, _cache) => {
|
|
3441
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
3442
|
+
ref_key: "containerEl",
|
|
3443
|
+
ref: containerEl,
|
|
3444
|
+
class: "docs-playground-local"
|
|
3445
|
+
}, [(0, vue.createElementVNode)("iframe", {
|
|
3446
|
+
ref_key: "bridgeEl",
|
|
3447
|
+
ref: bridgeEl,
|
|
3448
|
+
class: "docs-playground-local__bridge",
|
|
3449
|
+
tabindex: "-1",
|
|
3450
|
+
"aria-hidden": "true",
|
|
3451
|
+
title: "",
|
|
3452
|
+
srcdoc: (0, vue.unref)(bridgeSrcdoc),
|
|
3453
|
+
onLoad: handleBridgeLoad
|
|
3454
|
+
}, null, 40, _hoisted_1$2), (0, vue.createElementVNode)("div", {
|
|
3455
|
+
ref_key: "mountEl",
|
|
3456
|
+
ref: mountEl,
|
|
3457
|
+
class: (0, vue.normalizeClass)(["docs-playground-local__mount", { "docs-playground-local__mount--auto": __props.autoHeight }])
|
|
3458
|
+
}, null, 2)], 512);
|
|
3459
|
+
};
|
|
3460
|
+
}
|
|
3461
|
+
});
|
|
3462
|
+
//#endregion
|
|
3463
|
+
//#region packages/playground/src/core/runtime/local/local-sandbox.vue
|
|
3464
|
+
var local_sandbox_exports = /* @__PURE__ */ require_css.__exportAll({ default: () => local_sandbox_default });
|
|
3465
|
+
var local_sandbox_default = local_sandbox_vue_vue_type_script_setup_true_lang_default;
|
|
3466
|
+
//#endregion
|
|
1610
3467
|
//#region packages/playground/src/core/runtime/runtime.vue?vue&type=script&setup=true&lang.ts
|
|
1611
3468
|
var _hoisted_1$1 = {
|
|
1612
3469
|
key: 0,
|
|
@@ -1672,7 +3529,6 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1672
3529
|
"navigate"
|
|
1673
3530
|
],
|
|
1674
3531
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
1675
|
-
const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-0ojvBQPO.cjs")).then((n) => n.local_sandbox_exports));
|
|
1676
3532
|
const props = __props;
|
|
1677
3533
|
const { locale, t } = (0, _deot_docs_locale.useLocale)();
|
|
1678
3534
|
const displayTitle = (0, vue.computed)(() => props.title.trim());
|
|
@@ -1685,7 +3541,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1685
3541
|
const emit = __emit;
|
|
1686
3542
|
const joinCode = (...values) => values.filter(Boolean).join("\n");
|
|
1687
3543
|
const mergePreviewOptions = (extraHeadHTML) => {
|
|
1688
|
-
const runtimePreviewOptions =
|
|
3544
|
+
const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL, { previewScroller: props.previewScroller });
|
|
1689
3545
|
return {
|
|
1690
3546
|
...runtimePreviewOptions,
|
|
1691
3547
|
...props.previewOptions,
|
|
@@ -1695,8 +3551,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1695
3551
|
extraHeadHTML
|
|
1696
3552
|
].filter(Boolean).join("\n"),
|
|
1697
3553
|
customCode: {
|
|
1698
|
-
importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode, props.previewScroller ?
|
|
1699
|
-
useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ?
|
|
3554
|
+
importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode, props.previewScroller ? PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? PREVIEW_SCROLLER_IMPORT_CODE : void 0),
|
|
3555
|
+
useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ? PREVIEW_SCROLLER_USE_CODE : void 0)
|
|
1700
3556
|
}
|
|
1701
3557
|
};
|
|
1702
3558
|
};
|
|
@@ -1710,8 +3566,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1710
3566
|
"SSR": false
|
|
1711
3567
|
}.MODE !== "development";
|
|
1712
3568
|
const copyValue = (0, vue.computed)(() => props.files[props.entry] || "");
|
|
1713
|
-
const store = props.local ? null :
|
|
1714
|
-
const storeReady = (0, vue.computed)(() => store && !store.loading && Object.values(store.files).every((file) =>
|
|
3569
|
+
const store = props.local ? null : createRuntimeStore(props.files, props.entry, props.options);
|
|
3570
|
+
const storeReady = (0, vue.computed)(() => store && !store.loading && Object.values(store.files).every((file) => require_css.isIgnoredFilename(file.filename) || !/\.(?:vue|[jt]sx?|json|s[ac]ss)$/.test(file.filename) || !file.code.trim() || !!file.compiled.js));
|
|
1715
3571
|
const sandboxRef = (0, vue.ref)(null);
|
|
1716
3572
|
const localError = (0, vue.ref)({
|
|
1717
3573
|
compile: "",
|
|
@@ -1722,21 +3578,21 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1722
3578
|
};
|
|
1723
3579
|
const temporaryHeight = usePreviewHeightBridge(sandboxRef);
|
|
1724
3580
|
const sandboxKey = (0, vue.ref)(0);
|
|
1725
|
-
const runtimeHeight =
|
|
1726
|
-
const runtimeError =
|
|
3581
|
+
const runtimeHeight = useSandboxAutoHeight(sandboxRef);
|
|
3582
|
+
const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
|
|
1727
3583
|
useSandboxTheme(sandboxRef);
|
|
1728
3584
|
const compileErrorText = (0, vue.computed)(() => {
|
|
1729
3585
|
if (props.local) return localError.value.compile;
|
|
1730
|
-
return (store?.errors || []).map(
|
|
3586
|
+
return (store?.errors || []).map(toErrorText).filter(Boolean).join("\n");
|
|
1731
3587
|
});
|
|
1732
3588
|
const errorText = (0, vue.computed)(() => {
|
|
1733
3589
|
let runtime = "";
|
|
1734
3590
|
if (props.local) runtime = localError.value.runtime;
|
|
1735
|
-
else if (runtimeError.value) runtime =
|
|
3591
|
+
else if (runtimeError.value) runtime = formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip"));
|
|
1736
3592
|
return [compileErrorText.value, runtime].filter(Boolean).join("\n\n");
|
|
1737
3593
|
});
|
|
1738
3594
|
const handleBridgeMessage = (event) => {
|
|
1739
|
-
if (!
|
|
3595
|
+
if (!isSandboxMessage(sandboxRef.value, event)) return;
|
|
1740
3596
|
const data = event.data;
|
|
1741
3597
|
if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
|
|
1742
3598
|
emit("navigate", data.to);
|
|
@@ -1817,7 +3673,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1817
3673
|
return {
|
|
1818
3674
|
height: `${resolvePreviewBoxHeight(desiredViewportHeight.value, vertical)}px`,
|
|
1819
3675
|
padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`,
|
|
1820
|
-
background:
|
|
3676
|
+
background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
|
|
1821
3677
|
};
|
|
1822
3678
|
});
|
|
1823
3679
|
const stylelessStyle = (0, vue.computed)(() => errorText.value ? void 0 : { height: `${desiredViewportHeight.value}px` });
|
|
@@ -1837,27 +3693,27 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1837
3693
|
const apply = () => {
|
|
1838
3694
|
if (store) switch (action.type) {
|
|
1839
3695
|
case "update": {
|
|
1840
|
-
const file = store.files[
|
|
3696
|
+
const file = store.files[toReplFilename(action.filename)];
|
|
1841
3697
|
if (file) file.code = files[action.filename];
|
|
1842
3698
|
break;
|
|
1843
3699
|
}
|
|
1844
3700
|
case "create":
|
|
1845
|
-
store.addFile(
|
|
3701
|
+
store.addFile(createReplFile(action.filename, files[action.filename]));
|
|
1846
3702
|
break;
|
|
1847
3703
|
case "rename":
|
|
1848
|
-
store.renameFile(
|
|
3704
|
+
store.renameFile(toReplFilename(action.previousFilename), toReplFilename(action.filename));
|
|
1849
3705
|
break;
|
|
1850
3706
|
case "delete":
|
|
1851
|
-
store.setActive(
|
|
1852
|
-
delete store.files[
|
|
3707
|
+
store.setActive(toReplFilename(entry));
|
|
3708
|
+
delete store.files[toReplFilename(action.filename)];
|
|
1853
3709
|
break;
|
|
1854
3710
|
case "entry":
|
|
1855
|
-
store.mainFile =
|
|
1856
|
-
store.setActive(
|
|
3711
|
+
store.mainFile = toReplFilename(entry);
|
|
3712
|
+
store.setActive(toReplFilename(entry));
|
|
1857
3713
|
}
|
|
1858
3714
|
emit("files-change", files, entry, action);
|
|
1859
3715
|
};
|
|
1860
|
-
if (store)
|
|
3716
|
+
if (store) require_css.whenSassReady(files, apply);
|
|
1861
3717
|
else apply();
|
|
1862
3718
|
};
|
|
1863
3719
|
const handleEditor = () => {
|
|
@@ -1870,7 +3726,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1870
3726
|
return localError.value.compile ? [localError.value.compile] : [];
|
|
1871
3727
|
},
|
|
1872
3728
|
onFilesChange: handleFilesChange,
|
|
1873
|
-
onActiveChange: (filename) => store?.setActive(
|
|
3729
|
+
onActiveChange: (filename) => store?.setActive(toReplFilename(filename))
|
|
1874
3730
|
});
|
|
1875
3731
|
};
|
|
1876
3732
|
const handleInlineRefresh = () => {
|
|
@@ -1921,8 +3777,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1921
3777
|
if (!entry || entry === syncedEntry) return;
|
|
1922
3778
|
syncedEntry = entry;
|
|
1923
3779
|
if (!store) return;
|
|
1924
|
-
store.mainFile =
|
|
1925
|
-
store.setActive(
|
|
3780
|
+
store.mainFile = toReplFilename(entry);
|
|
3781
|
+
store.setActive(toReplFilename(entry));
|
|
1926
3782
|
});
|
|
1927
3783
|
(0, vue.watch)(() => props.activeView, (view) => {
|
|
1928
3784
|
if (view !== "runtime") handleClosePopup();
|
|
@@ -1947,7 +3803,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1947
3803
|
}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_1$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
|
|
1948
3804
|
class: "docs-playground-runtime__viewport",
|
|
1949
3805
|
style: (0, vue.normalizeStyle)(viewportStyle.value)
|
|
1950
|
-
}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)(
|
|
3806
|
+
}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)(local_sandbox_default, {
|
|
1951
3807
|
key: 0,
|
|
1952
3808
|
ref_key: "sandboxRef",
|
|
1953
3809
|
ref: sandboxRef,
|
|
@@ -2009,7 +3865,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2009
3865
|
}, [(0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("div", {
|
|
2010
3866
|
class: "docs-playground-runtime__viewport",
|
|
2011
3867
|
style: (0, vue.normalizeStyle)(viewportStyle.value)
|
|
2012
|
-
}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)(
|
|
3868
|
+
}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)(local_sandbox_default, {
|
|
2013
3869
|
key: sandboxKey.value,
|
|
2014
3870
|
ref_key: "sandboxRef",
|
|
2015
3871
|
ref: sandboxRef,
|
|
@@ -2107,7 +3963,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2107
3963
|
const locale = (0, vue.computed)(() => props.locale || inheritedLocale.locale.value);
|
|
2108
3964
|
(0, _deot_docs_locale.provideLocale)(locale);
|
|
2109
3965
|
const { t } = (0, _deot_docs_locale.useLocale)(locale);
|
|
2110
|
-
const initialFiles = Object.keys(props.files).length ? { ...props.files } : { [
|
|
3966
|
+
const initialFiles = Object.keys(props.files).length ? { ...props.files } : { [require_css.DEFAULT_ENTRY]: props.modelValue || require_css.NEW_SFC_CODE };
|
|
2111
3967
|
const initialEntry = props.entry && initialFiles[props.entry] !== void 0 ? props.entry : Object.keys(initialFiles)[0];
|
|
2112
3968
|
const sourceFiles = (0, vue.ref)(initialFiles);
|
|
2113
3969
|
const currentEntry = (0, vue.ref)(initialEntry);
|
|
@@ -2367,35 +4223,35 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2367
4223
|
});
|
|
2368
4224
|
//#endregion
|
|
2369
4225
|
exports.CodePreview = code_preview_default;
|
|
2370
|
-
exports.DEFAULT_CDN_URL =
|
|
4226
|
+
exports.DEFAULT_CDN_URL = require_css.DEFAULT_CDN_URL;
|
|
2371
4227
|
exports.Editor = Editor;
|
|
2372
|
-
exports.PREVIEW_SCROLLER_USE_CODE =
|
|
2373
|
-
exports.PREVIEW_SCROLL_CONTENT_CLASS =
|
|
2374
|
-
exports.PREVIEW_SCROLL_HTML_CLASS =
|
|
4228
|
+
exports.PREVIEW_SCROLLER_USE_CODE = PREVIEW_SCROLLER_USE_CODE;
|
|
4229
|
+
exports.PREVIEW_SCROLL_CONTENT_CLASS = PREVIEW_SCROLL_CONTENT_CLASS;
|
|
4230
|
+
exports.PREVIEW_SCROLL_HTML_CLASS = PREVIEW_SCROLL_HTML_CLASS;
|
|
2375
4231
|
exports.Playground = playground_default;
|
|
2376
|
-
exports.PlaygroundService =
|
|
2377
|
-
exports.applyPlaygroundImportMapOverride =
|
|
2378
|
-
exports.applyPlaygroundStyleOverride =
|
|
2379
|
-
exports.clearPlaygroundMaps =
|
|
2380
|
-
exports.createBuiltinImports =
|
|
2381
|
-
exports.createBuiltinStyles =
|
|
2382
|
-
exports.createRuntimePreviewOptions =
|
|
2383
|
-
exports.getPlaygroundImportMapOverrides =
|
|
2384
|
-
exports.getPlaygroundSiteModules =
|
|
2385
|
-
exports.getPlaygroundSiteStyles =
|
|
2386
|
-
exports.getPlaygroundStyleOverrides =
|
|
4232
|
+
exports.PlaygroundService = PlaygroundService;
|
|
4233
|
+
exports.applyPlaygroundImportMapOverride = applyPlaygroundImportMapOverride;
|
|
4234
|
+
exports.applyPlaygroundStyleOverride = applyPlaygroundStyleOverride;
|
|
4235
|
+
exports.clearPlaygroundMaps = clearPlaygroundMaps;
|
|
4236
|
+
exports.createBuiltinImports = require_css.createBuiltinImports;
|
|
4237
|
+
exports.createBuiltinStyles = require_css.createBuiltinStyles;
|
|
4238
|
+
exports.createRuntimePreviewOptions = createRuntimePreviewOptions;
|
|
4239
|
+
exports.getPlaygroundImportMapOverrides = getPlaygroundImportMapOverrides;
|
|
4240
|
+
exports.getPlaygroundSiteModules = getPlaygroundSiteModules;
|
|
4241
|
+
exports.getPlaygroundSiteStyles = getPlaygroundSiteStyles;
|
|
4242
|
+
exports.getPlaygroundStyleOverrides = getPlaygroundStyleOverrides;
|
|
2387
4243
|
exports.highlightCode = highlightCode;
|
|
2388
4244
|
exports.highlightCodeByLanguage = highlightCodeByLanguage;
|
|
2389
|
-
exports.isSafePlaygroundHref =
|
|
2390
|
-
exports.normalizeCdnURL =
|
|
4245
|
+
exports.isSafePlaygroundHref = isSafePlaygroundHref;
|
|
4246
|
+
exports.normalizeCdnURL = require_css.normalizeCdnURL;
|
|
2391
4247
|
exports.registerVueHighlight = registerVueHighlight;
|
|
2392
|
-
exports.removePlaygroundImportMapOverride =
|
|
2393
|
-
exports.removePlaygroundStyleOverride =
|
|
4248
|
+
exports.removePlaygroundImportMapOverride = removePlaygroundImportMapOverride;
|
|
4249
|
+
exports.removePlaygroundStyleOverride = removePlaygroundStyleOverride;
|
|
2394
4250
|
exports.resolveHighlightLanguage = resolveHighlightLanguage;
|
|
2395
4251
|
exports.resolvePlaygroundTitleId = resolvePlaygroundTitleId;
|
|
2396
|
-
exports.setPlaygroundImportMapOverrides =
|
|
2397
|
-
exports.setPlaygroundSiteModules =
|
|
2398
|
-
exports.setPlaygroundSiteStyles =
|
|
2399
|
-
exports.setPlaygroundStyleOverrides =
|
|
4252
|
+
exports.setPlaygroundImportMapOverrides = setPlaygroundImportMapOverrides;
|
|
4253
|
+
exports.setPlaygroundSiteModules = setPlaygroundSiteModules;
|
|
4254
|
+
exports.setPlaygroundSiteStyles = setPlaygroundSiteStyles;
|
|
4255
|
+
exports.setPlaygroundStyleOverrides = setPlaygroundStyleOverrides;
|
|
2400
4256
|
exports.slugifyPlaygroundTitle = slugifyPlaygroundTitle;
|
|
2401
4257
|
exports.vueHighlight = vueHighlight;
|