git.iko.soy/lynxjs-elm/compiler
on master help sign in
lynxjs-elm/compiler/packages/virtual-dom/src/VirtualDom.elm
274 lines 6.5 kB history raw
1module VirtualDom exposing
2 ( Node
3 , text, node, nodeNS
4 , Attribute, style, property, attribute, attributeNS
5 , on, Handler(..)
6 , map, mapAttribute
7 , keyedNode, keyedNodeNS
8 , lazy, lazy2, lazy3, lazy4, lazy5, lazy6, lazy7, lazy8
9 )
11{-| API to the core diffing algorithm. Adapted for LynxJS native rendering.
13# Create
14@docs Node, text, node, nodeNS
16# Attributes
17@docs Attribute, style, property, attribute, attributeNS
19# Events
20@docs on, Handler
22# Routing Messages
23@docs map, mapAttribute
25# Keyed Nodes
26@docs keyedNode, keyedNodeNS
28# Lazy Nodes
29@docs lazy, lazy2, lazy3, lazy4, lazy5, lazy6, lazy7, lazy8
31-}
33import Elm.Kernel.VirtualDom
34import Json.Decode as Json
37{-| An immutable chunk of data representing a native UI element.
38-}
39type Node msg = Node
42{-| Create a native element with a tag name, a list of attributes/properties
43including styles and event listeners, and a list of child nodes.
45 import Json.Encode as Json
47 hello : Node msg
48 hello =
49 node "view" [] [ text "Hello!" ]
50-}
51node : String -> List (Attribute msg) -> List (Node msg) -> Node msg
52node tag =
53 Elm.Kernel.VirtualDom.node (Elm.Kernel.VirtualDom.noScript tag)
56{-| Create a namespaced element. In LynxJS, namespaces are ignored —
57this behaves identically to `node`.
58-}
59nodeNS : String -> String -> List (Attribute msg) -> List (Node msg) -> Node msg
60nodeNS namespace tag =
61 Elm.Kernel.VirtualDom.nodeNS namespace (Elm.Kernel.VirtualDom.noScript tag)
64{-| Just put plain text in the UI. In LynxJS, this is auto-wrapped in a
65`<text>` element by the kernel.
67 text "Hello World!"
68-}
69text : String -> Node msg
70text =
71 Elm.Kernel.VirtualDom.text
74{-| Transform the messages produced by a subtree.
75-}
76map : (a -> msg) -> Node a -> Node msg
77map =
78 Elm.Kernel.VirtualDom.map
82-- ATTRIBUTES
85{-| Represents an attribute, property, style, or event on an element.
86-}
87type Attribute msg = Attribute
90{-| Specify a style.
92 greeting : Node msg
93 greeting =
94 node "view"
95 [ style "backgroundColor" "red"
96 , style "height" "90px"
97 , style "width" "100%"
98 ]
99 [ text "Hello!"
100 ]
102-}
103style : String -> String -> Attribute msg
104style =
105 Elm.Kernel.VirtualDom.style
108{-| Create a property.
110 import Json.Encode as Encode
112 buttonLabel : Node msg
113 buttonLabel =
114 node "view" [ property "id" (Encode.string "myView") ] [ text "Label" ]
115-}
116property : String -> Json.Value -> Attribute msg
117property key value =
118 Elm.Kernel.VirtualDom.property
119 (Elm.Kernel.VirtualDom.noInnerHtmlOrFormAction key)
120 (Elm.Kernel.VirtualDom.noJavaScriptOrHtmlJson value)
123{-| Create an attribute. Sets the attribute on the native element.
125 myView : Node msg
126 myView =
127 node "view" [ attribute "id" "main" ] [ text "Hello" ]
128-}
129attribute : String -> String -> Attribute msg
130attribute key value =
131 Elm.Kernel.VirtualDom.attribute
132 (Elm.Kernel.VirtualDom.noOnOrFormAction key)
133 (Elm.Kernel.VirtualDom.noJavaScriptOrHtmlUri value)
136{-| Create a namespaced attribute. In LynxJS, the namespace is ignored —
137this behaves identically to `attribute`.
138-}
139attributeNS : String -> String -> String -> Attribute msg
140attributeNS namespace key value =
141 Elm.Kernel.VirtualDom.attributeNS
142 namespace
143 (Elm.Kernel.VirtualDom.noOnOrFormAction key)
144 (Elm.Kernel.VirtualDom.noJavaScriptOrHtmlUri value)
147{-| Transform the messages produced by an `Attribute`.
148-}
149mapAttribute : (a -> b) -> Attribute a -> Attribute b
150mapAttribute =
151 Elm.Kernel.VirtualDom.mapAttribute
155-- EVENTS
158{-| Create custom event handlers.
160 import Json.Decode as Decode
162 onTap : msg -> Attribute msg
163 onTap msg =
164 on "tap" (Normal (Decode.succeed msg))
165-}
166on : String -> Handler msg -> Attribute msg
167on =
168 Elm.Kernel.VirtualDom.on
171{-| When using `on` you can customize the event behavior:
173 - `Normal` — standard event handling
174 - `MayStopPropagation` — in LynxJS, uses `catch` prefix to stop propagation
175 - `MayPreventDefault` — not applicable in LynxJS, treated as Normal
176 - `Custom` — maps `stopPropagation` to `catch` prefix
177-}
178type Handler msg
179 = Normal (Json.Decoder msg)
180 | MayStopPropagation (Json.Decoder (msg, Bool))
181 | MayPreventDefault (Json.Decoder (msg, Bool))
182 | Custom (Json.Decoder { message : msg, stopPropagation : Bool, preventDefault : Bool })
186-- LAZY NODES
189{-| A performance optimization that delays the building of virtual DOM nodes.
190-}
191lazy : (a -> Node msg) -> a -> Node msg
192lazy =
193 Elm.Kernel.VirtualDom.lazy
196{-| Same as `lazy` but checks on two arguments.
197-}
198lazy2 : (a -> b -> Node msg) -> a -> b -> Node msg
199lazy2 =
200 Elm.Kernel.VirtualDom.lazy2
203{-| Same as `lazy` but checks on three arguments.
204-}
205lazy3 : (a -> b -> c -> Node msg) -> a -> b -> c -> Node msg
206lazy3 =
207 Elm.Kernel.VirtualDom.lazy3
210{-| Same as `lazy` but checks on four arguments.
211-}
212lazy4 : (a -> b -> c -> d -> Node msg) -> a -> b -> c -> d -> Node msg
213lazy4 =
214 Elm.Kernel.VirtualDom.lazy4
217{-| Same as `lazy` but checks on five arguments.
218-}
219lazy5 : (a -> b -> c -> d -> e -> Node msg) -> a -> b -> c -> d -> e -> Node msg
220lazy5 =
221 Elm.Kernel.VirtualDom.lazy5
224{-| Same as `lazy` but checks on six arguments.
225-}
226lazy6 : (a -> b -> c -> d -> e -> f -> Node msg) -> a -> b -> c -> d -> e -> f -> Node msg
227lazy6 =
228 Elm.Kernel.VirtualDom.lazy6
231{-| Same as `lazy` but checks on seven arguments.
232-}
233lazy7 : (a -> b -> c -> d -> e -> f -> g -> Node msg) -> a -> b -> c -> d -> e -> f -> g -> Node msg
234lazy7 =
235 Elm.Kernel.VirtualDom.lazy7
238{-| Same as `lazy` but checks on eight arguments.
239-}
240lazy8 : (a -> b -> c -> d -> e -> f -> g -> h -> Node msg) -> a -> b -> c -> d -> e -> f -> g -> h -> Node msg
241lazy8 =
242 Elm.Kernel.VirtualDom.lazy8
246-- KEYED NODES
249{-| Works just like `node`, but you add a unique identifier to each child
250node.
251-}
252keyedNode : String -> List (Attribute msg) -> List ( String, Node msg ) -> Node msg
253keyedNode tag =
254 Elm.Kernel.VirtualDom.keyedNode (Elm.Kernel.VirtualDom.noScript tag)
257{-| Create a keyed and namespaced node. In LynxJS, the namespace is ignored.
258-}
259keyedNodeNS : String -> String -> List (Attribute msg) -> List ( String, Node msg ) -> Node msg
260keyedNodeNS namespace tag =
261 Elm.Kernel.VirtualDom.keyedNodeNS namespace (Elm.Kernel.VirtualDom.noScript tag)
265-- FOR INTERNAL USE ONLY
268toHandlerInt : Handler msg -> Int
269toHandlerInt handler =
270 case handler of
271 Normal _ -> 0
272 MayStopPropagation _ -> 1
273 MayPreventDefault _ -> 2
274 Custom _ -> 3