Add render' function to support event handlers

README.md

@@ -6,7 +6,7 @@ A PureScript wrapper of [lit-html](https://github.com/Polymer/lit-html).
 
 ## Usage
 
-```
+```purescript
 import LitHtml as LitHtml
 import Web.DOM (Element)
 
@@ -21,6 +21,6 @@ renderTitle el =
 ```
 cd example
 yarn
-pulp -w build -I ../src
+spago build -w
 yarn start
 ```

example/index.html

@@ -3,5 +3,6 @@
   <div id="obj"></div>
   <div id="svg"></div>
   <svg id="svg-path"></svg>
+  <div id="button"></div>
   <script src="index.js"></script>
 </body>

example/src/Main.purs

@@ -48,10 +48,17 @@ renderSvgPath docNode = do
   getElementById "svg-path" docNode >>= traverse_ \el -> do
     LitHtml.renderSvg el tpl {}
 
+renderButton :: NonElementParentNode -> Effect Unit
+renderButton docNode = do
+  tpl <- LitHtml.mkHtmlTemplate """<button @click=${onClick}>Click</button>"""
+  getElementById "button" docNode >>= traverse_ \el -> do
+    LitHtml.render' el tpl { onClick: Console.log "Button clicked."}
+
 main :: Effect Unit
 main = do
   docNode <- toNonElementParentNode <$> (window >>= document)
   renderTitle docNode
   renderNestedRecord docNode
   renderSvg docNode
   renderSvgPath docNode
+  renderButton docNode

src/LitHtml.purs

@@ -2,6 +2,7 @@ module LitHtml
   ( HtmlTemplate
   , mkHtmlTemplate
   , render
+  , render'
   , SvgTemplate
   , mkSvgTemplate
   , renderSvg
@@ -12,28 +13,44 @@ import Prelude
 import Data.Argonaut.Core (Json)
 import Data.Argonaut.Encode (class EncodeJson, encodeJson)
 import Effect (Effect)
+import Foreign (Foreign, unsafeToForeign)
 import Prim.Row (class Lacks)
 import Web.DOM (Element)
 
 data HtmlTemplate
 
+-- | Make an HTML template from a String. Similar to html`<h1>hello</h1>`.
 foreign import mkHtmlTemplate :: String -> Effect HtmlTemplate
 
-foreign import render_ :: Element -> HtmlTemplate -> Json -> Effect Unit
+foreign import render_ :: Element -> HtmlTemplate -> Foreign -> Effect Unit
 
+-- | Render an HTML template to a container element, interpolated by a Record.
+-- | The record will be encoded to JSON.
 render
   :: forall r
    . Lacks "html" r
   => EncodeJson (Record r)
   => Element -> HtmlTemplate -> Record r -> Effect Unit
-render el tpl params = render_ el tpl (encodeJson params)
+render el tpl params = render_ el tpl (unsafeToForeign $ encodeJson params)
+
+-- | Render an HTML template to a container element, interpolated by a Record.
+-- | The record will not be encoded to JSON, make it suitable to contain event
+-- | handlers.
+render'
+  :: forall r
+   . Lacks "html" r
+  => Element -> HtmlTemplate -> Record r -> Effect Unit
+render' el tpl params = render_ el tpl (unsafeToForeign params)
 
 data SvgTemplate
 
+-- | Make an SVG template from a String. Similar to svg`<svg>hello</svg>`.
 foreign import mkSvgTemplate :: String -> Effect SvgTemplate
 
 foreign import renderSvg_ :: Element -> SvgTemplate -> Json -> Effect Unit
 
+-- | Render an SVG template to a container element, interpolated by a Record.
+-- | The record will be encoded to JSON.
 renderSvg
   :: forall r
    . Lacks "svg" r