remove angular dependency on ResizeChecker (#16191) (#16251)

src/core_plugins/console/public/src/controllers/sense_controller.js

@@ -1,5 +1,5 @@
 import 'ui/doc_title';
-import { useResizeCheckerProvider } from '../sense_editor_resize';
+import { useResizeChecker } from '../sense_editor_resize';
 import $ from 'jquery';
 import { initializeInput } from '../input';
 import { initializeOutput } from '../output';
@@ -9,8 +9,6 @@ import { SenseTopNavController } from './sense_top_nav_controller';
 const module = require('ui/modules').get('app/sense');
 
 module.run(function (Private, $rootScope) {
-  const useResizeChecker = Private(useResizeCheckerProvider);
-
   module.setupResizeCheckerForRootEditors = ($el, ...editors) => {
     return useResizeChecker($rootScope, $el, ...editors);
   };

src/core_plugins/console/public/src/directives/sense_help_example.js

@@ -1,12 +1,10 @@
 const SenseEditor = require('../sense_editor/editor');
 const exampleText = require('raw-loader!./helpExample.txt').trim();
-import { useResizeCheckerProvider } from '../sense_editor_resize';
+import { useResizeChecker } from '../sense_editor_resize';
 
 require('ui/modules')
 .get('app/sense')
-.directive('senseHelpExample', function (Private) {
-  const useResizeChecker = Private(useResizeCheckerProvider);
-
+.directive('senseHelpExample', function () {
   return {
     restrict: 'E',
     link: function ($scope, $el) {

src/core_plugins/console/public/src/directives/sense_history_viewer.js

@@ -1,11 +1,9 @@
 let SenseEditor = require('../sense_editor/editor');
-import { useResizeCheckerProvider } from '../sense_editor_resize';
+import { useResizeChecker } from '../sense_editor_resize';
 
 require('ui/modules')
 .get('app/sense')
-.directive('senseHistoryViewer', function (Private) {
-  const useResizeChecker = Private(useResizeCheckerProvider);
-
+.directive('senseHistoryViewer', function () {
   return {
     restrict: 'E',
     scope: {

src/core_plugins/console/public/src/sense_editor_resize.js

@@ -1,11 +1,7 @@
-import { ResizeCheckerProvider } from 'ui/resize_checker'
+import { ResizeChecker } from 'ui/resize_checker'
 
-export function useResizeCheckerProvider(Private) {
-  const ResizeChecker = Private(ResizeCheckerProvider);
-
-  return function useResizeChecker($scope, $el, ...editors) {
-    const checker = new ResizeChecker($el);
-    checker.on('resize', () => editors.forEach(e => e.resize()));
-    $scope.$on('$destroy', () => checker.destroy())
-  }
+export function useResizeChecker($scope, $el, ...editors) {
+  const checker = new ResizeChecker($el);
+  checker.on('resize', () => editors.forEach(e => e.resize()));
+  $scope.$on('$destroy', () => checker.destroy())
 }

src/ui/public/resize_checker/__tests__/resize_checker.js

@@ -4,10 +4,10 @@ import expect from 'expect.js';
 import sinon from 'sinon';
 
 import ngMock from 'ng_mock';
-import { EventsProvider } from 'ui/events';
 import NoDigestPromises from 'test_utils/no_digest_promises';
 
-import { ResizeCheckerProvider } from '../resize_checker';
+import { ResizeChecker } from '../resize_checker';
+import EventEmitter from 'events';
 
 describe('Resize Checker', () => {
   NoDigestPromises.activateForSuite();
@@ -16,11 +16,8 @@ describe('Resize Checker', () => {
   let setup;
 
   beforeEach(ngMock.module('kibana'));
-  beforeEach(ngMock.inject(($injector) => {
+  beforeEach(() => {
     setup = () => {
-      const Private = $injector.get('Private');
-      const ResizeChecker = Private(ResizeCheckerProvider);
-      const EventEmitter = Private(EventsProvider);
 
       const createEl = () => {
         const el = $('<div>').appendTo('body').get(0);
@@ -41,9 +38,9 @@ describe('Resize Checker', () => {
         return listener;
       };
 
-      return { EventEmitter, createEl, createChecker, createListener, ResizeChecker };
+      return { createEl, createChecker, createListener };
     };
-  }));
+  });
 
   afterEach(() => {
     teardown.splice(0).forEach(fn => {
@@ -61,7 +58,7 @@ describe('Resize Checker', () => {
 
   describe('events', () => {
     it('is an event emitter', () => {
-      const { createEl, createChecker, EventEmitter } = setup();
+      const { createEl, createChecker } = setup();
 
       const checker = createChecker(createEl());
       expect(checker).to.be.a(EventEmitter);
@@ -84,7 +81,7 @@ describe('Resize Checker', () => {
 
   describe('enable/disabled state', () => {
     it('should not trigger events while disabled', async () => {
-      const { createEl, createListener, ResizeChecker } = setup();
+      const { createEl, createListener } = setup();
 
       const el = createEl();
       const checker = new ResizeChecker(el, { disabled: true });
@@ -98,7 +95,7 @@ describe('Resize Checker', () => {
     });
 
     it('should trigger resize events after calling enable', async () => {
-      const { createEl, createListener, ResizeChecker } = setup();
+      const { createEl, createListener } = setup();
 
       const el = createEl();
       const checker = new ResizeChecker(el, { disabled: true });
@@ -113,7 +110,7 @@ describe('Resize Checker', () => {
     });
 
     it('should not trigger the first time after enable when the size does not change', async () => {
-      const { createEl, createListener, ResizeChecker } = setup();
+      const { createEl, createListener } = setup();
 
       const el = createEl();
       const checker = new ResizeChecker(el, { disabled: true });

src/ui/public/resize_checker/index.js

@@ -1 +1 @@
-export { ResizeCheckerProvider } from './resize_checker';
+export { ResizeChecker } from './resize_checker';

src/ui/public/resize_checker/resize_checker.js

@@ -1,104 +1,97 @@
 import $ from 'jquery';
 import ResizeObserver from 'resize-observer-polyfill';
 import { isEqual } from 'lodash';
+import EventEmitter from 'events';
 
-import { EventsProvider } from 'ui/events';
 
-export function ResizeCheckerProvider(Private) {
-  const EventEmitter = Private(EventsProvider);
+function validateElArg(el) {
+  // the ResizeChecker historically accepted jquery elements,
+  // so we wrap in jQuery then extract the element
+  const $el = $(el);
 
-  function validateElArg(el) {
-    // the ResizeChecker historically accepted jquery elements,
-    // so we wrap in jQuery then extract the element
-    const $el = $(el);
-
-    if ($el.length !== 1) {
-      throw new TypeError('ResizeChecker must be constructed with a single DOM element.');
-    }
-
-    return $el.get(0);
+  if ($el.length !== 1) {
+    throw new TypeError('ResizeChecker must be constructed with a single DOM element.');
   }
 
-  function getSize(el) {
-    return [el.clientWidth, el.clientHeight];
+  return $el.get(0);
+}
+
+function getSize(el) {
+  return [el.clientWidth, el.clientHeight];
+}
+
+/**
+ *  ResizeChecker receives an element and emits a "resize" event every time it changes size.
+ */
+export class ResizeChecker extends EventEmitter {
+  constructor(el, args = {}) {
+    super();
+
+    this._el = validateElArg(el);
+
+    this._observer = new ResizeObserver(() => {
+      if (this._expectedSize) {
+        const sameSize = isEqual(getSize(this._el), this._expectedSize);
+        this._expectedSize = null;
+
+        if (sameSize) {
+          // don't trigger resize notification if the size is what we expect
+          return;
+        }
+      }
+
+      this.emit('resize');
+    });
+
+    // Only enable the checker immediately if args.disabled wasn't set to true
+    if (!args.disabled) {
+      this.enable();
+    }
+  }
+
+  enable() {
+    if (this._destroyed) {
+      // Don't allow enabling an already destroyed resize checker
+      return;
+    }
+    // the width and height of the element that we expect to see
+    // on the next resize notification. If it matches the size at
+    // the time of starting observing then it we will be ignored.
+    this._expectedSize = getSize(this._el);
+    this._observer.observe(this._el);
   }
 
   /**
-   *  ResizeChecker receives an element and emits a "resize"
-   *  event every time it changes size. Used by the vislib to re-render
-   *  visualizations on resize as well as the console for the
-   *  same reason, but for the editors.
+   *  Run a function and ignore all resizes that occur
+   *  while it's running.
+   *
+   *  @return {undefined}
    */
-  return class ResizeChecker extends EventEmitter {
-    constructor(el, args = {}) {
-      super();
-
-      this._el = validateElArg(el);
-
-      this._observer = new ResizeObserver(() => {
-        if (this._expectedSize) {
-          const sameSize = isEqual(getSize(this._el), this._expectedSize);
-          this._expectedSize = null;
-
-          if (sameSize) {
-            // don't trigger resize notification if the size is what we expect
-            return;
-          }
-        }
-
-        this.emit('resize');
-      });
-
-      // Only enable the checker immediately if args.disabled wasn't set to true
-      if (!args.disabled) {
-        this.enable();
-      }
-    }
-
-    enable() {
-      if (this._destroyed) {
-        // Don't allow enabling an already destroyed resize checker
-        return;
-      }
-      // the width and height of the element that we expect to see
-      // on the next resize notification. If it matches the size at
-      // the time of starting observing then it we will be ignored.
+  modifySizeWithoutTriggeringResize(block) {
+    try {
+      block();
+    } finally {
       this._expectedSize = getSize(this._el);
-      this._observer.observe(this._el);
     }
+  }
 
-    /**
-     *  Run a function and ignore all resizes that occur
-     *  while it's running.
-     *
-     *  @return {undefined}
-     */
-    modifySizeWithoutTriggeringResize(block) {
-      try {
-        block();
-      } finally {
-        this._expectedSize = getSize(this._el);
-      }
-    }
+  /**
+  * Tell the ResizeChecker to shutdown, stop listenings, and never
+  * emit another resize event.
+  *
+  * Cleans up it's listeners and timers.
+  *
+  * @method destroy
+  * @return {void}
+  */
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
 
-    /**
-    * Tell the ResizeChecker to shutdown, stop listenings, and never
-    * emit another resize event.
-    *
-    * Cleans up it's listeners and timers.
-    *
-    * @method destroy
-    * @return {void}
-    */
-    destroy() {
-      if (this._destroyed) return;
-      this._destroyed = true;
-
-      this._observer.disconnect();
-      this._observer = null;
-      this._expectedSize = null;
-      this._el = null;
-      this.removeAllListeners();
-    }
-  };
+    this._observer.disconnect();
+    this._observer = null;
+    this._expectedSize = null;
+    this._el = null;
+    this.removeAllListeners();
+  }
 }

src/ui/public/visualize/visualization.js

@@ -4,7 +4,7 @@ import 'ui/visualize/visualize.less';
 import 'ui/visualize/visualize_legend';
 import _ from 'lodash';
 import { uiModules } from 'ui/modules';
-import { ResizeCheckerProvider } from 'ui/resize_checker';
+import { ResizeChecker } from 'ui/resize_checker';
 import visualizationTemplate from 'ui/visualize/visualization.html';
 import { getUpdateStatus } from 'ui/vis/update_status';
 import 'angular-sanitize';
@@ -13,7 +13,6 @@ import { dispatchRenderComplete, dispatchRenderStart } from 'ui/render_complete'
 uiModules
   .get('kibana/directive', ['ngSanitize'])
   .directive('visualization', function ($timeout, Notifier, SavedVis, indexPatterns, Private, config) {
-    const ResizeChecker = Private(ResizeCheckerProvider);
 
     return {
       restrict: 'E',

src/ui/public/visualize/visualize.js

@@ -8,9 +8,7 @@ import 'angular-sanitize';
 import './visualization';
 import './visualization_editor';
 import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter';
-
-import { ResizeCheckerProvider } from 'ui/resize_checker';
-
+import { ResizeChecker } from 'ui/resize_checker';
 
 import {
   isTermSizeZeroError,
@@ -23,7 +21,6 @@ uiModules
     const requestHandlers = Private(VisRequestHandlersRegistryProvider);
     const responseHandlers = Private(VisResponseHandlersRegistryProvider);
     const queryFilter = Private(FilterBarQueryFilterProvider);
-    const ResizeChecker = Private(ResizeCheckerProvider);
 
     function getHandler(from, name) {
       if (typeof name === 'function') return name;