@neovici/computing-lit-element

Add computed properties to LitElement

Usage no npm install needed!

<script type="module">
  import neoviciComputingLitElement from 'https://cdn.skypack.dev/@neovici/computing-lit-element';
</script>

README

<computing-lit-element>

Adds computed properties functionality to LitElement.

This webcomponent follows the open-wc recommendation.

Installation

npm i computing-lit-element

Usage

<script type="module">
  import ComputingLitElement from 'computing-lit-element';
  
  class MyElement extends ComputingLitElement {
    static get properties() {
        return {
            property1: {
                type: Number
            },
            property2: {
                type: Number
            },
            computedProperty: {
                type: Number,
                computed: 'computeComputedProperty(property1, property2)'
            }
        };
    }
    constructor() {
        super();
        this.property1 = 10;
        this.property2 = 5;
    }
    computeComputedProperty(property1, property2) {
        return property1 * property2;
    }
  }
</script>
Or use the mixin
<script type="module">
  import computingMixin from 'computing-lit-element';
  import { LitElement } from 'lit-element';
  
  const ComputingLitElement = computingMixin(LitElement);
  ...

Testing using karma (if applied by author)

npm run test

Testing using karma via browserstack (if applied by author)

npm run test:bs

Linting (if applied by author)

npm run lint