fix: vitepress runtime issue & support node 18/vitepress@rc (break ch…

…ange)

docs/package.json

@@ -1,5 +1,6 @@
 {
   "name": "docs",
+  "type": "module",
   "version": "1.0.0",
   "description": "description for vitepress-plugin-sandpack",
   "scripts": {
@@ -9,6 +10,6 @@
   },
   "devDependencies": {
     "highlight.js": "^11.8.0",
-    "vitepress": "1.0.0-beta.6"
+    "vitepress": "^1.0.0-rc.4"
   }
 }

package.json

@@ -22,10 +22,17 @@
   },
   "license": "MIT",
   "author": "jerrywu001 <57242263@163.com>",
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
+  "main": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
-  "typings": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist",
     "package.json",
@@ -53,8 +60,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-typescript": "^11.0.3",
     "babel-loader": "^9.1.3",
@@ -68,7 +75,7 @@
     "lint-staged": "^13.2.3",
     "npm": "^9.8.1",
     "typescript": "^5.1.6",
-    "vite-plugin-dts": "^3.4.0",
+    "vite-plugin-dts": "^3.5.1",
     "vue-tsc": "^1.8.8"
   },
   "peerDependencies": {
@@ -88,7 +95,6 @@
     }
   },
   "engines": {
-    "node": ">=16",
-    "npm": ">=7"
+    "node": ">=16"
   }
 }

src/components/Sandbox.vue

@@ -13,10 +13,8 @@
 import * as allThemes from '@codesandbox/sandpack-themes';
 import { getSandpackFiles, getCustomSetupFromProps, parsedBoolean, getSandpackOptions } from './SandpackUtil';
 import { Sandpack, type SandpackFiles } from 'sandpack-vue3';
-import { computed, onBeforeMount, ref, useSlots, watch } from 'vue';
+import { computed, nextTick, onBeforeMount, onMounted, ref, useSlots, watch } from 'vue';
 import { sandboxProps, type Theme } from './prop';
-// @ts-ignore
-import { useData } from 'vitepress';
 
 const props = defineProps(sandboxProps);
 
@@ -33,7 +31,8 @@ const coderHeightStyle =
   computed(() => coderHeight.value ? `${coderHeight.value}px` : 'var(--sp-layout-height)');
 
 const slots = useSlots();
-const { isDark } = useData();
+// const { isDark } = useData();
+const isDark = ref(false);
 
 const docsTheme = computed(
   () => isDark.value
@@ -45,9 +44,33 @@ const resolveFiles = async () => {
   files.value = await getSandpackFiles(props, slots);
 };
 
+const detectHtmlDarkMode = () => {
+  if (typeof document !== 'undefined' && document.documentElement) {
+    isDark.value = document.documentElement.classList.contains('dark');
+  }
+};
+
 watch(props, resolveFiles);
 
 onBeforeMount(resolveFiles);
+
+onMounted(() => {
+  nextTick(() => {
+    if (typeof document !== 'undefined' && document.documentElement) {
+      const mb = new MutationObserver((mutations) => {
+        const dom = mutations[0].target as HTMLElement;
+        if (dom) detectHtmlDarkMode();
+      });
+
+      mb.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+
+    detectHtmlDarkMode();
+  });
+});
 </script>
 
 <style>

vite.config.ts

@@ -16,8 +16,7 @@ export default defineConfig({
     lib: {
       fileName: (type) => {
         if (type === 'es') return 'esm/index.js';
-        if (type === 'cjs') return 'index.js';
-        return 'index.js';
+        return 'index.cjs';
       },
       entry: path.resolve(__dirname, 'src/index.ts'),
       formats: ['es', 'cjs'],