Questions about how to write bindings and a few other small things.

[thitemple]

Hi, I'm working on POC using fable-react-native so we can see if this is a good approach for our new app, and I have a few questions that I didn't know where else to ask.

First, we need to use Mapbox, I'm actually trying to use this component https://github.com/mapbox/react-native-mapbox-gl/blob/master/docs/MapView.md and of course I'm trying to write my first F# bindings for it. In its demo the component is imported this way import MapboxGL from '@mapbox/react-native-mapbox-gl'; and used this way:

<MapboxGL.MapView
          showUserLocation={true}
          zoomLevel={12}
          userTrackingMode={MapboxGL.UserTrackingModes.Follow}
          styleURL={this.state.styleURL}
          style={sheet.matchParent}
        />

Here's what I came up with that is not working yet, and I was wondering if you could help me with it.

type MapViewProps =
    | ShowsUserLocation of bool
    | ZoomLevel of int
    | StyleURL of string
    | Style of string

let inline mapView (props: MapViewProps list) : ReactElement =    
    ofImport "MapView" "@mapbox/react-native-mapbox-gl" (keyValueList CaseRules.LowerFirst props) []

Also, I'm using as a base the SAFE-Nightwatch demo, and I was wondering if it's possible to debug using vscode, I was not able to do so, so far.

Finally, I'm starting the app using build.cmd debug and if I stop the process using Ctrl+C I can never seem to start it again, some process is kept hung up and I cannot restart the app again.

I appreciate any directions you can give me, thank you

[alfonsogarciacaro]

Hi @thitemple! On a first look it seems you need to import the default member:

// JS: Note this is importing the default member, you can give it any name
import MapboxGL from '@mapbox/react-native-mapbox-gl'

// In F# becomes...
ofImport "default" "@mapbox/react-native-mapbox-gl" ...

// JS: On the other hand, if you're importing a member you do need to use the proper name. Note the braces.
import { MapboxGL } from '@mapbox/react-native-mapbox-gl'

// In F# becomes...
ofImport "MapboxGL" "@mapbox/react-native-mapbox-gl" ...

More info here. This is a common source of confusion, maybe we need to change the importing mechanism but I'm not sure what would be the best solution. Unfortunately we cannot type check JS imports from F#/Fable.

About the build script, it's been a while since I haven't done anything with react-native so I'm not sure. Maybe @forki or @et1975 can help?

[thitemple]

One thing I'm seeing is that sometimes (and I'm using a clone of the Nightwatch template) when I change the Styles.fs file, fable does not trigger a compilation, I have to change some other file like Home.fs for that to happen.

[forki]

Remove all inline keywords from style.fs and it will work

Thiago Temple notifications@github.com schrieb am Mo., 25. Juni 2018, 19:13:

One thing I'm seeing is that sometimes (and I'm using a clone of the Nightwatch template) when I change the Styles.fs file, fable does not trigger a compilation, I have to change some other file like Home.fs for that to happen.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fable-compiler/fable-react-native/issues/25#issuecomment-400027184, or mute the thread https://github.com/notifications/unsubscribe-auth/AADgNOMtAD5kvyYxjAnrgp38yOMt6c4Jks5uARokgaJpZM4Uuhw9 .

[et1975]

change the Styles.fs file, fable does not trigger a compilation

Used to be cool to inline the styles for some reason, fable splitter doesn't seem to notice if all you change is inlined function. Just remove any inline you see and the watch should start recompiling on save.

[forki]

Yeah the inline is really not a good idea. Would appreciate a pr that removes it from the samples as well

Eugene Tolmachev notifications@github.com schrieb am Mo., 25. Juni 2018, 19:19:

change the Styles.fs file, fable does not trigger a compilation Used to be cool to inline the styles for some reason, fable splitter doesn't seem to notice if all you change is inlined function. Just remove any inline you see and the watch should start recompiling on save.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fable-compiler/fable-react-native/issues/25#issuecomment-400028900, or mute the thread https://github.com/notifications/unsubscribe-auth/AADgNDHROakEaXkjpUb8agrn5bcRJSvOks5uARuUgaJpZM4Uuhw9 .

[thitemple]

@forki As you wish https://github.com/SAFE-Stack/SAFE-Nightwatch/pull/60

Now, I don't understand why does that fix the issue. Could you explain it to me, please? Or point me to something I can read about it?

[forki]

Fable inlines things itself and doesn't use FSharp.Compiler.Service for that yet. I think it's just not seeing the changes right now. /cc @alfonsogarciacaro

Thiago Temple notifications@github.com schrieb am Mo., 25. Juni 2018, 20:02:

@forki https://github.com/forki As you wish SAFE-Stack/SAFE-Nightwatch#60 https://github.com/SAFE-Stack/SAFE-Nightwatch/pull/60

Now, I don't understand why does that fix the issue. Could you explain it to me, please? Or point me to something I can read about it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fable-compiler/fable-react-native/issues/25#issuecomment-400042151, or mute the thread https://github.com/notifications/unsubscribe-auth/AADgNKdza_1Xhe56RB0x8qsCsAjmPmifks5uASW1gaJpZM4Uuhw9 .

[alfonsogarciacaro]

Sorry I didn't check this issue. Inlining is for some optimizations (like creating the styles object at compile time when possible instead of building it at runtime). fable-loader (webpack) marks files importing an inline function as dependencies so they get recompiled if you change the function. I think fable-splitter doesn't do it yet. If you want you can open an issue in Fable repo for it... or better yet send a WIP PR and we do it together!

[thitemple]

I can try and take a look at it later tonight for sure

[alfonsogarciacaro]

Sorry! I was wrong, I just remembered we're not adding dependencies in fable-loader anymore (reference: https://github.com/fable-compiler/Fable/issues/1241). This is done on the .NET side of Fable now. If your project is using a recent Fable version, I guess the problem may be that fable-splitter doesn't get to watch the files containing the inline functions, so editing that file doesn't trigger a recompilation.

I need to look better into this, but maybe changing compiledPaths with projectFiles in this line may help.