add support for refs as array ref={[props.ref, myRef]}

Author: titoBouzout

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

@@ -612,7 +612,11 @@ function transformAttributes(path, results) {
                 )
               )
             );
-          } else if (isConstant || t.isFunction(value.expression)) {
+          } else if (
+            isConstant ||
+            t.isFunction(value.expression) ||
+            t.isArrayExpression(value.expression)
+          ) {
             results.exprs.unshift(
               t.expressionStatement(
                 t.callExpression(

packages/babel-plugin-jsx-dom-expressions/src/shared/component.js

@@ -108,7 +108,11 @@ export default function transformComponent(path) {
                   ])
                 )
               );
-            } else if (isConstant || t.isFunction(value.expression)) {
+            } else if (
+              isConstant ||
+              t.isFunction(value.expression) ||
+              t.isArrayExpression(value.expression)
+            ) {
               runningObject.push(t.objectProperty(t.identifier("ref"), value.expression));
             } else if (t.isCallExpression(value.expression)) {
               const refIdentifier = path.scope.generateUidIdentifier("_ref$");

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

@@ -123,7 +123,11 @@ function transformAttributes(path, results) {
                 )
               )
             );
-          } else if (isConstant || t.isFunction(value.expression)) {
+          } else if (
+            isConstant ||
+            t.isFunction(value.expression) ||
+            t.isArrayExpression(value.expression)
+          ) {
             results.exprs.unshift(
               t.expressionStatement(
                 t.callExpression(

packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js

@@ -325,3 +325,9 @@ const template88 = (
     {count()}
   </button>
 );
+
+const template89 = (
+  <button type="button" ref={[props.ref, myref]}>
+    {count()}
+  </button>
+);

packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js

@@ -820,4 +820,10 @@ const template88 = (() => {
   });
   return _el$107;
 })();
+const template89 = (() => {
+  var _el$108 = _tmpl$46();
+  _$use([props.ref, myref], _el$108);
+  _$insert(_el$108, count);
+  return _el$108;
+})();
 _$delegateEvents(["click", "input"]);

packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/attributeExpressions/code.js

@@ -124,4 +124,5 @@ const template26 = <div ref={binding.prop} />
 const template27 = <div ref={refFn} />
 const template28 = <div ref={refConst} />
 
-const template29 = <div ref={refUnknown} />
+const template29 = <div ref={refUnknown} />
+const template30 = <div ref={[refFn, refUnknown]} />

packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/attributeExpressions/output.js

@@ -308,3 +308,8 @@ const template29 = (() => {
   typeof _ref$10 === "function" ? _$use(_ref$10, _el$38) : (refUnknown = _el$38);
   return _el$38;
 })();
+const template30 = (() => {
+  var _el$39 = _$createElement("div");
+  _$use([refFn, refUnknown], _el$39);
+  return _el$39;
+})();

packages/dom-expressions/src/client.js

@@ -222,7 +222,9 @@ export function dynamicProperty(props, key) {
 }
 
 export function use(fn, element, arg) {
-  untrack(() => fn(element, arg));
+  untrack(() =>
+    Array.isArray(fn) ? fn.flat(Infinity).forEach(fn => fn && fn(element, arg)) : fn(element, arg)
+  );
 }
 
 export function insert(parent, accessor, marker, initial) {

packages/dom-expressions/src/universal.js

@@ -243,7 +243,11 @@ export function createRenderer({
     memo,
     createComponent,
     use(fn, element, arg) {
-      return untrack(() => fn(element, arg));
+      return untrack(() =>
+        Array.isArray(fn)
+          ? fn.flat(Infinity).forEach(fn => fn && fn(element, arg))
+          : fn(element, arg)
+      );
     }
   };
 }