[Canvas] Reduce Bundle Size (#66099)

* Move some code around to reduce bundle size

* prettier

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/canvas/public/application.tsx

@@ -18,7 +18,6 @@ import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
 // @ts-ignore Untyped local
 import { App } from './components/app';
 import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
-import { initInterpreter } from './lib/run_interpreter';
 import { registerLanguage } from './lib/monaco_language_def';
 import { SetupRegistries } from './plugin_api';
 import { initRegistries, populateRegistries, destroyRegistries } from './registries';
@@ -37,6 +36,7 @@ import { startServices, services } from './services';
 import { destroyHistory } from './lib/history_provider';
 // @ts-ignore Untyped local
 import { stopRouter } from './lib/router_provider';
+import { initFunctions } from './functions';
 // @ts-ignore Untyped local
 import { appUnload } from './state/actions/app';
 
@@ -82,15 +82,25 @@ export const initializeCanvas = async (
   registries: SetupRegistries,
   appUpdater: BehaviorSubject<AppUpdater>
 ) => {
-  startServices(coreSetup, coreStart, setupPlugins, startPlugins, appUpdater);
+  await startServices(coreSetup, coreStart, setupPlugins, startPlugins, appUpdater);
+
+  // Adding these functions here instead of in plugin.ts.
+  // Some of these functions have deep dependencies into Canvas, which was bulking up the size
+  // of our bundle entry point. Moving them here pushes that load to when canvas is actually loaded.
+  const canvasFunctions = initFunctions({
+    timefilter: setupPlugins.data.query.timefilter.timefilter,
+    prependBasePath: coreSetup.http.basePath.prepend,
+    typesRegistry: setupPlugins.expressions.__LEGACY.types,
+  });
+
+  for (const fn of canvasFunctions) {
+    services.expressions.getService().registerFunction(fn);
+  }
 
   // Create Store
   const canvasStore = await createStore(coreSetup, setupPlugins);
 
-  // Init Interpreter
-  initInterpreter(startPlugins.expressions, setupPlugins.expressions).then(() => {
-    registerLanguage(Object.values(startPlugins.expressions.getFunctions()));
-  });
+  registerLanguage(Object.values(services.expressions.getService().getFunctions()));
 
   // Init Registries
   initRegistries();

x-pack/plugins/canvas/public/lib/run_interpreter.ts

@@ -6,32 +6,7 @@
 
 import { fromExpression, getType } from '@kbn/interpreter/common';
 import { ExpressionValue, ExpressionAstExpression } from 'src/plugins/expressions/public';
-import { notifyService } from '../services';
-
-import { CanvasStartDeps, CanvasSetupDeps } from '../plugin';
-
-let expressionsStarting: Promise<CanvasStartDeps['expressions']> | undefined;
-
-export const initInterpreter = function (
-  expressionsStart: CanvasStartDeps['expressions'],
-  expressionsSetup: CanvasSetupDeps['expressions']
-) {
-  expressionsStarting = startExpressions(expressionsStart, expressionsSetup);
-
-  return expressionsStarting;
-};
-
-async function startExpressions(
-  expressionsStart: CanvasStartDeps['expressions'],
-  expressionsSetup: CanvasSetupDeps['expressions']
-) {
-  await expressionsSetup.__LEGACY.loadLegacyServerFunctionWrappers();
-  return expressionsStart;
-}
-
-export const resetInterpreter = function () {
-  expressionsStarting = undefined;
-};
+import { notifyService, expressionsService } from '../services';
 
 interface Options {
   castToRender?: boolean;
@@ -41,12 +16,7 @@ interface Options {
  * Meant to be a replacement for plugins/interpreter/interpretAST
  */
 export async function interpretAst(ast: ExpressionAstExpression): Promise<ExpressionValue> {
-  if (!expressionsStarting) {
-    throw new Error('Interpreter has not been initialized');
-  }
-
-  const expressions = await expressionsStarting;
-  return await expressions.execute(ast).getData();
+  return await expressionsService.getService().execute(ast).getData();
 }
 
 /**
@@ -63,14 +33,8 @@ export async function runInterpreter(
   input: ExpressionValue,
   options: Options = {}
 ): Promise<ExpressionValue> {
-  if (!expressionsStarting) {
-    throw new Error('Interpreter has not been initialized');
-  }
-
-  const expressions = await expressionsStarting;
-
   try {
-    const renderable = await expressions.execute(ast, input).getData();
+    const renderable = await expressionsService.getService().execute(ast, input).getData();
 
     if (getType(renderable) === 'render') {
       return renderable;

x-pack/plugins/canvas/public/plugin.tsx

@@ -28,7 +28,6 @@ import { Start as InspectorStart } from '../../../../src/plugins/inspector/publi
 import { argTypeSpecs } from './expression_types/arg_types';
 import { transitions } from './transitions';
 import { getPluginApi, CanvasApi } from './plugin_api';
-import { initFunctions } from './functions';
 import { CanvasSrcPlugin } from '../canvas_plugin_src/plugin';
 export { CoreStart, CoreSetup };
 
@@ -117,14 +116,6 @@ export class CanvasPlugin
 
     plugins.home.featureCatalogue.register(featureCatalogueEntry);
 
-    // Register core canvas stuff
-    canvasApi.addFunctions(
-      initFunctions({
-        timefilter: plugins.data.query.timefilter.timefilter,
-        prependBasePath: core.http.basePath.prepend,
-        typesRegistry: plugins.expressions.__LEGACY.types,
-      })
-    );
     canvasApi.addArgumentUIs(argTypeSpecs);
     canvasApi.addTransitions(transitions);
 

x-pack/plugins/canvas/public/services/expressions.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CanvasServiceFactory } from '.';
+import { ExpressionsService } from '../../../../../src/plugins/expressions/common';
+
+export const expressionsServiceFactory: CanvasServiceFactory<ExpressionsService> = async (
+  coreSetup,
+  coreStart,
+  setupPlugins,
+  startPlugins
+) => {
+  await setupPlugins.expressions.__LEGACY.loadLegacyServerFunctionWrappers();
+
+  return setupPlugins.expressions.fork();
+};

x-pack/plugins/canvas/public/services/index.ts

@@ -10,6 +10,7 @@ import { CanvasSetupDeps, CanvasStartDeps } from '../plugin';
 import { notifyServiceFactory } from './notify';
 import { platformServiceFactory } from './platform';
 import { navLinkServiceFactory } from './nav_link';
+import { expressionsServiceFactory } from './expressions';
 
 export type CanvasServiceFactory<Service> = (
   coreSetup: CoreSetup,
@@ -17,7 +18,7 @@ export type CanvasServiceFactory<Service> = (
   canvasSetupPlugins: CanvasSetupDeps,
   canvasStartPlugins: CanvasStartDeps,
   appUpdater: BehaviorSubject<AppUpdater>
-) => Service;
+) => Service | Promise<Service>;
 
 class CanvasServiceProvider<Service> {
   private factory: CanvasServiceFactory<Service>;
@@ -27,14 +28,14 @@ class CanvasServiceProvider<Service> {
     this.factory = factory;
   }
 
-  start(
+  async start(
     coreSetup: CoreSetup,
     coreStart: CoreStart,
     canvasSetupPlugins: CanvasSetupDeps,
     canvasStartPlugins: CanvasStartDeps,
     appUpdater: BehaviorSubject<AppUpdater>
   ) {
-    this.service = this.factory(
+    this.service = await this.factory(
       coreSetup,
       coreStart,
       canvasSetupPlugins,
@@ -59,27 +60,31 @@ class CanvasServiceProvider<Service> {
 export type ServiceFromProvider<P> = P extends CanvasServiceProvider<infer T> ? T : never;
 
 export const services = {
+  expressions: new CanvasServiceProvider(expressionsServiceFactory),
   notify: new CanvasServiceProvider(notifyServiceFactory),
   platform: new CanvasServiceProvider(platformServiceFactory),
   navLink: new CanvasServiceProvider(navLinkServiceFactory),
 };
 
 export interface CanvasServices {
+  expressions: ServiceFromProvider<typeof services.expressions>;
   notify: ServiceFromProvider<typeof services.notify>;
   platform: ServiceFromProvider<typeof services.platform>;
   navLink: ServiceFromProvider<typeof services.navLink>;
 }
 
-export const startServices = (
+export const startServices = async (
   coreSetup: CoreSetup,
   coreStart: CoreStart,
   canvasSetupPlugins: CanvasSetupDeps,
   canvasStartPlugins: CanvasStartDeps,
   appUpdater: BehaviorSubject<AppUpdater>
 ) => {
-  Object.entries(services).forEach(([key, provider]) =>
+  const startPromises = Object.values(services).map((provider) =>
     provider.start(coreSetup, coreStart, canvasSetupPlugins, canvasStartPlugins, appUpdater)
   );
+
+  await Promise.all(startPromises);
 };
 
 export const stopServices = () => {
@@ -90,4 +95,5 @@ export const {
   notify: notifyService,
   platform: platformService,
   navLink: navLinkService,
+  expressions: expressionsService,
 } = services;