fix imported binding ref

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

@@ -481,11 +481,11 @@ function transformAttributes(path, results) {
             value.expression = value.expression.expression;
           }
           let binding,
-            isFunction =
+            isConstant =
               t.isIdentifier(value.expression) &&
               (binding = path.scope.getBinding(value.expression.name)) &&
-              binding.kind === "const";
-          if (!isFunction && t.isLVal(value.expression)) {
+              (binding.kind === "const" || binding.kind === "module");
+          if (!isConstant && t.isLVal(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
               t.variableDeclaration("var", [
@@ -506,7 +506,7 @@ function transformAttributes(path, results) {
                 )
               )
             );
-          } else if (isFunction || t.isFunction(value.expression)) {
+          } else if (isConstant || t.isFunction(value.expression)) {
             results.exprs.unshift(
               t.expressionStatement(
                 t.callExpression(

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

@@ -79,11 +79,11 @@ export default function transformComponent(path) {
               value.expression = value.expression.expression;
             }
             let binding,
-              isFunction =
+              isConstant =
                 t.isIdentifier(value.expression) &&
                 (binding = path.scope.getBinding(value.expression.name)) &&
-                binding.kind === "const";
-            if (!isFunction && t.isLVal(value.expression)) {
+                (binding.kind === "const" || binding.kind === "module");
+            if (!isConstant && t.isLVal(value.expression)) {
               const refIdentifier = path.scope.generateUidIdentifier("_ref$");
               runningObject.push(
                 t.objectMethod(
@@ -108,7 +108,7 @@ export default function transformComponent(path) {
                   ])
                 )
               );
-            } else if (isFunction || t.isFunction(value.expression)) {
+            } else if (isConstant || t.isFunction(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

@@ -93,7 +93,12 @@ function transformAttributes(path, results) {
           ) {
             value.expression = value.expression.expression;
           }
-          if (t.isLVal(value.expression)) {
+          let binding,
+            isConstant =
+              t.isIdentifier(value.expression) &&
+              (binding = path.scope.getBinding(value.expression.name)) &&
+              (binding.kind === "const" || binding.kind === "module");
+          if (!isConstant && t.isLVal(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
               t.variableDeclaration("var", [
@@ -118,7 +123,7 @@ function transformAttributes(path, results) {
                 )
               )
             );
-          } else if (t.isFunction(value.expression)) {
+          } else if (isConstant || t.isFunction(value.expression)) {
             results.exprs.unshift(
               t.expressionStatement(
                 t.callExpression(

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

@@ -1,4 +1,8 @@
 import * as styles from "./styles.module.css";
+import { binding } from "somewhere";
+
+function refFn() {}
+const refConst = null;
 
 const selected = true;
 let id = "my-h1";
@@ -242,3 +246,10 @@ const template68 = <div><iframe src=""></iframe></div>;
 
 const template69 = <iframe src="" loading="lazy"></iframe>;
 const template70 = <div><iframe src="" loading="lazy"></iframe></div>;
+
+const template71 = <div ref={binding} />;
+const template72 = <div ref={binding.prop} />;
+const template73 = <div ref={refFn} />
+const template74 = <div ref={refConst} />
+
+const template75 = <div ref={refUnknown} />

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

@@ -63,6 +63,9 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
   _tmpl$47 = /*#__PURE__*/ _$template(`<iframe src=""loading=lazy>`, true, false),
   _tmpl$48 = /*#__PURE__*/ _$template(`<div><iframe src=""loading=lazy>`, true, false);
 import * as styles from "./styles.module.css";
+import { binding } from "somewhere";
+function refFn() {}
+const refConst = null;
 const selected = true;
 let id = "my-h1";
 let link;
@@ -514,4 +517,32 @@ const template67 = _tmpl$45();
 const template68 = _tmpl$46();
 const template69 = _tmpl$47();
 const template70 = _tmpl$48();
+const template71 = (() => {
+  var _el$88 = _tmpl$4();
+  _$use(binding, _el$88);
+  return _el$88;
+})();
+const template72 = (() => {
+  var _el$89 = _tmpl$4();
+  var _ref$8 = binding.prop;
+  typeof _ref$8 === "function" ? _$use(_ref$8, _el$89) : (binding.prop = _el$89);
+  return _el$89;
+})();
+const template73 = (() => {
+  var _el$90 = _tmpl$4();
+  var _ref$9 = refFn;
+  typeof _ref$9 === "function" ? _$use(_ref$9, _el$90) : (refFn = _el$90);
+  return _el$90;
+})();
+const template74 = (() => {
+  var _el$91 = _tmpl$4();
+  _$use(refConst, _el$91);
+  return _el$91;
+})();
+const template75 = (() => {
+  var _el$92 = _tmpl$4();
+  var _ref$10 = refUnknown;
+  typeof _ref$10 === "function" ? _$use(_ref$10, _el$92) : (refUnknown = _el$92);
+  return _el$92;
+})();
 _$delegateEvents(["click", "input"]);

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

@@ -1,4 +1,7 @@
-import { Show } from "somewhere"
+import { Show, binding } from "somewhere"
+
+function refFn() {}
+const refConst = null;
 
 const Child = props => {
   const [s, set] = createSignal();
@@ -219,3 +222,10 @@ class Template29 extends ParentComponent {
     <this.component method={this.method} />
   }
 }
+
+const template30 = <Comp ref={binding} />
+const template31 = <Comp ref={binding.prop} />
+const template32 = <Comp ref={refFn} />
+const template33 = <Comp ref={refConst} />
+
+const template34 = <Comp ref={refUnknown} />

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

@@ -14,7 +14,9 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div>Hello `),
   _tmpl$7 = /*#__PURE__*/ _$template(`<span>1`),
   _tmpl$8 = /*#__PURE__*/ _$template(`<span>2`),
   _tmpl$9 = /*#__PURE__*/ _$template(`<span>3`);
-import { Show } from "somewhere";
+import { Show, binding } from "somewhere";
+function refFn() {}
+const refConst = null;
 const Child = props => {
   const [s, set] = createSignal();
   return [
@@ -476,3 +478,27 @@ class Template29 extends ParentComponent {
     });
   };
 }
+const template30 = _$createComponent(Comp, {
+  ref: binding
+});
+const template31 = _$createComponent(Comp, {
+  ref(r$) {
+    var _ref$5 = binding.prop;
+    typeof _ref$5 === "function" ? _ref$5(r$) : (binding.prop = r$);
+  }
+});
+const template32 = _$createComponent(Comp, {
+  ref(r$) {
+    var _ref$6 = refFn;
+    typeof _ref$6 === "function" ? _ref$6(r$) : (refFn = r$);
+  }
+});
+const template33 = _$createComponent(Comp, {
+  ref: refConst
+});
+const template34 = _$createComponent(Comp, {
+  ref(r$) {
+    var _ref$7 = refUnknown;
+    typeof _ref$7 === "function" ? _ref$7(r$) : (refUnknown = r$);
+  }
+});

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

@@ -1,3 +1,8 @@
+import { binding } from "somewhere"
+
+function refFn() {}
+const refConst = null;
+
 const selected = true;
 let link;
 const template = (
@@ -112,3 +117,11 @@ const template22 = <div ref={a().b?.c} />
 const template23 = <div ref={a() ? b : c} />
 
 const template24 = <div ref={a() ?? b} />
+
+const template25 = <div ref={binding} />
+const template26 = <div ref={binding.prop} />
+
+const template27 = <div ref={refFn} />
+const template28 = <div ref={refConst} />
+
+const template29 = <div ref={refUnknown} />

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

@@ -6,6 +6,9 @@ import { setProp as _$setProp } from "r-custom";
 import { spread as _$spread } from "r-custom";
 import { mergeProps as _$mergeProps } from "r-custom";
 import { createElement as _$createElement } from "r-custom";
+import { binding } from "somewhere";
+function refFn() {}
+const refConst = null;
 const selected = true;
 let link;
 const template = (() => {
@@ -256,3 +259,31 @@ const template24 = (() => {
   typeof _ref$7 === "function" && _$use(_ref$7, _el$33);
   return _el$33;
 })();
+const template25 = (() => {
+  var _el$34 = _$createElement("div");
+  _$use(binding, _el$34);
+  return _el$34;
+})();
+const template26 = (() => {
+  var _el$35 = _$createElement("div");
+  var _ref$8 = binding.prop;
+  typeof _ref$8 === "function" ? _$use(_ref$8, _el$35) : (binding.prop = _el$35);
+  return _el$35;
+})();
+const template27 = (() => {
+  var _el$36 = _$createElement("div");
+  var _ref$9 = refFn;
+  typeof _ref$9 === "function" ? _$use(_ref$9, _el$36) : (refFn = _el$36);
+  return _el$36;
+})();
+const template28 = (() => {
+  var _el$37 = _$createElement("div");
+  _$use(refConst, _el$37);
+  return _el$37;
+})();
+const template29 = (() => {
+  var _el$38 = _$createElement("div");
+  var _ref$10 = refUnknown;
+  typeof _ref$10 === "function" ? _$use(_ref$10, _el$38) : (refUnknown = _el$38);
+  return _el$38;
+})();

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

@@ -1,4 +1,7 @@
-import { Show } from "somewhere"
+import { Show, binding } from "somewhere"
+
+function refFn() {}
+const refConst = null;
 
 const Child = props => (
   <>
@@ -148,4 +151,11 @@ const template21 = (
   />
 );
 
-const template22 = <Component passObject={{ ...a }} ></Component>
+const template22 = <Component passObject={{ ...a }} ></Component>
+
+const template23 = <Component ref={binding} />
+const template24 = <Component ref={binding.prop} />
+const template25 = <Component ref={refFn} />
+const template26 = <Component ref={refConst} />
+
+const template27 = <Component ref={refUnknown} />

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

@@ -7,7 +7,9 @@ import { createTextNode as _$createTextNode } from "r-custom";
 import { insertNode as _$insertNode } from "r-custom";
 import { use as _$use } from "r-custom";
 import { createElement as _$createElement } from "r-custom";
-import { Show } from "somewhere";
+import { Show, binding } from "somewhere";
+function refFn() {}
+const refConst = null;
 const Child = props => [
   (() => {
     var _el$ = _$createElement("div"),
@@ -388,3 +390,27 @@ const template22 = _$createComponent(Component, {
     };
   }
 });
+const template23 = _$createComponent(Component, {
+  ref: binding
+});
+const template24 = _$createComponent(Component, {
+  ref(r$) {
+    var _ref$5 = binding.prop;
+    typeof _ref$5 === "function" ? _ref$5(r$) : (binding.prop = r$);
+  }
+});
+const template25 = _$createComponent(Component, {
+  ref(r$) {
+    var _ref$6 = refFn;
+    typeof _ref$6 === "function" ? _ref$6(r$) : (refFn = r$);
+  }
+});
+const template26 = _$createComponent(Component, {
+  ref: refConst
+});
+const template27 = _$createComponent(Component, {
+  ref(r$) {
+    var _ref$7 = refUnknown;
+    typeof _ref$7 === "function" ? _ref$7(r$) : (refUnknown = r$);
+  }
+});