Update state handling and skipEval scenarios

Author: Ives van Hoorne

packages/app/src/sandbox/compile.js

@@ -299,6 +299,7 @@ async function compile({
   actionsEnabled = hasActions;
   handleExternalResources(externalResources);
 
+  let managerModuleToTranspile = null;
   try {
     const templateDefinition = getDefinition(template);
     const configurations = parseConfigurations(
@@ -373,7 +374,7 @@ async function compile({
     }
 
     const main = absolute(foundMain);
-    const managerModuleToTranspile = modules[main];
+    managerModuleToTranspile = modules[main];
 
     dispatch({ type: 'status', status: 'transpiling' });
 
@@ -499,15 +500,8 @@ 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: managerState,
     });
 
     manager.save();
@@ -529,6 +523,21 @@ async function compile({
     window.dispatchEvent(event);
 
     hadError = true;
+  } finally {
+    if (manager) {
+      const managerState = {
+        ...manager.serialize(),
+      };
+      delete managerState.cachedPaths;
+      managerState.entry = managerModuleToTranspile
+        ? managerModuleToTranspile.path
+        : null;
+
+      dispatch({
+        type: 'state',
+        state: managerState,
+      });
+    }
   }
   firstLoad = false;
 

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

@@ -79,7 +79,7 @@ export default class SandpackProvider extends React.PureComponent<
   }
 
   handleMessage = (m: any) => {
-    if (m.type === 'success') {
+    if (m.type === 'state') {
       this.setState({ managerState: m.state });
     } else if (m.type === 'start') {
       this.setState({ errors: [] });
@@ -131,6 +131,12 @@ export default class SandpackProvider extends React.PureComponent<
     return newFiles;
   }
 
+  getOptions = () => {
+    return {
+      skipEval: this.props.skipEval,
+    };
+  };
+
   setupFrame = (el: HTMLIFrameElement) => {
     if (el) {
       this.manager = new Manager(
@@ -143,9 +149,7 @@ export default class SandpackProvider extends React.PureComponent<
           ),
           template: this.props.template,
         },
-        {
-          skipEval: this.props.skipEval,
-        }
+        this.getOptions()
       );
 
       this.iframe = el;
@@ -180,6 +184,10 @@ export default class SandpackProvider extends React.PureComponent<
 
       this.updateFiles(newFiles);
     }
+
+    if (this.manager && this.props.skipEval !== props.skipEval) {
+      this.manager.updateOptions(this.getOptions());
+    }
   }
 
   componentWillUnmount() {

packages/react-sandpack/stories/InTheWild.js

@@ -138,7 +138,6 @@ stories.addWithJSX('babel', () => (
     }}
     entry="/index.js"
     template="babel-repl"
-    skipEval
   >
     <div
       style={{

packages/sandpack/package.json

@@ -76,10 +76,12 @@
   },
   "dependencies": {
     "codesandbox-api": "^0.0.18",
-    "codesandbox-import-utils": "^1.2.3"
+    "codesandbox-import-utils": "^1.2.3",
+    "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
     "@types/jest": "^22.0.0",
+    "@types/lodash.isequal": "^4.5.2",
     "@types/node": "^9.3.0",
     "colors": "^1.1.2",
     "commitizen": "^2.9.6",

packages/sandpack/src/manager/index.ts

@@ -2,6 +2,8 @@
 import { dispatch, listen, registerFrame } from 'codesandbox-api';
 import { getTemplate } from 'codesandbox-import-utils/lib/create-sandbox/templates';
 
+import isEqual from 'lodash.isequal';
+
 import generatePackageJSON, {
   getPackageJSON,
 } from '../utils/generate-package-json';
@@ -68,7 +70,6 @@ export default class PreviewManager {
   iframe: HTMLIFrameElement;
   options: IManagerOptions;
   listener?: Function;
-  skipEval: boolean;
   bundlerURL: string;
 
   sandboxInfo: ISandboxInfo;
@@ -99,8 +100,6 @@ export default class PreviewManager {
     }
     this.iframe.src = this.bundlerURL;
 
-    this.skipEval = options.skipEval || false;
-
     this.listener = listen((message: any) => {
       switch (message.type) {
         case 'initialized': {
@@ -118,6 +117,13 @@ export default class PreviewManager {
     });
   }
 
+  updateOptions(options: IManagerOptions) {
+    if (!isEqual(this.options, options)) {
+      this.options = options;
+      this.updatePreview();
+    }
+  }
+
   updatePreview(sandboxInfo = this.sandboxInfo) {
     this.sandboxInfo = sandboxInfo;
 
@@ -165,7 +171,7 @@ export default class PreviewManager {
         this.sandboxInfo.template ||
         getTemplate(packageJSON, normalizedModules),
       showOpenInCodeSandbox: true,
-      skipEval: this.skipEval,
+      skipEval: this.options.skipEval || false,
     });
   }
 

yarn.lock

@@ -585,6 +585,16 @@
   version "22.2.0"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.0.tgz#55ce83139f7ad1b48b414c3927746614c6963c0f"
 
+"@types/lodash.isequal@^4.5.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.2.tgz#adbdff67f7c956ed703009e5466a34eeddb0b712"
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.104"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.104.tgz#53ee2357fa2e6e68379341d92eb2ecea4b11bb80"
+
 "@types/[email protected]":
   version "4.14.99"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.99.tgz#e6e10c0a4cc16c7409b3181f1e66880d2fb7d4dc"
@@ -11374,7 +11384,7 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
-lodash.isequal@^4.0.0:
+lodash.isequal@^4.0.0, lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"