diff --git a/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js b/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js index d958ec9c..2bde30ef 100644 --- a/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js +++ b/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js @@ -274,10 +274,10 @@ export function transformCondition(path, inline, deep) { : path.scope.generateUidIdentifier("_c$"); expr.test = t.callExpression(id, []); if (t.isConditionalExpression(expr.consequent) || t.isLogicalExpression(expr.consequent)) { - expr.consequent = transformCondition(path.get("consequent"), inline, true); + expr.consequent = transformCondition(path.get("consequent"), true, true); } if (t.isConditionalExpression(expr.alternate) || t.isLogicalExpression(expr.alternate)) { - expr.alternate = transformCondition(path.get("alternate"), inline, true); + expr.alternate = transformCondition(path.get("alternate"), true, true); } } } else if (t.isLogicalExpression(expr)) { diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/conditionalExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/conditionalExpressions/output.js index ac236575..c8dec644 100644 --- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/conditionalExpressions/output.js +++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/conditionalExpressions/output.js @@ -53,13 +53,7 @@ const template7 = (() => { _el$7, (() => { var _c$3 = _$memo(() => state.count > 5); - return () => - _c$3() - ? (() => { - var _c$4 = _$memo(() => !!state.dynamic); - return () => (_c$4() ? best : good()); - })() - : bad; + return () => (_c$3() ? (_$memo(() => !!state.dynamic)() ? best : good()) : bad); })() ); return _el$7; @@ -69,8 +63,8 @@ const template8 = (() => { _$insert( _el$8, (() => { - var _c$5 = _$memo(() => !!(state.dynamic && state.something)); - return () => _c$5() && good(); + var _c$4 = _$memo(() => !!(state.dynamic && state.something)); + return () => _c$4() && good(); })() ); return _el$8; @@ -80,8 +74,8 @@ const template9 = (() => { _$insert( _el$9, (() => { - var _c$6 = _$memo(() => !!state.dynamic); - return () => (_c$6() && good()) || bad; + var _c$5 = _$memo(() => !!state.dynamic); + return () => (_c$5() && good()) || bad; })() ); return _el$9; @@ -96,14 +90,8 @@ const template11 = (() => { _$insert( _el$11, (() => { - var _c$7 = _$memo(() => !!state.a); - return () => - _c$7() - ? a() - : (() => { - var _c$8 = _$memo(() => !!state.b); - return () => (_c$8() ? b() : state.c ? "c" : "fallback"); - })(); + var _c$6 = _$memo(() => !!state.a); + return () => (_c$6() ? a() : _$memo(() => !!state.b)() ? b() : state.c ? "c" : "fallback"); })() ); return _el$11; @@ -164,8 +152,8 @@ const template20 = (() => { _$insert( _el$13, (() => { - var _c$9 = _$memo(() => !!state.dynamic); - return () => (_c$9() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); + var _c$7 = _$memo(() => !!state.dynamic); + return () => (_c$7() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); })() ); return _el$13; @@ -215,8 +203,8 @@ const template29 = (() => { _$insert( _el$18, (() => { - var _c$10 = _$memo(() => !!thing()); - return () => (_c$10() && thing1()) ?? thing2() ?? thing3(); + var _c$8 = _$memo(() => !!thing()); + return () => (_c$8() && thing1()) ?? thing2() ?? thing3(); })() ); return _el$18; diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/conditionalExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/conditionalExpressions/output.js index 2293995c..1db85306 100644 --- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/conditionalExpressions/output.js +++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/conditionalExpressions/output.js @@ -55,13 +55,7 @@ const template7 = (() => { _el$7, (() => { var _c$3 = _$memo(() => state.count > 5); - return () => - _c$3() - ? (() => { - var _c$4 = _$memo(() => !!state.dynamic); - return () => (_c$4() ? best : good()); - })() - : bad; + return () => (_c$3() ? (_$memo(() => !!state.dynamic)() ? best : good()) : bad); })() ); return _el$7; @@ -71,8 +65,8 @@ const template8 = (() => { _$insert( _el$8, (() => { - var _c$5 = _$memo(() => !!(state.dynamic && state.something)); - return () => _c$5() && good(); + var _c$4 = _$memo(() => !!(state.dynamic && state.something)); + return () => _c$4() && good(); })() ); return _el$8; @@ -82,8 +76,8 @@ const template9 = (() => { _$insert( _el$9, (() => { - var _c$6 = _$memo(() => !!state.dynamic); - return () => (_c$6() && good()) || bad; + var _c$5 = _$memo(() => !!state.dynamic); + return () => (_c$5() && good()) || bad; })() ); return _el$9; @@ -98,14 +92,8 @@ const template11 = (() => { _$insert( _el$11, (() => { - var _c$7 = _$memo(() => !!state.a); - return () => - _c$7() - ? a() - : (() => { - var _c$8 = _$memo(() => !!state.b); - return () => (_c$8() ? b() : state.c ? "c" : "fallback"); - })(); + var _c$6 = _$memo(() => !!state.a); + return () => (_c$6() ? a() : _$memo(() => !!state.b)() ? b() : state.c ? "c" : "fallback"); })() ); return _el$11; @@ -169,8 +157,8 @@ const template20 = (() => { _$insert( _el$13, (() => { - var _c$9 = _$memo(() => !!state.dynamic); - return () => (_c$9() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); + var _c$7 = _$memo(() => !!state.dynamic); + return () => (_c$7() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); })() ); return _el$13; @@ -220,8 +208,8 @@ const template29 = (() => { _$insert( _el$18, (() => { - var _c$10 = _$memo(() => !!thing()); - return () => (_c$10() && thing1()) ?? thing2() ?? thing3(); + var _c$8 = _$memo(() => !!thing()); + return () => (_c$8() && thing1()) ?? thing2() ?? thing3(); })() ); return _el$18; diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/conditionalExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/conditionalExpressions/output.js index 8326a45c..f437a304 100644 --- a/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/conditionalExpressions/output.js +++ b/packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/conditionalExpressions/output.js @@ -53,13 +53,7 @@ const template7 = (() => { _el$7, (() => { var _c$3 = _$memo(() => state.count > 5); - return () => - _c$3() - ? (() => { - var _c$4 = _$memo(() => !!state.dynamic); - return () => (_c$4() ? best : good()); - })() - : bad; + return () => (_c$3() ? (_$memo(() => !!state.dynamic)() ? best : good()) : bad); })() ); return _el$7; @@ -69,8 +63,8 @@ const template8 = (() => { _$insert( _el$8, (() => { - var _c$5 = _$memo(() => !!(state.dynamic && state.something)); - return () => _c$5() && good(); + var _c$4 = _$memo(() => !!(state.dynamic && state.something)); + return () => _c$4() && good(); })() ); return _el$8; @@ -80,8 +74,8 @@ const template9 = (() => { _$insert( _el$9, (() => { - var _c$6 = _$memo(() => !!state.dynamic); - return () => (_c$6() && good()) || bad; + var _c$5 = _$memo(() => !!state.dynamic); + return () => (_c$5() && good()) || bad; })() ); return _el$9; @@ -96,14 +90,8 @@ const template11 = (() => { _$insert( _el$11, (() => { - var _c$7 = _$memo(() => !!state.a); - return () => - _c$7() - ? a() - : (() => { - var _c$8 = _$memo(() => !!state.b); - return () => (_c$8() ? b() : state.c ? "c" : "fallback"); - })(); + var _c$6 = _$memo(() => !!state.a); + return () => (_c$6() ? a() : _$memo(() => !!state.b)() ? b() : state.c ? "c" : "fallback"); })() ); return _el$11; @@ -164,8 +152,8 @@ const template20 = (() => { _$insert( _el$13, (() => { - var _c$9 = _$memo(() => !!state.dynamic); - return () => (_c$9() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); + var _c$7 = _$memo(() => !!state.dynamic); + return () => (_c$7() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); })() ); return _el$13; @@ -215,8 +203,8 @@ const template29 = (() => { _$insert( _el$18, (() => { - var _c$10 = _$memo(() => !!thing()); - return () => (_c$10() && thing1()) ?? thing2() ?? thing3(); + var _c$8 = _$memo(() => !!thing()); + return () => (_c$8() && thing1()) ?? thing2() ?? thing3(); })() ); return _el$18; diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/conditionalExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/conditionalExpressions/output.js index 703be7ed..285b65d9 100644 --- a/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/conditionalExpressions/output.js +++ b/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/conditionalExpressions/output.js @@ -54,13 +54,7 @@ const template7 = (() => { _el$7, (() => { var _c$3 = _$memo(() => state.count > 5); - return () => - _c$3() - ? (() => { - var _c$4 = _$memo(() => !!state.dynamic); - return () => (_c$4() ? best : good()); - })() - : bad; + return () => (_c$3() ? (_$memo(() => !!state.dynamic)() ? best : good()) : bad); })() ); return _el$7; @@ -70,8 +64,8 @@ const template8 = (() => { _$insert( _el$8, (() => { - var _c$5 = _$memo(() => !!(state.dynamic && state.something)); - return () => _c$5() && good(); + var _c$4 = _$memo(() => !!(state.dynamic && state.something)); + return () => _c$4() && good(); })() ); return _el$8; @@ -81,8 +75,8 @@ const template9 = (() => { _$insert( _el$9, (() => { - var _c$6 = _$memo(() => !!state.dynamic); - return () => (_c$6() && good()) || bad; + var _c$5 = _$memo(() => !!state.dynamic); + return () => (_c$5() && good()) || bad; })() ); return _el$9; @@ -97,14 +91,8 @@ const template11 = (() => { _$insert( _el$11, (() => { - var _c$7 = _$memo(() => !!state.a); - return () => - _c$7() - ? a() - : (() => { - var _c$8 = _$memo(() => !!state.b); - return () => (_c$8() ? b() : state.c ? "c" : "fallback"); - })(); + var _c$6 = _$memo(() => !!state.a); + return () => (_c$6() ? a() : _$memo(() => !!state.b)() ? b() : state.c ? "c" : "fallback"); })() ); return _el$11; @@ -169,8 +157,8 @@ const template20 = (() => { _$insert( _el$13, (() => { - var _c$9 = _$memo(() => !!state.dynamic); - return () => (_c$9() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); + var _c$7 = _$memo(() => !!state.dynamic); + return () => (_c$7() ? _$createComponent(Comp, {}) : _$createComponent(Comp, {})); })() ); return _el$13; @@ -222,8 +210,8 @@ const template29 = (() => { _$insert( _el$18, (() => { - var _c$10 = _$memo(() => !!thing()); - return () => (_c$10() && thing1()) ?? thing2() ?? thing3(); + var _c$8 = _$memo(() => !!thing()); + return () => (_c$8() && thing1()) ?? thing2() ?? thing3(); })() ); return _el$18;