Fable: Emit attribute and createEmpty not working

[MangelMaxime]

Description

Using Emit attribute on type member and using it with createEmpty output an empty js object.

FSharp code

type TextStyle =
        [<Emit("fontFamilly")>] abstract FontFamilly : string option with get, set
        [<Emit("fontSize")>] abstract FontSize : float option with get, set

let TextStyleDefault =
      let style = createEmpty<Fable.Import.PIXI.TextStyle>
      style.FontFamilly <- Some "Arial"
      style.FontSize <- Some 14.
      style

Actual results

var TextStyleDefault = __exports.TextStyleDefault = function () {
      var style = {};
      return style;
    }();

Expected results

var TextStyleDefault = __exports.TextStyleDefault = function () {
      var style = {};
      style.fontFamilly = "Arial";
      style.fontSize = 14;
      return style;
    }();

[alfonsogarciacaro]

Sorry, it's not very obvious but with attributes you should use the optional parameter syntax. Setters have two parameters: this and value, while getters only have one (this):

type TextStyle =
        [<Emit("$0.fontFamily{{=$1}}")>]
        abstract FontFamilly : string option with get, set
        [<Emit("$0.fontSize{{=$1}}")>]
        abstract FontSize : float option with get, set

let TextStyleDefault =
      let style = createEmpty<Fable.Import.PIXI.TextStyle>
      style.FontFamilly <- Some "Arial"
      style.FontSize <- Some 14.
      style

Reference: http://fable.io/docs/interacting.html#Emit-attribute

[alfonsogarciacaro]

Hmm, actually I just tried with Fable 1.0 and it's not working :( I need to fix it.

[MangelMaxime]

Ah sorry didn't see this para in the doc :) thanks for pointed it out.

And ok will wait your fix so :)

[Zaid-Ajaj]

Without Emit attributes it works :)

open Fable.Core
open Fable.Core.JsInterop

type TextStyle =
    abstract FontFamilly : string option with get, set
    abstract FontSize : float option with get, set

let TextStyleDefault =
      let style = createEmpty<TextStyle>
      style.FontFamilly <- Some "Arial"
      style.FontSize <- Some 14.
      style

See Sample here

[MangelMaxime]

@Zaid-Ajaj Yes but we have the FontFamily and not fontFamily.
Note the first letter as a lower one.

[Zaid-Ajaj]

@MangelMaxime What about this one?

using [<Emit("$0.propName = $1")>] seems to work well

[MangelMaxime]

@Zaid-Ajaj Seems to work for me too :)

Always the savior of Emit usage :D

@alfonsogarciacaro I let you decide if the proposition of @Zaid-Ajaj is enough to fix this issue or not :)

[Zaid-Ajaj]

@MangelMaxime I just realized it only works for geting the property :(

[Zaid-Ajaj]

OK the final solution with optional parameters works for both set and get :smile:

open Fable.Core
open Fable.Core.JsInterop

type TextStyle =
    [<Emit("{{$1? $0.fontFamily = $1 : $0.fontFamily}}")>]
    abstract FontFamily : string option with get, set

    [<Emit("{{$1? $0.fontSize = $1 : $0.fontSize}}")>]
    abstract FontSize : float option with get, set

let TextStyleDefault =
      let style = createEmpty<TextStyle>
      style.FontFamily <- Some "Arial"
      style.FontSize <- Some 14.
      let family = style.FontFamily
      let size = style.FontSize
      style

Compiles to

export const TextStyleDefault = (() => {
  const style = {};
  style.fontFamily = "Arial";
  style.fontSize = 14;
  const family = style.fontFamily;
  const size = style.fontSize;
  return style;
})();

[alfonsogarciacaro]

@Zaid-Ajaj is right, the setter only has two parameters, I mistook it with indexed properties, sorry!

However, as @Zaid-Ajaj also noted, you still need the conditional parameters to make both getter and setter work. But there was an error in fable-loader I just fixed, please update to 1.0.0-narumi-906 and use the code in my first reply (I just edited it).

[alfonsogarciacaro]

@Zaid-Ajaj I think you're the first person that used the {{$1?i:}} syntax ;)

[MangelMaxime]

@alfonsogarciacaro Have you published the new version of fable-loader ?
I can only get version 1.0.0-narumi-905.

[alfonsogarciacaro]

@MangelMaxime Yes, I did. But it seems npm is taking a bit to index it... it's Saturday night ;) Can you please try again in 5 mins?

[MangelMaxime]

@alfonsogarciacaro Yes sure :)
Sorry ^^

[Zaid-Ajaj]

@alfonsogarciacaro they are quite handy 😄

[alfonsogarciacaro]

@MangelMaxime @Zaid-Ajaj Sorry, I just found out that Emit is seriously broken :/ 1.0.0-narumi-906 won't fix it. Working on that...

[MangelMaxime]

@alfonsogarciacaro Ok no problem, I will rename the member for the moment.
Take your time to fix it :)

[alfonsogarciacaro]

@MangelMaxime @Zaid-Ajaj Ok, I've published fable-loader 1.0.0-narumi-907, it should work now 🙏

[MangelMaxime]

@alfonsogarciacaro
Thanks for the fix it's working :)