@rspress/plugin-playground 2.0.0-beta.8 → 2.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/dist/cli/index.d.ts +2 -2
  3. package/dist/cli/index.js +25 -59
  4. package/dist/web/index.d.ts +3 -3
  5. package/dist/web/index.js +15 -17
  6. package/package.json +15 -17
  7. package/static/global-components/Playground.tsx +7 -4
package/README.md CHANGED
@@ -2,4 +2,4 @@
2
2
 
3
3
  > Playground plugin for rspress
4
4
 
5
- [Documentation](https://rspress.dev/plugin/official-plugins/playground)
5
+ [Documentation](https://rspress.rs/plugin/official-plugins/playground)
package/dist/cli/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { EditorProps } from '@monaco-editor/react';
2
2
  import type { loader } from '@monaco-editor/react';
3
- import type { RouteMeta } from '@rspress/shared';
4
- import type { RspressPlugin } from '@rspress/shared';
3
+ import type { RouteMeta } from '@rspress/core';
4
+ import type { RspressPlugin } from '@rspress/core';
5
5
 
6
6
  declare interface PlaygroundOptions {
7
7
  render: string;
package/dist/cli/index.js CHANGED
@@ -1,18 +1,15 @@
1
1
  import { fileURLToPath as __webpack_fileURLToPath__ } from "node:url";
2
2
  import { dirname as __webpack_dirname__ } from "node:path";
3
- import * as __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__ from "node:fs";
4
- import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
5
- import * as __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__ from "@rspress/shared/node-utils";
6
- import * as __WEBPACK_EXTERNAL_MODULE_rspack_plugin_virtual_module_609978fd__ from "rspack-plugin-virtual-module";
7
- import * as __WEBPACK_EXTERNAL_MODULE_unist_util_visit_555e002a__ from "unist-util-visit";
8
- import * as __WEBPACK_EXTERNAL_MODULE__oxidation_compiler_napi_5e24345a__ from "@oxidation-compiler/napi";
3
+ import node_fs from "node:fs";
4
+ import node_path, { join, resolve } from "node:path";
5
+ import { getNodeAttribute } from "@rspress/core";
6
+ import { RspackVirtualModulePlugin } from "rspack-plugin-virtual-module";
7
+ import { visit as external_unist_util_visit_visit } from "unist-util-visit";
8
+ import napi from "@oxidation-compiler/napi";
9
9
  const DEFAULT_BABEL_URL = 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.20/babel.min.js';
10
10
  const DEFAULT_MONACO_URL = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs';
11
- function normalizeUrl(u) {
12
- return u.replace(/\/\//g, '/');
13
- }
14
11
  const parseImports = (code, sourceExt)=>{
15
- const parsed = __WEBPACK_EXTERNAL_MODULE__oxidation_compiler_napi_5e24345a__["default"].parseSync(code, {
12
+ const parsed = napi.parseSync(code, {
16
13
  sourceType: 'module',
17
14
  sourceFilename: `index.${sourceExt}`
18
15
  });
@@ -27,7 +24,7 @@ const getNodeMeta = (node, metaName)=>{
27
24
  if (!node.meta) return;
28
25
  const meta = node.meta.split(' ');
29
26
  const item = meta.find((x)=>x.startsWith(metaName));
30
- if (item?.startsWith(`${metaName}=`)) return item.slice(metaName.length + 1);
27
+ if (item?.startsWith(`${metaName}=`)) return item.slice(metaName.length + 1).replace(/'"`/g, '');
31
28
  return item;
32
29
  };
33
30
  function createPlaygroundNode(currentNode, attrs) {
@@ -44,40 +41,9 @@ function createPlaygroundNode(currentNode, attrs) {
44
41
  const remarkPlugin = ({ getRouteMeta, editorPosition, defaultRenderMode })=>{
45
42
  const routeMeta = getRouteMeta();
46
43
  return (tree, vfile)=>{
47
- const route = routeMeta.find((meta)=>(0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.resolve)(meta.absolutePath) === (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.resolve)(vfile.path || vfile.history[0]));
44
+ const route = routeMeta.find((meta)=>resolve(meta.absolutePath) === resolve(vfile.path || vfile.history[0]));
48
45
  if (!route) return;
49
- (0, __WEBPACK_EXTERNAL_MODULE_unist_util_visit_555e002a__.visit)(tree, 'mdxJsxFlowElement', (node)=>{
50
- if ('code' === node.name) {
51
- const src = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'src');
52
- if ('string' != typeof src) return;
53
- const demoPath = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)((0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.dirname)(route.absolutePath), src);
54
- if (!__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].existsSync(demoPath)) return;
55
- const direction = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'direction') || '';
56
- const code = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(demoPath, {
57
- encoding: 'utf8'
58
- });
59
- const language = src.slice(src.lastIndexOf('.') + 1);
60
- createPlaygroundNode(node, [
61
- [
62
- 'code',
63
- code
64
- ],
65
- [
66
- 'language',
67
- language
68
- ],
69
- [
70
- 'direction',
71
- direction
72
- ],
73
- [
74
- 'editorPosition',
75
- editorPosition
76
- ]
77
- ]);
78
- }
79
- });
80
- (0, __WEBPACK_EXTERNAL_MODULE_unist_util_visit_555e002a__.visit)(tree, 'code', (node)=>{
46
+ external_unist_util_visit_visit(tree, 'code', (node)=>{
81
47
  if ('jsx' === node.lang || 'tsx' === node.lang) {
82
48
  const hasPureMeta = node.meta?.includes('pure');
83
49
  const hasPlaygroundMeta = node.meta?.includes('playground');
@@ -117,18 +83,18 @@ const remarkPlugin = ({ getRouteMeta, editorPosition, defaultRenderMode })=>{
117
83
  };
118
84
  };
119
85
  var cli_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
120
- const pkgRootPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(cli_dirname, '../../');
121
- const staticPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(pkgRootPath, 'static');
86
+ const pkgRootPath = node_path.join(cli_dirname, '../../');
87
+ const staticPath = node_path.join(pkgRootPath, 'static');
122
88
  let cli_routeMeta;
123
89
  function pluginPlayground(options) {
124
90
  const { render = '', include, defaultDirection = 'horizontal', editorPosition = 'left', babelUrl = DEFAULT_BABEL_URL, monacoLoader = {}, monacoOptions = {}, defaultRenderMode = 'playground' } = options || {};
125
- const playgroundVirtualModule = new __WEBPACK_EXTERNAL_MODULE_rspack_plugin_virtual_module_609978fd__.RspackVirtualModulePlugin({});
91
+ const playgroundVirtualModule = new RspackVirtualModulePlugin({});
126
92
  const getRouteMeta = ()=>cli_routeMeta;
127
93
  if (render && !/Playground\.(jsx?|tsx?)$/.test(render)) throw new Error('[Playground]: render should ends with Playground.(jsx?|tsx?)');
128
94
  const preloads = [];
129
- const monacoPrefix = monacoLoader.paths?.vs || DEFAULT_MONACO_URL;
130
- preloads.push(normalizeUrl(`${monacoPrefix}/loader.js`));
131
- preloads.push(normalizeUrl(`${monacoPrefix}/editor/editor.main.js`));
95
+ const monacoPrefix = (monacoLoader.paths?.vs || DEFAULT_MONACO_URL).replace(/\/+$/, '');
96
+ preloads.push(`${monacoPrefix}/loader.js`);
97
+ preloads.push(`${monacoPrefix}/editor/editor.main.js`);
132
98
  return {
133
99
  name: '@rspress/plugin-playground',
134
100
  config (config, { removePlugin }) {
@@ -148,23 +114,23 @@ function pluginPlayground(options) {
148
114
  const { default: remarkGFM } = await import("remark-gfm");
149
115
  try {
150
116
  const processor = createProcessor({
151
- format: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].extname(filepath).slice(1),
117
+ format: node_path.extname(filepath).slice(1),
152
118
  remarkPlugins: [
153
119
  remarkGFM
154
120
  ]
155
121
  });
156
- const source = await __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].promises.readFile(filepath, 'utf-8');
122
+ const source = await node_fs.promises.readFile(filepath, 'utf-8');
157
123
  const ast = processor.parse(source);
158
124
  visit(ast, 'mdxJsxFlowElement', (node)=>{
159
125
  if ('code' === node.name) {
160
- const src = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'src');
126
+ const src = getNodeAttribute(node, 'src');
161
127
  if ('string' != typeof src) return;
162
- const demoPath = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname(filepath), src);
163
- if (!__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].existsSync(demoPath)) return;
164
- const code = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(demoPath, {
128
+ const demoPath = join(node_path.dirname(filepath), src);
129
+ if (!node_fs.existsSync(demoPath)) return;
130
+ const code = node_fs.readFileSync(demoPath, {
165
131
  encoding: 'utf8'
166
132
  });
167
- const thisImports = parseImports(code, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].extname(demoPath));
133
+ const thisImports = parseImports(code, node_path.extname(demoPath));
168
134
  thisImports.forEach((x)=>{
169
135
  if (void 0 === imports[x]) imports[x] = x;
170
136
  });
@@ -266,10 +232,10 @@ function pluginPlayground(options) {
266
232
  ]
267
233
  ],
268
234
  globalComponents: [
269
- render ? render : __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(staticPath, 'global-components', 'Playground.tsx')
235
+ render ? render : node_path.join(staticPath, 'global-components', 'Playground.tsx')
270
236
  ]
271
237
  },
272
- globalStyles: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(staticPath, 'global-styles', 'web.css')
238
+ globalStyles: node_path.join(staticPath, 'global-styles', 'web.css')
273
239
  };
274
240
  }
275
241
  export { pluginPlayground, cli_routeMeta as routeMeta };
package/dist/web/index.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import { Component } from 'react';
2
2
  import { HTMLAttributes } from 'react';
3
- import { JSX as JSX_2 } from 'react/jsx-runtime';
3
+ import { JSX } from 'react/jsx-runtime';
4
4
  import { default as MonacoEditor } from '@monaco-editor/react';
5
5
  import { loader as MonacoEditorLoader } from '@monaco-editor/react';
6
6
  import { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
7
7
  import { default as React_2 } from 'react';
8
8
  import { ReactElement } from 'react';
9
9
 
10
- export declare function Editor(props: EditorProps): JSX_2.Element;
10
+ export declare function Editor(props: EditorProps): JSX.Element;
11
11
 
12
12
  declare type EditorProps = Partial<MonacoEditorProps>;
13
13
 
@@ -29,7 +29,7 @@ export declare class Runner extends Component<RunnerProps, RunnerState> {
29
29
  componentDidCatch(error: Error, errorInfo: React_2.ErrorInfo): void;
30
30
  componentDidMount(): void;
31
31
  componentDidUpdate(prevProps: RunnerProps): void;
32
- render(): JSX_2.Element;
32
+ render(): JSX.Element;
33
33
  }
34
34
 
35
35
  declare interface RunnerProps extends HTMLAttributes<HTMLDivElement> {
package/dist/web/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import * as __WEBPACK_EXTERNAL_MODULE__monaco_editor_react_be42f315__ from "@monaco-editor/react";
2
- import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
3
- import * as __WEBPACK_EXTERNAL_MODULE__rspress_core_runtime_7dc96146__ from "@rspress/core/runtime";
4
- import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
1
+ import react, { loader } from "@monaco-editor/react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { useDark } from "@rspress/core/runtime";
4
+ import react_0, { Component, useMemo } from "react";
5
5
  const DEFAULT_MONACO_URL = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs';
6
6
  function initLoader() {
7
7
  let loaderConfig = {
@@ -13,7 +13,7 @@ function initLoader() {
13
13
  const keys = Object.keys(__PLAYGROUND_MONACO_LOADER__);
14
14
  if (keys.length > 0) loaderConfig = __PLAYGROUND_MONACO_LOADER__;
15
15
  } catch (_e) {}
16
- __WEBPACK_EXTERNAL_MODULE__monaco_editor_react_be42f315__.loader.config(loaderConfig);
16
+ loader.config(loaderConfig);
17
17
  }
18
18
  initLoader();
19
19
  function getMonacoOptions() {
@@ -24,17 +24,17 @@ function getMonacoOptions() {
24
24
  }
25
25
  function Editor(props) {
26
26
  const { options, className = '', theme: themeProp, ...rest } = props || {};
27
- const dark = (0, __WEBPACK_EXTERNAL_MODULE__rspress_core_runtime_7dc96146__.useDark)();
28
- const theme = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
27
+ const dark = useDark();
28
+ const theme = useMemo(()=>{
29
29
  if (themeProp) return themeProp;
30
30
  return dark ? 'vs-dark' : 'light';
31
31
  }, [
32
32
  themeProp,
33
33
  dark
34
34
  ]);
35
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
35
+ return /*#__PURE__*/ jsx("div", {
36
36
  className: `rspress-playground-editor ${className}`,
37
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__monaco_editor_react_be42f315__["default"], {
37
+ children: /*#__PURE__*/ jsx(react, {
38
38
  ...rest,
39
39
  theme: theme,
40
40
  options: {
@@ -142,7 +142,7 @@ async function getBabel() {
142
142
  }
143
143
  }
144
144
  const DEBOUNCE_TIME = 800;
145
- class Runner extends __WEBPACK_EXTERNAL_MODULE_react__.Component {
145
+ class Runner extends Component {
146
146
  static getDerivedStateFromError(error) {
147
147
  return {
148
148
  error,
@@ -228,7 +228,7 @@ class Runner extends __WEBPACK_EXTERNAL_MODULE_react__.Component {
228
228
  func(getImport, runExports);
229
229
  if (runExports.default) return void this.setState({
230
230
  error: void 0,
231
- comp: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(runExports.default)
231
+ comp: /*#__PURE__*/ react_0.createElement(runExports.default)
232
232
  });
233
233
  this.setState({
234
234
  error: new Error('No default export')
@@ -252,14 +252,14 @@ class Runner extends __WEBPACK_EXTERNAL_MODULE_react__.Component {
252
252
  if (prevProps.code !== this.props.code) this.waitCompile(this.props.code);
253
253
  }
254
254
  render() {
255
- const { className = '', code, language, getImport, ...rest } = this.props;
255
+ const { className = '', code: _code, language: _language, getImport: _getImport, ...rest } = this.props;
256
256
  const { error, comp } = this.state;
257
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
257
+ return /*#__PURE__*/ jsxs("div", {
258
258
  className: `rspress-playground-runner ${className}`,
259
259
  ...rest,
260
260
  children: [
261
261
  comp,
262
- error && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("pre", {
262
+ error && /*#__PURE__*/ jsx("pre", {
263
263
  className: "rspress-playground-error",
264
264
  children: error.message
265
265
  })
@@ -267,6 +267,4 @@ class Runner extends __WEBPACK_EXTERNAL_MODULE_react__.Component {
267
267
  });
268
268
  }
269
269
  }
270
- var __webpack_exports__MonacoEditor = __WEBPACK_EXTERNAL_MODULE__monaco_editor_react_be42f315__["default"];
271
- var __webpack_exports__MonacoEditorLoader = __WEBPACK_EXTERNAL_MODULE__monaco_editor_react_be42f315__.loader;
272
- export { Editor, Runner, __webpack_exports__MonacoEditor as MonacoEditor, __webpack_exports__MonacoEditorLoader as MonacoEditorLoader };
270
+ export { Editor, react as MonacoEditor, loader as MonacoEditorLoader, Runner };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rspress/plugin-playground",
3
- "version": "2.0.0-beta.8",
3
+ "version": "2.0.0-rc.0",
4
4
  "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
5
5
  "bugs": "https://github.com/web-infra-dev/rspress/issues",
6
6
  "repository": {
@@ -27,36 +27,35 @@
27
27
  "static"
28
28
  ],
29
29
  "dependencies": {
30
- "@mdx-js/mdx": "^3.1.0",
30
+ "@mdx-js/mdx": "^3.1.1",
31
31
  "@monaco-editor/react": "~4.7.0",
32
32
  "@oxidation-compiler/napi": "^0.2.0",
33
33
  "remark-gfm": "^4.0.1",
34
34
  "rspack-plugin-virtual-module": "1.0.1",
35
- "unist-util-visit": "^5.0.0",
36
- "@rspress/shared": "2.0.0-beta.8"
35
+ "unist-util-visit": "^5.0.0"
37
36
  },
38
37
  "devDependencies": {
39
- "@babel/types": "^7.27.1",
40
- "@rsbuild/plugin-react": "~1.3.1",
41
- "@rslib/core": "0.8.0",
38
+ "@babel/types": "^7.28.5",
39
+ "@rsbuild/plugin-react": "~1.4.2",
40
+ "@rslib/core": "0.16.1",
42
41
  "@types/babel__core": "^7.20.5",
43
42
  "@types/babel__standalone": "^7.1.9",
44
- "@types/babel__traverse": "^7.20.7",
43
+ "@types/babel__traverse": "^7.28.0",
45
44
  "@types/mdast": "^4.0.4",
46
45
  "@types/node": "^22.8.1",
47
- "@types/react": "^18.3.22",
48
- "@types/react-dom": "^18.3.7",
46
+ "@types/react": "^19.2.2",
47
+ "@types/react-dom": "^19.2.2",
49
48
  "mdast-util-mdx-jsx": "^3.2.0",
50
- "react": "^19.1.0",
51
- "react-dom": "^19.1.0",
52
- "react-router-dom": "^6.29.0",
53
- "rsbuild-plugin-publint": "^0.3.2",
49
+ "react": "^19.2.0",
50
+ "react-dom": "^19.2.0",
51
+ "react-router-dom": "^6.30.1",
52
+ "rsbuild-plugin-publint": "^0.3.3",
54
53
  "typescript": "^5.8.2",
55
54
  "unified": "^11.0.5",
56
- "@rspress/plugin-playground": "2.0.0-beta.8"
55
+ "@rspress/plugin-playground": "2.0.0-rc.0"
57
56
  },
58
57
  "peerDependencies": {
59
- "@rspress/core": "^2.0.0-beta.8",
58
+ "@rspress/core": "^2.0.0-rc.0",
60
59
  "react": ">=18.0.0",
61
60
  "react-router-dom": "^6.8.1"
62
61
  },
@@ -65,7 +64,6 @@
65
64
  },
66
65
  "publishConfig": {
67
66
  "access": "public",
68
- "provenance": true,
69
67
  "registry": "https://registry.npmjs.org/"
70
68
  },
71
69
  "scripts": {
package/static/global-components/Playground.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import { usePageData } from '@rspress/core/runtime';
2
2
  import { Editor, Runner } from '@rspress/plugin-playground/web';
3
- // @ts-ignore Cannot find module _rspress_playground_imports
3
+ // @ts-expect-error Cannot find module _rspress_playground_imports
4
4
  import getImport from '_rspress_playground_imports';
5
- import React, {
5
+ import {
6
6
  type HTMLAttributes,
7
7
  type ReactNode,
8
8
  useCallback,
@@ -58,7 +58,7 @@ export default function Playground(props: PlaygroundProps) {
58
58
  code: codeProp,
59
59
  language,
60
60
  className = '',
61
- direction: directionProp,
61
+ direction: _directionProp,
62
62
  editorPosition,
63
63
  renderChildren,
64
64
  ...rest
@@ -82,8 +82,11 @@ export default function Playground(props: PlaygroundProps) {
82
82
  'rspress-playground',
83
83
  `rspress-playground-${direction}`,
84
84
  `rspress-playground-reverse-${useReverseLayout ? 'y' : 'n'}`,
85
+ 'rp-not-doc',
85
86
  className,
86
- ].join(' ');
87
+ ]
88
+ .filter(Boolean)
89
+ .join(' ');
87
90
 
88
91
  return (
89
92
  <div className={classNames} {...rest}>