Add managerState to Provider

Author: Ives van Hoorne

packages/app/src/sandbox/compile.js

@@ -130,7 +130,7 @@ async function compile({
   isModuleView = false,
   template,
   entry,
-  showOpenInCodeSandbox = true,
+  showOpenInCodeSandbox = false,
   skipEval = false,
 }) {
   dispatch({

packages/react-sandpack/gulpfile.js

@@ -2,14 +2,27 @@ const gulp = require('gulp');
 const concat = require('gulp-concat');
 const sass = require('gulp-sass');
 const cssimport = require('gulp-cssimport');
+const prettier = require('gulp-plugin-prettier');
 
 gulp.task('sass', () =>
   gulp
     .src('./src/**/*.scss')
     .pipe(sass().on('error', sass.logError))
     .pipe(cssimport({ includePaths: ['../../node_modules'] }))
     .pipe(concat('styles.css'))
+    .pipe(prettier.format())
     .pipe(gulp.dest('./dist/'))
 );
 
+gulp.task('copy', () => {
+  gulp
+    .src('./src/**/*.scss')
+    .pipe(cssimport({ includePaths: ['../../node_modules'] }))
+    .pipe(concat('styles.scss'))
+    .pipe(prettier.format())
+    .pipe(gulp.dest('./dist/'));
+});
+
 gulp.task('sass:watch', () => gulp.watch('./src/**/*.scss', ['sass']));
+
+gulp.task('build', ['sass', 'copy']);

packages/react-sandpack/package.json

@@ -103,6 +103,7 @@
     "gulp": "^3.9.1",
     "gulp-concat": "^2.6.1",
     "gulp-cssimport": "^6.0.1",
+    "gulp-plugin-prettier": "^1.1.0",
     "gulp-sass": "^3.1.0",
     "husky": "^0.14.0",
     "jest": "^22.0.2",

packages/react-sandpack/src/components/BrowserPreview/BrowserPreview.tsx

@@ -13,12 +13,13 @@ export interface Props {
 
 export default class BrowserPreview extends React.PureComponent<Props> {
   render() {
-    const { className, style } = this.props;
+    const { className = '', style, ...props } = this.props;
 
     return (
       <div
         className={`${cn('BrowserPreview', 'container')} ${className}`}
         style={style}
+        {...props}
       >
         <Navigator />
         <Preview />

packages/react-sandpack/src/components/CodeEditor/CodeMirror/CodeMirror.tsx

@@ -34,16 +34,15 @@ class CodeMirror extends React.PureComponent<Props> {
   };
 
   render() {
-    const { codeMirrorOptions, style = {}, className = '' } = this.props;
+    const { codeMirrorOptions, ...props } = this.props;
     const { openedPath, files } = this.props.sandpack;
 
     return (
       <CodeMirrorComponent
-        className={className}
-        style={style}
         codeMirrorOptions={codeMirrorOptions}
         onBeforeChange={this.onChange}
         value={files[openedPath].code}
+        {...props}
       />
     );
   }

packages/react-sandpack/src/components/FileExplorer/FileExplorer.tsx

@@ -12,13 +12,13 @@ export interface Props {
 
 export default class FileExplorer extends React.PureComponent<Props> {
   render() {
-    const { style, className = '' } = this.props;
+    const { className = '', ...props } = this.props;
     return (
       <SandpackConsumer>
         {sandpack => (
           <div
             className={`${className} ${cn('FileExplorer', 'container')}`}
-            style={style}
+            {...props}
           >
             <ModuleList
               selectFile={sandpack.openFile}

packages/react-sandpack/src/components/Navigator/Navigator.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { listen, dispatch } from 'codesandbox-api';
-import RefreshIcon from './RefreshIcon';
+import classNames from 'classnames';
 
+import RefreshIcon from './RefreshIcon';
 import withSandpack from '../../utils/with-sandpack';
 import { ISandpackContext } from '../../types';
 import cn from '../../utils/cn';
 
 interface Props {
   sandpack: ISandpackContext;
+  className?: string;
 }
 
 interface State {
@@ -98,9 +100,13 @@ class Navigator extends React.Component<Props, State> {
 
   render() {
     const { browserPath } = this.state;
+    const { sandpack, className, ...props } = this.props;
 
     return (
-      <div className={cn('Navigator', 'container')}>
+      <div
+        className={classNames(className, cn('Navigator', 'container'))}
+        {...props}
+      >
         <button className={cn('Navigator', 'button')} onClick={this.onRefresh}>
           <RefreshIcon />
         </button>

packages/react-sandpack/src/components/OpenInCodeSandbox/OpenInCodeSandbox.tsx

@@ -1,29 +1,16 @@
 import * as React from 'react';
 import { getParameters } from 'codesandbox-import-utils/lib/api/define';
-import { IFileProps } from '../../types';
+import { IFiles } from '../../types';
 
-export default class OpenInCodeSandbox extends React.Component<IFileProps> {
-  static defaultProps = {
-    entry: '/index.js',
-  };
-
-  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),
-    };
+import SandpackConsumer from '../SandpackConsumer';
 
-    const normalized = Object.keys(paramFiles).reduce(
+export default class OpenInCodeSandbox extends React.Component {
+  getFileParameters = (files: IFiles) => {
+    const normalized = Object.keys(files).reduce(
       (prev, next) => ({
         ...prev,
         [next.replace('/', '')]: {
-          content: paramFiles[next].code,
+          content: files[next].code,
           isBinary: false,
         },
       }),
@@ -34,21 +21,24 @@ export default class OpenInCodeSandbox extends React.Component<IFileProps> {
   };
 
   render() {
-    const { files, dependencies, ...props } = this.props;
     return (
-      <form
-        action="https://codesandbox.io/api/v1/sandboxes/define"
-        method="POST"
-        target="_blank"
-        {...props}
-      >
-        <input
-          type="hidden"
-          name="parameters"
-          value={this.getFileParameters()}
-        />
-        <input type="submit" value="Open in CodeSandbox" />
-      </form>
+      <SandpackConsumer>
+        {sandpack => (
+          <form
+            action="https://codesandbox.io/api/v1/sandboxes/define"
+            method="POST"
+            target="_blank"
+            {...this.props}
+          >
+            <input
+              type="hidden"
+              name="parameters"
+              value={this.getFileParameters(sandpack.files)}
+            />
+            <input type="submit" value="Open in CodeSandbox" />
+          </form>
+        )}
+      </SandpackConsumer>
     );
   }
 }

packages/react-sandpack/src/components/Preview/Preview.tsx

@@ -1,32 +1,34 @@
 import * as React from 'react';
+import { ISandpackContext } from '../../types';
 import SandpackConsumer from '../SandpackConsumer';
+import withSandpack from '../../utils/with-sandpack';
 
 export interface PreviewProps {
-  browser: HTMLIFrameElement;
+  sandpack: ISandpackContext;
 }
 
-class Preview extends React.PureComponent<PreviewProps> {
+class Preview extends React.Component<PreviewProps> {
   container?: HTMLDivElement;
 
   setContainerElement = (el: HTMLDivElement) => {
     this.container = el;
   };
 
   initializeFrame = () => {
-    const { browser } = this.props;
+    const { browserFrame } = this.props.sandpack;
 
-    if (browser && this.container) {
-      browser.style.width = '100%';
-      browser.style.height = '500px';
-      browser.style.visibility = 'visible';
-      browser.style.position = 'relative';
+    if (browserFrame && this.container) {
+      browserFrame.style.width = '100%';
+      browserFrame.style.height = '500px';
+      browserFrame.style.visibility = 'visible';
+      browserFrame.style.position = 'relative';
 
-      this.container.appendChild(browser);
+      this.container.appendChild(browserFrame);
     }
   };
 
   componentDidUpdate(prevProps: PreviewProps) {
-    if (prevProps.browser !== this.props.browser) {
+    if (prevProps.sandpack.browserFrame !== this.props.sandpack.browserFrame) {
       this.initializeFrame();
     }
   }
@@ -36,12 +38,4 @@ class Preview extends React.PureComponent<PreviewProps> {
   }
 }
 
-export default class ContainerElement extends React.PureComponent {
-  render() {
-    return (
-      <SandpackConsumer>
-        {state => <Preview browser={state.browserFrame} />}
-      </SandpackConsumer>
-    );
-  }
-}
+export default withSandpack(Preview);

packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { Broadcast } from 'react-broadcast';
 import { Manager } from 'sandpack';
+import { listen } from 'codesandbox-api';
 
-import { IFile, IFiles } from '../../types';
+import { IFile, IFiles, IManagerState } from '../../types';
 
 export interface State {
   files: IFiles;
   browserPath: string;
   openedPath: string;
+  iframe: HTMLIFrameElement | null;
+  managerState: IManagerState | undefined;
 }
 
 export interface Props {
@@ -34,6 +37,7 @@ export default class SandpackProvider extends React.PureComponent<
 
   manager?: Manager;
   iframe?: HTMLIFrameElement;
+  listener: Function;
 
   constructor(props: Props) {
     super(props);
@@ -46,9 +50,19 @@ export default class SandpackProvider extends React.PureComponent<
       ),
       browserPath: props.initialPath || '/',
       openedPath: props.entry || '/index.js',
+      iframe: null,
+      managerState: undefined,
     };
+
+    this.listener = listen(this.handleMessage);
   }
 
+  handleMessage = (message: any) => {
+    if (message.type === 'success') {
+      this.setState({ managerState: message.state });
+    }
+  };
+
   createMissingPackageJSON(
     files: IFiles,
     dependencies?: {
@@ -88,11 +102,21 @@ export default class SandpackProvider extends React.PureComponent<
   }
 
   setupFrame = (el: HTMLIFrameElement) => {
-    this.manager = new Manager(el, this.props.files, {
-      skipEval: this.props.skipEval,
-    });
+    this.manager = new Manager(
+      el,
+      this.createMissingPackageJSON(
+        this.props.files,
+        this.props.dependencies,
+        this.props.entry
+      ),
+      {
+        skipEval: this.props.skipEval,
+      }
+    );
 
     this.iframe = el;
+
+    this.setState({ iframe: el });
   };
 
   updateFiles = (files: IFiles) => {
@@ -119,28 +143,35 @@ export default class SandpackProvider extends React.PureComponent<
     }
   }
 
+  componentWillUnmount() {
+    this.listener();
+  }
+
   openFile = (path: string) => {
     this.setState({ openedPath: path });
   };
 
   render() {
     const { children } = this.props;
-    const { files, browserPath, openedPath } = this.state;
+    const { iframe, files, browserPath, openedPath, managerState } = this.state;
 
     return (
       <Broadcast
         channel="sandpack"
         value={{
           files,
           openedPath,
+          managerState,
           openFile: this.openFile,
-          browserFrame: this.iframe,
+          browserFrame: iframe,
           updateFiles: this.updateFiles,
           sandboxUrl: this.props.sandboxUrl,
         }}
       >
         <div className="sandpack">
-          {/* We create a hidden iframe, the bundler will live in this. */}
+          {/* We create a hidden iframe, the bundler will live in this.
+            We expose this iframe to the Consumer, so other components can show the full
+            iframe for preview. An implementation can be found in `Preview` component. */}
           <iframe
             ref={this.setupFrame}
             style={{