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

CompuIves · web-flow · commit ee78057be285 · 2020-01-18T14:16:05.000+01:00
* Wait for sending console messages until codesandbox api is intitialized

* Bump codesandbox-api

* Fix typing issue

* Move console logic to startup

* Remove add
diff --git a/packages/app/package.json b/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",
diff --git a/packages/app/src/sandbox/index.js b/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':
diff --git a/packages/app/src/sandbox/startup.js b/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();
+}
diff --git a/packages/codesandbox-api/package.json b/packages/codesandbox-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codesandbox-api",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "",
   "keywords": [],
   "repository": {
diff --git a/packages/codesandbox-api/src/dispatcher/index.ts b/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);
   }
 };
diff --git a/packages/common/package.json b/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",
diff --git a/packages/components/package.json b/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",
diff --git a/packages/executors/package.json b/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"
   },
diff --git a/packages/sandbox-hooks/console/index.js b/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,
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.23",
+    "codesandbox-api": "0.0.24",
     "console-feed": "^2.8.5",
     "react-dev-utils": "3.1.1"
   },
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.23"
+    "codesandbox-api": "0.0.24"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
diff --git a/standalone-packages/react-sandpack/package.json b/standalone-packages/react-sandpack/package.json
@@ -76,7 +76,7 @@
     "@types/shelljs": "^0.8.0",
     "classnames": "^2.2.5",
     "codemirror": "^5.35.0",
-    "codesandbox-api": "0.0.23",
+    "codesandbox-api": "0.0.24",
     "codesandbox-import-utils": "^1.2.3",
     "react-broadcast": "^0.6.2",
     "react-codemirror2": "^4.0.1",
diff --git a/standalone-packages/sandpack/package.json b/standalone-packages/sandpack/package.json
@@ -65,7 +65,7 @@
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
   },
   "dependencies": {
-    "codesandbox-api": "0.0.23",
+    "codesandbox-api": "0.0.24",
     "codesandbox-import-utils": "^1.2.3",
     "lodash.isequal": "^4.5.0"
   },

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "codesandbox-api",`
`3`		`- "version": "0.0.23",`
	`3`	`+ "version": "0.0.24",`
`4`	`4`	`"description": "",`
`5`	`5`	`"keywords": [],`
`6`	`6`	`"repository": {`