fix issue jsonrpc id files mismatch with full reload

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),  
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) from version [0.1.0] moving forward.
 
+## [0.2.1] - 2025-06-28
+### Fixed
+- Bug fix targeting issue ([#53](https://github.com/fable-compiler/vite-plugin-fable/issues/53)) as log warn and no crash, for protocol error in json rpc serialization when there is id count mismatch
+- removed Nojaf.React bindings nuget package and using Feliz instead for sample-project, as it is what is most used in community projects and suggested by official fable docs for React.
+- pr ([#55](https://github.com/fable-compiler/vite-plugin-fable/pull/55))
+
 ## [0.2.0] - 2025-06-24
 ### Changed
 - Upgrade to Vite 7.0.0 as peer dependency and adjust transform hook to use latest filter property, pr ([#49](https://github.com/fable-compiler/vite-plugin-fable/pull/49)), targets issue ([#39]([#39](https://github.com/fable-compiler/vite-plugin-fable/issues/39))

index.js

@@ -414,6 +414,28 @@ export default function fablePlugin(userConfig) {
           state.dotnetProcess.stdout,
         );
 
+        if (process.env.VITE_PLUGIN_FABLE_DEBUG) {
+          state.endpoint.on("error", (...args) => {
+            logDebug("protocol", `[fable] error event args: ${args.map(a => typeof a + ': ' + JSON.stringify(a)).join(" | ")}`);
+          });
+        }
+
+        // Attach protocol-level error handler
+        state.endpoint.on("error", async (err) => {
+          if (err && /id mismatch/.test(err)) {
+            logWarn(
+              "protocol",
+              `error from JSONRPCEndpoint: ${
+                err && err.message ? err.message : err
+              }`
+            );
+          }
+          else {
+            logError("unknown", `error: ${err}, ${err.code}, ${err.context ?? "no context"}`);
+          }
+        });
+
+
         if (state.isBuild) {
           await projectChanged(
             this.addWatchFile.bind(this),

sample-project/App.fsproj

@@ -10,14 +10,14 @@
     <ItemGroup>
         <PackageReference Include="Fable.Browser.Dom" Version="2.14.0" />
         <PackageReference Include="Fable.Core" Version="4.3.0" />
-        <PackageReference Include="Nojaf.Fable.React" Version="0.0.2" />
+        <PackageReference Include="Feliz" Version="2.9.0" />
         <PackageReference Include="Thoth.Json" Version="10.2.0" />
     </ItemGroup>
 
     <ItemGroup>
         <Compile Include="Math.fs" />
-        <Compile Include="Component.fsi" />
-        <Compile Include="Component.fs" />
+        <Compile Include="./components/TestComponent.fs" />
+        <Compile Include="RootComponent.fs" />
         <Compile Include="Library.fs" />
     </ItemGroup>
 </Project>

sample-project/Library.fs

@@ -4,16 +4,15 @@ open Fable.Core
 open Browser.Dom
 open Math
 open Thoth.Json
+open Fable.React
 
 let r = sum 1 19
 
 let someJsonString =
     Encode.object [ "track", Encode.string "Changes" ] |> Encode.toString 4
 
-let h1Element = document.querySelector "h1"
+let h1Element = document.querySelector "#dyn"
 h1Element.textContent <- $"Dynamic Fable text %i{r}! %s{someJsonString}"
 
-open React
-
-let app = document.querySelector "#app"
-ReactDom.createRoot(app).render (JSX.create Components.Component.Component [])
+let root = Feliz.ReactDOM.createRoot(document.getElementById "app")
+root.render(Components.RootComponent.El())

sample-project/RootComponent.fs

@@ -0,0 +1,19 @@
+module Components.RootComponent
+
+open Feliz
+open Fable.Core
+
+JsInterop.importSideEffects "./app.css"
+
+
+[<ReactComponent>]
+let El () =
+    let count, setCount = React.useState 0
+    React.fragment [
+        Test.El({| name = "Test" |})
+        Html.h1 "Vite fable plugin rocks!"
+        Html.button [
+            prop.onClick (fun _ -> setCount (count + 1))
+            prop.text $"Current state {count}"
+        ]
+    ]

sample-project/app.css

@@ -41,4 +41,9 @@ h1 {
             box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
         }
     }
+}
+
+#test {
+    color: red;
+    background-color: yellow;
 }

sample-project/components/TestComponent.fs

@@ -0,0 +1,27 @@
+module Components.Test
+
+open Feliz
+open Fable.Core
+
+// for editor highlight: alfonsogarciacaro.vscode-template-fsharp-highlight
+[<Erase>]
+let inline css s = s
+
+[<ReactComponent>]
+let El (props: {| name: string |}) =
+    let spinCss = css "@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }"
+    React.fragment [
+        Html.div [
+            prop.style [
+                style.backgroundColor "yellow"
+                style.animationName "spin"
+                style.animationDuration 3
+                style.animationIterationCount.initial
+                style.animationTimingFunction.linear
+            ]
+            prop.children [
+                Html.h1 $"My name is: {props.name}!"
+            ]
+        ]
+        Html.style spinCss 
+    ]

sample-project/index.html

@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="root">
-      <h1>Static text</h1>
+      <h1 id="dyn">Static text</h1>
       <div id="app"></div>
     </div>
     <script type="module">

sample-project/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "bunx --bun vite",
+    "dev:debug": "VITE_PLUGIN_FABLE_DEBUG=1 bunx --bun vite",
     "build": "bunx --bun vite build",
     "preview": "bunx --bun vite preview"
   },

sample-project/vite.config.js

@@ -10,7 +10,7 @@ export default defineConfig({
   },
   plugins: [
     Inspect(),
-    fable({ jsx: "automatic" }),
-    react({ include: /\.fs$/ }),
+    fable(),
+    react({ include: /\.fs$/, jsxRuntime: "classic" }),
   ],
 });