# @zhongbr/code-sandbox

> Display JSX Code demos in your web pages easily.

Latest version **0.0.1** (published 2023-02-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install @zhongbr/code-sandbox
pnpm add @zhongbr/code-sandbox
yarn add @zhongbr/code-sandbox
bun add @zhongbr/code-sandbox
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-02-01 |
| First published | 2023-01-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 11.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhongbr |
| Maintainers | zhongbr |
| Keywords | sandbox, iframe, jsx, demo, code-block |

## Links

- npm: https://www.npmjs.com/package/@zhongbr/code-sandbox
- Homepage: https://github.com/zhongbr/zhongbr-blog/tree/main/packages/code-sandbox
- npm.io page: https://npm.io/package/@zhongbr/code-sandbox

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1
- [@babel/standalone](https://npm.io/package/@babel/standalone.md) ^7.20.12
- [@types/babel__standalone](https://npm.io/package/@types/babel__standalone.md) ^7.1.4

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 0.0.1 (latest) — 2023-02-01
- 0.0.0-beta.7 — 2023-01-31
- 0.0.0-beta.6 — 2023-01-31
- 0.0.0-beta.5 — 2023-01-31
- 0.0.0-beta.4 — 2023-01-31
- 0.0.0-beta.3 — 2023-01-30
- 0.0.0-beta.2 — 2023-01-30
- 0.0.0-beta.1 — 2023-01-29

## README

# Code Sandbox

## 1. Install

### React Component

```shell
npm install @zhongbr/code-sandbox
```

```jsx
import ReactDom from 'react-dom';
import  CodeSandbox, { registerPlugins } from '@zhongbr/code-sandbox';
import { ReactPolyfill } from '@zhongbr/code-sandbox/es/plugins/react';
import { JsxPlugin } from '@zhongbr/code-sandbox/es/plugins/babel';

registerPlugins([
    new ReactPolyfill(),
    new JsxPlugin(),
]);

ReactDom.render(<CodeSandbox html="<h1>hello world</h1>" />, document.getElementById('root'));
```

### webcomponent
es module
```html
<script type="module">
  import {
    CodeSandbox,
    registerPlugins
  } from "https://cdn.jsdelivr.net/npm/@zhongbr/code-sandbox@latest/es/webcomponent.js";
  import { ReactPolyfill } from "https://cdn.jsdelivr.net/npm/@zhongbr/code-sandbox@latest/es/plugins/react/index.js";
  import { JsxPlugin, EsmToAmdPlugin } from "https://cdn.jsdelivr.net/npm/@zhongbr/code-sandbox@latest/es/plugins/babel/index.js";
  registerPlugins([new JsxPlugin(), new EsmToAmdPlugin(), new ReactPolyfill()]);
  if (!customElements.get("code-sandbox")) {
    customElements.define("code-sandbox", CodeSandbox);
  }
</script>
<code-sandbox
  html="<div id='root'>wait...🚀</div>"
/>
```

## 2. Base usage

### Properties

#### The same properties between React component and Webcomponent .

| name  | type   | usage                            |
|-------|--------|----------------------------------|
| html  | string | html code in sandbox             |
| css   | string | css code in sandbox              |
| code  | string | javascript code in sandbox       |
| index | string | entry javascript code in sandbox |

#### React Component properties

| name            | type                                            | usage                                                               |
|-----------------|-------------------------------------------------|---------------------------------------------------------------------|
| style           | React.CSSProperties                             | inline styles for the iframe container                              |
| class           | string                                          | css class name for the iframe container                             |
| onLoadingModule | (moduleName: string, extraInfo: string) => void | event will be triggered when sandbox requiring module from internet |
| onReady         | () => void                                      | event will be triggered when sandbox codes have executed finished . |

#### Web Component properties

| name      | type   | usage                                       |
|-----------|--------|---------------------------------------------|
| style     | string | inline style for sandbox iframe container   |
| className | string | css class name for sandbox iframe container |

##### Events

You can use `addEventListener` method of `code-sandbox` dom node to access the event.

- `loading-module`: event will be triggered when sandbox requiring module from internet, you can get module informations from `detail` of the event object .
- `ready`: event will be triggered when sandbox codes have executed finished .

## 3. Plugins

### Internal plugins

Some internal plugins are provided in `plugins` directory of this package.

```javascript
import { JsxPlugin } from '@zhongbr/code-sandbox/es/plugins/babel';
```

- `unpkg`: `UnpkgPlugin`, use [https://unpkg.com](https://unpkg.com) to load package not exists.
- `jsdelivr`: `JsdelivrPlugin`, use [https://jsdelivr.com](https://jsdelivr.com) to load package not exists.
- `react`: 
  - `ReactPolyfill`, this is a polyfill plugin to require `react` and `react-dom` package. 
  If you want to require react packages in your demo code, you need to register this plugin, because there is no `unpkg` fields in react package.
- `babel`: these plugins depend on `@babel/standalone`, so the bundle will be a little large.
  - `JsxPlugin`, you can register this plugin to execute `JSX` codes in sandbox.
  - `EsmToAmdPlugin`, you can register this plugin to use ESM import and export keywords in your sandbox.

### Custom plugin lifecycles

- `resolveModuleUrl`
- `require`
- `beforeModuleGenerate`

---
_Source: https://npm.io/package/@zhongbr/code-sandbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._