Merge branch 'main' into pdan

pdanpdan · pdanpdan · commit e0b23a9a184d · 2024-01-03T12:19:16.000+02:00
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@pdanpdan/vue-repl",
   "version": "1.0.19",
   "description": "Vue component for editing Vue components",
-  "packageManager": "pnpm@8.12.1",
+  "packageManager": "pnpm@8.14.0",
   "type": "module",
   "main": "dist/ssr-stub.js",
   "module": "dist/vue-repl.js",
@@ -96,9 +96,9 @@
     "lint-staged": "^15.2.0",
     "monaco-editor-core": "^0.45.0",
     "prettier": "^3.1.1",
-    "simple-git-hooks": "^2.9.0",
     "shikiji": "^0.9.17",
     "shikiji-monaco": "^0.9.17",
+    "simple-git-hooks": "^2.9.0",
     "sucrase": "^3.35.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
diff --git a/src/index.ts b/src/index.ts
@@ -29,7 +29,7 @@ export interface ReplProps {
     customCodeSSR?: {
       importCode?: string
       useCode?: string
-    },
+    }
     customCode?: {
       importCode?: string
       useCode?: string
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
@@ -20,6 +20,7 @@ const props = defineProps<{ show: boolean; ssr: boolean }>()
 
 const store = inject('store') as Store
 const clearConsole = inject('clear-console') as Ref<boolean>
+const theme = inject('theme') as Ref<'dark' | 'light'>
 
 const previewOptions = inject('preview-options') as ReplProps['previewOptions']
 
@@ -85,6 +86,7 @@ function createSandbox() {
     importMap.imports.vue = store.state.vueRuntimeURL
   }
   const sandboxSrc = srcdoc
+    .replace(/<html>/, `<html class="${theme.value}">`)
     .replace(/<!--IMPORT_MAP-->/, JSON.stringify(importMap))
     .replace(
       /<!-- PREVIEW-OPTIONS-HEAD-HTML -->/,
@@ -280,7 +282,12 @@ defineExpose({ reload })
 </script>
 
 <template>
-  <div class="iframe-container" v-show="show" ref="container"></div>
+  <div
+    class="iframe-container"
+    :class="theme"
+    v-show="show"
+    ref="container"
+  ></div>
   <Message :err="runtimeError" />
   <Message v-if="!runtimeError" :warn="runtimeWarning" />
 </template>
@@ -293,4 +300,7 @@ defineExpose({ reload })
   border: none;
   background-color: #fff;
 }
+.iframe-container.dark :deep(iframe) {
+  background-color: #1e1e1e;
+}
 </style>
