Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
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
    Had a quick question
    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
    Adelar da Silva Queiróz
    @adelarsq
    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
    Adelar da Silva Queiróz
    @adelarsq
    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:
    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"
    ]
    ]

    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: