javascript-playgrounds

> 编程语言

Open source

An interactive JavaScript sandbox

1.4K stars0 likes0 views

Website GitHub

About

An interactive JavaScript sandbox

JavaScript Playgrounds

An interactive JavaScript sandbox. Try it!

Overview

This project provides a quick, visual way to experiment with JavaScript code. It's designed to be loaded as an iframe for easy inclusion in any webpage.

There are a variety of configuration options, including a [React preset][react] and a [React Native preset][react native].

I use this sandbox in my free educational guides:

Usage

The sandbox may be included on your site in one of two ways:

as a React component
directly as an iframe

For legacy React Native-specific docs, see the v1 branch

As a React Component

If you're using React:

bash

npm install --save javascript-playgrounds

# or

yarn add javascript-playgrounds

Then:

javascript

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

This component is a wrapper around the iframe that handles encoding parameters for you. While it passes most props along to the iframe, it has a few extra props:

Title	Description	Default
`style`	The style of the `div` which wraps the `iframe` (the iframe has `100%` width and height).	`undefined`
`className`	The className of the `div` which wraps the `iframe`	`undefined`
`baseURL`	Optionally, specify a custom url to load the player from. This url should not include a hash.	`unpkg.com` (see unpkg)

As an `iframe`

If you're not using React, include the sandbox in an iframe.

xml

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
></iframe>

Configuration parameters should be passed as part of the hash string, after #data=. They should be JSON-encoded and then URI-encoded:

javascript

const parameters = { code: `console.log('Hello, world!')` }
const hashString = '#data=' + encodeURIComponent(JSON.stringify(parameters))

When used as an iframe, the easiest way to set the code parameter is to edit the code in the sandbox and copy and paste the url when you're done (the url updates automatically as you type).

For convenience, you may optionally pass the preset parameter in the url string directly, e.g. #preset=react&data=....

Parameters

The sandbox accepts the following props/parameters.

Title	Description	Default
`preset`	This sets reasonable defaults for other parameters. Options are `javascript`, `react`, and `react-native`. Experimental options are `html` and `python` (make sure to lock down your javascript-playgrounds library version when using experimental presets).	`'javascript'`
`title`	An optional title for the editor pane.	`''`
`code`	The code to show/run in the player.	The sample app
`files`	A map of `{ [filename]: code }`. This will take precedence over `code` if given.	`undefined`
`entry`	The filename of the file that runs first. This is only relevant when showing multiple files with the `files` parameter. Defaults to `index.js`, or `index.tsx` if TypeScript is enabled.	`'index.js'` or `'index.tsx'`
`initialTab`	The filename of the tab to show by default. This is only relevant when showing multiple files with the `files` parameter. Defaults to the value of `entry`.	`entry`
`modules`	An array of external modules to make available to the sandbox. Each object in the array should be an object containing a `name` and `url`. As a shorthand, pass a string name to load a module from unpkg (`https://unpkg.com/${name}`). More detail below.	`[]`
`registerBundledModules`	Should the player share its bundled React, React DOM, and React Native implementations with the running app? Disable this if you plan to pass a `react`, `react-dom` or `react-native` module url.	`true`
`css`	An optional CSS string to apply within the workspace `iframe`.	`''`
`styles`	An map of inline style objects, applied to various elements to customize the style of the UI. Example: `{ header: { backgroundColor: 'red' } }`	`{}`
`strings`	A map of strings that appear in the UI. Example: `{ loading: 'Loading dependencies...' }`	`{}`
`sharedEnvironment`	This affects how the iframes share data with one another, mainly for the "playgrounds" feature. When `true`, iframes will pass JavaScript objects back and forth, while when `false`, they'll pass serialized JSON.	`false`
`detectDependencies`	Should the player scan code files for `import`s and try to fetch them from `unpkg`? Only modules imported in the initial code are fetched (not those added while typing in the sandbox).	`true`
`fullscreen`	Show a button to enable fullscreen editing (in most configurations of panes). Note that the iframe must have the `allowfullscreen` attribute for this to work.	`false`
`compiler`	Settings for Babel	`{}`
`compiler.maxLoopIterations`	Throw an error if a loop iterates more than a certain amount of times. Set to 0 to disable.	`1000`
`playground`	Settings for playgrounds (inline widgets that display runtime values)	`{}`
`playground.enabled`	Turn on playgrounds?	`false`
`playground.renderReactElements`	Render React elements? If `false`, will print the React element object, e.g. `{ type, props, key }`, rather than render it.	`true`
`playground.debounceDuration`	How frequently widgets update. A little delay helps keep the UI feeling smoother.