fix: event prevent default

packages/compiler/react/transform.ts

@@ -904,7 +904,7 @@ export const transformJSX = (
         jsxPath.replaceWith(t.jsxExpressionContainer(id!));
       }, [jsx, t.booleanLiteral(unstable)]);
 
-      return dynamics;
+      continue;
     }
 
     if (isJSXFragment(child)) {
@@ -1069,7 +1069,7 @@ export const transformJSX = (
             jsx.children[i] = t.jsxExpressionContainer(id!);
           }, [expression, t.booleanLiteral(unstable)]);
 
-          return dynamics;
+          continue;
         }
 
         const id = createDynamic(

packages/kitchen-sink/src/examples/form.tsx

@@ -0,0 +1,18 @@
+import { block } from 'million/react';
+
+const Form = block(() => {
+  const onSubmit = (event: any) => {
+    event.preventDefault();
+    alert('submitted');
+  };
+
+  return (
+    <div>
+      <form onSubmit={onSubmit}>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+});
+
+export default Form;

packages/million/dom.ts

@@ -94,24 +94,27 @@ export const createEventListener = (
   name: string,
   value?: EventListener,
 ) => {
-  const event = name.toLowerCase();
+  let event = name.toLowerCase();
+  let capture = false;
+  if (event.endsWith('capture')) {
+    event = event.slice(0, -7);
+    capture = true;
+  }
+
   const key = `$$${event}`;
   if (!SetHas$.call(document$[EVENTS_REGISTRY], event)) {
     // createEventListener uses a synthetic event handler to capture events
     // https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294
-    addEventListener$.call(document$, event, (nativeEvent: Event) => {
-      nativeEvent.stopPropagation = () => {
-        nativeEvent.cancelBubble = true;
-        nativeEvent.stopImmediatePropagation();
-      };
-
-      requestAnimationFrame(() => {
+    addEventListener$.call(
+      document$,
+      event,
+      (nativeEvent: Event) => {
         let el = nativeEvent.target as Node | null;
         // Bubble up the DOM tree to find all event listeners
         while (el) {
           const handler = el[key];
           if (handler) {
-            Object.defineProperty(nativeEvent, 'currentTarget', {
+            Object$.defineProperty(nativeEvent, 'currentTarget', {
               configurable: true,
               get() {
                 return el;
@@ -121,8 +124,9 @@ export const createEventListener = (
           }
           el = el.parentNode;
         }
-      });
-    });
+      },
+      { capture },
+    );
     SetAdd$.call(document$[EVENTS_REGISTRY], event);
   }
   const patch = (newValue?: EventListener | null) => {

website/package.json

@@ -22,7 +22,7 @@
     "classnames": "^2.3.2",
     "dedent": "^0.7.0",
     "framer-motion": "^10.12.4",
-    "million": "workspace:2.6.0-beta.8",
+    "million": "workspace:*",
     "next": "^13.4.10",
     "nextra": "^2.10.0",
     "nextra-theme-docs": "^2.10.0",