toburger/fable-repl.fs

## fable-repl.fs
module private BusinessLogic =
    let switchAt pos (str: string) =
        let str = Seq.toArray str

        let oldpos = (pos + str.Length - 1) % str.Length
        let newpos = pos % str.Length

        let tmp = str.[newpos]
        str.[newpos] <- str.[oldpos]
        str.[oldpos] <- tmp

        System.String str

    let nospaces str =
        str
        |> String.filter ((<>)' ')

    let spacePositions str =
        str
        |> Seq.indexed
        |> Seq.fold (fun xs (i, x) ->
            if x = ' ' then i::xs
            else xs) []

    let insertSpaces positions (str: string) =
        let positionsr = List.rev positions
        let mutable str = str
        for pos in positionsr do
            str <- str.Insert(pos, " ")
        str

    let switchIgnoringSpacesAt pos str =
        let nospaces = nospaces str
        let spacepos = spacePositions str
        let switched = switchAt pos nospaces
        insertSpaces spacepos switched


// REACT & ELMISH => MVU!!

open Fable.Core.JsInterop
open Fable.React
open Elmish
open Elmish.React
open Fulma

module P = Fable.React.Props

type Model = {
    text: string
    repeat: int
}

type Msg =
    | SetRepeatCount of int
    | UpdateText of string

let init _: Model = {
    text = "open data hub"
    repeat = 40
}

let update (msg: Msg) (model: Model): Model =
    match msg with
    | UpdateText inputStr ->
        { model with text = inputStr }
    | SetRepeatCount count ->
        if count > 500 then
            model
        else
            { model with repeat = count }

let viewForm model dispatch =
    form [] [
        Input.text [
            Input.Value (string model.text)
            Input.OnChange (fun e ->
                dispatch (UpdateText e.target?value))
        ]
        Input.text [
            Input.Value (string model.repeat)
            Input.OnChange (fun e ->
                dispatch (SetRepeatCount (int e.target?value)))
            Input.Type Input.IInputType.Number
        ]
    ]

let viewSwitchedList model dispatch =
    ol [] [
        for x in 1..model.repeat ->
            fragment [
                P.Key (string x)
            ] [
                li [] [
                    str (BusinessLogic.switchIgnoringSpacesAt x model.text)
                ]
            ]
    ]

let view (model: Model) (dispatch: Dispatch<Msg>) =
    div [] [
        Card.card [] [
            Card.content [] [
                Content.content [] [
                    viewForm model dispatch
                ]
            ]
        ]
        Card.card [] [
            Card.content [] [
                Content.content [] [
                    viewSwitchedList model dispatch
                ]
            ]
        ]
    ]

Program.mkSimple init update view
|> Program.withConsoleTrace
|> Program.withReactSynchronous "main"
|> Program.run


## fable-repl.html
<html>
 <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <script src="__HOST__/libs/react.production.min.js"></script>
    <script src="__HOST__/libs/react-dom.production.min.js"></script>
    <link rel="stylesheet" href="__HOST__/libs/css/bulma.min.css" />
    <link rel="stylesheet" href="__HOST__/libs/css/all.min.css" />
    <style>
    /* Only needed for icon sample */
    .container-sizes .block {
        display: flex;
    }
    .container-sizes .icon {
        background-color: yellow;
        margin: 0 5px;
    }
    </style>
</head>
 <body class="app-container">
    <div id="main" class="elmish-app"></div>
</body>
</html>
	module private BusinessLogic =
	let switchAt pos (str: string) =
	let str = Seq.toArray str

	let oldpos = (pos + str.Length - 1) % str.Length
	let newpos = pos % str.Length

	let tmp = str.[newpos]
	str.[newpos] <- str.[oldpos]
	str.[oldpos] <- tmp

	System.String str

	let nospaces str =
	str
	\|> String.filter ((<>)' ')

	let spacePositions str =
	str
	\|> Seq.indexed
	\|> Seq.fold (fun xs (i, x) ->
	if x = ' ' then i::xs
	else xs) []

	let insertSpaces positions (str: string) =
	let positionsr = List.rev positions
	let mutable str = str
	for pos in positionsr do
	str <- str.Insert(pos, " ")
	str

	let switchIgnoringSpacesAt pos str =
	let nospaces = nospaces str
	let spacepos = spacePositions str
	let switched = switchAt pos nospaces
	insertSpaces spacepos switched


	// REACT & ELMISH => MVU!!

	open Fable.Core.JsInterop
	open Fable.React
	open Elmish
	open Elmish.React
	open Fulma

	module P = Fable.React.Props

	type Model = {
	text: string
	repeat: int
	}

	type Msg =
	\| SetRepeatCount of int
	\| UpdateText of string

	let init _: Model = {
	text = "open data hub"
	repeat = 40
	}

	let update (msg: Msg) (model: Model): Model =
	match msg with
	\| UpdateText inputStr ->
	{ model with text = inputStr }
	\| SetRepeatCount count ->
	if count > 500 then
	model
	else
	{ model with repeat = count }

	let viewForm model dispatch =
	form [] [
	Input.text [
	Input.Value (string model.text)
	Input.OnChange (fun e ->
	dispatch (UpdateText e.target?value))
	]
	Input.text [
	Input.Value (string model.repeat)
	Input.OnChange (fun e ->
	dispatch (SetRepeatCount (int e.target?value)))
	Input.Type Input.IInputType.Number
	]
	]

	let viewSwitchedList model dispatch =
	ol [] [
	for x in 1..model.repeat ->
	fragment [
	P.Key (string x)
	] [
	li [] [
	str (BusinessLogic.switchIgnoringSpacesAt x model.text)
	]
	]
	]

	let view (model: Model) (dispatch: Dispatch<Msg>) =
	div [] [
	Card.card [] [
	Card.content [] [
	Content.content [] [
	viewForm model dispatch
	]
	]
	]
	Card.card [] [
	Card.content [] [
	Content.content [] [
	viewSwitchedList model dispatch
	]
	]
	]
	]

	Program.mkSimple init update view
	\|> Program.withConsoleTrace
	\|> Program.withReactSynchronous "main"
	\|> Program.run
	<html>
	<head>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
	<script src="__HOST__/libs/react.production.min.js"></script>
	<script src="__HOST__/libs/react-dom.production.min.js"></script>
	<link rel="stylesheet" href="__HOST__/libs/css/bulma.min.css" />
	<link rel="stylesheet" href="__HOST__/libs/css/all.min.css" />
	<style>
	/* Only needed for icon sample */
	.container-sizes .block {
	display: flex;
	}
	.container-sizes .icon {
	background-color: yellow;
	margin: 0 5px;
	}
	</style>
	</head>
	<body class="app-container">
	<div id="main" class="elmish-app"></div>
	</body>
	</html>