hendriklammers / html-elm

Convert HTML and SVG to Elm code

html-elm

Convert HTML and SVG to Elm code

Install

$ npm install html-elm

Usage

import htmlElm from 'html-elm'

const htmlString = '<div class="wrapper"><h1 id="title">Hello World</h1></div>'

// htmlElm returns a Promise
htmlElm(htmlString, {
  indent: 2,
  htmlAlias: 'Html',
  htmlAttributeAlias: 'H',
  svgAlias: 'Svg',
  svgAttributeAlias: 'S',
  imports: true,
}).then(console.log)

// Result will be a string with valid Elm code:
//
// import Html
// import Html.Attributes as H
//
// Html.div
//   [ H.class "wrapper" ]
//   [ Html.h1
//     [ H.id "title" ]
//     [ Html.text "Hello World" ]
//   ]

// All options are optional
htmlElm(html)

CLI

Install it globally

$ npm install -g html-elm

Usage:

$ html-elm '<div class="container"><h1>Hello all</h1><p>Lorem ipsum dolor</p></div>'

div
    [ class "container" ]
    [ h1
        []
        [ text "Hello all" ]
    , p
        []
        [ text "Lorem ipsum dolor" ]
    ]

To see all available options use:

$ html-elm -h

License

MIT

html-elm's Issues

parsing issue (with class?)

Running
$ html-elm $(echo $(cat nav.tmp.html) ) > nav.tmp.elm

where the nav.tmp.html files is:

> <ul class="nav justify-content-center">
>   <li class="nav-item">
>     <a class="nav-link active" href="#">Active</a>
>   </li>
>   <li class="nav-item">
>     <a class="nav-link" href="#">Link</a>
>   </li>
>   <li class="nav-item">
>     <a class="nav-link" href="#">Link</a>
>   </li>
>   <li class="nav-item">
>     <a class="nav-link disabled" href="#">Disabled</a>
>   </li>
> </ul>
> 

gives:

ulclass="navjustify-content-center"
[]
[ liclass="nav-item"
[]
[ aclass="nav-linkactive"href="#"
[]
[ text "Active"
, liclass="nav-item"
[]
[ aclass="nav-link"href="#"
[]
[ text "Link"
, liclass="nav-item"
[]
[ aclass="nav-link"href="#"
[]
[ text "Link"
, liclass="nav-item"
[]
[ aclass="nav-linkdisabled"href="#"
[]
[ text "Disabled" ]
]
]
]
]
]
]
]
]

Version:
$ html-elm -V
3.1.1