DmitriyVlasov/fable-repl.css

## fable-repl.css
html,
body {
    font-size: 16px;
}

.main-container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.input {
    padding: .25rem;
    font-size: 16px;
    width: 250px;
    margin-bottom: 1rem;
}

## fable-repl.fs
module Elmish.SimpleInput

(**
Minimal application showing how to use Elmish
You can find more info about Emish architecture and samples at https://elmish.github.io/
*)

open Fable.Core.JsInterop
open Fable.Helpers.React
open Fable.Helpers.React.Props
open Elmish
open Elmish.React

// MODEL

type Model =
    { Value : string }

type Msg =
    | ChangeValue of string

let init () = { Value = "" }, Cmd.none

// UPDATE
let clearStopChars c =
    match c with
    | '\\' | '/' | ':' | '*' | '?' | '"'
    | '<' | '>' | '|' | '+' | '.' | '%'
    | '!' | '@' -> ""
    | c -> string c

let ru_en c =
  match c with
  | 'а' -> "a"  | 'б' -> "b"  | 'в' -> "v"    | 'г' -> "g"
  | 'д' -> "d"  | 'е' -> "e"  | 'ё' -> "e"    | 'ж' -> "zh"
  | 'з' -> "z"  | 'и' -> "i"  | 'й' -> "i"    | 'к' -> "k"
  | 'л' -> "l"  | 'м' -> "m"  | 'н' -> "n"    | 'о' -> "o"
  | 'п' -> "p"  | 'р' -> "r"  | 'с' -> "s"    | 'т' -> "t"
  | 'у' -> "u"  | 'ф' -> "f"  | 'х' -> "kh"   | 'ц' -> "ts"
  | 'ч' -> "ch" | 'ш' -> "sh" | 'щ' -> "shch" | 'ь' -> ""
  | 'ъ' -> "ie" | 'ы' -> "y"  | 'э' -> "e"    | 'ю' -> "iu"
  | 'я' -> "ia" | c -> string c

let toLower c = System.Char.ToLower( c )

let processValue value =
    value
    |> String.map (
        function
        | ' ' -> '-'
        | c -> c |> toLower )
    |> String.collect clearStopChars
    |> String.collect ru_en

let update (msg:Msg) (model:Model) =
    match msg with
    | ChangeValue newValue ->
        { Value = processValue newValue
        }, Cmd.none

// VIEW (rendered with React)

let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str model.Value ] ]

// App
Program.mkProgram init update view
|> Program.withConsoleTrace
|> Program.withReactSynchronous "elmish-app"
|> 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>
</head>

<body class="app-container">
    <div id="elmish-app" class="elmish-app"></div>
</body>

</html>
	html,
	body {
	font-size: 16px;
	}

	.main-container {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}

	.input {
	padding: .25rem;
	font-size: 16px;
	width: 250px;
	margin-bottom: 1rem;
	}
	module Elmish.SimpleInput

	(**
	Minimal application showing how to use Elmish
	You can find more info about Emish architecture and samples at https://elmish.github.io/
	*)

	open Fable.Core.JsInterop
	open Fable.Helpers.React
	open Fable.Helpers.React.Props
	open Elmish
	open Elmish.React

	// MODEL

	type Model =
	{ Value : string }

	type Msg =
	\| ChangeValue of string

	let init () = { Value = "" }, Cmd.none

	// UPDATE
	let clearStopChars c =
	match c with
	\| '\\' \| '/' \| ':' \| '*' \| '?' \| '"'
	\| '<' \| '>' \| '\|' \| '+' \| '.' \| '%'
	\| '!' \| '@' -> ""
	\| c -> string c

	let ru_en c =
	match c with
	\| 'а' -> "a" \| 'б' -> "b" \| 'в' -> "v" \| 'г' -> "g"
	\| 'д' -> "d" \| 'е' -> "e" \| 'ё' -> "e" \| 'ж' -> "zh"
	\| 'з' -> "z" \| 'и' -> "i" \| 'й' -> "i" \| 'к' -> "k"
	\| 'л' -> "l" \| 'м' -> "m" \| 'н' -> "n" \| 'о' -> "o"
	\| 'п' -> "p" \| 'р' -> "r" \| 'с' -> "s" \| 'т' -> "t"
	\| 'у' -> "u" \| 'ф' -> "f" \| 'х' -> "kh" \| 'ц' -> "ts"
	\| 'ч' -> "ch" \| 'ш' -> "sh" \| 'щ' -> "shch" \| 'ь' -> ""
	\| 'ъ' -> "ie" \| 'ы' -> "y" \| 'э' -> "e" \| 'ю' -> "iu"
	\| 'я' -> "ia" \| c -> string c

	let toLower c = System.Char.ToLower( c )

	let processValue value =
	value
	\|> String.map (
	function
	\| ' ' -> '-'
	\| c -> c \|> toLower )
	\|> String.collect clearStopChars
	\|> String.collect ru_en

	let update (msg:Msg) (model:Model) =
	match msg with
	\| ChangeValue newValue ->
	{ Value = processValue newValue
	}, Cmd.none

	// VIEW (rendered with React)

	let view model dispatch =
	div [ Class "main-container" ]
	[ input [ Class "input"
	Value model.Value
	OnChange (fun ev -> ev.target?value \|> string \|> ChangeValue \|> dispatch) ]
	span [ ]
	[ str model.Value ] ]

	// App
	Program.mkProgram init update view
	\|> Program.withConsoleTrace
	\|> Program.withReactSynchronous "elmish-app"
	\|> 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>
	</head>

	<body class="app-container">
	<div id="elmish-app" class="elmish-app"></div>
	</body>

	</html>