Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Zaid Ajaj
    @zaid_ajaj_twitter
    @mabasic I haven't tested [<ReactComponent>] with default imports but if you a non-default export it should work just fine
    Also maybe if you write [<ReactComponent(import="*", from="./Components/GettingStarted.js")>] it could work too
    Mario Bašić
    @mabasic

    @zaid_ajaj_twitter I have tried with import="*", import="default" and import="GetStarted", but I always get a similar output in the lines of:

    ...
    import GetStarted_1 from "./components/GetStarted.js";
    
    export function GetStarted() {
        return null;
    }
    
    ReactDOM_render_Z3D10464(() => createElement(GetStarted_1, null), document.getElementById("get-started"));
    ...

    It works in all cases, but my question was why is the generated JS different than what I expect it to be. If set let private GetStarted () = React.imported(), then:

    export function GetStarted() {
        return null;
    }

    becomes:

    function GetStarted() {
        return null;
    }

    but why is that function even needed if it returns null and is not used at all. I assume that it has something to do with the way JS library/ React component is imported using let and the compiler has to do something with the placeholder variable?

    Mario Bašić
    @mabasic
    @zaid_ajaj_twitter Btw. Loving Feliz so far, but the documentation could use some improvements. I'm still learning F# and here is some progress that I have made converting JS React components to F# with Feliz: https://github.com/mabasic/mariobasic-n7/tree/fable/resources/js It is very basic stuff for now, but any comment/suggestion is welcome. Thank you in advance.
    Mario Bašić
    @mabasic
    Does anyone know how do I import something, but not use it in the code, but have Fable leave it in generated JS?
    loganmac
    @loganmac
    Seems like https://fable.io/repl/ is down
    The request to get the app bundle is giving a 404
    Maxime Mangel
    @MangelMaxime
    Hello, @loganmac Seems fine to me right now.
    Ilja Nosik
    @inosik
    @mabasic I think you're looking for importSideEffects
    Maxime Mangel
    @MangelMaxime

    @mabasic If you speak of an external JS file or CSS file for example, you can use importSideEffect or import and store it in a variable

    Just knows, that if you are using a bundler like Webpack you probably need to configure it correctly or it could detect it as unused code and remove it.

    If you want to use it for importing CSS files you should be fine as Webpack understand that.

    @inosik Got a bit quicker than me ^^
    Mario Bašić
    @mabasic
    @inosik @MangelMaxime Thank you I have figured it out a few minutes ago by reading a issue on Fable repo from 3 years ago xD. Is there an up to date documentation for Fable somewhere that I don't know of ?
    Maxime Mangel
    @MangelMaxime

    @mabasic I think it should be in this section of the documentation: https://fable.io/docs/communicate/js-from-fable.html#Miscellaneous-import-helpers

    However, importSideEffect is missing

    Mario Bašić
    @mabasic
    @MangelMaxime No mention of importSideEffects there... :D I find Fable very nice to work with, but it lacks documentation. For example where can I find the documentation for Fable React? Is this all there is: https://github.com/fable-compiler/fable-react/tree/master/docs ?
    I would like to contribute to writing the documentation, but I can't find any :)
    Maxime Mangel
    @MangelMaxime

    Yes, I know it is missing my message was to say if it was documented it would be there.

    I probably didn't word my message correctly sorry

    About Fable React documentation i think that the main part of the documentation and other part were "mentionned" in the blog...

    The documentation has always been something we wanted to improve on Fable project but that's also something hard and not a lot of people are interested motivated enough to do it.

    For example, https://fable.io/docs/ is the result of several month of work from contributors.

    I am currently experimenting with Gitbook for one of my project and want to see if we can use a "standard" tool to avoid having a lot of different tools/ways to generate the documentation. And just focus on writing it instead
    Mario Bašić
    @mabasic
    @MangelMaxime I see. Okey, I have a few ideas how this can be streamlined. Should I open an issue here https://github.com/fable-compiler/fable-compiler.github.io so that we can talk about it more there or?
    Maxime Mangel
    @MangelMaxime
    Sure you can open an issue on this repo.
    Ramiro
    @ramiro-nd
    Hello everyone, pretty sure this is not the right place but I am looking for the Fable.io logo in SVG file. We (https://ably.com/) are publishing a post that uses Fable and we want to use the logo for the open graph image. Looked around everywhere but I couldn't find it.
    Maxime Mangel
    @MangelMaxime

    Hello @ramiro-nd,
    I don't think we an SVG version of the logo.

    You can find the logo used by the docs site here https://github.com/fable-compiler/fable-compiler.github.io/tree/dev/public/img

    But it is as a PNG file

    Actually, the creator of the logo also sent an SVG version here: fable-compiler/Fable#969
    Ramiro
    @ramiro-nd
    Amazing! Nice find @MangelMaxime, thanks a lot.
    Ramiro
    @ramiro-nd
    Btw if anyone is interested, this is the article: https://ably.com/blog/webrtc-signaling-fsharp-fable-ably ✌️
    Maxime Mangel
    @MangelMaxime

    Thank you for sharing @ramiro-nd

    Will read it later. If you have a twitter account you can also share there pinging @FableCompiler twitter account.

    People usually get notified when doing that or Alfonso will retweet etc.

    Ramiro
    @ramiro-nd
    Maxime Mangel
    @MangelMaxime
    Ahah sorry didn't have twitter opened ;)
    Ramiro
    @ramiro-nd
    ✌️
    Mario Bašić
    @mabasic
    @MangelMaxime I have opened an issue: fable-compiler/fable-compiler.github.io#86 I hope that there can be some constructive discussion. I am very new to F#, but having good documentation is crucial for onboarding people.
    Maxime Mangel
    @MangelMaxime
    Thank you @mabasic :)
    Mario Bašić
    @mabasic
    I'm trying to do event.target?checked, but I am getting this warning: warning FSHARP: The identifier 'checked' is reserved for future use by F# (code 46). Is there a different way of doing this?
    Mario Bašić
    @mabasic
    Solved it with event.target?("checked").
    Mario Bašić
    @mabasic
    let updatedFormFields = { formFields with first_name = { value = value; error = ""; }}
    How can I replace first_name with a string? Is there a better way of doing this?
    Mario Bašić
    @mabasic
    Should I use downcasting to Browser.Types.HTMLInputElement so that I can avoid using dynamic typing?
    Mario Bašić
    @mabasic
    How can I handle this code : let value = if target?("type") = "checkbox" then target?("checked") else target?value when target?("checked") returns a boolean, and target?value returns a string?
    Maxime Mangel
    @MangelMaxime
    When possible you should avoid dynamic typing because the compiler can't help you with type checking/inferenace etc.

    How can I handle this code : let value = if target?("type") = "checkbox" then target?("checked") else target?value when target?("checked") returns a boolean, and target?value returns a string?

    You should not have to use the same "function" to get the value for different filed type. As you see it doesn't play well as in one cause you got a string and another case you have a boolean.

    It is really difficult to help with just some glimpse of code. It would be easier if you could share a small reproduction code.

    Like that someone will be able to "rewrite" it in a more idiomatic way so you can take a look at it.

    Maxime Mangel
    @MangelMaxime
    module Elmish.SimpleInput
    
    (**
    Minimal application showing how to use Elmish
    You can find more info about Emish architecture and samples at https://elmish.github.io/
    *)
    
    open Fable.Core.JsInterop
    open Fable.React
    open Fable.React.Props
    open Elmish
    open Elmish.React
    
    // MODEL
    
    type Model =
        {
            Name : string
            RememberMe : bool
        }
    
    type Msg =
        | ChangeName of string
        | ToggleRememberMe
    
    let init () = 
        { 
            Name = ""
            RememberMe = false
        }
        , Cmd.none
    
    // UPDATE
    
    let update (msg:Msg) (model:Model) =
        match msg with
        | ChangeName newValue ->
            { model with 
                Name = newValue 
            }
            , Cmd.none
    
        | ToggleRememberMe ->
            { model with
                RememberMe = not model.RememberMe
            }
            , Cmd.none
    
    // VIEW (rendered with React)
    
    let view model dispatch =
        div [ ]
            [
                input  
                    [
                        Value model.Name
                        OnChange (fun ev ->
                            ev.target?value 
                            |> string 
                            |> ChangeName
                            |> dispatch
                        )
                    ]
                br [ ]
                label [ Name "remember-me" ]
                    [
                        input 
                            [
                                HtmlFor "remember-me"
                                Type "checkbox"
                                OnChange (fun ev ->
                                    dispatch ToggleRememberMe
                                )
                            ]
                        str "Remember me"
                    ]
                br [ ]
                br [ ]
                str (sprintf "Name value is: %s" model.Name)
                br [ ]
                str (sprintf "RememberMe value is: %b" model.RememberMe)
            ]
    
    // App
    Program.mkProgram init update view
    |> Program.withConsoleTrace
    |> Program.withReactSynchronous "elmish-app"
    |> Program.run
    Also, in your code if you are using Fable.React you can use ev.Value and ev.Checked to avoid the cast and dynamic typings.
    Mario Bašić
    @mabasic
    Thank you for explaining @MangelMaxime . I suspected that I was doing something wrong :) I am using Feliz. After seeing Fable.React.Extensions link which you've sent I've managed to get it working. I'm still confused why everything is down casted to HTMLInputElement; what if I have a textarea, should I not use HTMLTextAreaElement? I also think that I am misusing records somehow. I'm sending you a link to Javascript code which I am trying to convert to F# and the current F# code which I have wrote.
    Mario Bašić
    @mabasic
    I still have to finish implementing handleSubmit function, but everything else works. I wanted the code to be as close to the original JS as possible, but in F# spirit.
    Maxime Mangel
    @MangelMaxime

    For the HTMLTextAreaElement / HTMLInputElement thing you will have to ask on Feliz repo.

    But in theory, you could update to HTMLElement and then downcast to HTMLTextAreaElement.

    Also, Feliz has a lot of onChange overload which avoid you to reason in term of HTMLElement type but more on what information you want back from the onChange event:

    https://github.com/Zaid-Ajaj/Feliz/blob/7e0706350bb24aacc7f98b576eca00c0a624cc8a/Feliz/Properties.fs#L1037-L1066

    For example, if you help the F# compiler with type inference you can say I always want a string back so it will works for both the input and textarea:

    prop.onChange (fun (newValue : string) -> ...)

    Another advice I can give you is that when using Fable/F#, you can't always do a 1 to 1 with the JavaScript code.

    You can't always force a language to work as the other one works.