chore: defer socket and interpreter

wait until the app is finished loading before creating both

x-pack/plugins/canvas/public/components/app/index.js

@@ -6,6 +6,8 @@
 
 import { connect } from 'react-redux';
 import { compose, withProps } from 'recompose';
+import { createSocket } from '../../socket';
+import { initialize as initializeInterpreter } from '../../lib/interpreter';
 import { getAppReady } from '../../state/selectors/app';
 import { appReady, appError } from '../../state/actions/app';
 import { trackRouteChange } from './track_route_change';
@@ -20,10 +22,17 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = {
-  setAppReady: appReady,
-  setAppError: appError,
-};
+const mapDispatchToProps = dispatch => ({
+  setAppReady: async () => {
+    // initialize the socket and interpreter
+    createSocket();
+    await initializeInterpreter();
+
+    // set app state to ready
+    dispatch(appReady());
+  },
+  setAppError: payload => dispatch(appError(payload)),
+});
 
 export const App = compose(
   connect(

x-pack/plugins/canvas/public/lib/interpreter.js

@@ -6,20 +6,37 @@
 
 import { socketInterpreterProvider } from '../../common/interpreter/socket_interpret';
 import { serializeProvider } from '../../common/lib/serialize';
-import { socket } from '../socket';
+import { getSocket } from '../socket';
 import { typesRegistry } from '../../common/lib/types_registry';
 import { createHandlers } from './create_handlers';
 import { functionsRegistry } from './functions_registry';
 import { loadBrowserPlugins } from './load_browser_plugins';
 
-// Create the function list
-socket.emit('getFunctionList');
-export const getServerFunctions = new Promise(resolve => socket.once('functionList', resolve));
+let socket;
+let functionList;
+
+export async function initialize() {
+  socket = getSocket();
+
+  // Listen for interpreter runs
+  socket.on('run', ({ ast, context, id }) => {
+    const types = typesRegistry.toJS();
+    const { serialize, deserialize } = serializeProvider(types);
+    interpretAst(ast, deserialize(context)).then(value => {
+      socket.emit(`resp:${id}`, { value: serialize(value) });
+    });
+  });
+
+  // Create the function list
+  socket.emit('getFunctionList');
+  functionList = new Promise(resolve => socket.once('functionList', resolve));
+  return functionList;
+}
 
 // Use the above promise to seed the interpreter with the functions it can defer to
-export function interpretAst(ast, context) {
+export async function interpretAst(ast, context) {
   // Load plugins before attempting to get functions, otherwise this gets racey
-  return Promise.all([getServerFunctions, loadBrowserPlugins()])
+  return Promise.all([functionList, loadBrowserPlugins()])
     .then(([serverFunctionList]) => {
       return socketInterpreterProvider({
         types: typesRegistry.toJS(),
@@ -31,11 +48,3 @@ export function interpretAst(ast, context) {
     })
     .then(interpretFn => interpretFn(ast, context));
 }
-
-socket.on('run', ({ ast, context, id }) => {
-  const types = typesRegistry.toJS();
-  const { serialize, deserialize } = serializeProvider(types);
-  interpretAst(ast, deserialize(context)).then(value => {
-    socket.emit(`resp:${id}`, { value: serialize(value) });
-  });
-});

x-pack/plugins/canvas/public/socket.js

@@ -9,11 +9,20 @@ import io from 'socket.io-client';
 import { functionsRegistry } from '../common/lib/functions_registry';
 import { loadBrowserPlugins } from './lib/load_browser_plugins';
 
-const basePath = chrome.getBasePath();
-export const socket = io(undefined, { path: `${basePath}/socket.io` });
+let socket;
 
-socket.on('getFunctionList', () => {
-  const pluginsLoaded = loadBrowserPlugins();
+export function createSocket() {
+  const basePath = chrome.getBasePath();
+  socket = io(undefined, { path: `${basePath}/socket.io` });
 
-  pluginsLoaded.then(() => socket.emit('functionList', functionsRegistry.toJS()));
-});
+  socket.on('getFunctionList', () => {
+    const pluginsLoaded = loadBrowserPlugins();
+
+    pluginsLoaded.then(() => socket.emit('functionList', functionsRegistry.toJS()));
+  });
+}
+
+export function getSocket() {
+  if (!socket) throw new Error('getSocket failed, socket has not been created');
+  return socket;
+}