slogsdon / parcel-plugin-fable

Parcel asset type plugin for Fable

parcel-plugin-fable

Parcel asset type plugin for Fable

Featuring:

• F# + Fable
• Parcel

Reasoning

This project was primarily created to combine some new and old technologies in order to see what a more complete project could look like and how the individual parts would work together. Specifics:

• F#: strong, static typing + .NET ecosystem
• Fable: generated JavaScript code from F# sources
• Parcel: frontend asset bundling with minimal configuration

Requirements

• Node.js
• Yarn or npm
• dotnet SDK

Getting Started

yarn add parcel-plugin-fable

Parcel will automatically include any dependencies listed in package.json that start with parcel-plugin-, so there is no additional configuration. On first build of a .fsproj or .fsx file, fable-splitter and babel-core will be added as dependencies and are responsible for transpiling to JavaScript.

See the example for a complete project.

LICENSE

This project is licensed under the MIT License. See LICENSE for more details.

parcel-plugin-fable's Issues

Convert example to dotnet new template

Yarn lock and package.json

Are the two files in sync? For example, there are no dependencies, just two dev dependencies for parcel, yet the lock file contains bable and fable etc. etc.?

Issue when building with cache and NuGet dependencies

When building a project with cache present and NuGet dependencies, some modules (internal and external) throw errors during compilation:

🚨  /Users/shane.logsdon/.nuget/packages/fable.elmish/1.0.1/fable/program.fs: Cannot resolve dependency './cmd.fs' at '/Users/shane.logsdon/.nuget/packages/fable.elmish/1.0.1/fable/cmd.fs'
    at /Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:166:21)
Condition always false [0:8,6]
Dropping unreachable code [0:16,4]
Dropping side-effect-free statement [0:24,4]
Condition always true [0:28,4]
Dropping unreachable code [0:34,2]
ERROR: /Users/shane.logsdon/Code/javascript/fable-browser-notes/src/Counter/Types.fs doesn't belong to any of loaded projects []
   at [e-mail](String message)
   at [email protected](Tuple`2 _arg1)
ERROR: /Users/shane.logsdon/Code/javascript/fable-browser-notes/src/Home/Types.fs doesn't belong to any of loaded projects []
   at [e-mail](String message)
   at [email protected](Tuple`2 _arg1)
ERROR: /Users/shane.logsdon/Code/javascript/fable-browser-notes/src/Counter/State.fs doesn't belong to any of loaded projects []
   at [e-mail](String message)
   at [email protected](Tuple`2 _arg1)
ERROR: /Users/shane.logsdon/Code/javascript/fable-browser-notes/src/Home/State.fs doesn't belong to any of loaded projects []
   at [e-mail](String message)
   at [email protected](Tuple`2 _arg1)
ERROR: /Users/shane.logsdon/.nuget/packages/fable.elmish/1.0.1/fable/cmd.fs doesn't belong to any of loaded projects []
   at [e-mail](String message)
   at [email protected](Tuple`2 _arg1)

Cannot run example

Thanks a lot for this, it's great to have the option to use Fable with Parcel 👏 👏

I tried to run the example but I got an error. Am I missing something? After cloning this repo I do:

cd example
yarn
dotnet restore
yarn start

But I get:

yarn run v1.2.1
$ yarn dotnet:run-script js:start
Fable (1.3.2) daemon started on port 61225
CWD: /Users/alfonsogarciacaronunez/dev/parcel-plugin-fable/example
yarn run js:start
Server running at http://localhost:1234 
🚨  /Users/alfonsogarciacaronunez/dev/parcel-plugin-fable/example/src/FableDemo.fsproj: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at dirname (path.js:1364:5)
    at localRequire (/Users/alfonsogarciacaronunez/dev/parcel-plugin-fable/example/node_modules/parcel-bundler/src/utils/localRequire.js:8:17)
    at FableAsset.parse (/Users/alfonsogarciacaronunez/dev/parcel-plugin-fable/example/node_modules/parcel-plugin-fable/src/fable-asset.js:9:11)
    at FableAsset.parseIfNeeded (/Users/alfonsogarciacaronunez/dev/parcel-plugin-fable/example/node_modules/parcel-bundler/src/Asset.js:47:29)
    at <anonymous>

Reporting errors

Do you know how errors are reported in Parcel plugins? I tried to use console.error/warn but it seems logs are overwritten if they run in the same process. Also, with the Webpack loader we mark files with errors as non-cacheable to make sure the bundler will recompile the file again (sometimes an error is fixed by modifying a different file), is there something similar with Parcel?

Enable watch mode when Parcel is in watch mode

Issue with Parcel's Resolver

Parcel seems to have an issue with resolving Node packages used by Fable libraries:

# expanded error
/Users/shane.logsdon/.nuget/packages/fable.elmish.react/1.0.1/fable/react.fs: Cannot resolve dependency 'react-dom'
    at /Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/shane.logsdon/Code/javascript/fable-browser-notes/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:166:21)

This may require a change in Parcel's Resolver class to handle these cases.

Edit: I originally thought this was related to Paket's storage: none declaration in paket.dependencies, but that doesn't seem to be the case.

Error on build Fable.Elmish.React exemple

Hi,

I got strange error when I try to run the code from this template : https://github.com/fable-elmish/templates/tree/master/src/react-demo/Content/src

yarn start v0.27.5
$ yarn dotnet:run-script js:start
Fable (1.3.2) daemon started on port 61225
CWD: D:\Repos\sourcing-product-generation
cmd /C yarn run js:start
Server running at http://localhost:1234
∞  Building App.fs...
ERROR: D:/Repos/sourcing-product-generation/src/App.fs doesn't belong to any of loaded projects []
   at [e-mail](String message)
×  src\App.fs: D:/Repos/sourcing-product-generation/src/App.fs doesn't belong to any of loaded projects []

Add source map support

Parcel 1.5.0 brings source map support, but the plugin will need to tell Fable + Babel to create the initial map