@rspress/plugin-playground 0.0.0-nightly-20230919160314

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@rspress/plugin-playground",
+  "version": "0.0.0-nightly-20230919160314",
+  "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
+  "bugs": "https://github.com/web-infra-dev/rspress/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rspress",
+    "directory": "packages/plugin-preview"
+  },
+  "license": "MIT",
+  "types": "./dist/cli/esm/index.d.ts",
+  "main": "./dist/cli/cjs/index.js",
+  "module": "./dist/cli/esm/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/cli/esm/index.d.ts",
+      "import": "./dist/cli/esm/index.js",
+      "default": "./dist/cli/cjs/index.js"
+    },
+    "./web": {
+      "types": "./dist/web/esm/index.d.ts",
+      "import": "./dist/web/esm/index.js",
+      "default": "./dist/web/cjs/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=14.17.6"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@babel/standalone": "^7.22.17",
+    "@mdx-js/mdx": "2.2.1",
+    "@modern-js/utils": "2.34.0",
+    "@monaco-editor/react": "~4.4.6",
+    "@oxidation-compiler/napi": "^0.1.0",
+    "remark-gfm": "3.0.1",
+    "@rspress/shared": "0.0.0-nightly-20230919160314"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.22.17",
+    "@types/babel__core": "^7.20.1",
+    "@types/babel__standalone": "^7.1.4",
+    "@types/babel__traverse": "^7.20.1",
+    "@types/mdast": "^3.0.10",
+    "@types/node": "^18.11.17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "mdast-util-mdxjs-esm": "^1.3.0",
+    "prettier": "^2.6.2",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6.8.1",
+    "rspack-plugin-virtual-module": "0.1.11",
+    "typescript": "^5",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^4.1.1"
+  },
+  "peerDependencies": {
+    "@rspress/core": "0.0.0-nightly-20230919160314",
+    "react": ">=17",
+    "react-router-dom": "^6.8.1"
+  },
+  "files": [
+    "dist",
+    "static"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "modern build -w",
+    "build": "modern build",
+    "reset": "rimraf ./**/node_modules",
+    "lint": "modern lint",
+    "change": "modern change",
+    "bump": "modern bump",
+    "pre": "modern pre",
+    "change-status": "modern change-status",
+    "gen-release-note": "modern gen-release-note",
+    "release": "modern release",
+    "new": "modern new",
+    "test": "vitest run --passWithNoTests",
+    "upgrade": "modern upgrade"
+  }
+}

package/static/global-components/Playground.tsx

@@ -0,0 +1,51 @@
+import React, { HTMLAttributes, useCallback, useState } from 'react';
+import getImport from '_rspress_playground_imports';
+import { Editor, Runner } from '../../dist/web/esm';
+
+interface PlaygroundProps extends HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language: string;
+  direction?: 'horizontal' | 'vertical';
+  editorPosition?: 'left' | 'right';
+}
+
+export default function Playground(props: PlaygroundProps) {
+  const {
+    code: codeProp,
+    language,
+    className = '',
+    direction = 'horizontal',
+    editorPosition,
+    ...rest
+  } = props;
+
+  const [code, setCode] = useState(codeProp);
+
+  const handleCodeChange = useCallback((e?: string) => {
+    setCode(e || '');
+  }, []);
+
+  const useReverseLayout =
+    direction === 'horizontal' && editorPosition === 'left';
+
+  const monacoLanguage =
+    language === 'tsx' || language === 'ts' ? 'typescript' : 'javascript';
+
+  const classNames = [
+    'rspress-playground',
+    `rspress-playground-${direction}`,
+    `rspress-playground-reverse-${useReverseLayout ? 'y' : 'n'}`,
+    className,
+  ].join(' ');
+
+  return (
+    <div className={classNames} {...rest}>
+      <Runner language={language} code={code} getImport={getImport} />
+      <Editor
+        value={code}
+        onChange={handleCodeChange}
+        language={monacoLanguage}
+      />
+    </div>
+  );
+}

package/static/global-styles/web.css

@@ -0,0 +1,51 @@
+.rspress-playground {
+  display: flex;
+  border: 1px solid rgba(28, 31, 35, 0.08);
+  border-radius: 3px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.rspress-playground-horizontal {
+  flex-direction: row;
+  height: 400px;
+}
+
+.rspress-playground-horizontal.rspress-playground-reverse-y {
+  flex-direction: row-reverse;
+}
+
+.rspress-playground-vertical {
+  flex-direction: column;
+}
+
+.rspress-playground > .rspress-playground-runner {
+  padding: 20px;
+  overflow: auto;
+}
+
+.rspress-playground-horizontal > .rspress-playground-runner {
+  width: 40%;
+}
+
+.rspress-playground-horizontal > .rspress-playground-editor {
+  width: 60%;
+}
+
+.rspress-playground-horizontal.rspress-playground-reverse-y
+  > .rspress-playground-editor {
+  border-right: 1px solid rgba(28, 31, 35, 0.08);
+}
+
+.rspress-playground-horizontal.rspress-playground-reverse-n
+  > .rspress-playground-editor {
+  border-left: 1px solid rgba(28, 31, 35, 0.08);
+}
+
+.rspress-playground-vertical > .rspress-playground-editor {
+  height: 300px;
+}
+
+.rspress-playground-vertical > .rspress-playground-editor {
+  border-top: 1px solid rgba(28, 31, 35, 0.08);
+}

package/static/modern-app-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types='@modern-js/module-tools/types' />
+
+declare module '_rspress_playground_imports' {
+  const getImport: (name: string, getDefault?: boolean) => void;
+  export default getImport;
+}