[ { "path": ".babelrc", "content": "{\n \"presets\": [ \"es2015\", \"stage-0\", \"react\" ],\n \"plugins\": [ \"add-module-exports\", \"transform-decorators-legacy\" ]\n}\n" }, { "path": ".bookignore", "content": "src/\nbuild/\ndev/\nexamples/\nnpm-package/\ntest/\npackage.json\nwebpack/" }, { "path": ".eslintignore", "content": "node_modules\nbuild\ndev\nwebpack/replace\nexamples\ntest/app/setup.js\nnpm-package\n_book\n" }, { "path": ".eslintrc", "content": "{\n \"extends\": \"eslint-config-airbnb\",\n \"globals\": {\n \"chrome\": true,\n \"__DEVELOPMENT__\": true\n },\n \"env\": {\n \"browser\": true,\n \"node\": true\n },\n \"rules\": {\n \"react/jsx-uses-react\": 2,\n \"react/jsx-uses-vars\": 2,\n \"react/react-in-jsx-scope\": 2,\n \"react/jsx-quotes\": 0,\n \"block-scoped-var\": 0,\n \"padded-blocks\": 0,\n \"quotes\": [ 1, \"single\" ],\n \"comma-style\": [ 2, \"last\" ],\n \"no-use-before-define\": [0, \"nofunc\"],\n \"func-names\": 0,\n \"prefer-const\": 0,\n \"comma-dangle\": 0,\n \"id-length\": 0,\n \"indent\": [2, 2, {\"SwitchCase\": 1}],\n \"new-cap\": [2, { \"capIsNewExceptions\": [\"Test\"] }],\n \"default-case\": 0\n },\n \"plugins\": [\n \"react\"\n ]\n}" }, { "path": ".gitignore", "content": "node_modules\nnpm-debug.log\n.DS_Store\n.idea/\ndist/\nbuild/\ndev/\ntmp/\n_book\n" }, { "path": ".travis.yml", "content": "sudo: required\ndist: trusty\nlanguage: node_js\nnode_js:\n - \"6\"\ncache:\n directories:\n - $HOME/.yarn-cache\n - node_modules\nenv:\n - CXX=g++-4.8\naddons:\n apt:\n sources:\n - google-chrome\n - ubuntu-toolchain-r-test\n packages:\n - google-chrome-stable\n - g++-4.8\n\ninstall:\n - \"/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16\"\n - npm install -g yarn\n - yarn install\n\nbefore_script:\n - export DISPLAY=:99.0\n - sh -e /etc/init.d/xvfb start &\n - sleep 3\n\nscript:\n - yarn test\n" }, { "path": "CHANGELOG.md", "content": "# Change Log\n\nThis project adheres to [Semantic Versioning](http://semver.org/). \nEvery release, along with the migration instructions, is documented on the Github [Releases](https://github.com/zalmoxisus/redux-devtools-extension/releases) page.\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2015-present Mihail Diordiev\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "README.md", "content": "⚠️⚠️⚠️🚨🚨🚨⚠️⚠️⚠️\n## 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. \n⚠️⚠️⚠️🚨🚨🚨⚠️⚠️⚠️\n\n# Redux DevTools Extension\n\n[![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)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=round-square)](http://makeapullrequest.com)\n[![OpenCollective](https://opencollective.com/redux-devtools-extension/backers/badge.svg)](#backers) \n[![OpenCollective](https://opencollective.com/redux-devtools-extension/sponsors/badge.svg)](#sponsors)\n\n![Demo](https://cloud.githubusercontent.com/assets/7957859/18002950/aacb82fc-6b93-11e6-9ae9-609862c18302.png)\n\n## Installation\n\n### 1. For Chrome\n - from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd);\n - 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\n - 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`;\n - 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`.\n\n### 2. For Firefox\n - from [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/);\n - 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).\n\n### 3. For Electron\n - just specify `REDUX_DEVTOOLS` in [`electron-devtools-installer`](https://github.com/GPMDP/electron-devtools-installer).\n\n### 4. For other browsers and non-browser environment\n - use [`remote-redux-devtools`](https://github.com/zalmoxisus/remote-redux-devtools). \n\n## Usage\n\n> Note that starting from v2.7, `window.devToolsExtension` was renamed to `window.__REDUX_DEVTOOLS_EXTENSION__` / `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__`. \n\n## 1. With Redux\n### 1.1 Basic store\n \nFor a basic [Redux store](https://redux.js.org/api/createstore#createstorereducer-preloadedstate-enhancer) simply add:\n```diff\n const store = createStore(\n reducer, /* preloadedState, */\n+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()\n );\n```\n\nNote 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).\n\n> For universal (\"isomorphic\") apps, prefix it with `typeof window !== 'undefined' &&`.\n```js\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\n```\n\n> 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).\n```js\nconst composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;\n```\n\nIn case ESLint is configured to not allow using the underscore dangle, wrap it like so:\n```diff\n+ /* eslint-disable no-underscore-dangle */\n const store = createStore(\n reducer, /* preloadedState, */\n window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()\n );\n+ /* eslint-enable */\n```\n\n> **Note**: Passing enhancer as last argument requires **redux@>=3.1.0**. For older versions apply it like [here](https://github.com/zalmoxisus/redux-devtools-extension/blob/v0.4.2/examples/todomvc/store/configureStore.js) or [here](https://github.com/zalmoxisus/redux-devtools-extension/blob/v0.4.2/examples/counter/store/configureStore.js#L7-L12). Don't mix the old Redux API with the new one.\n\n> You don't need to npm install [`redux-devtools`](https://github.com/gaearon/redux-devtools) when using the extension (that's a different lib).\n\n### 1.2 Advanced store setup\nIf you setup your store with [middleware and enhancers](http://redux.js.org/docs/api/applyMiddleware.html), change:\n```diff\n import { createStore, applyMiddleware, compose } from 'redux';\n\n+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;\n+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(\n- const store = createStore(reducer, /* preloadedState, */ compose(\n applyMiddleware(...middleware)\n ));\n```\n> Note that when the extension is not installed, we’re using Redux compose here.\n \nTo specify [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md), use it like so:\n```js\nconst composeEnhancers =\n typeof window === 'object' &&\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? \n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({\n // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...\n }) : compose;\n\nconst enhancer = composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n);\nconst store = createStore(reducer, enhancer);\n```\n\n> [See the post for more details](https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83).\n\n### 1.3 Use `redux-devtools-extension` package from npm\n\nTo make things easier, there's an npm package to install:\n```\nnpm install --save redux-devtools-extension\n```\nand to use like so:\n```js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from 'redux-devtools-extension';\n\nconst store = createStore(reducer, composeWithDevTools(\n applyMiddleware(...middleware),\n // other store enhancers if any\n));\n```\nTo specify [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig):\n```js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from 'redux-devtools-extension';\n\nconst composeEnhancers = composeWithDevTools({\n // Specify name here, actionsBlacklist, actionsCreators and other options if needed\n});\nconst store = createStore(reducer, /* preloadedState, */ composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n));\n``` \n> There’re just [few lines of code](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/index.js) added to your bundle.\n\nIn case you don't include other enhancers and middlewares, just use `devToolsEnhancer`:\n```js\nimport { createStore } from 'redux';\nimport { devToolsEnhancer } from 'redux-devtools-extension';\n\nconst store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(\n // Specify name here, actionsBlacklist, actionsCreators and other options if needed\n));\n``` \n\n### 1.4 Using in production\nIt's useful to include the extension in production as well. Usually you [can use it for development](https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f). \n\nIf you want to restrict it there, use `redux-devtools-extension/logOnlyInProduction`:\n```js\nimport { createStore } from 'redux';\nimport { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';\n\nconst store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(\n // options like actionSanitizer, stateSanitizer\n));\n```\nor with middlewares and enhancers:\n ```js\n import { createStore, applyMiddleware } from 'redux';\n import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';\n\n const composeEnhancers = composeWithDevTools({\n // options like actionSanitizer, stateSanitizer\n });\n const store = createStore(reducer, /* preloadedState, */ composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ));\n ```\n> 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)\n\n If you're already checking `process.env.NODE_ENV` when creating the store, include `redux-devtools-extension/logOnly` for production environment.\n\n If you don’t want to allow the extension in production, just use `redux-devtools-extension/developmentOnly`.\n\n> See [the article](https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f) for more details. \n\n### 1.5 For React Native, hybrid, desktop and server side Redux apps\nFor React Native we can use [`react-native-debugger`](https://github.com/jhen0409/react-native-debugger), which already included [the same API](https://github.com/jhen0409/react-native-debugger/blob/master/docs/redux-devtools-integration.md) with Redux DevTools Extension.\n\nFor most platforms, include [`Remote Redux DevTools`](https://github.com/zalmoxisus/remote-redux-devtools)'s store enhancer, and from the extension's context menu choose 'Open Remote DevTools' for remote monitoring.\n\n## 2. Without Redux\nSee [integrations](docs/Integrations.md) and [the blog post](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f) for more details on how to use the extension with any architecture.\n \n## Docs\n - [Options (arguments)](docs/API/Arguments.md)\n - [Methods (advanced API)](docs/API/Methods.md)\n - [FAQ](docs/FAQ.md)\n - Features\n - [Trace actions calls](/docs/Features/Trace.md)\n - [Troubleshooting](docs/Troubleshooting.md)\n - [Articles](docs/Articles.md)\n - [Videos](docs/Videos.md)\n - [Feedback](docs/Feedback.md)\n\n## Demo\nLive demos to use the extension with:\n\n - [Counter](http://zalmoxisus.github.io/examples/counter/)\n - [TodoMVC](http://zalmoxisus.github.io/examples/todomvc/)\n - [Redux Form](http://redux-form.com/6.5.0/examples/simple/)\n - [React Tetris](https://chvin.github.io/react-tetris/?lan=en)\n - [Book Collection (Angular ngrx store)](https://ngrx.github.io/platform/example-app/)\n\nAlso see [`./examples` folder](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/examples).\n\n## Backers\nSupport us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/redux-devtools-extension#backer)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Sponsors\nBecome a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/redux-devtools-extension#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## License\n\nMIT\n\n## Created By\n\nIf you like this, follow [@mdiordiev](https://twitter.com/mdiordiev) on twitter.\n" }, { "path": "appveyor.yml", "content": "environment:\n matrix:\n - nodejs_version: '6'\n\ncache:\n - \"%LOCALAPPDATA%/Yarn\"\n - node_modules\n\ninstall:\n - ps: Install-Product node $env:nodejs_version\n - yarn install\n\ntest_script:\n - node --version\n - yarn --version\n - yarn test\n\nbuild: off\n" }, { "path": "book.json", "content": "{\n \"gitbook\": \"3.2.2\",\n \"title\": \"Redux DevTools Extension\",\n \"plugins\": [\"edit-link\", \"prism\", \"-highlight\", \"github\", \"anchorjs\"],\n \"pluginsConfig\": {\n \"edit-link\": {\n \"base\": \"https://github.com/zalmoxisus/redux-devtools-extension/tree/master\",\n \"label\": \"Edit This Page\"\n },\n \"github\": {\n \"url\": \"https://github.com/zalmoxisus/redux-devtools-extension/\"\n },\n \"sharing\": {\n \"facebook\": true,\n \"twitter\": true\n }\n }\n}" }, { "path": "docs/API/Arguments.md", "content": "# Options\n\nUse with\n - `window.__REDUX_DEVTOOLS_EXTENSION__([options])`\n - `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([options])()`\n - `window.__REDUX_DEVTOOLS_EXTENSION__.connect([options])`\n - `redux-devtools-extension` npm package:\n ```js\n import { composeWithDevTools } from 'redux-devtools-extension';\n\n const composeEnhancers = composeWithDevTools(options);\n const store = createStore(reducer, /* preloadedState, */ composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ));\n ```\n\nThe `options` object is optional, and can include any of the following.\n\n### `name`\n*string* - the instance name to be shown on the monitor page. Default value is `document.title`. If not specified and there's no document title, it will consist of `tabId` and `instanceId`.\n \n### `actionCreators`\n*array* or *object* - action creators functions to be available in the Dispatcher. See [the example](https://github.com/zalmoxisus/redux-devtools-extension/commit/477e69d8649dfcdc9bf84dd45605dab7d9775c03).\n\n### `latency`\n*number (in ms)* - if more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once. It is the joint between performance and speed. When set to `0`, all actions will be sent instantly. Set it to a higher value when experiencing perf issues (also `maxAge` to a lower value). Default is `500 ms`.\n \n### `maxAge`\n*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`.\n\n### `trace`\n*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`.\n\n### `traceLimit`\n*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.\n\n### `serialize`\n*boolean* or *object* which contains:\n\n- **options** `object or boolean`:\n - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).\n - `false` - will handle also circular references.\n - `true` - will handle also date, regex, undefined, primitives, error objects, symbols, maps, sets and functions.\n - object, which contains `date`, `regex`, `undefined`, `nan`, `infinity`, `error`, `symbol`, `map`, `set` and `function` keys. For each of them you can indicate if to include (by setting as `true`). For `function` key you can also specify a custom function which handles serialization. See [`jsan`](https://github.com/kolodny/jsan) for more details. Example:\n\n ```js\n const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: { \n options: {\n undefined: true,\n function: function(fn) { return fn.toString() }\n }\n }\n }));\n ```\n\n- **replacer** `function(key, value)` - [JSON `replacer` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#The_replacer_parameter) used for both actions and states stringify.\n\n Example of usage with [mori data structures](https://github.com/swannodette/mori):\n ```js\n const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n replacer: (key, value) => value && mori.isMap(value) ? mori.toJs(value) : value\n }\n }));\n ```\n In addition, you can specify a data type by adding a [`__serializedType__`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/helpers/index.js#L4) key. So you can deserialize it back while importing or persisting data. Moreover, it will also [show a nice preview showing the provided custom type](https://cloud.githubusercontent.com/assets/7957859/21814330/a17d556a-d761-11e6-85ef-159dd12f36c5.png):\n ```js\n const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n replacer: (key, value) => {\n if (Immutable.List.isList(value)) { // use your custom data type checker\n return {\n data: value.toArray(), // ImmutableJS custom method to get JS data as array\n __serializedType__: 'ImmutableList' // mark you custom data type to show and retrieve back\n }\n }\n }\n }\n }));\n ```\n- **reviver** `function(key, value)` - [JSON `reviver` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter) used for parsing the imported actions and states. See [`remotedev-serialize`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/immutable/serialize.js#L8-L41) as an example on how to serialize special data types and get them back:\n ```js\n const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n reviver: (key, value) => {\n if (typeof value === 'object' && value !== null && '__serializedType__' in value) {\n switch (value.__serializedType__) {\n case 'ImmutableList': return Immutable.List(value.data);\n }\n }\n }\n }\n }));\n ```\n\n- **immutable** `object` - automatically serialize/deserialize immutablejs via [remotedev-serialize](https://github.com/zalmoxisus/remotedev-serialize). Just pass the Immutable library like so:\n\n ```js\n import Immutable from 'immutable'; // https://facebook.github.io/immutable-js/\n // ...\n // Like above, only showing off compose this time. Reminder you might not want this in prod.\n const composeEnhancers = typeof window === 'object' && typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ !== 'undefined' ?\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({\n serialize: {\n immutable: Immutable\n }\n }) : compose;\n ```\n It will support all ImmutableJS structures. You can even export them into a file and get them back. The only exception is `Record` class, for which you should pass in addition the references to your classes in `refs`.\n- **refs** `array` - ImmutableJS `Record` classes used to make possible restore its instances back when importing, persisting... Example of usage:\n ``` js\n import Immutable from 'immutable';\n // ...\n \n const ABRecord = Immutable.Record({ a:1, b:2 });\n const myRecord = new ABRecord({ b:3 }); // used in the reducers\n \n const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n immutable: Immutable,\n refs: [ABRecord]\n }\n }));\n ```\n \nAlso you can specify alternative values right in the state object (in the initial state of the reducer) by adding `toJSON` function:\n\nIn the example bellow it will always send `{ component: '[React]' }`, regardless of the state's `component` value (useful when you don't want to send lots of unnecessary data):\n```js\nfunction component(\n state = { component: null, toJSON: () => ({ component: '[React]' }) }, \n action\n) {\n switch (action.type) {\n case 'ADD_COMPONENT': return { component: action.component };\n default: return state;\n }\n}\n```\n\nYou could also alter the value. For example when state is `{ count: 1 }`, we'll send `{ counter: 10 }` (notice we don't have an arrow function this time to use the object's `this`): \n```js\nfunction counter(\n state = { count: 0, toJSON: function (){ return { conter: this.count * 10 }; } },\n action\n) {\n switch (action.type) {\n case 'INCREMENT': return { count: state.count + 1 };\n default: return state;\n }\n}\n```\n\n### `actionSanitizer` / `stateSanitizer`\n- **actionSanitizer** (*function*) - function which takes `action` object and id number as arguments, and should return `action` object back. See the example bellow.\n- **stateSanitizer** (*function*) - function which takes `state` object and index as arguments, and should return `state` object back.\n\nExample of usage:\n\n```js\nconst actionSanitizer = (action) => (\n action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?\n { ...action, data: '<>' } : action\n);\nconst store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n actionSanitizer,\n stateSanitizer: (state) => state.data ? { ...state, data: '<>' } : state\n}));\n```\n\n### `actionsBlacklist` / `actionsWhitelist`\n*string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers). If `actionsWhitelist` specified, `actionsBlacklist` is ignored.\n\nExample:\n```js\ncreateStore(reducer, remotedev({\n sendTo: 'http://localhost:8000',\n actionsBlacklist: 'SOME_ACTION'\n // or actionsBlacklist: ['SOME_ACTION', 'SOME_OTHER_ACTION']\n // or just actionsBlacklist: 'SOME_' to omit both\n}))\n```\n\n### `predicate`\n*function* - called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor. Use it as a more advanced version of `actionsBlacklist`/`actionsWhitelist` parameters.\nExample of usage:\n\n```js\nconst store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n predicate: (state, action) => state.dev.logLevel === VERBOSE && !action.forwarded\n}));\n```\n\n### `shouldRecordChanges`\n*boolean* - if specified as `false`, it will not record the changes till clicking on `Start recording` button. Default is `true`. Available only for Redux enhancer, for others use `autoPause`.\n\n### `pauseActionType`\n*string* - if specified, whenever clicking on `Pause recording` button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Available only for Redux enhancer. Default is `@@PAUSED`.\n\n### `autoPause`\n*boolean* - auto pauses when the extension’s window is not opened, and so has zero impact on your app when not in use. Not available for Redux enhancer (as it already does it but storing the data to be sent). Default is `false`.\n\n### `shouldStartLocked`\n*boolean* - if specified as `true`, it will not allow any non-monitor actions to be dispatched till clicking on `Unlock changes` button. Available only for Redux enhancer. Default is `false`.\n\n### `shouldHotReload`\n*boolean* - if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Available only for Redux enhancer. Default to `true`.\n\n### `shouldCatchErrors`\n*boolean* - if specified as `true`, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.\n\n### `features`\nIf you want to restrict the extension, just specify the features you allow:\n```js\nconst composeEnhancers = composeWithDevTools({\n features: {\n pause: true, // start/pause recording of dispatched actions\n lock: true, // lock/unlock dispatching actions and side effects \n persist: true, // persist states on page reloading\n export: true, // export history of actions in a file\n import: 'custom', // import history of actions from a file\n jump: true, // jump back and forth (time travelling)\n skip: true, // skip (cancel) actions\n reorder: true, // drag and drop actions in the history list \n dispatch: true, // dispatch custom actions or action creators\n test: true // generate tests for the selected actions\n },\n // other options like actionSanitizer, stateSanitizer\n});\n```\nIf not specified, all of the features are enabled. When set as an object, only those included as `true` will be allowed.\nNote that except `true`/`false`, `import` and `export` can be set as `custom` (which is by default for Redux enhancer), meaning that the importing/exporting occurs on the client side. Otherwise, you'll get/set the data right from the monitor part.\n" }, { "path": "docs/API/Methods.md", "content": "## Communicate with the extension directly\n\n> Note this is advanced API, which you usually don't need to use with Redux enhancer. \n\nUse the following methods of `window.__REDUX_DEVTOOLS_EXTENSION__`:\n\n- [connect](#connect)\n- [disconnect](#disconnect)\n- [send](#send)\n- [listen](#listen)\n- [open](#open)\n- [notifyErrors](#notifyerrors)\n\n\n### connect([options])\n\n##### Arguments\n\n- [`options`] *Object* - [see the available options](Arguments.md).\n\n##### Returns\n*Object* containing the following methods:\n\n- `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. \n- `unsubscribe()` - unsubscribes all listeners.\n- `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`. \n- `init(state)` - sends the initial state to the monitor.\n- `error(message)` - sends the error message to be shown in the extension's monitor.\n\nExample of usage:\n\n```js\nconst devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(config);\ndevTools.subscribe((message) => {\n if (message.type === 'DISPATCH' && message.state) {\n console.log('DevTools requested to change the state to', message.state);\n }\n});\ndevTools.init({ value: 'initial state' });\ndevTools.send('change state', { value: 'state changed' })\n```\n\nSee [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.\n\n### disconnect()\n\nRemove extensions listener and disconnect extensions background script connection. Usually just unsubscribing the listener inside the `connect` is enough. \n\n\n### send(action, state, [options, instanceId])\n\nSend a new action and state manually to be shown on the monitor. It's recommended to use [`connect`](connect), unless you want to hook into an already created instance.\n\n##### Arguments\n\n- `action` *String* (action type) or *Object* with required `type` key.\n- `state` *any* - usually object to expand. \n- [`options`] *Object* - [see the available options](Arguments.md).\n- [`instanceId`] *String* - instance id for which to include the log. If not specified and not present in the `options` object, will be the first available instance.\n\n\n### listen(onMessage, instanceId)\n\nListen for messages dispatched for specific `instanceId`. For most cases it's better to use `subcribe` inside the [`connect`](connect).\n\n##### Arguments\n\n- `onMessage` *Function* to call when there's an action from the monitor.\n- `instanceId` *String* - instance id for which to handle actions. \n\n\n### open([position])\n\nOpen the extension's window. This should be conditional (usually you don't need to open extension's window automatically).\n\n##### Arguments\n\n- [`position`] *String* - window position: `left`, `right`, `bottom`. Also can be `panel` to [open it in a Chrome panel](../FAQ.md#how-to-keep-devtools-window-focused-all-the-time-in-a-chrome-panel). Or `remote` to [open remote monitor](../FAQ.md#how-to-get-it-work-with-webworkers-react-native-hybrid-desktop-and-server-side-apps). By default is `left`.\n\n\n### notifyErrors([onError])\n\nWhen 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.\n\n##### Arguments\n\n- [`onError`] *Function* to call when there's an exceptions.\n" }, { "path": "docs/API/README.md", "content": "# API Reference\n\n- [Parameters](Arguments.md)\n- [Methods](Methods.md)\n" }, { "path": "docs/Articles.md", "content": "# Articles\n\n- [Improve your development workflow with Redux DevTools Extension](https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83)\n- [Using Redux DevTools in production](https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f)\n- [Redux DevTools without Redux](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f)\n" }, { "path": "docs/Credits.md", "content": "# Credits\n\n - Built using [Crossbuilder](https://github.com/zalmoxisus/crossbuilder) boilerplate.\n - Includes [Dan Abramov](https://github.com/gaearon)'s [redux-devtools](https://github.com/gaearon/redux-devtools) and the following monitors:\n - [Log Monitor](https://github.com/gaearon/redux-devtools-log-monitor)\n - [Inspector](https://github.com/alexkuz/redux-devtools-inspector)\n - [Dispatch](https://github.com/YoruNoHikage/redux-devtools-dispatch)\n - [Slider](https://github.com/calesce/redux-slider-monitor)\n - [Chart](https://github.com/romseguy/redux-devtools-chart-monitor)\n - [The logo icon](https://github.com/reactjs/redux/issues/151) made by [Keith Yong](https://github.com/keithyong) .\n - Examples from [Redux](https://github.com/rackt/redux/tree/master/examples).\n" }, { "path": "docs/FAQ.md", "content": "# Redux DevTools Extension FAQ\n\n## Table of Contents\n- [How to get it work](#how-to-get-it-work)\n- [How to disable/enable it in production](#how-to-disable-it-in-production)\n- [How to persist debug sessions across page reloads](#how-to-persist-debug-sessions-across-page-reloads)\n- [How to open DevTools programmatically](#how-to-open-devtools-programmatically)\n- [How to enable/disable errors notifying](#how-to-enabledisable-errors-notifying)\n- [How to get it work with WebWorkers, React Native, hybrid, desktop and server side apps](#how-to-get-it-work-with-webworkers-react-native-hybrid-desktop-and-server-side-apps)\n- [Keyboard shortcuts](#keyboard-shortcuts)\n\n#### How to get it work\n- Check the extension with [Counter](http://zalmoxisus.github.io/examples/counter/) or [TodoMVC](http://zalmoxisus.github.io/examples/todomvc/) demo.\n- Reload the extension on the extensions page (`chrome://extensions/`).\n- If something goes wrong, [open an issue](https://github.com/zalmoxisus/redux-devtools-extension/issues) or tweet me: [@mdiordiev](https://twitter.com/mdiordiev).\n\n#### How to disable it in production\nUsually you don't have to. See [the article for details on how to include it in production](https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f). \n#### How to persist debug sessions across page reloads\nJust click the `Persist` button or add `?debug_session=` to the url.\n#### How to open DevTools programmatically\n```js\nwindow.__REDUX_DEVTOOLS_EXTENSION__.open();\n```\nMake sure to have it conditionally. Auto opening windows is a bad DX. See the [API](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Methods.md#open) for details.\n#### How to enable/disable errors notifying\nJust find `Redux DevTools` on the extensions page (`chrome://extensions/`) and click the `Options` link to customize everything. The errors notifying is disabled by default. If enabled, it works only when the store enhancer is called (in order not to show notifications for any sites you visit). In case you want notifications for a non-redux app, init it explicitly by calling `window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors()` (probably you'll check if `window.__REDUX_DEVTOOLS_EXTENSION__` exists before calling it).\n#### How to get it work with WebWorkers, React Native, hybrid, desktop and server side apps\nIt is not possible to inject extension's script there and to communicate directly. To solve this, use [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools). After including it inside the app, click `Remote` button for remote monitoring. \n#### Keyboard shortcuts\nTo set/change the keyboard shortcuts, click \"Keyboard shortcuts\" button on the bottom of the extensions page (`chrome://extensions/`). By default only `Cmd` (`Ctrl`) + `Shift` + `E` is available, which will open the extension popup (only when the Redux store is available in the current page).\n" }, { "path": "docs/Features/Trace.md", "content": "## Trace actions calls\n\n![trace-demo](https://user-images.githubusercontent.com/7957859/50161148-a1639300-02e3-11e9-80e7-18d3215a0bf8.gif)\n\nOne 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.\n\nBy 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.\n\nFor 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.\n\nThere'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`).\n\nApart 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).\n" }, { "path": "docs/Feedback.md", "content": "# Feedback wanted\n\n[File an issue](https://github.com/zalmoxisus/redux-devtools-extension/issues) or [submit a PR](https://github.com/zalmoxisus/redux-devtools-extension/pulls) if you have suggestions, rate us and leave a review on [Chrome Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/reviews), post feature requests and bug reports on [Product Pains](https://productpains.com/product/redux-devtools-extension), or ping me on Twitter as [@mdiordiev](https://twitter.com/mdiordiev).\n\n\n" }, { "path": "docs/Integrations.md", "content": "# Integrations for js and non-js frameworks\n\nMostly functional:\n- [React](#react)\n- [Angular](#angular)\n- [Cycle](#cycle)\n- [Ember](#ember)\n- [Fable](#fable)\n- [Freezer](#freezer)\n- [Mobx](#mobx)\n- [PureScript](#purescript)\n- [Reductive](#reductive)\n- [Aurelia](#aurelia)\n\nIn progress:\n- [ClojureScript](#clojurescript)\n- [Horizon](#horizon)\n- [Python](#python)\n- [Swift](#swift)\n\n### [React](https://github.com/facebook/react)\n#### Inspect React props\n##### [`react-inspect-props`](https://github.com/lucasconstantino/react-inspect-props)\n```js\nimport { compose, withState } from 'recompose'\nimport { inspectProps } from 'react-inspect-props'\n\ncompose(\n withState('count', 'setCount', 0),\n inspectProps('Counter inspector')\n)(Counter)\n```\n\n#### Inspect React states\n##### [`remotedev-react-state`](https://github.com/jhen0409/remotedev-react-state)\n```js\nimport connectToDevTools from 'remotedev-react-state'\n\ncomponentWillMount() {\n // Connect to devtools after setup initial state\n connectToDevTools(this/*, options */)\n }\n```\n\n#### Inspect React hooks (useState and useReducer)\n##### [`reinspect`](https://github.com/troch/reinspect)\n```js\nimport { useState } from 'reinspect'\n\nexport function CounterWithUseState({ id }) {\n const [count, setCount] = useState(0, id)\n // ...\n}\n```\n\n### [Mobx](https://github.com/mobxjs/mobx)\n#### [`mobx-remotedev`](https://github.com/zalmoxisus/mobx-remotedev)\n```js\nimport remotedev from 'mobx-remotedev';\n// or import remotedev from 'mobx-remotedev/lib/dev'\n// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'\n\nconst appStore = observable({\n // ...\n});\n\n// Or\nclass appStore {\n // ...\n}\n\nexport default remotedev(appStore);\n````\n\n### [Angular](https://github.com/angular/angular)\n#### [ng2-redux](https://github.com/angular-redux/ng2-redux)\n```js\nimport { NgReduxModule, NgRedux, DevToolsExtension } from 'ng2-redux';\n\n@NgModule({\n /* ... */\n imports: [ /* ... */, NgReduxModule ]\n})export class AppModule {\n constructor(\n private ngRedux: NgRedux,\n private devTools: DevToolsExtension) {\n\n let enhancers = [];\n // ... add whatever other enhancers you want.\n\n // You probably only want to expose this tool in devMode.\n if (__DEVMODE__ && devTools.isEnabled()) {\n enhancers = [ ...enhancers, devTools.enhancer() ];\n }\n\n this.ngRedux.configureStore(\n rootReducer,\n initialState,\n [],\n enhancers);\n }\n}\n```\nFor Angular 1 see [ng-redux](https://github.com/angular-redux/ng-redux).\n\n#### [Angular @ngrx/store](https://ngrx.io/) + [`@ngrx/store-devtools`](https://ngrx.io/guide/store-devtools)\n```js\nimport { StoreDevtoolsModule } from '@ngrx/store-devtools';\n\n@NgModule({\n imports: [\n StoreModule.forRoot(rootReducer),\n // Instrumentation must be imported after importing StoreModule (config is optional)\n StoreDevtoolsModule.instrument({\n maxAge: 5\n })\n ]\n})\nexport class AppModule { }\n```\n\n[`Example of integration`](https://github.com/ngrx/platform/tree/master/projects/example-app/) ([live demo](https://ngrx.github.io/platform/example-app/)).\n\n### [Ember](http://emberjs.com/)\n#### [`ember-redux`](https://github.com/ember-redux/ember-redux)\n```js\n//app/enhancers/index.js\nimport { compose } from 'redux';\nvar devtools = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f;\nexport default compose(devtools);\n```\n\n### [Cycle](https://github.com/cyclejs/cyclejs)\n#### [`@culli/store`](https://github.com/milankinen/culli/tree/master/packages/store)\n```js\nimport {run} from \"@cycle/most-run\"\nimport {makeDOMDriver as DOM} from \"@cycle/dom\"\nimport Store, {ReduxDevtools} from \"@culli/store\"\nimport App, {newId} from \"./App\"\n\n\nrun(App, {\n DOM: DOM(\"#app\"),\n Store: Store(ReduxDevtools({items: [{id: newId(), num: 0}, {id: newId(), num: 0}]}))\n})\n```\n\n### [Freezer](https://github.com/arqex/freezer)\n#### [`freezer-redux-devtools`](https://github.com/arqex/freezer-redux-devtools)\n```js\nimport React, { Component } from 'react';\nimport { supportChromeExtension } from 'freezer-redux-devtools/freezer-redux-middleware';\nimport Freezer from 'freezer-js';\n\n// Our state is a freezer object\nvar State = new Freezer({hello: 'world'});\n\n// Enable the extension\nsupportChromeExtension( State );\n```\n\n### [Horizon](https://github.com/rethinkdb/horizon)\n#### [`horizon-remotedev`](https://github.com/zalmoxisus/horizon-remotedev)\n```js\n// import hzRemotedev from 'horizon-remotedev';\n// or import hzRemotedev from 'horizon-remotedev/lib/dev'\n// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'\n\n//Setup Horizon connection\nconst horizon = Horizon();\n\n// ...\n// Specify the horizon instance to monitor\nhzRemotedev(horizon(\"react_messages\"))\n```\n\n### [Fable](https://github.com/fable-compiler/Fable)\n#### [`fable-elmish/debugger`](https://github.com/fable-elmish/debugger)\n```fsharp\nopen Elmish.Debug\n\nProgram.mkProgram init update view\n|> Program.withDebugger // connect to a devtools monitor via Chrome extension if available\n|> Program.run\n\n```\n\nor\n\n```fsharp\nopen Elmish.Debug\n\nProgram.mkProgram init update view\n|> Program.withDebuggerAt (Remote(\"localhost\",8000)) // connect to a server running on localhost:8000\n|> Program.run\n```\n\n### [PureScript](https://github.com/purescript/purescript)\n#### [`purescript-react-redux`](https://github.com/ethul/purescript-react-redux)\n[`Example of integration`](https://github.com/ethul/purescript-react-redux-example).\n\n### [ClojureScript](https://github.com/clojure/clojurescript)\n[`Example of integration`](http://gitlab.xet.ru:9999/publicpr/clojurescript-redux/tree/master#dev-setup)\n\n### [Python](https://www.python.org/)\n#### [`pyredux`](https://github.com/peterpeter5/pyredux)\n[WIP](https://github.com/zalmoxisus/remotedev-server/issues/34)\n\n### [Swift](https://github.com/apple/swift)\n#### [`katanaMonitor`](https://github.com/bolismauro/katanaMonitor-lib-swift) for [`katana-swift`](https://github.com/BendingSpoons/katana-swift)\n```swift\nimport KatanaMonitor\n\nvar middleware: [StoreMiddleware] = [\n// other middleware\n]\n\n#if DEBUG\nmiddleware.append(MonitorMiddleware.create(using: .defaultConfiguration))\n#endif\n```\n\n### [Reductive](https://github.com/reasonml-community/reductive)\n#### [`reductive-dev-tools`](https://github.com/ambientlight/reductive-dev-tools)\n```reason\nlet storeEnhancer =\n ReductiveDevTools.(\n Connectors.reductiveEnhancer(\n Extension.enhancerOptions(~name=\"MyApp\", ()),\n )\n );\n \nlet storeCreator = storeEnhancer @@ Reductive.Store.create;\n```\n\n### [Aurelia](http://aurelia.io)\n#### [`aurelia-store`](https://aurelia.io/docs/plugins/store)\n```ts\nimport {Aurelia} from 'aurelia-framework';\nimport {initialState} from './state';\n \nexport function configure(aurelia: Aurelia) {\n aurelia.use\n .standardConfiguration()\n .feature('resources');\n \n ...\n \n aurelia.use.plugin('aurelia-store', {\n initialState,\n devToolsOptions: { // optional\n ... // see https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md\n },\n });\n \n aurelia.start().then(() => aurelia.setRoot());\n}\n```\n" }, { "path": "docs/README.md", "content": "# Documentation\n\n* [Extension](/README.md)\n * [Installation](/README.md#installation)\n * [Usage](/README.md#usage)\n * [Demo](/README.md#demo)\n* [API Reference](/docs/API/README.md)\n * [Options (arguments)](/docs/API/Arguments.md)\n * [Methods (advanced API)](/docs/API/Methods.md)\n* Features\n * [Trace actions calls](/docs/Features/Trace.md)\n* [Integrations](/docs/Integrations.md)\n* [FAQ](/docs/FAQ.md)\n* [Troubleshooting](/docs/Troubleshooting.md)\n* [Recipes](/docs/Recipes.md)\n* [Articles](/docs/Articles.md)\n* [Videos](/docs/Videos.md)\n* [Credits](/docs/Credits.md)\n* [Support us](/README.md#backers)\n* [Feedback](/docs/Feedback.md)\n* [Change Log](https://github.com/zalmoxisus/redux-devtools-extension/releases)\n" }, { "path": "docs/Recipes.md", "content": "# Recipes\n\n### Using in a typescript project\n\nThe recommended way is to use [`redux-devtools-extension` npm package](/README.md#13-use-redux-devtools-extension-package-from-npm), which contains all typescript definitions. Or you can just use `window as any`:\n\n```js\nconst store = createStore(\n rootReducer,\n initialState,\n (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&\n (window as any).__REDUX_DEVTOOLS_EXTENSION__()\n);\n```\nNote that you many need to set `no-any` to false in your `tslint.json` file.\n\nAlternatively you can use typeguard in order to avoid \ncasting to any.\n\n```typescript\nimport { createStore, StoreEnhancer } from \"redux\";\n\n// ... \n\ntype WindowWithDevTools = Window & {\n __REDUX_DEVTOOLS_EXTENSION__: () => StoreEnhancer\n}\n\nconst isReduxDevtoolsExtenstionExist = \n(arg: Window | WindowWithDevTools): \n arg is WindowWithDevTools => {\n return '__REDUX_DEVTOOLS_EXTENSION__' in arg;\n}\n\n// ...\n\nconst store = createStore(rootReducer, initialState,\n isReduxDevtoolsExtenstionExist(window) ? \n window.__REDUX_DEVTOOLS_EXTENSION__() : undefined)\n```\n\n### Export from browser console or from application\n\n```js\nstore.liftedStore.getState()\n```\n\nThe extension is not sharing `store` object, so you should take care of that.\n\n### Applying multiple times with different sets of options\n\nWe're [not allowing that from instrumentation part](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js#L676), because that would re-dispatch every app action in case we'd have many liftedStores, but there's [a helper for logging only](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/logOnly.js), which can be used it like so:\n\n```js\nimport { createStore, compose } from 'redux';\nimport { devToolsEnhancer } from 'redux-devtools-extension/logOnly';\n\nconst store = createStore(reducer, /* preloadedState, */ compose(\ndevToolsEnhancer({\n instaceID: 1,\n name: 'Blacklisted',\n actionsBlacklist: '...'\n}),\ndevToolsEnhancer({\n instaceID: 2,\n name: 'Whitelisted',\n actionsWhitelist: '...'\n})\n));\n```\n" }, { "path": "docs/Troubleshooting.md", "content": "# Troubleshooting\n\n### I just see empty log or \"No store found\"\n\nMake sure you [applied the enhancer](https://github.com/zalmoxisus/redux-devtools-extension#2-use-with-redux). Note that passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like [here](https://github.com/zalmoxisus/redux-devtools-extension/blob/v0.4.2/examples/todomvc/store/configureStore.js) or [here](https://github.com/zalmoxisus/redux-devtools-extension/blob/v0.4.2/examples/counter/store/configureStore.js#L7-L12).\n\nDon't mix the old Redux API with the new one. Pass enhancers and applyMiddleware as last createStore argument.\n\n### Access file url (`file:///`) \n\nIf you develop on your local filesystem, make sure to allow Redux DevTools access to `file:///` URLs in the settings of this extension:\n\n\"extensions\"\n\n### It shows only the `@@INIT` action or moving back and forth doesn't update the state\n\nMost likely you mutate the state. Check it by [adding `redux-immutable-state-invariant` middleware](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/examples/counter/store/configureStore.js#L3).\n\n### @@INIT or REPLACE action resets the state of the app or last actions RE-APPLIED\n\n`@@redux/REPLACE` (or `@@INIT`) is used internally when the application is hot reloaded. When you use `store.replaceReducer` the effect will be the same as for hot-reloading, where the extension is recomputing all the history again. To avoid that set [`shouldHotReload`](/docs/API/Arguments.md#shouldhotreload) parameter to `false`. \n\n### It doesn't work with other store enhancers \n\nUsually the extension's store enhancer should be last in the compose. When you're using [`window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__`](/README.md#12-advanced-store-setup) or [`composeWithDevTools`](/README.md#13-use-redux-devtools-extension-package-from-npm) helper you don't have to worry about the enhancers order. However some enhancers ([like `redux-batched-subscribe`](https://github.com/zalmoxisus/redux-devtools-extension/issues/261)) also have this requirement to be the last in the compose. In this case you can use it like so:\n\n```js\nconst store = createStore(reducer, preloadedState, compose(\n // applyMiddleware(thunk),\n window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : noop => noop,\n batchedSubscribe(/* ... */)\n));\n```\n\nWhere `batchedSubscribe` is `redux-batched-subscribe` store enhancer.\n\n### Excessive use of memory and CPU\n\nThat is happening due to serialization of some huge objects included in the state or action. The solution is to [sanitize them](/docs/API/Arguments.md#actionsanitizer--statesanitizer).\n\nYou can do that by including/omitting data containing specific values, having specific types... In the example below we're omitting parts of action and state objects with the key `data` (in case of action only when was dispatched action `FILE_DOWNLOAD_SUCCESS`):\n\n```js\nconst actionSanitizer = (action) => (\n action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?\n { ...action, data: '<>' } : action\n);\nconst store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n actionSanitizer,\n stateSanitizer: (state) => state.data ? { ...state, data: '<>' } : state\n}));\n```\n\nThere's a more advanced [example on how to implement that for `ui-router`](https://github.com/zalmoxisus/redux-devtools-extension/issues/455#issuecomment-404538385).\n\nThe extension is in different process and cannot access the store object directly, unlike vanilla [`redux-devtools`](https://github.com/reduxjs/redux-devtools) which doesn't have this issue. In case sanitizing doesn't fit your use case, you might consider including it directly as a react component, so there will be no need to serialize the data, but it would add some complexity.\n\n### It fails to serialize data when [passing synthetic events](https://github.com/zalmoxisus/redux-devtools-extension/issues/275) or [calling an action directly with `redux-actions`](https://github.com/zalmoxisus/redux-devtools-extension/issues/287)\n\nReact synthetic event cannot be reused for performance reason. So, it's not possible to serialize event objects you pass to action payloads.\n \n1. The best solution is **not to pass the whole event object to reducers, but the data you need**:\n ```diff\n function click(event) {\n return {\n type: ELEMENT_CLICKED,\n - event: event\n + value: event.target.value\n };\n }\n ```\n\n2. If you cannot pick data from the event object or, for some reason, you need the whole object, use `event.persist()` as suggested in [React Docs](https://facebook.github.io/react/docs/events.html#event-pooling), but it will consume RAM while not needed.\n \n ```diff\n function increment(event) {\n + event.persist();\n return {\n type: ELEMENT_CLICKED,\n event: event,\n };\n }\n ```\n\n3. A workaround, to pass the whole object and at the same time not to persist it, is to override this key of the stringified payload in your action creator. Add a custom `toJSON` function right in the action object (which will be called by the extension before accessing the object):\n \n ```diff\n function increment(event) {\n return {\n type: ELEMENT_CLICKED,\n event: event,\n + toJSON: function (){\n + return { ...this, event: '[Event]' };\n + }\n };\n }\n ```\n Note that it shouldn't be arrow function as we want to have access to the function's `this`.\n \n As we don't have access to the original object, skipping and recomputing actions during hot reloading will not work in this case. We recommend to use the first solution whenever possible.\n\n### Symbols or other unserializable data not shown \n\nTo get data which cannot be serialized by `JSON.stringify`, set [`serialize` parameter](/docs/API/Arguments.md#serialize):\n```js\nconst store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: true\n}));\n```\n\nIt will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.\n" }, { "path": "docs/Videos.md", "content": "# Videos\n\n- [Debugging flux applications in production at React Europe 2016](https://youtu.be/YU8jQ2HtqH4)\n- [Hot Reloading with Time Travel at React Europe 2015](https://youtu.be/xsSnOQynTHs)\n- [Getting Started with Redux DevTools Extension](https://egghead.io/lessons/javascript-getting-started-with-redux-dev-tools)\n- [React & Redux With ExpressJS](https://www.youtube.com/watch?v=6ygcbRpZFR4)\n" }, { "path": "examples/buildAll.js", "content": "/**\n * Runs an ordered set of commands within each of the build directories.\n */\n\nimport fs from 'fs';\nimport path from 'path';\nimport { spawnSync } from 'child_process';\n\nvar exampleDirs = fs.readdirSync(__dirname).filter((file) => {\n return fs.statSync(path.join(__dirname, file)).isDirectory();\n});\n\n// Ordering is important here. `npm install` must come first.\nvar cmdArgs = [\n { cmd: 'npm', args: ['install'] },\n { cmd: 'webpack', args: ['index.js'] }\n];\n\nfor (const dir of exampleDirs) {\n for (const cmdArg of cmdArgs) {\n // declare opts in this scope to avoid https://github.com/joyent/node/issues/9158\n const opts = {\n cwd: path.join(__dirname, dir),\n stdio: 'inherit'\n };\n let result = {};\n if (process.platform === 'win32') {\n result = spawnSync(cmdArg.cmd + '.cmd', cmdArg.args, opts);\n } else {\n result = spawnSync(cmdArg.cmd, cmdArg.args, opts);\n }\n if (result.status !== 0) {\n throw new Error('Building examples exited with non-zero');\n }\n }\n}\n" }, { "path": "examples/counter/.babelrc", "content": "{\n \"presets\": [ \"es2015\", \"stage-0\", \"react\" ]\n}\n" }, { "path": "examples/counter/actions/counter.js", "content": "export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';\nexport const DECREMENT_COUNTER = 'DECREMENT_COUNTER';\n\nlet t;\n\nexport function increment() {\n return {\n type: INCREMENT_COUNTER\n };\n}\n\nexport function decrement() {\n return {\n type: DECREMENT_COUNTER\n };\n}\n\nexport function autoIncrement(delay = 10) {\n return dispatch => {\n if (t) {\n clearInterval(t);\n t = undefined;\n return;\n }\n t = setInterval(() => {\n dispatch(increment());\n }, delay);\n };\n}\n\nexport function incrementAsync(delay = 1000) {\n return dispatch => {\n setTimeout(() => {\n dispatch(increment());\n }, delay);\n };\n}\n" }, { "path": "examples/counter/components/Counter.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass Counter extends Component {\n render() {\n const { increment, autoIncrement, incrementAsync, decrement, counter } = this.props;\n return (\n

\n Clicked: {counter} times\n {' '}\n \n {' '}\n \n {' '}\n \n {' '}\n \n

\n );\n }\n}\n\nCounter.propTypes = {\n increment: PropTypes.func.isRequired,\n autoIncrement: PropTypes.func.isRequired,\n incrementAsync: PropTypes.func.isRequired,\n decrement: PropTypes.func.isRequired,\n counter: PropTypes.number.isRequired\n};\n\nexport default Counter;\n" }, { "path": "examples/counter/containers/App.js", "content": "import { bindActionCreators } from 'redux';\nimport { connect } from 'react-redux';\nimport Counter from '../components/Counter';\nimport * as CounterActions from '../actions/counter';\n\nfunction mapStateToProps(state) {\n return {\n counter: state.counter\n };\n}\n\nfunction mapDispatchToProps(dispatch) {\n return bindActionCreators(CounterActions, dispatch);\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);\n" }, { "path": "examples/counter/index.html", "content": "\n\n \n Redux counter example\n \n \n
\n
\n \n \n\n" }, { "path": "examples/counter/index.js", "content": "import React from 'react';\nimport { render } from 'react-dom';\nimport { Provider } from 'react-redux';\nimport App from './containers/App';\nimport configureStore from './store/configureStore';\n\nconst store = configureStore();\n\nrender(\n \n \n ,\n document.getElementById('root')\n);\n" }, { "path": "examples/counter/package.json", "content": "{\n \"name\": \"redux-counter-example\",\n \"version\": \"0.0.0\",\n \"description\": \"Redux counter example\",\n \"scripts\": {\n \"start\": \"node server.js\",\n \"test\": \"NODE_ENV=test mocha --recursive --compilers js:babel-core/register --require ./test/setup.js\",\n \"test:watch\": \"npm test -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/rackt/redux.git\"\n },\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/rackt/redux/issues\"\n },\n \"homepage\": \"http://rackt.github.io/redux\",\n \"dependencies\": {\n \"prop-types\": \"^15.6.2\",\n \"react\": \"^16.7.0\",\n \"react-dom\": \"^16.7.0\",\n \"react-redux\": \"^6.0.0\",\n \"redux\": \"^4.0.1\",\n \"redux-devtools-extension\": \"^2.13.7\",\n \"redux-thunk\": \"^2.3.0\"\n },\n \"devDependencies\": {\n \"babel-cli\": \"^6.3.17\",\n \"babel-core\": \"^6.3.17\",\n \"babel-loader\": \"^7.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"babel-preset-react\": \"6.3.13\",\n \"babel-preset-stage-0\": \"^6.3.13\",\n \"express\": \"^4.13.3\",\n \"redux-immutable-state-invariant\": \"^2.1.0\",\n \"webpack\": \"^4.0.0\",\n \"webpack-dev-server\": \"^3.0.0\",\n \"webpack-hot-middleware\": \"^2.2.0\"\n }\n}\n" }, { "path": "examples/counter/reducers/counter.js", "content": "import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/counter';\n\nexport default function counter(state = 0, action) {\n switch (action.type) {\n case INCREMENT_COUNTER:\n return state + 1;\n case DECREMENT_COUNTER:\n return state - 1;\n default:\n return state;\n }\n}\n" }, { "path": "examples/counter/reducers/index.js", "content": "import { combineReducers } from 'redux';\nimport counter from './counter';\n\nconst rootReducer = combineReducers({\n counter\n});\n\nexport default rootReducer;\n" }, { "path": "examples/counter/server.js", "content": "var webpack = require('webpack');\nvar webpackDevMiddleware = require('webpack-dev-middleware');\nvar webpackHotMiddleware = require('webpack-hot-middleware');\nvar config = require('./webpack.config');\n\nvar app = new require('express')();\nvar port = 4001;\n\nvar compiler = webpack(config);\napp.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));\napp.use(webpackHotMiddleware(compiler));\n\napp.get(\"/\", function(req, res) {\n res.sendFile(__dirname + '/index.html');\n});\n\napp.listen(port, function(error) {\n if (error) {\n console.error(error);\n } else {\n console.info(\"==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.\", port, port);\n }\n});\n" }, { "path": "examples/counter/store/configureStore.js", "content": "import { createStore, applyMiddleware, compose } from 'redux';\nimport { composeWithDevTools } from 'redux-devtools-extension';\nimport thunk from 'redux-thunk';\nimport invariant from 'redux-immutable-state-invariant';\nimport reducer from '../reducers';\nimport * as actionCreators from '../actions/counter'; \n\nexport default function configureStore(preloadedState) {\n const composeEnhancers = composeWithDevTools({ actionCreators, trace: true, traceLimit: 25 });\n const store = createStore(reducer, preloadedState, composeEnhancers(\n applyMiddleware(invariant(), thunk)\n ));\n\n if (module.hot) {\n // Enable Webpack hot module replacement for reducers\n module.hot.accept('../reducers', () => {\n store.replaceReducer(require('../reducers').default)\n });\n }\n\n return store;\n}\n" }, { "path": "examples/counter/test/actions/counter.spec.js", "content": "import expect from 'expect';\nimport { applyMiddleware } from 'redux';\nimport thunk from 'redux-thunk';\nimport * as actions from '../../actions/counter';\n\nconst middlewares = [thunk];\n\n/*\n * Creates a mock of Redux store with middleware.\n */\nfunction mockStore(getState, expectedActions, onLastAction) {\n if (!Array.isArray(expectedActions)) {\n throw new Error('expectedActions should be an array of expected actions.');\n }\n if (typeof onLastAction !== 'undefined' && typeof onLastAction !== 'function') {\n throw new Error('onLastAction should either be undefined or function.');\n }\n\n function mockStoreWithoutMiddleware() {\n return {\n getState() {\n return typeof getState === 'function' ?\n getState() :\n getState;\n },\n\n dispatch(action) {\n const expectedAction = expectedActions.shift();\n expect(action).toEqual(expectedAction);\n if (onLastAction && !expectedActions.length) {\n onLastAction();\n }\n return action;\n }\n };\n }\n\n const mockStoreWithMiddleware = applyMiddleware(\n ...middlewares\n )(mockStoreWithoutMiddleware);\n\n return mockStoreWithMiddleware();\n}\n\ndescribe('actions', () => {\n it('increment should create increment action', () => {\n expect(actions.increment()).toEqual({ type: actions.INCREMENT_COUNTER });\n });\n\n it('decrement should create decrement action', () => {\n expect(actions.decrement()).toEqual({ type: actions.DECREMENT_COUNTER });\n });\n\n it('incrementIfOdd should create increment action', (done) => {\n const expectedActions = [\n { type: actions.INCREMENT_COUNTER }\n ];\n const store = mockStore({ counter: 1 }, expectedActions, done);\n store.dispatch(actions.incrementIfOdd());\n });\n\n it('incrementIfOdd shouldnt create increment action if counter is even', (done) => {\n const expectedActions = [];\n const store = mockStore({ counter: 2 }, expectedActions);\n store.dispatch(actions.incrementIfOdd());\n done();\n });\n\n it('incrementAsync should create increment action', (done) => {\n const expectedActions = [\n { type: actions.INCREMENT_COUNTER }\n ];\n const store = mockStore({ counter: 0 }, expectedActions, done);\n store.dispatch(actions.incrementAsync(100));\n });\n});\n" }, { "path": "examples/counter/test/components/Counter.spec.js", "content": "import expect from 'expect';\nimport React from 'react';\nimport TestUtils from 'react-addons-test-utils';\nimport Counter from '../../components/Counter';\n\nfunction setup() {\n const actions = {\n increment: expect.createSpy(),\n incrementIfOdd: expect.createSpy(),\n incrementAsync: expect.createSpy(),\n decrement: expect.createSpy()\n };\n const component = TestUtils.renderIntoDocument();\n return {\n component: component,\n actions: actions,\n buttons: TestUtils.scryRenderedDOMComponentsWithTag(component, 'button'),\n p: TestUtils.findRenderedDOMComponentWithTag(component, 'p')\n };\n}\n\ndescribe('Counter component', () => {\n it('should display count', () => {\n const { p } = setup();\n expect(p.textContent).toMatch(/^Clicked: 1 times/);\n });\n\n it('first button should call increment', () => {\n const { buttons, actions } = setup();\n TestUtils.Simulate.click(buttons[0]);\n expect(actions.increment).toHaveBeenCalled();\n });\n\n it('second button should call decrement', () => {\n const { buttons, actions } = setup();\n TestUtils.Simulate.click(buttons[1]);\n expect(actions.decrement).toHaveBeenCalled();\n });\n\n it('third button should call incrementIfOdd', () => {\n const { buttons, actions } = setup();\n TestUtils.Simulate.click(buttons[2]);\n expect(actions.incrementIfOdd).toHaveBeenCalled();\n });\n\n it('fourth button should call incrementAsync', () => {\n const { buttons, actions } = setup();\n TestUtils.Simulate.click(buttons[3]);\n expect(actions.incrementAsync).toHaveBeenCalled();\n });\n});\n" }, { "path": "examples/counter/test/containers/App.spec.js", "content": "import expect from 'expect';\nimport React from 'react';\nimport TestUtils from 'react-addons-test-utils';\nimport { Provider } from 'react-redux';\nimport App from '../../containers/App';\nimport configureStore from '../../store/configureStore';\n\nfunction setup(initialState) {\n const store = configureStore(initialState);\n const app = TestUtils.renderIntoDocument(\n \n \n \n );\n return {\n app: app,\n buttons: TestUtils.scryRenderedDOMComponentsWithTag(app, 'button'),\n p: TestUtils.findRenderedDOMComponentWithTag(app, 'p')\n };\n}\n\ndescribe('containers', () => {\n describe('App', () => {\n it('should display initial count', () => {\n const { p } = setup();\n expect(p.textContent).toMatch(/^Clicked: 0 times/);\n });\n\n it('should display updated count after increment button click', () => {\n const { buttons, p } = setup();\n TestUtils.Simulate.click(buttons[0]);\n expect(p.textContent).toMatch(/^Clicked: 1 times/);\n });\n\n it('should display updated count after decrement button click', () => {\n const { buttons, p } = setup();\n TestUtils.Simulate.click(buttons[1]);\n expect(p.textContent).toMatch(/^Clicked: -1 times/);\n });\n\n it('shouldnt change if even and if odd button clicked', () => {\n const { buttons, p } = setup();\n TestUtils.Simulate.click(buttons[2]);\n expect(p.textContent).toMatch(/^Clicked: 0 times/);\n });\n\n it('should change if odd and if odd button clicked', () => {\n const { buttons, p } = setup({ counter: 1 });\n TestUtils.Simulate.click(buttons[2]);\n expect(p.textContent).toMatch(/^Clicked: 2 times/);\n });\n });\n});\n" }, { "path": "examples/counter/test/reducers/counter.spec.js", "content": "import expect from 'expect';\nimport counter from '../../reducers/counter';\nimport { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../../actions/counter';\n\ndescribe('reducers', () => {\n describe('counter', () => {\n it('should handle initial state', () => {\n expect(counter(undefined, {})).toBe(0);\n });\n\n it('should handle INCREMENT_COUNTER', () => {\n expect(counter(1, { type: INCREMENT_COUNTER })).toBe(2);\n });\n\n it('should handle DECREMENT_COUNTER', () => {\n expect(counter(1, { type: DECREMENT_COUNTER })).toBe(0);\n });\n\n it('should handle unknown action type', () => {\n expect(counter(1, { type: 'unknown' })).toBe(1);\n });\n });\n});\n" }, { "path": "examples/counter/test/setup.js", "content": "import { jsdom } from 'jsdom';\n\nglobal.document = jsdom('');\nglobal.window = document.defaultView;\nglobal.navigator = global.window.navigator;\n" }, { "path": "examples/counter/webpack.config.js", "content": "var path = require('path');\nvar webpack = require('webpack');\n\nmodule.exports = {\n mode: 'development',\n devtool: 'source-map',\n entry: [\n 'webpack-hot-middleware/client',\n './index'\n ],\n output: {\n path: path.join(__dirname, 'dist'),\n filename: 'bundle.js',\n publicPath: '/static/'\n },\n plugins: [\n new webpack.HotModuleReplacementPlugin()\n ],\n module: {\n rules: [{\n test: /\\.js$/,\n loaders: ['babel-loader'],\n exclude: /node_modules/\n }]\n }\n};\n" }, { "path": "examples/react-counter-messaging/.babelrc", "content": "{\n \"presets\": [ \"es2015\", \"stage-0\", \"react\" ]\n}\n" }, { "path": "examples/react-counter-messaging/components/Counter.js", "content": "import React, { Component } from 'react';\n\nconst withDevTools = (\n // process.env.NODE_ENV === 'development' &&\n typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__\n);\n\nclass Counter extends Component {\n constructor() {\n super();\n this.state = { counter: 0 };\n \n this.increment = this.increment.bind(this);\n this.decrement = this.decrement.bind(this);\n }\n\n componentWillMount() {\n if (withDevTools) {\n this.devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect();\n this.unsubscribe = this.devTools.subscribe((message) => {\n // Implement monitors actions.\n // For example time traveling:\n if (message.type === 'DISPATCH' && message.payload.type === 'JUMP_TO_STATE') {\n this.setState(message.state);\n }\n });\n }\n }\n\n componentWillUnmount() {\n if (withDevTools) {\n this.unsubscribe(); // Use if you have other subscribers from other components.\n window.__REDUX_DEVTOOLS_EXTENSION__.disconnect(); // If there aren't other subscribers.\n }\n }\n\n increment() {\n const state = { counter: this.state.counter + 1 };\n if (withDevTools) this.devTools.send('increment', state);\n this.setState(state);\n }\n\n decrement() {\n const state = { counter: this.state.counter - 1 };\n if (withDevTools) this.devTools.send('decrement', state);\n this.setState(state);\n }\n\n render() {\n const { counter } = this.state;\n return (\n

\n Clicked: {counter} times\n {' '}\n \n {' '}\n \n

\n );\n }\n}\n\nexport default Counter;\n" }, { "path": "examples/react-counter-messaging/index.html", "content": "\n\n \n React counter example\n \n \n
\n
\n \n \n\n" }, { "path": "examples/react-counter-messaging/index.js", "content": "import React from 'react';\nimport { render } from 'react-dom';\nimport Counter from './components/Counter';\n\nrender(\n ,\n document.getElementById('root')\n);\n" }, { "path": "examples/react-counter-messaging/package.json", "content": "{\n \"name\": \"react-counter-example\",\n \"version\": \"0.0.0\",\n \"description\": \"React counter example\",\n \"scripts\": {\n \"start\": \"webpack-dev-server --progress\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/zalmoxisus/redux-devtools-extension.git\"\n },\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/zalmoxisus/redux-devtools-extension/issues\"\n },\n \"homepage\": \"https://github.com/zalmoxisus/redux-devtools-extension\",\n \"dependencies\": {\n \"react\": \"^16.0.0\",\n \"react-dom\": \"^16.0.0\"\n },\n \"devDependencies\": {\n \"babel-cli\": \"^6.3.17\",\n \"babel-core\": \"^6.3.17\",\n \"babel-loader\": \"^7.0.0\",\n \"babel-preset-es2015\": \"^6.0.0\",\n \"babel-preset-react\": \"6.3.13\",\n \"babel-preset-stage-0\": \"^6.3.13\",\n \"webpack\": \"^4.0.0\",\n \"webpack-cli\": \"^3.2.0\",\n \"webpack-dev-server\": \"^3.0.0\",\n \"webpack-hot-middleware\": \"^2.2.0\"\n }\n}\n" }, { "path": "examples/react-counter-messaging/webpack.config.js", "content": "var path = require('path');\nvar webpack = require('webpack');\n\nmodule.exports = {\n mode: 'development',\n devtool: 'source-map',\n entry: [\n './index'\n ],\n output: {\n path: path.join(__dirname, 'dist'),\n filename: 'bundle.js',\n publicPath: '/static/'\n },\n module: {\n rules: [{\n test: /\\.js$/,\n loaders: ['babel-loader'],\n exclude: /node_modules/\n }]\n },\n devServer: {\n port: 4004\n }\n};\n" }, { "path": "examples/router/.babelrc", "content": "{\n \"presets\": [ \"es2015\", \"stage-0\", \"react\" ],\n \"plugins\": [ \"add-module-exports\", \"transform-decorators-legacy\" ]\n}" }, { "path": "examples/router/actions/todos.js", "content": "import * as types from '../constants/ActionTypes';\n\nexport function addTodo(text) {\n return { type: types.ADD_TODO, text };\n}\n\nexport function deleteTodo(id) {\n return { type: types.DELETE_TODO, id };\n}\n\nexport function editTodo(id, text) {\n return { type: types.EDIT_TODO, id, text };\n}\n\nexport function completeTodo(id) {\n return { type: types.COMPLETE_TODO, id };\n}\n\nexport function completeAll() {\n return { type: types.COMPLETE_ALL };\n}\n\nexport function clearCompleted() {\n return { type: types.CLEAR_COMPLETED };\n}\n" }, { "path": "examples/router/components/Footer.js", "content": "import React, { PropTypes, Component } from 'react';\nimport classnames from 'classnames';\nimport { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';\n\nconst FILTER_TITLES = {\n [SHOW_ALL]: 'All',\n [SHOW_ACTIVE]: 'Active',\n [SHOW_COMPLETED]: 'Completed'\n};\n\nclass Footer extends Component {\n renderTodoCount() {\n const { activeCount } = this.props;\n const itemWord = activeCount === 1 ? 'item' : 'items';\n\n return (\n \n {activeCount || 'No'} {itemWord} left\n \n );\n }\n\n renderFilterLink(filter) {\n const title = FILTER_TITLES[filter];\n const { filter: selectedFilter, onShow } = this.props;\n\n return (\n onShow(filter)}>\n {title}\n \n );\n }\n\n renderClearButton() {\n const { completedCount, onClearCompleted } = this.props;\n if (completedCount > 0) {\n return (\n \n );\n }\n }\n\n render() {\n return (\n
\n {this.renderTodoCount()}\n
    \n {[SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED].map(filter =>\n
  • \n {this.renderFilterLink(filter)}\n
    • \n )}\n
\n {this.renderClearButton()}\n
\n );\n }\n}\n\nFooter.propTypes = {\n completedCount: PropTypes.number.isRequired,\n activeCount: PropTypes.number.isRequired,\n filter: PropTypes.string.isRequired,\n onClearCompleted: PropTypes.func.isRequired,\n onShow: PropTypes.func.isRequired\n};\n\nexport default Footer;\n" }, { "path": "examples/router/components/Header.js", "content": "import React, { PropTypes, Component } from 'react';\nimport TodoTextInput from './TodoTextInput';\n\nclass Header extends Component {\n handleSave(text) {\n if (text.length !== 0) {\n this.props.addTodo(text);\n }\n }\n\n render() {\n const { path } = this.props;\n return (\n
\n

{path}

\n \n
\n );\n }\n}\n\nHeader.propTypes = {\n addTodo: PropTypes.func.isRequired\n};\n\nexport default Header;\n" }, { "path": "examples/router/components/MainSection.js", "content": "import React, { Component, PropTypes } from 'react';\nimport TodoItem from './TodoItem';\nimport Footer from './Footer';\nimport { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';\n\nconst TODO_FILTERS = {\n [SHOW_ALL]: () => true,\n [SHOW_ACTIVE]: todo => !todo.completed,\n [SHOW_COMPLETED]: todo => todo.completed\n};\n\nclass MainSection extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = { filter: SHOW_ALL };\n }\n\n handleClearCompleted() {\n const atLeastOneCompleted = this.props.todos.some(todo => todo.completed);\n if (atLeastOneCompleted) {\n this.props.actions.clearCompleted();\n }\n }\n\n handleShow(filter) {\n this.setState({ filter });\n }\n\n renderToggleAll(completedCount) {\n const { todos, actions } = this.props;\n if (todos.length > 0) {\n return (\n \n );\n }\n }\n\n renderFooter(completedCount) {\n const { todos } = this.props;\n const { filter } = this.state;\n const activeCount = todos.length - completedCount;\n\n if (todos.length) {\n return (\n