Explanation

Author: Ives van Hoorne

packages/codesandbox-playground/README.md

@@ -1,34 +1,84 @@
-# CodeSandbox Playground
+# SandPacker
 
-> A React component that lets you embed an application with any npm dependency.
-> Using the technology of CodeSandbox.
+A bundler that completely works in the browser, utilizing browser APIs.
+
+## Why?
+
+Online code playgrounds are getting more popular: they provide an easy way to play with code without installation. Until a year ago it was very hard to play with bigger web applications in the browser; there was no bundler that was comparable with local bundlers and worked in the browser.
+
+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.
+
+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.
+
+## So what can the bundler do?
+
+This is a list of features that the bundler supports, it may be outdated.
+
+1. Hot Module Reloading API (`module.hot`).
+2. npm dependencies
+3. 17 transpilers
+4. Friendly error overlay
+5. Parallel transpiling
+6. On-demand transpiler loading
 
 ## Example usage
 
+There are multiple ways to use the bundler. We provided two ways, but we're open to PRs to extend ways to use this!
+
+### Using the Manager
+
+The Manager is a plain JavaScript implementation, you can use it by importing Manager.
+
+```js
+import { Manager } from 'codesandbox-playground';
+
+// Let's say you want to show the preview on #preview
+const m = new Manager('#app', {
+  files: {
+    '/index.js': `console.log(require('uuid'))`,
+  },
+  dependencies: {
+    uuid: 'latest',
+  },
+  entry: '/index.js',
+});
+
+// This will show the preview on the #preview element, you can now send new code
+// by calling 'sendCode(files, dependencies, entry)'. We will automatically determine
+// how to hot update the preview.
+m.sendCode(
+  {
+    '/index.js': `console.log('other code')`,
+  },
+  {
+    uuid: 'latest',
+  },
+  '/index.js'
+);
+```
+
+### As a React Component
+
+We included a React component you can use, implementation is fairly simple.
+
 ```jsx
-import Playground from 'codesandbox-playground';
+import Preview from 'codesandbox-playground/dist/components/Preview';
 
 const files = {
-  'index.js': `
+  '/index.js': `
     import uuid from 'uuid';
 
     console.log(uuid());
   `,
 };
 
-export default () => <Playground files={files} />;
-```
-
-## Inspiration
-
-[react-live](https://github.com/FormidableLabs/react-live) is an inspiration for
-this library.
-
-### Advantages of react-live
-
-You should react-live when you don't want to rely on CodeSandbox to render your
-code, and if you want your examples to be server side rendered.
+const dependencies = {
+  uuid: 'latest',
+};
 
-### Advantages of codesandbox-playground
+export default () => (
+  <Preview files={files} dependencies={dependencies} entry="/index.js" />
+);
+```
 
-CodeSandbox supports multi file examples.
+We will automatically update the preview as the code changes.

packages/codesandbox-playground/package.json

@@ -31,7 +31,7 @@
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build": "microbundle"
+    "build": "microbundle && tsc"
   },
   "dependencies": {
     "codesandbox": "^1.1.20"

packages/codesandbox-playground/src/components/OpenInCodeSandbox/OpenInCodeSandbox.tsx

@@ -12,11 +12,11 @@ export default class OpenInCodeSandbox extends React.Component<IFileProps> {
   getFileParameters = () => {
     const { files, dependencies } = this.props;
     const paramFiles = { ...files };
+
     const packageJSON = {
       main: this.props.entry,
       dependencies,
     };
-
     paramFiles['/package.json'] = {
       code: JSON.stringify(packageJSON, null, 2),
     };

packages/codesandbox-playground/src/index.ts

@@ -1,4 +1,8 @@
 import OpenInCodeSandbox from './components/OpenInCodeSandbox/index';
 import Preview from './components/Preview/index';
 
-export { OpenInCodeSandbox, Preview };
+import Manager from './manager/index';
+
+const components = { OpenInCodeSandbox, Preview };
+
+export { components, Manager };