npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hlhr202/mobx-remotedev

v0.3.0

Published

Remote debugging for mobx.

Downloads

2

Readme

Mobx Remote Dev

npm This is a modified version of mobx-remotedev, the original repository can be found in zalmoxisus/mobx-remotedev

This version is typescript friendly

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 @hlhr202/mobx-remotedev

Usage

  • To keep stores in order, a single root store is recommended
  • I suggest to use ES decorator or enable typescript experimental decorator

// ============== Define Store1 and Store2 ==============
/* Store1.js */
import { observable, action } from "mobx"
import RootStore from "RootStore.js"

export default class Store1 {
    constructor(rootStore) {
        this.rootStore = rootStore
    }
    @observable field = ''
    @action changeField = () => {
      this.field = '123'
    }
    //blah blah blah...
}

/* Store2.js */
import { observable, action } from "mobx"
import RootStore from "RootStore.js"

export default class Store2 {
    constructor(rootStore) {
        this.rootStore = rootStore
    }
    @observable field = ''
    @action changeSomethingInBothStores = () => {
      this.field = '234'
      this.rootStore.store1.changeField()
    }
    //blah blah blah...
}

// ============== Combine Store1 and Store2 as single store ==============
/* RootStore.js */
import remotedev from '@hlhr202/mobx-remotedev'
import Store1 from 'Store1.js'
import Store2 from 'Store2.js'

@remotedev(/* config */)
export default class RootStore {
    public store1 = new Store1(this)
    public store2 = new Store2(this)
}

// ============== Use single store in React ==============
/* index.js */
import { Provider, observer, inject } from 'mobx-react'
import RootStore.js from 'RootStore.js'

@inject('store1')
@inject('store2')
@observer
class Main extends React.Component {
    render() {
        return (
            <div>
                <p>field in store1: {this.props.store1.field}</p>
                <p>field in store1: {this.props.store2.field}</p>
                <button onClick={() => this.props.store2.changeSomethingInBothStores()}> changeSomething </button>
            </div>
        )
    }
}

class Root extends React.Component {
    render() {
        return (
            <Provider {...new RootStore()}>
                <Main />
            </Provider>
        )
    }
}

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 '@hlhr202/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 '@hlhr202/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

Authors