reactotron-core-client
This provides the core functionality of the clients allowing it talk to talk to the server.
It is used by reactotron-react-dom
and reactotron-react-native
.
Usage
// setup a reactotron clientconst client = // connect to the serverclient // send a log message as a stringclient // send a log message as a string that's importantclient // sending an object log messageclient // send a warningclient // send an error with an optional stack traceclient // report that an action is completeclient // report that values have changedclient // list the keys at a given path in stateclient // let the server know the state values they're subscribed to have changedclient // report any API activityclient // send a benchmark report up to the serverclient // a utility to time thingsconst elapsed = client// do something you want to timeconst ms = // the number of ms it took. ish. // display a custom eventclientdisplay name: 'MY EVENT' value: color: 'green' vegetable: 'spinach' variant: 'baby' salad: true important: true preview: 'What\'s in my appetizer?'
Why are we passing createSocket down?
Messages
client.intro
The client sends this message to the server when it first connects. It contains all the configuration information used to configure the client.
For example:
"host": "localhost" // the server we're connecting to "port": 9090 // the server's port "name": "My Fantastic App" // the name of our app "userAgent": "Internet Explorer 3.0" // the user agent "reactotronVersion": "0.99.1" // the version of reactotron "environment": "development" // our environment
server.intro
The client receives this message from the server once connected. It contains configuration information used by the server.
Right now the payload is empty because I haven't even created the server!
It'll probably have things like directory, version... I really don't know yet.
log
The client sends this to the server to log a message, warning or error. For warnings and errors, we pass through an optional stackTrace array.
Log:
Warn:
Error:
TBD: The actual stack trace format. I've seen a couple of formats unfortunately and I need to research what these will look like.
Also, how is source maps going to factor in?
image
Send from the client to the server to pass an image. The uri field is required
and is a data-uri
. This means, an ordinary http link will work, but as will embedding the image inline.
clear
An instruction sent from the client to the server to clear the history on the server.
state.action.complete
Sent from the client to the server when an action is complete. It's up to you
to decide what an action is. For Redux, these are actions dispatched. For MobX,
these are the results of spy
.
state.action.dispatch
Sent from the client to the server in order to dispatch this action through the state system.
state.values.request
Sent from the server to the client to ask for the values of state.
state.values.response
Sent from the client to the server in response to state.values.request
.
state.values.subscribe
Sent from the server to the client to ask for notification when something in the state changes.
state.values.change
Sent from the client to the server when one of the subscriptions found in
state.values.subscribe
has changed.
state.keys.request
Sent from the server to the client to enumerate the keys inside state.
state.keys.response
Sent from the client to server in response to state.keys.request
.
api.response
Sent from the client to server when an API has finished a request.
bench.report
Sent from the client to server when it's time to report some performance details.
display
Sent from the client to the server to provide a way to show "custom" commands.
Plugins
Reactotron is extensible via plugins. You add plugins by calling the use
function on the the client.
A plugin looks like this:
{}
- A function that:
- returns a function with 1 parameter (reactotron) that:
- returns an object
- returns a function with 1 parameter (reactotron) that:
The 1st Function
You use the first function to configure your plugin. If you don't have any configuration required for your plugin, just leave it empty like above.
The 2nd function
The 2nd function gets called with the reactotron object. Among other things,
it contains (most importantly) a function called send()
.
The return object
This contains hooks into reactotron. By naming the keys certain things, you're
able to hook into guts to do stuff. Most importantly onCommand
to receive
events from the server and features
to define extra functions on reactotron.
// counter-plugin.js { let commandCounter = 0 return { commandCounter++ if commandCounter === 69 console } }
Here's what a plugin can do.
// Fires whenever a command is received from the server. // // command is an object with: // .type - String - the name of the command // .payload - anything - maybe null, maybe a string, maybe an object, not a function // its whatever the server sent. { const type payload = command } // Fires when we connect to the server. Will only be called if the plugin // is setup before connecting to the server. {} // Fires when we disconnect from the server. {} // fires when the plugin is attached (this only happens once at initialization) console // This is an object (not a function). The keys are strings. The values are functions. // Every entry in here will become a method on the Reactotron client object. // Collisions are handled on a first-come first-serve basis. // // These names are reserved: // connect, configure, send, use, options, connected, plugins, and socket. // // Sorry. // // I went with this mixin approach because the interface feels nice from the // calling code point-of-view. features: // Reactotron.log('hello!') // Reactotron.warn('look out! falling rocks!')