allows addEventListener to use handleEvent syntax while re-using the object for options

packages/babel-plugin-jsx-dom-expressions/src/dom/element.js

@@ -542,15 +542,29 @@ function transformAttributes(path, results) {
           children = value;
         } else if (key.startsWith("on")) {
           const ev = toEventName(key);
-          if (key.startsWith("on:") || key.startsWith("oncapture:")) {
-            const listenerOptions = [t.stringLiteral(key.split(":")[1]), value.expression];
+          if (key.startsWith("on:")) {
+            const args = [elem, t.stringLiteral(key.split(":")[1]), value.expression];
+
+            results.exprs.unshift(
+              t.expressionStatement(
+                t.callExpression(
+                  registerImportMethod(
+                    path,
+                    "addEventListener",
+                    getRendererConfig(path, "dom").moduleName,
+                  ),
+                  args,
+                ),
+              ),
+            );
+          } else if (key.startsWith("oncapture:")) {
+            // deprecated see above condition
+            const args = [t.stringLiteral(key.split(":")[1]), value.expression, t.booleanLiteral(true)];
             results.exprs.push(
               t.expressionStatement(
                 t.callExpression(
                   t.memberExpression(elem, t.identifier("addEventListener")),
-                  key.startsWith("oncapture:")
-                    ? listenerOptions.concat(t.booleanLiteral(true))
-                    : listenerOptions
+                  args
                 )
               )
             );

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/eventExpressions/code.js

@@ -1,28 +1,38 @@
-function hoisted1() { console.log("hoisted"); }
-const hoisted2 = () => console.log("hoisted delegated")
-
-const template = (
-  <div id="main">
-    <button onchange={() => console.log("bound")}>Change Bound</button>
-    <button onChange={[id => console.log("bound", id), id]}>Change Bound</button>
-    <button onchange={handler}>Change Bound</button>
-    <button onchange={[handler]}>Change Bound</button>
-    <button onchange={hoisted1}>Change Bound</button>
-    <button onclick={() => console.log("delegated")}>Click Delegated</button>
-    <button onClick={[id => console.log("delegated", id), rowId]}>Click Delegated</button>
-    <button onClick={handler}>Click Delegated</button>
-    <button onClick={[handler]}>Click Delegated</button>
-    <button onClick={hoisted2}>Click Delegated</button>
-    <button
-      on:click={() => console.log("listener")}
-      on:CAPS-ev={() => console.log("custom")}
-    >
-      Click Listener
-    </button>
-    <button
-      oncapture:camelClick={() => console.log("listener")}
-    >
-      Click Capture
-    </button>
-  </div>
-);
+function hoisted1() { console.log("hoisted"); }
+const hoisted2 = () => console.log("hoisted delegated")
+
+function hoistedCustomEvent1() { console.log("hoisted"); }
+const hoistedCustomEvent2 = () => console.log("hoisted")
+
+const template = (
+  <div id="main">
+    <button onchange={() => console.log("bound")}>Change Bound</button>
+    <button onChange={[id => console.log("bound", id), id]}>Change Bound</button>
+    <button onchange={handler}>Change Bound</button>
+    <button onchange={[handler]}>Change Bound</button>
+    <button onchange={hoisted1}>Change Bound</button>
+    <button onclick={() => console.log("delegated")}>Click Delegated</button>
+    <button onClick={[id => console.log("delegated", id), rowId]}>Click Delegated</button>
+    <button onClick={handler}>Click Delegated</button>
+    <button onClick={[handler]}>Click Delegated</button>
+    <button onClick={hoisted2}>Click Delegated</button>
+    <button
+      on:click={() => console.log("listener")}
+      on:CAPS-ev={() => console.log("custom")}
+
+      on:hoisted-custom-event1={hoistedCustomEvent1}
+      on:hoisted-custom-event2={hoistedCustomEvent2}
+      on:inlined={()=> console.log("listener")}
+      on:inlined-with-options={{handleEvent:()=> console.log("listener"), once:false}}
+      on:inlined-to-hoisted1={{handleEvent:hoistedCustomEvent1}}
+      on:inlined-to-hoisted2={{handleEvent:hoistedCustomEvent2}}
+    >
+      Click Listener
+    </button>
+    <button
+      oncapture:camelClick={() => console.log("listener")}
+    >
+      Click Capture
+    </button>
+  </div>
+);

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/eventExpressions/output.js

@@ -8,6 +8,10 @@ function hoisted1() {
   console.log("hoisted");
 }
 const hoisted2 = () => console.log("hoisted delegated");
+function hoistedCustomEvent1() {
+  console.log("hoisted");
+}
+const hoistedCustomEvent2 = () => console.log("hoisted");
 const template = (() => {
   var _el$ = _tmpl$(),
     _el$2 = _el$.firstChild,
@@ -33,8 +37,21 @@ const template = (() => {
   _$addEventListener(_el$9, "click", handler, true);
   _el$10.$$click = handler;
   _el$11.$$click = hoisted2;
-  _el$12.addEventListener("click", () => console.log("listener"));
-  _el$12.addEventListener("CAPS-ev", () => console.log("custom"));
+  _$addEventListener(_el$12, "inlined-to-hoisted2", {
+    handleEvent: hoistedCustomEvent2
+  });
+  _$addEventListener(_el$12, "inlined-to-hoisted1", {
+    handleEvent: hoistedCustomEvent1
+  });
+  _$addEventListener(_el$12, "inlined-with-options", {
+    handleEvent: () => console.log("listener"),
+    once: false
+  });
+  _$addEventListener(_el$12, "inlined", () => console.log("listener"));
+  _$addEventListener(_el$12, "hoisted-custom-event2", hoistedCustomEvent2);
+  _$addEventListener(_el$12, "hoisted-custom-event1", hoistedCustomEvent1);
+  _$addEventListener(_el$12, "CAPS-ev", () => console.log("custom"));
+  _$addEventListener(_el$12, "click", () => console.log("listener"));
   _el$13.addEventListener("camelClick", () => console.log("listener"), true);
   return _el$;
 })();

packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/eventExpressions/code.js

@@ -1,19 +1,29 @@
-const template = (
-  <div id="main">
-    <button onchange={() => console.log("bound")}>Change Bound</button>
-    <button onChange={[id => console.log("bound", id), id]}>Change Bound</button>
-    <button onclick={() => console.log("delegated")}>Click Delegated</button>
-    <button onClick={[id => console.log("delegated", id), rowId]}>Click Delegated</button>
-    <button
-      on:click={() => console.log("listener")}
-      on:CAPS-ev={() => console.log("custom")}
-    >
-      Click Listener
-    </button>
-    <button
-      oncapture:camelClick={() => console.log("listener")}
-    >
-      Click Capture
-    </button>
-  </div>
-);
+function hoistedCustomEvent1() { console.log("hoisted"); }
+const hoistedcustomevent2 = () => console.log("hoisted")
+
+const template = (
+  <div id="main">
+    <button onchange={() => console.log("bound")}>Change Bound</button>
+    <button onChange={[id => console.log("bound", id), id]}>Change Bound</button>
+    <button onclick={() => console.log("delegated")}>Click Delegated</button>
+    <button onClick={[id => console.log("delegated", id), rowId]}>Click Delegated</button>
+    <button
+      on:click={() => console.log("listener")}
+      on:CAPS-ev2={() => console.log("custom")}
+
+      on:hoisted-custom-event1={hoistedCustomEvent1}
+      on:hoisted-custom-event2={hoistedCustomEvent2}
+      on:inlined={()=> console.log("listener")}
+      on:inlined-with-options={{handleEvent:()=> console.log("listener"), once:false}}
+      on:inlined-to-hoisted1={{handleEvent:hoistedCustomEvent1}}
+      on:inlined-to-hoisted2={{handleEvent:hoistedcustomevent2}}
+    >
+      Click Listener
+    </button>
+    <button
+      oncapture:camelClick={() => console.log("listener")}
+    >
+      Click Capture
+    </button>
+  </div>
+);

packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/eventExpressions/output.js

@@ -2,9 +2,14 @@ import { template as _$template } from "r-dom";
 import { delegateEvents as _$delegateEvents } from "r-dom";
 import { getNextElement as _$getNextElement } from "r-dom";
 import { runHydrationEvents as _$runHydrationEvents } from "r-dom";
+import { addEventListener as _$addEventListener } from "r-dom";
 var _tmpl$ = /*#__PURE__*/ _$template(
   `<div id=main><button>Change Bound</button><button>Change Bound</button><button>Click Delegated</button><button>Click Delegated</button><button>Click Listener</button><button>Click Capture`
 );
+function hoistedCustomEvent1() {
+  console.log("hoisted");
+}
+const hoistedcustomevent2 = () => console.log("hoisted");
 const template = (() => {
   var _el$ = _$getNextElement(_tmpl$),
     _el$2 = _el$.firstChild,
@@ -18,8 +23,21 @@ const template = (() => {
   _el$4.$$click = () => console.log("delegated");
   _el$5.$$click = id => console.log("delegated", id);
   _el$5.$$clickData = rowId;
-  _el$6.addEventListener("click", () => console.log("listener"));
-  _el$6.addEventListener("CAPS-ev", () => console.log("custom"));
+  _$addEventListener(_el$6, "inlined-to-hoisted2", {
+    handleEvent: hoistedcustomevent2
+  });
+  _$addEventListener(_el$6, "inlined-to-hoisted1", {
+    handleEvent: hoistedCustomEvent1
+  });
+  _$addEventListener(_el$6, "inlined-with-options", {
+    handleEvent: () => console.log("listener"),
+    once: false
+  });
+  _$addEventListener(_el$6, "inlined", () => console.log("listener"));
+  _$addEventListener(_el$6, "hoisted-custom-event2", hoistedCustomEvent2);
+  _$addEventListener(_el$6, "hoisted-custom-event1", hoistedCustomEvent1);
+  _$addEventListener(_el$6, "CAPS-ev2", () => console.log("custom"));
+  _$addEventListener(_el$6, "click", () => console.log("listener"));
   _el$7.addEventListener("camelClick", () => console.log("listener"), true);
   _$runHydrationEvents();
   return _el$;

packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/eventExpressions/code.js

@@ -1,28 +1,35 @@
-function hoisted1() { console.log("hoisted"); }
-const hoisted2 = () => console.log("hoisted delegated")
-
-const template = (
-  <div id="main">
-    <button onchange={() => console.log("bound")}>Change Bound</button>
-    <button onChange={[id => console.log("bound", id), id]}>Change Bound</button>
-    <button onchange={handler}>Change Bound</button>
-    <button onchange={[handler]}>Change Bound</button>
-    <button onchange={hoisted1}>Change Bound</button>
-    <button onclick={() => console.log("delegated")}>Click Delegated</button>
-    <button onClick={[id => console.log("delegated", id), rowId]}>Click Delegated</button>
-    <button onClick={handler}>Click Delegated</button>
-    <button onClick={[handler]}>Click Delegated</button>
-    <button onClick={hoisted2}>Click Delegated</button>
-    <button
-      on:click={() => console.log("listener")}
-      on:CAPS-ev={() => console.log("custom")}
-    >
-      Click Listener
-    </button>
-    <button
-      oncapture:camelClick={() => console.log("listener")}
-    >
-      Click Capture
-    </button>
-  </div>
-);
+function hoisted1() { console.log("hoisted"); }
+const hoisted2 = () => console.log("hoisted delegated")
+
+const template = (
+  <div id="main">
+    <button onchange={() => console.log("bound")}>Change Bound</button>
+    <button onChange={[id => console.log("bound", id), id]}>Change Bound</button>
+    <button onchange={handler}>Change Bound</button>
+    <button onchange={[handler]}>Change Bound</button>
+    <button onchange={hoisted1}>Change Bound</button>
+    <button onclick={() => console.log("delegated")}>Click Delegated</button>
+    <button onClick={[id => console.log("delegated", id), rowId]}>Click Delegated</button>
+    <button onClick={handler}>Click Delegated</button>
+    <button onClick={[handler]}>Click Delegated</button>
+    <button onClick={hoisted2}>Click Delegated</button>
+    <button
+      on:click={() => console.log("listener")}
+      on:CAPS-ev3={() => console.log("custom")}
+
+      on:hoisted-custom-event1={hoistedCustomEvent1}
+      on:hoisted-custom-event2={hoistedCustomEvent2}
+      on:inlined={()=> console.log("listener")}
+      on:inlined-with-options={{handleEvent:()=> console.log("listener"), once:false}}
+      on:inlined-to-hoisted1={{handleEvent:hoistedCustomEvent1}}
+      on:inlined-to-hoisted2={{handleEvent:hoistedcustomevent2}}
+    >
+      Click Listener
+    </button>
+    <button
+      oncapture:camelClick={() => console.log("listener")}
+    >
+      Click Capture
+    </button>
+  </div>
+);

packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/eventExpressions/output.js

@@ -33,8 +33,21 @@ const template = (() => {
   _$addEventListener(_el$9, "click", handler, true);
   _el$10.$$click = handler;
   _el$11.$$click = hoisted2;
-  _el$12.addEventListener("click", () => console.log("listener"));
-  _el$12.addEventListener("CAPS-ev", () => console.log("custom"));
+  _$addEventListener(_el$12, "inlined-to-hoisted2", {
+    handleEvent: hoistedcustomevent2
+  });
+  _$addEventListener(_el$12, "inlined-to-hoisted1", {
+    handleEvent: hoistedCustomEvent1
+  });
+  _$addEventListener(_el$12, "inlined-with-options", {
+    handleEvent: () => console.log("listener"),
+    once: false
+  });
+  _$addEventListener(_el$12, "inlined", () => console.log("listener"));
+  _$addEventListener(_el$12, "hoisted-custom-event2", hoistedCustomEvent2);
+  _$addEventListener(_el$12, "hoisted-custom-event1", hoistedCustomEvent1);
+  _$addEventListener(_el$12, "CAPS-ev3", () => console.log("custom"));
+  _$addEventListener(_el$12, "click", () => console.log("listener"));
   _el$13.addEventListener("camelClick", () => console.log("listener"), true);
   return _el$;
 })();

packages/dom-expressions/src/client.d.ts

@@ -37,7 +37,7 @@ export function setProperty(node: Element, name: string, value: any): void;
 export function addEventListener(
   node: Element,
   name: string,
-  handler: () => void,
+  handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions),
   delegate: boolean
 ): void;
 export function classList(
@@ -74,4 +74,4 @@ export interface RequestEvent {
   request: Request;
 }
 export declare const RequestContext: unique symbol;
-export function getRequestEvent(): RequestEvent | undefined;
+export function getRequestEvent(): RequestEvent | undefined;

packages/dom-expressions/src/client.js

@@ -133,7 +133,7 @@ export function addEventListener(node, name, handler, delegate) {
   } else if (Array.isArray(handler)) {
     const handlerFn = handler[0];
     node.addEventListener(name, (handler[0] = e => handlerFn.call(node, handler[1], e)));
-  } else node.addEventListener(name, handler);
+  } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
 }
 
 export function classList(node, value, prev = {}) {
@@ -332,8 +332,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     if (!skipRef) value(node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev);
-    value && node.addEventListener(e, value);
+    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
+    value && node.addEventListener(e, value, typeof value !== "function" && value);
   } else if (prop.slice(0, 10) === "oncapture:") {
     const e = prop.slice(10);
     prev && node.removeEventListener(e, prev, true);
@@ -466,7 +466,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       if (marker === undefined) return (current = [...parent.childNodes]);
       let node = array[0];
       if (node.parentNode !== parent) return current;
-      const nodes = [node]
+      const nodes = [node];
       while ((node = node.nextSibling) !== marker) nodes.push(node);
       return (current = nodes);
     }