search

elmish / react

Elmish React extensions for writing SPA and Native apps
https://elmish.github.io/react
Other
104 stars 21 forks source link

Sample doesn't compile #52

Open ImaginaryDevelopment opened 3 years ago

ImaginaryDevelopment commented 3 years ago

Description

Following the code from https://elmish.github.io/react/native.html does not compile

Repro code

steps

  1. create paket.dependencies from https://github.com/elmish/react/blob/v3.x/paket.dependencies
  2. dotnet new fable
  3. dotnet tool install paket - and remove the nuget references inside App.fsproj
  4. dotnet paket convert-from-nuget --force
  5. manually add the files from paket.dependencies to paket.references
  6. dotnet paket install
  7. npm install
  8. npm start -> runs just fine
  9. change the App.fs to match the Fable React Elmish sample code -> No Compilation fable-elmish-react-fail.zip
source https://nuget.org/api/v2
storage: none
nuget Fable.Browser.Dom 2.2.0
nuget Fable.Elmish.React
nuget FSharp.Core redirects:force, content:none
nuget Fable.Core 3.2.3
nuget Fable.React
nuget Fable.Elmish

paket.references

Fable.Browser.Dom
Fable.Elmish.React
FSharp.Core
Fable.Core
Fable.React
Fable.Elmish

Expected and actual results

Expected dotnet build and npm start still work

Actual

Description

Following the code from https://elmish.github.io/react/native.html does not compile

Repro code

steps

  1. create paket.dependencies from https://github.com/elmish/react/blob/v3.x/paket.dependencies
  2. add Fable.React.Elmish
  3. dotnet new fable
  4. dotnet tool install paket
  5. dotnet paket convert-from-nuget --force
  6. manually add the files from paket.dependencies to paket.references
  7. paket install
  8. npm install
  9. npm start -> runs just fine
  10. change the App.fs to match the Fable React Elmish sample code -> No Compilation
source https://nuget.org/api/v2
storage: none
nuget Fable.Elmish.React
nuget FSharp.Core redirects:force, content:none
nuget Fable.Core
nuget Fable.React
nuget Fable.Elmish

paket.references

FSharp.Core
Fable.Core
Fable.React
Fable.Elmish
Fable.Elmish.React

Expected and actual results

Expected dotnet build and npm start still work

Actual

Neither works, both complain about missing namespaces

>dotnet build
Microsoft (R) Build Engine version 16.9.0+57a23d249 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  Paket version 5.257.0
  The last restore is still up to date. Nothing left to do.
  Performance: - Runtime: 120 milliseconds
  Paket version 5.257.0
  Starting restore process.
  Performance: - Runtime: 784 milliseconds
  Restored D:\projects\insertprojectnamehere\App.fsproj (in 147 ms).
D:\projects\insertprojectnamehere\App.fs(16,19): error FS0039: The namespace 'ReactNative' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(17,12): error FS0039: The namespace 'Helpers' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(21,5): error FS0039: The value or constructor 'text' is not defined. Maybe you want one of the following:↔   Text↔   exn↔   exp↔   exn [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(27,8): error FS0039: The value or constructor 'touchableHighlightWithChild' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(40,5): error FS0039: The value or constructor 'view' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]

Build FAILED.

D:\projects\insertprojectnamehere\App.fs(16,19): error FS0039: The namespace 'ReactNative' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(17,12): error FS0039: The namespace 'Helpers' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(21,5): error FS0039: The value or constructor 'text' is not defined. Maybe you want one of the following:↔   Text↔   exn↔   exp↔   exn [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(27,8): error FS0039: The value or constructor 'touchableHighlightWithChild' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]
D:\projects\insertprojectnamehere\App.fs(40,5): error FS0039: The value or constructor 'view' is not defined. [D:\projects\insertprojectnamehere\App.fsproj]
    0 Warning(s)
    5 Error(s)

Time Elapsed 00:00:04.11

Related information

et1975 commented 3 years ago

Sadly RN story has been neglected and I don't see myself updating it. A new sample needs to be built from scratch using the latest RN tooling and current Fable compiler (this sample was written for Fable 2.x). Not sure how well the two still fit together. PR would be welcome.

ImaginaryDevelopment commented 3 years ago

That's unfortunate, could you point me in the right direction?

On Tue, Jun 8, 2021 at 3:43 PM Eugene Tolmachev @.***> wrote:

Sadly RN story has been neglected and I don't see myself updating it. A new sample needs to be built from scratch using the latest RN tooling and current Fable compiler (this sample was written for Fable 2.x). Not sure how well the two still fit together. PR would be welcome.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/elmish/react/issues/52#issuecomment-857059613, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA5TPCXMQ2I3VNZT72ZXEDTRZXHDANCNFSM46KGWAWQ .

MangelMaxime commented 3 years ago

Hello @ImaginaryDevelopment with Fable 3 it is now easier to integrate Fable into JavaScript tooling because Fable 3 generates JavaScript files directly on the disk.

If the standard JavaScript workflow is:

  1. Write JavaScript code
  2. Have the JS tooling detect change from the JavaScript file

Now with Fable it is:

  1. Write F# code
  2. Have Fable watch the F# code and generate the JavaScript files
  3. Have the JS tooling detect change from the JavaScript files

It removes the needs to have custom loader or plugin for the JavaScript tools.

Knowing that, setting up Fable looks like that:

  1. dotnet new tool-manifest
  2. dotnet tool install fable
  3. Setup an F# project

  4. Run dotnet fable <path to your fsproj proj> --watch this will generate the the files along side the F# files.

    If you prefer to have them in their own folder, you can use dotnet fable <path to your fsproj proj> --watch --outDir fableBuild, this will place the generated files into the fableBuild directory

  5. Setup the RN toolchain from here using the generated files