Spaces:
Running
Running
File size: 4,878 Bytes
e08e97a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
# WebSandbox
A frontend code sandbox component that compiles and previews `React` or `HTML` code in the page.
## Examples
### React Code Preview
When `template` is set to `react`, the following dependencies will be automatically added to the `imports` parameter. When a specific React version is needed, you can override the corresponding keys:
```json
{
"react": "https://esm.sh/react",
"react/": "https://esm.sh/react/",
"react-dom": "https://esm.sh/react-dom",
"react-dom/": "https://esm.sh/react-dom/"
}
```
<demo name="react"></demo>
### HTML Code Preview
<demo name="html"></demo>
### Error Handling
<demo name="error_handling"></demo>
## API
### Props
| Attribute | Type | Default Value | Description |
| -------------------- | ---------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | `Dict[str, Union[str, SandboxFileData]]` | None | Files collection passed to the Sandbox. When `template` is `react`, `['index.tsx', 'index.jsx', 'index.ts', 'index.js']` are the default entry files. When `template` is `html`, `['index.html']` is the default entry file. You can also manually specify the entry file by setting the `is_entry` property. |
| template | `Literal['react', 'html']` | 'react' | Template type for Sandbox rendering. |
| show_render_error | `bool` | True | Whether to show rendering error messages. |
| show_compile_error | `bool` | True | Whether to show compilation failure styles. |
| compile_error_render | `str \| None` | None | Custom compilation failure style, passed as a JavaScript function string. |
| imports | `Dict[str, str]` | None | Corresponds to the imports field in importmap, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap), used for adding online frontend dependencies. When `template` is `react`, React-related dependencies are automatically added as shown in the example above. |
| height | `str \| float \| int` | 400 | Height of the component. If a number is passed, it's specified in pixels; if a string is passed, it's specified in CSS units. |
### Events
| Event | Description |
| ----------------------------------------- | ------------------------------------------------- |
| `pro.WebSandbox.compile_success(fn, 路路路)` | Triggered when Sandbox compilation succeeds. |
| `pro.WebSandbox.compile_error(fn, 路路路)` | Triggered when Sandbox compilation fails. |
| `pro.WebSandbox.render_error(fn, 路路路)` | Triggered when Sandbox rendering throws an error. |
### Slots
```python
SLOTS=['compileErrorRender']
```
### Types
```python
class SandboxFileData(TypedDict):
code: str
is_entry: Optional[bool]
```
|