@evolv-delivery/lit-harness

0.1.5 • Public • Published

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>
  `;
  }

Package Sidebar

Install

npm i @evolv-delivery/lit-harness

Weekly Downloads

2

Version

0.1.5

License

ISC

Unpacked Size

24.9 kB

Total Files

4

Last publish

Collaborators

  • charles-evolv
  • joshua-barnard-evolv
  • yvanfrey-evolv
  • robertsevern
  • rcowin
  • matt-strom