开发者社区> 镜像站> NPM> @adobe/lit-mobx
@adobe/lit-mobx
Integrating mobx with lit-element!
Last updated 3 months ago by benjamind .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @adobe/lit-mobx 
SYNC missed versions from official npm registry.

Known Vulnerabilities

lit-mobx

Mixin and base class that allow easy usage of mobx observables with lit-element.

The mixin implementation is based heavily on the work of Alexander Weiss in his mobx-lit-element implementation. This has been rewritten to support multiple forms of usage (mixin, or base class) as well as to be based on typescript to get type definitions.

Installation

As a dependency:

npm install --save @adobe/lit-mobx lit-element mobx

Demo

npm install
npm run demo

Usage

See the JavaScript and TypeScript example projects on StackBlitz.

import { LitElement, html, TemplateResult, customElement } from 'lit-element';
import { observable, action } from 'mobx';
import { MobxLitElement } from '@adobe/lit-mobx';

// create a mobx observable
class Counter {
    @observable
    public count = 0;

    @action
    public increment() {
        this.count++;
    }
}

// create instance that can be shared across components
const counter = new Counter();

// create a new custom element, and use the base MobxLitElement class
// alternatively you can use the MobxReactionUpdate mixin, e.g. `class MyElement extends MobxReactionUpdate(LitElement)`
@customElement('my-element')
export class MyElement extends MobxLitElement {
    private counter = counter

    // any observables accessed in the render method will now trigger an update
    public render(): TemplateResult {
        return html`
            Count is ${this.counter.count}
            <br />
            <button @click=${this.incrementCount}>Add</button>
        `;
    }

    private incrementCount() {
        this.counter.increment();
    }
}

For further examples see the demo folder.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.

Current Tags

  • 1.0.0                                ...           latest (3 months ago)

5 Versions

  • 1.0.0                                ...           3 months ago
  • 0.0.4                                ...           7 months ago
  • 0.0.3                                ...           8 months ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago