@rspress/plugin-playground 0.0.0-next-20230925114748

package/dist/web/esm/index.js

@@ -0,0 +1,321 @@
+// src/web/index.ts
+import { default as default2, loader as loader2, EditorProps } from "@monaco-editor/react";
+
+// src/web/editor.tsx
+import { jsx as _jsx } from "react/jsx-runtime";
+import MonacoEditor, { loader } from "@monaco-editor/react";
+
+// src/web/constant.ts
+var DEFAULT_BABEL_URL = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.20/babel.min.js";
+var DEFAULT_MONACO_URL = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs";
+
+// src/web/editor.tsx
+function initLoader() {
+  let loaderConfig = {
+    paths: {
+      vs: DEFAULT_MONACO_URL
+    }
+  };
+  try {
+    const keys = Object.keys(__PLAYGROUND_MONACO_LOADER__);
+    if (keys.length > 0) {
+      loaderConfig = __PLAYGROUND_MONACO_LOADER__;
+    }
+  } catch (e) {
+  }
+  loader.config(loaderConfig);
+}
+initLoader();
+function getMonacoOptions() {
+  try {
+    return __PLAYGROUND_MONACO_OPTIONS__;
+  } catch (e) {
+  }
+  return {};
+}
+function Editor(props) {
+  const { options, className = "", ...rest } = props || {};
+  return /* @__PURE__ */ _jsx("div", {
+    className: `rspress-playground-editor ${className}`,
+    children: /* @__PURE__ */ _jsx(MonacoEditor, {
+      ...rest,
+      theme: "light",
+      options: {
+        minimap: {
+          enabled: true,
+          autohide: true
+        },
+        fontSize: 14,
+        lineNumbersMinChars: 7,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        wordBasedSuggestions: true,
+        quickSuggestions: true,
+        scrollbar: {
+          verticalScrollbarSize: 8,
+          horizontalScrollbarSize: 8
+        },
+        scrollPredominantAxis: false,
+        ...getMonacoOptions(),
+        ...options
+      }
+    })
+  });
+}
+
+// src/web/runner.tsx
+import { jsx as _jsx2 } from "react/jsx-runtime";
+import React, { Component } from "react";
+
+// src/web/ast.ts
+function createVariableDeclaration(id, init) {
+  return {
+    type: "VariableDeclaration",
+    declarations: [
+      {
+        type: "VariableDeclarator",
+        id: typeof id === "string" ? {
+          type: "Identifier",
+          name: id
+        } : id,
+        init
+      }
+    ],
+    kind: "const"
+  };
+}
+function createObjectPattern(names) {
+  return {
+    type: "ObjectPattern",
+    properties: names.map((name) => ({
+      type: "ObjectProperty",
+      key: {
+        type: "Identifier",
+        name
+      },
+      computed: false,
+      method: false,
+      shorthand: true,
+      value: {
+        type: "Identifier",
+        name
+      }
+    }))
+  };
+}
+function createGetImport(name, getDefault) {
+  return {
+    type: "CallExpression",
+    callee: {
+      type: "Identifier",
+      name: "__get_import"
+    },
+    arguments: [
+      {
+        type: "StringLiteral",
+        value: name
+      },
+      {
+        type: "BooleanLiteral",
+        value: Boolean(getDefault)
+      }
+    ]
+  };
+}
+
+// src/web/utils.ts
+var loadingMap = /* @__PURE__ */ new Map();
+function loadScript(url) {
+  const exists = loadingMap.get(url);
+  if (exists) {
+    return exists;
+  }
+  const n = new Promise((resolve) => {
+    const e = document.createElement("script");
+    e.src = url;
+    e.onload = () => resolve();
+    document.body.appendChild(e);
+  });
+  loadingMap.set(url, n);
+  return n;
+}
+
+// src/web/babel.ts
+async function getBabel() {
+  if (!window.Babel) {
+    let babelUrl = DEFAULT_BABEL_URL;
+    try {
+      const u = __PLAYGROUND_BABEL_URL__;
+      if (u) {
+        babelUrl = u;
+      }
+    } catch (e) {
+    }
+    await loadScript(babelUrl);
+  }
+  return window.Babel;
+}
+
+// src/web/runner.tsx
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var Runner = class extends Component {
+  static getDerivedStateFromError(error) {
+    return {
+      error,
+      comp: null
+    };
+  }
+  waitCompile(targetCode) {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.doCompile(targetCode);
+    }, 600);
+  }
+  async doCompile(targetCode) {
+    const { language, getImport } = this.props;
+    const babel = await getBabel();
+    try {
+      const presets = [
+        [
+          babel.availablePresets.react
+        ],
+        [
+          babel.availablePresets.env,
+          {
+            modules: "commonjs"
+          }
+        ]
+      ];
+      if (language === "tsx" || language === "ts") {
+        presets.unshift([
+          babel.availablePresets.typescript,
+          {
+            allExtensions: true,
+            isTSX: language === "tsx"
+          }
+        ]);
+      }
+      const result = babel.transform(targetCode, {
+        sourceType: "module",
+        presets,
+        plugins: [
+          {
+            visitor: {
+              ImportDeclaration(path) {
+                const pkg = path.node.source.value;
+                const code = [];
+                for (const specifier of path.node.specifiers) {
+                  if (specifier.type === "ImportDefaultSpecifier") {
+                    code.push(createVariableDeclaration(specifier.local.name, createGetImport(pkg, true)));
+                  }
+                  if (specifier.type === "ImportNamespaceSpecifier") {
+                    code.push(createVariableDeclaration(specifier.local.name, createGetImport(pkg)));
+                  }
+                  if (specifier.type === "ImportSpecifier") {
+                    code.push(createVariableDeclaration(createObjectPattern([
+                      specifier.local.name
+                    ]), createGetImport(pkg)));
+                  }
+                }
+                path.replaceWithMultiple(code);
+              }
+            }
+          }
+        ]
+      });
+      if (targetCode !== this.props.code || !result || !result.code) {
+        return;
+      }
+      const runExports = {};
+      const func = new Function("__get_import", "exports", result.code);
+      func(getImport, runExports);
+      if (runExports.default) {
+        this.setState({
+          error: void 0,
+          comp: /* @__PURE__ */ React.createElement(runExports.default)
+        });
+        return;
+      }
+      this.setState({
+        error: new Error("No default export"),
+        comp: null
+      });
+    } catch (e) {
+      if (targetCode !== this.props.code) {
+        return;
+      }
+      console.error(e);
+      this.setState({
+        error: e,
+        comp: null
+      });
+    }
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error);
+    console.error(errorInfo);
+  }
+  componentDidMount() {
+    this.doCompile(this.props.code);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.code !== this.props.code) {
+      this.waitCompile(this.props.code);
+    }
+  }
+  render() {
+    const { className = "", code, language, getImport, ...rest } = this.props;
+    const { error, comp } = this.state;
+    if (error) {
+      return /* @__PURE__ */ _jsx2("div", {
+        className: `rspress-playground-runner ${className}`,
+        ...rest,
+        children: /* @__PURE__ */ _jsx2("span", {
+          style: {
+            color: "red"
+          },
+          children: error.message
+        })
+      });
+    }
+    return /* @__PURE__ */ _jsx2("div", {
+      className: `rspress-playground-runner ${className}`,
+      ...rest,
+      children: comp
+    });
+  }
+  constructor(props) {
+    super(props);
+    _define_property(this, "timer", void 0);
+    this.state = {
+      error: void 0,
+      comp: null
+    };
+    this.doCompile = this.doCompile.bind(this);
+    this.waitCompile = this.waitCompile.bind(this);
+  }
+};
+export {
+  Editor,
+  default2 as MonacoEditor,
+  loader2 as MonacoEditorLoader,
+  EditorProps as MonacoEditorProps,
+  Runner
+};
+
+//# sourceMappingURL=index.js.map

package/dist/web/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["MonacoEditor","default","MonacoEditorLoader","loader","MonacoEditorProps","DEFAULT_BABEL_URL","DEFAULT_MONACO_URL","initLoader","loaderConfig","paths","vs","keys","Object","__PLAYGROUND_MONACO_LOADER__","length","e","config","getMonacoOptions","__PLAYGROUND_MONACO_OPTIONS__","Editor","props","options","className","rest","div","theme","minimap","enabled","autohide","fontSize","lineNumbersMinChars","scrollBeyondLastLine","automaticLayout","wordBasedSuggestions","quickSuggestions","scrollbar","verticalScrollbarSize","horizontalScrollbarSize","scrollPredominantAxis","React","Component","createVariableDeclaration","id","init","type","declarations","name","kind","createObjectPattern","names","properties","map","key","computed","method","shorthand","value","createGetImport","getDefault","callee","arguments","Boolean","loadingMap","Map","loadScript","url","exists","get","n","Promise","resolve","document","createElement","src","onload","body","appendChild","set","getBabel","window","Babel","babelUrl","u","__PLAYGROUND_BABEL_URL__","Runner","getDerivedStateFromError","error","comp","waitCompile","targetCode","timer","clearTimeout","setTimeout","doCompile","language","getImport","babel","presets","availablePresets","react","env","modules","unshift","typescript","allExtensions","isTSX","result","transform","sourceType","plugins","visitor","ImportDeclaration","path","pkg","node","source","code","specifier","specifiers","push","local","replaceWithMultiple","runExports","func","Function","setState","undefined","Error","console","componentDidCatch","errorInfo","componentDidMount","componentDidUpdate","prevProps","render","state","span","style","color","message","constructor","bind"],"sources":["../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/index.ts","../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/editor.tsx","../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/constant.ts","../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/runner.tsx","../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/ast.ts","../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/utils.ts","../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/babel.ts"],"sourcesContent":["export {\n  default as MonacoEditor,\n  loader as MonacoEditorLoader,\n  EditorProps as MonacoEditorProps,\n} from '@monaco-editor/react';\nexport { Editor } from './editor';\nexport { Runner } from './runner';\n","import React from 'react';\nimport MonacoEditor, {\n  loader,\n  EditorProps as MonacoEditorProps,\n} from '@monaco-editor/react';\nimport { DEFAULT_MONACO_URL } from './constant';\n\n// inject by builder in cli/index.ts\n// see: https://modernjs.dev/builder/api/config-source.html#sourcedefine\ndeclare global {\n  const __PLAYGROUND_MONACO_LOADER__: any;\n  const __PLAYGROUND_MONACO_OPTIONS__: any;\n}\n\nfunction initLoader() {\n  let loaderConfig = {\n    paths: {\n      vs: DEFAULT_MONACO_URL,\n    },\n  };\n\n  try {\n    const keys = Object.keys(__PLAYGROUND_MONACO_LOADER__);\n\n    if (keys.length > 0) {\n      loaderConfig = __PLAYGROUND_MONACO_LOADER__;\n    }\n  } catch (e) {\n    // ignore\n  }\n\n  loader.config(loaderConfig);\n}\ninitLoader();\n\nfunction getMonacoOptions() {\n  try {\n    return __PLAYGROUND_MONACO_OPTIONS__;\n  } catch (e) {\n    // ignore\n  }\n  return {};\n}\n\nexport type EditorProps = Partial<MonacoEditorProps>;\n\nexport function Editor(props: EditorProps) {\n  const { options, className = '', ...rest } = props || {};\n\n  return (\n    <div className={`rspress-playground-editor ${className}`}>\n      <MonacoEditor\n        {...rest}\n        theme=\"light\"\n        options={{\n          minimap: {\n            enabled: true,\n            autohide: true,\n          },\n          fontSize: 14,\n          lineNumbersMinChars: 7,\n          scrollBeyondLastLine: false,\n          automaticLayout: true,\n          wordBasedSuggestions: true,\n          quickSuggestions: true,\n          scrollbar: {\n            verticalScrollbarSize: 8,\n            horizontalScrollbarSize: 8,\n          },\n          scrollPredominantAxis: false,\n          ...getMonacoOptions(),\n          ...options,\n        }}\n      />\n    </div>\n  );\n}\n","export const DEFAULT_BABEL_URL =\n  'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.20/babel.min.js';\n\nexport const DEFAULT_MONACO_URL =\n  'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs';\n","import type { Node } from '@babel/types';\nimport React, { Component, HTMLAttributes } from 'react';\nimport {\n  createGetImport,\n  createObjectPattern,\n  createVariableDeclaration,\n} from './ast';\nimport { getBabel } from './babel';\n\ninterface RunnerProps extends HTMLAttributes<HTMLDivElement> {\n  code: string;\n  language: string;\n  getImport: (name: string, getDefault?: boolean) => void;\n}\n\ninterface RunnerState {\n  error?: Error;\n  comp: any;\n}\n\nclass Runner extends Component<RunnerProps, RunnerState> {\n  static getDerivedStateFromError(error: Error) {\n    return {\n      error,\n      comp: null,\n    };\n  }\n\n  timer: any;\n\n  constructor(props: RunnerProps) {\n    super(props);\n\n    this.state = {\n      error: undefined,\n      comp: null,\n    };\n\n    this.doCompile = this.doCompile.bind(this);\n    this.waitCompile = this.waitCompile.bind(this);\n  }\n\n  waitCompile(targetCode: string) {\n    if (this.timer) {\n      clearTimeout(this.timer);\n    }\n    this.timer = setTimeout(() => {\n      this.timer = null;\n      this.doCompile(targetCode);\n    }, 600);\n  }\n\n  async doCompile(targetCode: string) {\n    const { language, getImport } = this.props;\n    const babel = await getBabel();\n    try {\n      const presets = [\n        [babel.availablePresets.react],\n        [babel.availablePresets.env, { modules: 'commonjs' }],\n      ];\n      if (language === 'tsx' || language === 'ts') {\n        presets.unshift([\n          babel.availablePresets.typescript,\n          {\n            allExtensions: true,\n            isTSX: language === 'tsx',\n          },\n        ]);\n      }\n      const result = babel.transform(targetCode, {\n        sourceType: 'module',\n        presets,\n        plugins: [\n          {\n            visitor: {\n              ImportDeclaration(path) {\n                const pkg = path.node.source.value;\n                const code: Node[] = [];\n                for (const specifier of path.node.specifiers) {\n                  // import X from 'xxx'\n                  if (specifier.type === 'ImportDefaultSpecifier') {\n                    // const ${specifier.local.name} = __get_import()\n                    code.push(\n                      createVariableDeclaration(\n                        specifier.local.name,\n                        createGetImport(pkg, true),\n                      ),\n                    );\n                  }\n                  // import * as X from 'xxx'\n                  if (specifier.type === 'ImportNamespaceSpecifier') {\n                    // const ${specifier.local.name} = __get_import()\n                    code.push(\n                      createVariableDeclaration(\n                        specifier.local.name,\n                        createGetImport(pkg),\n                      ),\n                    );\n                  }\n                  // import { a, b, c } from 'xxx'\n                  if (specifier.type === 'ImportSpecifier') {\n                    // const {${specifier.local.name}} = __get_import()\n                    code.push(\n                      createVariableDeclaration(\n                        createObjectPattern([specifier.local.name]),\n                        createGetImport(pkg),\n                      ),\n                    );\n                  }\n                }\n                path.replaceWithMultiple(code);\n              },\n            },\n          },\n        ],\n      });\n\n      // Code has been updated\n      if (targetCode !== this.props.code || !result || !result.code) {\n        return;\n      }\n\n      const runExports: any = {};\n      // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func\n      const func = new Function('__get_import', 'exports', result.code);\n      func(getImport, runExports);\n\n      if (runExports.default) {\n        this.setState({\n          error: undefined,\n          comp: React.createElement(runExports.default),\n        });\n        return;\n      }\n\n      this.setState({\n        error: new Error('No default export'),\n        comp: null,\n      });\n    } catch (e) {\n      // Code has been updated\n      if (targetCode !== this.props.code) {\n        return;\n      }\n      console.error(e);\n      this.setState({\n        error: e as Error,\n        comp: null,\n      });\n    }\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error(error);\n    console.error(errorInfo);\n  }\n\n  componentDidMount() {\n    this.doCompile(this.props.code);\n  }\n\n  componentDidUpdate(prevProps: RunnerProps) {\n    if (prevProps.code !== this.props.code) {\n      this.waitCompile(this.props.code);\n    }\n  }\n\n  render() {\n    const { className = '', code, language, getImport, ...rest } = this.props;\n    const { error, comp } = this.state;\n\n    if (error) {\n      return (\n        <div className={`rspress-playground-runner ${className}`} {...rest}>\n          <span style={{ color: 'red' }}>{error.message}</span>\n        </div>\n      );\n    }\n\n    return (\n      <div className={`rspress-playground-runner ${className}`} {...rest}>\n        {comp}\n      </div>\n    );\n  }\n}\n\nexport { Runner };\n","import type {\n  CallExpression,\n  Expression,\n  ObjectPattern,\n  VariableDeclaration,\n} from '@babel/types';\n\nexport function createVariableDeclaration(\n  id: string | ObjectPattern,\n  init: Expression,\n): VariableDeclaration {\n  return {\n    type: 'VariableDeclaration',\n    declarations: [\n      {\n        type: 'VariableDeclarator',\n        id:\n          typeof id === 'string'\n            ? {\n                type: 'Identifier',\n                name: id,\n              }\n            : id,\n        init,\n      },\n    ],\n    kind: 'const',\n  };\n}\n\nexport function createObjectPattern(names: string[]): ObjectPattern {\n  return {\n    type: 'ObjectPattern',\n    properties: names.map(name => ({\n      type: 'ObjectProperty',\n      key: {\n        type: 'Identifier',\n        name,\n      },\n      computed: false,\n      method: false,\n      shorthand: true,\n      value: {\n        type: 'Identifier',\n        name,\n      },\n    })),\n  };\n}\n\nexport function createGetImport(\n  name: string,\n  getDefault?: boolean,\n): CallExpression {\n  return {\n    type: 'CallExpression',\n    callee: {\n      type: 'Identifier',\n      name: '__get_import',\n    },\n    arguments: [\n      {\n        type: 'StringLiteral',\n        value: name,\n      },\n      {\n        type: 'BooleanLiteral',\n        value: Boolean(getDefault),\n      },\n    ],\n  };\n}\n","const loadingMap = new Map<string, Promise<void>>();\n\nexport function loadScript(url: string): Promise<void> {\n  const exists = loadingMap.get(url);\n  if (exists) {\n    return exists;\n  }\n  const n: Promise<void> = new Promise(resolve => {\n    const e = document.createElement('script');\n    e.src = url;\n    e.onload = () => resolve();\n    document.body.appendChild(e);\n  });\n  loadingMap.set(url, n);\n  return n;\n}\n\nexport function normalizeUrl(u: string) {\n  return u.replace(/\\/\\//g, '/');\n}\n","import type babel from '@babel/standalone';\nimport { DEFAULT_BABEL_URL } from './constant';\nimport { loadScript } from './utils';\n\ndeclare global {\n  // inject by builder in cli/index.ts\n  // see: https://modernjs.dev/builder/api/config-source.html#sourcedefine\n  const __PLAYGROUND_BABEL_URL__: any;\n  interface Window {\n    Babel: typeof babel;\n  }\n}\n\nasync function getBabel() {\n  if (!window.Babel) {\n    let babelUrl = DEFAULT_BABEL_URL;\n    try {\n      const u = __PLAYGROUND_BABEL_URL__;\n      if (u) {\n        babelUrl = u;\n      }\n    } catch (e) {\n      // ignore\n    }\n    await loadScript(babelUrl);\n  }\n  return window.Babel;\n}\n\nexport { getBabel };\n"]}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@rspress/plugin-playground",
+  "version": "0.0.0-next-20230925114748",
+  "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
+  "bugs": "https://github.com/web-infra-dev/rspress/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rspress",
+    "directory": "packages/plugin-preview"
+  },
+  "license": "MIT",
+  "types": "./dist/cli/esm/index.d.ts",
+  "main": "./dist/cli/cjs/index.js",
+  "module": "./dist/cli/esm/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/cli/esm/index.d.ts",
+      "import": "./dist/cli/esm/index.js",
+      "default": "./dist/cli/cjs/index.js"
+    },
+    "./web": {
+      "types": "./dist/web/esm/index.d.ts",
+      "import": "./dist/web/esm/index.js",
+      "default": "./dist/web/cjs/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=14.17.6"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@mdx-js/mdx": "2.2.1",
+    "@modern-js/utils": "2.35.1",
+    "@monaco-editor/react": "~4.4.6",
+    "@oxidation-compiler/napi": "^0.1.0",
+    "remark-gfm": "3.0.1",
+    "@rspress/shared": "0.0.0-next-20230925114748"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.22.17",
+    "@types/babel__core": "^7.20.1",
+    "@types/babel__standalone": "^7.1.4",
+    "@types/babel__traverse": "^7.20.1",
+    "@types/mdast": "^3.0.10",
+    "@types/node": "^18.11.17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "mdast-util-mdxjs-esm": "^1.3.0",
+    "prettier": "^2.6.2",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6.8.1",
+    "rspack-plugin-virtual-module": "0.1.11",
+    "typescript": "^5",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^4.1.1"
+  },
+  "peerDependencies": {
+    "@rspress/core": "0.0.0-next-20230925114748",
+    "react": ">=17",
+    "react-router-dom": "^6.8.1"
+  },
+  "files": [
+    "dist",
+    "static"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "modern build -w",
+    "build": "modern build",
+    "reset": "rimraf ./**/node_modules",
+    "lint": "modern lint",
+    "change": "modern change",
+    "bump": "modern bump",
+    "pre": "modern pre",
+    "change-status": "modern change-status",
+    "gen-release-note": "modern gen-release-note",
+    "release": "modern release",
+    "new": "modern new",
+    "test": "vitest run --passWithNoTests",
+    "upgrade": "modern upgrade"
+  }
+}

package/static/global-components/Playground.tsx

@@ -0,0 +1,51 @@
+import React, { HTMLAttributes, useCallback, useState } from 'react';
+import getImport from '_rspress_playground_imports';
+import { Editor, Runner } from '../../dist/web/esm';
+
+interface PlaygroundProps extends HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language: string;
+  direction?: 'horizontal' | 'vertical';
+  editorPosition?: 'left' | 'right';
+}
+
+export default function Playground(props: PlaygroundProps) {
+  const {
+    code: codeProp,
+    language,
+    className = '',
+    direction = 'horizontal',
+    editorPosition,
+    ...rest
+  } = props;
+
+  const [code, setCode] = useState(codeProp);
+
+  const handleCodeChange = useCallback((e?: string) => {
+    setCode(e || '');
+  }, []);
+
+  const useReverseLayout =
+    direction === 'horizontal' && editorPosition === 'left';
+
+  const monacoLanguage =
+    language === 'tsx' || language === 'ts' ? 'typescript' : 'javascript';
+
+  const classNames = [
+    'rspress-playground',
+    `rspress-playground-${direction}`,
+    `rspress-playground-reverse-${useReverseLayout ? 'y' : 'n'}`,
+    className,
+  ].join(' ');
+
+  return (
+    <div className={classNames} {...rest}>
+      <Runner language={language} code={code} getImport={getImport} />
+      <Editor
+        value={code}
+        onChange={handleCodeChange}
+        language={monacoLanguage}
+      />
+    </div>
+  );
+}

package/static/global-styles/web.css

@@ -0,0 +1,51 @@
+.rspress-playground {
+  display: flex;
+  border: 1px solid rgba(28, 31, 35, 0.08);
+  border-radius: 3px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.rspress-playground-horizontal {
+  flex-direction: row;
+  height: 400px;
+}
+
+.rspress-playground-horizontal.rspress-playground-reverse-y {
+  flex-direction: row-reverse;
+}
+
+.rspress-playground-vertical {
+  flex-direction: column;
+}
+
+.rspress-playground > .rspress-playground-runner {
+  padding: 20px;
+  overflow: auto;
+}
+
+.rspress-playground-horizontal > .rspress-playground-runner {
+  width: 40%;
+}
+
+.rspress-playground-horizontal > .rspress-playground-editor {
+  width: 60%;
+}
+
+.rspress-playground-horizontal.rspress-playground-reverse-y
+  > .rspress-playground-editor {
+  border-right: 1px solid rgba(28, 31, 35, 0.08);
+}
+
+.rspress-playground-horizontal.rspress-playground-reverse-n
+  > .rspress-playground-editor {
+  border-left: 1px solid rgba(28, 31, 35, 0.08);
+}
+
+.rspress-playground-vertical > .rspress-playground-editor {
+  height: 300px;
+}
+
+.rspress-playground-vertical > .rspress-playground-editor {
+  border-top: 1px solid rgba(28, 31, 35, 0.08);
+}

package/static/modern-app-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types='@modern-js/module-tools/types' />
+
+declare module '_rspress_playground_imports' {
+  const getImport: (name: string, getDefault?: boolean) => void;
+  export default getImport;
+}