Update docs

Author: Ives van Hoorne

LICENSE

@@ -1,5 +1,5 @@
 CodeSandbox. An online code editor tailored for web application development.
-Copyright (C) 2017  Ives van Hoorne
+Copyright (C) 2018  Ives van Hoorne
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by

packages/react-sandpack/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "description": "",
   "keywords": [],
+  "license": "SEE LICENSE.MD IN ROOT",
   "main": "dist/react-sandpack.umd.js",
   "module": "dist/react-sandpack.es5.js",
   "typings": "dist/types/react-sandpack.d.ts",

packages/sandpack/README.md

@@ -8,7 +8,7 @@ Online code playgrounds are getting more popular: they provide an easy way to pl
 
 CodeSandbox came along, and still had a pretty basic bundler. However, as CodeSandbox got more popular its bundler got more advanced. Nowadays the bundler is used for all kinds of bigger web projects, 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 to Parcel projects. With everything that CodeSandbox supports as well.
+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 to Parcel projects. With everything that CodeSandbox supports client side as well.
 
 ## So what can this bundler do?
 
@@ -132,3 +132,59 @@ const App = () => (
 ```
 
 The above code will render a File Explorer, a working code editor and a preview with browser navigation. For more info about `react-sandpack` you can go here: https://github.com/CompuIves/codesandbox-client/tree/master/packages/react-sandpack.
+
+### SandboxInfo Argument
+
+The second argument in the constructor of `Manager` is all sandbox info. It has this structure:
+
+```ts
+{
+  /**
+   * Files, keys are paths.
+  **/
+  files: {
+    [path: string]: {
+      code: string
+    }
+  },
+  /**
+   * Dependencies, supports npm and GitHub dependencies
+  **/
+  dependencies?: {
+    [dependencyName: string]: string
+  },
+  /**
+   * Default file to evaluate
+  **/
+  entry?: string,
+  /**
+   * The sandbox template to use, this is inferred from the files and package.json if not specified
+  **/
+  template?: string
+}
+```
+
+### Options Argument
+
+```ts
+The third argument in the constructor of `Manager` is extra options. It has this structure:
+
+{
+  /**
+   * Location of the bundler. Defaults to `sandpack-${version}.codesandbox.io`
+   */
+  bundlerURL?: string;
+  /**
+   * Width of iframe.
+   */
+  width?: string;
+  /**
+   * Height of iframe.
+   */
+  height?: string;
+  /**
+   * If we should skip the third step: evaluation.
+   */
+  skipEval?: boolean;
+}
+```

packages/sandpack/package.json

@@ -6,6 +6,7 @@
   "main": "dist/sandpack.umd.js",
   "module": "dist/sandpack.es5.js",
   "typings": "dist/types/sandpack.d.ts",
+  "license": "SEE LICENSE.MD IN ROOT",
   "files": [
     "dist"
   ],
@@ -73,7 +74,8 @@
     "mapCoverage": true
   },
   "dependencies": {
-    "codesandbox-api": "^0.0.14"
+    "codesandbox-api": "^0.0.14",
+    "codesandbox-import-utils": "^1.2.2"
   },
   "devDependencies": {
     "@types/jest": "^22.0.0",

packages/sandpack/src/manager/index.ts

@@ -2,21 +2,25 @@
 import { dispatch, listen, registerFrame } from 'codesandbox-api';
 import generatePackageJSON from '../utils/generate-package-json';
 
+import { getTemplate } from 'codesandbox-import-utils/lib/create-sandbox/templates';
+
 const version = require('../../package.json').version;
 
 export interface IManagerOptions {
   /**
-   * Location of the bundler
+   * Location of the bundler.
    */
   bundlerURL?: string;
+  /**
+   * Width of iframe.
+   */
   width?: string;
-  height?: string;
   /**
-   * What template we use, if not defined we infer the template from the dependencies or files.
+   * Height of iframe.
    */
-  template?: string;
+  height?: string;
   /**
-   * If we should skip evaluation.
+   * If we should skip the third step: evaluation.
    */
   skipEval?: boolean;
 }
@@ -40,12 +44,17 @@ export interface IDependencies {
   [depName: string]: string;
 }
 
-export type ISandboxInfo = {
+export interface ISandboxInfo {
   files: IFiles;
   dependencies?: IDependencies;
   entry?: string;
+  /**
+   * What template we use, if not defined we infer the template from the dependencies or files.
+   *
+   * @type {string}
+   */
   template?: string;
-};
+}
 
 const BUNDLER_URL = `https://sandpack-${version}.codesandbox.io`;
 
@@ -120,13 +129,15 @@ export default class PreviewManager {
       {}
     );
 
+    const packageJSON = JSON.parse(files['/package.json'].code);
+
     dispatch({
       type: 'compile',
       codesandbox: true,
       version: 3,
       modules,
       externalResources: [],
-      template: this.options.template || 'create-react-app',
+      template: this.sandboxInfo.template || getTemplate(packageJSON, files),
       showOpenInCodeSandbox: true,
       skipEval: this.skipEval,
     });

yarn.lock

@@ -3879,6 +3879,13 @@ codesandbox-import-utils@^1.1.21:
     istextorbinary "^2.2.1"
     lz-string "^1.4.4"
 
+codesandbox-import-utils@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-1.2.2.tgz#de08fbae99d3ef68be49497ceb88ec463e8eb869"
+  dependencies:
+    istextorbinary "^2.2.1"
+    lz-string "^1.4.4"
+
 collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"