Code Monkey home page Code Monkey logo

mobx-remotedev's Introduction

Mentioned in Awesome Mobx

Remote debugging for MobX with Redux DevTools extension (and remotedev coming soon)

Demo

Installation

1. Get the extension

1.1 For Chrome
1.2 For Firefox
1.3 For Electron
1.4 For other browsers, for React Native, hybrid, desktop and server side apps
  • Use remotedev.io 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 for details.

2. Install the library

npm install --save mobx-remotedev

Usage

import remotedev from 'mobx-remotedev';
// or import remotedev from 'mobx-remotedev/lib/dev'
// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'

const appStore = observable({
  // ...
});

// Or
class appStore {
  // ...
}

export default remotedev(appStore);

Or as ES decorator:

import remotedev from 'mobx-remotedev';

@remotedev(/*{ config }*/)
export default class appStore {
  // ...
}

See counter, simple-todo and todomvc examples.

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.
      • 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 or react-native-debugger
      • hostname string - use to specify host for remotedev-server. If port is specified, default value is localhost.
      • port number - use to specify host's port for remotedev-server.

Also see the extension API and my presentation at React Europe.

Exclude / include DevTools in production builds

By default use

import remotedev from 'mobx-remotedev';

It will work only when process.env.NODE_ENV === 'development', otherwise the code will be stripped.

In case you want to use it in production or cannot set process.env.NODE_ENV, use

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.

FAQ

How to monitor (show changes) for inner items

Use remotedev function for them as well. Example

How to set data correctly when time traveling

By default it will try to set the properties of the class or observable object, but, if you have an importState method, it will be used. Example

How to disable computations when time traveling

Check __isRemotedevAction of your class or observable object, which will be set to true when it's a monitor action. Example

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

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.

LICENSE

MIT

Created By

If you like this, follow @mdiordiev on twitter.

mobx-remotedev's People

Contributors

antitoxic avatar bgfist avatar blackfenix2 avatar didierfranc avatar havef avatar jhen0409 avatar pastelsky avatar simeonc avatar tktaofik avatar zalmoxisus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mobx-remotedev's Issues

Debugger logging numerous action type "┃ add" causes crash

Not sure if this is an issue in mobx, in RN or just in my code but here goes:

Basically I have a huge array of objects (with multiple properties) that I made observable in my Store. I do a single asynchronous fetch call which basically populates the variable.

When I plug mobx-remotedev in, the inspector logs multiple (seemingly infinite) "┃ add" action types for each property in each object of the array. This causes the remote debugger to hang and if i plug locally to "react-native-debugger", the app also hangs.

Is this normal behavior for mobx? If so how do I prevent the debugger from crashing?
Thanks!

Registering one store shows up in remotedev, another store doesn't

Registering one store with remotedev works great:

import remotedev from 'mobx-remotedev/lib/dev'

class Store {

  constructor() {
    autorun(() => this.addAccountFB())
  }

  @observable currentAccountId = ''

  @action addAccount(vals: Object): void {
    const accountKey = this.refs.accounts.push().key
    this.refs.base.update({
      [`/accounts/${accountKey}`]: vals,
      [`/currentAccount`]: accountKey
    })
  }  
}


let store = new Store()
export default remotedev(store)

When I create another store and pass it into remotedev, it doesn't show up in remotedev UI:

import remotedev from 'mobx-remotedev/lib/dev'

class FormStore {
  @observable accountCreated = false

  @action disableAccountCreationForm(): void {
    this.accountCreated = true
  }
}

let formStore = new FormStore()
export default remotedev(formStore)

Ideally I would like to be able to view the state of these two stores. But I think this is an even a more basic problem. When I unregister the first store (by not passing in the store instance to remotedev), no store shows up as an option in the remotedev UI. In other words, I can't get that second store showing up in the remotedev UI and the remotedev chrome extension doesn't light up green.

I've restarted webpack, restarted the browser and I still can't get that second store to show up. Part of me thinks this is something silly I'm overlooking. But these two stores seem to be set up the same but one works in remotedev and one doesn't. Is there possible there is a config issue?

Thanks

[React-native] Cannot read property 'getDebugName' of undefined

I have an app that works fine if I do not use/ reference mobx-remotedev. I can even use "react-native Debugger" to connect in debug mode and have access to the console.

However, when I add mobx-remotedev to a store, I get the error Cannot read property 'getDebugName' of undefined

// @flow
import remotedev from 'mobx-remotedev'    // <-- new
import { observable, action } from 'mobx'
import Orientation from 'react-native-orientation'
import { Keyboard, NetInfo, AppState, BackHandler } from 'react-native'

@remotedev({        // <-- new decorator
  name: 'AppStateStore',
  remote: true,
  global: true,
})
export default class AppStateStore {
  @observable keyboard: any
  @observable isConnected: boolean = true
  ...
}

error:

Cannot read property 'getDebugName' of undefined

handleException | @ | ExceptionsManager.js:63
-- | -- | --
  | handleError | @ | InitializeCore.js:69
  | reportFatalError | @ | error-guard.js:42
  | guardedLoadModule | @ | require.js:143
  | _require | @ | require.js:132
  | (anonymous) | @ | format.js:27
  | executeApplicationScript | @ | RNDebuggerWorker.js:1
  | t | @ | RNDebuggerWorker.js:1

"dependencies": {
...
"react": "16.3.1",
"react-native": "0.55.3",
"mobx": "^5.0.3",
"mobx-react": "^5.2.3",
"mobx-remotedev": "^0.2.8",
},

Maximum call stack size exceeded

I just install this to React Native Debugger and I got

bundle.js:9 Uncaught RangeError: Maximum call stack size exceeded

was in this chuck of code

  function i(e, t) {
        var n = null;
        return o(e, function(e) { // here
            e.name === t && (n = e)
        }, function(e) {
            return e.children
        }),
        n
    }

from this function

, function(e, t, n) {
    "use strict";
    function r(e) {
        return e && e.__esModule ? e : {
            default: e
        }
    }
    function o(e, t, n) {
        if (e) {
            t(e);
            var r = n(e);
            if (r)
                for (var i = r.length, a = 0; a < i; a++)
                    o(r[a], t, n)
        }
    }
    function i(e, t) {
        var n = null;
        return o(e, function(e) {
            e.name === t && (n = e)
        }, function(e) {
            return e.children
        }),
        n
    }
    function a(e) {
        var t = arguments.length <= 1 || void 0 === arguments[1] ? {} : arguments[1]
          , n = arguments.length <= 2 || void 0 === arguments[2] ? {
            name: t.key || "state",
            children: []
        } : arguments[2];
        if (!(0,
        c.default)(e) && e && !e.toJS)
            return {};
        var r = t.key
          , o = void 0 === r ? "state" : r
          , u = t.pushMethod
          , p = void 0 === u ? "push" : u
          , f = i(n, o);
        return null === f ? {} : ((0,
        l.default)(e && e.toJS ? e.toJS() : e, function(e, t) {
            var r = e && e.toJS ? e.toJS() : e
              , o = {
                name: t
            };
            if ((0,
            s.default)(r)) {
                o.children = [];
                for (var i = 0; i < r.length; i++) {
                    var l;
                    o.children[p]((l = {
                        name: t + "[" + i + "]"
                    },
                    l[(0,
                    c.default)(r[i]) ? "object" : "value"] = r[i],
                    l))
                }
            } else
                (0,
                c.default)(r) ? o.children = [] : o.value = r;
            f.children[p](o),
            a(r, {
                key: t,
                pushMethod: p
            }, n)
        }),
        n)
    }
    t.__esModule = !0,
    t.default = a;
    var s = r(n(147))
      , c = r(n(758))
      , l = r(n(760))
}

Roadmap

  • Monitoring
  • Time travelling
  • Reset, commit, rollback, sweep
  • Cancel / skip (toggle) actions
  • Export / Import state
  • Dispatch actions remotely
  • Autogenerate tests
  • Recompute states on hot reloading
  • Show reactions
  • Support for non-browser environment (unify with remotedev)

Usage with typescript?

Given this base code:

export class CounterStore {
  @observable counter: number = 0;
}

export class AppStore {
  @observable readonly counter: CounterStore = new CounterStore();
}

I tried:

const appStore: AppStore = new remotedev(AppStore)();
export default appStore;

But it gives:
Uncaught TypeError: Cannot call a class as a function

So then I tried decorating the AppStore class itself as:

@remotedev
export class AppStore {
  @observable readonly counter: CounterStore = new CounterStore();
}

const appStore: = new AppStore();
export default appStore;

And then it gives
Uncaught TypeError: Class constructor AppStore cannot be invoked without 'new' at new store (C:\VSProjects\SkirmishJs\server\node_modules\mobx-remotedev\lib\dev.js:48:67)

Is there a way to make it work using typescript classes?

PS: typescript types for the library would be cool too :)

Not play well with `TSyringe`

I use tsyringe for dependency injection but as soon as I add the remotedev, it stops compiling.

@remotedev()
@injectable()
class MyStore {
}

Also try but no luck

@injectable()
@remotedev()
class MyStore {
}

Decorator support

I think it will be cleaner if we have decorator support:

@remotedev({ /* config */ })
export default class Counter {
  @observable counter = 0

  ...
}

@zalmoxisus, if you agreed I'll make a PR. :)

Globally tracking actions

Hi @zalmoxisus . @mweststrate mentioned the project.

I'm a fan :)

Just a few questions regarding handling mobx. In Mobx, stores are usually nested. I see the todo example in which remotedev() is called on each nested store instance. Do you think this is optimal?

In my opinion, a useful option forremotedev, one that covers most of the cases, will be to enable spying on all mobx observables or all nested ones at least without the need to wrap the nested stores.

Why? - because right now, I need to switch from a parent store to a child store to see a change which affects both. Correct me if I'm wrong here.

Cannot read property filter of undefined

I encountered following error, using mobx-remotedev.

mobx-err

after removing mobx-remotedev from my module, no error was triggered. Here is my store (module)

// @flow
import remotedev from 'mobx-remotedev'
import {observable} from 'mobx'

class UI {
  @observable preloading :boolean

  constructor() {
    this.preloading = false
  }

  startPreloading() {
    this.preloading = true // <- line 30, thus error comes from here
  }
}

export default remotedev(UI)

I also created StackOverflow question, regarding this topic, so if it isn't mistake on my part, it'd be appreciated, if you'd elaborate on how to resolve this gracefully.

new instance -> TypeError: _dec is not a function

hi,
I use global store as described in https://mobx.js.org/best/store.html#combining-multiple-stores
so I'm decorating class with @RemoteDev(/{ config }/) like this:

import ProjectsStore from './projects'
import OperatorsStore from './operators'
import StepsStore from './steps'
import remotedev from 'mobx-remotedev'
@remotedev(/*{ config }*/)
export class RootStore {
    constructor() {
      this.projectsStore = new ProjectsStore(this)
      this.operatorsStore = new OperatorsStore(this)
      this.stepsStore = new StepsStore(this)
    }
  }

export default new RootStore()

and creating instance of it that is provided to Provider which lead to error:

TypeError: _dec is not a function
Module../src/store/rootStore.js
src/store/rootStore.js:6
  3 | import StepsStore from './steps'
  4 | import remotedev from 'mobx-remotedev'
  5 | @remotedev(/*{ config }*/)
> 6 | export class RootStore {
  7 |     constructor() {
  8 |       this.projectsStore = new ProjectsStore(this)
  9 |       this.operatorsStore = new OperatorsStore(this)

working application (without remotedev) is here https://github.com/lipt0n/state-POC/tree/master/mobxtest

Build errors in Ionic project

I've recently updated some of the dependencies in my project (an Ionic / TypeScript app) and am now receiving compilation errors from mobx-remotedev.

[18:07:14]  Error: ./node_modules/mobx-remotedev/src/spy.js Module parse failed: Unexpected token (79:30) You may need 
            an appropriate loader to handle this file type. | if (change.arguments && change.arguments.length) 
            action.arguments = change.arguments; | if (!onlyActions[objName]) { | schedule(objName, { ...action, type: 
            `┏ ${action.type}` }); | send(); | schedule(objName, { ...action, type: `┗ ${action.type}` }); @ 
            ./node_modules/mobx-remotedev/src/dev.js 2:0-24 @ ./node_modules/mobx-remotedev/src/index.js @ 
            ./src/stores/content-director-store.ts @ ./src/app/app.module.ts @ ./src/app/main.ts 
Error: ./node_modules/mobx-remotedev/src/spy.js
Module parse failed: Unexpected token (79:30)
You may need an appropriate loader to handle this file type.
|         if (change.arguments && change.arguments.length) action.arguments = change.arguments;
|         if (!onlyActions[objName]) {
|           schedule(objName, { ...action, type: `┏ ${action.type}` });
|           send();
|           schedule(objName, { ...action, type: `┗ ${action.type}` });
 @ ./node_modules/mobx-remotedev/src/dev.js 2:0-24
 @ ./node_modules/mobx-remotedev/src/index.js
 @ ./src/stores/content-director-store.ts
 @ ./src/app/app.module.ts
 @ ./src/app/main.ts
    at new BuildError (node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at callback (node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
    at emitRecords.err (node_modules/webpack/lib/Compiler.js:265:13)
    at Compiler.emitRecords (node_modules/webpack/lib/Compiler.js:371:38)
    at emitAssets.err (node_modules/webpack/lib/Compiler.js:258:10)
    at applyPluginsAsyncSeries1.err (node_modules/webpack/lib/Compiler.js:364:12)
    at next (node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (node_modules/webpack/lib/Compiler.js:361:9)
[ERROR] An error occurred while running subprocess ionic-app-scripts.

I presume I need to update my webpack loader, but I'm not sure what is required in order to get version 0.3.6 building.

Here is the associated package.json

{
  "name": "MyApp",
  "version": "1.0.5",
  "buildNumber": "69",
  "author": "Me",
  "homepage": "http://mysite.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@capacitor/android": "^1.2.1",
    "@capacitor/cli": "^1.2.1",
    "@capacitor/core": "^1.2.1",
    "@capacitor/ios": "^1.2.1",
    "@ionic-native/core": "~4.20.0",
    "@ionic-native/native-audio": "^4.20.0",
    "@ionic-native/screen-orientation": "^4.20.0",
    "@ionic-native/splash-screen": "~4.20.0",
    "@ionic-native/sqlite": "^4.20.0",
    "@ionic-native/status-bar": "~4.20.0",
    "@ionic/storage": "2.2.0",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-sqlite-storage": "^2.4.0",
    "date-fns": "^1.29.0",
    "es6-promise-plugin": "^4.2.2",
    "gsap": "^2.0.2",
    "hammerjs": "^2.0.8",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "mobx": "^5.6.0",
    "mobx-angular": "^3.0.1",
    "mobx-remotedev": "^0.3.6",
    "ngx-date-fns": "^2.0.2",
    "rxjs": "5.5.11",
    "sharp": "^0.22.1",
    "sw-toolbox": "3.6.0",
    "three": "^0.99.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.2",
    "@types/hammerjs": "^2.0.36",
    "@types/lodash": "^4.14.117",
    "archiver": "^3.0.0",
    "cheerio": "^1.0.0-rc.3",
    "colors": "^1.3.2",
    "mac-open": "^0.1.3",
    "source-map-explorer": "^1.6.0",
    "stats.js": "^0.17.0",
    "typescript": "2.9.0-rc",
    "yargs": "^12.0.2"
  },
  "description": "Ny app"
}

and webpack.config.js

/*
 * The webpack config exports an object that has a valid webpack configuration
 * For each environment name. By default, there are two Ionic environments:
 * "dev" and "prod". As such, the webpack.config.js exports a dictionary object
 * with "keys" for "dev" and "prod", where the value is a valid webpack configuration
 * For details on configuring webpack, see their documentation here
 * https://webpack.js.org/configuration/
 */

 var path = require('path');
 var webpack = require('webpack');
 var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
 const Dotenv = require('dotenv-webpack');
 
 var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
 var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
 
 var optimizedProdLoaders = [
   {
     test: /\.json$/,
     loader: 'json-loader'
   },
   {
     test: /\.js$/,
     loader: [
       {
         loader: process.env.IONIC_CACHE_LOADER
       },
 
       {
         loader: '@angular-devkit/build-optimizer/webpack-loader',
         options: {
           sourceMap: true
         }
       },
     ]
   },
   {
     test: /\.ts$/,
     loader: [
       {
         loader: process.env.IONIC_CACHE_LOADER
       },
 
       {
         loader: '@angular-devkit/build-optimizer/webpack-loader',
         options: {
           sourceMap: true
         }
       },
 
       {
         loader: process.env.IONIC_WEBPACK_LOADER
       }
     ]
   }
 ];
 
 function getProdLoaders() {
   if (process.env.IONIC_OPTIMIZE_JS === 'true') {
     return optimizedProdLoaders;
   }
   return devConfig.module.loaders;
 }
 
 var devConfig = {
   entry: process.env.IONIC_APP_ENTRY_POINT,
   output: {
     path: '{{BUILD}}',
     publicPath: 'build/',
     filename: '[name].js',
     devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
   },
   devtool: process.env.IONIC_SOURCE_MAP_TYPE,
 
   resolve: {
     extensions: ['.ts', '.js', '.json'],
     modules: [path.resolve('node_modules')]
   },
 
   module: {
     loaders: [
       {
         test: /\.json$/,
         loader: 'json-loader'
       },
       {
         test: /\.ts$/,
         loader: process.env.IONIC_WEBPACK_LOADER
       }
     ]
   },
 
   plugins: [
     new Dotenv({
       path: '.env.dev', // load this now instead of the ones in '.env'
       systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
       silent: true // hide any errors
     }),
     ionicWebpackFactory.getIonicEnvironmentPlugin(),
     ionicWebpackFactory.getCommonChunksPlugin()
   ],
 
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   node: {
     fs: 'empty',
     net: 'empty',
     tls: 'empty'
   }
 };
 
 var prodConfig = {
   entry: process.env.IONIC_APP_ENTRY_POINT,
   output: {
     path: '{{BUILD}}',
     publicPath: 'build/',
     filename: '[name].js',
     devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
   },
   devtool: process.env.IONIC_SOURCE_MAP_TYPE,
 
   resolve: {
     extensions: ['.ts', '.js', '.json'],
     modules: [path.resolve('node_modules')]
   },
 
   module: {
     loaders: getProdLoaders()
   },
 
   plugins: [
     new Dotenv({
       path: '.env.prod', // load this now instead of the ones in '.env'
       systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
       silent: true // hide any errors
     }),
     ionicWebpackFactory.getIonicEnvironmentPlugin(),
     ionicWebpackFactory.getCommonChunksPlugin(),
     new ModuleConcatPlugin(),
     new PurifyPlugin()
   ],
 
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   node: {
     fs: 'empty',
     net: 'empty',
     tls: 'empty'
   }
 };
 
 
 module.exports = {
   dev: devConfig,
   prod: prodConfig
 }

Doesn't capture anything if useStrict is enabled

I have a weird problem. remotedev won't show any activity in the Chrome extension window if I enable MobX's useStrict. It will correctly show the stores, but only with default values, and will never react to actions or changed observables. The app is working fine, and mobx-react-devtools works fine as well. As soon as I remove useStrict(true) it works perfectly.

My setup:

  • mobx-remotedev @0.2.8
  • create-react-app with react-scripts-ts @ 2.6.0 (using TypeScript)
  • mobx @3.2.2
  • mobx-react @4.2.2
  • mobx-react-devtools @4.2.15

Example store

// circle-chart.moby.ts

import remotedev from 'mobx-remotedev/lib/dev';
import { action, observable, runInAction } from 'mobx';

@remotedev
export class CircleChartStore {
	@observable circleChartValue = 0;

	@action
	async fetchValue() {
		const percentage = /* does async stuff here*/

		runInAction('Update fetched Circle Chart data', () => {
			this.circleChartValue = percentage;
		});
	}
}

Example React app

// index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid } from './grid/';
import { Provider } from 'mobx-react';
import DevTools from 'mobx-react-devtools';
import { CircleChartStore } from './circle-chart.moby';
import { useStrict } from 'mobx';

useStrict(true);

function initStores(): AllStores {
	const circleChartStore = new CircleChartStore();
	/** more stores here **/

	return { circleChartStore, /** more stores **/ };
}

const mobxStores = initStores();

ReactDOM.render(
	<Provider {...mobxStores} >
		<div>
			<DevTools />
			/** App here **/
		</div>
	</Provider>
,
	document.getElementById('root') as HTMLElement,
);

I am running Redux as well, but haven't enabled the DevTools extension for my Redux store.

Another, maybe related problem

I HAVE to import remotedev using import remotedev from 'mobx-remotedev/lib/dev';, it won't work using the normal import, even though I KNOW that process.env.NODE_ENV === 'development' because I use that elsewhere in the app without failure. I don't know if this is related or not, but I thought that it might be nice to know.

Cannot read property 'action' of undefined

I'm getting this error on my webapp

Uncaught TypeError: Cannot read property 'action' of undefined
    at Object.../node_modules/mobx-remotedev/lib/utils.js (bundle.js:38997)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:86)
    at Object.../node_modules/mobx-remotedev/lib/spy.js (bundle.js:38814)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:86)
    at Object.../node_modules/mobx-remotedev/lib/dev.js (bundle.js:38577)
    at __webpack_require__ (bundle.js:660)
    at fn (bundle.js:86)
    at Object../store/EmployeeStore.js (bundle.js:109226)

using:

    "mobx": "^3.1.9",
    "mobx-remotedev": "^0.2.7",

I have the same packages in a react-native app and that seems to work fine

Any ideas?

Use devtools in React Native with Mobx State Tree

Hello,

I'm trying to use mobx-remotedev with React Native and MobX-State-Tree but I don't know how to do.
I tried with export default remotedev(AppStore, { global: true, remote: true }) in my rootStore but I get an error Unhandled JS Exception: Cannot read property 'create' of undefined cause I create the tree with const appStore = AppStore.create({ users: {} }, { logger: logger })

Can you orient me?

Thanks for readding

Requires cycle warning

It uses jsan packages which shows warning like this.

require.js:122 Require cycle: node_modules/jsan/lib/index.js -> node_modules/jsan/lib/cycle.js -> node_modules/jsan/lib/utils.js -> node_modules/jsan/lib/index.js


Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

is there anyway to get rid of such warning

Computed in remote-redux

Hi all,

I'm using the remote-redux devtools (electron) and I'm able to connect to my mobx store remotely (localhost:9000).

All observables are getting displayed in state, and the actions are getting listed. But, my state doesn't include "computed" get properties.

Just wanted to know if this is a bug, or if this is a limitation of this package? Can anyone see their computed properties in their redux devtools? Thank you!

Sad that this package is unmaintained, esp when the official Mobx one (https://github.com/mobxjs/mobx-devtools) is also unmaintained

Error: toISOString is not a function

This is happening with the latest extensions of chrome 2.14.2
But this was working very good before two versions ago, How can I downgrade to other versions to see which one was working good?

examples/counter not works

  1. Install chrome extension

  2. use examples/counter, not works

  3. update examples/counter/package.json

    -    "mobx-remotedev": "^0.0.1",
    +    "mobx-remotedev": "^0.2.2",
    
    -    "jsdom": "^5.6.1",
    -    "mocha": "^2.2.5",
    -    "node-libs-browser": "^0.5.2",
    +    "jsdom": "^9.5.0",
    +    "mocha": "^3.1.0",
    +    "node-libs-browser": "^1.0.0",
    

still not works. The browser is blank.
No error at terminal:

➜  counter git:(master) ✗ npm start

> [email protected] start /Users/HaveF/Desktop/mobx/mobx-remotedev/examples/counter
> node server.js

==> 🌎  Listening on port 4001. Open up http://localhost:4001/ in your browser.
webpack built d6f57debc790c97f8f46 in 3999ms

error at browser console:

Uncaught Error: [mobx] Invariant failed: Cannot obtain atom from [object Object]

2016-10-02 8 10 21

Multiple values in BlackList/Whitelist filters not working

I hope am doing this correctly:

const contactConfig = {
  name:'Contact Store',
  global:true,
  filters: {
    blacklist: ['add','splice']
  }
};

The above blacklist array doesn't work at all. But if I do blacklist:['add'] or blacklist:['splice'] it works, but not with multiple values. I've also tried blacklist: [/add/,/splice/] and it still doesn't work. The same case applies with whitelist.

Support for "Redux DevTools Extension API" serialize option

I have seen some discussion that mobx-remotedev implements the "Redux DevTools Extension" API. So I'm curious whether the serialize option can be passed in.

This doesn't seem to work:

const DevRootStore: typeof RootStore = remotedev(RootStore, {
  remote: false,
  global: true,
  onlyActions: true,
  serialize: {
    replacer: (key, val) => key === 'root' ? 'root' : val;
  },
});

Observable map?

Is it possible to use remotedev on observable Map? I tried remotedev(observable(new Map()), it is visible in the Redux DevTools, but no actions or state is shown there.

is this supposed to work alongside redux?

I have an electron app using this boilerplate https://github.com/iRath96/electron-react-typescript-boilerplate, which already has redux configured in it. I am leaving it in just for connected-react-router. All my other state is using MobX. I am not using MST, currently.

This is my code:

import { observable } from 'mobx';
import remotedev from '@hlhr202/mobx-remotedev';
import { wallets, WalletKey } from './wallets';
import BaseWallet from './wallets/coins/BaseWallet';

const _applicationState = observable({
  walletsLoaded: false,
  currentWalletKey: Object.keys(wallets)[0] as WalletKey,
  get currentWallet(): BaseWallet {
    return wallets[this.currentWalletKey];
  },
});

const applicationState: typeof _applicationState = remotedev(_applicationState, {
  name: 'applicationState',
  remote: false,
  global: true,
});

export default applicationState;

When I open the redux devtools in electron, the only instance I see is the main window one which contains the redux state. Not seeing any other instances.

I just can't make actions to work. State is never updated.

Similar to #29, I can't make it capture anything at all, even when I set enforceActions: 'never'. I also need to import remotedev using import remotedev from 'mobx-remotedev/lib/dev';, it won't work using the normal import, even though process.env.NODE_ENV === 'development'.

    "mobx": "5.6.0",
    "mobx-react": "5.4.2",
    "mobx-react-form": "1.35.1",
    "mobx-react-router": "3.1.2",
    "mobx-remotedev": "^0.3.6",

👉 PR

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.