Progress

Author: Ives van Hoorne

package.json

@@ -38,7 +38,8 @@
     "packages/homepage",
     "packages/app",
     "packages/common",
-    "packages/codesandbox-api"
+    "packages/codesandbox-api",
+    "packages/codesandbox-playground"
   ],
   "devDependencies": {
     "all-contributors-cli": "^4.3.0",

packages/codesandbox-playground/.gitignore

@@ -1 +1,4 @@
 compiled
+storybook-static
+.rpt2_cache
+dist

packages/codesandbox-playground/.storybook/addons.js

@@ -1,4 +1,3 @@
+import 'storybook-addon-jsx/register';
 import '@storybook/addon-knobs/register';
-import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
-import 'storybook-addon-jsx/register';

packages/codesandbox-playground/.storybook/webpack.config.js

@@ -0,0 +1,14 @@
+// load the default config generator.
+const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
+module.exports = (baseConfig, env) => {
+  const config = genDefaultConfig(baseConfig, env);
+  // Extend it as you need.
+  // For example, add typescript loader:
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('awesome-typescript-loader'),
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+
+  return config;
+};

packages/codesandbox-playground/dist/types/index.d.ts

@@ -2,6 +2,7 @@
   "name": "codesandbox-playground",
   "version": "1.0.0",
   "description": "Embed any web application right in your website, plug and play.",
+  "source": "src/index.ts",
   "main": "dist/codesandbox-playground.umd.js",
   "module": "dist/codesandbox-playground.es5.js",
   "typings": "dist/types/codesandbox-playground.d.ts",
@@ -10,23 +11,29 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "@storybook/addon-actions": "=3.2.18",
-    "@storybook/addon-knobs": "=3.2.18",
-    "@storybook/addon-links": "=3.2.18",
-    "@storybook/react": "=3.2.18",
-    "storybook-addon-jsx": "^5.1.0",
+    "@storybook/addon-actions": "=3.3.14",
+    "@storybook/addon-knobs": "=3.3.14",
+    "@storybook/addon-links": "=3.3.14",
+    "@storybook/react": "=3.3.14",
+    "@types/node": "^9.4.6",
+    "@types/prop-types": "^15.5.2",
+    "@types/react": "^16.0.38",
+    "@types/react-dom": "^16.0.4",
+    "@types/storybook__react": "^3.0.7",
+    "awesome-typescript-loader": "^3.4.1",
+    "microbundle": "^0.4.4",
+    "storybook-addon-jsx": "^5.3.0",
     "typescript": "^2.6.2"
   },
-  "peerDependencies": {
+  "optionalDependencies": {
     "react": "^16.0.0"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "build": "microbundle"
   },
   "dependencies": {
-    "codemirror": "^5.32.0",
-    "codesandbox": "^1.1.14",
-    "prop-types": "^15.6.0"
+    "codesandbox": "^1.1.20"
   }
 }

packages/codesandbox-playground/package.json

@@ -1,13 +1,10 @@
-import React from 'react';
-import { getParameters } from 'codesandbox/lib/api/define';
+import * as React from 'react';
 
-import { filePropTypes } from '../../utils/prop-types';
+import { IFileProps } from '../types';
 
-export default class OpenInCodeSandbox extends React.Component {
-  static propTypes = {
-    ...filePropTypes,
-  };
+const { getParameters } = require('codesandbox/lib/api/define');
 
+export default class OpenInCodeSandbox extends React.Component<IFileProps> {
   static defaultProps = {
     entry: '/index.js',
   };
@@ -20,14 +17,16 @@ export default class OpenInCodeSandbox extends React.Component {
       dependencies,
     };
 
-    paramFiles['/package.json'] = { code: JSON.stringify(packageJSON) };
+    paramFiles['/package.json'] = {
+      code: JSON.stringify(packageJSON, null, 2),
+    };
 
     const normalized = Object.keys(paramFiles).reduce(
       (prev, next) => ({
         ...prev,
         [next.replace('/', '')]: {
-          ...paramFiles[next],
           content: paramFiles[next].code,
+          isBinary: false,
         },
       }),
       {}