Bundler updates (#5677)

* bundler updates on error messages and hiding parts of the UI * compile flags default to true * replace entire head tag for sandpack * fix: empty head scenario * remove head override Co-authored-by: Alex Moldovan <[email protected]>
codesandbox · Apr 20, 2021 · a5bd211 · a5bd211
1 parent 8a8c9a6
commit a5bd211
Show file tree

Hide file tree

Showing 14 changed files with 82 additions and 37 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -108,7 +108,7 @@
     "browser-resolve": "CompuIves/node-browser-resolve",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
-    "codesandbox-api": "0.0.31",
+    "codesandbox-api": "latest",
     "codesandbox-import-utils": "^2.2.2",
     "color": "^0.11.4",
     "comlink": "^4.3.0",

diff --git a/packages/app/src/sandbox/compile.ts b/packages/app/src/sandbox/compile.ts
@@ -427,7 +427,9 @@ function overrideDocumentClose() {
 
 overrideDocumentClose();
 
-inject();
+if (!process.env.SANDPACK) {
+  inject();
+}
 
 interface CompileOptions {
   sandboxId: string;
@@ -457,8 +459,8 @@ async function compile({
   template,
   entry,
   showOpenInCodeSandbox,
-  showLoadingScreen,
-  showErrorScreen,
+  showLoadingScreen = true,
+  showErrorScreen = true,
   skipEval = false,
   hasFileResolver = false,
   disableDependencyPreprocessing = false,
@@ -478,7 +480,7 @@ async function compile({
 
   const startTime = Date.now();
   try {
-    inject();
+    inject(showErrorScreen);
     clearErrorTransformers();
     initializeErrorTransformers();
     unmount(manager && manager.webpackHMR ? true : hadError);
@@ -541,7 +543,7 @@ async function compile({
 
     metrics.measure('dependencies');
 
-    if (firstLoad) {
+    if (firstLoad && showLoadingScreen) {
       setScreen({
         type: 'loading',
         showFullScreen: firstLoad,
@@ -552,6 +554,10 @@ async function compile({
     const { manifest, isNewCombination } = await loadDependencies(
       dependencies,
       ({ done, total, remainingDependencies }) => {
+        if (!showLoadingScreen) {
+          return;
+        }
+
         const progress = total - done;
         if (done === total) {
           return;
@@ -624,11 +630,13 @@ async function compile({
     const main = absolute(foundMain);
     managerModuleToTranspile = modules[main];
 
-    setScreen({
-      type: 'loading',
-      text: 'Transpiling Modules...',
-      showFullScreen: firstLoad,
-    });
+    if (showLoadingScreen) {
+      setScreen({
+        type: 'loading',
+        text: 'Transpiling Modules...',
+        showFullScreen: firstLoad,
+      });
+    }
 
     dispatch({ type: 'status', status: 'transpiling' });
     manager.setStage('transpilation');
@@ -701,6 +709,16 @@ async function compile({
           // on the first run. However, if there's no server to provide the static file (in the case of a local server
           // or sandpack), then do it anyways.
           document.body.innerHTML = body;
+
+          // Add head tags or anything that comes from the template
+          // This way, title and other meta tags will overwrite whatever the bundler <head> tag has.
+          // At this point, the original head was parsed and the files loaded / preloaded.
+
+          // TODO: figure out a way to fix this without overriding head changes done by the bundler
+          // Original issue: https://github.com/codesandbox/sandpack/issues/32
+          // if (document.head && head) {
+          //   document.head.innerHTML = head;
+          // }
         }
         lastBodyHTML = body;
         lastHeadHTML = head;

diff --git a/packages/codesandbox-api/package.json b/packages/codesandbox-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codesandbox-api",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "",
   "keywords": [],
   "repository": {

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -53,7 +53,7 @@
     "@tippy.js/react": "^3.1.1",
     "babel-plugin-preval": "^3.0.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "codesandbox-api": "0.0.31",
+    "codesandbox-api": "latest",
     "color": "0.11.4",
     "date-fns": "^2.0.0",
     "dot-object": "1.9.0",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -44,7 +44,7 @@
     "@reach/visually-hidden": "0.10.2",
     "@styled-system/css": "^5.1.4",
     "chromatic": "^4.0.2",
-    "codesandbox-api": "0.0.31",
+    "codesandbox-api": "latest",
     "color": "3.1.2",
     "date-fns": "^2.8.1",
     "deepmerge": "^4.2.2",

diff --git a/packages/executors/package.json b/packages/executors/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@codesandbox/common": "^1.0.8",
     "axios": "^0.19.2",
-    "codesandbox-api": "0.0.31",
+    "codesandbox-api": "latest",
     "debug": "^4.1.1",
     "socket.io-client": "^2.2.0"
   },

diff --git a/packages/sandbox-hooks/errors/index.js b/packages/sandbox-hooks/errors/index.js
@@ -96,7 +96,9 @@ function buildDynamicError(ref: ErrorRecord) {
           message: ref.error.message,
           line: relevantFrame._originalLineNumber,
           column: relevantFrame._originalColumnNumber,
-          payload: {},
+          payload: {
+            frames: ref.enhancedFrames,
+          },
           severity: 'error',
         };
       }

diff --git a/packages/sandbox-hooks/errors/transformers/raw-react-component-error.js b/packages/sandbox-hooks/errors/transformers/raw-react-component-error.js
@@ -29,7 +29,7 @@ function findRawModule(module) {
  * @param {any} module
  * @returns
  */
-export default function(error: Error, module) {
+export default function (error: Error, module) {
   if (
     error.message.includes(
       "Failed to execute 'createElement' on 'Document': The tag name provided "

diff --git a/packages/sandbox-hooks/package.json b/packages/sandbox-hooks/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@codesandbox/common": "^1.0.8",
-    "codesandbox-api": "0.0.31",
+    "codesandbox-api": "latest",
     "console-feed": "^3.1.9",
     "css-line-break": "^1.1.1",
     "react-dev-utils": "3.1.1"

diff --git a/packages/sandbox-hooks/react-error-overlay/overlay.js b/packages/sandbox-hooks/react-error-overlay/overlay.js
@@ -105,6 +105,20 @@ function renderErrorByIndex(index: number) {
   }
 }
 
+const SHORTCUT_ESCAPE = 1;
+const SHORTCUT_LEFT = 2;
+const SHORTCUT_RIGHT = 3;
+
+function keyEventHandler(cb, event) {
+  if (event.key === 'Escape' || event.key === 'Esc') {
+    cb(SHORTCUT_ESCAPE);
+  } else if (event.key === 'Left' || event.key === 'ArrowLeft') {
+    cb(SHORTCUT_LEFT);
+  } else if (event.key === 'Right' || event.key === 'ArrowRight') {
+    cb(SHORTCUT_RIGHT);
+  }
+}
+
 function switchError(offset) {
   if (errorReferences.length === 0) {
     return;
@@ -217,7 +231,11 @@ function transformErrors() {
   }
 }
 
-function crash(error: Error, unhandledRejection = false) {
+function crash(
+  error: Error,
+  unhandledRejection = false,
+  renderErrorOverlay = true
+) {
   if (module.hot && typeof module.hot.decline === 'function') {
     module.hot.decline();
   }
@@ -232,21 +250,23 @@ function crash(error: Error, unhandledRejection = false) {
 
       sendErrorsToEditor();
       transformErrors();
-      if (iframeReference !== null && additionalReference !== null) {
-        updateAdditional(
-          iframeReference.contentDocument,
-          additionalReference,
-          currReferenceIndex + 1,
-          errorReferences.length,
-          offset => {
-            switchError(offset);
+      if (renderErrorOverlay) {
+        if (iframeReference !== null && additionalReference !== null) {
+          updateAdditional(
+            iframeReference.contentDocument,
+            additionalReference,
+            currReferenceIndex + 1,
+            errorReferences.length,
+            offset => {
+              switchError(offset);
+            }
+          );
+        } else {
+          if (errorReferences.length !== 1) {
+            throw new Error('Something is *really* wrong.');
           }
-        );
-      } else {
-        if (errorReferences.length !== 1) {
-          throw new Error('Something is *really* wrong.');
+          renderErrorByIndex((currReferenceIndex = 0));
         }
-        renderErrorByIndex((currReferenceIndex = 0));
       }
     })
     .catch(e => {
@@ -277,9 +297,9 @@ function shortcutHandler(type: string) {
 
 let listenToRuntimeErrorsUnmounter;
 
-function inject() {
+function inject(renderErrorOverlay = true) {
   listenToRuntimeErrorsUnmounter = listenToRuntimeErrors(error => {
-    crash(error.error);
+    crash(error.error, false, renderErrorOverlay);
   });
 }
 

diff --git a/packages/sandpack-core/package.json b/packages/sandpack-core/package.json
@@ -21,7 +21,7 @@
     "@babel/runtime": "^7.11.2",
     "@codesandbox/common": "^1.0.8",
     "browser-resolve": "CompuIves/node-browser-resolve",
-    "codesandbox-api": "^0.0.31",
+    "codesandbox-api": "latest",
     "localforage-driver-memory": "^1.0.5",
     "lodash-es": "^4.17.15",
     "sandbox-hooks": "0.1.0",

diff --git a/packages/sandpack-core/src/cache.ts b/packages/sandpack-core/src/cache.ts
@@ -127,7 +127,7 @@ export function deleteAPICache(
   sandboxId: string,
   version: string
 ): Promise<any> {
-  if (APICacheUsed) {
+  if (APICacheUsed && !process.env.SANDPACK) {
     debug('Deleting cache of API');
     return window
       .fetch(`${host}/api/v1/sandboxes/${sandboxId}/cache`, {

diff --git a/packages/sse-hooks/package.json b/packages/sse-hooks/package.json
@@ -13,7 +13,7 @@
     "build:dev": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "codesandbox-api": "0.0.31",
+    "codesandbox-api": "latest",
     "sandbox-hooks": "0.1.0"
   },
   "devDependencies": {

diff --git a/yarn.lock b/yarn.lock
@@ -9613,6 +9613,11 @@ codemirror@^5.27.4:
   version "5.38.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.38.0.tgz#26a9551446e51dbdde36aabe60f72469724fd332"
 
+codesandbox-api@latest:
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/codesandbox-api/-/codesandbox-api-0.0.32.tgz#dd2a937687398a3288f6b6534b56a2d059edeaef"
+  integrity sha512-YMQDDW9AdkAAQij0yg+DjdACulkIgtnsOGam70zUP/tuGI5hM4pjaadXPU1BI/GrZHO2Df7Y/TSWcxwyz10PbQ==
+
 codesandbox-import-util-types@^2.1.9, codesandbox-import-util-types@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.1.tgz#fbd0babed213eed068ad8251f5cdb1a01e573171"