miyamoen/elm-origami/1.0.1

NOTE: the latest version is 2.0.0

Origami.VirtualDom

A wrapper of elm/virtual-dom.

普通は使わないと思いますがexposedしています。 そのためユーザー向けではないドキュメントが書かれています。

Style

css : List Style -> Attribute msg

DOMにStyleを適用するための関数

  • この関数で再帰的なStyle型から再帰のないFlatStyle型に変換してある
    • FlatStyle型は無効なSelector Blockを除去してある
  • css関数に適用された単位でStyleの重複除去が行われる
    • それより細かい単位では重複があっても除去されない
  • FlatStyleから計算されたhash値がclass attributeに暗黙的に設定されている
toPlainNode : Node msg -> Node msg

Origami -> 通常

  • OrigamiのDOMを再帰的にたどりながらStyleの収集と通常のDOMへの変換を行っている
  • style tagは子ノードの先頭に追加される
toPlainNodes : List (Node msg) -> List (Node msg)

Origami -> 通常

  • style tagは先頭に追加される
plainNode : Node msg -> Node msg

通常 -> Origami

plainAttribute : Attribute msg -> Attribute msg

Create

type Node msg
text : String -> Node msg
node : String -> List (Attribute msg) -> List (Node msg) -> Node msg
nodeNS : String -> String -> List (Attribute msg) -> List (Node msg) -> Node msg

Attributes

type Attribute msg

Attribute

  • AttributeをbatchできるようにするためにListでVirtualDom.Attributeを保持
  • 適用されたStyleをhash値をセットで持ち回す

definition

type Attribute msg
    = Attribute (List (VirtualDom.Attribute msg)) (List ( String, List FlatStyle ))
style : String -> String -> Attribute msg
property : String -> Value -> Attribute msg
attribute : String -> String -> Attribute msg
attributeNS : String -> String -> String -> Attribute msg
batchAttributes : List (Attribute msg) -> Attribute msg

AttributeとStyleをまとめる

Listを2個保持したデータ型なのでemptyが表現できる

Attribute [] []

Events

on : String -> Handler msg -> Attribute msg

Routing Messages

map : (a -> b) -> Node a -> Node b
mapAttribute : (a -> b) -> Attribute a -> Attribute b

Keyed Nodes

String
-> List (Attribute msg)
-> List ( String, Node msg )
-> Node msg
String
-> String
-> List (Attribute msg)
-> List ( String, Node msg )
-> Node msg

Lazy Nodes

VirtualDom.lazyXを使うために暗黙的にtoPlainNodeが使われています。 つまりlazyXが使われたところでstyle tagが生成されます。

lazy : (a -> Node msg) -> a -> Node msg
lazy2 : (a -> b -> Node msg) -> a -> b -> Node msg
lazy3 : (a -> b -> c -> Node msg) -> a -> b -> c -> Node msg
lazy4 : (a -> b -> c -> d -> Node msg) -> a -> b -> c -> d -> Node msg
lazy5 : (a -> b -> c -> d -> e -> Node msg) -> a -> b -> c -> d -> e -> Node msg
lazy6 : (a -> b -> c -> d -> e -> f -> Node msg) -> a -> b -> c -> d -> e -> f -> Node msg
lazy7 : (a -> b -> c -> d -> e -> f -> g -> Node msg) -> a -> b -> c -> d -> e -> f -> g -> Node msg