-
-
Save s-m-i-t-a/7a943973afdad30a9d5aa9edbe7eac7c to your computer and use it in GitHub Desktop.
basic reasonml binding for lit-html. WIP
This file contains hidden or 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 hidden or 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