search

fable-compiler / Fable

F# to JavaScript, TypeScript, Python, Rust and Dart Compiler
http://fable.io/
MIT License
2.93k stars 300 forks source link

How to get new JSX syntax working? #3289

Closed bigjonroberts closed 1 year ago

bigjonroberts commented 1 year ago

Description

I attempted integrating this in an example that send fable output to NextJS.

Repro code

Remove comments from lines 22-30 to see this in action. https://github.com/Neftedollar/Nextjs-Fable-simple-app/pull/2/files#diff-ca9363f15a16289ce46b600cbf6ff1d131100f78e7a370ffe4a5d476a54b103cR22-R30

Expected and actual results

Expected:

PS C:\work\Nextjs-Fable-simple-app> dotnet fable
Fable: F# to JavaScript compiler 4.0.0-theta-018 (status: beta)
Thanks to the contributor! @i-p
Stand with Ukraine! https://standwithukraine.com.ua/

Parsing App.fsproj...
Retrieving project options from cache, in case of issues run `dotnet fable clean` or try `--noCache` option.
Project and references (8 source files) parsed in 129ms

Skipped compilation because all generated files are up-to-date!
PS C:\work\Nextjs-Fable-simple-app> npm run fableBuild

> my-app@0.1.0 fableBuild
> fable-splitter App.fsproj --allFiles -e .jsx -o ./

fable-splitter 2.2.1
fable: Compilation started at 2:47:53 PM
fable-compiler 2.13.0
C:\work\Nextjs-Fable-simple-app> dotnet restore App.fsproj
  Determining projects to restore...
  All projects are up-to-date for restore.

Parsing ./App.fsproj...
fable: Compiled pages\index.fs
fable: Compiled .fable\fable-library.2.13.0\List.js
fable: Compiled .fable\fable-library.2.13.0\Option.js
fable: Compiled .fable\fable-library.2.13.0\Types.js
fable: Compiled .fable\fable-library.2.13.0\Util.js
fable: Compiled .fable\fable-library.2.13.0\Seq.js
fable: Compiled .fable\fable-library.2.13.0\Decimal.js
fable: Compiled .fable\fable-library.2.13.0\lib\big.js
fable: Compiled .fable\fable-library.2.13.0\Long.js
fable: Compiled .fable\fable-library.2.13.0\Int32.js
fable: Compiled .fable\fable-library.2.13.0\lib\long.js
fable: Compiled .fable\fable-library.2.13.0\Array.js
fable: Compiled .fable\fable-library.2.13.0\Map.js
fable: Compiled .fable\fable-library.2.13.0\Reflection.js
fable: Compiled .fable\fable-library.2.13.0\String.js
fable: Compiled .fable\fable-library.2.13.0\Date.js
fable: Compiled .fable\fable-library.2.13.0\RegExp.js
fable: Compiled .fable\fable-library.2.13.0\MutableMap.js
fable: Compiled .fable\fable-library.2.13.0\Set.js
fable: Compiled .fable\fable-library.2.13.0\MutableSet.js
fable: Compiled .fable\Fable.React.9.1.0\Fable.ReactServer.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Standard.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Isomorphic.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.FunctionComponent.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.ReactiveComponents.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Helpers.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Props.fs
fable: Compilation succeeded at 2:48:02 PM (8.656 s)

Actual:

PS C:\work\Nextjs-Fable-simple-app> dotnet fable
Fable: F# to JavaScript compiler 4.0.0-theta-018 (status: beta)
Thanks to the contributor! @justinjstark
Stand with Ukraine! https://standwithukraine.com.ua/

Parsing App.fsproj...
Retrieving project options from cache, in case of issues run `dotnet fable clean` or try `--noCache` option.
Project and references (8 source files) parsed in 124ms

Started Fable compilation...
Fable compilation finished in 2211ms

PS C:\work\Nextjs-Fable-simple-app> npm run fableBuild

> my-app@0.1.0 fableBuild
> fable-splitter App.fsproj --allFiles -e .jsx -o ./

fable-splitter 2.2.1
fable: Compilation started at 2:49:57 PM
fable-compiler 2.13.0
C:\work\Nextjs-Fable-simple-app> dotnet restore App.fsproj
  Determining projects to restore...
  All projects are up-to-date for restore.

Parsing ./App.fsproj...
fable: Compiled pages\index.fs
fable: Compiled .fable\fable-library.2.13.0\List.js
fable: Compiled .fable\fable-library.2.13.0\Option.js
fable: Compiled .fable\fable-library.2.13.0\Types.js
fable: Compiled .fable\fable-library.2.13.0\Util.js
fable: Compiled .fable\fable-library.2.13.0\Seq.js
fable: Compiled .fable\fable-library.2.13.0\Decimal.js
fable: Compiled .fable\fable-library.2.13.0\lib\big.js
fable: Compiled .fable\fable-library.2.13.0\Long.js
fable: Compiled .fable\fable-library.2.13.0\Int32.js
fable: Compiled .fable\fable-library.2.13.0\lib\long.js
fable: Compiled .fable\fable-library.2.13.0\Array.js
fable: Compiled .fable\fable-library.2.13.0\Map.js
fable: Compiled .fable\fable-library.2.13.0\Reflection.js
fable: Compiled .fable\fable-library.2.13.0\String.js
fable: Compiled .fable\fable-library.2.13.0\Date.js
fable: Compiled .fable\fable-library.2.13.0\RegExp.js
fable: Compiled .fable\fable-library.2.13.0\MutableMap.js
fable: Compiled .fable\fable-library.2.13.0\Set.js
fable: Compiled .fable\fable-library.2.13.0\MutableSet.js
fable: Compiled .fable\Fable.React.9.1.0\Fable.ReactServer.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Standard.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.FunctionComponent.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.ReactiveComponents.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Isomorphic.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Props.fs
fable: Compiled .fable\Fable.React.9.1.0\Fable.React.Helpers.fs
C:/work/Nextjs-Fable-simple-app/pages/index.fs(25,9): (25,11) error FSHARP: This token is reserved for future use (code 1160)
C:/work/Nextjs-Fable-simple-app/pages/index.fs(25,9): (25,11) error FSHARP: Unexpected whitespace in binding. Expected incomplete structured construct at or before this point or other token. (code 10)
C:/work/Nextjs-Fable-simple-app/pages/index.fs(34,55): (34,58) error FSHARP: End of file in triple-quote string begun at or before here (code 1232)
fable: Compilation failed at 2:50:06 PM (8.478 s)

Related information

alfonsogarciacaro commented 1 year ago

Hi @bigjonroberts. Thanks for your detailed report. Looking at the logs, it seems both Fable 4 and Fable 2 (via fable-splitter) are being run, and the error actually comes from Fable 2 which doesn't support JSX (and many other things). Looking at the linked PR, I think you can totally replace Fable 2 by using the following scripts in package.json when invoking Fable.

{
  "scripts": {
    "dev": "dotnet fable App.fsproj -e .jsx --watch -o ./ --run next dev",
    "build": "dotnet fable App.fsproj -e .jsx && next build",
  }
}

You can remove the fable-compiler and fable-splitter dependencies. As they are not needed any more. Also, for React/NextJS to accept the functional components, they must start with uppercase. So after uncommenting the hello function you need to change it to Hello.

bigjonroberts commented 1 year ago

This worked! Thanks so much for your help @alfonsogarciacaro !!!