added some extra tests for events using the tests from preact library, and update the removeEventListener to use useCapture also

Author: codeAdityagithub

src/rendering/constants.ts

@@ -62,3 +62,5 @@ export const SVG_TAGS = new Set([
 ]);
 
 export const MATH_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
+
+export const CAPTURE_REGEX = /(PointerCapture)$|Capture$/i;

src/rendering/createElements.ts

@@ -118,7 +118,7 @@ function isProperty(key: string) {
     return key !== "children" && key !== "key" && key !== "ref";
 }
 
-export function createNode(element: Fiber) {
+export function createNode(element: Fiber): HTMLElement | Text {
     let namespace: string | null = null;
 
     if (SVG_TAGS.has(element.type as string)) namespace = SVG_NAMESPACE;
@@ -137,7 +137,7 @@ export function createNode(element: Fiber) {
             : // @ts-expect-error
               document.createElement(element.type);
 
-    if (!element.props) return dom;
+    if (!element.props) return dom as HTMLElement | Text;
 
     if (
         element.props.ref &&
@@ -161,7 +161,7 @@ export function createNode(element: Fiber) {
         }
     }
 
-    return dom;
+    return dom as HTMLElement | Text;
 }
 
 export function updateDomProp(

src/rendering/props.ts

@@ -137,7 +137,6 @@ export function setReactiveAttribute(
     reactiveFunction.__propName = name;
     // registers the function in corresponding signal
     const val = reactiveAttribute(reactiveFunction);
-
     if (val === null || val === undefined || val === false) {
         return;
     }
@@ -148,6 +147,8 @@ export function setReactiveAttribute(
         setReactiveAttributes(reactiveFunction, dom);
 }
 
+const CAPTURE_REGEX = /(PointerCapture)$|Capture$/i;
+
 export function setAttribute(
     name: string,
     value: any,
@@ -159,16 +160,20 @@ export function setAttribute(
         return;
     }
 
-    if (name[0] === "o" && name[1] === "n") {
+    if (name[0] === "o" && name[1] === "n" && typeof value === "function") {
+        const useCapture = name != (name = name.replace(CAPTURE_REGEX, "$1"));
+
         if (
             name.toLowerCase() in dom ||
             name == "onFocusOut" ||
-            name == "onFocusIn"
+            name == "onFocusIn" ||
+            name === "onGotPointerCapture" ||
+            name === "onLostPointerCapture"
         )
             name = name.toLowerCase().slice(2);
         else name = name.slice(2);
         // handle eventListeners
-        dom.addEventListener(name, value);
+        dom.addEventListener(name, value, useCapture);
         return;
     }
 
@@ -204,6 +209,7 @@ export function setAttribute(
     if (value != null && (value !== false || name[4] === "-")) {
         // For most attributes, if the value is valid, set the attribute.
         // Special case: for "popover", if value is true, set attribute to an empty string.
+
         dom.setAttribute(
             name,
             name === "popover" && value === true ? "" : value

src/rendering/render.ts

@@ -6,6 +6,7 @@ import {
 import { BaseSignal, Ref } from "../signals/signal";
 import { Fiber, FiberChildren } from "../types";
 import { isPrimitive } from "../utils/general";
+import { CAPTURE_REGEX } from "./constants";
 import {
     FRAGMENT_SYMBOL,
     createChildren,
@@ -263,11 +264,18 @@ function commitDeletion(fiber: Fiber, toClearReactiveFunction?: boolean) {
         delete fiber.renderFunction;
     }
     if (fiber.dom) {
-        for (const prop of Object.keys(fiber.props)) {
+        for (const prop in fiber.props) {
             if (isEvent(prop)) {
-                const eventName = prop.toLowerCase().substring(2);
-
-                fiber.dom.removeEventListener(eventName, fiber.props[prop]);
+                let eventName = prop.toLowerCase().substring(2);
+                const useCapture =
+                    eventName !=
+                    (eventName = eventName.replace(CAPTURE_REGEX, "$1"));
+
+                fiber.dom.removeEventListener(
+                    eventName,
+                    fiber.props[prop],
+                    useCapture
+                );
                 delete fiber.props[prop];
             } else if (typeof fiber.props[prop] === "function") {
                 clearReactiveAttributes(fiber.props[prop]);
@@ -348,7 +356,8 @@ function replaceChildFromParent(prev: Fiber, next: Fiber, index?: number) {
     });
 }
 
-export const isEvent = (key: string) => key.startsWith("on");
+export const isEvent = (key: string) =>
+    key.startsWith("on") || key == "onFocusOut" || key == "onFocusIn";
 export const isProperty = (key: string) =>
     key !== "children" && !isEvent(key) && key !== "key" && key !== "ref";
 const isNew = (prev: any, next: any, key: string) => prev[key] !== next[key];
@@ -400,7 +409,7 @@ function deepEqual(objA: any, objB: any): boolean {
 
     for (let key of keysA) {
         if (key === "children") continue;
-        if (!keysB.includes(key)) return false; // Missing key in one of them
+        if (!objB.hasOwnProperty(key)) return false; // Missing key in one of them
         if (!deepEqual(objA[key], objB[key])) return false; // Recurse for nested objects/arrays
     }
 
@@ -540,7 +549,7 @@ function updateNode(
             } else {
                 // console.log("Node-Node");
                 // remove old properties and event listeners from NODE
-                for (const prop of Object.keys(prevProps)) {
+                for (const prop in prevProps) {
                     if (
                         isProperty(prop) &&
                         isGone(prevProps, nextProps, prop)
@@ -552,9 +561,19 @@ function updateNode(
                         (!(prop in nextProps) ||
                             isNew(prevProps, nextProps, prop))
                     ) {
-                        const eventName = prop.toLowerCase().substring(2);
-
-                        node.removeEventListener(eventName, prevProps[prop]);
+                        let eventName = prop.toLowerCase().substring(2);
+                        const useCapture =
+                            eventName !=
+                            (eventName = eventName.replace(
+                                CAPTURE_REGEX,
+                                "$1"
+                            ));
+
+                        node.removeEventListener(
+                            eventName,
+                            prevProps[prop],
+                            useCapture
+                        );
                         // console.log("event listener removed", prop);
                     }
                 }
@@ -573,7 +592,7 @@ function updateNode(
                     // add new properties
                     // console.log("same type", prev, next);
 
-                    for (const prop of Object.keys(nextProps)) {
+                    for (const prop in nextProps) {
                         if (
                             isProperty(prop) &&
                             isNew(prevProps, nextProps, prop)
@@ -589,9 +608,18 @@ function updateNode(
                             isEvent(prop) &&
                             isNew(prevProps, nextProps, prop)
                         ) {
-                            const eventName = prop.toLowerCase().substring(2);
-                            // console.log("event listener added", prop);
-                            node.addEventListener(eventName, nextProps[prop]);
+                            let eventName = prop.toLowerCase().substring(2);
+                            const useCapture =
+                                eventName !=
+                                (eventName = eventName.replace(
+                                    CAPTURE_REGEX,
+                                    "$1"
+                                ));
+                            node.addEventListener(
+                                eventName,
+                                nextProps[prop],
+                                useCapture
+                            );
                             prevProps[prop] = nextProps[prop];
                         }
                     }

src/tests/rendering/createElements.test.ts

@@ -150,7 +150,6 @@ describe("createNode", () => {
             props: { onClick: clickHandler, children: [] },
         };
         const dom = createNode(element);
-        console.log(dom, "dom ");
         dom.click();
         expect(count).toBe(1);
     });