r3bl-ts-utils/src/tui-core/use-event-emitter.ts

The `r3bl-ts-utils` package is a set of useful TypeScript functions and classes that can be used in Node.js and browser environments. They are inspired by Kotlin stdlib, and Rust to write code as expressions rather than statements, colorized text, powerfu

/*
 * Copyright (c) 2022 R3BL LLC. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

import EventEmitter from "events"
import React, { useEffect } from "react"
import {
  _callIfTrue,
  _callIfTrueWithReturn,
  _callIfTruthy,
  _callIfTruthyWithReturn,
} from "../lang-utils/expression-lang-utils"
import { IsActive, NodeJsListenerFn } from "./nodejs-types"
import { SetState } from "./react-core-utils"
import { useStateSafely } from "./use-state-safely"

const DEBUG = false

/**
 * In React, emitters can't invoke callback functions that are part of a function component.
 * Even though hooks look like normal functions, there are lots of restrictions on them. A big
 * one is that only React function components can call hooks. This leads to a problem that shows
 * up when you need to have an external (to React) event emitter generate an event that needs to
 * be dispatched to a function component. This emitter can't directly call into React code!
 *
 * The solution is using this hook as an intermediary / proxy. Internally, this hook maintains a
 * state that gets updated by the external (to React) emitter, and then an effect (which marks
 * this as a dependency) that actually calls into your React component callback function. This
 * article on developerlife.com explains this in much greater detail:
 * http://developerlife.com/2021/10/19/react-hooks-redux-typescript-handbook/#custom-hooks
 *
 * Here are some more resources related to this:
 * https://stackoverflow.com/questions/53898810/executing-async-code-on-update-of-state-with-react-hooks
 * https://github.com/r3bl-org/r3bl-ts-utils/commit/a3248540ea325d3896ee56a84d003f15529169cd
 * https://github.com/r3bl-org/r3bl-ts-utils/commit/1f3cbb2b4988f44c6ea48233db1730e10f18dc60
 */

export const useEventEmitter = (
  emitter: EventEmitter,
  eventName: string,
  eventHandler: NodeJsListenerFn,
  options: IsActive
) => {
  const [event, setEvent] = useStateSafely<any[] | undefined>(undefined).asArray()

  useEffect(() => manageListenerForEmitterEffectFn(options, setEvent), [options.isActive])

  useEffect(() => {
    _callIfTruthy(event, eventHandler)
  }, [event])

  function manageListenerForEmitterEffectFn(
    options: IsActive,
    setEvent: SetState<any>
  ): ReturnType<React.EffectCallback> {
    const attachedListenerFn: NodeJsListenerFn | undefined = _callIfTrueWithReturn(
      options.isActive,
      () => {
        // https://www.damirscorner.com/blog/posts/20180216-VariableNumberOfArgumentsInTypescript.html
        const listener = (...args: any[]) => {
          setEvent(args)
          _callIfTrue(DEBUG, () => {
            console.log("🅰️ event emitter:", eventName)
          })
        }
        emitter.on(eventName, listener)
        return listener
      },
      () => {
        return undefined
      }
    )
    return _callIfTruthyWithReturn(
      attachedListenerFn,
      (listener) => {
        return () => {
          emitter.removeListener(eventName, listener)
        }
      },
      () => {
        return undefined
      }
    )
  }
}