Wait for sending console messages until codesandbox api is intitialized (codesandbox#3350)

* Wait for sending console messages until codesandbox api is intitialized

* Bump codesandbox-api

* Fix typing issue

* Move console logic to startup

* Remove add

Author: CompuIves

packages/app/package.json

@@ -101,7 +101,7 @@
     "browser-resolve": "CompuIves/node-browser-resolve",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
-    "codesandbox-api": "0.0.23",
+    "codesandbox-api": "0.0.24",
     "codesandbox-import-utils": "^2.1.11",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",

packages/app/src/sandbox/index.js

@@ -8,12 +8,7 @@ import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import { generateFileFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
 import { getSandboxId } from '@codesandbox/common/lib/utils/url-generator';
-import setupConsole from 'sandbox-hooks/console';
-import setupHistoryListeners from 'sandbox-hooks/url-listeners';
-import {
-  listenForPreviewSecret,
-  getPreviewSecret,
-} from 'sandbox-hooks/preview-secret';
+import { getPreviewSecret } from 'sandbox-hooks/preview-secret';
 import { show404 } from 'sandbox-hooks/not-found-screen';
 
 import compile, { getCurrentManager } from './compile';
@@ -68,10 +63,6 @@ requirePolyfills().then(() => {
     sendReady();
 
     if (!window.opener) {
-      // Means we're in the editor
-      setupHistoryListeners();
-      setupConsole();
-      listenForPreviewSecret();
       window.addEventListener('message', ({ data }) => {
         switch (data.type) {
           case 'activate':

packages/app/src/sandbox/startup.js

@@ -1,8 +1,18 @@
 /* eslint-disable import/default */
 import BabelWorker from 'worker-loader?publicPath=/&name=babel-transpiler.[hash:8].worker.js!./eval/transpilers/babel/worker/index';
 /* eslint-enable import/default */
+import hookConsole from 'sandbox-hooks/console';
+import setupHistoryListeners from 'sandbox-hooks/url-listeners';
+import { listenForPreviewSecret } from 'sandbox-hooks/preview-secret';
 
 window.babelworkers = [];
 for (let i = 0; i < 3; i++) {
   window.babelworkers.push(new BabelWorker());
 }
+
+if (!window.opener) {
+  // Means we're in the editor
+  setupHistoryListeners();
+  hookConsole();
+  listenForPreviewSecret();
+}

packages/codesandbox-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codesandbox-api",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "",
   "keywords": [],
   "repository": {

packages/codesandbox-api/src/dispatcher/index.ts

@@ -18,13 +18,24 @@ function checkIsStandalone() {
 // Whether the tab has a connection with the editor
 export const isStandalone = checkIsStandalone();
 
+let initializeResolved: () => void;
+/**
+ * Resolves when the handshake between the frame and the editor has succeeded
+ */
+export const intializedPromise = new Promise(resolve => {
+  initializeResolved = resolve;
+});
+
 // Field used by a "child" frame to determine its parent origin
 let parentOrigin: string | null = null;
 
 const parentOriginListener = (e: MessageEvent) => {
   if (e.data.type === 'register-frame') {
     parentOrigin = e.data.origin;
 
+    if (initializeResolved) {
+      initializeResolved();
+    }
     self.removeEventListener('message', parentOriginListener);
   }
 };

packages/common/package.json

@@ -52,7 +52,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.23",
+    "codesandbox-api": "0.0.24",
     "color": "0.11.4",
     "date-fns": "^2.0.0",
     "dot-object": "1.9.0",

packages/components/package.json

@@ -33,7 +33,7 @@
     "@reach/auto-id": "^0.7.1",
     "@reach/visually-hidden": "^0.7.0",
     "@styled-system/css": "^5.1.4",
-    "codesandbox-api": "0.0.23",
+    "codesandbox-api": "0.0.24",
     "color": "3.1.2",
     "date-fns": "^2.8.1",
     "react-router-dom": "^5.1.2",

packages/executors/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@codesandbox/common": "^1.0.8",
-    "codesandbox-api": "0.0.23",
+    "codesandbox-api": "0.0.24",
     "debug": "^4.1.1",
     "socket.io-client": "^2.2.0"
   },

packages/sandbox-hooks/console/index.js

@@ -1,9 +1,10 @@
-import { dispatch, listen } from 'codesandbox-api';
+import { dispatch, listen, intializedPromise } from 'codesandbox-api';
 import Hook from 'console-feed/lib/Hook';
 import { Encode } from 'console-feed/lib/Transform';
 
 export default function setupConsole() {
-  Hook(window.console, log => {
+  Hook(window.console, async log => {
+    await intializedPromise;
     dispatch({
       type: 'console',
       log,

packages/sandbox-hooks/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@codesandbox/common": "^1.0.8",
-    "codesandbox-api": "0.0.23",
+    "codesandbox-api": "0.0.24",
     "console-feed": "^2.8.5",
     "react-dev-utils": "3.1.1"
   },