@rspress/plugin-playground 0.0.0-next-20230927072732 → 0.0.0-next-20231108104528

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

@@ -1 +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"]}
+{"version":3,"mappings":"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","names":["default","loader","React"],"sources":["../../../src/web/index.ts","../../../src/web/editor.tsx","../../../src/web/constant.ts","../../../src/web/runner.tsx","../../../src/web/ast.ts","../../../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, { useMemo } from 'react';\nimport MonacoEditor, {\n  loader,\n  EditorProps as MonacoEditorProps,\n} from '@monaco-editor/react';\nimport { useDark } from '@rspress/core/runtime';\nimport { DEFAULT_MONACO_URL } from './constant';\n\n// inject by Rsbuild in cli/index.ts\n// see: https://rsbuild.dev/zh/config/options/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 = '', theme: themeProp, ...rest } = props || {};\n\n  const dark = useDark();\n  const theme = useMemo(() => {\n    if (themeProp) {\n      return themeProp;\n    }\n    return dark ? 'vs-dark' : 'light';\n  }, [themeProp, dark]);\n\n  return (\n    <div className={`rspress-playground-editor ${className}`}>\n      <MonacoEditor\n        {...rest}\n        theme={theme}\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\nconst DEBOUNCE_TIME = 800;\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    }, DEBOUNCE_TIME);\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        sourceMaps: 'inline',\n        presets,\n        plugins: [\n          {\n            pre() {\n              this.hasReactImported = false;\n            },\n            visitor: {\n              ImportDeclaration(path) {\n                const pkg = path.node.source.value;\n                const code: Node[] = [];\n                const specifiers: string[] = [];\n                for (const specifier of path.node.specifiers) {\n                  if (specifier.local.name === 'React') {\n                    this.hasReactImported = true;\n                  }\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                    specifiers.push(specifier.local.name);\n                  }\n                }\n                if (specifiers.length > 0) {\n                  code.push(\n                    createVariableDeclaration(\n                      createObjectPattern(specifiers),\n                      createGetImport(pkg),\n                    ),\n                  );\n                }\n                path.replaceWithMultiple(code);\n              },\n            },\n            post(file) {\n              // Auto import React\n              if (!this.hasReactImported) {\n                file.ast.program.body.unshift(\n                  createVariableDeclaration(\n                    'React',\n                    createGetImport('react', true),\n                  ),\n                );\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      });\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      });\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    return (\n      <div className={`rspress-playground-runner ${className}`} {...rest}>\n        {comp}\n        {error && (\n          <pre className=\"rspress-playground-error\">{error.message}</pre>\n        )}\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","import type babel from '@babel/standalone';\n\ntype Babel = typeof babel;\n\ndeclare global {\n  interface Window {\n    Babel: Babel;\n  }\n}\n\nfunction getBabel(): Babel | Promise<Babel> {\n  if (window.Babel) {\n    return window.Babel;\n  }\n  const el = document.getElementById('rspress-playground-babel');\n  if (!el) {\n    throw new Error('Babel not found');\n  }\n  return new Promise(resolve => {\n    el.addEventListener('load', () => {\n      resolve(window.Babel);\n    });\n  });\n}\n\nexport { getBabel };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-playground",
-  "version": "0.0.0-next-20230927072732",
+  "version": "0.0.0-next-20231108104528",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -33,11 +33,12 @@
   ],
   "dependencies": {
     "@mdx-js/mdx": "2.2.1",
-    "@modern-js/utils": "2.35.1",
+    "@modern-js/utils": "2.39.2",
     "@monaco-editor/react": "~4.4.6",
     "@oxidation-compiler/napi": "^0.1.0",
     "remark-gfm": "3.0.1",
-    "@rspress/shared": "0.0.0-next-20230927072732"
+    "rspack-plugin-virtual-module": "0.1.12",
+    "@rspress/shared": "0.0.0-next-20231108104528"
   },
   "devDependencies": {
     "@babel/types": "^7.22.17",
@@ -53,13 +54,12 @@
     "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-20230927072732",
+    "@rspress/core": "0.0.0-next-20231108104528",
     "react": ">=17",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/Playground.tsx

@@ -1,12 +1,50 @@
-import React, { HTMLAttributes, useCallback, useState } from 'react';
+import React, { HTMLAttributes, ReactNode, useCallback, useState } from 'react';
 import getImport from '_rspress_playground_imports';
+import { usePageData } from '@rspress/core/runtime';
 import { Editor, Runner } from '../../dist/web/esm';
 
-interface PlaygroundProps extends HTMLAttributes<HTMLDivElement> {
+// inject by builder in cli/index.ts
+declare global {
+  const __PLAYGROUND_DIRECTION__: any;
+}
+
+type Direction = 'horizontal' | 'vertical';
+
+export interface PlaygroundProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
   language: string;
-  direction?: 'horizontal' | 'vertical';
+  direction?: Direction;
   editorPosition?: 'left' | 'right';
+  renderChildren?: (
+    props: PlaygroundProps,
+    code: string,
+    direction: Direction,
+  ) => ReactNode;
+}
+
+function useDirection(props: PlaygroundProps): Direction {
+  const { page } = usePageData();
+  const { frontmatter = {} } = page;
+  const { playgroundDirection } = frontmatter;
+
+  // from props
+  if (props.direction) {
+    return props.direction;
+  }
+
+  // from page frontmatter
+  if (playgroundDirection) {
+    return playgroundDirection as Direction;
+  }
+
+  // inject by config
+  try {
+    return __PLAYGROUND_DIRECTION__;
+  } catch (e) {
+    // ignore
+  }
+
+  return 'horizontal';
 }
 
 export default function Playground(props: PlaygroundProps) {
@@ -14,11 +52,14 @@ export default function Playground(props: PlaygroundProps) {
     code: codeProp,
     language,
     className = '',
-    direction = 'horizontal',
+    direction: directionProp,
     editorPosition,
+    renderChildren,
     ...rest
   } = props;
 
+  const direction = useDirection(props);
+
   const [code, setCode] = useState(codeProp);
 
   const handleCodeChange = useCallback((e?: string) => {
@@ -46,6 +87,7 @@ export default function Playground(props: PlaygroundProps) {
         onChange={handleCodeChange}
         language={monacoLanguage}
       />
+      {renderChildren?.(props, code, direction)}
     </div>
   );
 }

package/static/global-styles/web.css

@@ -1,6 +1,6 @@
 .rspress-playground {
   display: flex;
-  border: 1px solid rgba(28, 31, 35, 0.08);
+  border: 1px solid var(--rp-c-divider-light);
   border-radius: 3px;
   margin-top: 20px;
   margin-bottom: 20px;
@@ -19,7 +19,8 @@
   flex-direction: column;
 }
 
-.rspress-playground > .rspress-playground-runner {
+.rspress-playground-runner {
+  position: relative;
   padding: 20px;
   overflow: auto;
 }
@@ -34,12 +35,12 @@
 
 .rspress-playground-horizontal.rspress-playground-reverse-y
   > .rspress-playground-editor {
-  border-right: 1px solid rgba(28, 31, 35, 0.08);
+  border-right: 1px solid var(--rp-c-divider-light);
 }
 
 .rspress-playground-horizontal.rspress-playground-reverse-n
   > .rspress-playground-editor {
-  border-left: 1px solid rgba(28, 31, 35, 0.08);
+  border-left: 1px solid var(--rp-c-divider-light);
 }
 
 .rspress-playground-vertical > .rspress-playground-editor {
@@ -47,5 +48,21 @@
 }
 
 .rspress-playground-vertical > .rspress-playground-editor {
-  border-top: 1px solid rgba(28, 31, 35, 0.08);
+  border-top: 1px solid var(--rp-c-divider-light);
+}
+
+.rspress-playground-error {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  background: #a12027;
+  opacity: 0.86;
+  color: #fff;
+  padding: 10px;
+  overflow: auto;
+  font-size: 12px;
 }