Repository: Rezact/Rezact (ts)

Issue:
Signal is not passed properly to the value attribute when passed into a component via props and accessed using dot notation.  ie: `props.$value`
**Describe the bug**
Signal is not passed properly to the value attribute when passed into a component via props and accessed using dot notation.  ie: `props.$value`

**To Reproduce**
```tsx

function NumInput(props) {
  return <input type="number" value={props.$count} />;
}

export function Page() {
  let $myCount = 10;

  return (
    <>
      <h1>Input Value Attribute Passed with dot notation</h1>
      <NumInput $count={$myCount} />
      <p>{$myCount}</p>
    </>
  );
}

```

Gets transformed into this:

<img width="1052" alt="image" src="https://github.com/Rezact/Rezact/assets/2927894/31497cf0-db3f-4057-b90a-24b4770cb4aa">


**Expected behavior**

The `.get()` call should not be appended to this value... it needs to be passed in as is.

**Additional context**

This does not happen when the props are destructured like this:

```jsx
function NumInput2({ $count }) {
  return <input type="number" value={$count} />;
}
```

The output is correct: 

<img width="871" alt="image" src="https://github.com/Rezact/Rezact/assets/2927894/ba23102c-52b3-4787-9eda-354ed5238d4a">




Pull request:
Fix iss20 value input prop dot notation
Fix #20 

Patch:
diff --git a/package.json b/package.json
index b1cae34..6e0ce2b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rezact/rezact",
-  "version": "1.0.15-beta.19",
+  "version": "1.0.15-beta.20",
   "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/components/appRouter.ts b/src/components/appRouter.ts
index 660f12b..b00798d 100644
--- a/src/components/appRouter.ts
+++ b/src/components/appRouter.ts
@@ -83,4 +83,8 @@ router.addRoute(
   () => import("src/examples/FormValidation/FormValidation")
 );
 
+router.addRoute(
+  "/value-attribute-dot-notation",
+  () => import("src/examples/ValueAttributeDotNotation/ValueAttributeDot")
+);
 export { router };
diff --git a/src/examples/Layout/nestedLayout.tsx b/src/examples/Layout/nestedLayout.tsx
index d334483..9f876fe 100644
--- a/src/examples/Layout/nestedLayout.tsx
+++ b/src/examples/Layout/nestedLayout.tsx
@@ -74,6 +74,11 @@ export function MyLayout({ Component, pageProps }: any) {
         <li>
           <a href="/form-validation">Form Validator</a>
         </li>
+        <li>
+          <a href="/value-attribute-dot-notation">
+            Input Value Attribute passed with Dot Notation
+          </a>
+        </li>
         <li>
           <a href="/asdfasdfasdfasdf">A Route that does not exist</a>
         </li>
diff --git a/src/examples/ValueAttributeDotNotation/ValueAttributeDot.tsx b/src/examples/ValueAttributeDotNotation/ValueAttributeDot.tsx
new file mode 100644
index 0000000..f3b5c3a
--- /dev/null
+++ b/src/examples/ValueAttributeDotNotation/ValueAttributeDot.tsx
@@ -0,0 +1,24 @@
+import { MyLayout } from "../Layout/nestedLayout";
+
+function NumInput(props) {
+  return <input type="number" value={props.$count} />;
+}
+
+function NumInput2({ $count }) {
+  return <input type="number" value={$count} />;
+}
+
+export function Page() {
+  let $myCount = 10;
+
+  return (
+    <>
+      <h1>Input Value Attribute Passed with dot notation</h1>
+      <NumInput $count={$myCount} />
+      <NumInput2 $count={$myCount} />
+      <p id="count-value">{$myCount}</p>
+    </>
+  );
+}
+
+export const Layout = MyLayout;
diff --git a/src/examples/ValueAttributeDotNotation/index.html b/src/examples/ValueAttributeDotNotation/index.html
new file mode 100644
index 0000000..cb2b361
--- /dev/null
+++ b/src/examples/ValueAttributeDotNotation/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Rezact + TS</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/examples/ValueAttributeDotNotation/main.ts b/src/examples/ValueAttributeDotNotation/main.ts
new file mode 100644
index 0000000..c5d00b9
--- /dev/null
+++ b/src/examples/ValueAttributeDotNotation/main.ts
@@ -0,0 +1,5 @@
+import { render } from "rezact";
+import { Page } from "./ValueAttributeDot";
+
+const app = document.getElementById("app");
+render(app, Page);
diff --git a/src/lib/rezact/vite-plugin.ts b/src/lib/rezact/vite-plugin.ts
index e4a79a5..00c155f 100644
--- a/src/lib/rezact/vite-plugin.ts
+++ b/src/lib/rezact/vite-plugin.ts
@@ -612,6 +612,8 @@ function compileRezact(ast) {
           return wrapInSetValue(ancestors[anceLen], node.property);
         }
 
+        if (ancestors.at(-2).key?.name === "value") return;
+
         appendGetValue(node.property);
       } else if (
         node.object.name &&


Test patch:
diff --git a/src/examples/ValueAttributeDotNotation/valueAttrDot.test.ts b/src/examples/ValueAttributeDotNotation/valueAttrDot.test.ts
new file mode 100644
index 0000000..706a48e
--- /dev/null
+++ b/src/examples/ValueAttributeDotNotation/valueAttrDot.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { screen } from "@testing-library/dom";
+import { render } from "rezact";
+import { Page } from "./ValueAttributeDot";
+import { delay } from "src/lib/utils";
+import userEvent from "@testing-library/user-event";
+
+const user = userEvent.setup();
+
+describe("Input Value Attribute suite", () => {
+  it("Works with Dot notation", async () => {
+    render(document.body, Page);
+    await delay(100);
+    const allHeaders = screen.getAllByText(/input value attribute/i);
+    expect(allHeaders).toHaveLength(1);
+
+    const pValue = document.getElementById("count-value");
+    const inputs = document.querySelectorAll("input");
+    const numInput1 = inputs[0] as HTMLInputElement;
+    const numInput2 = inputs[1] as HTMLInputElement;
+
+    expect(numInput1.value).toBe("10");
+    expect(numInput2.value).toBe("10");
+    expect(pValue?.textContent).toBe("10");
+
+    await user.type(numInput1, "5");
+
+    expect(numInput1.value).toBe("105");
+    expect(numInput2.value).toBe("105");
+    expect(pValue?.textContent).toBe("105");
+
+    await user.type(numInput2, "5");
+
+    expect(numInput1.value).toBe("1055");
+    expect(numInput2.value).toBe("1055");
+    expect(pValue?.textContent).toBe("1055");
+  });
+});