Handled binding of level 1 events

ryansolid · Mar 24, 2020 · cf0262f · cf0262f
1 parent 3bc2829
commit cf0262f
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/packages/babel-plugin-jsx-dom-expressions/src/index.js b/packages/babel-plugin-jsx-dom-expressions/src/index.js
@@ -9,6 +9,7 @@ export default babel => {
     moduleName: "dom",
     generate: "dom",
     delegateEvents: true,
+    nonDelegateEvents: [],
     builtIns: [],
     wrapFragments: false,
     wrapConditionals: false,
@@ -674,7 +675,11 @@ export default babel => {
                 )
               );
             });
-          } else if (JSXOptions.delegateEvents && !NonComposedEvents.has(ev)) {
+          } else if (
+            JSXOptions.delegateEvents &&
+            !NonComposedEvents.has(ev) &&
+            JSXOptions.nonDelegateEvents.indexOf(ev) === -1
+          ) {
             // can only hydrate delegated events
             hasHydratableEvent = JSXOptions.hydratableEvents
               ? JSXOptions.hydratableEvents.includes(ev)
@@ -706,14 +711,22 @@ export default babel => {
               )
             );
           } else {
-            if (t.isArrayExpression(value.expression))
-              console.warn("Non-Composed/Bubbling Event cannot be bound");
+            let handler = value.expression;
+            if (t.isArrayExpression(value.expression)) {
+              handler = t.arrowFunctionExpression(
+                [t.identifier("e")],
+                t.callExpression(value.expression.elements[0], [
+                  value.expression.elements[1],
+                  t.identifier("e")
+                ])
+              );
+            }
             results.exprs.unshift(
               t.expressionStatement(
                 t.assignmentExpression(
                   "=",
                   t.memberExpression(t.identifier(elem.name), t.identifier(`on${ev}`)),
-                  value.expression
+                  handler
                 )
               )
             );

diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/eventExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/eventExpressions/code.js
@@ -1,7 +1,7 @@
 const template = (
   <div id="main">
     <button onchange={() => console.log("bound")}>Change Bound</button>
-    <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

diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/eventExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/eventExpressions/output.js
@@ -17,7 +17,7 @@ const template = (function() {
 
   _el$2.onchange = () => console.log("bound");
 
-  _el$3.onchange = () => console.log("bound");
+  _el$3.onchange = e => (id => console.log("bound", id))(id, e);
 
   _el$4.__click = () => console.log("delegated");
 

diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__hydrate_fixtures__/eventExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__hydrate_fixtures__/eventExpressions/code.js
@@ -1,7 +1,7 @@
 const template = (
   <div id="main">
     <button onchange={() => console.log("bound")}>Change Bound</button>
-    <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

diff --git a/...ges/babel-plugin-jsx-dom-expressions/test/__hydrate_fixtures__/eventExpressions/output.js b/...ges/babel-plugin-jsx-dom-expressions/test/__hydrate_fixtures__/eventExpressions/output.js
@@ -19,7 +19,7 @@ const template = (function() {
 
   _el$2.onchange = () => console.log("bound");
 
-  _el$3.onchange = () => console.log("bound");
+  _el$3.onchange = e => (id => console.log("bound", id))(id, e);
 
   _el$4.__click = () => console.log("delegated");
 

diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/eventExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/eventExpressions/code.js
@@ -1,7 +1,7 @@
 const template = (
   <div id="main">
     <button onchange={() => console.log("bound")}>Change Bound</button>
-    <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