Fable: Create Fable transformer for React Native

[alfonsogarciacaro]

Related (partly) to #800

We haven't tried yet Fable 1.0 with RN. It should be possible to just add Webpack bundling as a previous step before RN own packaging. However, it seems it's not difficult to create a custom Fable packager which should make RN hot reloading much faster. @jgrund has already made something similar for Jest, maybe he could help here as well?

Links

• RN transformer
• RN source map transformer as reference
• Fable Webpack loader

Things to consider:

• Unlike Webpack loaders, RN packager only accepts one single transformer, so the custom transformer must load RN transformer and delegate to it for normal JS files. See how it's done in the react-native-sm-transformer.
• As we won't have the webpack config file, we must read Babel options from .babelrc. We can use the getBabelRC function in RN transformer for that. Remember we must also add Fable custom Babel plugins when compiling F# files.

If you want to help, please send a minimal WIP PR (please put the transformer in the src/typescript folder) so we can continue the discussion there. Thanks a lot for your help in advance!

cc @et1975 @forki

[jgrund]

I can try and add something over the next week or so.

[forki]

Wow that would be great!

[forki]

Any news on this one?

[alfonsogarciacaro]

I think for the moment we can try to update the Fable RN sample to 1.0 using Webpack. It's just a middle step but shouldn't be much of an issue. I can try to do it next week.

If @jgrund is busy, I can also try to have a look at the custom RN packager.

[jgrund]

Sorry for the delay, I've been busy at work open-sourcing our codebase. Starting to look at this; this may be a blocker for transpiling directly: https://github.com/facebook/react-native/pull/13689.

[jgrund]

I'll push an initial PR skeleton and go from there.

[jgrund]

Something else to investigate: https://github.com/callstack-io/haul. Looks like it works better with multiple transforms and has full access to webpack ecosystem.

[alfonsogarciacaro]

@jgrund No worries, thanks a lot for your help!

I checked facebook/react-native#13689. If I'm not mistaken it's about referencing non-js files without having to specify the extension. Fables does specify the extension so hopefully it shouldn't be a problem.

And thanks also for the link to the haul tool. It's weird I didn't find it when searching how to use Webpack with RN. It looks very interesting, I gave it a quick try and managed to create a RN app including an F# script using haul + Webpack + fable-loader (the only problem I had is apparently the app wouldn't start in the iOS simulator if remote JS debugging was not activated). What do you think, maybe this should be the way to go?

[jgrund]

If people are ok with haul, it seems simpler from a long term maintenance perspective as we can reuse fable-loader. I started to convert over fable-react_native_demo, however there don't appear to be 1.0 bindings for react-native. I'll push what have there as well and we can discuss how we want to solve this.

[jgrund]

Here is WIP PR that uses haul + Fable 1.0. https://github.com/fable-compiler/fable-react_native-demo/pull/18.

[alfonsogarciacaro]

Awesome, @jgrund, thank you! Yes, there're no RN bindings for Fable 1.0 yet, sorry! 😅 I'll try to update them later in the evening.

[alfonsogarciacaro]

@jgrund I've updated the RN bindings to Fable 1.0. I haven't tested them but they should work :pray: You can install them by running dotnet fable add fable-react-native@next (this should install as well fable-react and fable-powerpack).

Please tell me if there's any trouble.

[alfonsogarciacaro]

There's a already a PR for this in https://github.com/fable-compiler/fable-react_native-demo/pull/18, so we can track progress there :+1: