Where communities thrive

• Join over 1.5M+ people
• Join over 100K+ communities
• Free without limits
Activity
Eugene Tolmachev
@et1975
please don't depend on alpha for anything... it's just for experimentation and getting feedback
there's a newer 3.0.1 that fixes that error
Daniel Sokil
@s0kil
@et1975 I have tried downgrading to the latest stable, and the issue continues to occur.
Here are the project dependencies
<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>
Daniel Sokil
@s0kil
Adding <PackageReference Include="Fable.Elmish.Browser" Version="3.0.4" /> seems to solve the issue.
Gary Becks
@g5becks
Hi
New here
I started reading the elmish book today
Was wondering what everyone is doing about auto formatting of Feliz ?
Fantomas is pretty much useless in this context
I still don't use Fantomas on my setup
I am not so confident to use auto formatting tools
Gary Becks
@g5becks
@adelarsq It works pretty good for me using rider
With Feliz, it messes everything up
I still have to see how it works on Neovim. Didn't have so much free time lately to give a try
Florian Verdonck
@nojaf
Tom Clarke
@tomcl
This may be a silly question but I am using electron-webpack for electron/fable/react/elmish as (roughly) per cmeeren's repo with a 10K line app and Fable compiler 2.10, loader 2.1.9, and the hmr loading works, but compilation recompiles the entire f# project every time any file is changed. Like many questions with electron-webpack it hides so much that I'm not sure what is going on, except it seems not to keep any of js files compiled from f#. Is there a fix for this with electron-webpack, or do I need to get my own webpack config working with electron? Thx.
kaashyapan
@kaashyapan
I recently made the switch to Fable 3 dotnet tool and got rid of the fable-webpack-loader. Just run fable watch on the fsharp code. It does incremental compilation and keeps the js files in the same folder and is fast. I suppose electron webpack can then pick the changed js files for incremental compilation.
Tom Clarke
@tomcl
worth trying, thanks.
Tom Clarke
@tomcl
So: using fable 3 with electron. I can run it on either the renderer or the main process projects. Both compile fine to js. electron-webpack bundles both together, and gives me a whole load of "multiple modules with names that differ only in casing" errors. Has anyone got an example of nagareyama working with electron in any form?
Tom Clarke
@tomcl

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.js

I 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?

Tom Clarke
@tomcl

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 src

The 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

Ryan Mullin
@rmullin7286_gitlab
Hey all, I'm trying to make a simple navbar using fulma with a black background, white text, and grey hover. It seems like the output shows grey text and white hover no matter what properties I set, and the hover gets stuck if the option has been clicked. Does anyone know how to fix this?

Here's the code:
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"]
]
item "Our Mission" "#home"
item "Infrastructure" "#home"
item "Contact" "#home"
]
]

Here's the output: https://ibb.co/6bSLTSV
Maxime Mangel
@MangelMaxime
Hello @rmullin7286_gitlab, you probably want to use scss customization in order to have more control over the rendering. Because, I don't think you can modify the hover color from modifiers and you would end up using inlined css in the end so it's better to do it from your style.scss file.
Steffen Forkmann
@forki
hi @MangelMaxime
        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) ] []
]
]
any ideas how to write the datalist crap a bit F#ier?
Maxime Mangel
@MangelMaxime

Hello @forki
In theory, you should not need the unbox thingy if the properties are standard in HTML.

You should also be able to use a combinaison of

model.Suggestion
|> List.Map renderSuggestion
|> ofList
If you want to ditch the for loop
ofList comes from Fable.React like ofInt, nothing, etc.
Steffen Forkmann
@forki
yeah mostly trying to get rid of the unbox
Maxime Mangel
@MangelMaxime
Value should alrady exist in Fable.React no ?
Same goes for Id
Steffen Forkmann
@forki
ah yes. I was dumb. Uppercase it is
        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
]
]
amazeballs
Maxime Mangel
@MangelMaxime
Much better :)
Steffen Forkmann
@forki
that's actually pretty nice autocomplete
Tim Forkmann
@tforkmann
sweet! good to know that this works!
eyassud
@eyassud
I am new to Fable. Is there a way to incorporate Fable into an existing Angular 10 application? I have a large enterprise SPA and I am hoping to use fable.
Cody Johnson
@Shmew
Yeah you can export stuff from F# and call it in JS. You can read more here.
eyassud
@eyassud
Thanks Cody
Olya Samusik
@w0lya

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
Cody Johnson
@Shmew
Hey Olya, looks like fable-library/Util.ts/structuralHash was changed in Fable 3. Can you log an issue in either my repo or Fable?
Olya Samusik
@w0lya
@Shmew sure, thank you! I'll log the issue in Fable repo, then
Cody Johnson
@Shmew
:+1: