naramdash / vite-ts-fs-template

starting fable project with vite-vanilla-ts

Use FSharp Fable with Typescript on Vite

last update: 2021-09-27

What is ...

• FSharp
• Fable
• Typescript
• Vite

Why I use this

You can use Typescript for NPM package glue to FSharp Code. You don't need to use ts2fable. Just write type informations as you need on fs. Enjoy @types of NPM packages in Typescript without hassle.

And Goodbye to Dinosaur webpack.config.js.

How to use this template

Click Use this template button on GitHub Repository Site

How to use .ts file in .fs

// App.fs

open Fable.Core

// Member imports
// import { alertPass } from "./usets"
// Same as Import("alertPass", "./usets")
[<Import("alertPass", from = "./usets")>]
let alertPass (msg1: string) (msg2: string) : unit = jsNative

app.onclick <- fun _ -> alertPass "123" "abc"

// usets.ts

function alertPass(msg1: string, msg2: string) {
  alert(`msg1: ${msg1}\nmsg2: ${msg2}`);
}

export { alertPass };

Check more information on Fable document.

NPM Scripts

From Vite

• dev: start dev server
• build: build for production
• serve: locally preview production build

From Fable

• postinstall: install dotnet tools (automatically called after npm install)

From Fable.Lit

• format: format *.fs files using fantomas

Template-Own

• trashfsjs: trash *.fs.js files in src