Add errors to sandpack provider

Author: Ives van Hoorne

packages/react-sandpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-smooshpack",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "",
   "keywords": [],
   "license": "SEE LICENSE.MD IN ROOT",
@@ -77,7 +77,7 @@
     "react-broadcast": "^0.6.2",
     "react-codemirror2": "^4.0.1",
     "rollup-plugin-scss": "^0.4.0",
-    "smooshpack": "^0.0.10"
+    "smooshpack": "^0.0.13"
   },
   "peerDependencies": {
     "react": "^16.0.0"

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

@@ -3,14 +3,21 @@ import { Broadcast } from 'react-broadcast';
 import { Manager, generatePackageJSON } from 'smooshpack';
 import { listen } from 'codesandbox-api';
 
-import { IFile, IFiles, IManagerState, ISandpackContext } from '../../types';
+import {
+  IFile,
+  IFiles,
+  IManagerState,
+  ISandpackContext,
+  IModuleError,
+} from '../../types';
 
 export interface State {
   files: IFiles;
   browserPath: string;
   openedPath: string;
   iframe: HTMLIFrameElement | null;
   managerState: IManagerState | undefined;
+  errors: Array<IModuleError>;
 }
 
 export interface Props {
@@ -62,14 +69,20 @@ export default class SandpackProvider extends React.PureComponent<
       openedPath: props.entry || '/index.js',
       iframe: null,
       managerState: undefined,
+      errors: [],
     };
 
     this.listener = listen(this.handleMessage);
   }
 
-  handleMessage = (message: any) => {
-    if (message.type === 'success') {
-      this.setState({ managerState: message.state });
+  handleMessage = (m: any) => {
+    if (m.type === 'success') {
+      this.setState({ managerState: m.state, errors: [] });
+    } else if (m.type === 'action' && m.action === 'show-error') {
+      const { title, path, message, line, column } = m;
+      this.setState({
+        errors: [...this.state.errors, { title, path, message, line, column }],
+      });
     }
   };
 
@@ -171,10 +184,19 @@ export default class SandpackProvider extends React.PureComponent<
   };
 
   _getSandpackState = (): ISandpackContext => {
-    const { iframe, files, browserPath, openedPath, managerState } = this.state;
+    const {
+      iframe,
+      files,
+      browserPath,
+      openedPath,
+      managerState,
+      errors,
+    } = this.state;
+
     return {
       files,
       openedPath,
+      errors,
       managerState,
       openFile: this.openFile,
       browserFrame: iframe,

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

@@ -15,39 +15,7 @@ export interface Props {
   className?: string;
 }
 
-export interface State {
-  error?: {
-    title: string;
-    message: string;
-    path: string;
-    line: number;
-    column: number;
-  };
-}
-
-export default class TranspiledCodeView extends React.Component<Props, State> {
-  listener: Function;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.listener = listen(this.handleMessage);
-    this.state = {};
-  }
-
-  handleMessage = (m: any) => {
-    if (m.type === 'action' && m.action === 'show-error') {
-      const { title, path, message, line, column } = m;
-      this.setState({ error: { title, path, message, line, column } });
-    } else if (m.type === 'success') {
-      this.setState({ error: undefined });
-    }
-  };
-
-  componentWillUnmount() {
-    this.listener();
-  }
-
+export default class TranspiledCodeView extends React.Component<Props> {
   getTranspiledCode(sandpack: ISandpackContext) {
     const { openedPath, managerState } = sandpack;
     if (managerState == null) {
@@ -82,9 +50,9 @@ export default class TranspiledCodeView extends React.Component<Props, State> {
               }}
               value={this.getTranspiledCode(sandpack) || '// loading...'}
             />
-            {this.state.error && (
+            {sandpack.errors.length && (
               <div className={cn('TranspiledCodeView', 'error')}>
-                {this.state.error.message}
+                {sandpack.errors[0].message}
               </div>
             )}
           </div>

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

@@ -17,6 +17,14 @@ export interface IModuleSource {
   sourceMap: Object | undefined;
 }
 
+export interface IModuleError {
+  title: string;
+  message: string;
+  path: string;
+  line: number;
+  column: number;
+}
+
 export interface ITranspiledModule {
   module: IModule;
   query: string;
@@ -50,6 +58,7 @@ export interface ISandpackContext {
   managerState: IManagerState | undefined;
   bundlerURL: string | undefined;
   openedPath: string;
+  errors: Array<IModuleError>;
   files: IFiles;
   openFile: (path: string) => void;
   updateFiles: (files: IFiles) => void;

packages/sandpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smooshpack",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "description": "",
   "keywords": [],
   "main": "dist/sandpack.umd.js",