@rspress/plugin-playground 2.0.0-beta.3 → 2.0.0-beta.30

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 +22 -53
  4. package/dist/web/index.d.ts +3 -3
  5. package/dist/web/index.js +15 -17
  6. package/package.json +17 -19
  7. package/static/global-components/Playground.tsx +3 -3
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,18 @@
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
11
  function normalizeUrl(u) {
12
12
  return u.replace(/\/\//g, '/');
13
13
  }
14
14
  const parseImports = (code, sourceExt)=>{
15
- const parsed = __WEBPACK_EXTERNAL_MODULE__oxidation_compiler_napi_5e24345a__["default"].parseSync(code, {
15
+ const parsed = napi.parseSync(code, {
16
16
  sourceType: 'module',
17
17
  sourceFilename: `index.${sourceExt}`
18
18
  });
@@ -27,7 +27,7 @@ const getNodeMeta = (node, metaName)=>{
27
27
  if (!node.meta) return;
28
28
  const meta = node.meta.split(' ');
29
29
  const item = meta.find((x)=>x.startsWith(metaName));
30
- if (item?.startsWith(`${metaName}=`)) return item.slice(metaName.length + 1);
30
+ if (item?.startsWith(`${metaName}=`)) return item.slice(metaName.length + 1).replace(/'"`/g, '');
31
31
  return item;
32
32
  };
33
33
  function createPlaygroundNode(currentNode, attrs) {
@@ -44,40 +44,9 @@ function createPlaygroundNode(currentNode, attrs) {
44
44
  const remarkPlugin = ({ getRouteMeta, editorPosition, defaultRenderMode })=>{
45
45
  const routeMeta = getRouteMeta();
46
46
  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]));
47
+ const route = routeMeta.find((meta)=>resolve(meta.absolutePath) === resolve(vfile.path || vfile.history[0]));
48
48
  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)=>{
49
+ external_unist_util_visit_visit(tree, 'code', (node)=>{
81
50
  if ('jsx' === node.lang || 'tsx' === node.lang) {
82
51
  const hasPureMeta = node.meta?.includes('pure');
83
52
  const hasPlaygroundMeta = node.meta?.includes('playground');
@@ -117,12 +86,12 @@ const remarkPlugin = ({ getRouteMeta, editorPosition, defaultRenderMode })=>{
117
86
  };
118
87
  };
119
88
  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');
89
+ const pkgRootPath = node_path.join(cli_dirname, '../../');
90
+ const staticPath = node_path.join(pkgRootPath, 'static');
122
91
  let cli_routeMeta;
123
92
  function pluginPlayground(options) {
124
93
  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({});
94
+ const playgroundVirtualModule = new RspackVirtualModulePlugin({});
126
95
  const getRouteMeta = ()=>cli_routeMeta;
127
96
  if (render && !/Playground\.(jsx?|tsx?)$/.test(render)) throw new Error('[Playground]: render should ends with Playground.(jsx?|tsx?)');
128
97
  const preloads = [];
@@ -148,23 +117,23 @@ function pluginPlayground(options) {
148
117
  const { default: remarkGFM } = await import("remark-gfm");
149
118
  try {
150
119
  const processor = createProcessor({
151
- format: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].extname(filepath).slice(1),
120
+ format: node_path.extname(filepath).slice(1),
152
121
  remarkPlugins: [
153
122
  remarkGFM
154
123
  ]
155
124
  });
156
- const source = await __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].promises.readFile(filepath, 'utf-8');
125
+ const source = await node_fs.promises.readFile(filepath, 'utf-8');
157
126
  const ast = processor.parse(source);
158
127
  visit(ast, 'mdxJsxFlowElement', (node)=>{
159
128
  if ('code' === node.name) {
160
- const src = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'src');
129
+ const src = getNodeAttribute(node, 'src');
161
130
  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, {
131
+ const demoPath = join(node_path.dirname(filepath), src);
132
+ if (!node_fs.existsSync(demoPath)) return;
133
+ const code = node_fs.readFileSync(demoPath, {
165
134
  encoding: 'utf8'
166
135
  });
167
- const thisImports = parseImports(code, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].extname(demoPath));
136
+ const thisImports = parseImports(code, node_path.extname(demoPath));
168
137
  thisImports.forEach((x)=>{
169
138
  if (void 0 === imports[x]) imports[x] = x;
170
139
  });
@@ -266,10 +235,10 @@ function pluginPlayground(options) {
266
235
  ]
267
236
  ],
268
237
  globalComponents: [
269
- render ? render : __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(staticPath, 'global-components', 'Playground.tsx')
238
+ render ? render : node_path.join(staticPath, 'global-components', 'Playground.tsx')
270
239
  ]
271
240
  },
272
- globalStyles: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(staticPath, 'global-styles', 'web.css')
241
+ globalStyles: node_path.join(staticPath, 'global-styles', 'web.css')
273
242
  };
274
243
  }
275
244
  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.3",
3
+ "version": "2.0.0-beta.30",
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
- "rspack-plugin-virtual-module": "0.1.13",
35
- "unist-util-visit": "^5.0.0",
36
- "@rspress/shared": "2.0.0-beta.3"
34
+ "rspack-plugin-virtual-module": "1.0.1",
35
+ "unist-util-visit": "^5.0.0"
37
36
  },
38
37
  "devDependencies": {
39
- "@babel/types": "^7.27.0",
40
- "@rsbuild/plugin-react": "~1.1.1",
41
- "@rslib/core": "0.6.7",
38
+ "@babel/types": "^7.28.2",
39
+ "@rsbuild/plugin-react": "~1.4.0",
40
+ "@rslib/core": "0.12.4",
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
- "@types/node": "^18.11.17",
47
- "@types/react": "^18.3.20",
48
- "@types/react-dom": "^18.3.6",
45
+ "@types/node": "^22.8.1",
46
+ "@types/react": "^19.1.12",
47
+ "@types/react-dom": "^19.1.9",
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.1",
49
+ "react": "^19.1.1",
50
+ "react-dom": "^19.1.1",
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.3"
55
+ "@rspress/plugin-playground": "2.0.0-beta.30"
57
56
  },
58
57
  "peerDependencies": {
59
- "@rspress/core": "^2.0.0-beta.3",
58
+ "@rspress/core": "^2.0.0-beta.30",
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