0.1.5 • Published 3 years ago
@evolv-delivery/lit-harness v0.1.5
Lit Harness
This package provides an evolv environment integration harness for lit-html.
Some lit-html links:
| Docs | https://lit.dev/docs/libraries/standalone-templates/ |
| github | https://www.npmjs.com/package/lit-html |
| npm | https://www.npmjs.com/package/lit-html |
Setup in the Evolv Manager
Adding an integration to the Evolv Manager
The setup for this integration does not require any json config.
How to use
The lit-html main imports (html & render) will now be available under window.evolv.lit along with the ref directive functions (ref, createRef). These are documented within lit-html documentation:
html & render | https://lit.dev/docs/libraries/standalone-templates/ |
ref & createRef | https://lit.dev/docs/templates/directives/#ref |
An example usage:
const { html, render, ref, createRef } = window.evolv.lit;
var inputRef = createRef();
function handleSearchClick(){
var input = inputRef.value;
requestSearch(input && input.value);
}
function search(placeholder){
return html`
<div class="evolv-fullSearchContainer">
<form autocomplete="off">
<input type="search" placeholder="${placeholder}" ${ref(inputRef)}/>
<button class="evolv-cancelButton"
@click=${hancleCancelClick}>
</button>
</form>
<div class="evolv-button" @click=${handleSearchClick}>
${searchIcon()}
</div>
</div>
`;
}