-
Notifications
You must be signed in to change notification settings - Fork 2
/
Term.elm
120 lines (81 loc) · 2.38 KB
/
Term.elm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
port module Page.Term exposing (Model, Msg(..), info, init, subscriptions, update, view)
import Html exposing (Html, div, hr, p, text)
import Html.Attributes exposing (class)
import Markdown
import Page.Common
import Term exposing (Term)
import Term.ANSI exposing (defaultFormat)
-- PAGE INFO
info : Page.Common.PageInfo Msg
info =
{ name = "term"
, hash = "term"
, description = Markdown.toHtml [ class "info" ] """
A terminal which evaluates `JavaScript` code using elm ports.
"""
, srcRel = "Page/Term.elm"
}
-- MODEL
type alias Model =
{ term : Term Msg
}
init : ( Model, Cmd Msg )
init =
( { term =
Term.offline
(Just
{ defaultFormat
| foreground = Term.ANSI.Green
}
)
CommandTyped
}
, Cmd.batch
[ -- execute some evals at startup
evalJS "\"hello\" + \" world!\""
, evalJS "new Date()"
]
)
-- UPDATE
type Msg
= CommandTyped String
| EvalResult String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
CommandTyped str ->
( model, evalJS str )
EvalResult str ->
let
newTerm =
Term.receive (str ++ "\n") model.term
in
( Model newTerm, Cmd.none )
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions _ =
-- results of JS evaluations.
evalJSResults EvalResult
-- PORTS
{-| Port which evaluates the given string as Javascript code (expression or statements) using the eval() function
from the Javascript world.
-}
port evalJS : String -> Cmd msg
{-| Port subscription which emits results of evaluation performed by evalJS port.
-}
port evalJSResults : (String -> msg) -> Sub msg
-- VIEW
view : Model -> Html Msg
view model =
div [ class "container" ]
[ hr [] []
, p [ class "text-muted" ]
[ Markdown.toHtml [ class "info" ] """
The purpose of this playground is to show interoperability between [Elm](https://elm-lang.org/) environment and `JavaScript` through [ports](https://guide.elm-lang.org/interop/ports.html).
"""
]
, p [ class "text-muted" ]
[ text "Type some javascript code in the terminal below:"
]
, Term.render model.term
]