Last active
March 29, 2019 19:53
-
-
Save DmitriyVlasov/0a6169f6f607d989c4576dae1a40a2c5 to your computer and use it in GitHub Desktop.
Minimal application showing how to use Elmish
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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