rspress-plugin-sandpack v0.0.5

rspress-plugin-sandpack

rspress基于sandpack的在线实时编码环境，目前已实现大部分功能。

1. Install

npm install -D rspress-plugin-sandpack
# or
yarn add -D rspress-plugin-sandpack
# or
pnpm add -D rspress-plugin-sandpack

2. Configuration

// rspress.config.js // or .ts, .mjs ...
import { defineConfig } from 'rspress/config';
import { pluginSandpack } from 'rspress-plugin-sandpack';

export default defineConfig({
  // ...
  plugins: [
    // ... other plugins
    pluginSandpack({
      prefix: 'sp', // 自定义前缀, 不能为空，默认 sandpack
      // consoleView: {
      //   templateNames: true, // 命令行控制台输出一共支持哪些模板
      // },
    }),
  ],
  // ...
});

3. Usage

可自定义添加依赖，如：deps=sass;less@latest;stylus@^0.6.3（不能有空格）

````sp:react-ts deps=sass

// 引入外部文件代码作为源代码，一个路径参数，
// 参数 path 部分是引入源代码路径，支持相对路径、绝对路径以及项目中配置的路径别名
// 参数 search 部分是展示到 Sandpack 的文件名、状态等信息，省略后默认是源代码文件名
// 如下表示：引入`@/CustomComponentCode`文件，展示名为: `CustomName.tsx`, 状态包括：hidden=true
// 支持的状态有：hidden/active/readonly， 均为 boolean 类型
@include('@/CustomComponentCode?name=CustomName.tsx&hidden');

// 声明代码块，必须包含完整文件名，格式如下：
// 直接文件名表示：```App.tsx
// 代码类型+文件名: ```tsx App.tsx
// 代码类型+用name指定: ```tsx name=App.tsx
```App.tsx
import React from 'react';
import './index.scss';

export default function App() {
  
  return (
    <div className="color-red">
      App.tsx
    </div>
  );
}
```

// 代码类型的状态可直接在后面写，如：
// ```scss name=index.scss hidden=true active=true readonly=true
```scss name=index.scss
.color-red {
  color: red;
}
```
````

4. 向Sandpack传递参数

````sp:react-ts deps=sass;less theme=dark options:editorHeight=600

// 没有指定展示文件名时，默认是源代码的文件名，此时需明确包含后缀
// @include 指令里的源文件可以用路径别名、相对路径或绝对路径
@include('@/CustomComponentCode.tsx');

````

5. 引用代码块

若当前页面某代码块通过sp:code（sp 是自定义前缀）声明了文件名：

```js sp:code=format.js
export function format(str) {
  return str.replace(/\B(?=(\d{3})+$)/g, ',');
}
```

````sp:react
// 直接 @include 当前页通过 sp:code 指定的代码块
@include('code:format.js');

````