Merge pull request #689 from fable-hub/v3/memo/predefined_equality

Add support for predefined equality functions for `[<ReactMemoComponnt>]`

Author: Freymaurer

docs/docs/api-docs/feliz/react-component.mdx

@@ -199,7 +199,24 @@ import RawMemoAttribute from '!!raw-loader!../../feliz-docs/Examples/React/MemoA
   <MemoAttribute />
 </ComponentRender>
 
-### areEqual with js emit
+### areEqual - Feliz predefined functions
+
+Feliz features prewritten equality functions for common scenarios that can be used with the `areEqualFn` parameter of the `[<ReactMemoComponent>]` attribute. This parameter
+accepts an integer value that corresponds to the desired equality function:
+
+- `0`/`AreEqualFn.FsEquals` - Uses F#'s built-in equality comparison (`=`) for all props. So everything that normally returns true when using F# equality `=` will return true here as well.
+- `1`/`AreEqualFn.FsEqualsButFunctions` - Uses F#'s built-in equality comparison (`=`) for all props, but ignores all functions in props. This is useful when you have functions as props that are recreated on each render, but you want to ignore them for equality checks.
+
+You can also use defined integer constants for example: `AreEqualFn.FsEquals` for better readability.
+
+import MemoAttributeAreEqualFn from '../../feliz-docs/fableoutput/Examples/Feliz/ReactMemoComponentAreEqualFn'
+import RawMemoAttributeAreEqualFn from '!!raw-loader!../../feliz-docs/Examples/Feliz/ReactMemoComponentAreEqualFn.fs'
+
+<ComponentRender code={RawMemoAttributeAreEqualFn} defaultOpen>
+  <MemoAttributeAreEqualFn />
+</ComponentRender>
+
+### areEqual - JavaScript code emit
 
 You can pass a custom equality function to the `[<ReactMemoComponent>]` attribute using the `areEqual` parameter. The value must be a JavaScript function expressed as a string. This function will be used to determine whether the component should re-render based on its props.
 
@@ -242,7 +259,7 @@ import RawMemoAttributeAreEqualEmit from '!!raw-loader!../../feliz-docs/Examples
   <MemoAttributeAreEqualEmit />
 </ComponentRender>
 
-### areEqual with F# function
+### areEqual - F# function call emit
 
 We can also emit a call to a f# function defined in the same file. This function must have the correct signature to be used as an equality function.
 

docs/docs/ecosystem/01_Tools/Glutinum.mdx

@@ -0,0 +1,17 @@
+---
+hide_title: true
+---
+
+import MarkdownFetcher from '@site/src/components/MarkdownFetcher';
+
+<MarkdownFetcher 
+  mdSource='https://raw.githubusercontent.com/glutinum-org/cli/refs/heads/main/README.md'
+  name='Glutinum'
+  github='https://github.com/glutinum-org/cli'
+  docs='https://github.com/glutinum-org/cli?tab=readme-ov-file#glutinumcli'
+  children={<>
+  Glutinum is a simple and easy-to-use tool, allowing you to convert <code>.d.ts</code> files to F# bindings directly from your browser without installing anything.
+
+  Check out the handy online converter at <a href="https://glutinum.net/" target='_blank'>https://glutinum.net/</a> to get started quickly!
+  </>}
+/>

docs/docs/ecosystem/02_UI/tailwindcss.mdx

@@ -18,6 +18,10 @@ Because interop with tailwind and F# is so quick and easy the [Feliz template](.
 
 You can easily configure the [tailwindcss VS Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) to provide autocomplete and intellisense features for F# files. Check out the autocomplete and intellisense features from the image below!
 
+:::note[YOUR HELP NEEDED ❤️]
+If anyone is using a different editor and knows how to set this up there, please(!) let me know!
+:::
+
 ![Image showing autocomplete and intellisense features of tailwindcss vs code plugin for F#](@site/static/img/tailwind_vs_code_plugin.png)
 
 You just need to add the following to your VS Code settings.json:

docs/docs/feliz-docs/Examples/Feliz/ReactMemoComponentAreEqualFn.fs

@@ -0,0 +1,49 @@
+module Examples.Feliz.ReactMemoComponentAreEqualFn
+
+open Feliz
+
+// Memo using F# equality but ignoring function properties
+[<ReactMemoComponent(AreEqualFn.FsEqualsButFunctions)>]
+let MemoFsEqualsButFunctions (values: int list, fn: int -> int) =
+    let renderCount = React.useRef 0
+    renderCount.current <- renderCount.current + 1
+    Html.div [ 
+        prop.testId "memo-fs-bf-count"; 
+        prop.text (string renderCount.current) 
+    ]
+
+// This will rerender when parent renders due to function property change
+[<ReactMemoComponent(AreEqualFn.FsEquals)>]
+let MemoFsEquals (values: int list, fn: int -> int) =
+    let renderCount = React.useRef 0
+    renderCount.current <- renderCount.current + 1
+    Html.div [ 
+        prop.testId "memo2-fs-bf-count"; 
+        prop.text (string renderCount.current) 
+    ]
+
+// This will alway rerender when parent renders
+[<ReactComponent>]
+let ComparisonComponent (values: int list, fn: int -> int) =
+    let renderCount = React.useRef 0
+    renderCount.current <- renderCount.current + 1
+    Html.div [ 
+        prop.testId "fs-bf-count"; 
+        prop.text (string renderCount.current) 
+    ]
+
+[<ReactComponent(true)>]
+let ParentWithFnFsButFunctions() =
+    let state, setState = React.useState 0
+    let fn = fun x -> x + state // New function instance on each render
+    let values = [ 1; 2 ] // New list instance on each render
+    Html.div [
+        Html.button [ 
+            prop.testId "btn-fn-bf"; 
+            prop.onClick (fun _ -> setState(state + 1)); 
+            prop.text "Trigger Rerender by changing state of parent!" 
+        ]
+        MemoFsEqualsButFunctions (values, fn)
+        MemoFsEquals (values, fn)
+        ComparisonComponent (values, fn)
+    ]

docs/docs/feliz-docs/Feliz.Docs.fsproj

@@ -62,6 +62,7 @@
     <Compile Include="Examples/Feliz/ReactComponentImport.fs" />
     <Compile Include="Examples/Feliz/ReactLazyComponent.fs" />
     <Compile Include="Examples/Feliz/ReactLazyComponentPath.fs" />
+    <Compile Include="Examples/Feliz/ReactMemoComponentAreEqualFn.fs" />
     <Compile Include="Examples/Guides/UnboxStringEnum.fs" />
     <Compile Include="Examples/Guides/BrowserTypesEvents.fs" />
     <Compile Include="Examples/Guides/BrowserTypesGlobalNamespaces.fs" />

playground/src/Components.fs

@@ -8,21 +8,85 @@ open Shared
 
 type jsx = JSX.Html
 
-let private areEqualFn = fun prop1 prop2 -> prop1 = prop2
-
-[<Emit("\"use memo\"")>]
-let use_memo: unit = jsNative
-
-[<ReactMemoComponent(areEqual="(a,b) => a.fruitArray === b.fruitArray")>]
-let private MemoAttributeAreEqualJsEqual (fruitArray: string []) =
-    use_memo
-    React.useEffect (fun () -> console.log("MemoAttributeAreEqualJsEqual rendered"))
-    Html.div [ 
-        prop.text (String.concat ", " fruitArray); 
-        prop.testId "memo-attribute" 
-    ]
+// let private areEqualFn = fun prop1 prop2 -> prop1 = prop2
+
+// [<Emit("\"use memo\"")>]
+// let use_memo: unit = jsNative
+
+
+
+module Components =
+
+    // Memo using F# structural equality (deep equality)
+    [<ReactMemoComponent(AreEqualFn.FsEquals)>]
+    let MemoFsEquals (values: int list) =
+        let renderCount = React.useRef 0
+        renderCount.current <- renderCount.current + 1
+        Html.div [ prop.testId "memo-fs-count"; prop.text (string renderCount.current) ]
+
+    // Memo using shallow (JS) equality
+    [<ReactMemoComponent()>]
+    let MemoShallow (values: int list) =
+        let renderCount = React.useRef 0
+        renderCount.current <- renderCount.current + 1
+        Html.div [ prop.testId "memo-shallow-count"; prop.text (string renderCount.current) ]
+
+    // Memo using F# equality and a function prop (for testing function handling)
+    [<ReactMemoComponent(AreEqualFn.FsEquals)>]
+    let MemoFsEqualsWithFn (values: int list, fn: int -> int) =
+        let renderCount = React.useRef 0
+        renderCount.current <- renderCount.current + 1
+        Html.div [ prop.testId "memo-fs-fn-count"; prop.text (string renderCount.current) ]
+
+    // Memo using F# equality but ignoring function properties
+    [<ReactMemoComponent(AreEqualFn.FsEqualsButFunctions)>]
+    let MemoFsEqualsButFunctions (values: int list, fn: int -> int) =
+        let renderCount = React.useRef 0
+        renderCount.current <- renderCount.current + 1
+        Html.div [ prop.testId "memo-fs-bf-count"; prop.text (string renderCount.current) ]
+
+    // Parent components used by tests to trigger re-renders with new prop instances
+    [<ReactComponent>]
+    let ParentListFsEquals() =
+        let state, setState = React.useState 0
+        let values = [ 1; 2 ] // recreated each render (new instance)
+        Html.div [
+            Html.button [ prop.testId "btn-list-fs"; prop.onClick (fun _ -> setState(state + 1)); prop.text "Tick" ]
+            MemoFsEquals values
+        ]
+
+    [<ReactComponent>]
+    let ParentListShallow() =
+        let state, setState = React.useState 0
+        let values = [ 1; 2 ]
+        Html.div [
+            Html.button [ prop.testId "btn-list-shallow"; prop.onClick (fun _ -> setState(state + 1)); prop.text "Tick" ]
+            MemoShallow values
+        ]
+
+    [<ReactComponent>]
+    let ParentWithFnFs() =
+        let state, setState = React.useState 0
+        // create a new function each render (captures state) so its reference is different
+        let fn = fun x -> x + state
+        let values = [ 1; 2 ]
+        Html.div [
+            Html.button [ prop.testId "btn-fn-fs"; prop.onClick (fun _ -> setState(state + 1)); prop.text "Tick" ]
+            MemoFsEqualsWithFn (values, fn)
+        ]
+
+    [<ReactComponent>]
+    let ParentWithFnFsButFunctions() =
+        let state, setState = React.useState 0
+        let fn = fun x -> x + state
+        let values = [ 1; 2 ]
+        Html.div [
+            Html.button [ prop.testId "btn-fn-bf"; prop.onClick (fun _ -> setState(state + 1)); prop.text "Tick" ]
+            MemoFsEqualsButFunctions (values, fn)
+        ]
+
+
 
-        
 [<ReactComponent>]
 let Main () =
     let fruitArray, setFruitArray = React.useState ([| "Apple"; "Banana"; "Orange" |]) // This stays the same array
@@ -38,20 +102,20 @@ let Main () =
                 style.color "white"
         ]
         prop.children [
-            Html.button [
-                prop.testId "change-fruit-array"
-                prop.text "Change Fruit Array"
-                prop.onClick (fun _ -> setFruitArray [| "Apple"; "Banana"; "Orange"; "Cherry" |])
-            ]
-            Html.button [
-                prop.testId "change-theme"
-                prop.text "Change Theme"
-                prop.onClick (fun _ -> 
-                    if theme = "light" then 
-                        setTheme "dark" 
-                    else 
-                        setTheme "light")
-            ]
-            MemoAttributeAreEqualJsEqual (sortedFruits)
+            // Html.button [
+            //     prop.testId "change-fruit-array"
+            //     prop.text "Change Fruit Array"
+            //     prop.onClick (fun _ -> setFruitArray [| "Apple"; "Banana"; "Orange"; "Cherry" |])
+            // ]
+            // Html.button [
+            //     prop.testId "change-theme"
+            //     prop.text "Change Theme"
+            //     prop.onClick (fun _ -> 
+            //         if theme = "light" then 
+            //             setTheme "dark" 
+            //         else 
+            //             setTheme "light")
+            // ]
+            Components.ParentWithFnFsButFunctions()
         ]
     ]

src/Feliz.CompilerPlugins/AstUtils.fs

@@ -2,6 +2,7 @@ module Feliz.AstUtils
 
 open Fable
 open Fable.AST
+open Fable.AST.Fable
 open System
 open System.Linq
 open System.Text.RegularExpressions
@@ -42,6 +43,32 @@ let makeCallInfo args: Fable.CallInfo = {
     Tags = []
 }
 
+module ImportFromFableLib =
+
+    let private getLibPath (com: PluginHelper) (moduleName: string) =
+        match com.Options.Language with
+        | TypeScript -> com.LibraryDir + "/" + moduleName + ".ts"
+        | JavaScript -> com.LibraryDir + "/" + moduleName + ".js"
+        | _ ->
+            failwith "Only JavaScript and TypeScript are supported"
+
+    let private makeImportLibWithInfo (com: PluginHelper) t memberName (moduleName: string) info =
+        let selector = memberName
+
+        Import(
+            {
+                Selector = selector
+                Path = getLibPath com moduleName
+                Kind = LibraryImport info
+            },
+            t,
+            None
+        )
+
+    let makeImportLib (com: PluginHelper) t memberName moduleName =
+        Fable.AST.Fable.LibraryImportInfo.Create(isInstanceMember = false, isModuleMember = true)
+        |> makeImportLibWithInfo com t memberName moduleName
+
 let emitJs macro args  =
     let callInfo = makeCallInfo args
 

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.8 - 2025-11-28
+
+### ✨ Added
+
+- Support for predefined equality functions for `[<ReactMemoComponent>]` (by @Freymaurer, @melanore)
+
 ## 3.0.0-rc.7 - 2025-11-26
 
 ### 🗑️ Deprecated

src/Feliz.CompilerPlugins/PrimitiveElement.fs

@@ -15,4 +15,4 @@ open Fable.AST
 //        | _ ->
 //            expr
 //
-//    override this.Transform(logger, decl) = decl
+//    override this.Transform(logger, decl) = decl