@web-companions/lit NPM

A @web-companions/gfc preset for creating element and node Views with lit-html render.

This package is useful for creating views – HTML Elements and Nodes. It's possible to develop any UI components. This package uses lit-html render under the hood.

Installation

npm install @web-companions/lit --save

Usage

For better DX suggest using this library with babel-plugin-transform-jsx-to-tt.

index.jsx

import { litView } from '@web-companions/lit';

/**
 * Counter element
 */
export const counterElement = litView.element({
  props: {
    msg: p.req<string>(),
  },
})(function* (props) {
  let count = 0;

  while (true) {
    props = yield (
      <>
        <button
          type="button"
          onclick={() => {
            count++;
            this.next();
          }}
        >
          {props?.msg}
        </button>
        <i>{count}</i>
      </>
    );
  }
});

// define a new custom Counter element with tag 'demo-counter-element'
const CounterElement = counterElement('demo-counter-element');

/**
 * ROOT element
 */
litView.element({
  props: {
    header: p.req<string>('header'),
  },
})(function* (props) {
  while (true) {
    props = yield (
      <div
        style={css`
          margin: 10px;
        `}
      >
        <h3>{props.header}</h3>

        <CounterElement msg={'Counter Element'}></CounterElement>
      </div>
    );
  }
})('demo-fc');

More examples are here.