Change logic for single record type input #603 🐛🗑️

Author: Freymaurer

playground/src/App.fs

@@ -9,6 +9,5 @@ open Shared
 [<ReactComponent>]
 let App() =
     Html.div [
-        Components.Test(null)
-        Components.Test("Hello")
+        Components.RecordTypeContainer()
     ]

playground/src/Components.fs

@@ -3,12 +3,44 @@ module Components
 open Feliz
 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)
+        ]
+    ]
 
 [<ReactComponent>]
-let Test(input: string | null) =
+let RecordTypeContainer() = 
+    let record = React.useMemo (fun () -> { Name = "Alice"; Job = "Engineer" }) 
+    let records, setRecords = React.useState(Set [record])
     Html.div [
-        match input with
-        | null -> prop.text "Input is null"
-        | notNull ->
-            prop.text (notNull + " from F#")
+        RecordTypeCtx.Provider({|state = records; setState = setRecords|}, [
+            for record in records do
+                SingleRecordTypeInput(record)
+        ])
     ]

playground/src/Main.fs

@@ -4,4 +4,8 @@ open Feliz
 open Browser.Dom
 
 let private root = ReactDOM.createRoot(document.getElementById "root")
-root.render(App.App())
+root.render(
+    React.StrictMode [
+        App.App()
+    ]
+)

playground/src/Shared.fs

@@ -1,18 +1,10 @@
 module Shared
 
-type AB = A | B
-type AbNull = AB | null
-
-type RecordField = { X: string | null }
-type TupleField = string * string | null
-
-type NestedGenerics = { Z : List<List<string | null> | null> | null }
-
 type TestRecord =
     {
         Name: string
-        Age: string | null
+        Age: int
     }
 
     member this.Greet() =
-        sprintf "Hello, my name is %s and I am %s years old." this.Name (this.Age |> function | null -> "unknown" | notNull -> notNull)
+        sprintf "Hello, my name is %s and I am %i years old." this.Name this.Age

src/Feliz.CompilerPlugins/AstUtils.fs

@@ -80,6 +80,11 @@ let isRecord (compiler: PluginHelper) (fableType: Fable.Type) =
     | Fable.Type.DeclaredType (entity, genericArgs) -> compiler.GetEntity(entity).IsFSharpRecord
     | _ -> false
 
+let isAnonymRecord (compiler: PluginHelper) (fableType: Fable.Type) =
+    match fableType with
+    | Fable.Type.AnonymousRecordType _ -> true
+    | _ -> false
+
 let isPropertyList (compiler: PluginHelper) (fableType: Fable.Type) =
     match fableType with
     | Fable.Type.List(genericArg) ->

src/Feliz.CompilerPlugins/CHANGELOG.md

@@ -16,6 +16,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 3.0.0-rc.4 - 2025-11-18
+
+### 🗑️ Deprecated
+
+- Remove transformation of single input record types for ReactComponent #603 (by @Freymaurer)
+
+### 🐛 Fixed
+
+- Fix equality issue for single input record types for ReactComponent #603  (by @Freymaurer)
+
 ## 3.0.0-rc.3 - 2025-11-03
 
 ### 🐛 Fixed

src/Feliz.CompilerPlugins/ReactComponent.fs

@@ -202,7 +202,7 @@ type ReactComponentAttribute(?exportDefault: bool, ?import: string, ?from: strin
             if
                 List.length membArgs = info.Args.Length
                 && info.Args.Length = 1
-                && AstUtils.isRecord compiler info.Args[0].Type
+                && AstUtils.isAnonymousRecord info.Args[0].Type
             then
                 // F# Component { Value = 1 }
                 // JSX <Component Value={1} />
@@ -308,7 +308,7 @@ type ReactComponentAttribute(?exportDefault: bool, ?import: string, ?from: strin
                 | None -> decl
 
             // do not rewrite components accepting records as input
-            if decl.Args.Length = 1 && AstUtils.isRecord compiler decl.Args[0].Type then
+            if decl.Args.Length = 1 && AstUtils.isAnonymousRecord decl.Args[0].Type then
                 // check whether the record type is defined in this file
                 // trigger warning if that is case
                 let definedInThisFileAndIsUpperCase =

src/Feliz/CHANGELOG.md

@@ -16,6 +16,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 3.0.0-rc.10 - 2025-11-18
+
+### 🗑️ Deprecated
+
+- Remove transformation of single input record types for ReactComponent #603 (by @Freymaurer)
+
+### 🐛 Fixed
+
+- Fix equality issue for single input record types for ReactComponent #603  (by @Freymaurer)
+
 ## 3.0.0-rc.9 - 2025-11-03
 
 ### 🔄 Changed

tests/Feliz/Basic.fs

@@ -3,7 +3,6 @@ module Tests.Basic
 open Fable.Core
 open Feliz
 
-
 [<Erase; Mangle(false)>]
 type Components =
 
@@ -172,3 +171,45 @@ type Components =
                 prop.text c
             ]
         ]
+
+module RecordTypeInputTesting =
+
+    [<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)
+            ]
+        ]
+
+    [<ReactComponent>]
+    let RecordTypeContainer() = 
+        let record = React.useMemo (fun () -> { Name = "Alice"; Job = "Developer" }) 
+        let records, setRecords = React.useState(Set [record])
+        Html.div [
+            RecordTypeCtx.Provider({|state = records; setState = setRecords|}, [
+                for record in records do
+                    SingleRecordTypeInput(record)
+            ])
+        ]

tests/Feliz/Basic.test.fs

@@ -234,3 +234,13 @@ describe "Tests for specific style elements" <| fun _ ->
 
         expect(div).toBeInTheDocument()
         expect(div).toHaveStyle("font-size: small")
+
+describe "Record Type Input Tests #606, #603" <| fun _ ->
+
+    test "Component with record type input passes args correctly" <| fun _ ->
+        RTL.render(
+            RecordTypeInputTesting.RecordTypeContainer()
+        ) |> ignore
+
+        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")