feat(vitepress): support inject global

packages/genji-theme-vitepress/__tests__/.vitepress/theme/index.js

@@ -1,4 +1,12 @@
-import { Theme } from "../../../src";
+import { createTheme } from "../../../src";
+
+function display(fn) {
+  return fn();
+}
+
+const Theme = createTheme({
+  global: { display },
+});
 
 export default {
   extends: Theme,

packages/genji-theme-vitepress/__tests__/markdown-examples.md

@@ -1,6 +1,10 @@
-# Genji Markdown Extension
+# Genji Markdown Extensions
 
-Render a red block.
+Test Genji' built-in Markdown Extensions.
+
+## Basic Block
+
+It should render a red block.
 
 ```js
 display(() => {

packages/genji-theme-vitepress/src/Layout.vue

@@ -1,37 +1,41 @@
 <script setup>
 import { useRoute } from "vitepress";
 import DefaultTheme from "vitepress/theme";
-import { onMounted, watch } from "vue";
-import * as stdlib from "./stdlib";
+import { onMounted, watch, defineProps } from "vue";
 
 const { Layout } = DefaultTheme;
 
+const { global = {} } = defineProps(["global"]);
+
 const route = useRoute();
+
 watch(
   () => route.path,
   () => setTimeout(() => render())
 );
 
 onMounted(() => {
-  injectStdlib();
+  injectGlobal();
   render();
 });
 
-function injectStdlib() {
-  Object.assign(window, stdlib);
+function injectGlobal() {
+  Object.assign(window, global);
 }
 
 function render() {
-  const block = document.getElementsByClassName("language-js")[0];
-  if (!block) return;
-  const pre = document.getElementsByClassName("shiki")[0];
-  if (!pre) return;
-  const code = pre.textContent.replace(/\n/g, "");
-  const node = new Function(`return ${code}`)();
-  const cell = document.createElement("div");
-  cell.classList.add("genji-cell");
-  cell.appendChild(node);
-  block.parentNode.insertBefore(cell, block);
+  const blocks = document.getElementsByClassName("language-js");
+  if (!blocks.length) return;
+  for (const block of blocks) {
+    const pre = block.getElementsByClassName("shiki")[0];
+    if (!pre) return;
+    const code = pre.textContent.replace(/\n/g, "");
+    const node = new Function(`return ${code}`)();
+    const cell = document.createElement("div");
+    cell.classList.add("genji-cell");
+    cell.appendChild(node);
+    block.parentNode.insertBefore(cell, block);
+  }
 }
 </script>
 

packages/genji-theme-vitepress/src/index.js

@@ -1 +1 @@
-export { default as Theme } from "./theme";
+export { createTheme } from "./theme";

packages/genji-theme-vitepress/src/theme.js

@@ -1,8 +1,13 @@
+import { h } from "vue";
 import Layout from "./Layout.vue";
 import DefaultTheme from "vitepress/theme";
 import "./style.css";
 
-export default {
-  extends: DefaultTheme,
-  Layout: Layout,
-};
+export function createTheme({ global } = {}) {
+  return {
+    extends: DefaultTheme,
+    Layout: () => {
+      return h(Layout, { global });
+    },
+  };
+}