@rspress/plugin-playground 0.0.0-next-20230925114748

package/dist/web/cjs/index.js

@@ -0,0 +1,338 @@
+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"));
+
+// src/web/constant.ts
+var DEFAULT_BABEL_URL = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.20/babel.min.js";
+var DEFAULT_MONACO_URL = "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs";
+
+// src/web/editor.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function initLoader() {
+  let loaderConfig = {
+    paths: {
+      vs: DEFAULT_MONACO_URL
+    }
+  };
+  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 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/utils.ts
+var loadingMap = /* @__PURE__ */ new Map();
+function loadScript(url) {
+  const exists = loadingMap.get(url);
+  if (exists) {
+    return exists;
+  }
+  const n = new Promise((resolve) => {
+    const e = document.createElement("script");
+    e.src = url;
+    e.onload = () => resolve();
+    document.body.appendChild(e);
+  });
+  loadingMap.set(url, n);
+  return n;
+}
+
+// src/web/babel.ts
+async function getBabel() {
+  if (!window.Babel) {
+    let babelUrl = DEFAULT_BABEL_URL;
+    try {
+      const u = __PLAYGROUND_BABEL_URL__;
+      if (u) {
+        babelUrl = u;
+      }
+    } catch (e) {
+    }
+    await loadScript(babelUrl);
+  }
+  return window.Babel;
+}
+
+// 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);
+  }
+  async doCompile(targetCode) {
+    const { language, getImport } = this.props;
+    const babel = await getBabel();
+    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":"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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"]}

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): Promise<void>;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: RunnerProps): void;
+    render(): JSX.Element;
+}
+
+export { Editor, Runner };