Recognizeable

const instance = new Recognizeable(
  [],
  {
    effects: {
      click: ...,
      intersect: ...,
      message: ...,
    }
  }
)

const instance = new Recognizeable(
  [],
  {
    effects: {
      click: (mouseEvent, effectApi) => {
        ...
      },
      intersect: (intersectionObserverEntry, effectApi) => {
        ...
      },
      message: (messageEvent, effectApi) => {
        ...
      },
    }
  }
)

const instance = new Recognizeable(
  [],
  {
    effects: {
      click: (event, effectApi) => {
        const { getMetadata, recognized } = effectApi,
              metadata = getMetadata(),
              { clientX, clientY } = event

        metadata.lastClickPosition = {
          x: clientX,
          y: clientY,
        }

        if (metadata.lastClickPosition.x === 420 && metadata.lastClickPosition.y === 420) {
          recognized()
        }
      },
      intersect: effectApi => ...,
      message: effectApi => ...,
    }
  }
)

// Pass a union type to `Recognizeable`'s first generic type
// to tell the instance what types of events it's allowed to
// recognize. Any valid `Listenable` event type is supported.
//
// Use the second generic type to define the shape of the 
// instance's `metadata` property.
type MyTypes = 'mousedown' | 'intersect' | 'message'
type MyMetadata = {
  x: number,
  y: number,
}
const instance = new Recognizeable<MyTypes, MyMetadata>(
  // This sequence will automatically have a type of:
  // (MouseEvent | IntersectionObserverEntry[] | MessageEvent)[]
  [],
  {
    effects: {
      mousedown: (sequenceItem, effectApi) => {
        // `sequenceItem` is correctly type checked and
        // autocompleted as a MouseEvent.
        console.log(sequenceItem)

        const metadata = effectApi.getMetadata()

        // TypeScript knows the shape of `metadata` here. It will
        // autocomplete `metadata` and allow you to do this
        // assignment.
        metadata.x = sequenceItem.clientX
        metadata.y = sequenceItem.clientY
      },
      intersect: (sequenceItem, effectApi) => {
        // `sequenceItem` is correctly type checked and
        // autocompleted as an array of Intersection Observer
        // entries.
        console.log(sequenceItem)
      },
      message: (sequenceItem, effectApi) => {
        // `sequenceItem` is correctly type checked and
        // autocompleted as a MessageEvent.
        console.log(sequenceItem)
      },
      // TypeScript will throw a type error here! `pointerdown`
      // is not included in the union we passed to the instance's
      // first generic type.
      pointerdown: (sequenceItem, effectApi) => {
        console.log(sequenceItem)
      },
    }
  }
)

// TypeScript will allow you to pass MouseEvents, MessageEvents,
// and IntersectionObserverEntry[] arrays to the `recognize` method.
instance.recognize(new MouseEvent('click'))
instance.recognize(new MessageEvent('message'))

// TypeScript will not allow you to pass other events.
// This will throw a type error!
instance.recognize(new TouchEvent('touchstart'))

// TypeScript knows the shape of `metadata`, and will type check
// this assignment.
const myVariable: number = instance.metadata.x

// Pass a union type to Listenable's first generic type
// to tell the instance what types of events it's allowed to
// listen for.
//
// Use Listenable's second generic type to define the shape of the 
// `metadata` for the Recognizeable instance that Listenable
// will construct internally.
type MyTypes = 'mousedown' | 'intersect' | 'message'
type MyMetadata = {
  x: number,
  y: number,
}
const instance = new Listenable<MyTypes, MyMetadata>(
  // Assert that the string 'recognizeable' is compatible with your
  // type union. This of course is not type safe, but it's a
  // small tradeoff that was made to simplify Listenable's inner
  // workings and public-facing API.
  'recognizeable' as MyTypes,
  {
    // Use options.recognizeable to pass your Recognizeable options
    recognizeable: {
      effects: {
        // Listenable and Recognizeable work together to provide
        // type checking for each individual side effect.
        mousedown: ...,
        intersect: ...,
        message: ...,
      }
    }
  }
)

instance.listen(() => {
  // In your Listenable.listen callbacks, you can access
  // Recognizeable metadata via your Listenable instance's
  // `recognizeable` property.
  //
  // Listenable.recognizeable.metadata will be aware of
  // the shape of your Recognizeable metadata, and it will
  // type check and autocomplete accordingly.
  const x: number = instance.recognizeable.metadata.x
})