[Canvas] Expression events.

[Kuznietsov]

Overview

---

This PR was written to clean up usage of expression renderer handlers.

---

After a short investigation, I've realized, that there is no way to remove some custom handlers of a plugin, where the renderer is executing and decided to write an extendable and flexible way of emitting and binding listeners on events. Right now, every expression_* plugin will need to defined emitters it is listening to as a type (only custom, resize, for example). They will appear as available keywords for event field in on(event, fn) method. If a plugin, which is executing a renderer will not have such emitter at its own handlers, it will be just ignored.

At this PR I've separated emitting and listening to events. As if at the further PRs, related to Expressions extracting, will contain a lot of code, rewritten from legacy on[Something](...) to event({ name: ..., data: ... }), I've decided to separate listeners and emitters of events to prevent spreading unclear code over the further plugins.

It is providing new pattern of listening and emitting events:
on(event, fn) - binding listener;
event({ name, data }) - emitting event.

A new type has been provided:
InterpreterRenderHandlers<Emitters> - describes all emitters, which exist in handlers, Emitters are optional and enable extending some custom emitters of the platform.

A new function has been provided:
getDefaultHandlers<T = {}> (): InterpreterRenderHandlers<T> - method, which creates object of handlers with all necessary emitters and listeners, specific to the place of executing. The object it returns contains on(...) method, which can bind listeners to all events, specified at T type and part of events from IInterpreterRenderHandlers interface.

---

Example of usage

---

Imports:

import { getDefaultHandlers, InterpreterRenderHandlers } from 'src/plugins/expressions';

---

Definition in plugin which is rendering:

interface RenderEmitters {
  resize: (_size: { height: number; width: number }) => boolean | void;
}
const createHandlers = () => {
  const defaultHandlers = getDefaultHandlers<RenderEmitters>();
  const handlers: Partial<typeof defaultHandlers> = {
    ...defaultHandlers,
    ... any other rewritten method,
    resize(_size: { height: number; width: number }) {...},
  };
  return Object.assign(defaultHandlers, handlers);
}

---

Definition in expression_* plugin:

export interface HandlerEmitters {
  resize?: (size: { height: number; width: number }) => void;
}

export const someRenderer = (): ExpressionRenderDefinition<SomeConfig> => ({
  name:  ...,
  displayName: ...,
  help:  ...,
  reuseDomNode:  ...,
  render: async (
    domNode: HTMLElement,
    config:  ...,
    handlers: InterpreterRenderHandlers<HandlerEmitters>
  ) => {
    render(
      <I18nProvider>
        <RendererComponent handlers={handlers} {...config} parentNode={domNode} />
      </I18nProvider>,
      domNode
    );
  },
});

---

And binding listener in Component:

handlers.on('resize', someFunction);

---

As a nice bonus, dynamical autosuggestions

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9ccb8f6
• Storybooks Preview
• Documentation Changes

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
canvas	1090	1078	-12
expressionRevealImage	-	33	+33
expressions	159	160	+1
presentationUtil	102	117	+15
total			+37

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
expressionRevealImage	-	6	+6
expressions	1534	1545	+11
presentationUtil	121	145	+24
total			+41

Any counts in public APIs

Total count of every any typed public API. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats any for more detailed information.

id	before	after	diff
expressions	58	61	+3
presentationUtil	1	3	+2
total			+5

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
canvas	1.3MB	1.3MB	+1.0KB
expressionRevealImage	-	2.9KB	+2.9KB
total			+3.9KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
expressionRevealImage	-	3	+3

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
canvas	532.1KB	499.7KB	-32.3KB
expressionRevealImage	-	19.0KB	+19.0KB
expressions	210.2KB	211.0KB	+874.0B
presentationUtil	43.9KB	74.7KB	+30.8KB
savedObjects	52.4KB	52.3KB	-101.0B
total			+18.2KB

Unknown metric groups

API count

id	before	after	diff
expressionRevealImage	-	6	+6
expressions	1962	1973	+11
presentationUtil	125	149	+24
total			+41

async chunk count

id	before	after	diff
expressionRevealImage	-	1	+1

History

• 💔 Build #133240 failed 7c95c90
• 💛 Build #133101 was flaky fb655d0
• 💚 Build #133076 succeeded 8613a24
• 💚 Build #133034 succeeded 5520b09
• 💔 Build #132758 failed 6ae56c9

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @Kunzetsov