Handers

Author: Ives van Hoorne

packages/app/src/sandbox/compile.js

@@ -383,57 +383,57 @@ async function compile({
           /* don't do anything with this error */
         }
       }
-    }
 
-    if ((!manager.webpackHMR || firstLoad) && !manager.preset.htmlDisabled) {
-      if (!managerTranspiledModuleToTranspile.compilation) {
-        const htmlModule =
-          modules[
-            templateDefinition
-              .getHTMLEntries(configurations)
-              .find(p => modules[p])
-          ];
-
-        const html = htmlModule
-          ? htmlModule.code
-          : template === 'vue-cli'
-            ? '<div id="app"></div>'
-            : '<div id="root"></div>';
-        document.body.innerHTML = html;
+      if ((!manager.webpackHMR || firstLoad) && !manager.preset.htmlDisabled) {
+        if (!managerTranspiledModuleToTranspile.compilation) {
+          const htmlModule =
+            modules[
+              templateDefinition
+                .getHTMLEntries(configurations)
+                .find(p => modules[p])
+            ];
+
+          const html = htmlModule
+            ? htmlModule.code
+            : template === 'vue-cli'
+              ? '<div id="app"></div>'
+              : '<div id="root"></div>';
+          document.body.innerHTML = html;
+        }
       }
-    }
 
-    const tt = Date.now();
-    const oldHTML = document.body.innerHTML;
-    const evalled = manager.evaluateModule(managerModuleToTranspile);
-    debug(`Evaluation time: ${Date.now() - tt}ms`);
-    const domChanged =
-      !manager.preset.htmlDisabled && oldHTML !== document.body.innerHTML;
-
-    if (
-      isModuleView &&
-      !domChanged &&
-      !managerModuleToTranspile.path.endsWith('.html')
-    ) {
-      const isReact =
-        managerModuleToTranspile.code &&
-        managerModuleToTranspile.code.includes('React');
-
-      if (isReact) {
-        // initiate boilerplates
-        if (getBoilerplates().length === 0) {
-          try {
-            await evalBoilerplates(defaultBoilerplates);
-          } catch (e) {
-            console.log("Couldn't load all boilerplates: " + e.message);
-          }
+      const tt = Date.now();
+      const oldHTML = document.body.innerHTML;
+      const evalled = manager.evaluateModule(managerModuleToTranspile);
+      debug(`Evaluation time: ${Date.now() - tt}ms`);
+      const domChanged =
+        !manager.preset.htmlDisabled && oldHTML !== document.body.innerHTML;
 
-          const boilerplate = findBoilerplate(managerModuleToTranspile);
-          if (boilerplate) {
+      if (
+        isModuleView &&
+        !domChanged &&
+        !managerModuleToTranspile.path.endsWith('.html')
+      ) {
+        const isReact =
+          managerModuleToTranspile.code &&
+          managerModuleToTranspile.code.includes('React');
+
+        if (isReact) {
+          // initiate boilerplates
+          if (getBoilerplates().length === 0) {
             try {
-              boilerplate.module.default(evalled);
+              await evalBoilerplates(defaultBoilerplates);
             } catch (e) {
-              console.error(e);
+              console.log("Couldn't load all boilerplates: " + e.message);
+            }
+
+            const boilerplate = findBoilerplate(managerModuleToTranspile);
+            if (boilerplate) {
+              try {
+                boilerplate.module.default(evalled);
+              } catch (e) {
+                console.error(e);
+              }
             }
           }
         }
@@ -467,9 +467,15 @@ async function compile({
 
     debug(`Total time: ${Date.now() - startTime}ms`);
 
+    const managerState = {
+      ...manager.serialize(),
+    };
+    delete managerState.cachedPaths;
+    managerState.entry = managerModuleToTranspile.path;
+
     dispatch({
       type: 'success',
-      state: manager.serialize(),
+      state: managerState,
     });
 
     manager.save();

packages/react-sandpack/.gitignore

@@ -2,4 +2,5 @@ compiled
 storybook-static
 .rpt2_cache
 dist
-docs
+docs
+.env

packages/react-sandpack/package.json

@@ -98,7 +98,7 @@
     "colors": "^1.1.2",
     "commitizen": "^2.9.6",
     "coveralls": "^3.0.0",
-    "cross-env": "^5.0.1",
+    "cross-env": "^5.1.3",
     "cz-conventional-changelog": "^2.0.0",
     "gulp": "^3.9.1",
     "gulp-concat": "^2.6.1",

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

@@ -25,13 +25,11 @@ class Navigator extends React.Component<Props, State> {
     super(props);
     this.listener = listen(this.handleMessage);
 
-    let urlState = this.getUrlState(props.sandpack.sandboxUrl);
-
-    if (props.sandpack.browserFrame) {
-      urlState = this.getUrlState(props.sandpack.browserFrame.src);
-    }
-
-    this.state = urlState;
+    this.state = {
+      browserPath: '/',
+      baseUrl: '',
+      lastCommittedUrl: '/',
+    };
   }
 
   componentWillUnmount() {
@@ -41,7 +39,6 @@ class Navigator extends React.Component<Props, State> {
   handleMessage = (message: any) => {
     switch (message.type) {
       case 'urlchange': {
-        console.log(message);
         this.setState(this.getUrlState(message.url));
         break;
       }

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

@@ -24,6 +24,13 @@ export interface Props {
   height?: number | string;
   bundlerURL?: string;
   skipEval: boolean;
+  template?:
+    | 'create-react-app'
+    | 'create-react-app-typescript'
+    | 'parcel'
+    | 'vue-cli'
+    | 'angular-cli'
+    | 'preact-cli';
 }
 
 export default class SandpackProvider extends React.PureComponent<
@@ -109,6 +116,7 @@ export default class SandpackProvider extends React.PureComponent<
           this.props.dependencies,
           this.props.entry
         ),
+        template: this.props.template,
       },
       {
         skipEval: this.props.skipEval,
@@ -124,15 +132,16 @@ export default class SandpackProvider extends React.PureComponent<
     this.setState({ files });
 
     if (this.manager) {
-      this.manager.updatePreview({ files });
+      this.manager.updatePreview({ files, template: this.props.template });
     }
   };
 
   componentDidUpdate(props: Props) {
     if (
       props.files !== this.props.files ||
       props.dependencies !== this.props.dependencies ||
-      props.entry !== this.props.entry
+      props.entry !== this.props.entry ||
+      props.template !== this.props.template
     ) {
       const newFiles = this.createMissingPackageJSON(
         this.props.files,

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

@@ -2,51 +2,92 @@ import * as React from 'react';
 import { listen } from 'codesandbox-api';
 import { Controlled } from 'react-codemirror2';
 
+import classNames from 'classnames';
+
 import { ISandpackContext } from '../../types';
 
+import cn from '../../utils/cn';
 import SandpackConsumer from '../SandpackConsumer';
 import CodeMirrorComponent from '../../helper-components/CodeMirror';
 
 export interface Props {
   style?: Object;
+  className?: string;
 }
 
 export interface State {
-  managerState: any;
+  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();
+  }
+
   getTranspiledCode(sandpack: ISandpackContext) {
     const { openedPath, managerState } = sandpack;
     if (managerState == null) {
       return null;
     }
 
-    const tModule = managerState.transpiledModules[openedPath + ':'];
+    const tModule = managerState.transpiledModules[managerState.entry + ':'];
     if (tModule && tModule.source) {
       const { compiledCode } = tModule.source;
 
       if (compiledCode) {
         return compiledCode;
-        // .replace(/\/\/# sourceMappingURL.*/, '')
-        // .replace(/\/\/# sourceURL.*/, '');
       }
     }
 
     return null;
   }
 
   render() {
+    const className = classNames(
+      cn('TranspiledCodeView', 'container'),
+      this.props.className
+    );
+
     return (
       <SandpackConsumer>
         {sandpack => (
-          <CodeMirrorComponent
-            style={this.props.style}
-            onBeforeChange={() => {
-              /* empty */
-            }}
-            value={this.getTranspiledCode(sandpack) || '// loading...'}
-          />
+          <div className={className} style={this.props.style}>
+            <CodeMirrorComponent
+              onBeforeChange={() => {
+                /* empty */
+              }}
+              value={this.getTranspiledCode(sandpack) || '// loading...'}
+            />
+            {this.state.error && (
+              <div className={cn('TranspiledCodeView', 'error')}>
+                {this.state.error.message}
+              </div>
+            )}
+          </div>
         )}
       </SandpackConsumer>
     );

packages/react-sandpack/src/components/TranspiledCodeView/styles.scss

@@ -0,0 +1,13 @@
+.sandpack-TranspiledCodeView__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sandpack-TranspiledCodeView__error {
+  font-family: Menlo, Source Code Pro, monospace;
+  background-color: #ba3537;
+  color: white;
+
+  padding: 0.5rem;
+}

packages/react-sandpack/src/global.scss

@@ -1,3 +1,7 @@
-* {
-  box-sizing: border-box;
+.sandpack {
+  font-family: Helvetica, sans-serif;
+
+  * {
+    box-sizing: border-box;
+  }
 }

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

@@ -39,9 +39,7 @@ export interface ITranspiledModule {
 }
 
 export interface IManagerState {
-  cachedPaths: {
-    [path: string]: string;
-  };
+  entry: string;
   transpiledModules: {
     [id: string]: ITranspiledModule;
   };
@@ -52,6 +50,7 @@ export interface ISandpackContext {
   managerState: IManagerState | undefined;
   sandboxUrl: string;
   openedPath: string;
+  entry: string;
   files: IFiles;
   openFile: (path: string) => void;
   updateFiles: (files: IFiles) => void;