@rspress/plugin-playground 2.0.0-beta.10 → 2.0.0-beta.12
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.
- package/dist/cli/index.js +27 -27
- package/dist/web/index.d.ts +3 -3
- package/dist/web/index.js +14 -16
- package/package.json +9 -9
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
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
3
|
+
import external_node_fs_default from "node:fs";
|
|
4
|
+
import external_node_path_default, { dirname, join, resolve } from "node:path";
|
|
5
|
+
import { getNodeAttribute } from "@rspress/shared/node-utils";
|
|
6
|
+
import { RspackVirtualModulePlugin } from "rspack-plugin-virtual-module";
|
|
7
|
+
import { visit as external_unist_util_visit_visit } from "unist-util-visit";
|
|
8
|
+
import napi_default 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 =
|
|
15
|
+
const parsed = napi_default.parseSync(code, {
|
|
16
16
|
sourceType: 'module',
|
|
17
17
|
sourceFilename: `index.${sourceExt}`
|
|
18
18
|
});
|
|
@@ -44,16 +44,16 @@ 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)=>
|
|
47
|
+
const route = routeMeta.find((meta)=>resolve(meta.absolutePath) === resolve(vfile.path || vfile.history[0]));
|
|
48
48
|
if (!route) return;
|
|
49
|
-
(
|
|
49
|
+
external_unist_util_visit_visit(tree, 'mdxJsxFlowElement', (node)=>{
|
|
50
50
|
if ('code' === node.name) {
|
|
51
|
-
const src =
|
|
51
|
+
const src = getNodeAttribute(node, 'src');
|
|
52
52
|
if ('string' != typeof src) return;
|
|
53
|
-
const demoPath =
|
|
54
|
-
if (!
|
|
55
|
-
const direction =
|
|
56
|
-
const code =
|
|
53
|
+
const demoPath = join(dirname(route.absolutePath), src);
|
|
54
|
+
if (!external_node_fs_default.existsSync(demoPath)) return;
|
|
55
|
+
const direction = getNodeAttribute(node, 'direction') || '';
|
|
56
|
+
const code = external_node_fs_default.readFileSync(demoPath, {
|
|
57
57
|
encoding: 'utf8'
|
|
58
58
|
});
|
|
59
59
|
const language = src.slice(src.lastIndexOf('.') + 1);
|
|
@@ -77,7 +77,7 @@ const remarkPlugin = ({ getRouteMeta, editorPosition, defaultRenderMode })=>{
|
|
|
77
77
|
]);
|
|
78
78
|
}
|
|
79
79
|
});
|
|
80
|
-
(
|
|
80
|
+
external_unist_util_visit_visit(tree, 'code', (node)=>{
|
|
81
81
|
if ('jsx' === node.lang || 'tsx' === node.lang) {
|
|
82
82
|
const hasPureMeta = node.meta?.includes('pure');
|
|
83
83
|
const hasPlaygroundMeta = node.meta?.includes('playground');
|
|
@@ -117,12 +117,12 @@ const remarkPlugin = ({ getRouteMeta, editorPosition, defaultRenderMode })=>{
|
|
|
117
117
|
};
|
|
118
118
|
};
|
|
119
119
|
var cli_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
|
|
120
|
-
const pkgRootPath =
|
|
121
|
-
const staticPath =
|
|
120
|
+
const pkgRootPath = external_node_path_default.join(cli_dirname, '../../');
|
|
121
|
+
const staticPath = external_node_path_default.join(pkgRootPath, 'static');
|
|
122
122
|
let cli_routeMeta;
|
|
123
123
|
function pluginPlayground(options) {
|
|
124
124
|
const { render = '', include, defaultDirection = 'horizontal', editorPosition = 'left', babelUrl = DEFAULT_BABEL_URL, monacoLoader = {}, monacoOptions = {}, defaultRenderMode = 'playground' } = options || {};
|
|
125
|
-
const playgroundVirtualModule = new
|
|
125
|
+
const playgroundVirtualModule = new RspackVirtualModulePlugin({});
|
|
126
126
|
const getRouteMeta = ()=>cli_routeMeta;
|
|
127
127
|
if (render && !/Playground\.(jsx?|tsx?)$/.test(render)) throw new Error('[Playground]: render should ends with Playground.(jsx?|tsx?)');
|
|
128
128
|
const preloads = [];
|
|
@@ -148,23 +148,23 @@ function pluginPlayground(options) {
|
|
|
148
148
|
const { default: remarkGFM } = await import("remark-gfm");
|
|
149
149
|
try {
|
|
150
150
|
const processor = createProcessor({
|
|
151
|
-
format:
|
|
151
|
+
format: external_node_path_default.extname(filepath).slice(1),
|
|
152
152
|
remarkPlugins: [
|
|
153
153
|
remarkGFM
|
|
154
154
|
]
|
|
155
155
|
});
|
|
156
|
-
const source = await
|
|
156
|
+
const source = await external_node_fs_default.promises.readFile(filepath, 'utf-8');
|
|
157
157
|
const ast = processor.parse(source);
|
|
158
158
|
visit(ast, 'mdxJsxFlowElement', (node)=>{
|
|
159
159
|
if ('code' === node.name) {
|
|
160
|
-
const src =
|
|
160
|
+
const src = getNodeAttribute(node, 'src');
|
|
161
161
|
if ('string' != typeof src) return;
|
|
162
|
-
const demoPath =
|
|
163
|
-
if (!
|
|
164
|
-
const code =
|
|
162
|
+
const demoPath = join(external_node_path_default.dirname(filepath), src);
|
|
163
|
+
if (!external_node_fs_default.existsSync(demoPath)) return;
|
|
164
|
+
const code = external_node_fs_default.readFileSync(demoPath, {
|
|
165
165
|
encoding: 'utf8'
|
|
166
166
|
});
|
|
167
|
-
const thisImports = parseImports(code,
|
|
167
|
+
const thisImports = parseImports(code, external_node_path_default.extname(demoPath));
|
|
168
168
|
thisImports.forEach((x)=>{
|
|
169
169
|
if (void 0 === imports[x]) imports[x] = x;
|
|
170
170
|
});
|
|
@@ -266,10 +266,10 @@ function pluginPlayground(options) {
|
|
|
266
266
|
]
|
|
267
267
|
],
|
|
268
268
|
globalComponents: [
|
|
269
|
-
render ? render :
|
|
269
|
+
render ? render : external_node_path_default.join(staticPath, 'global-components', 'Playground.tsx')
|
|
270
270
|
]
|
|
271
271
|
},
|
|
272
|
-
globalStyles:
|
|
272
|
+
globalStyles: external_node_path_default.join(staticPath, 'global-styles', 'web.css')
|
|
273
273
|
};
|
|
274
274
|
}
|
|
275
275
|
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
|
|
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):
|
|
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():
|
|
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
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import react_default, { loader } from "@monaco-editor/react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useDark } from "@rspress/core/runtime";
|
|
4
|
+
import external_react_default, { 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
|
-
|
|
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 =
|
|
28
|
-
const theme =
|
|
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__*/
|
|
35
|
+
return /*#__PURE__*/ jsx("div", {
|
|
36
36
|
className: `rspress-playground-editor ${className}`,
|
|
37
|
-
children: /*#__PURE__*/
|
|
37
|
+
children: /*#__PURE__*/ jsx(react_default, {
|
|
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
|
|
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__*/
|
|
231
|
+
comp: /*#__PURE__*/ external_react_default.createElement(runExports.default)
|
|
232
232
|
});
|
|
233
233
|
this.setState({
|
|
234
234
|
error: new Error('No default export')
|
|
@@ -254,12 +254,12 @@ class Runner extends __WEBPACK_EXTERNAL_MODULE_react__.Component {
|
|
|
254
254
|
render() {
|
|
255
255
|
const { className = '', code, language, getImport, ...rest } = this.props;
|
|
256
256
|
const { error, comp } = this.state;
|
|
257
|
-
return /*#__PURE__*/
|
|
257
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
258
258
|
className: `rspress-playground-runner ${className}`,
|
|
259
259
|
...rest,
|
|
260
260
|
children: [
|
|
261
261
|
comp,
|
|
262
|
-
error && /*#__PURE__*/
|
|
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
|
-
|
|
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_default 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
|
+
"version": "2.0.0-beta.12",
|
|
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": {
|
|
@@ -33,19 +33,19 @@
|
|
|
33
33
|
"remark-gfm": "^4.0.1",
|
|
34
34
|
"rspack-plugin-virtual-module": "1.0.1",
|
|
35
35
|
"unist-util-visit": "^5.0.0",
|
|
36
|
-
"@rspress/shared": "2.0.0-beta.
|
|
36
|
+
"@rspress/shared": "2.0.0-beta.12"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@babel/types": "^7.27.
|
|
40
|
-
"@rsbuild/plugin-react": "~1.3.
|
|
41
|
-
"@rslib/core": "0.
|
|
39
|
+
"@babel/types": "^7.27.6",
|
|
40
|
+
"@rsbuild/plugin-react": "~1.3.2",
|
|
41
|
+
"@rslib/core": "0.9.2",
|
|
42
42
|
"@types/babel__core": "^7.20.5",
|
|
43
43
|
"@types/babel__standalone": "^7.1.9",
|
|
44
44
|
"@types/babel__traverse": "^7.20.7",
|
|
45
45
|
"@types/mdast": "^4.0.4",
|
|
46
46
|
"@types/node": "^22.8.1",
|
|
47
|
-
"@types/react": "^
|
|
48
|
-
"@types/react-dom": "^
|
|
47
|
+
"@types/react": "^19.1.6",
|
|
48
|
+
"@types/react-dom": "^19.1.6",
|
|
49
49
|
"mdast-util-mdx-jsx": "^3.2.0",
|
|
50
50
|
"react": "^19.1.0",
|
|
51
51
|
"react-dom": "^19.1.0",
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
"rsbuild-plugin-publint": "^0.3.2",
|
|
54
54
|
"typescript": "^5.8.2",
|
|
55
55
|
"unified": "^11.0.5",
|
|
56
|
-
"@rspress/plugin-playground": "2.0.0-beta.
|
|
56
|
+
"@rspress/plugin-playground": "2.0.0-beta.12"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
|
-
"@rspress/core": "^2.0.0-beta.
|
|
59
|
+
"@rspress/core": "^2.0.0-beta.12",
|
|
60
60
|
"react": ">=18.0.0",
|
|
61
61
|
"react-router-dom": "^6.8.1"
|
|
62
62
|
},
|