[WIP] Update to Fable 2 #66

forki · 2019-02-20T13:00:08Z

MangelMaxime · 2019-02-20T13:23:45Z

splitter.config.js

@@ -17,7 +17,7 @@ module.exports = {
  entry: resolve('src/Nightwatch.fsproj'),
  outDir: resolve("out"),
  babel: {
-     //   presets: [["es2015", { modules: false }]],
+    plugins: ["@babel/plugin-transform-modules-commonjs"],


In the example, I have you I use @babel/plugin-transform-modules-commonjs because it was needed for node.js support

I don't know, if this is needed for React Native env.

ah ok. let me remove it for now

MangelMaxime · 2019-02-20T13:24:55Z

@forki What are you expecting from me?

For me, the diff seems good for an upgrade to Fable 2.1. Do you expect me to build/test the app?

forki · 2019-02-20T13:34:23Z

no I don't.
I'm currently missing the command that will run fable. #64 (comment)
basically the replacement for dotnet fable npm-run build

MangelMaxime · 2019-02-20T13:46:20Z

You need to start fable-splitter by using yarn run fable-splitter for example.

It will start the compiler for you.

forki · 2019-02-20T13:50:18Z

ah cool. that was missing link. trying that now!

forki · 2019-02-21T11:18:50Z

So everything compiles, but

react-navigation/react-navigation#2767 (comment) suggest there is some trouble with the import.

https://stackoverflow.com/a/47871724/145701 suggests there needs to be some additonal export!?

But I don't see what changed.

@alfonsogarciacaro any ideas?

forki · 2019-02-21T11:30:18Z

@MangelMaxime I assume we need to "export" Elmish.ReactNative.Components.App somehow!?

https://github.com/elmish/react/blob/master/src/react-native.fs#L15

forki · 2019-02-21T11:39:42Z

elmish/react@c6c15b5#diff-ce3e72f76b021b9de55e8aba30e99cf5R45 looks like @alfonsogarciacaro already fixed something for fable2. how can I test that?

forki · 2019-02-21T11:52:32Z

yes that's the correct change. good work @alfonsogarciacaro
just the issue is: there is no compatible package of this released

MangelMaxime · 2019-02-21T12:26:22Z

@forki If I didn't mess up the merge/rebase, I released Fable.Elmish.React 2.2.0 with the fix included.

Available when nuget ready.

MangelMaxime · 2019-02-21T12:27:48Z

@MangelMaxime I assume we need to "export" Elmish.ReactNative.Components.App somehow!?

https://github.com/elmish/react/blob/master/src/react-native.fs#L15

I don't understand this comment. Is the fix in Fable.Elmish.React enough or do we still need to do something?

forki · 2019-02-21T12:29:30Z

fix would be enough. let me test the new packge

Use new elmish

forki · 2019-02-21T12:41:09Z

confirmed. Fable.Elmish.React 2.2.0 fixed it. thanks!

now I'm down to warnings.

it complains about line 59 in

forki · 2019-02-21T13:16:50Z

 const logo = createElement(Image, createObj(ofArray([new Props.ImageProperties(5, require("../../images/raven.jpg")), new Props.ImageProperties(6, ofArray([new Props.FlexStyle(1, "center"), new Props.FlexStyle(10, "column")]))]), 1));

this is how fable did it in 1.x

alfonsogarciacaro · 2019-02-22T08:45:14Z

Looks like the keyValueProps call is missing. Fable 1 did this implicitly I believe, but in Fable 2 you have to call it explicitly to transform the list into a JS object

alfonsogarciacaro · 2019-02-22T08:46:23Z

Ah, I think the Style function is wrong, I'll check after coming back from kindergarten

forki · 2019-02-22T08:53:34Z

so we need to update the bindings?

alfonsogarciacaro · 2019-02-22T09:44:02Z

I think so, in fable-react, Style is disguised as a union case, but it's actually a function that calls keyValueList: https://github.com/fable-compiler/fable-react/blob/b89835014ae16caec51938ad8337010b36b13613/src/Fable.React/Fable.React.Props.fs#L731-L732

We need to do something similar for fable-react-native bindings, for example here: https://github.com/fable-compiler/fable-react-native/blob/e4c666f27dfc1ff77bdbfaa0e899f30dadff2839/src/Fable.Helpers.ReactNative.fs#L531

Because there are many cases accepting IStyle list, if this makes the bindings too hacky, another solution is to create a function like this:

type IStyleProps = interface end

let style (props: IStyle seq) = keyValueList CaseRules.LowerFirst props :?> IStyleProps

Then change all IStyle list to IStyleProps. The drawback is it forces the user to call style all the time, but you can turn the function into an operator like: let (!^) (props: IStyle seq) = ...

forki · 2019-02-22T09:47:05Z

Tbh I don't mind making it breaking (it's already breaking anyway) - I want it look work as close as possible like React proper. Alfonso Garcia-Caro <notifications@github.com> schrieb am Fr., 22. Feb. 2019, 10:44:

…

I think so, in fable-react, Style is disguised as a union case, but it's actually a function that calls keyValueList: https://github.com/fable-compiler/fable-react/blob/b89835014ae16caec51938ad8337010b36b13613/src/Fable.React/Fable.React.Props.fs#L731-L732 We need to do something similar for fable-react-native bindings, for example here: https://github.com/fable-compiler/fable-react-native/blob/e4c666f27dfc1ff77bdbfaa0e899f30dadff2839/src/Fable.Helpers.ReactNative.fs#L531 Because there are many cases accepting IStyle list, if this makes the bindings too hacky, another solution is to create a function like this: type IStyleProps = interface end let style (props: IStyle seq) = keyValueList CaseRules.LowerFirst props :?> IStyleProps Then change all IStyle list to IStyleProps. The drawback is it forces the user to call style all the time, but you can turn the function into an operator like: let (!^) (props: IStyle seq) = ... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#66 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADgNISqEQ9flokMjFB1KxZPfu-HrBLIks5vP7vjgaJpZM4bFKNN> .

forki · 2019-02-22T10:26:20Z

let's go with option 1: what do I need to do?

forki · 2019-02-22T11:55:05Z

@alfonsogarciacaro

for testing I added the following to my Fable.Helpers.ReactNative.fs:

let inline ImagePropertiesStyle (style: IStyle list) : IImageProperties =
    !!("style", keyValueList CaseRules.LowerFirst style)

and indeed it seems to work if I use that function instead of ImageProperties.Style.

so we replace all these union cases with such a function? Is that the idea?

MangelMaxime · 2019-02-22T13:01:54Z

@forki Yes, the idea is to replace the *.Style to use a similar function.

If the existing DSL used a Style case, you can use a static member and make it a non breaking change. Example

forki · 2019-02-22T13:18:49Z

Ok cool. Will try it and send pull request Maxime Mangel <notifications@github.com> schrieb am Fr., 22. Feb. 2019, 14:01:

…

@forki <https://github.com/forki> Yes, the idea is to replace the *.Style to use a similar function. If the existing DSL used a Style case, you can use a static member and make it a non breaking change. Example <https://github.com/fable-compiler/fable-react/blob/62c0c88830c72e11bab32ad9686fb8aa9ef1289a/src/Fable.ReactLeaflet/ReactLeaflet.fs#L472> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#66 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADgNJR9PzuzSoxzlYpl5L9X8j5Jbgi4ks5vP-pDgaJpZM4bFKNN> .

forki · 2019-02-22T14:33:44Z

@alfonsogarciacaro @MangelMaxime looks like we actually made it work. Thanks guys!

Only issue left is bug in fable splitter: fable-compiler/Fable#1751

Major changes: - Upgrade to RN 58.5 - Upgrade the gradle/android project to latest version (seems needed for RN 58.5) - Upgrade to Elmish.HMR 3.2 which fix HMR support for RN - Re-activate the HMR support in the application

ImaginaryDevelopment · 2021-03-02T14:23:38Z

Is this work still ongoing? Can we use DotNet 5 and the latest Fable for react-native apps?

tforkmann · 2021-03-02T15:54:05Z

I have a open PR for net5 and Fable 3
Works on iOS
Android need a tiny fix

Update NuGet packages

fb04ab2

forki mentioned this pull request Feb 20, 2019

fable 2.x #64

Open

MangelMaxime reviewed Feb 20, 2019

View reviewed changes

Get fable-compiler from npm

2a15eb7

forki force-pushed the fable2 branch from 07c42b8 to 2a15eb7 Compare February 20, 2019 13:30

use netstandard2.0

f01e6b4

Update code to fable 2

6b94129

forki force-pushed the fable2 branch from ced9fde to 620584b Compare February 20, 2019 14:33

Modernize build

002d81b

forki force-pushed the fable2 branch from 620584b to 002d81b Compare February 20, 2019 14:34

forki added 3 commits February 20, 2019 15:53

Use patched Fable.React.Native

b6a1200

ImageURISourceProperties

9af1dd0

disable HMR for now

2d2919d

Monkey patch react-native

e7efba1

Use new elmish

forki mentioned this pull request Feb 22, 2019

fix Style properties fable-compiler/fable-react-native#43

Merged

Use fixed Styles

f2b509c

forki and others added 4 commits February 26, 2019 14:07

Use Fable next

80c6620

Upgrade all deps to latest

a9dcaa7

Major changes: - Upgrade to RN 58.5 - Upgrade the gradle/android project to latest version (seems needed for RN 58.5) - Upgrade to Elmish.HMR 3.2 which fix HMR support for RN - Re-activate the HMR support in the application

Babel core update

9b3d370

Use correct react version

54bd1b5

forki mentioned this pull request Feb 28, 2019

Rn 0.57 support #63

Closed

playfulThinking mentioned this pull request Aug 8, 2020

In new app, getting error: "React.createElement: type is invalid..." fable-compiler/fable-react-native#61

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Update to Fable 2 #66

[WIP] Update to Fable 2 #66

forki commented Feb 20, 2019 •

edited

MangelMaxime Feb 20, 2019

forki Feb 20, 2019

MangelMaxime commented Feb 20, 2019

forki commented Feb 20, 2019

MangelMaxime commented Feb 20, 2019

forki commented Feb 20, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

MangelMaxime commented Feb 21, 2019

MangelMaxime commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

alfonsogarciacaro commented Feb 22, 2019

alfonsogarciacaro commented Feb 22, 2019

forki commented Feb 22, 2019

alfonsogarciacaro commented Feb 22, 2019

forki commented Feb 22, 2019 via email

forki commented Feb 22, 2019

forki commented Feb 22, 2019

MangelMaxime commented Feb 22, 2019

forki commented Feb 22, 2019 via email

forki commented Feb 22, 2019

ImaginaryDevelopment commented Mar 2, 2021

tforkmann commented Mar 2, 2021

[WIP] Update to Fable 2 #66

Are you sure you want to change the base?

[WIP] Update to Fable 2 #66

Conversation

forki commented Feb 20, 2019 • edited

MangelMaxime Feb 20, 2019

Choose a reason for hiding this comment

forki Feb 20, 2019

Choose a reason for hiding this comment

MangelMaxime commented Feb 20, 2019

forki commented Feb 20, 2019

MangelMaxime commented Feb 20, 2019

forki commented Feb 20, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

MangelMaxime commented Feb 21, 2019

MangelMaxime commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

forki commented Feb 21, 2019

alfonsogarciacaro commented Feb 22, 2019

alfonsogarciacaro commented Feb 22, 2019

forki commented Feb 22, 2019

alfonsogarciacaro commented Feb 22, 2019

forki commented Feb 22, 2019 via email

forki commented Feb 22, 2019

forki commented Feb 22, 2019

MangelMaxime commented Feb 22, 2019

forki commented Feb 22, 2019 via email

forki commented Feb 22, 2019

ImaginaryDevelopment commented Mar 2, 2021

tforkmann commented Mar 2, 2021

forki commented Feb 20, 2019 •

edited