Skip to content

Instantly share code, notes, and snippets.

@Tarmil

Tarmil/Counter.fs

Last active October 6, 2016 22:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Tarmil/bda2cc9e63fa184dd48a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Tarmil/bda2cc9e63fa184dd48a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Tarmil revised this gist Mar 13, 2016. 3 changed files with 5 additions and 4 deletions.
    2 changes: 1 addition & 1 deletion Counter.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@ module Counter =
    Attr.Style "text-align" "center"
    ]

    let View (send: Action -> unit) (model: View<Model>) : Doc =
    let Render (send: Action -> unit) (model: View<Model>) : Doc =
    div [
    buttonAttr [on.click (fun _ _ -> send Decrement)] [text "-"]
    divAttr [countStyle] [textView (model.Map string)]
    2 changes: 1 addition & 1 deletion Main.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -13,5 +13,5 @@ module Main =
    StartApp.Start {
    Model = 0
    Update = Counter.Update
    View = Counter.View
    Render = Counter.Render
    }
    5 changes: 3 additions & 2 deletions StartApp.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    // Straightforward equivalent of Elm's StartApp.Simple
    // using `Action -> unit` to model Elm's `Signal.Address Action`
    // and renaming `view` to `Render` to avoid ambiguity with UI.Next's View<'T>
    module StartApp

    open WebSharper
    @@ -11,12 +12,12 @@ type App<'Model, 'Action> =
    {
    Model : 'Model
    Update : 'Action -> 'Model -> 'Model
    View : ('Action -> unit) -> View<'Model> -> Doc
    Render : ('Action -> unit) -> View<'Model> -> Doc
    }

    [<JavaScript>]
    let Start (app: App<'Model, 'Action>) : unit =
    let model = Var.Create app.Model
    let send = app.Update >> Var.Update model
    app.View send model.View
    app.Render send model.View
    |> Doc.RunAppend JS.Document?body
  2. Tarmil revised this gist Mar 11, 2016. 2 changed files with 4 additions and 5 deletions.
    4 changes: 2 additions & 2 deletions Counter.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -26,10 +26,10 @@ module Counter =
    Attr.Style "text-align" "center"
    ]

    let View (send: Action -> unit) (model: Model) : Doc =
    let View (send: Action -> unit) (model: View<Model>) : Doc =
    div [
    buttonAttr [on.click (fun _ _ -> send Decrement)] [text "-"]
    divAttr [countStyle] [text (string model)]
    divAttr [countStyle] [textView (model.Map string)]
    buttonAttr [on.click (fun _ _ -> send Increment)] [text "+"]
    ]
    :> Doc
    5 changes: 2 additions & 3 deletions StartApp.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -11,13 +11,12 @@ type App<'Model, 'Action> =
    {
    Model : 'Model
    Update : 'Action -> 'Model -> 'Model
    View : ('Action -> unit) -> 'Model -> Doc
    View : ('Action -> unit) -> View<'Model> -> Doc
    }

    [<JavaScript>]
    let Start (app: App<'Model, 'Action>) : unit =
    let model = Var.Create app.Model
    let send = app.Update >> Var.Update model
    model.View
    |> Doc.BindView (app.View send)
    app.View send model.View
    |> Doc.RunAppend JS.Document?body
  3. Tarmil created this gist Mar 11, 2016.
    35 changes: 35 additions & 0 deletions Counter.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    namespace Example1

    open WebSharper
    open WebSharper.UI.Next
    open WebSharper.UI.Next.Html
    open WebSharper.UI.Next.Client

    [<JavaScript>]
    module Counter =

    type Model = int

    type Action = Increment | Decrement

    let Update (action: Action) (model: Model) : Model =
    match action with
    | Increment -> model + 1
    | Decrement -> model - 1

    let private countStyle =
    Attr.Concat [
    Attr.Style "font-size" "20px"
    Attr.Style "font-family" "monospace"
    Attr.Style "display" "inline-block"
    Attr.Style "width" "50px"
    Attr.Style "text-align" "center"
    ]

    let View (send: Action -> unit) (model: Model) : Doc =
    div [
    buttonAttr [on.click (fun _ _ -> send Decrement)] [text "-"]
    divAttr [countStyle] [text (string model)]
    buttonAttr [on.click (fun _ _ -> send Increment)] [text "+"]
    ]
    :> Doc
    17 changes: 17 additions & 0 deletions Main.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    namespace Example1

    open WebSharper
    open WebSharper.JavaScript
    open WebSharper.JQuery
    open WebSharper.UI.Next
    open WebSharper.UI.Next.Client

    [<JavaScript>]
    module Main =

    let Main =
    StartApp.Start {
    Model = 0
    Update = Counter.Update
    View = Counter.View
    }
    23 changes: 23 additions & 0 deletions StartApp.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    // Straightforward equivalent of Elm's StartApp.Simple
    // using `Action -> unit` to model Elm's `Signal.Address Action`
    module StartApp

    open WebSharper
    open WebSharper.JavaScript
    open WebSharper.UI.Next
    open WebSharper.UI.Next.Client

    type App<'Model, 'Action> =
    {
    Model : 'Model
    Update : 'Action -> 'Model -> 'Model
    View : ('Action -> unit) -> 'Model -> Doc
    }

    [<JavaScript>]
    let Start (app: App<'Model, 'Action>) : unit =
    let model = Var.Create app.Model
    let send = app.Update >> Var.Update model
    model.View
    |> Doc.BindView (app.View send)
    |> Doc.RunAppend JS.Document?body