Repository: Rezact/Rezact (ts)

Issue:
$: {} throwing an error
**Describe the bug**
A clear and concise description of what the bug is.
I am getting an error while I was trying  to use $:{}. Here is my component code.
```javascript
export default function Contact(props) {
    let $name = "Zafar Ansari"
    let $message = ""

    $: {
        $message = "My name is " + $name
    }
    return (
        <>
            <input value={$name} />
            <p>{$message}</p>
         </>
    )
}
```


**Expected behavior**
$:{} should not throw an error

**Screenshots**
![image](https://github.com/Rezact/Rezact/assets/5788284/e2222918-3a79-432a-bcdc-9827bacff9c5)

**Desktop (please complete the following information):**
 - Ubuntu
 - Browser Microsoft Edge


Pull request:
Fix iss22 compiler append get value bug
fix #22 

Patch:
diff --git a/package.json b/package.json
index 6e0ce2b..4ef46fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rezact/rezact",
-  "version": "1.0.15-beta.20",
+  "version": "1.0.15-beta.21",
   "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/Issue22.tsx b/src/examples/ReactiveComputations/Issue22.tsx
new file mode 100644
index 0000000..65d4b0a
--- /dev/null
+++ b/src/examples/ReactiveComputations/Issue22.tsx
@@ -0,0 +1,17 @@
+export default function Issue22() {
+  let $name = "Zafar Ansari";
+  let $message = "";
+  let $message2 = "";
+
+  $: {
+    $message = "My name is " + $name;
+    $message2 = $name + " is my name";
+  }
+  return (
+    <>
+      <input id="issue-22-input" value={$name} />
+      <p id="issue-22-test">{$message}</p>
+      <p id="issue-22-test2">{$message2}</p>
+    </>
+  );
+}
diff --git a/src/examples/ReactiveComputations/ReactiveComp.tsx b/src/examples/ReactiveComputations/ReactiveComp.tsx
index b0db66f..6b4ea3f 100644
--- a/src/examples/ReactiveComputations/ReactiveComp.tsx
+++ b/src/examples/ReactiveComputations/ReactiveComp.tsx
@@ -1,5 +1,6 @@
 import { MyLayout } from "../Layout/nestedLayout";
 import { Issue14 } from "./Issue14";
+import Issue22 from "./Issue22";
 
 export default function App() {
   let $count = 0;
@@ -19,6 +20,8 @@ export default function App() {
       <ComposeTest />
       <hr />
       <Issue14 />
+      <hr />
+      <Issue22 />
     </>
   );
 }
diff --git a/src/lib/rezact/vite-plugin.ts b/src/lib/rezact/vite-plugin.ts
index 00c155f..424ff77 100644
--- a/src/lib/rezact/vite-plugin.ts
+++ b/src/lib/rezact/vite-plugin.ts
@@ -731,6 +731,7 @@ function compileRezact(ast) {
 
     BinaryExpression(node: any, _state, ancestors: any) {
       const name = node.left.name;
+      if (hasAncestor(ancestors, "LabeledStatement")) return;
       const rightName = node.right.name;
       if (rightName && rightName[0] === "$") {
         appendGetValue(node.right);


Test patch:
diff --git a/src/examples/ReactiveComputations/reactiveComp.test.ts b/src/examples/ReactiveComputations/reactiveComp.test.ts
index d1390d2..b6649f6 100644
--- a/src/examples/ReactiveComputations/reactiveComp.test.ts
+++ b/src/examples/ReactiveComputations/reactiveComp.test.ts
@@ -2,6 +2,9 @@ import { describe, expect, it } from "vitest";
 import { screen, waitFor } from "@testing-library/dom";
 import { render } from "rezact";
 import Page from "./ReactiveComp";
+import userEvent from "@testing-library/user-event";
+
+const user = userEvent.setup();
 
 describe("Reactive Computations", () => {
   it("Doubled", async () => {
@@ -67,6 +70,22 @@ describe("Reactive Computations", () => {
     expect(div3?.textContent).toBe("height: 20");
     expect(div4?.textContent).toBe("area: 200");
   });
+
+  it("Issue 22 Compiler should not append .get() to code inside Labeled statements prematurely", async () => {
+    const inp = document.getElementById("issue-22-input") as HTMLInputElement;
+    const testP = document.getElementById("issue-22-test") as HTMLDivElement;
+    const testP2 = document.getElementById("issue-22-test2") as HTMLDivElement;
+
+    expect(inp.value).toBe("Zafar Ansari");
+    expect(testP.textContent).toBe("My name is Zafar Ansari");
+    expect(testP2.textContent).toBe("Zafar Ansari is my name");
+
+    await user.type(inp, "Zafar");
+
+    expect(inp.value).toBe("Zafar AnsariZafar");
+    expect(testP.textContent).toBe("My name is Zafar AnsariZafar");
+    expect(testP2.textContent).toBe("Zafar AnsariZafar is my name");
+  });
 });
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));