From 93bde1d3db227907d1d18fe7605df3af755537a2 Mon Sep 17 00:00:00 2001 From: jkone27 Date: Fri, 27 Jun 2025 14:53:45 +0200 Subject: [PATCH 1/9] fix issue jsonrpc id files mismatch with full reload --- index.js | 40 ++++++++++++++++++++++ sample-project/App.fsproj | 6 ++-- sample-project/Component.fs | 17 --------- sample-project/Component.fsi | 6 ---- sample-project/Library.fs | 9 +++-- sample-project/RootComponent.fs | 19 ++++++++++ sample-project/app.css | 5 +++ sample-project/components/TestComponent.fs | 21 ++++++++++++ sample-project/index.html | 2 +- sample-project/package.json | 7 ++-- sample-project/vite.config.js | 2 +- 11 files changed, 98 insertions(+), 36 deletions(-) delete mode 100644 sample-project/Component.fs delete mode 100644 sample-project/Component.fsi create mode 100644 sample-project/RootComponent.fs create mode 100644 sample-project/components/TestComponent.fs diff --git a/index.js b/index.js index 3f2dffd..2adcfc9 100644 --- a/index.js +++ b/index.js @@ -414,6 +414,46 @@ export default function fablePlugin(userConfig) { state.dotnetProcess.stdout, ); + // Attach protocol-level error handler + if (typeof state.endpoint.on === "function") { + state.endpoint.on("error", async (err) => { + logWarn( + "protocol", + `[fable] Protocol-level error from JSONRPCEndpoint: ${ + err && err.message ? err.message : err + }` + ); + // logWarn("protocol", `[fable] Protocol-level error from JSONRPCEndpoint: ${err && err.message ? err.message : err}`); + // if (err && err.message && err.message.includes("id mismatch")) { + // try { + // logWarn("protocol", "Detected id mismatch error, attempting to restart the daemon and reload project state."); + // // Kill the old daemon process if running + // if (state.dotnetProcess) { + // state.dotnetProcess.kill(); + // } + // // Start a new daemon process + // state.dotnetProcess = spawn("dotnet", [fableDaemon, "--stdio"], { + // shell: true, + // stdio: "pipe", + // }); + // state.endpoint = new JSONRPCEndpoint( + // state.dotnetProcess.stdin, + // state.dotnetProcess.stdout, + // ); + // // Clear state + // state.sourceFiles.clear(); + // state.compilableFiles.clear(); + // state.dependentFiles.clear(); + // // Recompile project + // await compileProject(this.addWatchFile ? this.addWatchFile.bind(this) : () => {}); + // logInfo("protocol", "Fable daemon restarted and project reloaded after protocol error."); + // } catch (recoveryErr) { + // logCritical("protocol", `Failed to recover from protocol error: ${recoveryErr}`); + // } + // } + }); + } + if (state.isBuild) { await projectChanged( this.addWatchFile.bind(this), diff --git a/sample-project/App.fsproj b/sample-project/App.fsproj index c4d42a3..22bbabe 100644 --- a/sample-project/App.fsproj +++ b/sample-project/App.fsproj @@ -10,14 +10,14 @@ - + - - + + diff --git a/sample-project/Component.fs b/sample-project/Component.fs deleted file mode 100644 index 1bcbb08..0000000 --- a/sample-project/Component.fs +++ /dev/null @@ -1,17 +0,0 @@ -module Components.Component - -open Fable.Core -open React -open type React.DSL.DOMProps -open type React.React - -JsInterop.importSideEffects "./app.css" - -[] -let Component () : JSX.Element = - let count, setCount = useStateByFunction (0) - - fragment [] [ - h1 [] [ str "React rocks!" ] - button [ OnClick (fun _ -> setCount ((+) 1)) ] [ str $"Current state {count}" ] - ] diff --git a/sample-project/Component.fsi b/sample-project/Component.fsi deleted file mode 100644 index bf9a9aa..0000000 --- a/sample-project/Component.fsi +++ /dev/null @@ -1,6 +0,0 @@ -module Components.Component - -open Fable.Core - -[] -val Component : unit -> JSX.Element diff --git a/sample-project/Library.fs b/sample-project/Library.fs index 6266010..1474744 100644 --- a/sample-project/Library.fs +++ b/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()) diff --git a/sample-project/RootComponent.fs b/sample-project/RootComponent.fs new file mode 100644 index 0000000..1c80dbf --- /dev/null +++ b/sample-project/RootComponent.fs @@ -0,0 +1,19 @@ +module Components.RootComponent + +open Feliz +open Fable.Core + +JsInterop.importSideEffects "./app.css" + + +[] +let El () = + let count, setCount = React.useState 0 + React.fragment [ + Test.El({| name = "TestComponent" |}) + Html.h1 "Vite plugin rocks!" + Html.button [ + prop.onClick (fun _ -> setCount (count + 1)) + prop.text $"Current state {count}" + ] + ] diff --git a/sample-project/app.css b/sample-project/app.css index f789872..492bd38 100644 --- a/sample-project/app.css +++ b/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; } \ No newline at end of file diff --git a/sample-project/components/TestComponent.fs b/sample-project/components/TestComponent.fs new file mode 100644 index 0000000..ddd3cbe --- /dev/null +++ b/sample-project/components/TestComponent.fs @@ -0,0 +1,21 @@ +module Components.Test + +open Feliz + +[] +let El (props: {| name: string |}) = + 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 [ prop.text "@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }" ] + ] diff --git a/sample-project/index.html b/sample-project/index.html index e42428d..e44495b 100644 --- a/sample-project/index.html +++ b/sample-project/index.html @@ -8,7 +8,7 @@
-

Static text

+

Static text