{"id":13452442,"url":"https://github.com/adobe/lit-mobx","last_synced_at":"2025-04-12T20:44:49.560Z","repository":{"id":38298563,"uuid":"201543794","full_name":"adobe/lit-mobx","owner":"adobe","description":"Mixin and base class for using mobx with lit-element","archived":false,"fork":false,"pushed_at":"2024-04-10T01:17:02.000Z","size":1340,"stargazers_count":270,"open_issues_count":18,"forks_count":16,"subscribers_count":41,"default_branch":"trunk","last_synced_at":"2025-04-04T00:07:59.239Z","etag":null,"topics":["lit-element","mixin","mobx","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adobe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-09T21:39:38.000Z","updated_at":"2025-02-25T13:06:34.000Z","dependencies_parsed_at":"2024-06-18T14:05:46.823Z","dependency_job_id":"de4fe22b-f46a-43a9-b1e4-5d4c01a7a791","html_url":"https://github.com/adobe/lit-mobx","commit_stats":{"total_commits":74,"total_committers":8,"mean_commits":9.25,"dds":0.3513513513513513,"last_synced_commit":"a1e9d20964183dc204e14db1ce283439659aff47"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Flit-mobx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Flit-mobx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Flit-mobx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Flit-mobx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adobe","download_url":"https://codeload.github.com/adobe/lit-mobx/tar.gz/refs/heads/trunk","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631687,"owners_count":21136556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit-element","mixin","mobx","web-components"],"created_at":"2024-07-31T07:01:24.274Z","updated_at":"2025-04-12T20:44:49.532Z","avatar_url":"https://github.com/adobe.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Known Vulnerabilities](https://snyk.io/test/github/adobe/lit-mobx/badge.svg)](https://snyk.io/test/github/adobe/lit-mobx)\n\n# lit-mobx\n\nMixin and base class that allow easy usage of mobx observables with\n[`lit`](https://lit.dev/).\n\nThe mixin implementation is based heavily on the work of Alexander Weiss in his\n[`mobx-lit-element`](https://github.com/alexanderweiss/mobx-lit-element) implementation. This has been rewritten to\nsupport multiple forms of usage (mixin, or base class) as well as to be based on typescript to get type definitions.\n\n## Installation\n\nAs a dependency:\n\n```\nnpm install --save @adobe/lit-mobx lit mobx\n```\n\n## LitElement 2.0 Usage\n\nThis 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](https://lit-element.polymer-project.org/guide) then install the 1.0 major version:\n\n```\nnpm install --save @adobe/lit-mobx@^1.0.0\n```\n\nWe will backport any security patches (though don't expect there to be any) in this major version as necessary.\n\n## Demo\n\n```\nnpm install\nnpm run demo\n```\n\n## Usage\n\nSee the [JavaScript](https://stackblitz.com/edit/lit-mobx-demo?file=index.js) and [TypeScript](https://stackblitz.com/edit/lit-mobx-typescript?file=index.ts) example projects on StackBlitz. See [this example](https://stackblitz.com/edit/lit-mobx-typescript-mobx6?file=index.ts) for a demonstration of usage with Mobx v6 in Typescript without the use of decorators.\n\n```typescript\nimport { html, TemplateResult } from 'lit';\nimport { customElement, LitElement } from 'lit/decorators.js';\nimport { observable, action } from 'mobx';\nimport { MobxLitElement } from '@adobe/lit-mobx';\n\n// create a mobx observable\nclass Counter {\n    @observable\n    public count = 0;\n\n    @action\n    public increment() {\n        this.count++;\n    }\n}\n\n// create instance that can be shared across components\nconst counter = new Counter();\n\n// create a new custom element, and use the base MobxLitElement class\n// alternatively you can use the MobxReactionUpdate mixin, e.g. `class MyElement extends MobxReactionUpdate(LitElement)`\n@customElement('my-element')\nexport class MyElement extends MobxLitElement {\n    private counter = counter;\n\n    // any observables accessed in the render method will now trigger an update\n    public render(): TemplateResult {\n        return html`\n            Count is ${this.counter.count}\n            \u003cbr /\u003e\n            \u003cbutton @click=${this.incrementCount}\u003eAdd\u003c/button\u003e\n        `;\n    }\n\n    private incrementCount() {\n        this.counter.increment();\n    }\n}\n```\n\nFor further examples see the [demo folder](./demo).\n\nNOTE: observables are only hooked for updating the render function if those observables are directly used within the render function. The implementation of this library is such that we essential wrap the render function in an `autorun` block to hook these observables for re-running render. If you wish to response to an observable property to calculate some other result that then itself is used in the render function, then you need to use the regular MobX methods for observability in a property changed callback or some other lifecycle function to setup that observation and the write to a property in your component that is appropriately decorated to drive Lit's regular update cycle.\n\n## Custom Reaction\n\nIn some rare cases applications may need to have multiple different major versions of Mobx within a single app. This can lead to issues where the version of mobx used in various places needs to be specifically imported from aliased versions of mobx, e.g. aliasing `mobx 6.x` to `mobx6`.\n\nTo help support these cases lit-mobx provides the custom implementation of the MobxReactionUpdate mixin, `MobxReactionUpdateCustom`, that supports taking the `Reaction` constructor as a second argument. This allows the user to define which version of mobx to pass, and ensures that no side effects are caused by lit-mobx importing `mobx` directly.\n\nExample usage:\n\n```typescript\nimport { MobxReactionUpdateCustom } from '@adobe/lit-mobx/lib/mixin-custom.js';\n\n// import your specific mobx version\nimport { Reaction } from 'mobx6';\n\n// and pass it to the mixin to create your own mobx lit element base class\nclass Mobx6LitElement extends MobxReactionUpdateCustom(LitElement, Reaction) {}\n```\n\n### Contributing\n\nContributions are welcomed! Read the [Contributing Guide](./.github/CONTRIBUTING.md) for more information.\n\n### Licensing\n\nThis project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Flit-mobx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadobe%2Flit-mobx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Flit-mobx/lists"}