docs: demo & docs

Author: phphe

docs/.vitepress/theme/index.ts

@@ -1,17 +1,19 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import './style.css'
+import { h } from "vue";
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import "./style.css";
+import DemoIframe from "../../components/DemoIframe.vue";
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
+    });
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-  }
-} satisfies Theme
+    app.component("DemoIframe", DemoIframe);
+  },
+} satisfies Theme;

docs/components/DemoIframe.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <iframe :src="fullUrl" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {},
+  },
+  computed: {
+    fullUrl() {
+      return `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/he-tree-react#${this.url}`
+    },
+  },
+  methods: {},
+}
+</script>
+
+<style scoped>
+iframe {
+  width: 100%;
+  border: 0;
+  min-height: 200px;
+}
+</style>

docs/markdown-examples.md

@@ -6,6 +6,8 @@ This page demonstrates some of the built-in markdown extensions provided by Vite
 
 VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
 
+<DemoIframe url="/base_tree_data" />
+
 **Input**
 
 ````md

package.json

@@ -46,8 +46,10 @@
     "type-fest": "^4.10.2"
   },
   "devDependencies": {
+    "@edge-runtime/vm": "^3.2.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@unocss/reset": "^0.58.4",
@@ -57,7 +59,9 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "happy-dom": "^13.6.2",
     "jsdom": "^24.0.0",
+    "react-router-dom": "^6.22.2",
     "react-test-renderer": "^18.2.0",
     "typescript": "^5.2.2",
     "unocss": "^0.58.4",

pnpm-lock.yaml

@@ -1,7 +1,6 @@
-import example_data from "./examples/example_data.json";
-import { sortFlatData, useHeTree, updateCheckedInFlatData } from "../lib/HeTree";
-import { useState } from "react";
-import { useImmer } from "use-immer";
+import React, { lazy, Suspense } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
 
 function App() {
   // const [flatData, setflatData] = useState(() => {

src/App.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+export default function PageLayout(props: { children: React.ReactNode }) {
+  return <div className="page-layout">
+    {props.children}
+    <style>{`
+      body{
+        margin: 0;
+        background-color: #fff9e6;
+      }    
+    `}</style>
+  </div>
+}

src/PageLayout.tsx

@@ -2,12 +2,34 @@
 // import '@unocss/reset/tailwind.css'
 // import '@unocss/reset/tailwind-compat.css'
 import 'virtual:uno.css'
-import React from 'react'
+import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import PageLayout from './PageLayout.tsx';
+
+// router
+const Pages = {
+  home: lazy(() => import("./pages/index.tsx")),
+  base_tree_data: lazy(() => import("./pages/base_tree_data.tsx"))
+}
+const router = createHashRouter([
+  {
+    path: "/",
+    element: <Pages.home />,
+  },
+  {
+    path: "/base_tree_data",
+    element: <Pages.base_tree_data />,
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    {/* <App /> */}
+    <PageLayout>
+      <Suspense fallback={<span>loading</span>}>
+        <RouterProvider router={router} />
+      </Suspense>
+    </PageLayout>
   </React.StrictMode>,
 )