laurentpayot/fsharp-fable-elmish-example

F# Fable Elmish example, with Preact and Vite.

F# Fable Elmish example

The goal of this example is to show how to get typical Elm features (see below) in F#. It uses Fable to transpile F# to JavaScript and Elmish to get The Elm Architecture (TEA), also known as the Model View Update (MVU) pattern.

Elmish normally uses React under the hood, but in this example React was seamlessly replaced by Preact to get performances similar to Elm, both in term of speed and bundle size.

Featuring

• Startup flags
• Getting a random number
• Routing
• Subscription via a JavaScript custom event
• Foreign Function Interface (FFI) using synchronous and asynchronous functions imported from JavaScript
• JSON decoding
• Keyed list
• Unit tests
• Hot Module Replacement (HMR)
• Debugger (via Redux DevTools)

Prerequisites

To run this example app on your local machine, you will need:

• .NET 8 SDK
• pnpm
• Node.js (can be installed via pnpm with pnpm env use --global latest)
• Redux DevTools browser extension for the debugger, and maybe Preact DevTools if you wish to inspect the rendering itself.
• Ionide plugin for your IDE is highly recommended.

Usage

• pnpm i to install Node.js dependencies as well as F# dependencies.
• pnpm start to start the Vite development server with automatic refresh on http://localhost:5000.
• pnpm build to build the bundle, then pnpm serve to serve it as a single page application on http://localhost:5000.
• pnpm test to run unit tests.
• pnpm test:watch to run unit tests in watch mode.

If you get an error like ENOSPC: System limit for number of file watchers reached, run pnpm watchers-fix to increase the number of watchers on your system. If you want this increase to be permanent, see this answer on StackOverflow.

License

MIT