mobx-angular
Advanced tools
Comparing version 3.1.1 to 4.0.0
{ | ||
"name": "mobx-angular", | ||
"version": "3.1.1", | ||
"version": "4.0.0", | ||
"description": "Angular connector to MobX (2 and above)", | ||
"jsnext:main": "dist/mobx-angular.js", | ||
"module": "dist/mobx-angular.js", | ||
"main": "dist/mobx-angular.umd.js", | ||
"typings": "dist/mobx-angular.d.ts", | ||
"scripts": { | ||
"test": "jest", | ||
"tdd": "jest --watchAll", | ||
"lint": "node_modules/.bin/tslint lib/**/*.ts", | ||
"rollup": "rollup -c rollup.config.js dist/mobx-angular.js > dist/mobx-angular.umd.js", | ||
"clean": "rimraf dist", | ||
"prettier:all": "prettier --write './+(lib|spec)/**/*.{js,ts,tsx}'", | ||
"build": "npm run lint && npm run clean && ngc && npm run rollup", | ||
"prepublishOnly": "npm run build" | ||
"peerDependencies": { | ||
"@angular/common": "^9.0.1", | ||
"@angular/core": "^9.0.1", | ||
"mobx": ">=2", | ||
"tslib": "^1.10.0" | ||
}, | ||
"prettier": { | ||
"printWidth": 80, | ||
"tabWidth": 2, | ||
"useTabs": false, | ||
"semi": true, | ||
"singleQuote": true, | ||
"trailingComma": "none", | ||
"bracketSpacing": true, | ||
"jsxBracketSameLine": true, | ||
"requirePragma": false | ||
}, | ||
"lint-staged": { | ||
"*.{js,ts,tsx}": [ | ||
"./node_modules/.bin/prettier --write", | ||
"git add" | ||
] | ||
}, | ||
"husky": { | ||
"hooks": { | ||
"post-commit": "git reset", | ||
"pre-commit": "lint-staged" | ||
} | ||
}, | ||
"repository": { | ||
@@ -60,5 +29,2 @@ "type": "git", | ||
], | ||
"files": [ | ||
"dist/" | ||
], | ||
"author": "Adam Klein <adam@500tech.com>", | ||
@@ -70,33 +36,12 @@ "license": "MIT", | ||
"homepage": "https://github.com/mobxjs/mobx-angular#readme", | ||
"devDependencies": { | ||
"@angular/common": "^5.2.0", | ||
"@angular/compiler": "^5.2.0", | ||
"@angular/compiler-cli": "^5.2.0", | ||
"@angular/core": "^5.2.0", | ||
"@angular/platform-browser": "^5.2.0", | ||
"@angular/platform-browser-dynamic": "^5.2.0", | ||
"@types/core-js": "0.9.43", | ||
"@types/jest": "^24.0.23", | ||
"angular-cli": "1.0.0-beta.19-3", | ||
"codelyzer": "2.0.0-beta.4", | ||
"core-js": "^2.4.1", | ||
"husky": "^3.1.0", | ||
"jest": "^24.9.0", | ||
"jest-preset-angular": "^8.0.0", | ||
"lint-staged": "^9.5.0", | ||
"mobx": "4.0.1", | ||
"prettier": "^1.19.1", | ||
"relative-deps": "^0.2.0", | ||
"rimraf": "2.5.4", | ||
"rollup": "0.41.4", | ||
"rollup-plugin-node-resolve": "2.0.0", | ||
"rxjs": "^5.0.1", | ||
"tslint": "4.4.2", | ||
"typescript": "^3.0.3", | ||
"zone.js": "^0.7.4" | ||
}, | ||
"peerDependencies": { | ||
"mobx": ">=2", | ||
"@angular/core": ">=2.3.0" | ||
} | ||
"main": "bundles/mobx-angular.umd.js", | ||
"module": "fesm5/mobx-angular.js", | ||
"es2015": "fesm2015/mobx-angular.js", | ||
"esm5": "esm5/mobx-angular.js", | ||
"esm2015": "esm2015/mobx-angular.js", | ||
"fesm5": "fesm5/mobx-angular.js", | ||
"fesm2015": "fesm2015/mobx-angular.js", | ||
"typings": "mobx-angular.d.ts", | ||
"metadata": "mobx-angular.metadata.json", | ||
"sideEffects": false | ||
} |
146
README.md
@@ -1,144 +0,24 @@ | ||
[![Build Status](https://travis-ci.org/mobxjs/mobx-angular.svg?branch=master)](https://travis-ci.org/mobxjs/mobx-angular) | ||
[![npm version](https://badge.fury.io/js/mobx-angular.svg)](https://badge.fury.io/js/mobx-angular) | ||
# mobx-angular | ||
# MobxAngular | ||
## MobX connector for Angular (versions 2-7) | ||
If you're looking for the Angular 1 version version, it's [here](https://github.com/mobxjs/ng1-mobx) | ||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.1. | ||
## Features | ||
1. The library allows you to automatically observe all the observables that your component uses | ||
2. Automatically runs change detection - works great with OnPush strategy | ||
3. Disposes of all the observers when the component is destroyed | ||
4. Debugging tools | ||
## Code scaffolding | ||
## Usage | ||
Run `ng generate component component-name --project mobx-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project mobx-angular`. | ||
> Note: Don't forget to add `--project mobx-angular` or else it will be added to the default project in your `angular.json` file. | ||
Install: | ||
``` | ||
$ npm install --save mobx-angular mobx | ||
``` | ||
## Build | ||
Import the MobxAngularModule: | ||
```ts | ||
import { MobxAngularModule } from 'mobx-angular'; | ||
Run `ng build mobx-angular` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
@NgModule({ | ||
imports: [..., MobxAngularModule] | ||
}) | ||
export class MyModule {} | ||
``` | ||
## Publishing | ||
## autorun | ||
Use `*mobxAutorun` directive in your template: | ||
```ts | ||
import { Component, ChangeDetectionStrategy } from '@angular/core'; | ||
import {store} from './store/counter'; | ||
After building your library with `ng build mobx-angular`, go to the dist folder `cd dist/mobx-angular` and run `npm publish`. | ||
@Component({ | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
template: ` | ||
<div *mobxAutorun> | ||
{{ store.value }} - {{ store.computedValue }} | ||
<button (click)="store.action">Action</button> | ||
</div> | ||
` | ||
}) | ||
export class AppComponent { | ||
store = store; | ||
} | ||
``` | ||
## Running unit tests | ||
The directive will do the following: | ||
- Observe all the observables / computed values that your component uses | ||
- Automatically run the `detectChanges` method whenever there's a relevant change | ||
Run `ng test mobx-angular` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
Under the hood, this magic happens by running `autorun(() => view.detectChanges())` | ||
## Further help | ||
## Why directive and not decorator? | ||
In order to inject the change detector, and implement lifecycle hooks like ngOnDestroy, this library uses a directive, which is the most elegant solution in Angular. | ||
It also has the benefit of allowing you to easily have multiple observed sections of your component's template, in case it is required. | ||
## detach | ||
You can improve your component's performance by detaching it from CD (Change Detection), by supplying `*mobxAutorun="{ detach: true }"`. | ||
This might cause things to stop updating. You have 3 options to manage that: | ||
- Define local component properties as observables or computed values | ||
- Surround with *mobxAutorun only the parts that actually use observable / computed values from the store | ||
- Instead of detaching, use OnPush CD strategy on the component | ||
## autorunSync | ||
This method is deprecated - do not use it. | ||
## reaction | ||
Aside from autorun, MobX allows you to react to specific data changes. | ||
Usage: | ||
```ts | ||
import { Component, ChangeDetectionStrategy } from '@angular/core'; | ||
@Component({ | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
template: `<div *mobxReaction="getParity.bind(this)"> | ||
{{ parity }} | ||
</div>` | ||
}) | ||
class AppComponent { | ||
getParity() { | ||
return this.parity = store.counter % 2 ? 'Odd' : 'Even'; | ||
} | ||
} | ||
``` | ||
The `callback` function will automatically re-run whenever any observable that it uses changes. | ||
Change Detection will run automatically whenever the return value of `callback` changes. | ||
If you don't return anything, change detection will not run. | ||
In this example, the `parity` property will be updated according to `counter`, | ||
and change detection will run only when the `parity` changes. | ||
## Injectable stores | ||
You can easily make your stores injectable: | ||
```ts | ||
import { observable, action } from 'mobx-angular'; | ||
@Injectable() | ||
class Store { | ||
@observable value; | ||
@action doSomething() { ... } | ||
} | ||
``` | ||
## Using with OnPush or ngZone: 'noop' | ||
To achieve great performance, you can set `OnPush` change detection strategy on your components (this can be configured as default in `.angular-cli.json`). | ||
MobX will run change detection manually for you on the components that need to be updated. | ||
* In Angular 5 there's a new option, which is to disable Zone completely when bootstrapping the app (ngZone: 'noop'). | ||
Please note that this means that all 3rd-party components will stop working (because they rely on change detection to work via Zone). | ||
## Debugging MobX (only for mobx-angular versions 2.X and below) | ||
mobx-angular comes with a handy debug tool. | ||
To turn on / off the debug tool, open developer tools' console, and run: | ||
```ts | ||
mobxAngularDebug(true) // turn on | ||
mobxAngularDebug(false) // turn off | ||
``` | ||
Then you can right-click on the components that use mobx directives, and you will see a console log of the components' dependencies. | ||
Also, every action that happens in mobx will be console.logged in a nice way. | ||
TBD - support debugging for MobX 4 | ||
## AoT | ||
Some people complained about AoT when using mobx decorators inside components. | ||
In case you do that - we export a proxy to the decorators from mobx-angular, which should be AoT compatible, e.g.: | ||
`import { observable, computed } from 'mobx-angular'` | ||
## Examples | ||
See the `example` folder, specifically these files: | ||
`/example/todos/src/app/stores/todos.store.ts` | ||
`/example/todos/src/app/app.component.ts` | ||
To run the examples, clone this repo and run: | ||
``` | ||
$ npm install -g @angular/cli | ||
$ cd example/<example-folder> | ||
$ npm install | ||
$ npm start | ||
``` | ||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
138740
0
29
969
4
1
1
25
1