feat(plugins): create plugin system that allows to extend SVGuitar wi…

…th arbitrary functionality

re #40

src/plugin.test.ts

@@ -0,0 +1,30 @@
+import { SVGuitarChord } from './svguitar'
+import { setUpSvgDom } from '../test/testutils'
+
+const document = setUpSvgDom()
+
+describe('SVGuitarChord Plugin', () => {
+  let container: HTMLElement
+
+  beforeEach(() => {
+    container = document.documentElement
+  })
+
+  test('should apply a basic plugin', () => {
+    // given
+    const spy = jest.fn()
+    function myFooPlugin(/* instance: SVGuitarChord */): { foo: jest.Mock } {
+      return {
+        foo: spy,
+      }
+    }
+
+    // when
+    const PluginTest = SVGuitarChord.plugin(myFooPlugin)
+    const withPlugin = new PluginTest(container)
+    withPlugin.foo()
+
+    // then
+    expect(spy).toHaveBeenCalledWith()
+  })
+})

src/plugin.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { SVGuitarChord } from './svguitar'
+
+export type ApiExtension = { [key: string]: any }
+
+export type Constructor<T> = new (...args: any[]) => T
+
+export type AnyFunction = (...args: any) => any
+
+/**
+ * @author https://stackoverflow.com/users/2887218/jcalz
+ * @see https://stackoverflow.com/a/50375286/10325032
+ */
+type UnionToIntersection<Union> = (Union extends any ? (argument: Union) => void : never) extends (
+  argument: infer Intersection,
+) => void // tslint:disable-line: no-unused
+  ? Intersection
+  : never
+
+export type ReturnTypeOf<T extends AnyFunction | AnyFunction[]> = T extends AnyFunction
+  ? ReturnType<T>
+  : T extends AnyFunction[]
+  ? UnionToIntersection<ReturnType<T[number]>>
+  : never
+
+export type SVGuitarPlugin = (instance: SVGuitarChord) => ApiExtension | undefined

test/svguitar.test.ts → src/svguitar.test.ts

@@ -1,5 +1,5 @@
-import { FretLabelPosition, Shape, SVGuitarChord } from '../src/svguitar'
-import { saveSvg, setUpSvgDom } from './testutils'
+import { FretLabelPosition, Shape, SVGuitarChord } from './svguitar'
+import { saveSvg, setUpSvgDom } from '../test/testutils'
 
 const document = setUpSvgDom()
 

src/svguitar.ts

@@ -1,7 +1,9 @@
+/* eslint-disable max-classes-per-file */
 import { QuerySelector } from '@svgdotjs/svg.js'
 import { range } from './utils'
 import { constants } from './constants'
 import { Alignment, GraphcisElement, Renderer, RoughJsRenderer, SvgJsRenderer } from './renderer'
+import { SVGuitarPlugin, Constructor, ReturnTypeOf } from './plugin'
 
 // Chord diagram input types (compatible with Vexchords input, see https://github.com/0xfe/vexchords)
 export type SilentString = 'x'
@@ -268,13 +270,37 @@ const defaultSettings: RequiredChordSettings = {
 }
 
 export class SVGuitarChord {
+  static plugins: SVGuitarPlugin[] = []
+
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  static plugin<
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    S extends Constructor<any> & { plugins: any[] },
+    T extends SVGuitarPlugin | SVGuitarPlugin[]
+  >(this: S, plugin: T) {
+    const currentPlugins = this.plugins
+
+    const BaseWithPlugins = class extends this {
+      static plugins = currentPlugins.concat(plugin)
+    }
+
+    return BaseWithPlugins as typeof BaseWithPlugins & Constructor<ReturnTypeOf<T>>
+  }
+
   private rendererInternal?: Renderer
 
   private settings: ChordSettings = {}
 
   private chordInternal: Chord = { fingers: [], barres: [] }
 
-  constructor(private container: QuerySelector | HTMLElement) {}
+  constructor(private container: QuerySelector | HTMLElement) {
+    // apply plugins
+    // https://stackoverflow.com/a/16345172
+    const classConstructor = this.constructor as typeof SVGuitarChord
+    classConstructor.plugins.forEach((plugin) => {
+      Object.assign(this, plugin(this))
+    })
+  }
 
   private get renderer(): Renderer {
     if (!this.rendererInternal) {