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

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 (13) hide show
  1. package/README.md +4 -0
  2. package/dist/cli/cjs/index.js +82 -2547
  3. package/dist/cli/cjs/index.js.map +1 -1
  4. package/dist/cli/esm/index.d.ts +5 -0
  5. package/dist/cli/esm/index.js +201 -2821
  6. package/dist/cli/esm/index.js.map +1 -1
  7. package/dist/web/cjs/index.js +75 -57
  8. package/dist/web/cjs/index.js.map +1 -1
  9. package/dist/web/esm/index.js +106 -102
  10. package/dist/web/esm/index.js.map +1 -1
  11. package/package.json +5 -5
  12. package/static/global-components/Playground.tsx +46 -4
  13. package/static/global-styles/web.css +22 -5
package/dist/web/cjs/index.js CHANGED
@@ -1,9 +1,11 @@
1
+ "use strict";
1
2
  var __create = Object.create;
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
6
  var __getProtoOf = Object.getPrototypeOf;
6
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
7
9
  var __export = (target, all) => {
8
10
  for (var name in all)
9
11
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -25,24 +27,29 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
25
27
  mod
26
28
  ));
27
29
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+ var __publicField = (obj, key, value) => {
31
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
32
+ return value;
33
+ };
28
34
 
29
35
  // src/web/index.ts
30
36
  var web_exports = {};
31
37
  __export(web_exports, {
32
38
  Editor: () => Editor,
33
- MonacoEditor: () => import_react3.default,
34
- MonacoEditorLoader: () => import_react3.loader,
35
- MonacoEditorProps: () => import_react3.EditorProps,
39
+ MonacoEditor: () => import_react4.default,
40
+ MonacoEditorLoader: () => import_react4.loader,
41
+ MonacoEditorProps: () => import_react4.EditorProps,
36
42
  Runner: () => Runner
37
43
  });
38
44
  module.exports = __toCommonJS(web_exports);
39
- var import_react3 = __toESM(require("@monaco-editor/react"));
45
+ var import_react4 = __toESM(require("@monaco-editor/react"));
40
46
 
41
47
  // src/web/editor.tsx
42
- var import_react = __toESM(require("@monaco-editor/react"));
48
+ var import_react = require("react");
49
+ var import_react2 = __toESM(require("@monaco-editor/react"));
50
+ var import_runtime = require("@rspress/core/runtime");
43
51
 
44
52
  // src/web/constant.ts
45
- var DEFAULT_BABEL_URL = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.20/babel.min.js";
46
53
  var DEFAULT_MONACO_URL = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs";
47
54
 
48
55
  // src/web/editor.tsx
@@ -60,7 +67,7 @@ function initLoader() {
60
67
  }
61
68
  } catch (e) {
62
69
  }
63
- import_react.loader.config(loaderConfig);
70
+ import_react2.loader.config(loaderConfig);
64
71
  }
65
72
  initLoader();
66
73
  function getMonacoOptions() {
@@ -71,12 +78,19 @@ function getMonacoOptions() {
71
78
  return {};
72
79
  }
73
80
  function Editor(props) {
74
- const { options, className = "", ...rest } = props || {};
81
+ const { options, className = "", theme: themeProp, ...rest } = props || {};
82
+ const dark = (0, import_runtime.useDark)();
83
+ const theme = (0, import_react.useMemo)(() => {
84
+ if (themeProp) {
85
+ return themeProp;
86
+ }
87
+ return dark ? "vs-dark" : "light";
88
+ }, [themeProp, dark]);
75
89
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `rspress-playground-editor ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
76
- import_react.default,
90
+ import_react2.default,
77
91
  {
78
92
  ...rest,
79
- theme: "light",
93
+ theme,
80
94
  options: {
81
95
  minimap: {
82
96
  enabled: true,
@@ -101,7 +115,7 @@ function Editor(props) {
101
115
  }
102
116
 
103
117
  // src/web/runner.tsx
104
- var import_react2 = __toESM(require("react"));
118
+ var import_react3 = __toESM(require("react"));
105
119
 
106
120
  // src/web/ast.ts
107
121
  function createVariableDeclaration(id, init) {
@@ -159,44 +173,29 @@ function createGetImport(name, getDefault) {
159
173
  };
160
174
  }
161
175
 
162
- // src/web/utils.ts
163
- var loadingMap = /* @__PURE__ */ new Map();
164
- function loadScript(url) {
165
- const exists = loadingMap.get(url);
166
- if (exists) {
167
- return exists;
168
- }
169
- const n = new Promise((resolve) => {
170
- const e = document.createElement("script");
171
- e.src = url;
172
- e.onload = () => resolve();
173
- document.body.appendChild(e);
174
- });
175
- loadingMap.set(url, n);
176
- return n;
177
- }
178
-
179
176
  // src/web/babel.ts
180
- async function getBabel() {
181
- if (!window.Babel) {
182
- let babelUrl = DEFAULT_BABEL_URL;
183
- try {
184
- const u = __PLAYGROUND_BABEL_URL__;
185
- if (u) {
186
- babelUrl = u;
187
- }
188
- } catch (e) {
189
- }
190
- await loadScript(babelUrl);
177
+ function getBabel() {
178
+ if (window.Babel) {
179
+ return window.Babel;
180
+ }
181
+ const el = document.getElementById("rspress-playground-babel");
182
+ if (!el) {
183
+ throw new Error("Babel not found");
191
184
  }
192
- return window.Babel;
185
+ return new Promise((resolve) => {
186
+ el.addEventListener("load", () => {
187
+ resolve(window.Babel);
188
+ });
189
+ });
193
190
  }
194
191
 
195
192
  // src/web/runner.tsx
196
193
  var import_jsx_runtime2 = require("react/jsx-runtime");
197
- var Runner = class extends import_react2.Component {
194
+ var DEBOUNCE_TIME = 800;
195
+ var Runner = class extends import_react3.Component {
198
196
  constructor(props) {
199
197
  super(props);
198
+ __publicField(this, "timer");
200
199
  this.state = {
201
200
  error: void 0,
202
201
  comp: null
@@ -217,7 +216,7 @@ var Runner = class extends import_react2.Component {
217
216
  this.timer = setTimeout(() => {
218
217
  this.timer = null;
219
218
  this.doCompile(targetCode);
220
- }, 600);
219
+ }, DEBOUNCE_TIME);
221
220
  }
222
221
  async doCompile(targetCode) {
223
222
  const { language, getImport } = this.props;
@@ -238,14 +237,22 @@ var Runner = class extends import_react2.Component {
238
237
  }
239
238
  const result = babel.transform(targetCode, {
240
239
  sourceType: "module",
240
+ sourceMaps: "inline",
241
241
  presets,
242
242
  plugins: [
243
243
  {
244
+ pre() {
245
+ this.hasReactImported = false;
246
+ },
244
247
  visitor: {
245
248
  ImportDeclaration(path) {
246
249
  const pkg = path.node.source.value;
247
250
  const code = [];
251
+ const specifiers = [];
248
252
  for (const specifier of path.node.specifiers) {
253
+ if (specifier.local.name === "React") {
254
+ this.hasReactImported = true;
255
+ }
249
256
  if (specifier.type === "ImportDefaultSpecifier") {
250
257
  code.push(
251
258
  createVariableDeclaration(
@@ -263,16 +270,29 @@ var Runner = class extends import_react2.Component {
263
270
  );
264
271
  }
265
272
  if (specifier.type === "ImportSpecifier") {
266
- code.push(
267
- createVariableDeclaration(
268
- createObjectPattern([specifier.local.name]),
269
- createGetImport(pkg)
270
- )
271
- );
273
+ specifiers.push(specifier.local.name);
272
274
  }
273
275
  }
276
+ if (specifiers.length > 0) {
277
+ code.push(
278
+ createVariableDeclaration(
279
+ createObjectPattern(specifiers),
280
+ createGetImport(pkg)
281
+ )
282
+ );
283
+ }
274
284
  path.replaceWithMultiple(code);
275
285
  }
286
+ },
287
+ post(file) {
288
+ if (!this.hasReactImported) {
289
+ file.ast.program.body.unshift(
290
+ createVariableDeclaration(
291
+ "React",
292
+ createGetImport("react", true)
293
+ )
294
+ );
295
+ }
276
296
  }
277
297
  }
278
298
  ]
@@ -286,13 +306,12 @@ var Runner = class extends import_react2.Component {
286
306
  if (runExports.default) {
287
307
  this.setState({
288
308
  error: void 0,
289
- comp: import_react2.default.createElement(runExports.default)
309
+ comp: import_react3.default.createElement(runExports.default)
290
310
  });
291
311
  return;
292
312
  }
293
313
  this.setState({
294
- error: new Error("No default export"),
295
- comp: null
314
+ error: new Error("No default export")
296
315
  });
297
316
  } catch (e) {
298
317
  if (targetCode !== this.props.code) {
@@ -300,8 +319,7 @@ var Runner = class extends import_react2.Component {
300
319
  }
301
320
  console.error(e);
302
321
  this.setState({
303
- error: e,
304
- comp: null
322
+ error: e
305
323
  });
306
324
  }
307
325
  }
@@ -320,10 +338,10 @@ var Runner = class extends import_react2.Component {
320
338
  render() {
321
339
  const { className = "", code, language, getImport, ...rest } = this.props;
322
340
  const { error, comp } = this.state;
323
- if (error) {
324
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `rspress-playground-runner ${className}`, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "red" }, children: error.message }) });
325
- }
326
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `rspress-playground-runner ${className}`, ...rest, children: comp });
341
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `rspress-playground-runner ${className}`, ...rest, children: [
342
+ comp,
343
+ error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "rspress-playground-error", children: error.message })
344
+ ] });
327
345
  }
328
346
  };
329
347
  // Annotate the CommonJS export names for ESM import in node:
package/dist/web/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":[],"sources":["../../../src/web/index.ts","../../../src/web/editor.tsx","../../../src/web/constant.ts","../../../src/web/runner.tsx","../../../src/web/ast.ts","../../../src/web/utils.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 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"]}
1
+ {"version":3,"mappings":"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","names":[],"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/dist/web/esm/index.js CHANGED
@@ -1,15 +1,29 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
+ var __publicField = (obj, key, value) => {
4
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
+ return value;
6
+ };
7
+
1
8
  // src/web/index.ts
2
- import { default as default2, loader as loader2, EditorProps } from "@monaco-editor/react";
9
+ import {
10
+ default as default2,
11
+ loader as loader2,
12
+ EditorProps
13
+ } from "@monaco-editor/react";
3
14
 
4
15
  // src/web/editor.tsx
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- import MonacoEditor, { loader } from "@monaco-editor/react";
16
+ import { useMemo } from "react";
17
+ import MonacoEditor, {
18
+ loader
19
+ } from "@monaco-editor/react";
20
+ import { useDark } from "@rspress/core/runtime";
7
21
 
8
22
  // src/web/constant.ts
9
- var DEFAULT_BABEL_URL = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.20/babel.min.js";
10
23
  var DEFAULT_MONACO_URL = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs";
11
24
 
12
25
  // src/web/editor.tsx
26
+ import { jsx } from "react/jsx-runtime";
13
27
  function initLoader() {
14
28
  let loaderConfig = {
15
29
  paths: {
@@ -34,12 +48,19 @@ function getMonacoOptions() {
34
48
  return {};
35
49
  }
36
50
  function Editor(props) {
37
- const { options, className = "", ...rest } = props || {};
38
- return /* @__PURE__ */ _jsx("div", {
39
- className: `rspress-playground-editor ${className}`,
40
- children: /* @__PURE__ */ _jsx(MonacoEditor, {
51
+ const { options, className = "", theme: themeProp, ...rest } = props || {};
52
+ const dark = useDark();
53
+ const theme = useMemo(() => {
54
+ if (themeProp) {
55
+ return themeProp;
56
+ }
57
+ return dark ? "vs-dark" : "light";
58
+ }, [themeProp, dark]);
59
+ return /* @__PURE__ */ jsx("div", { className: `rspress-playground-editor ${className}`, children: /* @__PURE__ */ jsx(
60
+ MonacoEditor,
61
+ {
41
62
  ...rest,
42
- theme: "light",
63
+ theme,
43
64
  options: {
44
65
  minimap: {
45
66
  enabled: true,
@@ -59,13 +80,12 @@ function Editor(props) {
59
80
  ...getMonacoOptions(),
60
81
  ...options
61
82
  }
62
- })
63
- });
83
+ }
84
+ ) });
64
85
  }
65
86
 
66
87
  // src/web/runner.tsx
67
- import { jsx as _jsx2 } from "react/jsx-runtime";
68
- import React, { Component } from "react";
88
+ import React2, { Component } from "react";
69
89
 
70
90
  // src/web/ast.ts
71
91
  function createVariableDeclaration(id, init) {
@@ -123,54 +143,36 @@ function createGetImport(name, getDefault) {
123
143
  };
124
144
  }
125
145
 
126
- // src/web/utils.ts
127
- var loadingMap = /* @__PURE__ */ new Map();
128
- function loadScript(url) {
129
- const exists = loadingMap.get(url);
130
- if (exists) {
131
- return exists;
132
- }
133
- const n = new Promise((resolve) => {
134
- const e = document.createElement("script");
135
- e.src = url;
136
- e.onload = () => resolve();
137
- document.body.appendChild(e);
138
- });
139
- loadingMap.set(url, n);
140
- return n;
141
- }
142
-
143
146
  // src/web/babel.ts
144
- async function getBabel() {
145
- if (!window.Babel) {
146
- let babelUrl = DEFAULT_BABEL_URL;
147
- try {
148
- const u = __PLAYGROUND_BABEL_URL__;
149
- if (u) {
150
- babelUrl = u;
151
- }
152
- } catch (e) {
153
- }
154
- await loadScript(babelUrl);
147
+ function getBabel() {
148
+ if (window.Babel) {
149
+ return window.Babel;
150
+ }
151
+ const el = document.getElementById("rspress-playground-babel");
152
+ if (!el) {
153
+ throw new Error("Babel not found");
155
154
  }
156
- return window.Babel;
155
+ return new Promise((resolve) => {
156
+ el.addEventListener("load", () => {
157
+ resolve(window.Babel);
158
+ });
159
+ });
157
160
  }
158
161
 
159
162
  // src/web/runner.tsx
160
- function _define_property(obj, key, value) {
161
- if (key in obj) {
162
- Object.defineProperty(obj, key, {
163
- value,
164
- enumerable: true,
165
- configurable: true,
166
- writable: true
167
- });
168
- } else {
169
- obj[key] = value;
170
- }
171
- return obj;
172
- }
163
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
164
+ var DEBOUNCE_TIME = 800;
173
165
  var Runner = class extends Component {
166
+ constructor(props) {
167
+ super(props);
168
+ __publicField(this, "timer");
169
+ this.state = {
170
+ error: void 0,
171
+ comp: null
172
+ };
173
+ this.doCompile = this.doCompile.bind(this);
174
+ this.waitCompile = this.waitCompile.bind(this);
175
+ }
174
176
  static getDerivedStateFromError(error) {
175
177
  return {
176
178
  error,
@@ -184,22 +186,15 @@ var Runner = class extends Component {
184
186
  this.timer = setTimeout(() => {
185
187
  this.timer = null;
186
188
  this.doCompile(targetCode);
187
- }, 600);
189
+ }, DEBOUNCE_TIME);
188
190
  }
189
191
  async doCompile(targetCode) {
190
192
  const { language, getImport } = this.props;
191
193
  const babel = await getBabel();
192
194
  try {
193
195
  const presets = [
194
- [
195
- babel.availablePresets.react
196
- ],
197
- [
198
- babel.availablePresets.env,
199
- {
200
- modules: "commonjs"
201
- }
202
- ]
196
+ [babel.availablePresets.react],
197
+ [babel.availablePresets.env, { modules: "commonjs" }]
203
198
  ];
204
199
  if (language === "tsx" || language === "ts") {
205
200
  presets.unshift([
@@ -212,28 +207,62 @@ var Runner = class extends Component {
212
207
  }
213
208
  const result = babel.transform(targetCode, {
214
209
  sourceType: "module",
210
+ sourceMaps: "inline",
215
211
  presets,
216
212
  plugins: [
217
213
  {
214
+ pre() {
215
+ this.hasReactImported = false;
216
+ },
218
217
  visitor: {
219
218
  ImportDeclaration(path) {
220
219
  const pkg = path.node.source.value;
221
220
  const code = [];
221
+ const specifiers = [];
222
222
  for (const specifier of path.node.specifiers) {
223
+ if (specifier.local.name === "React") {
224
+ this.hasReactImported = true;
225
+ }
223
226
  if (specifier.type === "ImportDefaultSpecifier") {
224
- code.push(createVariableDeclaration(specifier.local.name, createGetImport(pkg, true)));
227
+ code.push(
228
+ createVariableDeclaration(
229
+ specifier.local.name,
230
+ createGetImport(pkg, true)
231
+ )
232
+ );
225
233
  }
226
234
  if (specifier.type === "ImportNamespaceSpecifier") {
227
- code.push(createVariableDeclaration(specifier.local.name, createGetImport(pkg)));
235
+ code.push(
236
+ createVariableDeclaration(
237
+ specifier.local.name,
238
+ createGetImport(pkg)
239
+ )
240
+ );
228
241
  }
229
242
  if (specifier.type === "ImportSpecifier") {
230
- code.push(createVariableDeclaration(createObjectPattern([
231
- specifier.local.name
232
- ]), createGetImport(pkg)));
243
+ specifiers.push(specifier.local.name);
233
244
  }
234
245
  }
246
+ if (specifiers.length > 0) {
247
+ code.push(
248
+ createVariableDeclaration(
249
+ createObjectPattern(specifiers),
250
+ createGetImport(pkg)
251
+ )
252
+ );
253
+ }
235
254
  path.replaceWithMultiple(code);
236
255
  }
256
+ },
257
+ post(file) {
258
+ if (!this.hasReactImported) {
259
+ file.ast.program.body.unshift(
260
+ createVariableDeclaration(
261
+ "React",
262
+ createGetImport("react", true)
263
+ )
264
+ );
265
+ }
237
266
  }
238
267
  }
239
268
  ]
@@ -247,13 +276,12 @@ var Runner = class extends Component {
247
276
  if (runExports.default) {
248
277
  this.setState({
249
278
  error: void 0,
250
- comp: /* @__PURE__ */ React.createElement(runExports.default)
279
+ comp: React2.createElement(runExports.default)
251
280
  });
252
281
  return;
253
282
  }
254
283
  this.setState({
255
- error: new Error("No default export"),
256
- comp: null
284
+ error: new Error("No default export")
257
285
  });
258
286
  } catch (e) {
259
287
  if (targetCode !== this.props.code) {
@@ -261,8 +289,7 @@ var Runner = class extends Component {
261
289
  }
262
290
  console.error(e);
263
291
  this.setState({
264
- error: e,
265
- comp: null
292
+ error: e
266
293
  });
267
294
  }
268
295
  }
@@ -281,33 +308,10 @@ var Runner = class extends Component {
281
308
  render() {
282
309
  const { className = "", code, language, getImport, ...rest } = this.props;
283
310
  const { error, comp } = this.state;
284
- if (error) {
285
- return /* @__PURE__ */ _jsx2("div", {
286
- className: `rspress-playground-runner ${className}`,
287
- ...rest,
288
- children: /* @__PURE__ */ _jsx2("span", {
289
- style: {
290
- color: "red"
291
- },
292
- children: error.message
293
- })
294
- });
295
- }
296
- return /* @__PURE__ */ _jsx2("div", {
297
- className: `rspress-playground-runner ${className}`,
298
- ...rest,
299
- children: comp
300
- });
301
- }
302
- constructor(props) {
303
- super(props);
304
- _define_property(this, "timer", void 0);
305
- this.state = {
306
- error: void 0,
307
- comp: null
308
- };
309
- this.doCompile = this.doCompile.bind(this);
310
- this.waitCompile = this.waitCompile.bind(this);
311
+ return /* @__PURE__ */ jsxs("div", { className: `rspress-playground-runner ${className}`, ...rest, children: [
312
+ comp,
313
+ error && /* @__PURE__ */ jsx2("pre", { className: "rspress-playground-error", children: error.message })
314
+ ] });
311
315
  }
312
316
  };
313
317
  export {