@deot/docs-playground 1.1.2 → 1.1.3
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 +2 -0
- package/dist/cdn-Czve5_9b.cjs +94 -0
- package/dist/cdn-DEvdGJu2.js +53 -0
- package/dist/compile-Bw7v7QE-.js +333 -0
- package/dist/compile-DSMuM8zl.cjs +333 -0
- package/dist/files-C5UMzYxA.js +178 -0
- package/dist/files-D5LNOtjp.cjs +192 -0
- package/dist/index.cjs +195 -1029
- package/dist/index.d.ts +4 -2
- package/dist/index.js +152 -965
- package/dist/index.style.css +1 -1
- package/dist/linker-B--sjERT.cjs +167 -0
- package/dist/linker-JHdz37DK.js +166 -0
- package/dist/local-sandbox-B8IJ5jWb.js +431 -0
- package/dist/local-sandbox-DnkKrBhf.cjs +428 -0
- package/dist/modules-CInmL-8h.cjs +217 -0
- package/dist/modules-DlLJF_vd.js +211 -0
- package/dist/remote-CKMzn1J3.cjs +106 -0
- package/dist/remote-DfXAsO9n.js +106 -0
- package/dist/rolldown-runtime-C0BPl7ul.cjs +43 -0
- package/dist/script-5Xzzx7u5.cjs +57 -0
- package/dist/script-xKUjE8pf.js +46 -0
- package/dist/scss-Co2it4vB.js +215 -0
- package/dist/scss-DaIqB_qT.cjs +233 -0
- package/dist/store-BF7z-oaO.cjs +964 -0
- package/dist/store-D8vwi-HV.js +767 -0
- package/package.json +20 -9
package/dist/index.cjs
CHANGED
|
@@ -1,31 +1,13 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
-
key = keys[i];
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
|
-
get: ((k) => from[k]).bind(null, key),
|
|
14
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
|
|
20
|
-
value: mod,
|
|
21
|
-
enumerable: true
|
|
22
|
-
}) : target, mod));
|
|
23
|
-
//#endregion
|
|
2
|
+
const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.cjs");
|
|
3
|
+
const require_cdn = require("./cdn-Czve5_9b.cjs");
|
|
4
|
+
const require_store = require("./store-BF7z-oaO.cjs");
|
|
5
|
+
const require_scss = require("./scss-DaIqB_qT.cjs");
|
|
24
6
|
let vue = require("vue");
|
|
25
7
|
let _deot_vc = require("@deot/vc");
|
|
26
8
|
let _deot_docs_locale = require("@deot/docs-locale");
|
|
27
9
|
let highlight_js = require("highlight.js");
|
|
28
|
-
highlight_js = __toESM(highlight_js);
|
|
10
|
+
highlight_js = require_rolldown_runtime.__toESM(highlight_js);
|
|
29
11
|
let _vue_repl = require("@vue/repl");
|
|
30
12
|
let codemirror = require("codemirror");
|
|
31
13
|
let _codemirror_lang_css = require("@codemirror/lang-css");
|
|
@@ -334,12 +316,6 @@ var files_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
334
316
|
}
|
|
335
317
|
});
|
|
336
318
|
//#endregion
|
|
337
|
-
//#region packages/playground/src/constants.ts
|
|
338
|
-
var DEFAULT_ENTRY = "App.vue";
|
|
339
|
-
/** 预览样式和默认 import map 共用的 npm CDN 前缀。 */
|
|
340
|
-
var DEFAULT_CDN_URL = "https://cdn.jsdelivr.net/npm";
|
|
341
|
-
var NEW_SFC_CODE = `<script setup lang="ts"><\/script>\n\n<template>\n <div>\n <slot />\n <\/div>\n<\/template>\n`;
|
|
342
|
-
//#endregion
|
|
343
319
|
//#region packages/playground/src/editor/drag.ts
|
|
344
320
|
var events = typeof document !== "undefined" && "ontouchstart" in document ? {
|
|
345
321
|
start: "touchstart",
|
|
@@ -595,7 +571,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
595
571
|
const filename = nextFilename();
|
|
596
572
|
editorFiles.value = {
|
|
597
573
|
...editorFiles.value,
|
|
598
|
-
[filename]: NEW_SFC_CODE
|
|
574
|
+
[filename]: require_cdn.NEW_SFC_CODE
|
|
599
575
|
};
|
|
600
576
|
activeFilename.value = filename;
|
|
601
577
|
notifyFilesChange({
|
|
@@ -860,229 +836,6 @@ var resolvePlaygroundTitleId = (title, explicitId = "", isOccupied) => {
|
|
|
860
836
|
while (isOccupied(`${base}-${index}`)) index += 1;
|
|
861
837
|
return `${base}-${index}`;
|
|
862
838
|
};
|
|
863
|
-
//#endregion
|
|
864
|
-
//#region packages/playground/src/core/preview-scroll.ts
|
|
865
|
-
/** iframe 包装成功后挂在 `html` 上,供样式与 auto-height 识别。 */
|
|
866
|
-
var PREVIEW_SCROLL_HTML_CLASS = "docs-playground-preview-scroll";
|
|
867
|
-
/** Scroller 内容节点 class,auto-height 优先测量该节点。 */
|
|
868
|
-
var PREVIEW_SCROLL_CONTENT_CLASS = "docs-playground-preview-scroll__content";
|
|
869
|
-
/** 重评时先清掉 html class,避免 `await import` 期间仍套用 `height:100%`。 */
|
|
870
|
-
var PREVIEW_SCROLL_RESET_CODE = `document.documentElement.classList.remove("${PREVIEW_SCROLL_HTML_CLASS}");`;
|
|
871
|
-
/** 动态探测 `@deot/vc`;失败时为空对象,不阻断 DocsLink / 预览挂载。 */
|
|
872
|
-
var PREVIEW_SCROLLER_IMPORT_CODE = "const __docsVc=await import(\"@deot/vc\").catch(()=>({}))";
|
|
873
|
-
/**
|
|
874
|
-
* Vue 的 `mount` 闭包的是 `createApp(root)` 时的根组件,改 `app._component` 不会生效。
|
|
875
|
-
* 因此劫持 `app.mount`:等全部 useCode 注册完后,再 `createApp` 包一层 Scroller。
|
|
876
|
-
* 前导分号避免接在 `app.component(...)` 后被 ASI 解析成调用返回值。
|
|
877
|
-
*/
|
|
878
|
-
var PREVIEW_SCROLLER_USE_CODE = [
|
|
879
|
-
";(()=>{",
|
|
880
|
-
PREVIEW_SCROLL_RESET_CODE,
|
|
881
|
-
"const __DocsScroller=__docsVc&&__docsVc.Scroller;",
|
|
882
|
-
"if(!__DocsScroller)return;",
|
|
883
|
-
"const UserApp=app._component;",
|
|
884
|
-
"app.mount=(container,...rest)=>{",
|
|
885
|
-
"const next=_createApp({",
|
|
886
|
-
"name:\"DocsPreviewRoot\",",
|
|
887
|
-
"setup(){return()=>__docsH(__DocsScroller,{",
|
|
888
|
-
"height:\"100%\",",
|
|
889
|
-
"native:false,",
|
|
890
|
-
"autoResize:true,",
|
|
891
|
-
"showBar:true,",
|
|
892
|
-
`contentClass:"${PREVIEW_SCROLL_CONTENT_CLASS}"`,
|
|
893
|
-
"},{default:()=>__docsH(UserApp)})}",
|
|
894
|
-
"});",
|
|
895
|
-
"next.config.errorHandler=app.config.errorHandler;",
|
|
896
|
-
"if(app._context&&next._context){",
|
|
897
|
-
"if(app._context.components)Object.assign(next._context.components,app._context.components);",
|
|
898
|
-
"if(app._context.directives)Object.assign(next._context.directives,app._context.directives);",
|
|
899
|
-
"Object.assign(next._context.provides,app._context.provides);",
|
|
900
|
-
"next._context.mixins.push(...app._context.mixins);",
|
|
901
|
-
"}",
|
|
902
|
-
"window.__app__=next;",
|
|
903
|
-
`document.documentElement.classList.add("${PREVIEW_SCROLL_HTML_CLASS}");`,
|
|
904
|
-
"return next.mount(container,...rest)",
|
|
905
|
-
"}",
|
|
906
|
-
"})()"
|
|
907
|
-
].join("");
|
|
908
|
-
var PREVIEW_SCROLLER_STYLE = [
|
|
909
|
-
`html.${PREVIEW_SCROLL_HTML_CLASS},`,
|
|
910
|
-
`html.${PREVIEW_SCROLL_HTML_CLASS} body,`,
|
|
911
|
-
`html.${PREVIEW_SCROLL_HTML_CLASS} #app{`,
|
|
912
|
-
"height:100%;min-height:100%;margin:0;overflow:hidden",
|
|
913
|
-
"}",
|
|
914
|
-
`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller,`,
|
|
915
|
-
`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller>.vc-scroller__wrapper{`,
|
|
916
|
-
"height:100%;max-height:100%;box-sizing:border-box",
|
|
917
|
-
"}"
|
|
918
|
-
].join("");
|
|
919
|
-
var resolveSandboxContainer = (sandbox) => sandbox?.container ? (0, vue.unref)(sandbox.container) : null;
|
|
920
|
-
var resolveScrollContent = (iframeDocument) => {
|
|
921
|
-
if (!iframeDocument.documentElement.classList.contains("docs-playground-preview-scroll")) return null;
|
|
922
|
-
return iframeDocument.querySelector(`.${PREVIEW_SCROLL_CONTENT_CLASS}`);
|
|
923
|
-
};
|
|
924
|
-
var useSandboxAutoHeight = (sandboxRef) => {
|
|
925
|
-
const height = (0, vue.ref)(24);
|
|
926
|
-
let container = null;
|
|
927
|
-
let iframe = null;
|
|
928
|
-
let containerObserver = null;
|
|
929
|
-
let contentObserver = null;
|
|
930
|
-
let scrollMountObserver = null;
|
|
931
|
-
let observedScrollNode = null;
|
|
932
|
-
let frameId = 0;
|
|
933
|
-
const cancelMeasure = () => {
|
|
934
|
-
if (!frameId) return;
|
|
935
|
-
cancelAnimationFrame(frameId);
|
|
936
|
-
frameId = 0;
|
|
937
|
-
};
|
|
938
|
-
const measureDocumentContent = (iframeWindow, iframeDocument) => {
|
|
939
|
-
const { body, documentElement } = iframeDocument;
|
|
940
|
-
const bodyStyle = iframeWindow.getComputedStyle(body);
|
|
941
|
-
const bodyMargins = (Number.parseFloat(bodyStyle.marginTop) || 0) + (Number.parseFloat(bodyStyle.marginBottom) || 0);
|
|
942
|
-
const rootTop = documentElement.getBoundingClientRect().top;
|
|
943
|
-
const bodyRect = body.getBoundingClientRect();
|
|
944
|
-
const collapsedTop = Math.max(0, bodyRect.top - rootTop);
|
|
945
|
-
let childrenBottom = 0;
|
|
946
|
-
for (const child of body.children) {
|
|
947
|
-
if (iframeWindow.getComputedStyle(child).position === "fixed") continue;
|
|
948
|
-
const rect = child.getBoundingClientRect();
|
|
949
|
-
const marginBottom = Number.parseFloat(iframeWindow.getComputedStyle(child).marginBottom) || 0;
|
|
950
|
-
childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
|
|
951
|
-
}
|
|
952
|
-
const scrollHeight = Math.max(body.scrollHeight, documentElement.scrollHeight);
|
|
953
|
-
const overflowingHeight = scrollHeight > (iframe?.clientHeight || 0) + 1 ? scrollHeight : 0;
|
|
954
|
-
return Math.ceil(Math.max(body.offsetHeight + bodyMargins + collapsedTop, bodyRect.height + bodyMargins + collapsedTop, childrenBottom, overflowingHeight));
|
|
955
|
-
};
|
|
956
|
-
const measureScrollContent = (scrollContent) => {
|
|
957
|
-
const contentStyle = scrollContent.ownerDocument.defaultView?.getComputedStyle(scrollContent);
|
|
958
|
-
const margins = contentStyle ? (Number.parseFloat(contentStyle.marginTop) || 0) + (Number.parseFloat(contentStyle.marginBottom) || 0) : 0;
|
|
959
|
-
let childrenBottom = 0;
|
|
960
|
-
const rootTop = scrollContent.getBoundingClientRect().top;
|
|
961
|
-
for (const child of scrollContent.children) {
|
|
962
|
-
const rect = child.getBoundingClientRect();
|
|
963
|
-
const marginBottom = Number.parseFloat(scrollContent.ownerDocument.defaultView?.getComputedStyle(child).marginBottom || "0") || 0;
|
|
964
|
-
childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
|
|
965
|
-
}
|
|
966
|
-
return Math.ceil(Math.max(scrollContent.scrollHeight + margins, scrollContent.offsetHeight + margins, childrenBottom + margins));
|
|
967
|
-
};
|
|
968
|
-
const isPendingPreviewApp = (iframeDocument) => {
|
|
969
|
-
const app = iframeDocument.getElementById("app");
|
|
970
|
-
return app ? app.childElementCount === 0 : !!iframe?.srcdoc;
|
|
971
|
-
};
|
|
972
|
-
const releaseBootstrapHeight = (target) => {
|
|
973
|
-
(0, vue.nextTick)(() => {
|
|
974
|
-
if (iframe === target) target.style.height = "100%";
|
|
975
|
-
});
|
|
976
|
-
};
|
|
977
|
-
const measure = () => {
|
|
978
|
-
frameId = 0;
|
|
979
|
-
if (!iframe) return;
|
|
980
|
-
try {
|
|
981
|
-
const iframeWindow = iframe.contentWindow;
|
|
982
|
-
const iframeDocument = iframe.contentDocument;
|
|
983
|
-
if (!iframeWindow || !iframeDocument?.body) return;
|
|
984
|
-
const scrollContent = resolveScrollContent(iframeDocument);
|
|
985
|
-
if (!scrollContent && isPendingPreviewApp(iframeDocument)) return;
|
|
986
|
-
const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureDocumentContent(iframeWindow, iframeDocument);
|
|
987
|
-
const nextHeight = Math.max(contentHeight, 24);
|
|
988
|
-
if (height.value !== nextHeight) height.value = nextHeight;
|
|
989
|
-
releaseBootstrapHeight(iframe);
|
|
990
|
-
} catch {
|
|
991
|
-
if (height.value !== 24) height.value = 24;
|
|
992
|
-
}
|
|
993
|
-
};
|
|
994
|
-
const scheduleMeasure = () => {
|
|
995
|
-
if (frameId) return;
|
|
996
|
-
frameId = requestAnimationFrame(measure);
|
|
997
|
-
};
|
|
998
|
-
const disconnectContent = () => {
|
|
999
|
-
contentObserver?.disconnect();
|
|
1000
|
-
contentObserver = null;
|
|
1001
|
-
scrollMountObserver?.disconnect();
|
|
1002
|
-
scrollMountObserver = null;
|
|
1003
|
-
observedScrollNode = null;
|
|
1004
|
-
cancelMeasure();
|
|
1005
|
-
};
|
|
1006
|
-
const observeContent = () => {
|
|
1007
|
-
disconnectContent();
|
|
1008
|
-
if (!iframe) return;
|
|
1009
|
-
try {
|
|
1010
|
-
const iframeWindow = iframe.contentWindow;
|
|
1011
|
-
const iframeDocument = iframe.contentDocument;
|
|
1012
|
-
const Observer = iframeWindow?.ResizeObserver;
|
|
1013
|
-
if (!iframeWindow || !iframeDocument?.body || !Observer) {
|
|
1014
|
-
scheduleMeasure();
|
|
1015
|
-
return;
|
|
1016
|
-
}
|
|
1017
|
-
const observer = new Observer(scheduleMeasure);
|
|
1018
|
-
observer.observe(iframeDocument.documentElement);
|
|
1019
|
-
observer.observe(iframeDocument.body);
|
|
1020
|
-
contentObserver = observer;
|
|
1021
|
-
const attachScrollContent = (node) => {
|
|
1022
|
-
if (!node || !contentObserver) return false;
|
|
1023
|
-
if (observedScrollNode === node) return true;
|
|
1024
|
-
if (observedScrollNode) contentObserver.unobserve(observedScrollNode);
|
|
1025
|
-
observedScrollNode = node;
|
|
1026
|
-
contentObserver.observe(node);
|
|
1027
|
-
return true;
|
|
1028
|
-
};
|
|
1029
|
-
const syncScrollContent = () => {
|
|
1030
|
-
attachScrollContent(resolveScrollContent(iframeDocument));
|
|
1031
|
-
scheduleMeasure();
|
|
1032
|
-
};
|
|
1033
|
-
scrollMountObserver = new MutationObserver(syncScrollContent);
|
|
1034
|
-
scrollMountObserver.observe(iframeDocument.documentElement, {
|
|
1035
|
-
attributes: true,
|
|
1036
|
-
attributeFilter: ["class"]
|
|
1037
|
-
});
|
|
1038
|
-
scrollMountObserver.observe(iframeDocument.body, {
|
|
1039
|
-
childList: true,
|
|
1040
|
-
subtree: true
|
|
1041
|
-
});
|
|
1042
|
-
syncScrollContent();
|
|
1043
|
-
} catch {
|
|
1044
|
-
if (height.value !== 24) height.value = 24;
|
|
1045
|
-
}
|
|
1046
|
-
};
|
|
1047
|
-
const handleIframeLoad = () => observeContent();
|
|
1048
|
-
const setIframe = (nextIframe) => {
|
|
1049
|
-
if (iframe === nextIframe) return;
|
|
1050
|
-
iframe?.removeEventListener("load", handleIframeLoad);
|
|
1051
|
-
disconnectContent();
|
|
1052
|
-
iframe = nextIframe;
|
|
1053
|
-
if (!iframe) {
|
|
1054
|
-
height.value = 24;
|
|
1055
|
-
return;
|
|
1056
|
-
}
|
|
1057
|
-
iframe.addEventListener("load", handleIframeLoad);
|
|
1058
|
-
iframe.style.height = `${Math.max(window.innerHeight, 24)}px`;
|
|
1059
|
-
observeContent();
|
|
1060
|
-
};
|
|
1061
|
-
const syncIframe = () => setIframe(container?.querySelector("iframe") || null);
|
|
1062
|
-
const setContainer = (nextContainer) => {
|
|
1063
|
-
if (container === nextContainer) return;
|
|
1064
|
-
containerObserver?.disconnect();
|
|
1065
|
-
containerObserver = null;
|
|
1066
|
-
container = nextContainer;
|
|
1067
|
-
setIframe(null);
|
|
1068
|
-
if (!container) return;
|
|
1069
|
-
containerObserver = new MutationObserver(syncIframe);
|
|
1070
|
-
containerObserver.observe(container, {
|
|
1071
|
-
childList: true,
|
|
1072
|
-
subtree: true
|
|
1073
|
-
});
|
|
1074
|
-
syncIframe();
|
|
1075
|
-
};
|
|
1076
|
-
(0, vue.watch)(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
|
|
1077
|
-
flush: "post",
|
|
1078
|
-
immediate: true
|
|
1079
|
-
});
|
|
1080
|
-
(0, vue.onBeforeUnmount)(() => {
|
|
1081
|
-
setContainer(null);
|
|
1082
|
-
cancelMeasure();
|
|
1083
|
-
});
|
|
1084
|
-
return height;
|
|
1085
|
-
};
|
|
1086
839
|
var resolvePreviewBoxHeight = (contentHeight, verticalInset = 0, borderWidth = 1) => {
|
|
1087
840
|
const content = Number.isFinite(contentHeight) ? Math.max(0, contentHeight) : 0;
|
|
1088
841
|
const inset = Number.isFinite(verticalInset) ? Math.max(0, verticalInset) : 0;
|
|
@@ -1161,68 +914,6 @@ var scrollPlaygroundToViewportStart = (el) => {
|
|
|
1161
914
|
});
|
|
1162
915
|
};
|
|
1163
916
|
//#endregion
|
|
1164
|
-
//#region packages/playground/src/core/runtime/error-guard.ts
|
|
1165
|
-
var UNKNOWN_RUNTIME_ERROR = "运行时发生未知错误";
|
|
1166
|
-
var MODULE_SPECIFIER_RE = /Failed to resolve module specifier|Error resolving module specifier/u;
|
|
1167
|
-
var forwardSandboxRuntimeError = (event) => {
|
|
1168
|
-
if (!(event instanceof ErrorEvent) || event.error != null || !event.message) return;
|
|
1169
|
-
event.stopImmediatePropagation();
|
|
1170
|
-
if (event.message === "ResizeObserver loop limit exceeded" || event.message === "ResizeObserver loop completed with undelivered notifications.") return;
|
|
1171
|
-
window.parent.postMessage({
|
|
1172
|
-
action: "error",
|
|
1173
|
-
value: event.message
|
|
1174
|
-
}, "*");
|
|
1175
|
-
};
|
|
1176
|
-
var SANDBOX_RUNTIME_ERROR_CAPTURE_HTML = [
|
|
1177
|
-
"<script>",
|
|
1178
|
-
`window.addEventListener('error', ${forwardSandboxRuntimeError.toString()}, true);`,
|
|
1179
|
-
"<\/script>"
|
|
1180
|
-
].join("\n");
|
|
1181
|
-
var toRuntimeErrorMessage = (value, message) => {
|
|
1182
|
-
if (typeof value === "string" && value) return value;
|
|
1183
|
-
if (value instanceof Error && value.message) return value.message;
|
|
1184
|
-
if (value && typeof value === "object" && "message" in value) {
|
|
1185
|
-
const valueMessage = value.message;
|
|
1186
|
-
if (typeof valueMessage === "string" && valueMessage) return valueMessage;
|
|
1187
|
-
}
|
|
1188
|
-
if (typeof message === "string" && message) return message;
|
|
1189
|
-
if (value !== null && value !== void 0) try {
|
|
1190
|
-
return String(value);
|
|
1191
|
-
} catch {
|
|
1192
|
-
return UNKNOWN_RUNTIME_ERROR;
|
|
1193
|
-
}
|
|
1194
|
-
return UNKNOWN_RUNTIME_ERROR;
|
|
1195
|
-
};
|
|
1196
|
-
var normalizeRuntimeErrorMessage = (data) => {
|
|
1197
|
-
if (!data || typeof data !== "object") return false;
|
|
1198
|
-
const message = data;
|
|
1199
|
-
if (message.action !== "error") return false;
|
|
1200
|
-
message.value = toRuntimeErrorMessage(message.value, message.message);
|
|
1201
|
-
return true;
|
|
1202
|
-
};
|
|
1203
|
-
var toErrorText = (value) => {
|
|
1204
|
-
if (typeof value === "string" && value) return value;
|
|
1205
|
-
if (value instanceof Error && value.message) return value.message;
|
|
1206
|
-
return "";
|
|
1207
|
-
};
|
|
1208
|
-
var formatSandboxRuntimeError = (message, importMapTip) => {
|
|
1209
|
-
if (!MODULE_SPECIFIER_RE.test(message)) return message;
|
|
1210
|
-
return `${message.replace(/\. Relative references must.*$/u, "").replace(/\.$/u, "")}.\n${importMapTip}`;
|
|
1211
|
-
};
|
|
1212
|
-
var useSandboxRuntimeErrorGuard = (sandboxRef) => {
|
|
1213
|
-
const error = (0, vue.ref)("");
|
|
1214
|
-
if (typeof window === "undefined") return error;
|
|
1215
|
-
const handleMessage = (event) => {
|
|
1216
|
-
const iframe = resolveSandboxContainer(sandboxRef.value)?.querySelector("iframe");
|
|
1217
|
-
if (!iframe || event.source !== iframe.contentWindow) return;
|
|
1218
|
-
if (!normalizeRuntimeErrorMessage(event.data)) return;
|
|
1219
|
-
error.value = event.data.value;
|
|
1220
|
-
};
|
|
1221
|
-
window.addEventListener("message", handleMessage, true);
|
|
1222
|
-
(0, vue.onBeforeUnmount)(() => window.removeEventListener("message", handleMessage, true));
|
|
1223
|
-
return error;
|
|
1224
|
-
};
|
|
1225
|
-
//#endregion
|
|
1226
917
|
//#region packages/playground/src/core/runtime/viewport.ts
|
|
1227
918
|
var DEFAULT_VIEWPORT_OPTIONS = ["auto", 375];
|
|
1228
919
|
var isValidViewport = (viewport) => {
|
|
@@ -1386,7 +1077,7 @@ var useSandboxTheme = (sandboxRef) => {
|
|
|
1386
1077
|
}
|
|
1387
1078
|
syncIframe();
|
|
1388
1079
|
};
|
|
1389
|
-
(0, vue.watch)(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
|
|
1080
|
+
(0, vue.watch)(() => require_store.resolveSandboxContainer(sandboxRef.value), setContainer, {
|
|
1390
1081
|
flush: "post",
|
|
1391
1082
|
immediate: true
|
|
1392
1083
|
});
|
|
@@ -1428,16 +1119,16 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
|
|
|
1428
1119
|
sync();
|
|
1429
1120
|
};
|
|
1430
1121
|
const handleMessage = async (event) => {
|
|
1431
|
-
const
|
|
1122
|
+
const current = require_store.resolveSandboxMessageSource(sandbox.value);
|
|
1432
1123
|
const data = event.data;
|
|
1433
|
-
if (!
|
|
1124
|
+
if (!current || event.source !== current || data?.action !== "docs:height" || typeof data.session !== "string") return;
|
|
1434
1125
|
if (data.operation === "start") {
|
|
1435
1126
|
reset();
|
|
1436
|
-
source =
|
|
1127
|
+
source = current;
|
|
1437
1128
|
session = data.session;
|
|
1438
1129
|
return;
|
|
1439
1130
|
}
|
|
1440
|
-
if (source !==
|
|
1131
|
+
if (source !== current || session !== data.session) return;
|
|
1441
1132
|
if (data.operation === "stop") {
|
|
1442
1133
|
reset();
|
|
1443
1134
|
return;
|
|
@@ -1462,7 +1153,7 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
|
|
|
1462
1153
|
accepted
|
|
1463
1154
|
}, "*");
|
|
1464
1155
|
};
|
|
1465
|
-
(0, vue.watch)(() =>
|
|
1156
|
+
(0, vue.watch)(() => require_store.resolveSandboxMessageSource(sandbox.value), reset, { flush: "sync" });
|
|
1466
1157
|
if (typeof window !== "undefined") window.addEventListener("message", handleMessage);
|
|
1467
1158
|
(0, vue.onBeforeUnmount)(() => {
|
|
1468
1159
|
disposed = true;
|
|
@@ -1688,647 +1379,6 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
1688
1379
|
}
|
|
1689
1380
|
});
|
|
1690
1381
|
//#endregion
|
|
1691
|
-
//#region packages/playground/src/cdn.ts
|
|
1692
|
-
var PREVIEW_STYLE_ASSETS = [
|
|
1693
|
-
"@deot/style/dist/index.normalize-only.css",
|
|
1694
|
-
"@deot/vc-components/dist/index.style.css",
|
|
1695
|
-
"@deot/style/dist/index.css"
|
|
1696
|
-
];
|
|
1697
|
-
var BUILTIN_IMPORT_ASSETS = {
|
|
1698
|
-
"@deot/vc": "@deot/vc/dist/index.js",
|
|
1699
|
-
"@deot/vc-shared": "@deot/vc-shared/dist/index.js",
|
|
1700
|
-
"@deot/vc-hooks": "@deot/vc-hooks/dist/index.js",
|
|
1701
|
-
"@deot/vc-components": "@deot/vc-components/dist/index.js",
|
|
1702
|
-
"@deot/helper-resize": "@deot/helper-resize/dist/index.js",
|
|
1703
|
-
"@deot/helper-utils": "@deot/helper-utils/dist/index.js",
|
|
1704
|
-
"@deot/helper-cache": "@deot/helper-cache/dist/index.js",
|
|
1705
|
-
"@deot/helper-fp": "@deot/helper-fp/dist/index.js",
|
|
1706
|
-
"@deot/helper-dom": "@deot/helper-dom/dist/index.js",
|
|
1707
|
-
"@deot/helper-wheel": "@deot/helper-wheel/dist/index.js",
|
|
1708
|
-
"@deot/helper-validator": "@deot/helper-validator/dist/index.js",
|
|
1709
|
-
"@deot/helper-load": "@deot/helper-load/dist/index.js",
|
|
1710
|
-
"@deot/helper-scheduler": "@deot/helper-scheduler/dist/index.js",
|
|
1711
|
-
"@deot/helper-emitter": "@deot/helper-emitter/dist/index.js",
|
|
1712
|
-
"@deot/helper-is": "@deot/helper-is/dist/index.js",
|
|
1713
|
-
"@deot/helper-device": "@deot/helper-device/dist/index.js",
|
|
1714
|
-
"@deot/helper-route": "@deot/helper-route/dist/index.js",
|
|
1715
|
-
"@deot/helper-unicode": "@deot/helper-unicode/dist/index.js",
|
|
1716
|
-
"@deot/helper": "@deot/helper/dist/index.js",
|
|
1717
|
-
"normalize-wheel": "normalize-wheel-es/dist/index.mjs",
|
|
1718
|
-
"photoswipe": "photoswipe/dist/photoswipe.esm.js",
|
|
1719
|
-
"photoswipe/lightbox": "photoswipe/dist/photoswipe-lightbox.esm.js",
|
|
1720
|
-
"vue": "vue/dist/vue.runtime.esm-browser.js",
|
|
1721
|
-
"vue/server-renderer": "vue/dist/server-renderer.esm-browser.js"
|
|
1722
|
-
};
|
|
1723
|
-
var normalizeCdnURL = (cdnURL = DEFAULT_CDN_URL) => {
|
|
1724
|
-
return cdnURL.trim().replace(/\/+$/u, "") || "https://cdn.jsdelivr.net/npm";
|
|
1725
|
-
};
|
|
1726
|
-
var cdnJoin = (origin, asset) => `${origin}/${asset.replace(/^\/+/u, "")}`;
|
|
1727
|
-
var jsdelivrEsmURL = (asset) => cdnJoin(DEFAULT_CDN_URL, asset);
|
|
1728
|
-
var SASS_CDN_URL = jsdelivrEsmURL("sass/+esm");
|
|
1729
|
-
var cdnAsset = (cdnURL, asset) => cdnJoin(normalizeCdnURL(cdnURL), asset);
|
|
1730
|
-
var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
|
|
1731
|
-
...Object.fromEntries(Object.entries(BUILTIN_IMPORT_ASSETS).map(([specifier, asset]) => [specifier, cdnAsset(cdnURL, asset)])),
|
|
1732
|
-
"lodash-es": jsdelivrEsmURL("lodash-es/+esm")
|
|
1733
|
-
});
|
|
1734
|
-
var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
|
|
1735
|
-
//#endregion
|
|
1736
|
-
//#region packages/playground/src/import-map.ts
|
|
1737
|
-
/**
|
|
1738
|
-
* 站点级同步内存:`$docs.modules` / `$docs.styles` 与管理页 import、CSS 覆盖。
|
|
1739
|
-
*/
|
|
1740
|
-
var normalize = (value) => value.trim();
|
|
1741
|
-
var isSafePlaygroundHref = (href) => {
|
|
1742
|
-
const next = href.trim();
|
|
1743
|
-
if (!next) return false;
|
|
1744
|
-
if (/^https?:\/\//iu.test(next)) return true;
|
|
1745
|
-
return next.startsWith("/") && !next.startsWith("//");
|
|
1746
|
-
};
|
|
1747
|
-
var filterSafeHrefs = (value = {}) => Object.fromEntries(Object.entries(value).filter((entry) => typeof entry[1] === "string" && isSafePlaygroundHref(entry[1])));
|
|
1748
|
-
var sanitizeMap = (value = {}) => filterSafeHrefs(Object.fromEntries(Object.entries(value).map(([alias, url]) => [normalize(alias), normalize(url)]).filter(([alias]) => Boolean(alias))));
|
|
1749
|
-
var createMapStore = () => {
|
|
1750
|
-
let data = {};
|
|
1751
|
-
const snapshot = () => ({ ...data });
|
|
1752
|
-
const drop = (alias) => {
|
|
1753
|
-
if (data[alias] === void 0) return snapshot();
|
|
1754
|
-
const next = { ...data };
|
|
1755
|
-
delete next[alias];
|
|
1756
|
-
data = next;
|
|
1757
|
-
return snapshot();
|
|
1758
|
-
};
|
|
1759
|
-
return {
|
|
1760
|
-
get: snapshot,
|
|
1761
|
-
set: (value = {}) => {
|
|
1762
|
-
data = sanitizeMap(value);
|
|
1763
|
-
},
|
|
1764
|
-
apply: (alias, url) => {
|
|
1765
|
-
const nextAlias = normalize(alias);
|
|
1766
|
-
const nextUrl = normalize(url);
|
|
1767
|
-
if (!nextAlias) return snapshot();
|
|
1768
|
-
if (!isSafePlaygroundHref(nextUrl)) return drop(nextAlias);
|
|
1769
|
-
data = {
|
|
1770
|
-
...data,
|
|
1771
|
-
[nextAlias]: nextUrl
|
|
1772
|
-
};
|
|
1773
|
-
return snapshot();
|
|
1774
|
-
},
|
|
1775
|
-
remove: (alias) => {
|
|
1776
|
-
const nextAlias = normalize(alias);
|
|
1777
|
-
return nextAlias ? drop(nextAlias) : snapshot();
|
|
1778
|
-
}
|
|
1779
|
-
};
|
|
1780
|
-
};
|
|
1781
|
-
var siteModules = createMapStore();
|
|
1782
|
-
var siteStyles = createMapStore();
|
|
1783
|
-
var importOverrides = createMapStore();
|
|
1784
|
-
var styleOverrides = createMapStore();
|
|
1785
|
-
/**
|
|
1786
|
-
* 站点默认 import。合并时夹在内置 CDN 与实例 `builtinImportMap` 之间。
|
|
1787
|
-
*/
|
|
1788
|
-
var getPlaygroundSiteModules = siteModules.get;
|
|
1789
|
-
var setPlaygroundSiteModules = siteModules.set;
|
|
1790
|
-
/**
|
|
1791
|
-
* 站点默认预览 CSS。合并时夹在内置样式表与管理页覆盖之间。
|
|
1792
|
-
*/
|
|
1793
|
-
var getPlaygroundSiteStyles = siteStyles.get;
|
|
1794
|
-
var setPlaygroundSiteStyles = siteStyles.set;
|
|
1795
|
-
var getPlaygroundImportMapOverrides = importOverrides.get;
|
|
1796
|
-
var setPlaygroundImportMapOverrides = importOverrides.set;
|
|
1797
|
-
var applyPlaygroundImportMapOverride = importOverrides.apply;
|
|
1798
|
-
var removePlaygroundImportMapOverride = importOverrides.remove;
|
|
1799
|
-
var getPlaygroundStyleOverrides = styleOverrides.get;
|
|
1800
|
-
var setPlaygroundStyleOverrides = styleOverrides.set;
|
|
1801
|
-
var applyPlaygroundStyleOverride = styleOverrides.apply;
|
|
1802
|
-
var removePlaygroundStyleOverride = styleOverrides.remove;
|
|
1803
|
-
var clearPlaygroundMaps = () => {
|
|
1804
|
-
[
|
|
1805
|
-
siteModules,
|
|
1806
|
-
siteStyles,
|
|
1807
|
-
importOverrides,
|
|
1808
|
-
styleOverrides
|
|
1809
|
-
].forEach((store) => store.set());
|
|
1810
|
-
};
|
|
1811
|
-
//#endregion
|
|
1812
|
-
//#region packages/playground/src/preview-service.ts
|
|
1813
|
-
/** Preview iframe 内的高度服务;class 会被序列化到 iframe 执行。 */
|
|
1814
|
-
var PlaygroundService = class {
|
|
1815
|
-
target;
|
|
1816
|
-
vue;
|
|
1817
|
-
session;
|
|
1818
|
-
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1819
|
-
sequence = 0;
|
|
1820
|
-
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1821
|
-
disposed = false;
|
|
1822
|
-
manual;
|
|
1823
|
-
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1824
|
-
requests = /* @__PURE__ */ new Set();
|
|
1825
|
-
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1826
|
-
owners = /* @__PURE__ */ new Set();
|
|
1827
|
-
/**
|
|
1828
|
-
* @param target 当前预览窗口。
|
|
1829
|
-
* @param vue 与预览应用共用的 Vue 实例。
|
|
1830
|
-
*/
|
|
1831
|
-
/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
|
|
1832
|
-
constructor(target, vue) {
|
|
1833
|
-
this.target = target;
|
|
1834
|
-
this.vue = vue;
|
|
1835
|
-
this.session = `${Date.now()}-${Math.random()}`;
|
|
1836
|
-
this.dispose = this.dispose.bind(this);
|
|
1837
|
-
this.post("start");
|
|
1838
|
-
this.target.addEventListener("pagehide", this.dispose);
|
|
1839
|
-
}
|
|
1840
|
-
/**
|
|
1841
|
-
* 申请手动临时高度;新请求会替换上一个手动请求。
|
|
1842
|
-
* @param height iframe 最小高度。
|
|
1843
|
-
* @returns iframe 是否在超时前应用目标高度。
|
|
1844
|
-
*/
|
|
1845
|
-
enable(height) {
|
|
1846
|
-
this.validateHeight(height);
|
|
1847
|
-
this.manual?.release();
|
|
1848
|
-
this.manual = this.createRequest(height);
|
|
1849
|
-
return this.manual.ready;
|
|
1850
|
-
}
|
|
1851
|
-
/** 释放手动临时高度,不影响 `run` 创建的请求。 */
|
|
1852
|
-
disable() {
|
|
1853
|
-
this.manual?.release();
|
|
1854
|
-
this.manual = void 0;
|
|
1855
|
-
}
|
|
1856
|
-
/**
|
|
1857
|
-
* 创建等待高度后执行的事件处理函数。
|
|
1858
|
-
* @param height iframe 最小高度。
|
|
1859
|
-
* @param optionsOrHandler 可见状态配置,或最后一个 handler。
|
|
1860
|
-
* @param lastHandler 使用配置时的最后一个 handler。
|
|
1861
|
-
* @returns 保留 handler 参数和结果的异步事件处理函数。
|
|
1862
|
-
*/
|
|
1863
|
-
run(height, optionsOrHandler, lastHandler) {
|
|
1864
|
-
this.validateHeight(height);
|
|
1865
|
-
if (optionsOrHandler === void 0) return (visible) => {
|
|
1866
|
-
if (visible) return this.enable(height);
|
|
1867
|
-
this.disable();
|
|
1868
|
-
return Promise.resolve(void 0);
|
|
1869
|
-
};
|
|
1870
|
-
const visible = (typeof optionsOrHandler === "function" ? {} : optionsOrHandler).visible;
|
|
1871
|
-
if (visible !== void 0 && !this.vue.isRef(visible) && typeof visible !== "function") throw new TypeError("Playground visible must be a ref or getter");
|
|
1872
|
-
const handler = typeof optionsOrHandler === "function" ? optionsOrHandler : lastHandler ?? (this.vue.isRef(visible) ? () => {
|
|
1873
|
-
visible.value = true;
|
|
1874
|
-
} : void 0);
|
|
1875
|
-
if (typeof handler !== "function") throw new TypeError("Playground run requires a handler");
|
|
1876
|
-
let ownerDisposed = false;
|
|
1877
|
-
let current;
|
|
1878
|
-
let pending;
|
|
1879
|
-
const disposeOwner = () => {
|
|
1880
|
-
ownerDisposed = true;
|
|
1881
|
-
current?.release();
|
|
1882
|
-
this.owners.delete(disposeOwner);
|
|
1883
|
-
};
|
|
1884
|
-
this.owners.add(disposeOwner);
|
|
1885
|
-
if (this.vue.getCurrentScope()) this.vue.onScopeDispose(disposeOwner);
|
|
1886
|
-
return (...args) => {
|
|
1887
|
-
if (this.disposed || ownerDisposed) return Promise.resolve(void 0);
|
|
1888
|
-
if (pending) return pending;
|
|
1889
|
-
const request = current = this.createRequest(height);
|
|
1890
|
-
let executionFinished = false;
|
|
1891
|
-
const unlock = () => {
|
|
1892
|
-
if (executionFinished && request.released && current === request) {
|
|
1893
|
-
pending = void 0;
|
|
1894
|
-
current = void 0;
|
|
1895
|
-
}
|
|
1896
|
-
};
|
|
1897
|
-
request.closed.then(unlock);
|
|
1898
|
-
const execution = (async () => {
|
|
1899
|
-
try {
|
|
1900
|
-
if (!await request.ready || ownerDisposed || this.disposed) return void 0;
|
|
1901
|
-
if (visible) request.watch(visible);
|
|
1902
|
-
const result = await handler(...args);
|
|
1903
|
-
if (!visible || !this.vue.toValue(visible)) request.release();
|
|
1904
|
-
return result;
|
|
1905
|
-
} catch (error) {
|
|
1906
|
-
request.release();
|
|
1907
|
-
throw error;
|
|
1908
|
-
} finally {
|
|
1909
|
-
executionFinished = true;
|
|
1910
|
-
unlock();
|
|
1911
|
-
}
|
|
1912
|
-
})();
|
|
1913
|
-
pending = execution;
|
|
1914
|
-
return execution;
|
|
1915
|
-
};
|
|
1916
|
-
}
|
|
1917
|
-
/** 释放当前预览应用持有的全部高度和监听。 */
|
|
1918
|
-
/* istanbul ignore next -- 注入测试会从序列化后的 iframe class 调用该方法。 */
|
|
1919
|
-
dispose() {
|
|
1920
|
-
if (this.disposed) return;
|
|
1921
|
-
this.disposed = true;
|
|
1922
|
-
for (const disposeOwner of this.owners) disposeOwner();
|
|
1923
|
-
for (const request of this.requests) request.release();
|
|
1924
|
-
this.post("stop");
|
|
1925
|
-
this.target.removeEventListener("pagehide", this.dispose);
|
|
1926
|
-
if (this.target.$docsPlayground === this) delete this.target.$docsPlayground;
|
|
1927
|
-
}
|
|
1928
|
-
/** @param height iframe 最小高度。 */
|
|
1929
|
-
validateHeight(height) {
|
|
1930
|
-
if (!Number.isFinite(height) || height <= 0) throw new TypeError("Playground height must be a positive finite number");
|
|
1931
|
-
}
|
|
1932
|
-
/**
|
|
1933
|
-
* @param operation 请求操作。
|
|
1934
|
-
* @param id 请求标识。
|
|
1935
|
-
* @param height iframe 最小高度。
|
|
1936
|
-
*/
|
|
1937
|
-
/* istanbul ignore next -- 构造和销毁时会从序列化后的 iframe class 调用该方法。 */
|
|
1938
|
-
post(operation, id = 0, height = 0) {
|
|
1939
|
-
this.target.parent.postMessage({
|
|
1940
|
-
action: "docs:height",
|
|
1941
|
-
session: this.session,
|
|
1942
|
-
operation,
|
|
1943
|
-
id,
|
|
1944
|
-
height
|
|
1945
|
-
}, "*");
|
|
1946
|
-
}
|
|
1947
|
-
/**
|
|
1948
|
-
* @param height iframe 最小高度。
|
|
1949
|
-
* @returns 内部等待与释放句柄。
|
|
1950
|
-
*/
|
|
1951
|
-
createRequest(height) {
|
|
1952
|
-
this.validateHeight(height);
|
|
1953
|
-
const id = ++this.sequence;
|
|
1954
|
-
let released = false;
|
|
1955
|
-
let settled = false;
|
|
1956
|
-
let frame = 0;
|
|
1957
|
-
let timer = 0;
|
|
1958
|
-
let stopWatch;
|
|
1959
|
-
let resolveReady;
|
|
1960
|
-
let resolveClosed;
|
|
1961
|
-
const ready = new Promise((resolve) => {
|
|
1962
|
-
resolveReady = resolve;
|
|
1963
|
-
});
|
|
1964
|
-
const closed = new Promise((resolve) => {
|
|
1965
|
-
resolveClosed = resolve;
|
|
1966
|
-
});
|
|
1967
|
-
const stopWaiting = () => {
|
|
1968
|
-
this.target.cancelAnimationFrame(frame);
|
|
1969
|
-
if (timer) {
|
|
1970
|
-
this.target.clearTimeout(timer);
|
|
1971
|
-
timer = 0;
|
|
1972
|
-
}
|
|
1973
|
-
this.target.removeEventListener("message", onMessage);
|
|
1974
|
-
};
|
|
1975
|
-
const release = () => {
|
|
1976
|
-
if (released) return;
|
|
1977
|
-
released = true;
|
|
1978
|
-
stopWaiting();
|
|
1979
|
-
stopWatch?.();
|
|
1980
|
-
resolveReady(false);
|
|
1981
|
-
resolveClosed();
|
|
1982
|
-
this.requests.delete(request);
|
|
1983
|
-
this.post("release", id);
|
|
1984
|
-
};
|
|
1985
|
-
const check = () => {
|
|
1986
|
-
if (released) return;
|
|
1987
|
-
if (this.target.innerHeight >= height) {
|
|
1988
|
-
settled = true;
|
|
1989
|
-
stopWaiting();
|
|
1990
|
-
resolveReady(true);
|
|
1991
|
-
} else frame = this.target.requestAnimationFrame(check);
|
|
1992
|
-
};
|
|
1993
|
-
const onMessage = (event) => {
|
|
1994
|
-
const data = event.data;
|
|
1995
|
-
if (event.source !== this.target.parent || data?.action !== "docs:height:applied" || data.session !== this.session || data.id !== id || settled) return;
|
|
1996
|
-
if (!data.accepted) release();
|
|
1997
|
-
else check();
|
|
1998
|
-
};
|
|
1999
|
-
const request = {
|
|
2000
|
-
ready,
|
|
2001
|
-
closed,
|
|
2002
|
-
get released() {
|
|
2003
|
-
return released;
|
|
2004
|
-
},
|
|
2005
|
-
release,
|
|
2006
|
-
watch: (visible) => {
|
|
2007
|
-
stopWatch = this.vue.watch(() => this.vue.toValue(visible), (value) => {
|
|
2008
|
-
if (!value) release();
|
|
2009
|
-
}, { flush: "sync" });
|
|
2010
|
-
}
|
|
2011
|
-
};
|
|
2012
|
-
this.requests.add(request);
|
|
2013
|
-
if (this.disposed) release();
|
|
2014
|
-
else {
|
|
2015
|
-
this.target.addEventListener("message", onMessage);
|
|
2016
|
-
timer = this.target.setTimeout(() => {
|
|
2017
|
-
timer = 0;
|
|
2018
|
-
release();
|
|
2019
|
-
}, 2e3);
|
|
2020
|
-
this.post("enable", id, height);
|
|
2021
|
-
}
|
|
2022
|
-
return request;
|
|
2023
|
-
}
|
|
2024
|
-
};
|
|
2025
|
-
var PREVIEW_SERVICE_IMPORT_CODE = "import * as __docsPreviewVue from \"vue\"";
|
|
2026
|
-
var PREVIEW_SERVICE_USE_CODE = [
|
|
2027
|
-
`;const __docsPlayground=new (${PlaygroundService.toString()})(window,__docsPreviewVue);`,
|
|
2028
|
-
"app.provide(\"docs:playground\",__docsPlayground);",
|
|
2029
|
-
"window.$docsPlayground=__docsPlayground;",
|
|
2030
|
-
"app.mixin({beforeUnmount(){if(this===this.$root)__docsPlayground.dispose()}});"
|
|
2031
|
-
].join("");
|
|
2032
|
-
//#endregion
|
|
2033
|
-
//#region packages/playground/src/core/scss.ts
|
|
2034
|
-
var SCHEME = "docs-playground";
|
|
2035
|
-
var STYLE_EXTS = [".scss", ".sass"];
|
|
2036
|
-
var VUE_SCSS_STYLE_RE = /<style\b[^>]*\blang\s*=\s*(['"]?)s[ac]ss\1/i;
|
|
2037
|
-
var LANG_ATTR_RE = /\s*lang\s*=\s*(['"]?)s[ac]ss\1/i;
|
|
2038
|
-
var SCSS_ERROR_MARK = "[playground-sass]";
|
|
2039
|
-
var INJECT_START = "/* docs-playground-scss-start */";
|
|
2040
|
-
var INJECT_END = "/* docs-playground-scss-end */";
|
|
2041
|
-
var EMPTY_JS = "export default {}\n";
|
|
2042
|
-
var boundStores = /* @__PURE__ */ new WeakSet();
|
|
2043
|
-
var wrappedCompilers = /* @__PURE__ */ new WeakSet();
|
|
2044
|
-
var testLoader;
|
|
2045
|
-
var loadedSass;
|
|
2046
|
-
var loadPromise;
|
|
2047
|
-
var fileCode = (value) => typeof value === "string" ? value : value.code;
|
|
2048
|
-
var playgroundPath = (url) => decodeURIComponent(url.pathname.replace(/^\/+/u, ""));
|
|
2049
|
-
var toPlaygroundUrl = (filename) => new URL(`${SCHEME}:///${filename.replace(/^\/+/u, "")}`);
|
|
2050
|
-
var basename = (path) => path.split("/").pop() || path;
|
|
2051
|
-
var scssSyntax = (filename, lang) => lang === "sass" || /\.sass$/i.test(filename) ? "indented" : "scss";
|
|
2052
|
-
var errorText = (item) => item instanceof Error ? item.message : String(item);
|
|
2053
|
-
var isScssFile = (filename) => /\.s[ac]ss$/i.test(filename);
|
|
2054
|
-
var vueSourceNeedsScss = (source) => VUE_SCSS_STYLE_RE.test(source);
|
|
2055
|
-
var resolveSassModule = async (url) => {
|
|
2056
|
-
const mod = await import(
|
|
2057
|
-
/* @vite-ignore */
|
|
2058
|
-
url
|
|
2059
|
-
);
|
|
2060
|
-
const sass = typeof mod.compileString === "function" ? mod : mod.default;
|
|
2061
|
-
if (typeof sass?.compileString !== "function") throw new Error(`Sass module at ${url} does not export compileString`);
|
|
2062
|
-
return sass;
|
|
2063
|
-
};
|
|
2064
|
-
var loadSass = () => {
|
|
2065
|
-
loadPromise ??= (testLoader ?? (() => resolveSassModule(SASS_CDN_URL)))().then((sass) => {
|
|
2066
|
-
loadedSass = sass;
|
|
2067
|
-
return sass;
|
|
2068
|
-
});
|
|
2069
|
-
return loadPromise;
|
|
2070
|
-
};
|
|
2071
|
-
var isScssPartial = (filename) => isScssFile(filename) && basename(filename).startsWith("_");
|
|
2072
|
-
var filesNeedScss = (files) => Object.entries(files).some(([filename, value]) => isScssFile(filename) || /\.vue$/i.test(filename) && vueSourceNeedsScss(fileCode(value)));
|
|
2073
|
-
var whenSassReady = (files, run) => {
|
|
2074
|
-
if (!filesNeedScss(files) || loadedSass) run();
|
|
2075
|
-
else loadSass().then(run);
|
|
2076
|
-
};
|
|
2077
|
-
var toPlaygroundFileMap = (files) => Object.fromEntries(Object.entries(files).map(([filename, value]) => [filename, fileCode(value)]));
|
|
2078
|
-
var formatScssError = (filename, message) => `${SCSS_ERROR_MARK} ${filename}: ${message}`;
|
|
2079
|
-
var scssFail = (filename, error) => formatScssError(filename, errorText(error));
|
|
2080
|
-
var withUnderscore = (path) => {
|
|
2081
|
-
const base = basename(path);
|
|
2082
|
-
if (base.startsWith("_")) return path;
|
|
2083
|
-
return `${path.slice(0, -base.length)}_${base}`;
|
|
2084
|
-
};
|
|
2085
|
-
var matchFileKey = (files, path) => [
|
|
2086
|
-
path,
|
|
2087
|
-
path.startsWith("src/") ? path : `src/${path}`,
|
|
2088
|
-
path.replace(/^src\//u, "")
|
|
2089
|
-
].find((key) => files[key] !== void 0);
|
|
2090
|
-
var stylesheetCandidates = (requestPath) => {
|
|
2091
|
-
if (isScssFile(requestPath)) return [requestPath, withUnderscore(requestPath)];
|
|
2092
|
-
return STYLE_EXTS.flatMap((ext) => [
|
|
2093
|
-
`${requestPath}${ext}`,
|
|
2094
|
-
withUnderscore(`${requestPath}${ext}`),
|
|
2095
|
-
`${requestPath}/index${ext}`,
|
|
2096
|
-
withUnderscore(`${requestPath}/index${ext}`)
|
|
2097
|
-
]);
|
|
2098
|
-
};
|
|
2099
|
-
var resolvePlaygroundStylesheet = (files, requestPath) => {
|
|
2100
|
-
const found = [...new Set(stylesheetCandidates(requestPath).map((path) => matchFileKey(files, path)).filter((key) => Boolean(key)))];
|
|
2101
|
-
if (found.length > 1) throw new Error(`Ambiguous Sass import "${requestPath}": ${found.join(", ")}`);
|
|
2102
|
-
return found[0] ?? null;
|
|
2103
|
-
};
|
|
2104
|
-
var createPlaygroundImporter = (getFiles) => ({
|
|
2105
|
-
canonicalize(url, context) {
|
|
2106
|
-
if (/^[a-zA-Z][\w+.-]*:/u.test(url) && !url.startsWith(`${SCHEME}:`)) return null;
|
|
2107
|
-
try {
|
|
2108
|
-
const resolved = resolvePlaygroundStylesheet(getFiles(), playgroundPath(new URL(url, context.containingUrl ?? toPlaygroundUrl(""))));
|
|
2109
|
-
return resolved ? toPlaygroundUrl(resolved) : null;
|
|
2110
|
-
} catch {
|
|
2111
|
-
return null;
|
|
2112
|
-
}
|
|
2113
|
-
},
|
|
2114
|
-
load(canonicalUrl) {
|
|
2115
|
-
const files = getFiles();
|
|
2116
|
-
const key = playgroundPath(canonicalUrl);
|
|
2117
|
-
return files[key] === void 0 ? null : {
|
|
2118
|
-
contents: files[key],
|
|
2119
|
-
syntax: scssSyntax(key)
|
|
2120
|
-
};
|
|
2121
|
-
}
|
|
2122
|
-
});
|
|
2123
|
-
var compileScssSource = (source, filename, sass, files, lang) => {
|
|
2124
|
-
const importer = createPlaygroundImporter(() => files);
|
|
2125
|
-
return sass.compileString(source, {
|
|
2126
|
-
syntax: scssSyntax(filename, lang),
|
|
2127
|
-
url: toPlaygroundUrl(filename),
|
|
2128
|
-
importer,
|
|
2129
|
-
importers: [importer]
|
|
2130
|
-
}).css;
|
|
2131
|
-
};
|
|
2132
|
-
var rewriteVueSfcStyles = (source, filename, parse, sass, files) => {
|
|
2133
|
-
const scssStyles = parse(source, { filename }).descriptor.styles.filter((style) => style.lang === "scss" || style.lang === "sass");
|
|
2134
|
-
if (!scssStyles.length) return {
|
|
2135
|
-
code: source,
|
|
2136
|
-
errors: []
|
|
2137
|
-
};
|
|
2138
|
-
const errors = [];
|
|
2139
|
-
let code = source;
|
|
2140
|
-
for (const style of [...scssStyles].sort((left, right) => right.loc.start.offset - left.loc.start.offset)) {
|
|
2141
|
-
const before = code.slice(0, style.loc.start.offset);
|
|
2142
|
-
const after = code.slice(style.loc.end.offset);
|
|
2143
|
-
const openStart = before.lastIndexOf("<style");
|
|
2144
|
-
if (openStart < 0) {
|
|
2145
|
-
errors.push(formatScssError(filename, "unable to locate <style> opening tag"));
|
|
2146
|
-
continue;
|
|
2147
|
-
}
|
|
2148
|
-
try {
|
|
2149
|
-
const css = compileScssSource(style.content, filename, sass, files, style.lang);
|
|
2150
|
-
code = `${before.slice(0, openStart)}${before.slice(openStart).replace(LANG_ATTR_RE, "")}${css}${after}`;
|
|
2151
|
-
} catch (error) {
|
|
2152
|
-
errors.push(scssFail(filename, error));
|
|
2153
|
-
}
|
|
2154
|
-
}
|
|
2155
|
-
return {
|
|
2156
|
-
code,
|
|
2157
|
-
errors
|
|
2158
|
-
};
|
|
2159
|
-
};
|
|
2160
|
-
var appendParseErrors = (result, errors) => errors.length ? {
|
|
2161
|
-
...result,
|
|
2162
|
-
errors: [...result.errors, ...errors.map((item) => new Error(item))]
|
|
2163
|
-
} : result;
|
|
2164
|
-
var wrapCompiler = (compiler, getFiles) => {
|
|
2165
|
-
if (wrappedCompilers.has(compiler)) return compiler;
|
|
2166
|
-
const originalParse = compiler.parse.bind(compiler);
|
|
2167
|
-
const wrapped = { ...compiler };
|
|
2168
|
-
wrapped.parse = ((source, options) => {
|
|
2169
|
-
const filename = options?.filename || "anonymous.vue";
|
|
2170
|
-
if (!vueSourceNeedsScss(source)) return originalParse(source, options);
|
|
2171
|
-
const rewritten = loadedSass ? rewriteVueSfcStyles(source, filename, originalParse, loadedSass, getFiles()) : {
|
|
2172
|
-
code: source,
|
|
2173
|
-
errors: [formatScssError(filename, "compiler is not loaded")]
|
|
2174
|
-
};
|
|
2175
|
-
return appendParseErrors(originalParse(rewritten.errors.length ? source : rewritten.code, options), rewritten.errors);
|
|
2176
|
-
});
|
|
2177
|
-
wrappedCompilers.add(wrapped);
|
|
2178
|
-
return wrapped;
|
|
2179
|
-
};
|
|
2180
|
-
var withInjectedCss = (css, extra) => {
|
|
2181
|
-
const start = css.indexOf(INJECT_START);
|
|
2182
|
-
const end = start < 0 ? -1 : css.indexOf(INJECT_END, start);
|
|
2183
|
-
const base = (start < 0 ? css : `${css.slice(0, start)}${end >= 0 ? css.slice(end + 30) : ""}`).trimEnd();
|
|
2184
|
-
if (!extra.trim()) return base;
|
|
2185
|
-
const block = `${INJECT_START}\n${extra.trim()}\n${INJECT_END}`;
|
|
2186
|
-
return base ? `${base}\n${block}` : block;
|
|
2187
|
-
};
|
|
2188
|
-
var isStandaloneScssError = (item) => {
|
|
2189
|
-
const text = errorText(item);
|
|
2190
|
-
return text.startsWith(SCSS_ERROR_MARK) && /\.s[ac]ss:/i.test(text);
|
|
2191
|
-
};
|
|
2192
|
-
var syncScssErrors = (store, scssErrors) => {
|
|
2193
|
-
const next = [...scssErrors, ...store.errors.filter((item) => !isStandaloneScssError(item))];
|
|
2194
|
-
if (next.map(String).join("\0") === store.errors.map(String).join("\0")) return;
|
|
2195
|
-
store.errors = next;
|
|
2196
|
-
};
|
|
2197
|
-
var applyStandaloneScss = (store, sass = loadedSass) => {
|
|
2198
|
-
if (!sass) return [];
|
|
2199
|
-
const fileMap = toPlaygroundFileMap(store.files);
|
|
2200
|
-
const errors = [];
|
|
2201
|
-
const injected = [];
|
|
2202
|
-
for (const [filename, file] of Object.entries(store.files)) {
|
|
2203
|
-
if (!isScssFile(filename) || !file.compiled) continue;
|
|
2204
|
-
try {
|
|
2205
|
-
const css = compileScssSource(file.code, filename, sass, fileMap);
|
|
2206
|
-
file.compiled.css = css;
|
|
2207
|
-
file.compiled.js = EMPTY_JS;
|
|
2208
|
-
file.compiled.ssr = EMPTY_JS;
|
|
2209
|
-
if (!isScssPartial(filename) && css.trim()) injected.push(css);
|
|
2210
|
-
} catch (error) {
|
|
2211
|
-
errors.push(scssFail(filename, error));
|
|
2212
|
-
}
|
|
2213
|
-
}
|
|
2214
|
-
const main = store.files[store.mainFile];
|
|
2215
|
-
if (main?.compiled) {
|
|
2216
|
-
const next = withInjectedCss(main.compiled.css || "", injected.join("\n"));
|
|
2217
|
-
if (next !== (main.compiled.css || "")) main.compiled.css = next;
|
|
2218
|
-
}
|
|
2219
|
-
syncScssErrors(store, errors);
|
|
2220
|
-
return errors;
|
|
2221
|
-
};
|
|
2222
|
-
var bindPlaygroundScss = (store) => {
|
|
2223
|
-
if (boundStores.has(store)) return;
|
|
2224
|
-
boundStores.add(store);
|
|
2225
|
-
const getFiles = () => toPlaygroundFileMap(store.files);
|
|
2226
|
-
const installCompiler = () => {
|
|
2227
|
-
if (typeof store.compiler?.parse === "function") store.compiler = wrapCompiler(store.compiler, getFiles);
|
|
2228
|
-
};
|
|
2229
|
-
installCompiler();
|
|
2230
|
-
(0, vue.watch)(() => store.compiler, installCompiler);
|
|
2231
|
-
(0, vue.watch)(() => [
|
|
2232
|
-
store.mainFile,
|
|
2233
|
-
store.files[store.mainFile]?.compiled?.css,
|
|
2234
|
-
store.errors.map(String).join("\0"),
|
|
2235
|
-
Object.entries(store.files).filter(([filename]) => isScssFile(filename)).map(([filename, file]) => `${filename}:${file.code}`).join("\n")
|
|
2236
|
-
].join("\0"), () => {
|
|
2237
|
-
if (loadedSass) applyStandaloneScss(store);
|
|
2238
|
-
});
|
|
2239
|
-
const originalSetFiles = store.setFiles.bind(store);
|
|
2240
|
-
store.setFiles = async (newFiles, mainFile) => {
|
|
2241
|
-
if (filesNeedScss(newFiles) && !loadedSass) await loadSass();
|
|
2242
|
-
return originalSetFiles(newFiles, mainFile);
|
|
2243
|
-
};
|
|
2244
|
-
};
|
|
2245
|
-
//#endregion
|
|
2246
|
-
//#region packages/playground/src/core/store.ts
|
|
2247
|
-
var DOCS_LINK_IMPORT_CODE = "import { h as __docsH } from \"vue\"";
|
|
2248
|
-
var DOCS_LINK_USE_CODE = [
|
|
2249
|
-
PREVIEW_SCROLL_RESET_CODE,
|
|
2250
|
-
"app.component(\"DocsLink\",{",
|
|
2251
|
-
"props:{to:{type:String,default:\"\"}},",
|
|
2252
|
-
"setup(props,{slots}){return()=>__docsH(\"a\",{",
|
|
2253
|
-
"href:props.to,",
|
|
2254
|
-
"style:{color:\"inherit\",textDecoration:\"none\"},",
|
|
2255
|
-
"onClick(event){event.preventDefault();window.parent.postMessage({action:\"docs:navigate\",to:props.to},\"*\")}",
|
|
2256
|
-
"},slots.default?.())}",
|
|
2257
|
-
"})"
|
|
2258
|
-
].join("");
|
|
2259
|
-
var escapeHtmlAttr = (value) => value.replace(/&/gu, "&").replace(/"/gu, """).replace(/'/gu, "'").replace(/</gu, "<").replace(/>/gu, ">");
|
|
2260
|
-
/**
|
|
2261
|
-
* runtime 画布色。`previewInset` 露出的 padding、iframe chrome 和 sandbox
|
|
2262
|
-
* `html`/`body` 必须共用这一变量,暗色下 `--docs-background-color` 与
|
|
2263
|
-
* `--vc-background-color-light` 不同,否则会出现色带割裂。
|
|
2264
|
-
*/
|
|
2265
|
-
var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-light, var(--docs-background-color, #fff))";
|
|
2266
|
-
var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
|
|
2267
|
-
const previewScroller = options.previewScroller === true;
|
|
2268
|
-
const hrefs = Object.values({
|
|
2269
|
-
...createBuiltinStyles(cdnURL),
|
|
2270
|
-
...getPlaygroundSiteStyles(),
|
|
2271
|
-
...getPlaygroundStyleOverrides()
|
|
2272
|
-
});
|
|
2273
|
-
const styleBlocks = [
|
|
2274
|
-
`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
|
|
2275
|
-
"body{color:var(--vc-foreground-color,#080f20)}",
|
|
2276
|
-
...previewScroller ? [PREVIEW_SCROLLER_STYLE] : []
|
|
2277
|
-
];
|
|
2278
|
-
return {
|
|
2279
|
-
showRuntimeError: false,
|
|
2280
|
-
showRuntimeWarning: false,
|
|
2281
|
-
headHTML: [
|
|
2282
|
-
SANDBOX_RUNTIME_ERROR_CAPTURE_HTML,
|
|
2283
|
-
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
|
|
2284
|
-
...hrefs.map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
|
|
2285
|
-
"<style>",
|
|
2286
|
-
...styleBlocks,
|
|
2287
|
-
"</style>"
|
|
2288
|
-
].join("\n"),
|
|
2289
|
-
customCode: {
|
|
2290
|
-
importCode: `${DOCS_LINK_IMPORT_CODE}\n${PREVIEW_SERVICE_IMPORT_CODE}`,
|
|
2291
|
-
useCode: `${DOCS_LINK_USE_CODE}\n${PREVIEW_SERVICE_USE_CODE}`
|
|
2292
|
-
}
|
|
2293
|
-
};
|
|
2294
|
-
};
|
|
2295
|
-
var toReplFilename = (filename) => filename.startsWith("src/") ? filename : `src/${filename}`;
|
|
2296
|
-
var createReplFile = (filename, code) => {
|
|
2297
|
-
const replFilename = toReplFilename(filename);
|
|
2298
|
-
return new _vue_repl.File(replFilename, code);
|
|
2299
|
-
};
|
|
2300
|
-
var createRuntimeStore = (files, entry, options) => {
|
|
2301
|
-
const { cdnURL, builtinImportMap, ...storeOptions } = options;
|
|
2302
|
-
const replFiles = (0, vue.ref)(Object.fromEntries(Object.entries(files).map(([filename, code]) => {
|
|
2303
|
-
const file = createReplFile(filename, code);
|
|
2304
|
-
return [file.filename, file];
|
|
2305
|
-
})));
|
|
2306
|
-
const mainFile = (0, vue.ref)(toReplFilename(entry));
|
|
2307
|
-
const activeFilename = (0, vue.ref)(toReplFilename(entry));
|
|
2308
|
-
const store = (0, _vue_repl.useStore)({
|
|
2309
|
-
...storeOptions,
|
|
2310
|
-
files: replFiles,
|
|
2311
|
-
mainFile,
|
|
2312
|
-
activeFilename,
|
|
2313
|
-
builtinImportMap: (0, vue.ref)({
|
|
2314
|
-
...builtinImportMap,
|
|
2315
|
-
imports: {
|
|
2316
|
-
...createBuiltinImports(cdnURL),
|
|
2317
|
-
...getPlaygroundSiteModules(),
|
|
2318
|
-
...filterSafeHrefs(builtinImportMap?.imports),
|
|
2319
|
-
...getPlaygroundImportMapOverrides()
|
|
2320
|
-
}
|
|
2321
|
-
}),
|
|
2322
|
-
template: (0, vue.ref)({
|
|
2323
|
-
welcomeSFC: files[entry],
|
|
2324
|
-
newSFC: NEW_SFC_CODE
|
|
2325
|
-
})
|
|
2326
|
-
});
|
|
2327
|
-
bindPlaygroundScss(store);
|
|
2328
|
-
whenSassReady(files, () => store.init());
|
|
2329
|
-
return store;
|
|
2330
|
-
};
|
|
2331
|
-
//#endregion
|
|
2332
1382
|
//#region packages/playground/src/core/runtime/alone/wrapper.vue?vue&type=script&setup=true&lang.ts
|
|
2333
1383
|
var _hoisted_1$2 = ["aria-label"];
|
|
2334
1384
|
var _hoisted_2$2 = { class: "docs-playground-popup__frame" };
|
|
@@ -2355,6 +1405,17 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2355
1405
|
clearConsole: {
|
|
2356
1406
|
type: Boolean,
|
|
2357
1407
|
default: true
|
|
1408
|
+
},
|
|
1409
|
+
local: {
|
|
1410
|
+
type: Boolean,
|
|
1411
|
+
default: true
|
|
1412
|
+
},
|
|
1413
|
+
files: { default: () => ({}) },
|
|
1414
|
+
entry: { default: "" },
|
|
1415
|
+
options: { default: () => ({}) },
|
|
1416
|
+
previewScroller: {
|
|
1417
|
+
type: Boolean,
|
|
1418
|
+
default: false
|
|
2358
1419
|
}
|
|
2359
1420
|
},
|
|
2360
1421
|
emits: [
|
|
@@ -2364,20 +1425,28 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2364
1425
|
"portal-fulfilled"
|
|
2365
1426
|
],
|
|
2366
1427
|
setup(__props, { emit: __emit }) {
|
|
1428
|
+
const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-DnkKrBhf.cjs")).then((n) => n.local_sandbox_exports));
|
|
2367
1429
|
const props = __props;
|
|
2368
1430
|
const emit = __emit;
|
|
2369
1431
|
const { t } = (0, _deot_docs_locale.useLocale)();
|
|
2370
1432
|
const currentViewport = (0, vue.ref)(props.viewport);
|
|
2371
1433
|
const sandboxRef = (0, vue.ref)(null);
|
|
1434
|
+
const localError = (0, vue.ref)({
|
|
1435
|
+
compile: "",
|
|
1436
|
+
runtime: ""
|
|
1437
|
+
});
|
|
1438
|
+
const handleLocalError = (payload) => {
|
|
1439
|
+
localError.value = payload;
|
|
1440
|
+
};
|
|
2372
1441
|
const availableHeight = () => Math.max(0, getWindowInnerSize().height - 40 - 44);
|
|
2373
1442
|
const temporaryHeight = usePreviewHeightBridge(sandboxRef, availableHeight);
|
|
2374
1443
|
const sandboxKey = (0, vue.ref)(0);
|
|
2375
1444
|
const layoutTick = (0, vue.ref)(0);
|
|
2376
|
-
const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
|
|
1445
|
+
const runtimeError = require_store.useSandboxRuntimeErrorGuard(sandboxRef);
|
|
2377
1446
|
useSandboxTheme(sandboxRef);
|
|
2378
|
-
const storeErrors = (0, vue.computed)(() => (props.store
|
|
1447
|
+
const storeErrors = (0, vue.computed)(() => props.local ? localError.value.compile : (props.store?.errors || []).map(require_store.toErrorText).filter(Boolean).join("\n"));
|
|
2379
1448
|
const errorText = (0, vue.computed)(() => {
|
|
2380
|
-
const runtime = runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
|
|
1449
|
+
const runtime = props.local ? localError.value.runtime : runtimeError.value ? require_store.formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
|
|
2381
1450
|
return [storeErrors.value, runtime].filter(Boolean).join("\n\n");
|
|
2382
1451
|
});
|
|
2383
1452
|
const layout = (0, vue.computed)(() => {
|
|
@@ -2400,10 +1469,14 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2400
1469
|
const canvasStyle = (0, vue.computed)(() => ({
|
|
2401
1470
|
width: `${layout.value.canvasWidth}px`,
|
|
2402
1471
|
height: `${layout.value.canvasHeight}px`,
|
|
2403
|
-
background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
|
|
1472
|
+
background: require_store.PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
|
|
2404
1473
|
}));
|
|
2405
1474
|
const handleRefresh = () => {
|
|
2406
1475
|
runtimeError.value = "";
|
|
1476
|
+
localError.value = {
|
|
1477
|
+
compile: "",
|
|
1478
|
+
runtime: ""
|
|
1479
|
+
};
|
|
2407
1480
|
sandboxKey.value++;
|
|
2408
1481
|
};
|
|
2409
1482
|
const handleViewportChange = (viewport) => {
|
|
@@ -2428,8 +1501,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2428
1501
|
layoutTick.value++;
|
|
2429
1502
|
};
|
|
2430
1503
|
const handleBridgeMessage = (event) => {
|
|
2431
|
-
|
|
2432
|
-
if (!iframe || event.source !== iframe.contentWindow) return;
|
|
1504
|
+
if (!require_store.isSandboxMessage(sandboxRef.value, event)) return;
|
|
2433
1505
|
const data = event.data;
|
|
2434
1506
|
if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
|
|
2435
1507
|
emit("navigate", data.to);
|
|
@@ -2491,7 +1563,23 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2491
1563
|
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
|
|
2492
1564
|
class: "docs-playground-popup__canvas",
|
|
2493
1565
|
style: (0, vue.normalizeStyle)(canvasStyle.value)
|
|
2494
|
-
}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(
|
|
1566
|
+
}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
|
|
1567
|
+
key: sandboxKey.value,
|
|
1568
|
+
ref_key: "sandboxRef",
|
|
1569
|
+
ref: sandboxRef,
|
|
1570
|
+
files: __props.files,
|
|
1571
|
+
entry: __props.entry,
|
|
1572
|
+
options: __props.options,
|
|
1573
|
+
"preview-scroller": __props.previewScroller,
|
|
1574
|
+
"clear-console": __props.clearConsole,
|
|
1575
|
+
onError: handleLocalError
|
|
1576
|
+
}, null, 8, [
|
|
1577
|
+
"files",
|
|
1578
|
+
"entry",
|
|
1579
|
+
"options",
|
|
1580
|
+
"preview-scroller",
|
|
1581
|
+
"clear-console"
|
|
1582
|
+
])) : __props.store ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
|
|
2495
1583
|
key: sandboxKey.value,
|
|
2496
1584
|
ref_key: "sandboxRef",
|
|
2497
1585
|
ref: sandboxRef,
|
|
@@ -2503,7 +1591,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2503
1591
|
"store",
|
|
2504
1592
|
"clear-console",
|
|
2505
1593
|
"preview-options"
|
|
2506
|
-
]))], 4)]),
|
|
1594
|
+
])) : (0, vue.createCommentVNode)("v-if", true)], 4)]),
|
|
2507
1595
|
_: 1
|
|
2508
1596
|
})])
|
|
2509
1597
|
])], 4)], 8, _hoisted_1$2);
|
|
@@ -2571,7 +1659,11 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2571
1659
|
title: { default: "" },
|
|
2572
1660
|
id: { default: "" },
|
|
2573
1661
|
viewport: { default: "auto" },
|
|
2574
|
-
viewportOptions: { default: () => ["auto", 375] }
|
|
1662
|
+
viewportOptions: { default: () => ["auto", 375] },
|
|
1663
|
+
local: {
|
|
1664
|
+
type: Boolean,
|
|
1665
|
+
default: true
|
|
1666
|
+
}
|
|
2575
1667
|
},
|
|
2576
1668
|
emits: [
|
|
2577
1669
|
"files-change",
|
|
@@ -2580,6 +1672,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2580
1672
|
"navigate"
|
|
2581
1673
|
],
|
|
2582
1674
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
1675
|
+
const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-DnkKrBhf.cjs")).then((n) => n.local_sandbox_exports));
|
|
2583
1676
|
const props = __props;
|
|
2584
1677
|
const { locale, t } = (0, _deot_docs_locale.useLocale)();
|
|
2585
1678
|
const displayTitle = (0, vue.computed)(() => props.title.trim());
|
|
@@ -2592,7 +1685,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2592
1685
|
const emit = __emit;
|
|
2593
1686
|
const joinCode = (...values) => values.filter(Boolean).join("\n");
|
|
2594
1687
|
const mergePreviewOptions = (extraHeadHTML) => {
|
|
2595
|
-
const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL, { previewScroller: props.previewScroller });
|
|
1688
|
+
const runtimePreviewOptions = require_store.createRuntimePreviewOptions(props.options.cdnURL, { previewScroller: props.previewScroller });
|
|
2596
1689
|
return {
|
|
2597
1690
|
...runtimePreviewOptions,
|
|
2598
1691
|
...props.previewOptions,
|
|
@@ -2602,8 +1695,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2602
1695
|
extraHeadHTML
|
|
2603
1696
|
].filter(Boolean).join("\n"),
|
|
2604
1697
|
customCode: {
|
|
2605
|
-
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),
|
|
2606
|
-
useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ? PREVIEW_SCROLLER_USE_CODE : void 0)
|
|
1698
|
+
importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode, props.previewScroller ? require_store.PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? require_store.PREVIEW_SCROLLER_IMPORT_CODE : void 0),
|
|
1699
|
+
useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ? require_store.PREVIEW_SCROLLER_USE_CODE : void 0)
|
|
2607
1700
|
}
|
|
2608
1701
|
};
|
|
2609
1702
|
};
|
|
@@ -2617,21 +1710,32 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2617
1710
|
"SSR": false
|
|
2618
1711
|
}.MODE !== "development";
|
|
2619
1712
|
const copyValue = (0, vue.computed)(() => props.files[props.entry] || "");
|
|
2620
|
-
const store = createRuntimeStore(props.files, props.entry, props.options);
|
|
1713
|
+
const store = props.local ? null : require_store.createRuntimeStore(props.files, props.entry, props.options);
|
|
2621
1714
|
const sandboxRef = (0, vue.ref)(null);
|
|
1715
|
+
const localError = (0, vue.ref)({
|
|
1716
|
+
compile: "",
|
|
1717
|
+
runtime: ""
|
|
1718
|
+
});
|
|
1719
|
+
const handleLocalError = (payload) => {
|
|
1720
|
+
localError.value = payload;
|
|
1721
|
+
};
|
|
2622
1722
|
const temporaryHeight = usePreviewHeightBridge(sandboxRef);
|
|
2623
1723
|
const sandboxKey = (0, vue.ref)(0);
|
|
2624
|
-
const runtimeHeight = useSandboxAutoHeight(sandboxRef);
|
|
2625
|
-
const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
|
|
1724
|
+
const runtimeHeight = require_store.useSandboxAutoHeight(sandboxRef);
|
|
1725
|
+
const runtimeError = require_store.useSandboxRuntimeErrorGuard(sandboxRef);
|
|
2626
1726
|
useSandboxTheme(sandboxRef);
|
|
2627
|
-
const compileErrorText = (0, vue.computed)(() =>
|
|
1727
|
+
const compileErrorText = (0, vue.computed)(() => {
|
|
1728
|
+
if (props.local) return localError.value.compile;
|
|
1729
|
+
return (store?.errors || []).map(require_store.toErrorText).filter(Boolean).join("\n");
|
|
1730
|
+
});
|
|
2628
1731
|
const errorText = (0, vue.computed)(() => {
|
|
2629
|
-
|
|
1732
|
+
let runtime = "";
|
|
1733
|
+
if (props.local) runtime = localError.value.runtime;
|
|
1734
|
+
else if (runtimeError.value) runtime = require_store.formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip"));
|
|
2630
1735
|
return [compileErrorText.value, runtime].filter(Boolean).join("\n\n");
|
|
2631
1736
|
});
|
|
2632
1737
|
const handleBridgeMessage = (event) => {
|
|
2633
|
-
|
|
2634
|
-
if (!iframe || event.source !== iframe.contentWindow) return;
|
|
1738
|
+
if (!require_store.isSandboxMessage(sandboxRef.value, event)) return;
|
|
2635
1739
|
const data = event.data;
|
|
2636
1740
|
if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
|
|
2637
1741
|
emit("navigate", data.to);
|
|
@@ -2664,16 +1768,21 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2664
1768
|
}) - vertical * 2 - 2);
|
|
2665
1769
|
};
|
|
2666
1770
|
const syncFrozenExpandedHeight = () => {
|
|
2667
|
-
if (!previewExpanded.value || props.expandable !== true) return;
|
|
1771
|
+
if (props.local || !previewExpanded.value || props.expandable !== true) return;
|
|
2668
1772
|
frozenExpandedHeight.value = measureExpandedPreviewHeight();
|
|
2669
1773
|
};
|
|
2670
1774
|
if (typeof window !== "undefined") {
|
|
2671
1775
|
window.addEventListener("message", handleBridgeMessage);
|
|
2672
1776
|
window.addEventListener("resize", syncFrozenExpandedHeight);
|
|
2673
1777
|
}
|
|
2674
|
-
const canExpandPreview = (0, vue.computed)(() => !props.styleless && isPlaygroundExpandable(props.expandable));
|
|
1778
|
+
const canExpandPreview = (0, vue.computed)(() => !props.local && !props.styleless && isPlaygroundExpandable(props.expandable));
|
|
2675
1779
|
const expandLabel = (0, vue.computed)(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
|
|
2676
1780
|
const baseViewportHeight = (0, vue.computed)(() => {
|
|
1781
|
+
if (props.local) {
|
|
1782
|
+
const fixedHeight = getViewportHeight(props.viewport);
|
|
1783
|
+
if (fixedHeight) return fixedHeight;
|
|
1784
|
+
return runtimeHeight.value;
|
|
1785
|
+
}
|
|
2677
1786
|
if (previewExpanded.value && props.expandable === true) return frozenExpandedHeight.value;
|
|
2678
1787
|
if (previewExpanded.value && isPlaygroundExpandable(props.expandable)) return resolveExpandedPreviewHeight(props.expandable, 0);
|
|
2679
1788
|
const fixedHeight = getViewportHeight(props.viewport);
|
|
@@ -2685,7 +1794,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2685
1794
|
scrollPlaygroundToViewportStart(runtimeRoot.value);
|
|
2686
1795
|
};
|
|
2687
1796
|
const handleTogglePreviewExpand = () => {
|
|
2688
|
-
if (!canExpandPreview.value) return;
|
|
1797
|
+
if (props.local || !canExpandPreview.value) return;
|
|
2689
1798
|
if (!previewExpanded.value) {
|
|
2690
1799
|
if (props.expandable === true) frozenExpandedHeight.value = measureExpandedPreviewHeight();
|
|
2691
1800
|
else frozenExpandedHeight.value = 0;
|
|
@@ -2707,7 +1816,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2707
1816
|
return {
|
|
2708
1817
|
height: `${resolvePreviewBoxHeight(desiredViewportHeight.value, vertical)}px`,
|
|
2709
1818
|
padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`,
|
|
2710
|
-
background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
|
|
1819
|
+
background: require_store.PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
|
|
2711
1820
|
};
|
|
2712
1821
|
});
|
|
2713
1822
|
const stylelessStyle = (0, vue.computed)(() => errorText.value ? void 0 : { height: `${desiredViewportHeight.value}px` });
|
|
@@ -2725,42 +1834,50 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2725
1834
|
syncedFiles = { ...files };
|
|
2726
1835
|
syncedEntry = entry;
|
|
2727
1836
|
const apply = () => {
|
|
2728
|
-
switch (action.type) {
|
|
1837
|
+
if (store) switch (action.type) {
|
|
2729
1838
|
case "update": {
|
|
2730
|
-
const file = store.files[toReplFilename(action.filename)];
|
|
1839
|
+
const file = store.files[require_store.toReplFilename(action.filename)];
|
|
2731
1840
|
if (file) file.code = files[action.filename];
|
|
2732
1841
|
break;
|
|
2733
1842
|
}
|
|
2734
1843
|
case "create":
|
|
2735
|
-
store.addFile(createReplFile(action.filename, files[action.filename]));
|
|
1844
|
+
store.addFile(require_store.createReplFile(action.filename, files[action.filename]));
|
|
2736
1845
|
break;
|
|
2737
1846
|
case "rename":
|
|
2738
|
-
store.renameFile(toReplFilename(action.previousFilename), toReplFilename(action.filename));
|
|
1847
|
+
store.renameFile(require_store.toReplFilename(action.previousFilename), require_store.toReplFilename(action.filename));
|
|
2739
1848
|
break;
|
|
2740
1849
|
case "delete":
|
|
2741
|
-
store.setActive(toReplFilename(entry));
|
|
2742
|
-
delete store.files[toReplFilename(action.filename)];
|
|
1850
|
+
store.setActive(require_store.toReplFilename(entry));
|
|
1851
|
+
delete store.files[require_store.toReplFilename(action.filename)];
|
|
2743
1852
|
break;
|
|
2744
1853
|
case "entry":
|
|
2745
|
-
store.mainFile = toReplFilename(entry);
|
|
2746
|
-
store.setActive(toReplFilename(entry));
|
|
1854
|
+
store.mainFile = require_store.toReplFilename(entry);
|
|
1855
|
+
store.setActive(require_store.toReplFilename(entry));
|
|
2747
1856
|
}
|
|
2748
1857
|
emit("files-change", files, entry, action);
|
|
2749
1858
|
};
|
|
2750
|
-
whenSassReady(files, apply);
|
|
1859
|
+
if (store) require_scss.whenSassReady(files, apply);
|
|
1860
|
+
else apply();
|
|
2751
1861
|
};
|
|
2752
1862
|
const handleEditor = () => {
|
|
2753
1863
|
Editor.popup({
|
|
2754
1864
|
files: { ...props.files },
|
|
2755
1865
|
entry: props.entry,
|
|
2756
1866
|
locale: locale.value,
|
|
2757
|
-
getCodeErrors: () =>
|
|
1867
|
+
getCodeErrors: () => {
|
|
1868
|
+
if (!props.local) return store?.errors || [];
|
|
1869
|
+
return localError.value.compile ? [localError.value.compile] : [];
|
|
1870
|
+
},
|
|
2758
1871
|
onFilesChange: handleFilesChange,
|
|
2759
|
-
onActiveChange: (filename) => store
|
|
1872
|
+
onActiveChange: (filename) => store?.setActive(require_store.toReplFilename(filename))
|
|
2760
1873
|
});
|
|
2761
1874
|
};
|
|
2762
1875
|
const handleInlineRefresh = () => {
|
|
2763
1876
|
runtimeError.value = "";
|
|
1877
|
+
localError.value = {
|
|
1878
|
+
compile: "",
|
|
1879
|
+
runtime: ""
|
|
1880
|
+
};
|
|
2764
1881
|
sandboxKey.value++;
|
|
2765
1882
|
};
|
|
2766
1883
|
const handleClosePopup = () => {
|
|
@@ -2768,6 +1885,11 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2768
1885
|
};
|
|
2769
1886
|
const handleOpenPopup = () => {
|
|
2770
1887
|
Alone.popup({
|
|
1888
|
+
local: props.local,
|
|
1889
|
+
files: props.files,
|
|
1890
|
+
entry: props.entry,
|
|
1891
|
+
options: props.options,
|
|
1892
|
+
previewScroller: props.previewScroller,
|
|
2771
1893
|
store,
|
|
2772
1894
|
copyValue: copyValue.value,
|
|
2773
1895
|
title: props.title,
|
|
@@ -2788,13 +1910,18 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2788
1910
|
syncedFiles = { ...files };
|
|
2789
1911
|
syncedEntry = props.entry;
|
|
2790
1912
|
runtimeError.value = "";
|
|
2791
|
-
|
|
1913
|
+
localError.value = {
|
|
1914
|
+
compile: "",
|
|
1915
|
+
runtime: ""
|
|
1916
|
+
};
|
|
1917
|
+
if (store) store.setFiles(files, props.entry);
|
|
2792
1918
|
}, { deep: true });
|
|
2793
1919
|
(0, vue.watch)(() => props.entry, (entry) => {
|
|
2794
1920
|
if (!entry || entry === syncedEntry) return;
|
|
2795
1921
|
syncedEntry = entry;
|
|
2796
|
-
|
|
2797
|
-
store.
|
|
1922
|
+
if (!store) return;
|
|
1923
|
+
store.mainFile = require_store.toReplFilename(entry);
|
|
1924
|
+
store.setActive(require_store.toReplFilename(entry));
|
|
2798
1925
|
});
|
|
2799
1926
|
(0, vue.watch)(() => props.activeView, (view) => {
|
|
2800
1927
|
if (view !== "runtime") handleClosePopup();
|
|
@@ -2819,13 +1946,29 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2819
1946
|
}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_2$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
|
|
2820
1947
|
class: "docs-playground-runtime__viewport",
|
|
2821
1948
|
style: (0, vue.normalizeStyle)(viewportStyle.value)
|
|
2822
|
-
}, [(0, vue.
|
|
1949
|
+
}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
|
|
1950
|
+
key: 0,
|
|
1951
|
+
ref_key: "sandboxRef",
|
|
1952
|
+
ref: sandboxRef,
|
|
1953
|
+
files: __props.files,
|
|
1954
|
+
entry: __props.entry,
|
|
1955
|
+
options: __props.options,
|
|
1956
|
+
"preview-scroller": __props.previewScroller,
|
|
1957
|
+
"clear-console": clearConsole,
|
|
1958
|
+
onError: handleLocalError
|
|
1959
|
+
}, null, 8, [
|
|
1960
|
+
"files",
|
|
1961
|
+
"entry",
|
|
1962
|
+
"options",
|
|
1963
|
+
"preview-scroller"
|
|
1964
|
+
])) : (0, vue.unref)(store) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
|
|
1965
|
+
key: 1,
|
|
2823
1966
|
ref_key: "sandboxRef",
|
|
2824
1967
|
ref: sandboxRef,
|
|
2825
1968
|
store: (0, vue.unref)(store),
|
|
2826
1969
|
"auto-store-init": false,
|
|
2827
1970
|
"preview-options": mergedPreviewOptions.value
|
|
2828
|
-
}, null, 8, ["store", "preview-options"])], 4)], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
1971
|
+
}, null, 8, ["store", "preview-options"])) : (0, vue.createCommentVNode)("v-if", true)], 4)], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
2829
1972
|
key: 1,
|
|
2830
1973
|
ref_key: "runtimeRoot",
|
|
2831
1974
|
ref: runtimeRoot,
|
|
@@ -2863,7 +2006,22 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2863
2006
|
}, [(0, vue.createElementVNode)("div", _hoisted_8, [(0, vue.createElementVNode)("div", {
|
|
2864
2007
|
class: "docs-playground-runtime__viewport",
|
|
2865
2008
|
style: (0, vue.normalizeStyle)(viewportStyle.value)
|
|
2866
|
-
}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(
|
|
2009
|
+
}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
|
|
2010
|
+
key: sandboxKey.value,
|
|
2011
|
+
ref_key: "sandboxRef",
|
|
2012
|
+
ref: sandboxRef,
|
|
2013
|
+
files: __props.files,
|
|
2014
|
+
entry: __props.entry,
|
|
2015
|
+
options: __props.options,
|
|
2016
|
+
"preview-scroller": __props.previewScroller,
|
|
2017
|
+
"clear-console": clearConsole,
|
|
2018
|
+
onError: handleLocalError
|
|
2019
|
+
}, null, 8, [
|
|
2020
|
+
"files",
|
|
2021
|
+
"entry",
|
|
2022
|
+
"options",
|
|
2023
|
+
"preview-scroller"
|
|
2024
|
+
])) : (0, vue.unref)(store) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
|
|
2867
2025
|
key: sandboxKey.value,
|
|
2868
2026
|
ref_key: "sandboxRef",
|
|
2869
2027
|
ref: sandboxRef,
|
|
@@ -2871,7 +2029,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2871
2029
|
"auto-store-init": false,
|
|
2872
2030
|
"clear-console": clearConsole,
|
|
2873
2031
|
"preview-options": mergedPreviewOptions.value
|
|
2874
|
-
}, null, 8, ["store", "preview-options"]))], 4)]), canExpandPreview.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
|
2032
|
+
}, null, 8, ["store", "preview-options"])) : (0, vue.createCommentVNode)("v-if", true)], 4)]), canExpandPreview.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
|
2875
2033
|
key: 0,
|
|
2876
2034
|
type: "button",
|
|
2877
2035
|
class: (0, vue.normalizeClass)(["docs-playground__expand", { "is-expanded": previewExpanded.value }]),
|
|
@@ -2922,6 +2080,10 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2922
2080
|
type: Boolean,
|
|
2923
2081
|
default: false
|
|
2924
2082
|
},
|
|
2083
|
+
local: {
|
|
2084
|
+
type: Boolean,
|
|
2085
|
+
default: true
|
|
2086
|
+
},
|
|
2925
2087
|
previewOptions: {},
|
|
2926
2088
|
locale: {}
|
|
2927
2089
|
},
|
|
@@ -2940,7 +2102,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
2940
2102
|
const locale = (0, vue.computed)(() => props.locale || inheritedLocale.locale.value);
|
|
2941
2103
|
(0, _deot_docs_locale.provideLocale)(locale);
|
|
2942
2104
|
const { t } = (0, _deot_docs_locale.useLocale)(locale);
|
|
2943
|
-
const initialFiles = Object.keys(props.files).length ? { ...props.files } : { [DEFAULT_ENTRY]: props.modelValue || NEW_SFC_CODE };
|
|
2105
|
+
const initialFiles = Object.keys(props.files).length ? { ...props.files } : { [require_cdn.DEFAULT_ENTRY]: props.modelValue || require_cdn.NEW_SFC_CODE };
|
|
2944
2106
|
const initialEntry = props.entry && initialFiles[props.entry] !== void 0 ? props.entry : Object.keys(initialFiles)[0];
|
|
2945
2107
|
const sourceFiles = (0, vue.ref)(initialFiles);
|
|
2946
2108
|
const currentEntry = (0, vue.ref)(initialEntry);
|
|
@@ -3080,7 +2242,8 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
3080
2242
|
"preview-options": __props.previewOptions,
|
|
3081
2243
|
"preview-inset": __props.previewInset,
|
|
3082
2244
|
"preview-scroller": __props.previewScroller,
|
|
3083
|
-
|
|
2245
|
+
local: __props.local,
|
|
2246
|
+
expandable: __props.local ? false : __props.expandable,
|
|
3084
2247
|
styleless: true,
|
|
3085
2248
|
title: __props.title,
|
|
3086
2249
|
id: __props.id,
|
|
@@ -3096,6 +2259,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
3096
2259
|
"preview-options",
|
|
3097
2260
|
"preview-inset",
|
|
3098
2261
|
"preview-scroller",
|
|
2262
|
+
"local",
|
|
3099
2263
|
"expandable",
|
|
3100
2264
|
"title",
|
|
3101
2265
|
"id",
|
|
@@ -3149,7 +2313,8 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
3149
2313
|
"preview-options": __props.previewOptions,
|
|
3150
2314
|
"preview-inset": __props.previewInset,
|
|
3151
2315
|
"preview-scroller": __props.previewScroller,
|
|
3152
|
-
|
|
2316
|
+
local: __props.local,
|
|
2317
|
+
expandable: __props.local ? false : __props.expandable,
|
|
3153
2318
|
"hide-chrome": true,
|
|
3154
2319
|
title: __props.title,
|
|
3155
2320
|
id: __props.id,
|
|
@@ -3167,6 +2332,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
3167
2332
|
"preview-options",
|
|
3168
2333
|
"preview-inset",
|
|
3169
2334
|
"preview-scroller",
|
|
2335
|
+
"local",
|
|
3170
2336
|
"expandable",
|
|
3171
2337
|
"title",
|
|
3172
2338
|
"id",
|
|
@@ -3196,35 +2362,35 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
3196
2362
|
});
|
|
3197
2363
|
//#endregion
|
|
3198
2364
|
exports.CodePreview = code_preview_default;
|
|
3199
|
-
exports.DEFAULT_CDN_URL = DEFAULT_CDN_URL;
|
|
2365
|
+
exports.DEFAULT_CDN_URL = require_cdn.DEFAULT_CDN_URL;
|
|
3200
2366
|
exports.Editor = Editor;
|
|
3201
|
-
exports.PREVIEW_SCROLLER_USE_CODE = PREVIEW_SCROLLER_USE_CODE;
|
|
3202
|
-
exports.PREVIEW_SCROLL_CONTENT_CLASS = PREVIEW_SCROLL_CONTENT_CLASS;
|
|
3203
|
-
exports.PREVIEW_SCROLL_HTML_CLASS = PREVIEW_SCROLL_HTML_CLASS;
|
|
2367
|
+
exports.PREVIEW_SCROLLER_USE_CODE = require_store.PREVIEW_SCROLLER_USE_CODE;
|
|
2368
|
+
exports.PREVIEW_SCROLL_CONTENT_CLASS = require_store.PREVIEW_SCROLL_CONTENT_CLASS;
|
|
2369
|
+
exports.PREVIEW_SCROLL_HTML_CLASS = require_store.PREVIEW_SCROLL_HTML_CLASS;
|
|
3204
2370
|
exports.Playground = playground_default;
|
|
3205
|
-
exports.PlaygroundService = PlaygroundService;
|
|
3206
|
-
exports.applyPlaygroundImportMapOverride = applyPlaygroundImportMapOverride;
|
|
3207
|
-
exports.applyPlaygroundStyleOverride = applyPlaygroundStyleOverride;
|
|
3208
|
-
exports.clearPlaygroundMaps = clearPlaygroundMaps;
|
|
3209
|
-
exports.createBuiltinImports = createBuiltinImports;
|
|
3210
|
-
exports.createBuiltinStyles = createBuiltinStyles;
|
|
3211
|
-
exports.createRuntimePreviewOptions = createRuntimePreviewOptions;
|
|
3212
|
-
exports.getPlaygroundImportMapOverrides = getPlaygroundImportMapOverrides;
|
|
3213
|
-
exports.getPlaygroundSiteModules = getPlaygroundSiteModules;
|
|
3214
|
-
exports.getPlaygroundSiteStyles = getPlaygroundSiteStyles;
|
|
3215
|
-
exports.getPlaygroundStyleOverrides = getPlaygroundStyleOverrides;
|
|
2371
|
+
exports.PlaygroundService = require_store.PlaygroundService;
|
|
2372
|
+
exports.applyPlaygroundImportMapOverride = require_store.applyPlaygroundImportMapOverride;
|
|
2373
|
+
exports.applyPlaygroundStyleOverride = require_store.applyPlaygroundStyleOverride;
|
|
2374
|
+
exports.clearPlaygroundMaps = require_store.clearPlaygroundMaps;
|
|
2375
|
+
exports.createBuiltinImports = require_cdn.createBuiltinImports;
|
|
2376
|
+
exports.createBuiltinStyles = require_cdn.createBuiltinStyles;
|
|
2377
|
+
exports.createRuntimePreviewOptions = require_store.createRuntimePreviewOptions;
|
|
2378
|
+
exports.getPlaygroundImportMapOverrides = require_store.getPlaygroundImportMapOverrides;
|
|
2379
|
+
exports.getPlaygroundSiteModules = require_store.getPlaygroundSiteModules;
|
|
2380
|
+
exports.getPlaygroundSiteStyles = require_store.getPlaygroundSiteStyles;
|
|
2381
|
+
exports.getPlaygroundStyleOverrides = require_store.getPlaygroundStyleOverrides;
|
|
3216
2382
|
exports.highlightCode = highlightCode;
|
|
3217
2383
|
exports.highlightCodeByLanguage = highlightCodeByLanguage;
|
|
3218
|
-
exports.isSafePlaygroundHref = isSafePlaygroundHref;
|
|
3219
|
-
exports.normalizeCdnURL = normalizeCdnURL;
|
|
2384
|
+
exports.isSafePlaygroundHref = require_store.isSafePlaygroundHref;
|
|
2385
|
+
exports.normalizeCdnURL = require_cdn.normalizeCdnURL;
|
|
3220
2386
|
exports.registerVueHighlight = registerVueHighlight;
|
|
3221
|
-
exports.removePlaygroundImportMapOverride = removePlaygroundImportMapOverride;
|
|
3222
|
-
exports.removePlaygroundStyleOverride = removePlaygroundStyleOverride;
|
|
2387
|
+
exports.removePlaygroundImportMapOverride = require_store.removePlaygroundImportMapOverride;
|
|
2388
|
+
exports.removePlaygroundStyleOverride = require_store.removePlaygroundStyleOverride;
|
|
3223
2389
|
exports.resolveHighlightLanguage = resolveHighlightLanguage;
|
|
3224
2390
|
exports.resolvePlaygroundTitleId = resolvePlaygroundTitleId;
|
|
3225
|
-
exports.setPlaygroundImportMapOverrides = setPlaygroundImportMapOverrides;
|
|
3226
|
-
exports.setPlaygroundSiteModules = setPlaygroundSiteModules;
|
|
3227
|
-
exports.setPlaygroundSiteStyles = setPlaygroundSiteStyles;
|
|
3228
|
-
exports.setPlaygroundStyleOverrides = setPlaygroundStyleOverrides;
|
|
2391
|
+
exports.setPlaygroundImportMapOverrides = require_store.setPlaygroundImportMapOverrides;
|
|
2392
|
+
exports.setPlaygroundSiteModules = require_store.setPlaygroundSiteModules;
|
|
2393
|
+
exports.setPlaygroundSiteStyles = require_store.setPlaygroundSiteStyles;
|
|
2394
|
+
exports.setPlaygroundStyleOverrides = require_store.setPlaygroundStyleOverrides;
|
|
3229
2395
|
exports.slugifyPlaygroundTitle = slugifyPlaygroundTitle;
|
|
3230
2396
|
exports.vueHighlight = vueHighlight;
|