Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mobx-remotedev
Advanced tools
mobx-remotedev - npm Package Compare versions
Comparing version 0.3.5 to 0.3.6
@@ -44,4 +44,3 @@ "use strict"; | ||
| if (config.global) { | ||
| if (fallbackStoreName) throw Error('You\'ve already defined a global store'); | ||
| fallbackStoreName = name; | ||
| fallbackStoreName = fallbackStoreName || name; | ||
| } | ||
@@ -48,0 +47,0 @@ } |
| { | ||
| "name": "mobx-remotedev", | ||
| "version": "0.3.5", | ||
| "version": "0.3.6", | ||
| "description": "Remote debugging for mobx.", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -1,23 +0,30 @@ | ||
| Remote debugging for MobX with [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension) (and [remotedev](https://github.com/zalmoxisus/remotedev) coming soon) | ||
| [](https://github.com/mobxjs/awesome-mobx) | ||
|  | ||
| Remote debugging for MobX with [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension) (and [remotedev](https://github.com/zalmoxisus/remotedev) coming soon) | ||
|  | ||
| ## Installation | ||
| #### 1. Get the extension | ||
| ##### 1.1 For Chrome | ||
| - from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) | ||
| - or build it with `npm i & npm run build:extension` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./build/extension` | ||
| - or run it in dev mode with `npm i & npm start` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./dev`. | ||
| - from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) | ||
| - or build it with `npm i & npm run build:extension` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./build/extension` | ||
| - or run it in dev mode with `npm i & npm start` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./dev`. | ||
| ##### 1.2 For Firefox | ||
| - from [AMO](https://addons.mozilla.org/en-US/firefox/addon/remotedev/) | ||
| - or build it with `npm i & npm run build:firefox` and [load the extension's folder](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) `./build/firefox`. | ||
| - from [AMO](https://addons.mozilla.org/en-US/firefox/addon/remotedev/) | ||
| - or build it with `npm i & npm run build:firefox` and [load the extension's folder](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) `./build/firefox`. | ||
| ##### 1.3 For Electron | ||
| - just specify `REDUX_DEVTOOLS` in [`electron-devtools-installer`](https://github.com/GPMDP/electron-devtools-installer). | ||
| - just specify `REDUX_DEVTOOLS` in [`electron-devtools-installer`](https://github.com/GPMDP/electron-devtools-installer). | ||
| ##### 1.4 For other browsers, for React Native, hybrid, desktop and server side apps | ||
| - Use [remotedev.io](http://remotedev.io/local/) or if you have the extension select `Remote DevTools` from the context menu. Just specify `remote` parameter, and optionally `hostname` and `port`. [See the API](https://github.com/zalmoxisus/mobx-remotedev#remotedevstore-config) for details. | ||
| - Use [remotedev.io](http://remotedev.io/local/) or if you have the extension select `Remote DevTools` from the context menu. Just specify `remote` parameter, and optionally `hostname` and `port`. [See the API](https://github.com/zalmoxisus/mobx-remotedev#remotedevstore-config) for details. | ||
| #### 2. Install the library | ||
@@ -42,3 +49,3 @@ | ||
| class appStore { | ||
| // ... | ||
| // ... | ||
| } | ||
@@ -56,3 +63,3 @@ | ||
| export default class appStore { | ||
| // ... | ||
| // ... | ||
| } | ||
@@ -64,16 +71,18 @@ ``` | ||
| ## API | ||
| #### `remotedev(store, [config])` | ||
| - arguments | ||
| - **store** *observable or class* to be monitored. In case you want to change its values (to time travel or cancel actions), you should export its result as in the example above (so we can extend the class). | ||
| - **config** *object* (optional as the parameters bellow) | ||
| - **name** *string* - the instance name to be showed on the monitor page. Default value is document.title. | ||
| - **onlyActions** *boolean* - set it to `true` to have a clear log only with actions. If MobX is in strict mode, it is `true` by default. Don't forget about [async actions](https://github.com/zalmoxisus/mobx-remotedev#how-to-handle-async-actions). | ||
| - **global** *boolean* - set it to `true` in order to assign dispatching of all unhandled actions to this store. Useful for nested classes / observables or when having async actions without specifying the `scope` explicitly. | ||
| - **filters** *object* - map of arrays named `whitelist` or `blacklist` to filter action types. You can also set it globally in the extension settings. | ||
| - **blacklist** *array of (regex as string)* - actions to be hidden in DevTools. | ||
| - **whitelist** *array of (regex as string)* - all other actions will be hidden in DevTools (the `blacklist` parameter will be ignored). | ||
| - **remote** *boolean* - set it to `true` to have remote monitoring via the local or `remotedev.io` server. `remote: false` is used for [the extension](https://github.com/zalmoxisus/redux-devtools-extension) or [react-native-debugger](https://github.com/jhen0409/react-native-debugger) | ||
| - **hostname** *string* - use to specify host for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server). If `port` is specified, default value is `localhost`. | ||
| - **port** *number* - use to specify host's port for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server). | ||
| - arguments | ||
| - **store** _observable or class_ to be monitored. In case you want to change its values (to time travel or cancel actions), you should export its result as in the example above (so we can extend the class). | ||
| - **config** _object_ (optional as the parameters bellow) | ||
| - **name** _string_ - the instance name to be showed on the monitor page. Default value is document.title. | ||
| - **onlyActions** _boolean_ - set it to `true` to have a clear log only with actions. If MobX is in strict mode, it is `true` by default. Don't forget about [async actions](https://github.com/zalmoxisus/mobx-remotedev#how-to-handle-async-actions). | ||
| - **global** _boolean_ - set it to `true` in order to assign dispatching of all unhandled actions to this store. Useful for nested classes / observables or when having async actions without specifying the `scope` explicitly. | ||
| - **filters** _object_ - map of arrays named `whitelist` or `blacklist` to filter action types. You can also set it globally in the extension settings. | ||
| - **blacklist** _array of (regex as string)_ - actions to be hidden in DevTools. | ||
| - **whitelist** _array of (regex as string)_ - all other actions will be hidden in DevTools (the `blacklist` parameter will be ignored). | ||
| - **remote** _boolean_ - set it to `true` to have remote monitoring via the local or `remotedev.io` server. `remote: false` is used for [the extension](https://github.com/zalmoxisus/redux-devtools-extension) or [react-native-debugger](https://github.com/jhen0409/react-native-debugger) | ||
| - **hostname** _string_ - use to specify host for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server). If `port` is specified, default value is `localhost`. | ||
| - **port** _number_ - use to specify host's port for [`remotedev-server`](https://github.com/zalmoxisus/remotedev-server). | ||
| Also see [the extension API](https://github.com/zalmoxisus/redux-devtools-extension#documentation) and [my presentation at React Europe](https://youtu.be/YU8jQ2HtqH4). | ||
@@ -84,2 +93,3 @@ | ||
| By default use | ||
| ```js | ||
@@ -92,7 +102,9 @@ import remotedev from 'mobx-remotedev'; | ||
| In case you want to use it in production or cannot set `process.env.NODE_ENV`, use | ||
| ```js | ||
| import remotedev from 'mobx-remotedev/lib/dev'; | ||
| ``` | ||
| So, the code will not be stripped from production bundle and you can use the extension even in production. It wouldn't affect the performance for end-users who don't have the extension installed. | ||
| So, the code will not be stripped from production bundle and you can use the extension even in production. It wouldn't affect the performance for end-users who don't have the extension installed. | ||
| ## FAQ | ||
@@ -102,3 +114,3 @@ | ||
| Use `remotedev` function for them as well. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/simple-todo/index.js#L22) | ||
| Use `remotedev` function for them as well. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/simple-todo/index.js#L22) | ||
@@ -111,11 +123,11 @@ ### How to set data correctly when time traveling | ||
| Check `__isRemotedevAction` of your class or observable object, which will be set to true when it's a monitor action. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/todomvc/src/stores/TodoStore.js#L22) | ||
| Check `__isRemotedevAction` of your class or observable object, which will be set to true when it's a monitor action. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/todomvc/src/stores/TodoStore.js#L22) | ||
| ### How to handle async actions | ||
| Use `runInAction` and don't forget about the second / third parameter which will be `this` if you're using arrow functions. If you don't want to specify it, set the `global` parameter to `true`. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/counter/stores/appState.js#L14) | ||
| Use `runInAction` and don't forget about the second / third parameter which will be `this` if you're using arrow functions. If you don't want to specify it, set the `global` parameter to `true`. [Example](https://github.com/zalmoxisus/mobx-remotedev/blob/master/examples/counter/stores/appState.js#L14) | ||
| ### How to show actions for nested classes / observables | ||
| Just set the `global` parameter to `true` like `remotedev(store, { global: true })`. If you want more details about the nested tree, see [#5](https://github.com/zalmoxisus/mobx-remotedev/pull/5). | ||
| Just set the `global` parameter to `true` like `remotedev(store, { global: true })`. If you want more details about the nested tree, see [#5](https://github.com/zalmoxisus/mobx-remotedev/pull/5). | ||
@@ -122,0 +134,0 @@ ## LICENSE |
@@ -23,4 +23,3 @@ import * as mobx from 'mobx'; | ||
| if (config.global) { | ||
| if (fallbackStoreName) throw Error('You\'ve already defined a global store'); | ||
| fallbackStoreName = name; | ||
| fallbackStoreName = fallbackStoreName || name | ||
| } | ||
@@ -27,0 +26,0 @@ } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by9.84%
134
Worsened metrics
- Total package byte prevSize
- decreased by-0.03%
531420
- Lines of code
- decreased by-0.06%
3147
No dependency changes