Repository: Rezact/Rezact (ts)

Issue:
Cannot use derived state -  Internal server error: ancestors.at is not a function
**Describe the bug**
whenever im creating a derived state, it gave me an error.

**To Reproduce**
Here's my code:
```
let $name = 'jesen'

let $width = 10;
let $height = 20;
let $area = $width * $height

export const TestComponent = () => {
    return (
        <div>
            <div>Hallo, {$name}</div>
            <div>width: {$width}</div>
            <div>height: {$height}</div>
            <div>area: {$area}</div>
        </div>
    )
}
```

**Expected behavior**
the $area variable should give me a calculated value based on the width and height. 

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
 - OS: Windows 11
 - Browser: Brave
 - Version 1.58.131

**Additional context**
here's the full error:
```12:13:11 PM [vite] page reload src/components/TestComponent.tsx
ancestors.at is not a function
12:13:12 PM [vite] Internal server error: ancestors.at is not a function
  Plugin: transform-rezact
  File: C:/Users/jesse/rezact-project/rezact-project/src/components/TestComponent.tsx
      at BinaryExpression (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/vite-plugin.js:510:109)
      at c (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6789:18)
      at Object.skipThrough (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6794:37)
      at c (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6788:22)
      at Object.base.VariableDeclarator (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6893:20)
      at c (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6788:22)
      at Object.base.VariableDeclaration (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6888:5)
      at c (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6788:22)
      at Object.skipThrough (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6794:37)
      at c (file:///C:/Users/jesse/rezact-project/rezact-project/node_modules/@rezact/rezact/magic-string.es-d610b484.js:6788:22)
```


Pull request:
fix #14 Derived Area is not computed
fix #14 

Patch:
diff --git a/package.json b/package.json
index 24e227d..7c4f638 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rezact/rezact",
-  "version": "1.0.15-beta.13",
+  "version": "1.0.15-beta.14",
   "type": "module",
   "description": "Intuitive Reactivity, Simplified State. Embrace a modern UI framework that encourages direct data mutations, offers module-level reactivity, and simplifies component design. With Rezact, you get the power of reactivity without the boilerplate. Dive into a seamless development experience tailored for today's web.",
   "main": "index.cjs",
diff --git a/src/examples/ReactiveComputations/Issue14.tsx b/src/examples/ReactiveComputations/Issue14.tsx
new file mode 100644
index 0000000..b9bb760
--- /dev/null
+++ b/src/examples/ReactiveComputations/Issue14.tsx
@@ -0,0 +1,16 @@
+let $name = "jesen";
+
+let $width = 10;
+let $height = 20;
+let $area = $width * $height;
+
+export const Issue14 = () => {
+  return (
+    <div>
+      <div id="iss14-1">Hallo, {$name}</div>
+      <div id="iss14-2">width: {$width}</div>
+      <div id="iss14-3">height: {$height}</div>
+      <div id="iss14-4">area: {$area}</div>
+    </div>
+  );
+};
diff --git a/src/examples/ReactiveComputations/ReactiveComp.tsx b/src/examples/ReactiveComputations/ReactiveComp.tsx
index 8d9aa13..b0db66f 100644
--- a/src/examples/ReactiveComputations/ReactiveComp.tsx
+++ b/src/examples/ReactiveComputations/ReactiveComp.tsx
@@ -1,4 +1,5 @@
 import { MyLayout } from "../Layout/nestedLayout";
+import { Issue14 } from "./Issue14";
 
 export default function App() {
   let $count = 0;
@@ -17,6 +18,7 @@ export default function App() {
       <hr />
       <ComposeTest />
       <hr />
+      <Issue14 />
     </>
   );
 }
diff --git a/src/lib/rezact/vite-plugin.ts b/src/lib/rezact/vite-plugin.ts
index fd1f9d8..6f8eb11 100644
--- a/src/lib/rezact/vite-plugin.ts
+++ b/src/lib/rezact/vite-plugin.ts
@@ -735,6 +735,10 @@ function compileRezact(ast) {
 
     BinaryExpression(node: any, _state, ancestors: any) {
       const name = node.left.name;
+      const rightName = node.right.name;
+      if (rightName && rightName[0] === "$") {
+        appendGetValue(node.right);
+      }
       if (name && name[0] === "$") {
         appendGetValue(node.left);
       }


Test patch:
diff --git a/src/examples/ReactiveComputations/reactiveComp.test.ts b/src/examples/ReactiveComputations/reactiveComp.test.ts
index eabb47b..d1390d2 100644
--- a/src/examples/ReactiveComputations/reactiveComp.test.ts
+++ b/src/examples/ReactiveComputations/reactiveComp.test.ts
@@ -55,6 +55,18 @@ describe("Reactive Computations", () => {
     expect(button2.textContent).toBe("4");
     expect(button3.textContent).toBe("4");
   });
+
+  it("Issue 14 both sides of the binary expression are handled in the compiler", async () => {
+    const div1 = document.getElementById("iss14-1");
+    const div2 = document.getElementById("iss14-2");
+    const div3 = document.getElementById("iss14-3");
+    const div4 = document.getElementById("iss14-4");
+
+    expect(div1?.textContent).toBe("Hallo, jesen");
+    expect(div2?.textContent).toBe("width: 10");
+    expect(div3?.textContent).toBe("height: 20");
+    expect(div4?.textContent).toBe("area: 200");
+  });
 });
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));