Elf.Porter 0.0.4

A library inspired by Elm ports. This is to simplify the interaction between JavaScript and F#.

Install-Package Elf.Porter -Version 0.0.4
dotnet add package Elf.Porter --version 0.0.4
<PackageReference Include="Elf.Porter" Version="0.0.4" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Elf.Porter --version 0.0.4
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Elf.Porter, 0.0.4"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install Elf.Porter as a Cake Addin
#addin nuget:?package=Elf.Porter&version=0.0.4

// Install Elf.Porter as a Cake Tool
#tool nuget:?package=Elf.Porter&version=0.0.4
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Usage

(* F# Code [/sample/Elf.Porter.Sample/App.fs] *)

module Elf.Porter.Sample

open Elmish
open Elmish.React
open Fable.React
open Fable.React.Props
open Elf.Porter

type Model = { Input: string }

type Msg 
    = GetText of string 
    | ShowPrompt

[<Porter("./app.js")>]
let inputText: unit -> unit = jsPorter

let getText, getTextSub = Porter.create GetText

let init (): Model * Cmd<Msg> =
    { Input = "" }, Cmd.none 

let update (msg: Msg) (model: Model): Model * Cmd<Msg> = 
    match msg with 
    | GetText text -> { model with Input = text }, Cmd.none
    | ShowPrompt -> model, Cmd.port inputText ()

let subscription (model: Model): Cmd<Msg> =
    Cmd.ofSub getTextSub

let view (model: Model) (dispatch: Dispatch<Msg>): ReactElement = 
    div [] 
        [ button 
            [ OnClick(fun _ -> dispatch ShowPrompt) ] 
            [ str "Show Prompt" ]
        ; str model.Input
        ]

Program.mkProgram init update view 
|> Program.withSubscription subscription
|> Program.withReactBatched "app"
|> Program.run
/* JavaScript Code [/sample/Elf.Porter.Sample/app.js] */
import { getText } from "./App.fs";

export function inputText() {
    const text = prompt("input: ");
    getText(text);
}

Usage

(* F# Code [/sample/Elf.Porter.Sample/App.fs] *)

module Elf.Porter.Sample

open Elmish
open Elmish.React
open Fable.React
open Fable.React.Props
open Elf.Porter

type Model = { Input: string }

type Msg 
    = GetText of string 
    | ShowPrompt

[<Porter("./app.js")>]
let inputText: unit -> unit = jsPorter

let getText, getTextSub = Porter.create GetText

let init (): Model * Cmd<Msg> =
    { Input = "" }, Cmd.none 

let update (msg: Msg) (model: Model): Model * Cmd<Msg> = 
    match msg with 
    | GetText text -> { model with Input = text }, Cmd.none
    | ShowPrompt -> model, Cmd.port inputText ()

let subscription (model: Model): Cmd<Msg> =
    Cmd.ofSub getTextSub

let view (model: Model) (dispatch: Dispatch<Msg>): ReactElement = 
    div [] 
        [ button 
            [ OnClick(fun _ -> dispatch ShowPrompt) ] 
            [ str "Show Prompt" ]
        ; str model.Input
        ]

Program.mkProgram init update view 
|> Program.withSubscription subscription
|> Program.withReactBatched "app"
|> Program.run
/* JavaScript Code [/sample/Elf.Porter.Sample/app.js] */
import { getText } from "./App.fs";

export function inputText() {
    const text = prompt("input: ");
    getText(text);
}

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
0.0.4 282 10/22/2020