@hanzogui/react-native-web-internals 2.0.0-rc.41-hanzoai.5

package/dist/cjs/modules/useEvent/__tests__/index-test.cjs

@@ -0,0 +1,490 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_dom_event_testing_library = require("dom-event-testing-library");
+var React = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var import_test_utils = require("react-dom/test-utils");
+var import__ = __toESM(require("../index.cjs"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+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 = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        const addClickCaptureListener = (0, import__.default)("click", {
+          capture: true
+        });
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener);
+          addClickCaptureListener(targetRef.current, listenerCapture);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: parentRef,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            ref: targetRef
+          })
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const parent = (0, import_dom_event_testing_library.createEventTarget)(parentRef.current);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        const addClickCaptureListener = (0, import__.default)("click", {
+          capture: true
+        });
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener);
+          addClickCaptureListener(targetRef.current, listenerCapture);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            ref: childRef
+          })
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            ref: childRef,
+            children: "text"
+          })
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const text = (0, import_dom_event_testing_library.createEventTarget)(childRef.current.firstChild);
+      (0, import_test_utils.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: target2
+      }) {
+        const addClickListener = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(target2, listener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+          target: document
+        }));
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
+      (0, import_test_utils.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: target2
+      }) {
+        const addClickListener = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(target2, listener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+          target: window
+        }));
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(targetRef.current, onClick);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+          onClick: listener
+        }));
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
+      (0, import_test_utils.act)(() => {
+        target.click();
+      });
+      expect(listener).toBeCalledTimes(1);
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+          onClick: listenerAlt
+        }));
+      });
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(targetRef.current, off ? null : listener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+          off: false
+        }));
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
+      (0, import_test_utils.act)(() => {
+        target.click();
+      });
+      expect(listener).toBeCalledTimes(1);
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+          off: true
+        }));
+      });
+      listener.mockClear();
+      (0, import_test_utils.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 = (0, import__.default)("magic-event");
+        React.useEffect(() => {
+          addMagicEventListener(targetRef.current, listener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        const addClickCaptureListener = (0, import__.default)("click", {
+          capture: true
+        });
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener);
+          addClickListener(parentRef.current, listener);
+          addClickCaptureListener(targetRef.current, listenerCapture);
+          addClickCaptureListener(parentRef.current, listenerCapture);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          id: "parent",
+          ref: parentRef,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            id: "target",
+            ref: targetRef,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+              ref: childRef
+            })
+          })
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        const addClickAltListener = (0, import__.default)("click");
+        const addClickCaptureListener = (0, import__.default)("click", {
+          capture: true
+        });
+        const addClickCaptureAltListener = (0, import__.default)("click", {
+          capture: true
+        });
+        React.useEffect(() => {
+          addClickListener(targetRef.current, listener);
+          addClickAltListener(targetRef.current, listenerAlt);
+          addClickCaptureListener(targetRef.current, listenerCapture);
+          addClickCaptureAltListener(targetRef.current, listenerCaptureAlt);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          id: "target",
+          ref: targetRef,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            ref: childRef
+          })
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(document, clickListener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {});
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+        root.render(null);
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(document);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        React.useEffect(() => {
+          addClickListener(childRef.current, childListener);
+          addClickListener(targetRef.current, targetListener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+            ref: childRef
+          })
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
+      (0, import_test_utils.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 = (0, import__.default)("click");
+        const addSecondClickListener = (0, import__.default)("click");
+        React.useEffect(() => {
+          addFirstClickListener(targetRef.current, firstListener);
+          addSecondClickListener(targetRef.current, secondListener);
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+          ref: targetRef
+        });
+      }
+      (0, import_test_utils.act)(() => {
+        root.render(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}));
+      });
+      const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
+      (0, import_test_utils.act)(() => {
+        target.click();
+      });
+      expect(firstListener).toBeCalledTimes(1);
+      expect(secondListener).toBeCalledTimes(0);
+    });
+  });
+});

package/dist/cjs/modules/useEvent/index.cjs

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useEvent_exports = {};
+__export(useEvent_exports, {
+  useEvent: () => useEvent
+});
+module.exports = __toCommonJS(useEvent_exports);
+var import_createEventHandle = require("../createEventHandle/index.cjs");
+var import_useLayoutEffect = require("../useLayoutEffect/index.cjs");
+var import_useStable = require("../useStable/index.cjs");
+function useEvent(event, options) {
+  const targetListeners = (0, import_useStable.useStable)(() => /* @__PURE__ */new Map());
+  const addListener = (0, import_useStable.useStable)(() => {
+    const addEventListener = (0, import_createEventHandle.createEventHandle)(event, options);
+    return (target, 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;
+    };
+  });
+  (0, import_useLayoutEffect.useLayoutEffectImpl)(() => {
+    return () => {
+      targetListeners.forEach(removeListener => {
+        removeListener();
+      });
+      targetListeners.clear();
+    };
+  }, [targetListeners]);
+  return addListener;
+}