@adobe/lit-mobx
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Known Vulnerabilities

    lit-mobx

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

    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 mobx
    

    LitElement 2.0 Usage

    This library has been updated to the latest version of Lit which we highly recommend you update to. However if you wish to continue using LitMobx with LitElement 2.0 then install the 1.0 major version:

    npm install --save @adobe/lit-mobx@^1.0.0
    

    We will backport any security patches (though don't expect there to be any) in this major version as necessary.

    Demo

    npm install
    npm run demo
    

    Usage

    See the JavaScript and TypeScript example projects on StackBlitz. See this example for a demonstration of usage with Mobx v6 in Typescript without the use of decorators.

    import { html, TemplateResult } from 'lit';
    import { customElement, LitElement } from 'lit/decorators.js';
    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.

    Install

    npm i @adobe/lit-mobx

    DownloadsWeekly Downloads

    2,323

    Version

    2.0.0

    License

    Apache-2.0

    Unpacked Size

    78.4 kB

    Total Files

    36

    Last publish

    Collaborators

    • adobehalls
    • fullcolorcoder
    • marbec
    • tripod
    • garthdb
    • lazd
    • adobe-admin
    • patrickfulton
    • trieloff
    • shazron
    • krisnye
    • dcpfsdk
    • natebaldwin
    • devongovett
    • aspro83
    • symanovi
    • dpfister
    • stefan-guggisberg
    • korra
    • rofe
    • kptdobe