fix: parenthesize a unary base in the compiled ** expression (#7565)

* fix: parenthesize a unary base in the compiled ** expression

* Add a news fragment

* Move the exponent test next to the other reflex_base.vars tests

* Keep test_var.py as it is on the base branch

---------

Co-authored-by: Masen Furer <m_github@0x26.net>
Co-authored-by: Farhan Ali Raza <62690310+FarhanAliRaza@users.noreply.github.com>

Author: 3 people

packages/reflex-base/news/7565.bugfix.md

@@ -0,0 +1 @@
+Raising a negative number or a negated var to a power, such as `(-State.x) ** 2`, now compiles to valid JavaScript instead of failing the frontend build with "A unary expression with the '-' operator cannot be used as the left operand of an exponentiation expression".

packages/reflex-base/src/reflex_base/vars/number.py

@@ -6,6 +6,7 @@
 import decimal
 import json
 import math
+import re
 from collections.abc import Callable
 from typing import TYPE_CHECKING, Any, NoReturn, TypeVar, overload
 
@@ -647,6 +648,9 @@ def number_modulo_operation(lhs: NumberVar, rhs: NumberVar):
     return f"({lhs!s} % {rhs!s})"
 
 
+_STARTS_WITH_UNARY_OPERATOR = re.compile(r"[-+!~]|(?:typeof|void|delete|await)\b")
+
+
 @binary_number_operation
 def number_exponent_operation(lhs: NumberVar, rhs: NumberVar):
     """Exponentiate two numbers.
@@ -658,7 +662,12 @@ def number_exponent_operation(lhs: NumberVar, rhs: NumberVar):
     Returns:
         The number exponent operation.
     """
-    return f"({lhs!s} ** {rhs!s})"
+    base = str(lhs)
+    # JavaScript rejects a unary expression as the base of `**` (`-2 ** 2` is a
+    # SyntaxError), so a negative literal or a negated var must be parenthesized.
+    if _STARTS_WITH_UNARY_OPERATOR.match(base):
+        base = f"({base})"
+    return f"({base} ** {rhs!s})"
 
 
 @var_operation

tests/units/reflex_base/vars/test_number.py

@@ -0,0 +1,15 @@
+"""Tests for reflex_base.vars.number."""
+
+from reflex_base.vars.base import Var
+from reflex_base.vars.number import LiteralNumberVar
+
+
+def test_exponent_parenthesizes_a_unary_base():
+    """JavaScript rejects a unary expression as the base of `**` (`-2 ** 2` is a SyntaxError)."""
+    x = Var(_js_expr="x").to(int)
+    assert str(LiteralNumberVar.create(-2) ** 3) == "((-2) ** 3)"
+    assert str(LiteralNumberVar.create(-2.5) ** x) == "((-2.5) ** x)"
+    assert str((-x) ** 2) == "((-(x)) ** 2)"
+    assert str(-(x**2)) == "-((x ** 2))"
+    assert str(x**-1) == "(x ** -1)"
+    assert str(2**-x) == "(2 ** -(x))"