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