@yl_lowcode/docs-theme 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,2 @@
+# vitepress-theme
+支持 React 组件展示 Demo 的主题

package/demo.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-// @ts-ignore
+// @ts-nocheck
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import { withBase } from 'vitepress'
 
-// @ts-ignore
 const props = defineProps<{
   component: any;
   code: { raw: string; html: string; srcPath: string };
@@ -16,17 +15,15 @@ const copied = ref(false);
 let previewRoot: any = null;
 let copyTimer: ReturnType<typeof setTimeout> | null = null;
 
-async function mountPreview() {
+function mountPreview() {
   if (!previewRef.value) return;
-  const [{ default: React }, { createRoot }] = await Promise.all([
-    import("react"),
-    import("react-dom/client"),
-  ]);
+  const React = (window as any).React;
+  const ReactDOM = (window as any).ReactDOM;
+  if (!React || !ReactDOM) return;
   previewRoot?.unmount();
-  previewRoot = createRoot(previewRef.value);
+  previewRoot = ReactDOM.createRoot(previewRef.value);
   previewRoot.render(React.createElement(props.component));
 }
-
 function openLive() {
   const url = `/playground.html?demo=${props.code.srcPath}`;
   window.open(withBase(url), "_blank");

package/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import DefaultTheme from "vitepress/theme";
 import Layout from "./layout.vue";
 import Demo from "./demo.vue";

package/layout.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-// @ts-ignore
+// @ts-nocheck
 import { useData } from "vitepress";
-// @ts-ignore
 import DefaultTheme from "vitepress/theme";
-// @ts-ignore
 import Playground from "./playground.vue";
-// @ts-ignore
 import { nextTick, provide } from "vue";
 
 const { frontmatter, isDark } = useData();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yl_lowcode/docs-theme",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "共享 VitePress 文档主题（React Demo 支持）",
   "type": "module",
   "main": "index.ts",

package/playground.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-// @ts-ignore
+// @ts-nocheck
 import { ref, inject, onMounted, onBeforeUnmount } from "vue";
-
 /**
  * 通用 Playground 组件
  *
@@ -31,12 +30,10 @@ onMounted(async () => {
   if (!matchKey) return;
 
   const rawCode = (await config.codeGlobs[matchKey]()).raw as string;
-  const [{ default: React }, { createRoot }, { transform }, userModules] = await Promise.all([
-    import("react"),
-    import("react-dom/client"),
-    import("sucrase"),
-    config.loadModules(),
-  ]);
+  const React = (window as any).React;
+  const ReactDOM = (window as any).ReactDOM;
+  const { transform } = await import("sucrase");
+  const userModules = await config.loadModules();
 
   // 编译函数：将 TSX 代码转换为可执行模块
   function compileCode(code: string, moduleMap: Record<string, any>) {
@@ -118,10 +115,10 @@ onMounted(async () => {
 
   function App() {
     const [code, setCode] = React.useState(rawCode);
-    const [Preview, setPreview] = React.useState<React.ComponentType | null>(
+    const [Preview, setPreview] = React.useState(
       () => compileCode(rawCode, moduleMap).component,
     );
-    const [error, setError] = React.useState<string | null>(
+    const [error, setError] = React.useState(
       () => compileCode(rawCode, moduleMap).error,
     );
 
@@ -205,7 +202,7 @@ onMounted(async () => {
     );
   }
 
-  reactRoot = createRoot(containerRef.value);
+  reactRoot = ReactDOM.createRoot(containerRef.value);
   reactRoot.render(React.createElement(App));
 });