@rspress/plugin-playground 0.0.0-nightly-20230919160314

package/dist/web/cjs/index.js

@@ -0,0 +1,297 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/web/index.ts
+var web_exports = {};
+__export(web_exports, {
+  Editor: () => Editor,
+  MonacoEditor: () => import_react3.default,
+  MonacoEditorLoader: () => import_react3.loader,
+  MonacoEditorProps: () => import_react3.EditorProps,
+  Runner: () => Runner
+});
+module.exports = __toCommonJS(web_exports);
+var import_react3 = __toESM(require("@monaco-editor/react"));
+
+// src/web/editor.tsx
+var import_react = __toESM(require("@monaco-editor/react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function initLoader() {
+  let loaderConfig = {
+    paths: { vs: "https://unpkg.com/monaco-editor@0.43.0/min/vs" }
+  };
+  try {
+    const keys = Object.keys(__PLAYGROUND_MONACO_LOADER__);
+    if (keys.length > 0) {
+      loaderConfig = __PLAYGROUND_MONACO_LOADER__;
+    }
+  } catch (e) {
+  }
+  import_react.loader.config(loaderConfig);
+}
+initLoader();
+function getMonacoOptions() {
+  try {
+    return __PLAYGROUND_MONACO_OPTIONS__;
+  } catch (e) {
+  }
+  return {};
+}
+function Editor(props) {
+  const { options, className = "", ...rest } = props || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `rspress-playground-editor ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.default,
+    {
+      ...rest,
+      theme: "light",
+      options: {
+        minimap: {
+          enabled: true,
+          autohide: true
+        },
+        fontSize: 14,
+        lineNumbersMinChars: 7,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        wordBasedSuggestions: true,
+        quickSuggestions: true,
+        scrollbar: {
+          verticalScrollbarSize: 8,
+          horizontalScrollbarSize: 8
+        },
+        scrollPredominantAxis: false,
+        ...getMonacoOptions(),
+        ...options
+      }
+    }
+  ) });
+}
+
+// src/web/runner.tsx
+var babel = __toESM(require("@babel/standalone"));
+var import_react2 = __toESM(require("react"));
+
+// src/web/ast.ts
+function createVariableDeclaration(id, init) {
+  return {
+    type: "VariableDeclaration",
+    declarations: [
+      {
+        type: "VariableDeclarator",
+        id: typeof id === "string" ? {
+          type: "Identifier",
+          name: id
+        } : id,
+        init
+      }
+    ],
+    kind: "const"
+  };
+}
+function createObjectPattern(names) {
+  return {
+    type: "ObjectPattern",
+    properties: names.map((name) => ({
+      type: "ObjectProperty",
+      key: {
+        type: "Identifier",
+        name
+      },
+      computed: false,
+      method: false,
+      shorthand: true,
+      value: {
+        type: "Identifier",
+        name
+      }
+    }))
+  };
+}
+function createGetImport(name, getDefault) {
+  return {
+    type: "CallExpression",
+    callee: {
+      type: "Identifier",
+      name: "__get_import"
+    },
+    arguments: [
+      {
+        type: "StringLiteral",
+        value: name
+      },
+      {
+        type: "BooleanLiteral",
+        value: Boolean(getDefault)
+      }
+    ]
+  };
+}
+
+// src/web/runner.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Runner = class extends import_react2.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: void 0,
+      comp: null
+    };
+    this.doCompile = this.doCompile.bind(this);
+    this.waitCompile = this.waitCompile.bind(this);
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      error,
+      comp: null
+    };
+  }
+  waitCompile(targetCode) {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.doCompile(targetCode);
+    }, 600);
+  }
+  doCompile(targetCode) {
+    const { language, getImport } = this.props;
+    try {
+      const presets = [
+        [babel.availablePresets.react],
+        [babel.availablePresets.env, { modules: "commonjs" }]
+      ];
+      if (language === "tsx" || language === "ts") {
+        presets.unshift([
+          babel.availablePresets.typescript,
+          {
+            allExtensions: true,
+            isTSX: language === "tsx"
+          }
+        ]);
+      }
+      const result = babel.transform(targetCode, {
+        sourceType: "module",
+        presets,
+        plugins: [
+          {
+            visitor: {
+              ImportDeclaration(path) {
+                const pkg = path.node.source.value;
+                const code = [];
+                for (const specifier of path.node.specifiers) {
+                  if (specifier.type === "ImportDefaultSpecifier") {
+                    code.push(
+                      createVariableDeclaration(
+                        specifier.local.name,
+                        createGetImport(pkg, true)
+                      )
+                    );
+                  }
+                  if (specifier.type === "ImportNamespaceSpecifier") {
+                    code.push(
+                      createVariableDeclaration(
+                        specifier.local.name,
+                        createGetImport(pkg)
+                      )
+                    );
+                  }
+                  if (specifier.type === "ImportSpecifier") {
+                    code.push(
+                      createVariableDeclaration(
+                        createObjectPattern([specifier.local.name]),
+                        createGetImport(pkg)
+                      )
+                    );
+                  }
+                }
+                path.replaceWithMultiple(code);
+              }
+            }
+          }
+        ]
+      });
+      if (targetCode !== this.props.code || !result || !result.code) {
+        return;
+      }
+      const runExports = {};
+      const func = new Function("__get_import", "exports", result.code);
+      func(getImport, runExports);
+      if (runExports.default) {
+        this.setState({
+          error: void 0,
+          comp: import_react2.default.createElement(runExports.default)
+        });
+        return;
+      }
+      this.setState({
+        error: new Error("No default export"),
+        comp: null
+      });
+    } catch (e) {
+      if (targetCode !== this.props.code) {
+        return;
+      }
+      console.error(e);
+      this.setState({
+        error: e,
+        comp: null
+      });
+    }
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error);
+    console.error(errorInfo);
+  }
+  componentDidMount() {
+    this.doCompile(this.props.code);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.code !== this.props.code) {
+      this.waitCompile(this.props.code);
+    }
+  }
+  render() {
+    const { className = "", code, language, getImport, ...rest } = this.props;
+    const { error, comp } = this.state;
+    if (error) {
+      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 }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `rspress-playground-runner ${className}`, ...rest, children: comp });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Editor,
+  MonacoEditor,
+  MonacoEditorLoader,
+  MonacoEditorProps,
+  Runner
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAIO;;;ACHP,mBAGO;AA4CD;AAnCN,SAAS,aAAa;AACpB,MAAI,eAAe;AAAA,IACjB,OAAO,EAAE,IAAI,gDAAgD;AAAA,EAC/D;AAEA,MAAI;AACF,UAAM,OAAO,OAAO,KAAK,4BAA4B;AAErD,QAAI,KAAK,SAAS,GAAG;AACnB,qBAAe;AAAA,IACjB;AAAA,EACF,SAAS,GAAP;AAAA,EAEF;AAEA,sBAAO,OAAO,YAAY;AAC5B;AACA,WAAW;AAEX,SAAS,mBAAmB;AAC1B,MAAI;AACF,WAAO;AAAA,EACT,SAAS,GAAP;AAAA,EAEF;AACA,SAAO,CAAC;AACV;AAIO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,YAAY,IAAI,GAAG,KAAK,IAAI,SAAS,CAAC;AAEvD,SACE,4CAAC,SAAI,WAAW,6BAA6B,aAC3C;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,QACA,UAAU;AAAA,QACV,qBAAqB;AAAA,QACrB,sBAAsB;AAAA,QACtB,iBAAiB;AAAA,QACjB,sBAAsB;AAAA,QACtB,kBAAkB;AAAA,QAClB,WAAW;AAAA,UACT,uBAAuB;AAAA,UACvB,yBAAyB;AAAA,QAC3B;AAAA,QACA,uBAAuB;AAAA,QACvB,GAAG,iBAAiB;AAAA,QACpB,GAAG;AAAA,MACL;AAAA;AAAA,EACF,GACF;AAEJ;;;ACzEA,YAAuB;AAEvB,oBAAiD;;;ACK1C,SAAS,0BACd,IACA,MACqB;AACrB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,MACZ;AAAA,QACE,MAAM;AAAA,QACN,IACE,OAAO,OAAO,WACV;AAAA,UACE,MAAM;AAAA,UACN,MAAM;AAAA,QACR,IACA;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,EACR;AACF;AAEO,SAAS,oBAAoB,OAAgC;AAClE,SAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,IAAI,WAAS;AAAA,MAC7B,MAAM;AAAA,MACN,KAAK;AAAA,QACH,MAAM;AAAA,QACN;AAAA,MACF;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA,QACL,MAAM;AAAA,QACN;AAAA,MACF;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEO,SAAS,gBACd,MACA,YACgB;AAChB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO,QAAQ,UAAU;AAAA,MAC3B;AAAA,IACF;AAAA,EACF;AACF;;;ADsGU;AAzJV,IAAM,SAAN,cAAqB,wBAAoC;AAAA,EAUvD,YAAY,OAAoB;AAC9B,UAAM,KAAK;AAEX,SAAK,QAAQ;AAAA,MACX,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAEA,SAAK,YAAY,KAAK,UAAU,KAAK,IAAI;AACzC,SAAK,cAAc,KAAK,YAAY,KAAK,IAAI;AAAA,EAC/C;AAAA,EAnBA,OAAO,yBAAyB,OAAc;AAC5C,WAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAgBA,YAAY,YAAoB;AAC9B,QAAI,KAAK,OAAO;AACd,mBAAa,KAAK,KAAK;AAAA,IACzB;AACA,SAAK,QAAQ,WAAW,MAAM;AAC5B,WAAK,QAAQ;AACb,WAAK,UAAU,UAAU;AAAA,IAC3B,GAAG,GAAG;AAAA,EACR;AAAA,EAEA,UAAU,YAAoB;AAC5B,UAAM,EAAE,UAAU,UAAU,IAAI,KAAK;AACrC,QAAI;AACF,YAAM,UAAU;AAAA,QACd,CAAO,uBAAiB,KAAK;AAAA,QAC7B,CAAO,uBAAiB,KAAK,EAAE,SAAS,WAAW,CAAC;AAAA,MACtD;AACA,UAAI,aAAa,SAAS,aAAa,MAAM;AAC3C,gBAAQ,QAAQ;AAAA,UACR,uBAAiB;AAAA,UACvB;AAAA,YACE,eAAe;AAAA,YACf,OAAO,aAAa;AAAA,UACtB;AAAA,QACF,CAAC;AAAA,MACH;AACA,YAAM,SAAe,gBAAU,YAAY;AAAA,QACzC,YAAY;AAAA,QACZ;AAAA,QACA,SAAS;AAAA,UACP;AAAA,YACE,SAAS;AAAA,cACP,kBAAkB,MAAM;AACtB,sBAAM,MAAM,KAAK,KAAK,OAAO;AAC7B,sBAAM,OAAe,CAAC;AACtB,2BAAW,aAAa,KAAK,KAAK,YAAY;AAE5C,sBAAI,UAAU,SAAS,0BAA0B;AAE/C,yBAAK;AAAA,sBACH;AAAA,wBACE,UAAU,MAAM;AAAA,wBAChB,gBAAgB,KAAK,IAAI;AAAA,sBAC3B;AAAA,oBACF;AAAA,kBACF;AAEA,sBAAI,UAAU,SAAS,4BAA4B;AAEjD,yBAAK;AAAA,sBACH;AAAA,wBACE,UAAU,MAAM;AAAA,wBAChB,gBAAgB,GAAG;AAAA,sBACrB;AAAA,oBACF;AAAA,kBACF;AAEA,sBAAI,UAAU,SAAS,mBAAmB;AAExC,yBAAK;AAAA,sBACH;AAAA,wBACE,oBAAoB,CAAC,UAAU,MAAM,IAAI,CAAC;AAAA,wBAC1C,gBAAgB,GAAG;AAAA,sBACrB;AAAA,oBACF;AAAA,kBACF;AAAA,gBACF;AACA,qBAAK,oBAAoB,IAAI;AAAA,cAC/B;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAGD,UAAI,eAAe,KAAK,MAAM,QAAQ,CAAC,UAAU,CAAC,OAAO,MAAM;AAC7D;AAAA,MACF;AAEA,YAAM,aAAkB,CAAC;AAEzB,YAAM,OAAO,IAAI,SAAS,gBAAgB,WAAW,OAAO,IAAI;AAChE,WAAK,WAAW,UAAU;AAE1B,UAAI,WAAW,SAAS;AACtB,aAAK,SAAS;AAAA,UACZ,OAAO;AAAA,UACP,MAAM,sBAAM,cAAc,WAAW,OAAO;AAAA,QAC9C,CAAC;AACD;AAAA,MACF;AAEA,WAAK,SAAS;AAAA,QACZ,OAAO,IAAI,MAAM,mBAAmB;AAAA,QACpC,MAAM;AAAA,MACR,CAAC;AAAA,IACH,SAAS,GAAP;AAEA,UAAI,eAAe,KAAK,MAAM,MAAM;AAClC;AAAA,MACF;AACA,cAAQ,MAAM,CAAC;AACf,WAAK,SAAS;AAAA,QACZ,OAAO;AAAA,QACP,MAAM;AAAA,MACR,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,kBAAkB,OAAc,WAA4B;AAC1D,YAAQ,MAAM,KAAK;AACnB,YAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EAEA,oBAAoB;AAClB,SAAK,UAAU,KAAK,MAAM,IAAI;AAAA,EAChC;AAAA,EAEA,mBAAmB,WAAwB;AACzC,QAAI,UAAU,SAAS,KAAK,MAAM,MAAM;AACtC,WAAK,YAAY,KAAK,MAAM,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,YAAY,IAAI,MAAM,UAAU,WAAW,GAAG,KAAK,IAAI,KAAK;AACpE,UAAM,EAAE,OAAO,KAAK,IAAI,KAAK;AAE7B,QAAI,OAAO;AACT,aACE,6CAAC,SAAI,WAAW,6BAA6B,aAAc,GAAG,MAC5D,uDAAC,UAAK,OAAO,EAAE,OAAO,MAAM,GAAI,gBAAM,SAAQ,GAChD;AAAA,IAEJ;AAEA,WACE,6CAAC,SAAI,WAAW,6BAA6B,aAAc,GAAG,MAC3D,gBACH;AAAA,EAEJ;AACF;","names":[],"sources":["../../../src/web/index.ts","../../../src/web/editor.tsx","../../../src/web/runner.tsx","../../../src/web/ast.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';\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: { vs: 'https://unpkg.com/monaco-editor@0.43.0/min/vs' },\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","import * as babel from '@babel/standalone';\nimport type { Node } from '@babel/types';\nimport React, { Component, HTMLAttributes } from 'react';\nimport {\n  createGetImport,\n  createObjectPattern,\n  createVariableDeclaration,\n} from './ast';\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  doCompile(targetCode: string) {\n    const { language, getImport } = this.props;\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"]}

package/dist/web/esm/index.d.ts

@@ -0,0 +1,36 @@
+import { EditorProps as EditorProps$1 } from '@monaco-editor/react';
+export { default as MonacoEditor, loader as MonacoEditorLoader, EditorProps as MonacoEditorProps } from '@monaco-editor/react';
+import React, { Component, HTMLAttributes } from 'react';
+
+declare global {
+    const __PLAYGROUND_MONACO_LOADER__: any;
+    const __PLAYGROUND_MONACO_OPTIONS__: any;
+}
+type EditorProps = Partial<EditorProps$1>;
+declare function Editor(props: EditorProps): JSX.Element;
+
+interface RunnerProps extends HTMLAttributes<HTMLDivElement> {
+    code: string;
+    language: string;
+    getImport: (name: string, getDefault?: boolean) => void;
+}
+interface RunnerState {
+    error?: Error;
+    comp: any;
+}
+declare class Runner extends Component<RunnerProps, RunnerState> {
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+        comp: null;
+    };
+    timer: any;
+    constructor(props: RunnerProps);
+    waitCompile(targetCode: string): void;
+    doCompile(targetCode: string): void;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: RunnerProps): void;
+    render(): JSX.Element;
+}
+
+export { Editor, Runner };

package/dist/web/esm/index.js

@@ -0,0 +1,282 @@
+// src/web/index.ts
+import { default as default2, loader as loader2, EditorProps } from "@monaco-editor/react";
+
+// src/web/editor.tsx
+import { jsx as _jsx } from "react/jsx-runtime";
+import MonacoEditor, { loader } from "@monaco-editor/react";
+function initLoader() {
+  let loaderConfig = {
+    paths: {
+      vs: "https://unpkg.com/monaco-editor@0.43.0/min/vs"
+    }
+  };
+  try {
+    const keys = Object.keys(__PLAYGROUND_MONACO_LOADER__);
+    if (keys.length > 0) {
+      loaderConfig = __PLAYGROUND_MONACO_LOADER__;
+    }
+  } catch (e) {
+  }
+  loader.config(loaderConfig);
+}
+initLoader();
+function getMonacoOptions() {
+  try {
+    return __PLAYGROUND_MONACO_OPTIONS__;
+  } catch (e) {
+  }
+  return {};
+}
+function Editor(props) {
+  const { options, className = "", ...rest } = props || {};
+  return /* @__PURE__ */ _jsx("div", {
+    className: `rspress-playground-editor ${className}`,
+    children: /* @__PURE__ */ _jsx(MonacoEditor, {
+      ...rest,
+      theme: "light",
+      options: {
+        minimap: {
+          enabled: true,
+          autohide: true
+        },
+        fontSize: 14,
+        lineNumbersMinChars: 7,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        wordBasedSuggestions: true,
+        quickSuggestions: true,
+        scrollbar: {
+          verticalScrollbarSize: 8,
+          horizontalScrollbarSize: 8
+        },
+        scrollPredominantAxis: false,
+        ...getMonacoOptions(),
+        ...options
+      }
+    })
+  });
+}
+
+// src/web/runner.tsx
+import { jsx as _jsx2 } from "react/jsx-runtime";
+import * as babel from "@babel/standalone";
+import React, { Component } from "react";
+
+// src/web/ast.ts
+function createVariableDeclaration(id, init) {
+  return {
+    type: "VariableDeclaration",
+    declarations: [
+      {
+        type: "VariableDeclarator",
+        id: typeof id === "string" ? {
+          type: "Identifier",
+          name: id
+        } : id,
+        init
+      }
+    ],
+    kind: "const"
+  };
+}
+function createObjectPattern(names) {
+  return {
+    type: "ObjectPattern",
+    properties: names.map((name) => ({
+      type: "ObjectProperty",
+      key: {
+        type: "Identifier",
+        name
+      },
+      computed: false,
+      method: false,
+      shorthand: true,
+      value: {
+        type: "Identifier",
+        name
+      }
+    }))
+  };
+}
+function createGetImport(name, getDefault) {
+  return {
+    type: "CallExpression",
+    callee: {
+      type: "Identifier",
+      name: "__get_import"
+    },
+    arguments: [
+      {
+        type: "StringLiteral",
+        value: name
+      },
+      {
+        type: "BooleanLiteral",
+        value: Boolean(getDefault)
+      }
+    ]
+  };
+}
+
+// src/web/runner.tsx
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var Runner = class extends Component {
+  static getDerivedStateFromError(error) {
+    return {
+      error,
+      comp: null
+    };
+  }
+  waitCompile(targetCode) {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.doCompile(targetCode);
+    }, 600);
+  }
+  doCompile(targetCode) {
+    const { language, getImport } = this.props;
+    try {
+      const presets = [
+        [
+          babel.availablePresets.react
+        ],
+        [
+          babel.availablePresets.env,
+          {
+            modules: "commonjs"
+          }
+        ]
+      ];
+      if (language === "tsx" || language === "ts") {
+        presets.unshift([
+          babel.availablePresets.typescript,
+          {
+            allExtensions: true,
+            isTSX: language === "tsx"
+          }
+        ]);
+      }
+      const result = babel.transform(targetCode, {
+        sourceType: "module",
+        presets,
+        plugins: [
+          {
+            visitor: {
+              ImportDeclaration(path) {
+                const pkg = path.node.source.value;
+                const code = [];
+                for (const specifier of path.node.specifiers) {
+                  if (specifier.type === "ImportDefaultSpecifier") {
+                    code.push(createVariableDeclaration(specifier.local.name, createGetImport(pkg, true)));
+                  }
+                  if (specifier.type === "ImportNamespaceSpecifier") {
+                    code.push(createVariableDeclaration(specifier.local.name, createGetImport(pkg)));
+                  }
+                  if (specifier.type === "ImportSpecifier") {
+                    code.push(createVariableDeclaration(createObjectPattern([
+                      specifier.local.name
+                    ]), createGetImport(pkg)));
+                  }
+                }
+                path.replaceWithMultiple(code);
+              }
+            }
+          }
+        ]
+      });
+      if (targetCode !== this.props.code || !result || !result.code) {
+        return;
+      }
+      const runExports = {};
+      const func = new Function("__get_import", "exports", result.code);
+      func(getImport, runExports);
+      if (runExports.default) {
+        this.setState({
+          error: void 0,
+          comp: /* @__PURE__ */ React.createElement(runExports.default)
+        });
+        return;
+      }
+      this.setState({
+        error: new Error("No default export"),
+        comp: null
+      });
+    } catch (e) {
+      if (targetCode !== this.props.code) {
+        return;
+      }
+      console.error(e);
+      this.setState({
+        error: e,
+        comp: null
+      });
+    }
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error);
+    console.error(errorInfo);
+  }
+  componentDidMount() {
+    this.doCompile(this.props.code);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.code !== this.props.code) {
+      this.waitCompile(this.props.code);
+    }
+  }
+  render() {
+    const { className = "", code, language, getImport, ...rest } = this.props;
+    const { error, comp } = this.state;
+    if (error) {
+      return /* @__PURE__ */ _jsx2("div", {
+        className: `rspress-playground-runner ${className}`,
+        ...rest,
+        children: /* @__PURE__ */ _jsx2("span", {
+          style: {
+            color: "red"
+          },
+          children: error.message
+        })
+      });
+    }
+    return /* @__PURE__ */ _jsx2("div", {
+      className: `rspress-playground-runner ${className}`,
+      ...rest,
+      children: comp
+    });
+  }
+  constructor(props) {
+    super(props);
+    _define_property(this, "timer", void 0);
+    this.state = {
+      error: void 0,
+      comp: null
+    };
+    this.doCompile = this.doCompile.bind(this);
+    this.waitCompile = this.waitCompile.bind(this);
+  }
+};
+export {
+  Editor,
+  default2 as MonacoEditor,
+  loader2 as MonacoEditorLoader,
+  EditorProps as MonacoEditorProps,
+  Runner
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["MonacoEditor","default","MonacoEditorLoader","loader","MonacoEditorProps","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","babel","React","Component","createVariableDeclaration","id","init","type","declarations","name","kind","createObjectPattern","names","properties","map","key","computed","method","shorthand","value","createGetImport","getDefault","callee","arguments","Boolean","Runner","getDerivedStateFromError","error","comp","waitCompile","targetCode","timer","clearTimeout","setTimeout","doCompile","language","getImport","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","createElement","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/runner.tsx","../../../src/web/home/runner/work/rspress/rspress/packages/plugin-playground/src/web/ast.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';\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: { vs: 'https://unpkg.com/monaco-editor@0.43.0/min/vs' },\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","import * as babel from '@babel/standalone';\nimport type { Node } from '@babel/types';\nimport React, { Component, HTMLAttributes } from 'react';\nimport {\n  createGetImport,\n  createObjectPattern,\n  createVariableDeclaration,\n} from './ast';\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  doCompile(targetCode: string) {\n    const { language, getImport } = this.props;\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"]}