Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Minimal application showing how to use Elmish
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.