Skip to content

Commit 1ac7422

Browse files
author
Ives van Hoorne
committed
Info update
1 parent 708e72e commit 1ac7422

File tree

1 file changed

+16
-13
lines changed

1 file changed

+16
-13
lines changed

packages/codesandbox-playground/README.md

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ Online code playgrounds are getting more popular: they provide an easy way to pl
88

99
CodeSandbox came along, and still had a pretty basic bundler. However, as CodeSandbox got more popular its bundler got more advanced. Nowadays the bundler has comparable parity with Webpack, and it would be a shame if others couldn't use the functionality.
1010

11-
This library acts as an interface with the bundler of CodeSandbox. It allows you to run any code on a web page, from Vue projects to React projects.
11+
This library acts as an interface with the bundler of CodeSandbox. It allows you to run any code on a web page, from Vue projects to React projects. With everything that CodeSandbox supports as well.
1212

1313
## So what can the bundler do?
1414

15-
This is a list of features that the bundler supports, it may be outdated.
15+
This is a list of features that the bundler supports, the list may be outdated.
1616

1717
1. Hot Module Reloading API (`module.hot`).
1818
2. npm dependencies
@@ -33,15 +33,18 @@ The Manager is a plain JavaScript implementation, you can use it by importing Ma
3333
import { Manager } from 'codesandbox-playground';
3434

3535
// Let's say you want to show the preview on #preview
36-
const m = new Manager('#app', {
37-
files: {
38-
'/index.js': `console.log(require('uuid'))`,
39-
},
40-
dependencies: {
41-
uuid: 'latest',
42-
},
43-
entry: '/index.js',
44-
});
36+
const m = new Manager(
37+
'#app',
38+
{
39+
files: {
40+
'/index.js': `console.log(require('uuid'))`,
41+
},
42+
dependencies: {
43+
uuid: 'latest',
44+
},
45+
entry: '/index.js',
46+
} /* you can give a third argument with extra options, described at the bottom */
47+
);
4548

4649
// This will show the preview on the #preview element, you can now send new code
4750
// by calling 'sendCode(files, dependencies, entry)'. We will automatically determine
@@ -59,7 +62,7 @@ m.sendCode(
5962

6063
### As a React Component
6164

62-
We included a React component you can use, implementation is fairly simple.
65+
We included a React component you can use, the implementation is fairly simple.
6366

6467
```jsx
6568
import Preview from 'codesandbox-playground/dist/components/Preview';
@@ -81,4 +84,4 @@ export default () => (
8184
);
8285
```
8386

84-
We will automatically update the preview as the code changes.
87+
We will automatically hot update the preview as the props update.

0 commit comments

Comments
 (0)