@hanzogui/react-native-web-internals 2.0.0

package/src/modules/useEvent/__tests__/index-test.tsx

@@ -0,0 +1,511 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import { createEventTarget } from 'dom-event-testing-library'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { act } from 'react-dom/test-utils'
+
+import useEvent from '..'
+
+function createRoot(rootNode) {
+  return {
+    render(element) {
+      ReactDOM.render(element, rootNode)
+    },
+  }
+}
+
+describe('use-event', () => {
+  let root
+  let rootNode
+
+  beforeEach(() => {
+    rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+    root = createRoot(rootNode)
+  })
+
+  afterEach(() => {
+    root.render(null)
+    document.body.removeChild(rootNode)
+    rootNode = null
+    root = null
+  })
+
+  describe('setListener()', () => {
+    test('event dispatched on target', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+
+      function Component() {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const target = createEventTarget(targetRef.current)
+
+      act(() => {
+        target.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('event dispatched on parent', () => {
+      const listener = jest.fn()
+      const listenerCapture = jest.fn()
+      const targetRef = React.createRef()
+      const parentRef = React.createRef()
+
+      function Component() {
+        const addClickListener = useEvent('click')
+        const addClickCaptureListener = useEvent('click', { capture: true })
+
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener)
+          addClickCaptureListener(targetRef.current, listenerCapture)
+        })
+        return (
+          <div ref={parentRef}>
+            <div ref={targetRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const parent = createEventTarget(parentRef.current)
+
+      act(() => {
+        parent.click()
+      })
+
+      expect(listener).toBeCalledTimes(0)
+      expect(listenerCapture).toBeCalledTimes(0)
+    })
+
+    test('event dispatched on child', () => {
+      const log = []
+      const listener = jest.fn(() => {
+        log.push('bubble')
+      })
+      const listenerCapture = jest.fn(() => {
+        log.push('capture')
+      })
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+
+      function Component() {
+        const addClickListener = useEvent('click')
+        const addClickCaptureListener = useEvent('click', { capture: true })
+
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener)
+          addClickCaptureListener(targetRef.current, listenerCapture)
+        })
+        return (
+          <div ref={targetRef}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(listenerCapture).toBeCalledTimes(1)
+      expect(listener).toBeCalledTimes(1)
+      expect(log).toEqual(['capture', 'bubble'])
+    })
+
+    test('event dispatched on text node', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+
+      function Component() {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener)
+        })
+        return (
+          <div ref={targetRef}>
+            <div ref={childRef}>text</div>
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const text = createEventTarget(childRef.current.firstChild)
+
+      act(() => {
+        text.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('listener can be attached to document ', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+
+      function Component({ target }) {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(target, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component target={document} />)
+      })
+      const target = createEventTarget(targetRef.current)
+      act(() => {
+        target.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('listener can be attached to window ', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+
+      function Component({ target }) {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(target, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component target={window} />)
+      })
+      const target = createEventTarget(targetRef.current)
+      act(() => {
+        target.click()
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('listener is replaceable', () => {
+      const listener = jest.fn()
+      const listenerAlt = jest.fn()
+      const targetRef = React.createRef()
+
+      function Component({ onClick }) {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(targetRef.current, onClick)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component onClick={listener} />)
+      })
+      const target = createEventTarget(targetRef.current)
+      act(() => {
+        target.click()
+      })
+      expect(listener).toBeCalledTimes(1)
+      act(() => {
+        // this should replace the listener
+        root.render(<Component onClick={listenerAlt} />)
+      })
+      act(() => {
+        target.click()
+      })
+      expect(listener).toBeCalledTimes(1)
+      expect(listenerAlt).toBeCalledTimes(1)
+    })
+
+    test('listener is removed when value is null', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+
+      function Component({ off }) {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(targetRef.current, off ? null : listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component off={false} />)
+      })
+      const target = createEventTarget(targetRef.current)
+      act(() => {
+        target.click()
+      })
+      expect(listener).toBeCalledTimes(1)
+      act(() => {
+        // this should unset the listener
+        root.render(<Component off={true} />)
+      })
+      listener.mockClear()
+      act(() => {
+        target.click()
+      })
+      expect(listener).toBeCalledTimes(0)
+    })
+
+    test('custom event dispatched on target', () => {
+      const listener = jest.fn()
+      const targetRef = React.createRef()
+
+      function Component() {
+        const addMagicEventListener = useEvent('magic-event')
+        React.useEffect(() => {
+          addMagicEventListener(targetRef.current, listener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      act(() => {
+        const event = new CustomEvent('magic-event', { bubbles: true })
+        targetRef.current.dispatchEvent(event)
+      })
+
+      expect(listener).toBeCalledTimes(1)
+    })
+
+    test('listeners can be set on multiple targets simultaneously', () => {
+      const log = []
+      const targetRef = React.createRef()
+      const parentRef = React.createRef()
+      const childRef = React.createRef()
+
+      const listener = jest.fn((e) => {
+        log.push(['bubble', e.currentTarget.id])
+      })
+      const listenerCapture = jest.fn((e) => {
+        log.push(['capture', e.currentTarget.id])
+      })
+
+      function Component() {
+        const addClickListener = useEvent('click')
+        const addClickCaptureListener = useEvent('click', { capture: true })
+        React.useEffect(() => {
+          // the same event handle is used to set listeners on different targets
+          addClickListener(targetRef.current, listener)
+          addClickListener(parentRef.current, listener)
+          addClickCaptureListener(targetRef.current, listenerCapture)
+          addClickCaptureListener(parentRef.current, listenerCapture)
+        })
+        return (
+          <div id="parent" ref={parentRef}>
+            <div id="target" ref={targetRef}>
+              <div ref={childRef} />
+            </div>
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(listenerCapture).toBeCalledTimes(2)
+      expect(listener).toBeCalledTimes(2)
+      expect(log).toEqual([
+        ['capture', 'parent'],
+        ['capture', 'target'],
+        ['bubble', 'target'],
+        ['bubble', 'parent'],
+      ])
+    })
+
+    test('listeners are specific to each event handle', () => {
+      const log = []
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+
+      const listener = jest.fn((e) => {
+        log.push(['bubble', 'target'])
+      })
+      const listenerAlt = jest.fn((e) => {
+        log.push(['bubble', 'target-alt'])
+      })
+      const listenerCapture = jest.fn((e) => {
+        log.push(['capture', 'target'])
+      })
+      const listenerCaptureAlt = jest.fn((e) => {
+        log.push(['capture', 'target-alt'])
+      })
+
+      function Component() {
+        const addClickListener = useEvent('click')
+        const addClickAltListener = useEvent('click')
+        const addClickCaptureListener = useEvent('click', { capture: true })
+        const addClickCaptureAltListener = useEvent('click', { capture: true })
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener)
+          addClickAltListener(targetRef.current, listenerAlt)
+          addClickCaptureListener(targetRef.current, listenerCapture)
+          addClickCaptureAltListener(targetRef.current, listenerCaptureAlt)
+        })
+        return (
+          <div id="target" ref={targetRef}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(listenerCapture).toBeCalledTimes(1)
+      expect(listenerCaptureAlt).toBeCalledTimes(1)
+      expect(listener).toBeCalledTimes(1)
+      expect(listenerAlt).toBeCalledTimes(1)
+      expect(log).toEqual([
+        ['capture', 'target'],
+        ['capture', 'target-alt'],
+        ['bubble', 'target'],
+        ['bubble', 'target-alt'],
+      ])
+    })
+  })
+
+  describe('cleanup', () => {
+    test('removes all listeners for given event type from targets', () => {
+      const clickListener = jest.fn()
+      function Component() {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(document, clickListener)
+        })
+        return <div />
+      }
+
+      act(() => {
+        root.render(<Component />)
+        root.render(null)
+      })
+
+      const target = createEventTarget(document)
+
+      act(() => {
+        target.click()
+      })
+
+      expect(clickListener).toBeCalledTimes(0)
+    })
+  })
+
+  describe('stopPropagation and stopImmediatePropagation', () => {
+    test('stopPropagation works as expected', () => {
+      const childListener = jest.fn((e) => {
+        e.stopPropagation()
+      })
+      const targetListener = jest.fn()
+      const targetRef = React.createRef()
+      const childRef = React.createRef()
+
+      function Component() {
+        const addClickListener = useEvent('click')
+        React.useEffect(() => {
+          addClickListener(childRef.current, childListener)
+          addClickListener(targetRef.current, targetListener)
+        })
+        return (
+          <div ref={targetRef}>
+            <div ref={childRef} />
+          </div>
+        )
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const child = createEventTarget(childRef.current)
+
+      act(() => {
+        child.click()
+      })
+
+      expect(childListener).toBeCalledTimes(1)
+      expect(targetListener).toBeCalledTimes(0)
+    })
+
+    test('stopImmediatePropagation works as expected', () => {
+      const firstListener = jest.fn((e) => {
+        e.stopImmediatePropagation()
+      })
+      const secondListener = jest.fn()
+      const targetRef = React.createRef()
+
+      function Component() {
+        const addFirstClickListener = useEvent('click')
+        const addSecondClickListener = useEvent('click')
+        React.useEffect(() => {
+          addFirstClickListener(targetRef.current, firstListener)
+          addSecondClickListener(targetRef.current, secondListener)
+        })
+        return <div ref={targetRef} />
+      }
+
+      act(() => {
+        root.render(<Component />)
+      })
+
+      const target = createEventTarget(targetRef.current)
+
+      act(() => {
+        target.click()
+      })
+
+      expect(firstListener).toBeCalledTimes(1)
+      expect(secondListener).toBeCalledTimes(0)
+    })
+  })
+})

package/src/modules/useEvent/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { createEventHandle } from '../createEventHandle/index'
+import { useLayoutEffectImpl as useLayoutEffect } from '../useLayoutEffect/index'
+import { useStable } from '../useStable/index'
+
+type Callback = null | ((arg0: any) => void)
+type AddListener = (
+  target: EventTarget,
+  listener: null | ((arg0: any) => void)
+) => () => void
+
+/**
+ * This can be used with any event type include custom events.
+ *
+ * const click = useEvent('click', options);
+ * useEffect(() => {
+ *   click.setListener(target, onClick);
+ *   return () => click.clear();
+ * }).
+ */
+export function useEvent(
+  event: string,
+  options?: {
+    capture?: boolean
+    passive?: boolean
+  } | null
+): AddListener {
+  const targetListeners = useStable(() => new Map())
+
+  const addListener = useStable(() => {
+    const addEventListener = createEventHandle(event, options)
+    return (target: EventTarget, callback: Callback) => {
+      const removeTargetListener = targetListeners.get(target)
+      if (removeTargetListener != null) {
+        removeTargetListener()
+      }
+      if (callback == null) {
+        targetListeners.delete(target)
+      }
+      const removeEventListener = addEventListener(target, callback)
+      targetListeners.set(target, removeEventListener)
+      return removeEventListener
+    }
+  })
+
+  useLayoutEffect(() => {
+    return () => {
+      targetListeners.forEach((removeListener) => {
+        removeListener()
+      })
+      targetListeners.clear()
+    }
+  }, [targetListeners])
+
+  return addListener
+}