Last active
June 30, 2020 21:03
-
-
Save drejohnson/bb5c0e0e4adfa00293372ce00c3bc704 to your computer and use it in GitHub Desktop.
basic reasonml binding for lit-html. WIP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Works but props not added to values array */ | |
let sayHello = name => | |
LitHtml.html( | |
{j| | |
<h1>Hello $(name) </h1> | |
<p>Goodbye</p> | |
<div> | |
<span>This is nested</span> | |
</div> | |
|j}, | |
); | |
Js.log(sayHello("Everyone")); | |
/* Works as intended but uses bs.raw ...yuck! */ | |
let hello = [%raw | |
{| | |
(name) => LitHtml.html` | |
<h1>Hello ${name}!</h1> | |
<p>Goodbye</p> | |
<div> | |
<span>This is nested</span> | |
</div> | |
` | |
|} | |
]; | |
Js.log(hello(. "World")); | |
[@bs.val] | |
external _getElementById : string => Dom.element = "document.getElementById"; | |
let elementId = _getElementById("app"); | |
LitHtml.render(hello(. "World"), elementId); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type templateResult; | |
// should have 2nd arg for values thats an array that holds prop values | |
[@bs.module "lit-html"] | |
external html_ : (. array(string)) => templateResult = "html"; | |
[@bs.module "lit-html"] | |
external render : (templateResult, Dom.element) => unit = "render"; | |
[@bs.val] [@bs.return nullable] | |
external _getElementById : string => option(Dom.element) = | |
"document.getElementById"; | |
let html = htmlString => html_(. [|htmlString|]); | |
let renderWithId = (templateResult, id) => | |
switch (_getElementById(id)) { | |
| None => | |
raise( | |
Invalid_argument( | |
"LitHtml.renderToElementWithId : no element of id " | |
++ id | |
++ " found in the HTML!", | |
), | |
) | |
| Some(element) => render(templateResult, element) | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment