@yl_lowcode/docs-theme 0.0.1 → 0.0.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 ADDED
@@ -0,0 +1,2 @@
1
+ # vitepress-theme
2
+ 支持 React 组件展示 Demo 的主题
package/demo.vue CHANGED
@@ -1,9 +1,8 @@
1
1
  <script setup lang="ts">
2
- // @ts-ignore
2
+ // @ts-nocheck
3
3
  import { ref, onMounted, onBeforeUnmount } from "vue";
4
4
  import { withBase } from 'vitepress'
5
5
 
6
- // @ts-ignore
7
6
  const props = defineProps<{
8
7
  component: any;
9
8
  code: { raw: string; html: string; srcPath: string };
@@ -16,17 +15,15 @@ const copied = ref(false);
16
15
  let previewRoot: any = null;
17
16
  let copyTimer: ReturnType<typeof setTimeout> | null = null;
18
17
 
19
- async function mountPreview() {
18
+ function mountPreview() {
20
19
  if (!previewRef.value) return;
21
- const [{ default: React }, { createRoot }] = await Promise.all([
22
- import("react"),
23
- import("react-dom/client"),
24
- ]);
20
+ const React = (window as any).React;
21
+ const ReactDOM = (window as any).ReactDOM;
22
+ if (!React || !ReactDOM) return;
25
23
  previewRoot?.unmount();
26
- previewRoot = createRoot(previewRef.value);
24
+ previewRoot = ReactDOM.createRoot(previewRef.value);
27
25
  previewRoot.render(React.createElement(props.component));
28
26
  }
29
-
30
27
  function openLive() {
31
28
  const url = `/playground.html?demo=${props.code.srcPath}`;
32
29
  window.open(withBase(url), "_blank");
package/index.ts CHANGED
@@ -1,3 +1,4 @@
1
+ // @ts-nocheck
1
2
  import DefaultTheme from "vitepress/theme";
2
3
  import Layout from "./layout.vue";
3
4
  import Demo from "./demo.vue";
package/layout.vue CHANGED
@@ -1,11 +1,8 @@
1
1
  <script setup lang="ts">
2
- // @ts-ignore
2
+ // @ts-nocheck
3
3
  import { useData } from "vitepress";
4
- // @ts-ignore
5
4
  import DefaultTheme from "vitepress/theme";
6
- // @ts-ignore
7
5
  import Playground from "./playground.vue";
8
- // @ts-ignore
9
6
  import { nextTick, provide } from "vue";
10
7
 
11
8
  const { frontmatter, isDark } = useData();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yl_lowcode/docs-theme",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "共享 VitePress 文档主题(React Demo 支持)",
5
5
  "type": "module",
6
6
  "main": "index.ts",
package/playground.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <script setup lang="ts">
2
- // @ts-ignore
2
+ // @ts-nocheck
3
3
  import { ref, inject, onMounted, onBeforeUnmount } from "vue";
4
-
5
4
  /**
6
5
  * 通用 Playground 组件
7
6
  *
@@ -31,12 +30,10 @@ onMounted(async () => {
31
30
  if (!matchKey) return;
32
31
 
33
32
  const rawCode = (await config.codeGlobs[matchKey]()).raw as string;
34
- const [{ default: React }, { createRoot }, { transform }, userModules] = await Promise.all([
35
- import("react"),
36
- import("react-dom/client"),
37
- import("sucrase"),
38
- config.loadModules(),
39
- ]);
33
+ const React = (window as any).React;
34
+ const ReactDOM = (window as any).ReactDOM;
35
+ const { transform } = await import("sucrase");
36
+ const userModules = await config.loadModules();
40
37
 
41
38
  // 编译函数:将 TSX 代码转换为可执行模块
42
39
  function compileCode(code: string, moduleMap: Record<string, any>) {
@@ -118,10 +115,10 @@ onMounted(async () => {
118
115
 
119
116
  function App() {
120
117
  const [code, setCode] = React.useState(rawCode);
121
- const [Preview, setPreview] = React.useState<React.ComponentType | null>(
118
+ const [Preview, setPreview] = React.useState(
122
119
  () => compileCode(rawCode, moduleMap).component,
123
120
  );
124
- const [error, setError] = React.useState<string | null>(
121
+ const [error, setError] = React.useState(
125
122
  () => compileCode(rawCode, moduleMap).error,
126
123
  );
127
124
 
@@ -205,7 +202,7 @@ onMounted(async () => {
205
202
  );
206
203
  }
207
204
 
208
- reactRoot = createRoot(containerRef.value);
205
+ reactRoot = ReactDOM.createRoot(containerRef.value);
209
206
  reactRoot.render(React.createElement(App));
210
207
  });
211
208
 
@@ -10,6 +10,11 @@ function getMd(srcDir, options) {
10
10
  return mdPromise;
11
11
  }
12
12
 
13
+ // 配置文件变更时 VitePress 会重新加载插件,重置单例避免引用已销毁的 Shiki 实例
14
+ export function resetMd() {
15
+ mdPromise = null;
16
+ }
17
+
13
18
  export function shikiRawPlugin(options) {
14
19
  let srcDir = process.cwd();
15
20
 
@@ -18,6 +23,8 @@ export function shikiRawPlugin(options) {
18
23
  enforce: "pre",
19
24
  configResolved(config) {
20
25
  srcDir = config.root;
26
+ // 每次配置重新解析时重置 markdown renderer,避免 Shiki disposed 错误
27
+ resetMd();
21
28
  },
22
29
  async load(id) {
23
30
  if (!id.endsWith("?raw")) return null;