Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why doesn't TS2Fable uncurry TypeScript function definitions? #392

Open
OkayX6 opened this issue Mar 24, 2021 · 2 comments
Open

Why doesn't TS2Fable uncurry TypeScript function definitions? #392

OkayX6 opened this issue Mar 24, 2021 · 2 comments

Comments

@OkayX6
Copy link

OkayX6 commented Mar 24, 2021

Hi :)

I got adventurous and needed to create a Fable binding to the React Beautiful DnD library.
Then, I got stuck for a while, when trying to create a property for my React component, and my code didn't work.

Generated F# code

// ts2fable 0.8.0
type [<AllowNullLiteral>] DragDropContextProps =
    abstract onDragEnd: result: DropResult * provided: ResponderProvided -> unit

Original TS definition

export interface DragDropContextProps {
    onDragEnd(result: DropResult, provided: ResponderProvided): void;
}

I realized that tuple arguments were passed as arrays, thanks to the generated JS code by the Feliz template project

Fixed via uncurrying

Thus, I fixed it the code by converting the prop to a curryfied property:

[<RequireQualifiedAccess>]
type DragDropContextProps =
  | OnDragEnd of (DropResult -> ResponderProvided -> unit)

Why isn't that by default, if that's the way Fable generates JS function code?

Thanks :)

@MangelMaxime
Copy link
Member

I think here is that in React we want to use uncurry because of how we build the props information for React but if it was a not a React props current generation would be correct.

Unfortunately, I don't think this addressable for now in ts2fable

@alfonsogarciacaro
Copy link
Member

The answer is a bit complicated because the F# compiler treats module/type methods different from local functions, but you should be able to create the props with the generated declaration for example with an object expression:

let props =
  { new DragDropContextProps with
    member _.onDragEnd(: result, provided) = doSomething() }

However the syntax is not very beautiful, especially if you have to implement multiple props. That's way we often model the component props with a union type and use keyValueList to convert them to a JS obj. However, unfortunately ts2fable cannot make this kind of conversion automatically atm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants