Fix props aliasing error 🐛

Author: Freymaurer

.config/dotnet-tools.json

@@ -3,7 +3,7 @@
   "isRoot": true,
   "tools": {
     "fable": {
-      "version": "5.0.0-alpha.14",
+      "version": "5.0.0-alpha.15",
       "commands": [
         "fable"
       ],

playground/src/App.fs

@@ -9,5 +9,5 @@ open Shared
 [<ReactComponent>]
 let App() =
     Html.div [
-        Components.RecordTypeContainer()
+        Components.Main()
     ]

playground/src/Components.fs

@@ -5,42 +5,20 @@ open Fable.Core
 open Fable.Core.JsInterop
 open Shared
 
-[<AttachMembers>]
-type private RecordTypeInput = 
-    { 
-        Name: string; 
-        Job: string;  
-    }
-
-    member this.Greet() =
-        $"Hello, my name is {this.Name} and I work as a {this.Job}."
-
-let private RecordTypeCtx =
-    let init = Set.empty<RecordTypeInput>
-    let setter = fun (_: Set<RecordTypeInput>) -> () 
-    React.createContext({|state = init; setState = setter|})
 
 [<ReactComponent>]
-let private SingleRecordTypeInput(recordInput: RecordTypeInput) =
-    let ctx = React.useContext RecordTypeCtx
-    Html.div [
-        Html.div [
-            prop.testId "single-greet"
-            prop.text (recordInput.Greet())
-        ]
-        Html.div [
-            prop.testId "single-exists"
-            prop.text (ctx.state |> Set.contains recordInput |> string)
-        ]
+let LogBtn (nb:int, children: ReactElement, props: seq<IReactProperty>) =
+    Html.button [
+        for prop in props do prop // same as yield! props
+        prop.onClick (fun _ -> printfn $"You clicked me {nb}") 
+        prop.children children
     ]
 
+
 [<ReactComponent>]
-let RecordTypeContainer() = 
-    let record = React.useMemo (fun () -> { Name = "Alice"; Job = "Engineer" }) 
-    let records, setRecords = React.useState(Set [record])
+let Main() =
     Html.div [
-        RecordTypeCtx.Provider({|state = records; setState = setRecords|}, [
-            for record in records do
-                SingleRecordTypeInput(record)
-        ])
+        Html.h1 "Welcome to the Fable Playground!"
+        Html.p "This is a simple playground for experimenting with Fable and Feliz."
+        LogBtn(12, Html.text "Click me", [ prop.style [style.backgroundColor.green; style.color.white]])
     ]

src/Feliz.CompilerPlugins/AstUtils.fs

@@ -58,9 +58,9 @@ let rec flattenList (head: Fable.Expr) (tail: Fable.Expr) =
         match tail with
         | Fable.Expr.Value (value, range) ->
             match value with
-            | Fable.ValueKind.NewList(Some(nextHead, nextTail), listType) ->
+            | Fable.ValueKind.NewList(Some(nextHead, nextTail), _) ->
                 yield! flattenList nextHead nextTail
-            | Fable.ValueKind.NewList(None, listType) ->
+            | Fable.ValueKind.NewList(None, _) ->
                 yield! [ ]
             | _ ->
                 yield! [ Fable.Expr.Value (value, range) ]
@@ -77,7 +77,7 @@ let makeImport (selector: string) (path: string) =
 let isRecord (compiler: PluginHelper) (fableType: Fable.Type) =
     match fableType with
     | Fable.Type.AnonymousRecordType _ -> true
-    | Fable.Type.DeclaredType (entity, genericArgs) -> compiler.GetEntity(entity).IsFSharpRecord
+    | Fable.Type.DeclaredType (entity, _) -> compiler.GetEntity(entity).IsFSharpRecord
     | _ -> false
 
 let isAnonymRecord (compiler: PluginHelper) (fableType: Fable.Type) =
@@ -89,7 +89,7 @@ let isPropertyList (compiler: PluginHelper) (fableType: Fable.Type) =
     match fableType with
     | Fable.Type.List(genericArg) ->
         match genericArg with
-        | Fable.Type.DeclaredType (entity, genericArgs) -> entity.FullName.EndsWith "IReactProperty"
+        | Fable.Type.DeclaredType (entity, _) -> entity.FullName.EndsWith "IReactProperty"
         | _ -> false
     | _ -> false
 
@@ -103,16 +103,16 @@ let isAnonymousRecord (fableType: Fable.Type) =
 
 let isReactElement (fableType: Fable.Type) =
     match fableType with
-    | Fable.Type.DeclaredType (entity, genericArgs) -> entity.FullName.EndsWith "ReactElement"
+    | Fable.Type.DeclaredType (entity, _) -> entity.FullName.EndsWith "ReactElement"
     | _ -> false
 
 let recordHasField name (compiler: PluginHelper) (fableType: Fable.Type) =
     match fableType with
-    | Fable.Type.AnonymousRecordType (fieldNames, genericArgs, _isStruct) ->
+    | Fable.Type.AnonymousRecordType (fieldNames, _, _) ->
         fieldNames
         |> Array.exists (fun field -> field = name)
 
-    | Fable.Type.DeclaredType (entity, genericArgs) ->
+    | Fable.Type.DeclaredType (entity, _) ->
         compiler.GetEntity(entity).FSharpFields
         |> List.exists (fun field -> field.Name = name)
 

src/Feliz.CompilerPlugins/CHANGELOG.md

@@ -7,15 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 **Types of changes**
 
--   ✨ `Added` for new features.
--   🔄 `Changed` for changes in existing functionality.
--   🗑️ `Deprecated` for soon-to-be removed features.
--   🔥 `Removed` for now removed features.
--   🐛 `Fixed` for any bug fixes.
--   🔒 `Security` in case of vulnerabilities.
+- ✨ `Added` for new features.
+- 🔄 `Changed` for changes in existing functionality.
+- 🗑️ `Deprecated` for soon-to-be removed features.
+- 🔥 `Removed` for now removed features.
+- 🐛 `Fixed` for any bug fixes.
+- 🔒 `Security` in case of vulnerabilities.
 
 ## [Unreleased]
 
+## 3.0.0-rc.5 - 2025-11-21
+
+### 🐛 Fixed
+
+- Fix `props` aliasing issue. when passing a arg with the name `props` to a `[<ReactComponent>]` it threw with duplication error (by @Freymaurer)
+
 ## 3.0.0-rc.4 - 2025-11-18
 
 ### 🗑️ Deprecated
@@ -24,7 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 🐛 Fixed
 
-- Fix equality issue for single input record types for ReactComponent #603  (by @Freymaurer)
+- Fix equality issue for single input record types for ReactComponent #603 (by @Freymaurer)
 
 ## 3.0.0-rc.3 - 2025-11-03
 
@@ -57,4 +63,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### ✨ Added
 
 - Last release before start of Changelog
-

src/Feliz.CompilerPlugins/ReactComponent.fs

@@ -319,7 +319,7 @@ type ReactComponentAttribute(?exportDefault: bool, ?import: string, ?from: strin
                             let classEntity = compiler.GetEntity(classDecl.Entity)
 
                             match decl.Args[0].Type with
-                            | Type.DeclaredType(entity, _genericArgs) ->
+                            | Type.DeclaredType(entity, _) ->
                                 let declaredEntity = compiler.GetEntity(entity)
 
                                 if
@@ -385,26 +385,27 @@ type ReactComponentAttribute(?exportDefault: bool, ?import: string, ?from: strin
                             sprintf
                                 "Function component '%s' is using a single tupled argument as input parameter. This can create issues with correct transpilation. "
                                 decl.Name
-                            "To fix this issue, consider spreading the arguments or using a (anonymous) record type."
+                            "To fix this issue, consider spreading the arguments or using a anonymous record type."
                         ]
                     compiler.LogWarning(warningMsg, ?range = decl.Body.Range)
 
                 let propsArg =
+                    let fieldNames, genericArgs =
+                        decl.Args 
+                        |> List.mapi (fun i arg -> 
+                            if isPredictedTuple then
+                                "tuple_" + string i, arg.Type
+                            else
+                                arg.DisplayName, arg.Type
+                        ) 
+                        |> List.unzip
                     let type_ =
-                        let fieldNames, genericArgs =
-                            decl.Args 
-                            |> List.mapi (fun i arg -> 
-                                if isPredictedTuple then
-                                    "tuple_" + string i, arg.Type
-                                else
-                                    arg.DisplayName, arg.Type
-                            ) 
-                            |> List.unzip
-
                         Fable.Type.AnonymousRecordType(Array.ofList fieldNames, genericArgs, false)
-                    // let name = sprintf "%sInputProps" (AstUtils.camelCase decl.Name)
-                    let name = "props"
-                    AstUtils.makeIdent type_ name
+                    let mutable propsName = "props"
+                    while fieldNames |> List.contains propsName do
+                        propsName <- propsName + "_"
+
+                    AstUtils.makeIdent type_ propsName
 
                 let propBindings =
                     ([], decl.Args)

src/Feliz/CHANGELOG.md

@@ -7,15 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 **Types of changes**
 
--   ✨ `Added` for new features.
--   🔄 `Changed` for changes in existing functionality.
--   🗑️ `Deprecated` for soon-to-be removed features.
--   🔥 `Removed` for now removed features.
--   🐛 `Fixed` for any bug fixes.
--   🔒 `Security` in case of vulnerabilities.
+- ✨ `Added` for new features.
+- 🔄 `Changed` for changes in existing functionality.
+- 🗑️ `Deprecated` for soon-to-be removed features.
+- 🔥 `Removed` for now removed features.
+- 🐛 `Fixed` for any bug fixes.
+- 🔒 `Security` in case of vulnerabilities.
 
 ## [Unreleased]
 
+## 3.0.0-rc.11 - 2025-11-21
+
+### 🐛 Fixed
+
+- Fix `props` aliasing issue. when passing a arg with the name `props` to a `[<ReactComponent>]` it threw with duplication error (by @Freymaurer)
+
 ## 3.0.0-rc.10 - 2025-11-18
 
 ### 🗑️ Deprecated
@@ -24,7 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 🐛 Fixed
 
-- Fix equality issue for single input record types for ReactComponent #603  (by @Freymaurer)
+- Fix equality issue for single input record types for ReactComponent #603 (by @Freymaurer)
 
 ## 3.0.0-rc.9 - 2025-11-03
 
@@ -60,7 +66,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### ✨ Added
 
-- `style.fontsize._` module with `smaller`, `larger`, ... styles. By @Linschlager #613 
+- `style.fontsize._` module with `smaller`, `larger`, ... styles. By @Linschlager #613
 
 ### 🔄 Changed
 
@@ -95,4 +101,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### ✨ Added
 
 - Last release before start of Changelog
-

tests/Feliz/Basic.fs

@@ -172,6 +172,29 @@ type Components =
             ]
         ]
 
+    [<ReactComponent>]
+    static member private PropsAliasingInner(props: IReactProperty list, test: string) =
+        Html.div [
+            for prop in props do
+                prop
+            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 PropsAliasing(props: IReactProperty list) =
+        Html.div [
+            for prop in props do
+                prop
+            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."
+            ]
+        ]
+
 module RecordTypeInputTesting =
 
     [<AttachMembers>]

tests/Feliz/Basic.test.fs

@@ -244,3 +244,15 @@ describe "Record Type Input Tests #606, #603" <| fun _ ->
 
         expect(RTL.screen.getByTestId "single-greet").toHaveTextContent("Hello, my name is Alice and I work as a Developer.")
         expect(RTL.screen.getByTestId "single-exists").toHaveTextContent("true")
+
+describe "Props Aliasing Tests #687" <| fun _ ->
+
+    test "Component with arg called 'props' must alias main input to 'props_'" <| fun _ ->
+        RTL.render(
+            Components.PropsAliasing([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()