0.0.1 • Published 1 year ago
@zhongbr/code-sandbox v0.0.1
Code Sandbox
1. Install
React Component
npm install @zhongbr/code-sandbox
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
<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 fromdetail
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.
import { JsxPlugin } from '@zhongbr/code-sandbox/es/plugins/babel';
unpkg
:UnpkgPlugin
, use https://unpkg.com to load package not exists.jsdelivr
:JsdelivrPlugin
, use https://jsdelivr.com to load package not exists.react
:ReactPolyfill
, this is a polyfill plugin to requirereact
andreact-dom
package. If you want to require react packages in your demo code, you need to register this plugin, because there is nounpkg
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 executeJSX
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
0.0.1
1 year ago
0.0.0-beta.7
1 year ago
0.0.0-beta.6
1 year ago
0.0.0-beta.5
1 year ago
0.0.0-beta.4
1 year ago
0.0.0-beta.3
1 year ago
0.0.0-beta.2
1 year ago
0.0.0-beta.1
1 year ago