Plugin methods

packages/library/src/base/plugin.test.ts

@@ -0,0 +1,63 @@
+import { Component } from './component'
+import { Plugin, PluginAPI } from './plugin'
+
+it('Calls plugin for registration', () => {
+  const p = new Plugin()
+  const spy = jest.spyOn(p, 'handle')
+  const c = new Component({ id: 'c', plugins: [p] })
+
+  expect(spy).toHaveBeenCalledTimes(1)
+  expect(spy).toHaveBeenCalledWith(c, 'plugin:add')
+})
+
+it('Calls plugin handle method on component event', () => {
+  const p = new Plugin()
+  const spy = jest.spyOn(p, 'handle')
+  const c = new Component({ id: 'c', plugins: [p] })
+
+  c.internals.emitter.trigger('foo', 'bar')
+
+  expect(spy).toHaveBeenCalledTimes(2)
+  expect(spy).toHaveBeenLastCalledWith(c, 'foo', 'bar')
+})
+
+it('Default plugin calls handler methods by name', () => {
+  const p = new Plugin()
+
+  const spyHandle = jest.spyOn(p, 'handle')
+  //@ts-ignore
+  p.onPluginAdd = () => {}
+  //@ts-ignore
+  const spyPluginAdd = jest.spyOn(p, 'onPluginAdd')
+  //@ts-ignore
+  p.onFoo = () => {}
+  //@ts-ignore
+  const spyFoo = jest.spyOn(p, 'onFoo')
+
+  const c = new Component({ id: 'c', plugins: [p] })
+  expect(spyHandle).toHaveBeenCalledTimes(1)
+  expect(spyPluginAdd).toHaveBeenCalledTimes(1)
+  expect(spyPluginAdd).toHaveBeenLastCalledWith(c)
+
+  c.internals.emitter.trigger('foo', 'bar')
+  expect(spyHandle).toHaveBeenCalledTimes(2)
+  expect(spyFoo).toHaveBeenCalledTimes(1)
+  expect(spyFoo).toHaveBeenLastCalledWith(c, 'bar')
+})
+
+it('Calls plugin handler with appropriate context', () => {
+  const p = new Plugin()
+  const c = new Component({ id: 'c', plugins: [p] })
+
+  let context = undefined
+
+  //@ts-ignore
+  p.onFoo = function () {
+    context = this
+  }
+  //@ts-ignore
+  const spy = jest.spyOn(p, 'onFoo')
+  c.internals.emitter.trigger('foo', 'bar')
+
+  expect(context).toEqual(p)
+})

packages/library/src/base/plugin.ts

@@ -1,13 +1,23 @@
 import { without } from 'lodash'
 import { Component } from './component'
+import { getEventMethodName } from './util/eventName'
 
 type PluginEvent = 'plugin:add' | 'plugin:remove'
 
-export class Plugin<C extends Component = Component, E = string> {
-  async handle(context: C, event: E | PluginEvent, data?: any) {}
+export class Plugin<
+  C extends Component = Component,
+  E extends string = string,
+> {
+  async handle(context: C, event: E | PluginEvent, ...params: any[]) {
+    //@ts-ignore Dynamic dispatch is too much for TS
+    this[getEventMethodName(event)]?.call(this, context, ...params)
+  }
 }
 
-export class PluginAPI<C extends Component = Component, E = string> {
+export class PluginAPI<
+  C extends Component = Component,
+  E extends string = string,
+> {
   plugins: Array<Plugin<C, E>>
   context: C
 
@@ -33,9 +43,9 @@ export class PluginAPI<C extends Component = Component, E = string> {
     this.plugins = without(this.plugins, plugin)
   }
 
-  async handle(event: E, data: any) {
+  async handle(event: E, ...data: any[]) {
     await Promise.all(
-      this.plugins.map(p => p.handle(this.context, event, data)),
+      this.plugins.map(p => p.handle(this.context, event, ...data)),
     )
   }
 }

packages/library/src/base/util/emitter.ts

@@ -2,6 +2,8 @@
 // by Jason Miller, see https://github.com/developit/mitt .
 // Any mistakes, of course, are entirely my own.
 
+import { getEventMethodName } from './eventName'
+
 export type EventHandler = (...payload: any[]) => void
 type WildCardEventHandler<T> = (event: T, ...payload: any[]) => void
 
@@ -21,15 +23,6 @@ export type EmitterOptions = {
   context?: object
 }
 
-// Event name splitter functions
-const splitter = /(^|:)(\w)/gi
-const getEventName = function (_m: string, _pre: string, eventName: string) {
-  return eventName.toUpperCase()
-}
-const getMethodName = function (event: string) {
-  return `on${event.replace(splitter, getEventName)}`
-}
-
 export class Emitter<T extends string = string> {
   id?: string
   options: EmitterOptions
@@ -52,7 +45,7 @@ export class Emitter<T extends string = string> {
     }
 
     // Trigger local method, if available
-    const methodName = getMethodName(event)
+    const methodName = getEventMethodName(event)
     const method = (this.#context as any)[methodName]
     if (method && typeof method === 'function') {
       await method.apply(this.#context, payload)

packages/library/src/base/util/eventName.test.ts

@@ -0,0 +1,9 @@
+import { getEventMethodName } from './eventName'
+
+it('Generates basic method names', () => {
+  expect(getEventMethodName('foo')).toBe('onFoo')
+})
+
+it('Handles split method names', () => {
+  expect(getEventMethodName('foo:bar')).toBe('onFooBar')
+})

packages/library/src/base/util/eventName.ts

@@ -0,0 +1,7 @@
+// Event name splitter functions
+const splitter = /(^|:)(\w)/gi
+const getEventName = (_m: string, _pre: string, eventName: string) =>
+  eventName.toUpperCase()
+
+export const getEventMethodName = (event: string) =>
+  `on${event.replace(splitter, getEventName)}`