@pinser/lit-observe

@pinser/lit-observe is a lit-html library for to display observables like rxjs or redux.

It tested with :

• rxjs: Reactive Extensions Library for JavaScript
• lit: Simple. Fast. Web Components.
• aframe-element: Simple library for building fast, lightweight web components for 3D development.

Code inspired from https://lit.dev/docs/templates/custom-directives/

Installation

Use the package manager npm to install lit-observe.

npm install @pinser/lit-observe

Usage

Simple usage

import { observe } from '@pinser/lit-observe';
import { of } from 'rxjs';

// ...
title$ = of('Hello World');

render() {
  return html`
<h1>${observe(this.title$)}</h1>
  `;
}

With callback

import { observe } from '@pinser/lit-observe';
import { of } from 'rxjs';

// ...
list$ = of([
  { title: 'todo 1' },
  { title: 'todo 2' },
]);

render() {
  return html`
<ul>
  ${observe(this.list$, (list) => list.map((item) => html`
    <li>${item.title}</li>
  `))}
</ul>
  `;
}

Example

Todo-list with rxjs

• Demo: https://lit-observe-rxjs-example.herokuapp.com/
• Source code: https://github.com/pinserworld/pinser/tree/master/apps/lit-observe-demo/src/app/app.element.ts

Tictactoe with @pinser/aframe-element & rxjs

• Demo: https://aframe-element-demo.herokuapp.com/
• Source code: https://github.com/pinserworld/pinser/tree/master/libs/utils/aframe-element/blob/master/apps/demo/src/app/app.element.ts

Building

Run nx build utils-lit-observe to build the library.

Running unit tests

Run nx test utils-lit-observe to execute the unit tests via Jest.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT