feat: support live demo (#1905)

* feat: support live code * feat: split live plugin * feat: enabled by live config * feat: add error catcher * docs: add docs * docs: add docs * feat: update single file logic * docs: rm docs * feat: put Live Components into theme-default slots * feat: update regexp & fix enable logic * feat: make LiveEditor derivate Editor
umijs · Oct 18, 2023 · 5a588c6 · 5a588c6
1 parent 52d8774
commit 5a588c6
Show file tree

Hide file tree

Showing 27 changed files with 1,024 additions and 460 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,4 @@
 /target
 /compiled/crates
 .swc
+/server
diff --git a/examples/normal/.dumirc.ts b/examples/normal/.dumirc.ts
@@ -6,5 +6,6 @@ export default {
   themeConfig: { name: '示例' },
   mfsu: false,
   apiParser: {},
+  live: true,
   resolve: { entryFile: './src/index.ts' },
 };
diff --git a/examples/normal/docs/index.md b/examples/normal/docs/index.md
@@ -30,7 +30,7 @@ features:
 代码块 demo
 
 ```jsx
-import react from 'react';
+import React from 'react';
 
 export default () => <>Hello first code block demo!</>;
 ```

diff --git a/examples/normal/package.json b/examples/normal/package.json
@@ -8,6 +8,7 @@
     "start": "npm run dev"
   },
   "dependencies": {
+    "antd": "^5.0.0",
     "react": "^18.2.0"
   },
   "devDependencies": {

diff --git a/examples/normal/src/Foo/demo/work.tsx b/examples/normal/src/Foo/demo/work.tsx
@@ -2,5 +2,12 @@
  * title: 我是标题
  * description: 我是简介，我可以用 `Markdown` 来编写
  */
+import { Button, Space } from 'antd';
+import React from 'react';
 
-export default () => 'External Demo Block';
+export default () => (
+  <Space direction="vertical">
+    <div>External Demo Block</div>
+    <Button>Great!</Button>
+  </Space>
+);
diff --git a/examples/normal/src/Foo/index.md b/examples/normal/src/Foo/index.md
@@ -1,7 +1,9 @@
 组件路由测试
 
 ```jsx
-export default () => 'Hello Foo!';
+import React from 'react';
+
+export default () => <div>Hello Foo!</div>;
 ```
 
 你好，Foo！

diff --git a/package.json b/package.json
@@ -122,6 +122,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-error-boundary": "^4.0.10",
     "react-intl": "^6.4.4",
+    "react-simple-code-editor": "^0.13.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-remove-comments": "^5.0.0",
     "rehype-stringify": "^9.0.3",
@@ -132,6 +133,7 @@
     "remark-rehype": "^10.1.0",
     "sass": "^1.64.1",
     "sitemap": "^7.1.1",
+    "sucrase": "^3.34.0",
     "umi": "^4.0.84",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2",
@@ -150,8 +152,10 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^18.17.1",
     "@types/pluralize": "^0.0.30",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.17",
     "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "^18.2.7",
     "@umijs/lint": "^4.0.84",
     "@umijs/plugins": "4.0.32",
     "dumi-theme-mobile": "workspace:*",
@@ -165,6 +169,7 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-packagejson": "^2.4.5",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "stylelint": "^15.10.2",
     "ts-node": "^10.9.1",
     "typescript": "~5.0.4",