Skip to content

Commit

Permalink
Merging Back 1.0 (#157)
Browse files Browse the repository at this point in the history
* Removes legacy stuff to a sub-directory.

* Moves the rest of the hidden files I forgot.

* Adds lerna to manage publishing and linking.

* Sets the lerna version to 0.1.0.

* Imports the new core client library.  🚀

* Imports the new core server. 🦄

* Imports the start of the React Native client. 😻

* Adds the root package.json with the lerna dependency.

* Adds build support to reactotron-core-server.

* Salvages the current server as a starting point.

* Bumps up a dependency to the correct version for dev.

* Nukes the dist build of reactotron-react-native.

* Ignores dist build of reactotron-react-native.

* Plays nice with socket.io in both RN and node.

* Sets the proper port for the reactotron-cli.

* Starts on the React Native demo.  Doesn't work.  I'm sad.  😿

* Sidesteps React Native internal dependency issues.  Good to go!

* Translates peerDependencies from French to English.

* Adds events for connect/disconnect to the core client.

* Removes the reactotron-core-client dist build.

* Ensures we never see dist again in git.  👋

* Adds start, stop, connect, and disconnect events to core server.

* Allows events onConnect and onDisconnect in reactotron-react-native.

* Hooks up the cli to connect/disconnect and start/stop.  🌟

* Use the *real* source for demo-react-native's internal deps.

This is nicer for devs.  But don't get wrong.  It still sucks having to do this.

* Switches to src in reactotron-core-server's package.json.

This is just so we don't have to compile things into dist and copy 'em over.  We'll have to rethink this for production deploys though.

* Adds a plugin system to reactotron-core-client.

* Adds the transports for socket.io back in.

The sad part about this is that didn't work before the refactor.  Now it does.  Uh oh.

* Guts the reactotron-react-native module.  Gladly.

Also, configure and connect are two different functions now.

* Adds a logging plugin to the core client.

* Hooks up the cli logging functionality.

* Adds a demo of sending 3 log types in React Native.

* Adds a stopwatch utility.

* Updates the plugin interface to accept a config object.

* Nicer plugins location and a new decorator plugin (#76)

Adds onPlugin, a plugins directory, and a decorator plugin.

* Adds benchmark support. (#77)

* Adds reactotron-redux plugin with action tracking. (#78)

* Adds a script that throws messages at the server for testing. (#81)

* Adds state and api responses into core client. (#82)

* Renames addPlugin to use. (#83)

* Adds onCommand support to plugins. (#84)

* Adds an apisauce plugin. (#85)

* Adds redux keys & values. (#86)

* Standardizes the plugin's interface. (#87)

* Updates plugins to have the same reactotron interface.

* Changes the plugin interface to () => reactotron => {}.

* Removes the useless decorate plugin.

* Adds an npm run e2e for my own sanity.

* Fixes the decorator functionality I just removed. (#88)

* Adds redux subscriptions. (#89)

* Adds state.action.dispatch support. (#90)

* Updates the version numbers getting ready for 1.0. (#91)

* Bumps React Native deps to 0.31.0. (#92)

* Resends the subscribed values when a fresh client connects. (#93)

* Refactors the CLI and moves much goodies into core-server. (#94)

* Adds a commands manager to hold the latest commands.

* Adds a test for the maximum list size.

* Converts connections to mobx.  Holy crap.

* Drives the connections ui through mobx.

* Sends logs through the new command event system.

* Organizes ui code by behaviour.

* Adds the missing ui refactorage from the last commit.  Bad Steve.

* Removes the old console.error command.

* Moves the ui code into its own directory.

* Busts interactions out to it's own file.

* Adds the actual interactions file.  :/

* Moves api response drawing to it's new home.

* Moves the benchmark report.

* Refactors state.action.complete drawing.

* Removes keys and values request into place.

Also got some pro advice about using asFlat for the command queues.

* Moves state.values.change into place.

* Renames all redux things to state.

* Moves send internal to the context object.

* Moves keys and values requests up to the core server.

* Moves subscription logic up to core server.

* Fixes a broken test because of the onConnect message sent.

* Moves dispatching to core-server and fixes some binding issues in redux.

* Fixes some missed ui interactions.

* Client server identification (#95)

* Removes duplicate function.

* Adds client identification.

* Adds a react-js client with a create-react-app demo! (#97)

* Electron Version Base Functionality (#99)

* Adds Electron starting point and basic layout.

* Tweaks the icons a bit.

* Bridges reactotron-core-server over the 2 electron processes.

* Adds logging to the app.

* Updates the file structure of the app directory.

* Adds a streaming mode. (#101)

* Minimizes the UI footprint. (#102)

* Adds client intro rendering. (#103)

* Adds benchmark rendering. (#104)

* Add a state modal to sample the workflow. (#105)

* Simplifies server code, gladly. (#106)

* Fixes up some React warnings. (#107)

* Tidying up, delinting, and pruning. (#108)

* Moves components around.

* Fixes a rogue warning.

* Removes linting issues.

* Removes dead code.

* Adds a state values renderer. (#109)

* Adds pin-to-top, appearance animation, and perf boosts. (#110)

* Cleans up the layout & lookup of our "tables". (#111)

* Hoists text to the top prepping for i18n. (#112)

* Adds support for state.keys.response. (#113)

* Adds dispatch support. (#114)

* Adds theme support. (#115)

* Adds more guts to the react js demo. (#116)

* Adds an errors plugin (reactjs) and stack traces. (#117)

* Adds collapse/expand mechanism. Tuning colours. (#118)

* Adds state watching support. (#119)

* Adds an app icon. (#120)

* Bumpity bump Lerna. (#121)

* CLI fixes (#122)

* Rounds the action milliseconds in the cli.

* Fixes the welcome message when a client connects.

* Ports over secure mode from current Reactotron. (#123)

* Switch the app's dev port out of the way of the demo. (#124)

* Adds react native stack traces! Reworks the rn demo. (#125)

* Adds the icon to the footer. (#126)

* Updates the Help menu. (#127)

* Addresses issues with package.json and other busy work. (#128)

* Bumps version to 0.91.0.

* v0.92.0

* Add help dialog with CMD + ? (#133)

* Basic show/hide new dialog working

* Quickhelp is in place and styled

* Adds an important flag to commands. (#134)

* Adds a help icon and pushes a few pixels around. (#135)

* Adds a codesigning script. (#136)

* Adds a readme with a change log... rough for now.

* v0.93.0

* Bumps the cli because Lerna didn't.  My fault.

* Adds an always on top menu item. (#137)

* Renders actions with flat data as a table instead of a tree. (#138)

* Adds a replay action button. (#139)

* Adds subscriptions to the timeline (#140)

* Adds subscriptions to the timeline.

* Prevents duplicate subscription commands from showing.

* Shows the scrollbar permanently dodging janky reflows. (#141)

* Adds edit & dispatch support. (#142)

* Adds subscription diffs. (#143)

* Cleans up the tree.  It's very noisy in there. (#144)

* Organizes the api response. (#145)

* Adds the display command type; for custom messages. (#146)

* Adds tabs and help. (#147)

* v0.94.0

* Updates the changelog.

* Adds a publish script.

* Adds stringify-object to the app.  Oops.

* Changes the text colour on important actions so eyes stop bleeding. (#148)

* Fixes the codesigning script.

* Adds a quick start guide for React JS. (#149)

* Corrects some hyperlinking newbishness.

* Simplifies the readme in demo-react-js. (#150)

* Adds more substance to the quick start. (#151)

* Adds a quick start guide for React Native. (#152)

* Adds a better readme + gif demos. (#153)

* Adds docs for the trackGlobalErrors plugin. (#154)

* Fixes a formatting issue with the error docs.

* Fixes and clarifies more with the error docs.

* Adds reactotron-redux documentation. (#155)

* Adds reactotron-apisauce documentation. (#156)
  • Loading branch information
skellock committed Aug 23, 2016
1 parent 962a0b5 commit 97d86c7
Show file tree
Hide file tree
Showing 500 changed files with 12,281 additions and 1,040 deletions.
8 changes: 3 additions & 5 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
npm-debug.log
node_modules
docs
.tern-project
.tern-config

lerna-debug.log
npm-debug.log.*
npm-debug.log
56 changes: 56 additions & 0 deletions docs/contributing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Contributing

### Getting Started

Clone & switch to the right branch.

```
git clone git@github.com:skellock/reactotron.git
cd reactotron
git checkout next
```

Run the setup script to install the dependencies & run tests.

```
npm run welcome
```


### Code Style

We use [standard.js](https://github.com/feross/standard). It is passive-agressively enforced.
Stern looks will be handed out. For repeat offenders, there WILL be finger wagging.


### Monorepo & Lerna

This is a monorepo: multiple JS packages in 1 git repo.

We use [lerna](https://github.com/lerna/lerna) to help us.


### Funky internal dependencies

`demo-react-native` is a React Native sample app. It depends on
`reactotron-react-native` which in turn depends on both `socket.io` and
`reactotron-core-client`.

Usually npm handles this right?

So why am I typing this?

Well, React Native (<=0.30.0) makes this hard to link to the dependencies
within this repo.

How we current get around this is by:

1. adding `socket.io` to the deps of `demo-react-native` :(
1. copy built versions of `reactotron-core-client` and `reactotron-react-native` manually to `node_modules` :(

Many tears were shed and this is the least shitty solution I could muster.

In the root, you can run `npm copy-internal-deps` to make them copy over.

But since you're copying built dependencies, you'll need to run `npm run build` first
if you're doing this to bring forward changes in those dependency libraries.
Binary file added docs/images/apisauce/apisauce.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-js/hello-1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-js/hello-2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-js/installing.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-js/spammy.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-native/hello-1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-native/hello-2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/quick-start-react-native/spammy.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/readme/Reactotron-128.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/readme/Reactotron-64.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/readme/reactotron-demo-app.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/readme/reactotron-demo-cli.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/redux/dispatching.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/redux/redux-keys-values.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/redux/subscriptions.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/track-global-errors/stack-trace.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions docs/plugin-apisauce.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# reactotron-apisauce

[Apisauce](http://github.com/skellock/apisauce) is a lightweight wrapper around the fantastic [Axios](https://github.com/mzabriskie/axios) networking library.

![API Response](./images/apisauce/apisauce.jpg)

# Installing

`npm i --save-dev reactotron-apisauce`


# Configuring

In the place where you setup your reactotron configuration, you import `reactotron-apisauce` plugin and throw it at Reactotron.

```js
import apisaucePlugin from 'reactotron-apisauce' // <--- import

// then plug it in when you configure Reactotron.

Reactotron
.configure()
.use(apisaucePlugin()) // <-- here we go!!!
.connect()
```

Next, wherever you create your api for you application, bring in Reactotron and attach the monitor to your apisauce instance.

```js
import Reactotron from 'reactotron-react-js'
// import Reactotron from 'reactotron-react-native' // or use this for mobile

// Apisauce has a feature where you can attach a handler to watch
// all requests/response flowing through your api. You can hook this up:
api.addMonitor(Reactotron.apisauce)

// or ...

// if you just wanted to track on 500's
api.addMonitor(response => {
if (response.problem === 'SERVER_ERROR')
Reactotron.apisauce(response)
})
```
88 changes: 88 additions & 0 deletions docs/plugin-redux.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
# reactotron-redux

[Redux](http://redux.js.org/) is library for managing global state. It's pretty damn awesome.

And everyone knows when you combine two great things, you get a super-awesome thing. Except for toothpaste & orange juice. Keep those separate.

![Keys and Values](./images/redux/redux-keys-values.jpg)

![Dispatching](./images/redux/dispatching.jpg)

![Subscriptions](./images/redux/subscriptions.jpg)


# Installing

`reactotron-redux` is a plugin which lives in a different npm package. You can install it by typing:

```
npm install --save-dev reactotron-redux
```

# Features

* track when actions are dispatch including timing
* subscribe to changes within the state tree
* pull values out on demand
* view list of keys
* dispatch actions from Reactotron

# Setting Up

This plugin connects Reactotron to Redux via Redux's [Store Enhancer](http://redux.js.org/docs/Glossary.html#store-enhancer) plugin system.

You'll configure where you setup your Redux store. In that file, we'll import both `reactotron-redux` and Reactotron.

```js
import Reactotron from 'reactotron-react-js'
// import Reactotron from 'reactotron-react-native' // if on mobile
import createReactotronEnhancer from 'reactotron-redux'
```

`createReactotronEnhancer` is a function that creates an enhancer ready to inject into Redux. There are 2 parameters.

1. `reactotronInstance` (required) - `Reactotron` itself. It's the object that came out of the import at the top.
2. `options` (optional) - An object providing configuration option to the store enhancer.

Use take the return value and put that into your call to `createStore()`.

**IMPORTANT: Your enhancer should go first if there are multiple enhancers.**

Here's a few examples in action:

```js
const reactotronEnhancer = createReactotronEnhancer(Reactotron)

// where there are no other enhancers
createStore(rootReducer, reactotronEnhancer)

// using Redux's compose() to bring together multiple enhancers
createStore(rootReducer, compose(reactotronEnhancer, applyMiddleware(logger, sagaMiddleware)))
```

See the demos for more examples.

# Options

`createReactotronEnhancer` supports options as the 2nd parameter.

`except` is an array of strings that match actions flowing through Redux.

If you have some actions you'd rather just not see (for example, `redux-saga`)
triggers a little bit of noise, you can suppress them:

```js
createReactotronEnhancer(Reactotron, {
except: ['EFFECT_TRIGGERED', 'EFFECT_RESOLVED', 'EFFECT_REJECTED']
})
```

`isActionImportant` is a way to mark certain actions as "important". Important messages are display in a bolder style that gets your attention within Reactotron.

It is a function that accepts the action and returns a `boolean`. `true` is important. `false` is normal.

```js
createReactotronEnhancer(Reactotron, {
isActionImportant: action => action.type === 'FORMAT_HARD_DRIVE'
})
```
84 changes: 84 additions & 0 deletions docs/plugin-track-global-errors.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
# Track Global Errors

Both `reactotron-react-native` and `reactotron-react-js` ship with a plugin called `trackGlobalErrors`.

The goal of this plugin is to ensure all errors will get thrown over to Reactotron for display.

![Installing The App](./images/track-global-errors/stack-trace.jpg)


# Usage

Wherever you setup your Reactotron in your app, you also add the additional plugin on the `import` line.

```js
import Reactotron, { trackGlobalErrors } from 'reactotron-react-native'
```

or

```js
import Reactotron, { trackGlobalErrors } from 'reactotron-react-js'
```

Next, add it as a plugin to Reactotron.

```js
Reactotron
.configure()
.use(trackGlobalErrors()) // <--- here we go!
.connect()
```

One option `trackGlobalErrors()` supports is `veto`. Veto is function that allows you to some frames you would like to leave out of the stack trace passed along.

For example, on React Native, perhaps you'd like to leave off any frames sourced from React Native itself?

```js
Reactotron
.configure()
.use(trackGlobalErrors({
veto: frame => frame.fileName.indexOf('/node_modules/react-native/') >= 0
}))
.connect()
```

`veto` is a function that takes an `object` and returns a `boolean`. `true` = ditch it. `false` = keep it.

The frame object passed into `veto` has these properties.

```
functionName: the name of the function or null if an anonymous function
lineNumber: the line number of the error
columnNumber: the column number of the error
fileName: the name of the file
```

### React JS Source Maps

Source maps for projects in webpack need to have the `devtool` set to `source-map`. On `create-react-app`-based apps, they use `eval`, so this will not work. You will have to switch your development webpack configuration to support this.

You also have the option to not do source map lookups, but still pass errors along by going into offline mode.

```js
Reactotron
.configure()
.use(trackGlobalErrors({
offline: true
}))
.connect()
```


# How It Works Internally

### React JS

It hijacks the browser's `window.onerror` event, immediately calling the previous `onerror`, then attempts to resolve the source of the errors via a source-map lookup. If successful, it throws a message over to Reactotron.


### React Native

On React Native, it hooks `NativeModules.ExceptionsManager.updateExceptionMessage`. This is a message that occurs after the source map lookup for React Native. It always calls the original function so it won't break anything internally. Your Red Box will still show.

Because we're hooking a Facebook internal function, this is a bit fragile. I'll stay on top of any React Native upgrades that might cause problems should the API change.

0 comments on commit 97d86c7

Please sign in to comment.