Fix props aliasing issue (inner let props) 🐛

Author: Freymaurer

src/Feliz.CompilerPlugins/CHANGELOG.md

@@ -16,6 +16,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 3.0.0-rc.6 - 2025-11-21
+
+### 🐛 Fixed
+
+- Fix `props` aliasing issue. A `let props` inside the react component also created duplication issues (by @Freymaurer)
+
 ## 3.0.0-rc.5 - 2025-11-21
 
 ### 🐛 Fixed

src/Feliz.CompilerPlugins/ReactComponent.fs

@@ -401,7 +401,7 @@ type ReactComponentAttribute(?exportDefault: bool, ?import: string, ?from: strin
                         |> List.unzip
                     let type_ =
                         Fable.Type.AnonymousRecordType(Array.ofList fieldNames, genericArgs, false)
-                    let mutable propsName = "props"
+                    let mutable propsName = "$props"
                     while fieldNames |> List.contains propsName do
                         propsName <- propsName + "_"
 

src/Feliz/CHANGELOG.md

@@ -16,6 +16,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 3.0.0-rc.12 - 2025-11-21
+
+### 🐛 Fixed
+
+- Fix `props` aliasing issue. A `let props` inside the react component also created duplication issues (by @Freymaurer)
+
 ## 3.0.0-rc.11 - 2025-11-21
 
 ### 🐛 Fixed

tests/Feliz/Basic.fs

@@ -172,24 +172,40 @@ type Components =
             ]
         ]
 
+
+module PropsAliasingTesting =
+
+    [<ReactComponent>]
+    let private PropsAliasingInner(props: IReactProperty list, test: string) =
+        Html.div [
+            yield! props
+            prop.children [
+                Html.h1 "Welcome to the Fable Playground!"
+                Html.p "This is a simple playground for experimenting with Fable and Feliz."
+            ]
+        ]
+
     [<ReactComponent>]
-    static member private PropsAliasingInner(props: IReactProperty list, test: string) =
+    let ArgsPropsAliasing(props: IReactProperty list) =
         Html.div [
-            for prop in props do
-                prop
+            yield! props
             prop.children [
+                PropsAliasingInner(props, "test")
                 Html.h1 "Welcome to the Fable Playground!"
                 Html.p "This is a simple playground for experimenting with Fable and Feliz."
             ]
         ]
 
     [<ReactComponent>]
-    static member PropsAliasing(props: IReactProperty list) =
+    let InnerLetBindingPropsAliasing(test: string, counter: int) =
+        
+        let props =
+            [ prop.testId "props-aliasing"
+              prop.id "props-aliasing"
+              prop.style [ style.backgroundColor "lightblue" ] ]
         Html.div [
-            for prop in props do
-                prop
+            yield! props
             prop.children [
-                Components.PropsAliasingInner(props, "test")
                 Html.h1 "Welcome to the Fable Playground!"
                 Html.p "This is a simple playground for experimenting with Fable and Feliz."
             ]

tests/Feliz/Basic.test.fs

@@ -247,12 +247,20 @@ describe "Record Type Input Tests #606, #603" <| fun _ ->
 
 describe "Props Aliasing Tests #687" <| fun _ ->
 
-    test "Component with arg called 'props' must alias main input to 'props_'" <| fun _ ->
+    test "Component with input arg called props should be correctly aliased" <| fun _ ->
         RTL.render(
-            Components.PropsAliasing([prop.style [ style.padding 20; style.backgroundColor.blanchedAlmond ]; prop.testId "main-component"])
+            PropsAliasingTesting.ArgsPropsAliasing([prop.style [ style.padding 20; style.backgroundColor.blanchedAlmond ]; prop.testId "main-component"])
         ) |> ignore
 
         let components = RTL.screen.getAllByTestId "main-component"
         expect(components).toHaveLength(2)
         for c in components do
             expect(c).toBeInTheDocument()
+
+    test "Component inner let binding called props, should be correctly aliased" <| fun _ ->
+        RTL.render(
+            PropsAliasingTesting.InnerLetBindingPropsAliasing("test", 0)
+        ) |> ignore
+
+        let c = RTL.screen.getByTestId "props-aliasing"
+        expect(c).toBeInTheDocument()