Update version

Author: Ives van Hoorne

packages/react-sandpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-smooshpack",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "",
   "keywords": [],
   "license": "SEE LICENSE.MD IN ROOT",

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

@@ -69,8 +69,10 @@ class Navigator extends React.Component<Props, State> {
   };
 
   commitUrl = () => {
-    this.props.sandpack.browserFrame.src =
-      this.state.baseUrl + this.state.browserPath;
+    if (this.props.sandpack.browserFrame) {
+      this.props.sandpack.browserFrame.src =
+        this.state.baseUrl + this.state.browserPath;
+    }
   };
 
   onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -92,7 +94,9 @@ class Navigator extends React.Component<Props, State> {
   };
 
   onRefresh = () => {
-    this.props.sandpack.browserFrame.src = this.state.lastCommittedUrl;
+    if (this.props.sandpack.browserFrame) {
+      this.props.sandpack.browserFrame.src = this.state.lastCommittedUrl;
+    }
   };
 
   render() {

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

@@ -3,7 +3,7 @@ import { Broadcast } from 'react-broadcast';
 import { Manager, generatePackageJSON } from 'smooshpack';
 import { listen } from 'codesandbox-api';
 
-import { IFile, IFiles, IManagerState } from '../../types';
+import { IFile, IFiles, IManagerState, ISandpackContext } from '../../types';
 
 export interface State {
   files: IFiles;
@@ -34,7 +34,7 @@ export interface Props {
     | 'angular-cli'
     | 'preact-cli';
 
-  onFileChange?: (files: IFiles) => void;
+  onFileChange?: (files: IFiles, sandpack: ISandpackContext) => void;
 }
 
 export default class SandpackProvider extends React.PureComponent<
@@ -138,7 +138,7 @@ export default class SandpackProvider extends React.PureComponent<
     this.setState({ files });
 
     if (this.props.onFileChange) {
-      this.props.onFileChange(files);
+      this.props.onFileChange(files, this._getSandpackState());
     }
     if (this.manager) {
       this.manager.updatePreview({ files, template: this.props.template });
@@ -170,23 +170,25 @@ export default class SandpackProvider extends React.PureComponent<
     this.setState({ openedPath: path });
   };
 
+  _getSandpackState = (): ISandpackContext => {
+    const { iframe, files, browserPath, openedPath, managerState } = this.state;
+    return {
+      files,
+      openedPath,
+      managerState,
+      openFile: this.openFile,
+      browserFrame: iframe,
+      updateFiles: this.updateFiles,
+      bundlerURL: this.manager ? this.manager.bundlerURL : undefined,
+    };
+  };
+
   render() {
     const { children, className, style } = this.props;
     const { iframe, files, browserPath, openedPath, managerState } = this.state;
 
     return (
-      <Broadcast
-        channel="sandpack"
-        value={{
-          files,
-          openedPath,
-          managerState,
-          openFile: this.openFile,
-          browserFrame: iframe,
-          updateFiles: this.updateFiles,
-          bundlerURL: this.manager ? this.manager.bundlerURL : undefined,
-        }}
-      >
+      <Broadcast channel="sandpack" value={this._getSandpackState()}>
         <div style={style} className={`${className ? className : ''} sandpack`}>
           {/* 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

packages/react-sandpack/src/types.d.ts

@@ -46,11 +46,10 @@ export interface IManagerState {
 }
 
 export interface ISandpackContext {
-  browserFrame: HTMLIFrameElement;
+  browserFrame: HTMLIFrameElement | null;
   managerState: IManagerState | undefined;
-  sandboxUrl: string;
+  bundlerURL: string | undefined;
   openedPath: string;
-  entry: string;
   files: IFiles;
   openFile: (path: string) => void;
   updateFiles: (files: IFiles) => void;