From c830fc434a1781523af332d289957bc485f51a0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Sun, 11 Feb 2024 09:46:10 +0800 Subject: [PATCH] feat: add `previewTheme` prop Whether to follow the theme in sandbox --- src/Repl.vue | 3 +++ src/output/Preview.vue | 32 +++++++++++++++++++++----------- src/output/srcdoc.html | 3 +-- test/main.ts | 7 ++++++- 4 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/Repl.vue b/src/Repl.vue index 4b14ebfb..7bb85c68 100644 --- a/src/Repl.vue +++ b/src/Repl.vue @@ -8,6 +8,7 @@ import EditorContainer from './editor/EditorContainer.vue' export interface Props { theme?: 'dark' | 'light' + previewTheme?: boolean editor: EditorComponentType store?: Store autoResize?: boolean @@ -31,6 +32,7 @@ export interface Props { const props = withDefaults(defineProps(), { theme: 'light', + previewTheme: false, store: () => useStore(), autoResize: true, showCompileOutput: true, @@ -69,6 +71,7 @@ provide('tsconfig', toRef(props, 'showTsConfig')) provide('clear-console', toRef(props, 'clearConsole')) provide('preview-options', props.previewOptions) provide('theme', toRef(props, 'theme')) +provide('preview-theme', toRef(props, 'previewTheme')) /** * Reload the preview iframe */ diff --git a/src/output/Preview.vue b/src/output/Preview.vue index 0c182031..a73b3a55 100644 --- a/src/output/Preview.vue +++ b/src/output/Preview.vue @@ -21,6 +21,7 @@ const props = defineProps<{ show: boolean; ssr: boolean }>() const store = inject(injectKeyStore)! const clearConsole = inject>('clear-console')! const theme = inject>('theme')! +const previewTheme = inject>('preview-theme')! const previewOptions = inject('preview-options') @@ -49,15 +50,16 @@ watch( ) // reset theme -watch( - () => theme.value, - (value) => { - const html = sandbox.contentDocument?.documentElement - if (html) { - html.className = value - } - }, -) +watch([theme, previewTheme], ([theme, previewTheme]) => { + if (!previewTheme) return + + const html = sandbox.contentDocument?.documentElement + if (html) { + html.className = theme + } else { + createSandbox() + } +}) onUnmounted(() => { proxy.destroy() @@ -88,7 +90,10 @@ function createSandbox() { const importMap = store.getImportMap() const sandboxSrc = srcdoc - .replace(//, ``) + .replace( + //, + ``, + ) .replace(//, JSON.stringify(importMap)) .replace( //, @@ -281,7 +286,12 @@ defineExpose({ reload }) diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html index 82d4d7db..189c19ca 100644 --- a/src/output/srcdoc.html +++ b/src/output/srcdoc.html @@ -3,8 +3,7 @@