[Canvas] Move Handlebars and Flot dependencies out of main bundle (#7…

…8542)

* Move Handlebars and Flot dependencies out of main bundle

* Fix unit test

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

x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js

@@ -12,28 +12,28 @@ import { markdown } from './markdown';
 describe('markdown', () => {
   const fn = functionWrapper(markdown);
 
-  it('returns a render as markdown', () => {
-    const result = fn(null, { content: [''], font: fontStyle });
+  it('returns a render as markdown', async () => {
+    const result = await fn(null, { content: [''], font: fontStyle });
     expect(result).toHaveProperty('type', 'render');
     expect(result).toHaveProperty('as', 'markdown');
   });
 
   describe('args', () => {
     describe('content', () => {
-      it('sets the content to all strings in expression concatenated', () => {
-        const result = fn(null, {
+      it('sets the content to all strings in expression concatenated', async () => {
+        const result = await fn(null, {
           content: ['# this ', 'is ', 'some ', 'markdown'],
           font: fontStyle,
         });
 
         expect(result.value).toHaveProperty('content', '# this is some markdown');
       });
 
-      it('compiles and concatenates handlebars expressions using context', () => {
+      it('compiles and concatenates handlebars expressions using context', async () => {
         let expectedContent = 'Columns:';
         testTable.columns.map((col) => (expectedContent += ` ${col.name}`));
 
-        const result = fn(testTable, {
+        const result = await fn(testTable, {
           content: ['Columns:', '{{#each columns}} {{name}}{{/each}}'],
         });
 
@@ -42,8 +42,8 @@ describe('markdown', () => {
     });
 
     describe('font', () => {
-      it('sets the font style for the markdown', () => {
-        const result = fn(null, {
+      it('sets the font style for the markdown', async () => {
+        const result = await fn(null, {
           content: ['some ', 'markdown'],
           font: fontStyle,
         });
@@ -55,26 +55,26 @@ describe('markdown', () => {
       // it("defaults to the expression '{font}'", () => {});
     });
     describe('openLinksInNewTab', () => {
-      it('sets the value of openLinksInNewTab to true ', () => {
-        const result = fn(null, {
+      it('sets the value of openLinksInNewTab to true ', async () => {
+        const result = await fn(null, {
           content: ['some ', 'markdown'],
           openLinksInNewTab: true,
         });
 
         expect(result.value).toHaveProperty('openLinksInNewTab', true);
       });
 
-      it('sets the value of openLinksInNewTab to false ', () => {
-        const result = fn(null, {
+      it('sets the value of openLinksInNewTab to false ', async () => {
+        const result = await fn(null, {
           content: ['some ', 'markdown'],
           openLinksInNewTab: false,
         });
 
         expect(result.value).toHaveProperty('openLinksInNewTab', false);
       });
 
-      it('defaults the value of openLinksInNewTab to false ', () => {
-        const result = fn(null, {
+      it('defaults the value of openLinksInNewTab to false ', async () => {
+        const result = await fn(null, {
           content: ['some ', 'markdown'],
         });
 

x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts

@@ -10,8 +10,6 @@ import {
   Style,
   ExpressionFunctionDefinition,
 } from 'src/plugins/expressions/common';
-// @ts-expect-error untyped local
-import { Handlebars } from '../../../common/lib/handlebars';
 import { getFunctionHelp } from '../../../i18n';
 
 type Context = Datatable | null;
@@ -32,7 +30,7 @@ export function markdown(): ExpressionFunctionDefinition<
   'markdown',
   Context,
   Arguments,
-  Render<Return>
+  Promise<Render<Return>>
 > {
   const { help, args: argHelp } = getFunctionHelp().markdown;
 
@@ -61,7 +59,9 @@ export function markdown(): ExpressionFunctionDefinition<
         default: false,
       },
     },
-    fn: (input, args) => {
+    fn: async (input, args) => {
+      // @ts-expect-error untyped local
+      const { Handlebars } = await import('../../../common/lib/handlebars');
       const compileFunctions = args.content.map((str) =>
         Handlebars.compile(String(str), { knownHelpersOnly: true })
       );

x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx

@@ -6,7 +6,6 @@
 
 // This bit of hackiness is required because this isn't part of the main kibana bundle
 import 'jquery';
-import '../../lib/flot-charts';
 
 import { debounce, includes } from 'lodash';
 import { RendererStrings } from '../../../i18n';
@@ -22,7 +21,10 @@ export const pie: RendererFactory<Pie> = () => ({
   displayName: strings.getDisplayName(),
   help: strings.getHelpDescription(),
   reuseDomNode: false,
-  render(domNode, config, handlers) {
+  render: async (domNode, config, handlers) => {
+    // @ts-expect-error
+    await import('../../lib/flot-charts');
+
     if (!includes($.plot.plugins, piePlugin)) {
       $.plot.plugins.push(piePlugin);
     }

x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts

@@ -6,7 +6,6 @@
 
 // This bit of hackiness is required because this isn't part of the main kibana bundle
 import 'jquery';
-import '../../lib/flot-charts';
 
 import { debounce, includes } from 'lodash';
 import { RendererStrings } from '../../../i18n';
@@ -18,7 +17,10 @@ import { text } from './plugins/text';
 
 const { plot: strings } = RendererStrings;
 
-const render: RendererSpec<any>['render'] = (domNode, config, handlers) => {
+const render: RendererSpec<any>['render'] = async (domNode, config, handlers) => {
+  // @ts-expect-error
+  await import('../../lib/flot-charts');
+
   // TODO: OH NOES
   if (!includes($.plot.plugins, size)) {
     $.plot.plugins.push(size);

x-pack/plugins/canvas/common/lib/index.ts

@@ -20,8 +20,6 @@ export * from './get_colors_from_palette';
 export * from './get_field_type';
 // @ts-expect-error missing local definition
 export * from './get_legend_config';
-// @ts-expect-error missing local definition
-export * from './handlebars';
 export * from './hex_to_rgb';
 export * from './httpurl';
 export * from './missing_asset';