by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Andreas Vilinski
    @vilinski
    yes, it was a problem. So sorry to have wasted your time....
    Zaid Ajaj
    @zaid_ajaj_twitter
    No worries at all! I think because React was cloning the object when used as input of the component the .toJson() function was no longer available from the prototype and thus the internal runtime union case representation surfaced to the backend
    Normally, I wouldn't need to support such scenario but it wouldn't hurt to account for old union case representation as well in the JSON deserializer :smile:
    Andreas Vilinski
    @vilinski
    I've already read this docs, but I completely forgot about this case.
    big thanks for you help, Zaid!
    Zaid Ajaj
    @zaid_ajaj_twitter
    Anytime :smile:
    Dave Thomas
    @7sharp9
    @Shmew I'll probably look at a Fable wrapper for react-window I think that's what would help me.

    @zaid_ajaj_twitter I ended up passing:

    myView {|height = 0.0; width = 0.0; model = model |}

    Where myView is inside a Fable.Recharts.responsiveContainer. height and width are passed in during the render of the responsiveContainer via the cloning of the props and passing them to the children

    Passing zero into the component is really unintuitive though
    I guess that's implicit with react but has to be explicit with F# so it gets weird quickly
    Zaid Ajaj
    @zaid_ajaj_twitter
    @7sharp9 Passing zero's isn't something "usual" in react either
    I don't get what you are trying to do
    do you have a sample for me to look at?
    @7sharp9 You can always open an issue on Feliz repo to ask questions about React and whether something "looks right", it is hard to deduce the context here and on twitter
    Dave Thomas
    @7sharp9
    Thanks @zaid_ajaj_twitter Im back in the usual position of having forgotten how to wrap react components for fable usage, or rather Ive never done that for react just standard js libs
    Zaid Ajaj
    @zaid_ajaj_twitter
    Anytime @7sharp9, I too tend to forget how these things work and have to re-learn them again every now and then :smile:
    Onur Gumus
    @OnurGumus
    If I use Feliz without Elmish, is it possible to have HMR ?
    Cody Johnson
    @Shmew
    kinda, you can use fast-refresh but the state is reset on reload
    Onur Gumus
    @OnurGumus
    neah I want hmr
    Cody Johnson
    @Shmew
    but using anything outside of the monolithic elmish model will cause that to happen btw (like react state hooks)
    Onur Gumus
    @OnurGumus
    yeah I guess that's the case
    thanks
    Cody Johnson
    @Shmew
    np
    Maxime Mangel
    @MangelMaxime
    @OnurGumus You can have HMR on any project this is a feature provided by Webpack if you use webpack. However, you need to setup support for it. Like storing state, and restoring it, etc.
    Zaid Ajaj
    @zaid_ajaj_twitter
    @OnurGumus We are planning to implement fast-refresh plugin requirements with Feliz (hooks only) as soon as Fable 3 comes out
    You can follow the progress in this issue Zaid-Ajaj/Feliz#203
    Cody Johnson
    @Shmew
    should also be possible to enable this for elmish if they use context as the store for the elmish application rather than the current mkProgram
    I'd think, would have to investigate
    of course if you want a global elmish loop you can just use useElmish at the top level and then it's already done with hooks
    TitusRie
    @TitusRie

    Can anyone point me to the right place to get help for the following: I'm creating a Fable-React/Fulma-D3js Showcase, to show how to create D3 React components: https://github.com/TitusRie/FulmaD3js.

    Unfortunately I got stuck on getting the data item iterator value into JS world.
    Somehow it works in the .text property, but not in the .attr property: ?attr("x", fun _ i -> i * (width/dataSetLength)).

    I made a REPL: https://fable.io/repl/#?code=FAehAICUFMGMCdoEMAuBLA9gO3BgZuAGJIBGANtOAEJLywAWtK4AykgLYAOF49KKnAM4AuMHlIUAdJhDjy0ALQBzeEk700sQSEEdu0bQBMAzCBK0GTEGiyHoAD0l92ZUBHODoh3DkgBRAAUAGXA8eAx2Xn4hURAlNBR6AFcSSVgI2QlFdK40CngQYnlrQUEkgxAARgAOACZa4GAMTmgcIqkAYQxEJpa2rMkuxEkAKUEASSwUaHDORopmAG0AHgBxMgxzMgA+AF1wE2FcEgArcABecBPBADlUNAA3aEaUAE8W1lfBafZJAHlTnBmAB3BL0YDgSHsaDsEgzcCJNCCSTYAAU0CeUzu0KO33gNiUABpwLAkGQyOZYABrI6bE4KbZJLAJACUtNOFwhkO5kMRggA-GiMa0UNjoMS8EzwKiWeAGSSyRSkNSroIACoaQQs+bQZh4PJkcDfV48PmcnmGDAHYz8zwUWAoVF8lm2t4UVEAIn15I9xONFG1wAWRr0FBYADVVuyzpcuZCTLboPbHR6AMQPNAALw92p5PP5aj6hk9ggeShzcbzBf48E9oMMiV94AArAAGVu5vOQ6soWse+jQNBKPhNgAs7cDwdUtgiF3AWGgwM+3xhkkgSBn7BlQd1B1QSE8zEuC6XMEEWegAEF4KpXssbChttLr7fpMzmLVm9LJTgAPpyp9UWnS1fhuBxHWMQlPxZGDtWDcx4AACUHYdmHsOd0IAKhbcAd2YBCAiQQxDAJOdKkkPDwHrRI5zbVsKODAchz4Mj2wY3dDH3FhdSCVolBoy48A2VA9xQA9dUGDAmRQRpLRDLgw0jStE2TS9yU9RAHQrfNOLE1FdPElBZTAUSkHnaAvEEBErThKADAvF8kFeZSRRmGVwBM1z4CNJMgUwLBlMLVpiw9TSUBzDyIASGZUEoRJwiSYdwF86EpkEQKazrNAG3oJsWC+H5JAAWVQehJEvEhBFRaj6A80zuJQXisH42qFHAAiiJI5qYIy3tPSY1Cmx-UyAJG7DR0kTtu1QPqPXsIapX-NBRuW7DquyxIQAMhqmpamDcPzGa+1eBacAM0aBpYtqhIwETzvGyber7b0yFOkb5UETh8SmAhQqUEhUQANkggBSS9CUqNsWQ9aV7vASoO21AAfJ8hywbpni7LtgDk3QFOgCNVmUu0gTUshPWmexwqm8B+QM-T90PGn+S87dDs4IsKfA7TuX5SnHWG875QMmmTL58DUUF-dwGW+VVvh9twAAalM4yIHGaZVBQboqO6KkrJsBFNRJbB+aez15olRaZZW8A1pqrauJ4vjEn2kyNZi7XvMtAwsAAchBPXeBmaAjj8G9uiOZZ+afI60BIJJpnAeww-sFoHS8cAKGaxJiS9JkHX86U0AAEhLypZQAb3ARAUCSeAcFL8u7elGq6u252c-oFkAG5wAAXw9c2PROq2zul+VLuYNrJeE5g4YmnqUZlpR0cQIA&html=DwQgIg8gwgKgmgBQKIAIAWAXAtgGwHwBQwmuhxApgIYAmhK9KwAzgMYBOAlgA4YpNssAvACJMGLkwBcAemnUAzACsmAOgD2bAOZz5KgG4BWFVg4A7FcuF5g01px5lpaKrSIAjNdQCedBsGoceigc1CJ6HABeVjYBeo4e3o4k+EA&css=Q
    It's a sort of follow up on fable-compiler/Fable#1822, just taking it a step further with data bindings
    Any advice is much appreciated :-)

    Cody Johnson
    @Shmew
    It's an issue with currying and multiple parameter functions ?attr("x", System.Func<_,_,_>(fun _ i -> i * (width/dataSetLength))) does the trick
    @TitusRie
    TitusRie
    @TitusRie
    Thanks very much for the swift response!
    Here the updated working REPL, which is an updated version of the Fable Barchart Sample
    https://fable.io/repl/#?code=FAehAICUFMGMCdoEMAuBLA9gO3BgZuAGJIBGANtOAEJLywAWtK4AykgLYAOF49KKnAM4AuMHlIUAdJhDjy0ALQBzeEk700sQSEEdu0bQBMAzCBK0GTEGiyHoAD0l92ZUBHODoh3DkgBRAAUAGXA8eAx2Xn4hURAlNBR6AFcSSVgI2QlFdK40CngQYnlrQUEkgxAARgAOACZa4GAMTmgcIqkAYQxEJpa2rMkuxEkAKUEASSwUaHDORopmAG0AHgBxMgxzMgA+AF1wE2FcEgArcABecBPBADlUNAA3aEaUAE8W1lfBafZJAHlTnBmAB3BL0YDgSHsaDsEgzcCJNCCSTYAAU0CeUzu0KO33gNiUABpwLAkGQyOZYABrI6bE4KbZJLAJACUtNOFwhkO5kMRggA-GiMa0UNjoMS8EzwKiWeAGSSyRSkNSroIACoaQQs+bQZh4PJkcDfV48PmcnmGDAHYz8zwUWAoVF8lm2t4UVEAIn15I9xONFG1wAWRr0FBYADVVuyzpcuZCTLboPbHR6AMQPNAALw92p5PP5aj6hk9ggeShzcbzBf48E9oMMiV94AArAAGVu5vOQ6soWse+jQNBKPhNgAs7cDwdUtgiF3AWGgwM+3xhkkgSBn7BlQd1B1QSE8zEuC6XMEEWegAEF4KpXssbChttLr7fpMzmLVm9LJTgAPpyp9UWnS1fhuBxHWMQlPxZGDtWDcx4AACUHYdmHsOd0IAKhbcAd2YBCAiQQxDAJOdKkkPDwHrRI5zbVsKODAchz4Mj2wY3dDH3FhdSCVolBoy48A2VA9xQA9dUGDAmRQRpLRDLgw0jStE2TS9yU9RAHQrfNOLE1FdPElBZTAUSkHnaAvEEBErThKADAvF8kFeZSRRmGVwBM1z4CNJMgUwLBlMLVpiw9TSUBzDyIASGZUEoRJwiSYdwF86EpkEQKazrNAG3oJsWC+H5JAAWVQehJEvEhBFRaj6A80zuJQXisH42qFHAAiiJI5qYIy3tPSY1Cmx-UyAJG7DR0kTtu1QPqPXsPKCtXQgmVgZZf0Jdbf22VFhv-NBRv27DquyxIQAMhqmpa2DIvANUrWVWADCszx0lsYlotUFBumJThaA4XUZmJYFKAXLwSSSG9XgJI4+AEEQxEERh4E4PBuh-DdDE4cJ9RQNIMk4DBvm0WAIfgKHmpAXq+1eIapQM0aBpYtqhIwET6fGyaqc9b0yFpnB6flQQsYfAhQqUEhUQANkggBSS9CUqNsWQ9aV2fASoO21AAfJ8hywbpni7LtgDk3QFOgCNVmUu0gTUshPWmexwqm8B+QM-T90PF3+S87d8yC2wHfA7TuX5R3HWGgWnwM72Zr7ebiXyldfmWrBVs2jbtt28B9vlQ7pRqs6uJ4vjEmuky7vAB6np817DHe6ZPu+8BftUaFG6BkGLO8EnIehqI4diPBEdoFG0aZDGsfwBI8fYEACaJkBe7JglKf9zKPRpiU6f3BmUKZ79hOYNWJp6nWc6UfXECAA&html=DwQgIg8gwgKgmgBQKIAIAWAXAtgGwHwBQwmuhxApgIYAmhK9KwAzgMYBOAlgA4YpNssAvACJMGLkwBcAemnUAzACsmAOgD2bAOZz5KgG4BWFVg4A7FcuF5g01px5lpaKrSIAjNdQCedBsGoceigc1CJ6HABeVjYBeo4e3o4k+EA&css=Q
    This is an area I still need to get my mind wrapped around, found a nice article: https://fsharpforfunandprofit.com/posts/currying/
    Cody Johnson
    @Shmew
    If you're just wanting to get charts created, plotly.js is a nice wrapper/library on top of d3 that has a lot of functionality. I have complete bindings for it here
    TitusRie
    @TitusRie
    Yes, that's actually my next step. To see how this all translates to Feliz with plotly and/or recharts. But I have an Fable 1 codebase with lots of D3js maps stuff, so I've either to update that or find a nice alternative. Didn't find a flexible Fable-react map library other than D3 which will show country chloropleth with routes. Any more tips are very welcome of course!
    Also trying to document this research in my repo: https://github.com/TitusRie/FulmaD3js.
    Still a bit messy, but hope it will give some pointers to others getting stuck at the same places as I did. We're not all fable gods after all ;-)
    Cody Johnson
    @Shmew
    The best advice I can give is to see how feliz.plotly bindings are written if you get stuck as a lot of that structure may translate well to d3
    Mark Elston
    @melston
    @Shmew , @TitusRie , I am familiar with the nullable operators in F# and using the '?' to define optional arguments, but I don't recognize the use of '?' in the referenced code. Stuff like:
    let sampleSVG: obj = 
        d3?select("#viz")
            ?append("svg")
            ?attr("width", 500)
            ?attr("height", 400)
    Cody Johnson
    @Shmew
    it's a dynamic operator
    generally speaking it's only used for prototyping
    Mark Elston
    @melston
    Ah. I thought it might be a corner of F# I was unfamiliar with. It turns out it's a corner of Elmish I am unfamiliar with. :)
    Or, rather, Fable.
    Oh. It is F#. I haven't used this before. I'm not sure I would have ever found a use for this on my own.
    Cody Johnson
    @Shmew
    it's not part of FSharp.Core, but for .net there's FSharp.Interop.Dynamic
    Mark Elston
    @melston
    Yeah. I see the docs for it. Interesting, but it would seem to bypass many of the features of the language that makes it so nice to use. If I want duck-typing, I'll use Python. :)
    Cody Johnson
    @Shmew
    yeah I'm not recommending them, just pointing it out
    TitusRie
    @TitusRie

    The best advice I can give is to see how feliz.plotly bindings are written if you get stuck as a lot of that structure may translate well to d3

    That's a good tip, thanks!

    TitusRie
    @TitusRie

    @melston, @Shmew is right, I just used it for making a quick REPL (based on the one from @alfonsogarciacaro in fable-compiler/Fable#1822. To see the same code with type safety, look at: https://github.com/TitusRie/FulmaD3js:

          let svg =
            d3container
              .append("svg")
              .attr("width", 500)
              .attr("height", 100)

    See https://github.com/TitusRie/FulmaD3js/blob/33d82956dd24b11231e24b208585114a378ddf2f/src/D3Component.fs#L22-L26)
    Unfortunately, didn't yet find a way to use typed access on dataitems:

              .attr("id", fun x-> x?ItemColor)
              .attr("fill", fun x -> x?ItemColor) // id = fun x -> x

    See https://github.com/TitusRie/FulmaD3js/blob/33d82956dd24b11231e24b208585114a378ddf2f/src/D3Component.fs#L37-L38

    Mark Elston
    @melston
    @Shmew , @TitusRie I added a question in a comment to a SO question I found and Tomas Petricek responded with the fact that the ? and ?<- operators are considered 'special' by F#. I really dislike special language features. :(
    https://stackoverflow.com/a/62893600/780350
    Cody Johnson
    @Shmew
    Interesting, yeah no one really uses those operators except in special cases where it's required or for prototyping.