Create devcontainer.json

.devcontainer/devcontainer.json

@@ -0,0 +1,5 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+  }
+}

README.md

@@ -1,3 +1,7 @@
+⚠️⚠️⚠️🚨🚨🚨⚠️⚠️⚠️
+## This repo is no longer the home of the redux-devtools-extension. The new home is https://github.com/reduxjs/redux-devtools. Please file your issues and PRs there. 
+⚠️⚠️⚠️🚨🚨🚨⚠️⚠️⚠️
+
 # Redux DevTools Extension
 
 [![Join the chat at https://gitter.im/zalmoxisus/redux-devtools-extension](https://badges.gitter.im/zalmoxisus/redux-devtools-extension.svg)](https://gitter.im/zalmoxisus/redux-devtools-extension?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -11,11 +15,12 @@
 
 ### 1. For Chrome
  - from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd);
+ - or download `extension.zip` from [last releases](https://github.com/zalmoxisus/redux-devtools-extension/releases), unzip, open `chrome://extensions` url and turn on developer mode from top left and then click; on `Load Unpacked` and select the extracted folder for use
  - 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`.
 
 ### 2. For Firefox
- - from [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/remotedev/);
+ - from [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/);
  - 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` (just select a file from inside the dir).
 
 ### 3. For Electron
@@ -31,17 +36,25 @@
 ## 1. With Redux
 ### 1.1 Basic store
 
-For a basic [Redux store](http://redux.js.org/docs/api/createStore.html) simply add:
+For a basic [Redux store](https://redux.js.org/api/createstore#createstorereducer-preloadedstate-enhancer) simply add:
 ```diff
  const store = createStore(
    reducer, /* preloadedState, */
 +  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
 ```
 
-Note that [`preloadedState`](http://redux.js.org/docs/api/createStore.html) argument is optional in Redux' [`createStore`](http://redux.js.org/docs/api/createStore.html).
+Note that [`preloadedState`](https://redux.js.org/api/createstore#createstorereducer-preloadedstate-enhancer) argument is optional in Redux's [`createStore`](https://redux.js.org/api/createstore#createstorereducer-preloadedstate-enhancer).
 
 > For universal ("isomorphic") apps, prefix it with `typeof window !== 'undefined' &&`.
+```js
+const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
+```
+
+> For TypeScript use [`redux-devtools-extension` npm package](#13-use-redux-devtools-extension-package-from-npm), which contains all the definitions, or just use `(window as any)` (see [Recipes](/docs/Recipes.md#using-in-a-typescript-project) for an example).
+```js
+const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+```
 
 In case ESLint is configured to not allow using the underscore dangle, wrap it like so:
 ```diff
@@ -92,7 +105,7 @@ const store = createStore(reducer, enhancer);
 
 To make things easier, there's an npm package to install:
 ```
-npm install --save-dev redux-devtools-extension
+npm install --save redux-devtools-extension
 ```
 and to use like so:
 ```js
@@ -156,7 +169,7 @@ or with middlewares and enhancers:
  ```
 >  You'll have to add `'process.env.NODE_ENV': JSON.stringify('production')` in your Webpack config for the production bundle ([to envify](https://github.com/gaearon/redux-devtools/blob/master/docs/Walkthrough.md#exclude-devtools-from-production-builds)). If you use `create-react-app`, [it already does it for you.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L253-L257)
 
- If you're already checking `process.env.NODE_ENV` when creating the store, include `redux-devtools-extension/logOnly` for production enviroment.
+ If you're already checking `process.env.NODE_ENV` when creating the store, include `redux-devtools-extension/logOnly` for production environment.
 
  If you don’t want to allow the extension in production, just use `redux-devtools-extension/developmentOnly`.
 
@@ -173,8 +186,9 @@ See [integrations](docs/Integrations.md) and [the blog post](https://medium.com/
 ## Docs
   - [Options (arguments)](docs/API/Arguments.md)
   - [Methods (advanced API)](docs/API/Methods.md)
-  - [Create Redux store for debugging](docs/API/CreateStore.md)
   - [FAQ](docs/FAQ.md)
+  - Features
+    - [Trace actions calls](/docs/Features/Trace.md)
   - [Troubleshooting](docs/Troubleshooting.md)
   - [Articles](docs/Articles.md)
   - [Videos](docs/Videos.md)
@@ -187,7 +201,7 @@ Live demos to use the extension with:
  - [TodoMVC](http://zalmoxisus.github.io/examples/todomvc/)
  - [Redux Form](http://redux-form.com/6.5.0/examples/simple/)
  - [React Tetris](https://chvin.github.io/react-tetris/?lan=en)
- - [Book Collection (Angular ngrx store)](http://ngrx.github.io/example-app/)
+ - [Book Collection (Angular ngrx store)](https://ngrx.github.io/platform/example-app/)
 
 Also see [`./examples` folder](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/examples).
 

docs/API/Arguments.md

@@ -29,6 +29,12 @@ The `options` object is optional, and can include any of the following.
 ### `maxAge`
 *number* (>1) - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is `50`.
 
+### `trace`
+*boolean* or *function* - if set to `true`, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code ([more details](../Features/Trace.md)). You can use a function (with action object as argument) which should return `new Error().stack` string, getting the stack outside of reducers. Default to `false`.
+
+### `traceLimit`
+*number* - maximum stack trace frames to be stored (in case `trace` option was provided as `true`). By default it's `10`. Note that, because extension's calls are excluded, the resulted frames could be 1 less. If `trace` option is a function, `traceLimit` will have no effect, as it's supposed to be handled there.
+
 ### `serialize`
 *boolean* or *object* which contains:
 

docs/API/Methods.md

@@ -21,7 +21,7 @@ Use the following methods of `window.__REDUX_DEVTOOLS_EXTENSION__`:
 ##### Returns
 *Object* containing the following methods:
 
-- `subscribe(listener)` - adds a change listener. It will be called any time an action is dispatched form the monitor. Returns a function to unsubscribe the current listener. 
+- `subscribe(listener)` - adds a change listener. It will be called any time an action is dispatched from the monitor. Returns a function to unsubscribe the current listener. 
 - `unsubscribe()` - unsubscribes all listeners.
 - `send(action, state)` - sends a new action and state manually to be shown on the monitor. If action is `null` then we suppose we send `liftedState`. 
 - `init(state)` - sends the initial state to the monitor.
@@ -40,11 +40,11 @@ devTools.init({ value: 'initial state' });
 devTools.send('change state', { value: 'state changed' })
 ```
 
-See [redux enhancer's examle](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/logOnly.js), [react example](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/examples/react-counter-messaging/components/Counter.js) and [blog post](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f) for more details.
+See [redux enhancer's example](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/logOnly.js), [react example](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/examples/react-counter-messaging/components/Counter.js) and [blog post](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f) for more details.
 
 ### disconnect()
 
-Remove extensions listener and disconnect extensions background script connection. Usually just unsubscribing the listiner inside the `connect` is enough.  
+Remove extensions listener and disconnect extensions background script connection. Usually just unsubscribing the listener inside the `connect` is enough.  
 
 <a id="send"></a>
 ### send(action, state, [options, instanceId])
@@ -61,11 +61,11 @@ Send a new action and state manually to be shown on the monitor. It's recommende
 <a id="listen"></a>
 ### listen(onMessage, instanceId)
 
-Listen for messages dispatched for specific `instanceId`. For most of cases it's better to use `subcribe` inside the [`connect`](connect).
+Listen for messages dispatched for specific `instanceId`. For most cases it's better to use `subcribe` inside the [`connect`](connect).
 
 ##### Arguments
 
-- `onMessage` *Function* to call when there's an action form the monitor.
+- `onMessage` *Function* to call when there's an action from the monitor.
 - `instanceId` *String* - instance id for which to handle actions.  
 
 <a id="open"></a>
@@ -80,7 +80,7 @@ Open the extension's window. This should be conditional (usually you don't need
 <a id="notifyErrors"></a>
 ### notifyErrors([onError])
 
-When called, the extension will listen for uncaught exceptions on the page, and, if any, will show native notifications. Optionally, you can provide a function to be called when and exception occurs.
+When called, the extension will listen for uncaught exceptions on the page, and, if any, will show native notifications. Optionally, you can provide a function to be called when an exception occurs.
 
 ##### Arguments
 

docs/API/README.md

@@ -2,4 +2,3 @@
 
 - [Parameters](Arguments.md)
 - [Methods](Methods.md)
-- [Create Redux store for debugging](CreateStore.md)

docs/Features/Trace.md

@@ -0,0 +1,13 @@
+## Trace actions calls
+
+![trace-demo](https://user-images.githubusercontent.com/7957859/50161148-a1639300-02e3-11e9-80e7-18d3215a0bf8.gif)
+
+One of the features of Redux DevTools is to select an action in the history and see the callstack that triggered it. It aims to solve the problem of finding the source of events in the event list.
+
+By default it's disabled as, depending of the use case, generating and serializing stack traces for every action can impact the performance. To enable it, set `trace` option to `true` as in [examples](https://github.com/zalmoxisus/redux-devtools-extension/commit/64717bb9b3534ff616d9db56c2be680627c7b09d). See [the API](../API/Arguments.md#trace) for more details.
+
+For some edge cases where stack trace cannot be obtained with just `Error().stack`, you can pass a function as `trace` with your implementation. It's useful for cases where the stack is broken, like, for example, [when calling `setTimeout`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/e7c05c98e7e9654cb7db92a2f56c6b5f3ff2452b/test/instrument.spec.js#L735-L737). It takes `action` object as argument and should return `stack` string. This way it can be also used to provide stack conditionally only for certain actions.
+
+There's also an optional `traceLimit` parameter, which is `10` by default, to prevent consuming too much memory and serializing large stacks and also allows you to get larger stacks than limited by the browser (it will overpass default limit of `10` imposed by Chrome in `Error.stackTraceLimit`). If `trace` option is a function, `traceLimit` will have no effect, that should be handled there like so: `trace: () => new Error().stack.split('\n').slice(0, limit+1).join('\n')` (`+1` is needed for Chrome where's an extra 1st frame for `Error\n`).
+
+Apart from opening resources in Chrome DevTools, as seen in the demo above, it can open the file (and jump to the line-column) right in your editor. Pretty useful for debugging, and also as an alternative when it's not possible to use openResource (for Firefox or when using the extension from window or for remote debugging). You can click Settings button and enable that, also adding the path to your project root directory to use. It works out of the box for VSCode, Atom, Webstorm/Phpstorm/IntelliJ, Sublime, Emacs, MacVim, Textmate on Mac and Windows. For Linux you can use [`atom-url-handler`](https://github.com/eclemens/atom-url-handler).

docs/Integrations.md

@@ -1,20 +1,57 @@
 # Integrations for js and non-js frameworks
 
 Mostly functional:
+- [React](#react)
 - [Angular](#angular)
 - [Cycle](#cycle)
 - [Ember](#ember)
 - [Fable](#fable)
 - [Freezer](#freezer)
 - [Mobx](#mobx)
 - [PureScript](#purescript)
+- [Reductive](#reductive)
+- [Aurelia](#aurelia)
 
 In progress:
 - [ClojureScript](#clojurescript)
 - [Horizon](#horizon)
 - [Python](#python)
 - [Swift](#swift)
 
+### [React](https://github.com/facebook/react)
+#### Inspect React props
+##### [`react-inspect-props`](https://github.com/lucasconstantino/react-inspect-props)
+```js
+import { compose, withState } from 'recompose'
+import { inspectProps } from 'react-inspect-props'
+
+compose(
+  withState('count', 'setCount', 0),
+  inspectProps('Counter inspector')
+)(Counter)
+```
+
+#### Inspect React states
+##### [`remotedev-react-state`](https://github.com/jhen0409/remotedev-react-state)
+```js
+import connectToDevTools from 'remotedev-react-state'
+
+componentWillMount() {
+    // Connect to devtools after setup initial state
+    connectToDevTools(this/*, options */)
+  }
+```
+
+#### Inspect React hooks (useState and useReducer)
+##### [`reinspect`](https://github.com/troch/reinspect)
+```js
+import { useState } from 'reinspect'
+
+export function CounterWithUseState({ id }) {
+    const [count, setCount] = useState(0, id)
+    // ...
+}
+```
 
 ### [Mobx](https://github.com/mobxjs/mobx)
 #### [`mobx-remotedev`](https://github.com/zalmoxisus/mobx-remotedev)
@@ -66,23 +103,23 @@ import { NgReduxModule, NgRedux, DevToolsExtension } from 'ng2-redux';
 ```
 For Angular 1 see [ng-redux](https://github.com/angular-redux/ng-redux).
 
-#### [Angular @ngrx/store](https://github.com/ngrx/store) + [`@ngrx/store-devtools`](https://github.com/ngrx/store-devtools)
+#### [Angular @ngrx/store](https://ngrx.io/) + [`@ngrx/store-devtools`](https://ngrx.io/guide/store-devtools)
 ```js
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 @NgModule({
   imports: [
-    StoreModule.provideStore(rootReducer),
-    // Note that you must instrument after importing StoreModule
-    StoreDevtoolsModule.instrumentOnlyWithExtension({
+    StoreModule.forRoot(rootReducer),
+    // Instrumentation must be imported after importing StoreModule (config is optional)
+    StoreDevtoolsModule.instrument({
       maxAge: 5
     })
   ]
 })
 export class AppModule { }
 ```
 
-[`Example of integration`](https://github.com/ngrx/example-app) ([live demo](http://ngrx.github.io/example-app)).
+[`Example of integration`](https://github.com/ngrx/platform/tree/master/projects/example-app/) ([live demo](https://ngrx.github.io/platform/example-app/)).
 
 ### [Ember](http://emberjs.com/)
 #### [`ember-redux`](https://github.com/ember-redux/ember-redux)
@@ -182,3 +219,40 @@ var middleware: [StoreMiddleware] = [
 middleware.append(MonitorMiddleware.create(using: .defaultConfiguration))
 #endif
 ```
+
+### [Reductive](https://github.com/reasonml-community/reductive)
+#### [`reductive-dev-tools`](https://github.com/ambientlight/reductive-dev-tools)
+```reason
+let storeEnhancer =
+  ReductiveDevTools.(
+    Connectors.reductiveEnhancer(
+      Extension.enhancerOptions(~name="MyApp", ()),
+    )
+  );
+
+let storeCreator = storeEnhancer @@ Reductive.Store.create;
+```
+
+### [Aurelia](http://aurelia.io)
+#### [`aurelia-store`](https://aurelia.io/docs/plugins/store)
+```ts
+import {Aurelia} from 'aurelia-framework';
+import {initialState} from './state';
+
+export function configure(aurelia: Aurelia) {
+  aurelia.use
+    .standardConfiguration()
+    .feature('resources');
+
+    ...
+
+  aurelia.use.plugin('aurelia-store', {
+    initialState,
+    devToolsOptions: { // optional
+      ... // see https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md
+    },
+  });
+
+  aurelia.start().then(() => aurelia.setRoot());
+}
+```

docs/README.md

@@ -7,7 +7,8 @@
 * [API Reference](/docs/API/README.md)
   * [Options (arguments)](/docs/API/Arguments.md)
   * [Methods (advanced API)](/docs/API/Methods.md)
-  * [Create Redux store for debugging](/docs/API/CreateStore.md)
+* Features
+  * [Trace actions calls](/docs/Features/Trace.md)
 * [Integrations](/docs/Integrations.md)
 * [FAQ](/docs/FAQ.md)
 * [Troubleshooting](/docs/Troubleshooting.md)