Options
All
  • Public
  • Public/Protected
  • All
Menu

Imagine the following: Your component needs outside connections, either to listen for DOM events, other libraries, hooks into a promise chain, registers a callback, you get the gist. But what if your component gets destroyed? You have to unbind all event listeners, decouple all callbacks, cancel all timeouts and intervals. Have you ever tried to "un-register" a then() in a promise chain? Did you ever forget one a single listener that lead to a memory leak?

Not anymore, I tell you! Behold the sparkling new ComponentProxy-2000 and enter the world of proxying everything your component does with the outside world.

It's so simple: 1. Create a proxy instance inside your component. 2. supply it the component's instance, so the proxy knows it's "this". 3. start registering events, timeouts and intervals by proxy!

When your component reaches the end of its lifecycle call the proxy.destroy() method and the proxy will do all the unbinding for you, cleaning up all the junk with one simple call.

Hierarchy

  • ComponentProxy

Index

Constructors

constructor

Properties

Protected asyncWrapper

Allows to call a wrapper function every time a async function is triggered. This allows advanced setups when you work with state management libraries like mobx. You could, for example wrapp all calls through the proxy in a runInAction() wrap.

see

https://mobx.js.org/actions.html#asynchronous-actions

Protected events

events: Map<ComponentProxyEventTarget, Map<string, Map<ComponentProxyListener, Function>>>

The list of all registered event listeners and their matching proxy functions by the target and event name

Protected intervals

intervals: number[]

Contains the list of all intervals that are bound on this block

Protected lives

lives: boolean

False if this instance was destroyed

Protected Optional mutationEmitter

mutationEmitter: EventEmitter

The internal event emitter to handle mutation events

Protected Optional mutationObservers

mutationObservers: Map<ComponentProxyEventTarget, MutationObserver>

The list of registered mutation observers by their target objects

Protected thisContext

thisContext: any

The component which is used as this context inside the proxy instance

Protected timeouts

timeouts: number[]

Contains the list of all timeouts that are bound on this block

Methods

Protected _unbind

Protected _unbindAll

  • _unbindAll(): void

bind

  • Binds a given listener to a certain event

    Parameters

    • target: ComponentProxyEventTarget

      The target to bind the listener to. Either a html element, the document or the EventBus class

    • event: string

      The name of the event to bind the listener to. If you use "@mutation" a MutationObserver will track any changes of the dom and call the listener on it

    • listener: ComponentProxyListener

      The listener which is called when the event is emitted on the given target

    • Optional priority: number

      Default: 0, the lower the number, the earlier the execution. May be a negative value! Note: This only works for event emitters and the event bus. @todo add html event listener options like passive and capture!

    Returns ComponentProxy

callbackProxy

  • callbackProxy<T>(callback: T): T
  • Wrap all callbacks to the outside world with this method so you can be sure there won't be issues even if your component is destroyed before the outside function finishes outsideFunction(proxy.callbackProxy((...args) => console.log(args)));

    Type parameters

    • T = Function

    Parameters

    • callback: T

    Returns T

clearInterval

  • clearInterval(id: number): void

clearTimeout

  • clearTimeout(id: number): void

destroy

  • Call this method when your component is destroyed. The proxy will then unbind all events, timeouts, intervals and block all promises which could lead to errors or memory leaks

    Returns ComponentProxy

emit

  • Emits a given event which has the option to pass additional arguments.

    Parameters

    • target: ComponentProxyEventTarget

      The target to trigger the event on. Either a html element, the document or the EventBus class

    • event: string

      The name of the event to emit

    • Optional args: PlainObject<any>

      An object of arguments which then are transferred to e.args in your callback

    Returns ComponentProxy

emitHook

  • Emits a given hook to process the given arguments

    see

    EventEmitter.emitHook()

    Parameters

    • target: ComponentProxyHookTarget

      The target to trigger the event on. Either a EventBus, EventEmitter or storage object

    • event: string

      The name of the hook to emit

    • args: PlainObject<any>

      An object of arguments which then are transferred to e.args in your callbacks

    Returns Promise<PlainObject<any>>

isDestroyed

  • isDestroyed(): boolean

promiseProxy

  • promiseProxy(): Function
  • This helper can be used in a promise chain Promise().then(this.promiseProxy()).then(...) This makes sure that even if the current block is destroyed the chained functions will not be executed and may break stuff.

    Returns Function

setInterval

  • setInterval(handler: (...args: any[]) => void, timeout: number): number
  • setInterval(handler: (...args: any[]) => void, timeout?: any, ...args: any[]): number
  • Registers a handler to run in a specified interval. The interval will automatically be stopped when the block is destroyed

    Parameters

    • handler: (...args: any[]) => void
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    • timeout: number

    Returns number

  • Registers a handler to run in a specified interval. The interval will automatically be stopped when the block is destroyed

    Parameters

    • handler: (...args: any[]) => void
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    • Optional timeout: any
    • Rest ...args: any[]

    Returns number

setTimeout

  • setTimeout(handler: (...args: any[]) => void, timeout: number): number
  • setTimeout(handler: (...args: any[]) => void, timeout?: any, ...args: any[]): number
  • Registers a timeout to run after a specified timespan. The timout will automatically be stopped when the block is destroyed

    Parameters

    • handler: (...args: any[]) => void
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    • timeout: number

    Returns number

  • Registers a timeout to run after a specified timespan. The timout will automatically be stopped when the block is destroyed

    Parameters

    • handler: (...args: any[]) => void
        • (...args: any[]): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    • Optional timeout: any
    • Rest ...args: any[]

    Returns number

unbind

  • Removes a given listener from a certain event

    todo

    add html event listener options like passive and capture!

    todo

    While addEventListener() will let you add the same listener more than once for the same type if the options are different, the only option removeEventListener() checks is the capture/useCapture flag. Its value must match for removeEventListener() to match, but the other values don't.

    Parameters

    • target: ComponentProxyEventTarget

      The target to unbind the listener from. Either a html element, the document or the EventBus class

    • event: string

      The event to unbind or @mutation if a mutation observer is used

    • listener: ComponentProxyListener

      The listener which should be unbound for the given event

    Returns ComponentProxy

unbindAll

Generated using TypeDoc