fable 5, useElmish rework

.config/dotnet-tools.json

@@ -3,7 +3,7 @@
   "isRoot": true,
   "tools": {
     "fable": {
-      "version": "5.0.0-rc.5",
+      "version": "5.0.0",
       "commands": [
         "fable"
       ],
@@ -31,4 +31,4 @@
       "rollForward": false
     }
   }
-}
+}

.editorconfig

@@ -14,6 +14,8 @@ insert_final_newline = true
 [*.{fs,fsx,fsproj,props,}]
 indent_size = 4
 
-[*.fs]
+[*.{fs,fsx}]
 fsharp_multiline_bracket_style = stroustrup
 fsharp_newline_before_multiline_computation_expression = false
+fsharp_multi_line_lambda_closing_newline = true
+fsharp_max_array_or_list_width = 60

.gitignore

@@ -214,3 +214,4 @@ dist
 fableoutput/
 # keep fableoutput from older docs versions
 !docs/versioned_docs/**/fableoutput
+tests/Transpile.Tests/temp/

.vscode/settings.json

@@ -1,7 +1,28 @@
 {
-    "FSharp.showExplorerOnStartup": false,
-    "FSharp.simplifyNameAnalyzer": false,
-    "FSharp.linter": false,
-    "FSharp.lineLens.enabled": "never",
-    "FSharp.inlayHints.typeAnnotations": false
+    "tailwindCSS.includeLanguages": {
+        "fsharp": "html"
+    },
+    "tailwindCSS.experimental.classRegex": [
+        "\\.className\\s+\"([^\"]*)\"",
+        ["\\.className\\s+\\[([^\\]]*)\\]", "\"([^\"]*)\""]
+    ],
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.hg": true,
+        "**/CVS": true,
+        "**/.DS_Store": true,
+        "**/Thumbs.db": true,
+        "**/.vs": true,
+        "**/.idea": true,
+        "**/.ionide": true,
+        "**/bin": true,
+        "**/obj": true,
+        "**/deploy": true,
+    },
+    "[fsharp]": {
+        "editor.inlayHints.enabled": "off",
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "Ionide.Ionide-fsharp"
+    },
 }

Feliz.sln

@@ -81,6 +81,8 @@ Project("{6EC3EE1D-3C4E-46DD-8F32-0CC8E7565705}") = "Vitest.ReactTestingLibrary.
 EndProject
 Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "Feliz.CompilerPlugins.Tests", "tests\Feliz.CompilerPlugin\Feliz.CompilerPlugins.Tests.fsproj", "{9D635AAD-8CED-84C7-CB46-7BA1776B4589}"
 EndProject
+Project("{6EC3EE1D-3C4E-46DD-8F32-0CC8E7565705}") = "Transpile.Tests", "tests\Transpile.Tests\Transpile.Tests.fsproj", "{7A861A6A-4CC6-4A7E-B61B-180FA4A26B48}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -199,6 +201,10 @@ Global
 		{9D635AAD-8CED-84C7-CB46-7BA1776B4589}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{9D635AAD-8CED-84C7-CB46-7BA1776B4589}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{9D635AAD-8CED-84C7-CB46-7BA1776B4589}.Release|Any CPU.Build.0 = Release|Any CPU
+		{7A861A6A-4CC6-4A7E-B61B-180FA4A26B48}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{7A861A6A-4CC6-4A7E-B61B-180FA4A26B48}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{7A861A6A-4CC6-4A7E-B61B-180FA4A26B48}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{7A861A6A-4CC6-4A7E-B61B-180FA4A26B48}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -232,6 +238,7 @@ Global
 		{032B3C6B-975D-423C-9FED-0F3D60BC5831} = {5BED55CF-2757-46F0-98E9-063F63DD2BCD}
 		{2293DA74-1D02-4894-A43E-96009C77F6CF} = {5BED55CF-2757-46F0-98E9-063F63DD2BCD}
 		{9D635AAD-8CED-84C7-CB46-7BA1776B4589} = {5BED55CF-2757-46F0-98E9-063F63DD2BCD}
+		{7A861A6A-4CC6-4A7E-B61B-180FA4A26B48} = {5BED55CF-2757-46F0-98E9-063F63DD2BCD}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {08484504-7B02-4898-B0AD-51F03D2767E6}

docs/docs/ecosystem/04_Hooks/Feliz.UseElmish.mdx

@@ -104,7 +104,9 @@ open Browser.Dom
 ReactDOM.render(App(), document.getElementById "feliz-app")
 ```
 
-> The dependencies array follows the same rules of `React.useEffect`
+> The dependencies array is compared using F# structural equality (`=` / `<>`). `React.useElmish` re-initializes when the dependencies become structurally different.
+>
+> This differs from `React.useEffect`, which compares dependency entries using `Object.is`.
 
 ### Combining with other hooks
 

docs/versioned_docs/version-2.9.0/ecosystem/03_Hooks/Feliz.UseElmish.mdx

@@ -107,7 +107,9 @@ open Browser.Dom
 ReactDOM.render(App(), document.getElementById "feliz-app")
 ```
 
-> The dependencies array follows the same rules of `React.useEffect`
+> The dependencies array is compared using F# structural equality (`=` / `<>`). `React.useElmish` re-initializes when the dependencies become structurally different.
+>
+> This differs from `React.useEffect`, which compares dependency entries using `Object.is`.
 
 ### Combining with other hooks
 

playground/src/App.fsproj

@@ -7,6 +7,7 @@
 
   <ItemGroup>
     <Compile Include="Shared.fs" />
+    <Compile Include="UseElmishExample.fs" />
     <Compile Include="CodeSplitting.fs" />
     <Compile Include="Components.fs" />
     <Compile Include="App.fs" />
@@ -15,6 +16,7 @@
 
   <ItemGroup>
     <ProjectReference Include="..\..\src\Feliz\Feliz.fsproj" />
+    <ProjectReference Include="..\..\src\Feliz.UseElmish\Feliz.UseElmish.fsproj" />
   </ItemGroup>
 
   <ItemGroup>

playground/src/CodeSplitting.fs

@@ -6,9 +6,42 @@ open Feliz
 [<Erase; Mangle(false)>]
 type CodeSplitting =
 
-    [<ReactComponent(true)>]
-    static member MyCodeSplitComponent (?text: string) =
+    [<ReactComponent>]
+    static member MyCodeSplitComponent
+        (text: string, ?testId: string, ?className: string, ?onClick: Browser.Types.MouseEvent -> unit)
+        =
         Html.div [
-            prop.testId "async-load"
-            prop.text (Option.defaultValue "Loaded" text)
+            if testId.IsSome then
+                prop.testId testId.Value
+            if className.IsSome then
+                prop.className className.Value
+            if onClick.IsSome then
+                prop.onClick onClick.Value
+            prop.text text
         ]
+
+    [<ReactComponent>]
+    static member MyCodeSplitComponentCurried (text: string) (testId: string option) =
+        Html.div [
+            if testId.IsSome then
+                prop.testId testId.Value
+            prop.text text
+        ]
+
+    [<ReactComponent>]
+    static member MyCodeSplitComponentWithAnoRecord
+        (props:
+            {|
+                text: string
+                testId: string option
+            |})
+        =
+        Html.div [
+            if props.testId.IsSome then
+                prop.testId props.testId.Value
+            prop.text props.text
+        ]
+
+    [<ReactComponent(true)>]
+    static member MyCodeSplitComponentTupledWithPrimitives(x: int, y: float) =
+        Html.div [ prop.text (sprintf "%i-%f" x y) ]