<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<Compile Include="State.fs" />
<Compile Include="Update.fs" />
<Compile Include="View.fs" />
<Compile Include="App.fs" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Fable.Elmish.Debugger" Version="3.2.0" />
<PackageReference Include="Fable.Elmish.HMR" Version="4.0.1" />
<PackageReference Include="Fable.Elmish.React" Version="3.0.1" />
<PackageReference Include="Feliz" Version="1.16.2" />
<PackageReference Include="Zanaptak.TypedCssClasses" Version="0.4.0" />
</ItemGroup>
</Project>
So: fable 3 + electron. It almost works, but both for build and for dev it goes wrong not having access permission for files inside main (dev failure on loading index.html for renderer) or renderer (build failure on loading an fs file from dialog) processes. the warnings about duplicate modules are when libraries occur in different directories with or without lib subdir e.g.
C:\github\issie\node_modules\babel-loader\lib\index.js??ref--4!C:\github\issie\src\Renderer\.fable\fable-library.3.0.0-nagareyama-rc-007\Long.js
* C:\github\issie\node_modules\babel-loader\lib\index.js??ref--4!C:\github\issie\src\renderer\.fable\fable-library.3.0.0-nagareyama-rc-007\lib\long.jsI doubt that is the problem. the weird thing is that the electron-webpack config is the same as what I used previously and which worked. I am essentially running electron-webpack separately from fable - all fable does is generate the correct js files. Maybe this is because the specified entry point is now in a different directory?
Not sure if here is the best place for Fable 3 feedback? I have made progress with the above error but now I've got to a stage where i need watch compilation to investigate - otherwise it takes too long. electron-webpack does this fine, but fable 3 does not watch files in my project:
C:\github\issie>dotnet fable watch src/renderer
Fable: F# to JS compiler 3.0.0-nagareyama-rc-007
Thanks to the contributor! @Pauan
src\renderer> cmd /C dotnet restore Renderer.fsproj
Determining projects to restore...
All projects are up-to-date for restore.
Parsing src\renderer\Renderer.fsproj...
Initializing F# compiler...
Compiling src\renderer\Renderer.fsproj...
F# compilation finished in 9920ms
Skipping Fable compilation of up-to-date JS files
Compiled src\renderer\Renderer.fs
Fable compilation finished in 582ms
Watching srcThe above compiles the code, and electron-webpack will HMR ok. But if I change src/renderer/renderer.fs it does NOT get recompiled by fable
Here's the code:
let private item text link = Navbar.Item.a [Navbar.Item.Props [Href link]] [
str text
]
let navbar = Navbar.navbar [Navbar.Modifiers [Modifier.TextColor IsWhite]; Navbar.Color IsBlack] [
Navbar.Brand.a [Props [Href "#home"]] [
img [Src "/home/navbar-logo.png"]
]
Navbar.menu [] [
item "Our Mission" "#home"
item "Infrastructure" "#home"
item "About us" "#home"
item "Contact" "#home"
item "Login" "#home"
]
]
Control.div [ Control.IsExpanded ] [
Input.input [
Input.OnChange (fun ev -> dispatch (FilterChanged ev.Value))
Input.Value model.ChargingPointFilter
Input.Placeholder (translate "Charging point or address")
Input.Props [
unbox("list","suggestions")
OnKeyDown (fun ev ->
if ev.key = "Enter" then
dispatch Search)
]
]
datalist [ unbox("id","suggestions") ] [
for suggestion in model.Suggestions do
option [ unbox("value",suggestion) ] []
]
]ofList comes from Fable.React like ofInt, nothing, etc.
Id
Control.div [ Control.IsExpanded ] [
Input.input [
Input.OnChange (fun ev -> dispatch (FilterChanged ev.Value))
Input.Value model.ChargingPointFilter
Input.Placeholder (translate "Charging point or address")
Input.Props [
List "suggestions"
OnKeyDown (fun ev ->
if ev.key = "Enter" then
dispatch Search)
]
]
datalist [ Id "suggestions" ] [
model.Suggestions
|> Array.map (fun suggestion -> option [ Value suggestion ] [])
|> ofArray
]
]
Hey, all!
I am having an issue with a Feliz.Plotly chart after moving the code base to the new version of Fable.
The issue is happening when rendering of a Feliz.Plotly chart is being attempted.
The error I am getting is:
Util.js?6576:205 Uncaught RangeError: Maximum call stack size exceeded
at Function.values (<anonymous>)
at structuralHash (Util.js?6576:205)
at eval (Util.js?6576:205)
at Array.map (<anonymous>)The stack trace doesn't lead to any of my code, there's just a bit under 200 repetitive calls of eval and structuralHash from Util.js, which eventually lead to that 'stack size exceeded error'.
The line where the failure is happpening has a comment that might be helpful:
// TODO: check call-stack to prevernt cyclic objects?
const hashes = Object.values(self).map((v) => structuralHash(v));The next error message I see is the following:
The above error occurred in the <Components_LazyView$1> component:
in Components_LazyView$1
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries