lazy load redux embeddable tools to reduce bundle size

src/plugins/controls/public/control_group/embeddable/control_group_container.tsx

@@ -22,8 +22,8 @@ import { EMPTY, merge, pipe, Subject, Subscription } from 'rxjs';
 import { EuiContextMenuPanel } from '@elastic/eui';
 
 import {
+  ReduxEmbeddablePackage,
   ReduxEmbeddableTools,
-  createReduxEmbeddableTools,
   SolutionToolbarPopover,
 } from '@kbn/presentation-util-plugin/public';
 import { OverlayRef } from '@kbn/core/public';
@@ -160,7 +160,11 @@ export class ControlGroupContainer extends Container<
     );
   };
 
-  constructor(initialInput: ControlGroupInput, parent?: Container) {
+  constructor(
+    reduxEmbeddablePackage: ReduxEmbeddablePackage,
+    initialInput: ControlGroupInput,
+    parent?: Container
+  ) {
     super(
       initialInput,
       { dataViewIds: [], loading: false, embeddableLoaded: {}, filters: [] },
@@ -172,7 +176,7 @@ export class ControlGroupContainer extends Container<
     this.recalculateFilters$ = new Subject();
 
     // build redux embeddable tools
-    this.reduxEmbeddableTools = createReduxEmbeddableTools<
+    this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools<
       ControlGroupReduxState,
       typeof controlGroupReducers
     >({

src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts

@@ -15,6 +15,7 @@
  */
 
 import { Container, EmbeddableFactoryDefinition } from '@kbn/embeddable-plugin/public';
+import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
 import { EmbeddablePersistableStateService } from '@kbn/embeddable-plugin/common';
 
 import { ControlGroupInput, CONTROL_GROUP_TYPE } from '../types';
@@ -47,7 +48,8 @@ export class ControlGroupContainerFactory implements EmbeddableFactoryDefinition
   }
 
   public create = async (initialInput: ControlGroupInput, parent?: Container) => {
+    const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage();
     const { ControlGroupContainer } = await import('./control_group_container');
-    return new ControlGroupContainer(initialInput, parent);
+    return new ControlGroupContainer(reduxEmbeddablePackage, initialInput, parent);
   };
 }

src/plugins/controls/public/control_types/options_list/options_list_embeddable.tsx

@@ -21,10 +21,7 @@ import {
   buildPhrasesFilter,
   COMPARE_ALL_OPTIONS,
 } from '@kbn/es-query';
-import {
-  createReduxEmbeddableTools,
-  ReduxEmbeddableTools,
-} from '@kbn/presentation-util-plugin/public';
+import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
 import { DataView } from '@kbn/data-views-plugin/public';
 import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
@@ -87,7 +84,12 @@ export class OptionsListEmbeddable extends Embeddable<OptionsListEmbeddableInput
     typeof optionsListReducers
   >;
 
-  constructor(input: OptionsListEmbeddableInput, output: ControlOutput, parent?: IContainer) {
+  constructor(
+    reduxEmbeddablePackage: ReduxEmbeddablePackage,
+    input: OptionsListEmbeddableInput,
+    output: ControlOutput,
+    parent?: IContainer
+  ) {
     super(input, output, parent);
 
     // Destructure controls services
@@ -97,7 +99,7 @@ export class OptionsListEmbeddable extends Embeddable<OptionsListEmbeddableInput
     this.typeaheadSubject = new Subject<string>();
 
     // build redux embeddable tools
-    this.reduxEmbeddableTools = createReduxEmbeddableTools<
+    this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools<
       OptionsListReduxState,
       typeof optionsListReducers
     >({

src/plugins/controls/public/control_types/options_list/options_list_embeddable_factory.tsx

@@ -8,7 +8,9 @@
 
 import deepEqual from 'fast-deep-equal';
 
+import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
 import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public';
+
 import { OptionsListEditorOptions } from './options_list_editor_options';
 import { ControlEmbeddable, DataControlField, IEditableControlFactory } from '../../types';
 import { OptionsListEmbeddableInput, OPTIONS_LIST_CONTROL } from './types';
@@ -27,8 +29,11 @@ export class OptionsListEmbeddableFactory
   constructor() {}
 
   public async create(initialInput: OptionsListEmbeddableInput, parent?: IContainer) {
+    const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage();
     const { OptionsListEmbeddable } = await import('./options_list_embeddable');
-    return Promise.resolve(new OptionsListEmbeddable(initialInput, {}, parent));
+    return Promise.resolve(
+      new OptionsListEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent)
+    );
   }
 
   public presaveTransformFunction = (

src/plugins/controls/public/control_types/range_slider/range_slider_embeddable.tsx

@@ -23,10 +23,7 @@ import deepEqual from 'fast-deep-equal';
 import { Subscription, lastValueFrom } from 'rxjs';
 import { debounceTime, distinctUntilChanged, skip, map } from 'rxjs/operators';
 
-import {
-  ReduxEmbeddableTools,
-  createReduxEmbeddableTools,
-} from '@kbn/presentation-util-plugin/public';
+import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
 import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
 import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
@@ -84,13 +81,18 @@ export class RangeSliderEmbeddable extends Embeddable<RangeSliderEmbeddableInput
     typeof rangeSliderReducers
   >;
 
-  constructor(input: RangeSliderEmbeddableInput, output: ControlOutput, parent?: IContainer) {
+  constructor(
+    reduxEmbeddablePackage: ReduxEmbeddablePackage,
+    input: RangeSliderEmbeddableInput,
+    output: ControlOutput,
+    parent?: IContainer
+  ) {
     super(input, output, parent); // get filters for initial output...
 
     // Destructure controls services
     ({ data: this.dataService, dataViews: this.dataViewsService } = pluginServices.getServices());
 
-    this.reduxEmbeddableTools = createReduxEmbeddableTools<
+    this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools<
       RangeSliderReduxState,
       typeof rangeSliderReducers
     >({

src/plugins/controls/public/control_types/range_slider/range_slider_embeddable_factory.tsx

@@ -9,6 +9,8 @@
 import deepEqual from 'fast-deep-equal';
 
 import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public';
+import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
+
 import { ControlEmbeddable, DataControlField, IEditableControlFactory } from '../../types';
 import { RangeSliderEmbeddableInput, RANGE_SLIDER_CONTROL } from './types';
 import {
@@ -26,8 +28,11 @@ export class RangeSliderEmbeddableFactory
   constructor() {}
 
   public async create(initialInput: RangeSliderEmbeddableInput, parent?: IContainer) {
+    const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage();
     const { RangeSliderEmbeddable } = await import('./range_slider_embeddable');
-    return Promise.resolve(new RangeSliderEmbeddable(initialInput, {}, parent));
+    return Promise.resolve(
+      new RangeSliderEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent)
+    );
   }
 
   public presaveTransformFunction = (

src/plugins/controls/public/control_types/time_slider/time_slider_embeddable.tsx

@@ -15,10 +15,7 @@ import { merge, Subscription, BehaviorSubject, Observable } from 'rxjs';
 import { map, distinctUntilChanged, skip, take, mergeMap } from 'rxjs/operators';
 
 import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
-import {
-  ReduxEmbeddableTools,
-  createReduxEmbeddableTools,
-} from '@kbn/presentation-util-plugin/public';
+import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
 import { DataView } from '@kbn/data-views-plugin/public';
 
 import { TimeSliderControlEmbeddableInput } from '../../../common/control_types/time_slider/types';
@@ -78,7 +75,12 @@ export class TimeSliderControlEmbeddable extends Embeddable<
     typeof timeSliderReducers
   >;
 
-  constructor(input: TimeSliderControlEmbeddableInput, output: ControlOutput, parent?: IContainer) {
+  constructor(
+    reduxEmbeddablePackage: ReduxEmbeddablePackage,
+    input: TimeSliderControlEmbeddableInput,
+    output: ControlOutput,
+    parent?: IContainer
+  ) {
     super(input, output, parent); // get filters for initial output...
 
     const {
@@ -96,7 +98,7 @@ export class TimeSliderControlEmbeddable extends Embeddable<
     this.internalOutput = {};
 
     // build redux embeddable tools
-    this.reduxEmbeddableTools = createReduxEmbeddableTools<
+    this.reduxEmbeddableTools = reduxEmbeddablePackage.createTools<
       TimeSliderReduxState,
       typeof timeSliderReducers
     >({

src/plugins/controls/public/control_types/time_slider/time_slider_embeddable_factory.tsx

@@ -8,7 +8,9 @@
 
 import deepEqual from 'fast-deep-equal';
 
+import { lazyLoadReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
 import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public';
+
 import { TIME_SLIDER_CONTROL } from '../..';
 import { ControlEmbeddable, DataControlField, IEditableControlFactory } from '../../types';
 import {
@@ -27,9 +29,12 @@ export class TimesliderEmbeddableFactory
   constructor() {}
 
   public async create(initialInput: TimeSliderControlEmbeddableInput, parent?: IContainer) {
+    const reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage();
     const { TimeSliderControlEmbeddable } = await import('./time_slider_embeddable');
 
-    return Promise.resolve(new TimeSliderControlEmbeddable(initialInput, {}, parent));
+    return Promise.resolve(
+      new TimeSliderControlEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent)
+    );
   }
 
   public presaveTransformFunction = (

src/plugins/presentation_util/public/index.ts

@@ -48,9 +48,10 @@ export {
 export {
   useReduxContainerContext,
   useReduxEmbeddableContext,
-  createReduxEmbeddableTools,
+  lazyLoadReduxEmbeddablePackage,
   type ReduxEmbeddableState,
   type ReduxEmbeddableTools,
+  type ReduxEmbeddablePackage,
 } from './redux_embeddables';
 
 export * from './components/types';

src/plugins/presentation_util/public/redux_embeddables/index.ts

@@ -6,11 +6,18 @@
  * Side Public License, v 1.
  */
 
+import { ReduxEmbeddablePackage } from './types';
+
 export {
   useReduxContainerContext,
   useReduxEmbeddableContext,
 } from './use_redux_embeddable_context';
 
-export { createReduxEmbeddableTools } from './create_redux_embeddable_tools';
+export type { ReduxEmbeddableState, ReduxEmbeddableTools, ReduxEmbeddablePackage } from './types';
 
-export type { ReduxEmbeddableState, ReduxEmbeddableTools } from './types';
+export const lazyLoadReduxEmbeddablePackage = async (): Promise<ReduxEmbeddablePackage> => {
+  const { createReduxEmbeddableTools } = await import('./create_redux_embeddable_tools');
+  return {
+    createTools: createReduxEmbeddableTools,
+  };
+};

src/plugins/presentation_util/public/redux_embeddables/types.ts

@@ -32,6 +32,13 @@ export interface ReduxEmbeddableSyncSettings<
   ) => boolean;
 }
 
+/**
+ * The package type is lazily exported from presentation_util and should contain all methods needed to use the redux embeddable tools.
+ */
+export interface ReduxEmbeddablePackage {
+  createTools: typeof import('./create_redux_embeddable_tools')['createReduxEmbeddableTools'];
+}
+
 /**
  * The return type from setupReduxEmbeddable. Contains a wrapper which comes with the store provider and provides the context to react components,
  * but also returns the context object to allow the embeddable class to interact with the redux store.