[ { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@1.6.4/schema.json\",\n \"changelog\": \"@changesets/cli/changelog\",\n \"commit\": false,\n \"linked\": [],\n \"access\": \"public\",\n \"baseBranch\": \"main\",\n \"updateInternalDependencies\": \"patch\",\n \"ignore\": [],\n \"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH\": {\n \"onlyUpdatePeerDependentsWhenOutOfRange\": true\n }\n}\n" }, { "path": ".eslintignore", "content": "*.log\n.idea\nlib\ndist\numd\nbuild\ncoverage\nnode_modules\n__snapshots__\nstorybook-static\n.vscode/*\n" }, { "path": ".gitattributes", "content": "* text=auto eol=lf\n" }, { "path": ".github/FUNDING.yml", "content": "github: Methuselah96\nopen_collective: redux-devtools-extension\n" }, { "path": ".github/workflows/CI.yml", "content": "name: CI\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n build:\n runs-on: 'ubuntu-24.04'\n\n steps:\n - uses: actions/checkout@v6\n - uses: pnpm/action-setup@v5\n - uses: actions/setup-node@v6\n with:\n node-version: 'lts/*'\n cache: 'pnpm'\n - name: Install dependencies\n run: pnpm install\n - name: Check formatting\n run: pnpm run format:check\n - name: Build\n run: pnpm run build:all\n - name: Lint\n run: pnpm run lint:all\n - run: sudo sysctl -w kernel.apparmor_restrict_unprivileged_userns=0\n - name: Test\n uses: coactions/setup-xvfb@v1\n with:\n run: pnpm run test:all\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches:\n - main\n\npermissions: write-all\n\njobs:\n release:\n name: Release\n runs-on: 'ubuntu-24.04'\n steps:\n - name: Checkout Repo\n uses: actions/checkout@v6\n with:\n # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits\n fetch-depth: 0\n\n - uses: pnpm/action-setup@v5\n\n - name: Setup Node.js\n uses: actions/setup-node@v6\n with:\n node-version: 'lts/*'\n cache: 'pnpm'\n\n - name: Install Dependencies\n run: pnpm install\n\n - name: Create Release Pull Request or Publish to npm\n id: changesets\n uses: changesets/action@v1\n with:\n version: pnpm changeset version\n publish: pnpm run release\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n\n - name: Archive Chrome Extension\n uses: actions/upload-artifact@v7\n with:\n name: chrome\n path: extension/chrome/dist\n\n - name: Archive Edge Extension\n uses: actions/upload-artifact@v7\n with:\n name: edge\n path: extension/edge/dist\n\n - name: Archive Firefox Extension\n uses: actions/upload-artifact@v7\n with:\n name: firefox\n path: extension/firefox/dist\n" }, { "path": ".gitignore", "content": "node_modules\n*.log\n.DS_Store\nlib\ndist\numd\nbuild\ncoverage\n.idea\n.eslintcache\n!packages/redux-devtools-slider-monitor/examples/todomvc/dist/index.html\n.nx\n*.tsbuildinfo\n" }, { "path": ".prettierignore", "content": "*.log\n.idea\nlib\ndist\numd\nbuild\ncoverage\nnode_modules\n__snapshots__\ndev\n**/demo/public/**\nstorybook-static\n.vscode/*\npnpm-lock.yaml\n" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true\n}\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Code of Conduct\n\nAs contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.\n\nWe are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.\n\nExamples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.\n\nThis Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)\n" }, { "path": "LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015-present Dan Abramov\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.\n" }, { "path": "README.md", "content": "![GitHub Workflow Status](https://img.shields.io/github/workflow/status/reduxjs/redux-devtools/CI)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=round-square)](https://github.com/reduxjs/redux-devtools/pulls)\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# Redux DevTools\n\nDeveloper Tools to power-up [Redux](https://redux.js.org/) development workflow or any other architecture which handles the state change (see [integrations](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/Integrations.md)).\n\nIt can be used as a browser extension (for [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd), [Edge](https://microsoftedge.microsoft.com/addons/detail/redux-devtools/nnkgneoiohoecpdiaponcejilbhhikei) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/)), as [a standalone app](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-app) or as [a React component](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools) integrated in the client app.\n\n![image](https://user-images.githubusercontent.com/7957859/48663602-3aac4900-ea9b-11e8-921f-97059cbb599c.png)\n\n## Documentation\n\n- [Browser Extension Installation and Configuration](https://github.com/reduxjs/redux-devtools/tree/main/extension#installation)\n- [Manual Integration as a React Component](./docs/Walkthrough.md#manual-integration)\n- [Extension Options (Arguments)](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md)\n- [Extension Methods (Advanced API)](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Methods.md)\n- [Remote monitoring](./docs/Integrations/Remote.md)\n- [Troubleshooting](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/Troubleshooting.md)\n- [Recipes](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/Recipes.md)\n- [FAQ](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/FAQ.md)\n\n## Development\n\nThis is a monorepo powered by [pnpm](https://pnpm.io/). [Install pnpm](https://pnpm.io/installation) and run `pnpm install` to get started. Each package's dependencies need to be built before the package itself can be built. You can either build all the packages (i.e., `pnpm run build:all`) or use pnpm workspace commands to build only the packages necessary for the packages you're working on (i.e., `pnpm --filter \"remotedev-redux-devtools-extension\" build`).\n\n## Backers\n\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## Sponsors\n\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" }, { "path": "docs/Integrations/Remote.md", "content": "## Remote monitoring\n\nBy installing [`@redux-devtools/cli`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-cli#usage), starting the server server and launching the Redux DevTools app (`redux-devtools --open`), you can connect any remote application, even not javascript. There are some integrations for javascript like [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) and [remotedev](https://github.com/zalmoxisus/remotedev), but the plan is to deprecate them and support it out of the box from the extension without a websocket server. It is more useful for non-js apps.\n\n### WebSocket Clients\n\nWe're using [SocketCluster](http://socketcluster.io/) for realtime communication, which provides a fast and scalable webSocket layer and a minimal pub/sub system. You need to include one of [its clients](https://github.com/SocketCluster/client-drivers) in your app to communicate with RemotedevServer. Currently there are clients for [JavaScript (NodeJS)](https://github.com/SocketCluster/socketcluster-client), [Java](https://github.com/sacOO7/socketcluster-client-java), [Python](https://github.com/sacOO7/socketcluster-client-python), [C](https://github.com/sacOO7/socketcluster-client-C), [Objective-C](https://github.com/abpopov/SocketCluster-ios-client) and [.NET/C#](https://github.com/sacOO7/SocketclusterClientDotNet).\n\nBy default, the websocket server is running on `ws://localhost:8000/socketcluster/`.\n\n### Messaging lifecycle\n\n#### 1. Connecting to the WebSocket server\n\nThe client driver provides a way to connect to the server via websockets (see the docs for the selected client).\n\n##### JavaScript\n\n```js\nvar socket = socketCluster.connect({\n hostname: 'localhost',\n port: 8000,\n});\n```\n\n##### Python\n\n```py\nsocket = Socketcluster.socket(\"ws://localhost:8000/socketcluster/\")\nsocket.connect()\n```\n\n> Note that JavaScript client composes the url from `hostname` and `port`, adding `/socketcluster/` path automatically. For other clients, you should specify that path. For example, for `ObjectiveC` it would be `self.client.initWithHost(\"localhost/socketcluster/\", onPort: 8000, securely: false)`.\n\n#### 2. Disconnecting and reconnecting\n\nSocketCluster client handles reconnecting for you, but you still might want to know when the connection is established, or when it failed to connect.\n\n##### JavaScript\n\n```js\nsocket.on('connect', (status) => {\n // Here will come the next step\n});\nsocket.on('disconnect', (code) => {\n console.warn('Socket disconnected with code', code);\n});\nsocket.on('error', (error) => {\n console.warn('Socket error', error);\n});\n```\n\n##### Python\n\n```py\ndef onconnect(socket):\n // Here will call the next step\n\ndef ondisconnect(socket):\n logging.info(\"on disconnect got called\")\n\ndef onConnectError(socket, error):\n logging.info(\"On connect error got called\")\n\nsocket.setBasicListener(onconnect, ondisconnect, onConnectError)\n```\n\n#### 3. Authorizing and subscribing to the channel of events\n\nWe're not providing an authorizing mechanism yet. All you have to do is to emit a `login` event, and you'll get a `channelName` you should subscribe for, and watch for messages and events. Make sure to pass the `master` event, otherwise it should be a monitor, not a client app.\n\n##### JavaScript\n\n```js\nsocket.emit('login', 'master', (error, channelName) => {\n if (error) {\n console.log(error);\n return;\n }\n channel = socket.subscribe(channelName);\n channel.watch(handleMessages);\n socket.on(channelName, handleMessages);\n});\n\nfunction handleMessages(message) {\n // 5. Listening for monitor events\n}\n```\n\n##### Python\n\n```py\nsocket.emitack(\"login\", \"master\", login)\n\ndef login(key, error, channelName):\n socket.subscribe(channelName)\n socket.onchannel(channelName, handleMessages)\n socket.on(channelName, handleMessages)\n\ndef handleMessages(key, message):\n // 5. Listening for monitor events\n```\n\nYou could just emit the `login` event, and omit subscribing (and point `5` bellow) if you want only to log data, not to interact with te app.\n\n#### 4. Sending the action and state to the monitor\n\nTo send your data to the monitor use `log` or `log-noid` channel. The latter will add the socket id to the message from the server side (useful when the message was sent before the connection was established).\n\nThe message object includes the following:\n\n- `type` - usually should be `ACTION`. If you want to indicate that we're starting a new log (clear all actions emitted before and add `@@INIT`), use `INIT`. In case you have a lifted state similar to one provided by [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument), use `STATE`.\n- `action` - the action object. It is recommended to lift it in another object, and add `timestamp` to show when the action was fired off: `{ timestamp: Date.now(), action: { type: 'SOME_ACTION' } }`.\n- `payload` - usually the state or lifted state object.\n- `name` - name of the instance to be shown in the instances selector. If not provided, it will be equal to `instanceId`.\n- `instanceId` - an id to identify the instance. If not provided, it will be the same as `id`. However, it is useful when having several instances (or stores) in the same connection. Also if the user will specify a constant value, it would allow to persist the state on app reload.\n- `id` - socket connection id, which should be either `socket.id` or should not provided and use `log-noid` channel.\n\n##### JavaScript\n\n```js\nconst message = {\n type: 'ACTION',\n action: { action, timestamp: Date.now() },\n payload: state,\n id: socket.id,\n instanceId: window.btoa(location.href),\n name: document.title,\n};\nsocket.emit(socket.id ? 'log' : 'log-noid', message);\n```\n\n##### Python\n\n```py\nclass Message:\n def __init__(self, action, state):\n self.type = \"ACTION\"\n self.action = action\n self.payload = state\n id: socket.id\nsocket.emit(socket.id if \"log\" else \"log-noid\", Message(action, state));\n```\n\n#### 5. Listening for monitor events\n\nWhen a monitor action is emitted, you'll get an event on the subscribed function. The argument object includes a `type` key, which can be:\n\n- `DISPATCH` - a monitor action dispatched on Redux DevTools monitor, like `{ type: 'DISPATCH', payload: { type: 'JUMP_TO_STATE', 'index': 2 }`. See [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js) for details. Additionally to that API, you'll get also a stringified `state` object when needed. So, for example, for time travelling (`JUMP_TO_STATE`) you can just parse and set the state (see the example). Usually implementing this type of actions would be enough.\n- `ACTION` - the user requested to dispatch an action remotely like `{ type: 'ACTION', action: '{ type: \\'INCREMENT_COUNTER\\' }' }`. The `action` can be either a stringified javascript object which should be evalled or a function which arguments should be evalled like [here](https://github.com/zalmoxisus/remotedev-utils/blob/master/src/index.js#L62-L70).\n- `START` - a monitor was opened. You could handle this event in order not to do extra tasks when the app is not monitored.\n- `STOP` - a monitor was closed. You can take this as no need to send data to the monitor. I there are several monitors and one was closed, all others will send `START` event to acknowledge that we still have to send data.\n\nSee [`mobx-remotedev`](https://github.com/zalmoxisus/mobx-remotedev/blob/master/src/monitorActions.js) for an example of implementation without [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js).\n\n##### JavaScript\n\n```js\nfunction handleMessages(message) {\n if (message.type === 'DISPATCH' && message.payload.type === 'JUMP_TO_STATE') {\n store.setState(JSON.parse(message.state));\n }\n}\n```\n\n##### Python\n\n```py\ndef handleMessages(key, message):\n if message.type === \"DISPATCH\" and message.payload.type === \"JUMP_TO_STATE\":\n store.setState(json.loads(message.state));\n```\n" }, { "path": "docs/Walkthrough.md", "content": "# Walkthrough\n\n## Browser Extension\n\nIf you don’t want to bother with installing Redux DevTools and integrating it into your project, consider using [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools/tree/master/extension) for Chrome and Firefox. It provides access to the most popular monitors, is easy to configure to filter actions, and doesn’t require installing any packages.\n\n## Manual Integration\n\nIf you want to have full control over where DevTools are displayed, or are developing a custom monitor, you will probably want to integrate them manually.\nIt’s more steps, but you will have full control over monitors and their configuration.\n\n### Installation\n\n```\nnpm install --save-dev @redux-devtools/core\n```\n\nYou’ll also likely want to install some monitors:\n\n```\nnpm install --save-dev @redux-devtools/log-monitor\nnpm install --save-dev @redux-devtools/dock-monitor\n```\n\n### Usage\n\n#### Create a `DevTools` Component\n\nSomewhere in your project, create a `DevTools` component by passing a `monitor` element to `createDevTools`. In the following example our `monitor` consists of [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) docked within [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor):\n\n##### `containers/DevTools.js`\n\n```js\nimport React from 'react';\n\n// Exported from redux-devtools\nimport { createDevTools } from '@redux-devtools/core';\n\n// Monitors are separate packages, and you can make a custom one\nimport LogMonitor from '@redux-devtools/log-monitor';\nimport DockMonitor from '@redux-devtools/dock-monitor';\n\n// createDevTools takes a monitor and produces a DevTools component\nconst DevTools = createDevTools(\n // Monitors are individually adjustable with props.\n // Consult their repositories to learn about those props.\n // Here, we put LogMonitor inside a DockMonitor.\n // Note: DockMonitor is visible by default.\n \n \n ,\n);\n\nexport default DevTools;\n```\n\nNote that you can use `LogMonitor` directly without wrapping it in `DockMonitor` if you’d like to display the DevTools UI somewhere right inside your application:\n\n```js\n// If you'd rather not use docking UI, use directly\nconst DevTools = createDevTools();\n```\n\n#### Use `DevTools.instrument()` Store Enhancer\n\nThe `DevTools` component you created with `createDevTools()` has a special static method called `instrument()`. It returns a [store enhancer](http://redux.js.org/docs/Glossary.html#store-enhancer) that you need to use in development.\n\nA store enhancer is a function that enhances the behavior of `createStore()`. You can pass store enhancer as the last optional argument to `createStore()`. You probably already used another store enhancer—[`applyMiddleware()`](http://redux.js.org/docs/api/applyMiddleware.html). Unlike `applyMiddleware()`, you will need to be careful to only use `DevTools.instrument()` in development environment, and never in production.\n\nThe easiest way to apply several store enhancers in a row is to use the [`compose()`](http://redux.js.org/docs/api/compose.html) utility function that ships with Redux. It is the same `compose()` that you can find in Underscore and Lodash. In our case, we would use it to compose several store enhancers into one: `compose(applyMiddleware(m1, m2, m3), DevTools.instrument())`.\n\nYou can add additional options to it: `DevTools.instrument({ maxAge: 50, shouldCatchErrors: true })`. See [`redux-devtools-instrument`'s API](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-instrument#api) for more details.\n\nIt’s important that you should add `DevTools.instrument()` _after_ `applyMiddleware` in your `compose()` function arguments. This is because `applyMiddleware` is potentially asynchronous, but `DevTools.instrument()` expects all actions to be plain objects rather than actions interpreted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). So make sure `applyMiddleware()` goes first in the `compose()` call, and `DevTools.instrument()` goes after it.\n\n##### `store/configureStore.js`\n\n```js\nimport { createStore, applyMiddleware, compose } from 'redux';\nimport rootReducer from '../reducers';\nimport DevTools from '../containers/DevTools';\n\nconst enhancer = compose(\n // Middleware you want to use in development:\n applyMiddleware(d1, d2, d3),\n // Required! Enable Redux DevTools with the monitors you chose\n DevTools.instrument(),\n);\n\nexport default function configureStore(initialState) {\n // Note: only Redux >= 3.1.0 supports passing enhancer as third argument.\n // See https://github.com/reactjs/redux/releases/tag/v3.1.0\n const store = createStore(rootReducer, initialState, enhancer);\n\n // Hot reload reducers (requires Webpack or Browserify HMR to be enabled)\n if (module.hot) {\n module.hot.accept('../reducers', () =>\n store.replaceReducer(\n require('../reducers') /*.default if you use Babel 6+ */,\n ),\n );\n }\n\n return store;\n}\n```\n\nIf you’d like, you may add another store enhancer called `persistState()`. It ships with this package, and it lets you serialize whole sessions (including all dispatched actions and the state of the monitors) by a URL key. So if you visit `http://localhost:3000/?debug_session=reproducing_weird_bug`, do something in the app, then open `http://localhost:3000/?debug_session=some_other_feature`, and then go back to `http://localhost:3000/?debug_session=reproducing_weird_bug`, the state will be restored. The implementation of `persistState()` is fairly naïve but you can take it as an inspiration and build a proper UI for it if you feel like it!\n\n```js\n// ...\nimport { persistState } from '@redux-devtools/core';\n\nconst enhancer = compose(\n // Middleware you want to use in development:\n applyMiddleware(d1, d2, d3),\n // Required! Enable Redux DevTools with the monitors you chose\n DevTools.instrument(),\n // Optional. Lets you write ?debug_session= in address bar to persist debug sessions\n persistState(getDebugSessionKey()),\n);\n\nfunction getDebugSessionKey() {\n // You can write custom logic here!\n // By default we try to read the key from ?debug_session= in the address bar\n const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\\b/);\n return matches && matches.length > 0 ? matches[1] : null;\n}\n\nexport default function configureStore(initialState) {\n // ...\n}\n```\n\n#### Exclude DevTools from Production Builds\n\nFinally, to make sure we’re not pulling any DevTools-related code in the production builds, we will envify our code. You can use [`DefinePlugin`](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) with Webpack, or [`envify`](https://github.com/zertosh/loose-envify) for Browserify.\n\nThe trick is to replace all occurrences of a constant like `process.env.NODE_ENV` into a string depending on the environment, and import and render `redux-devtools` only when `process.env.NODE_ENV` is not `'production'`. Then, if you have an Uglify step before production, Uglify will eliminate dead `if (false)` branches with `redux-devtools` imports.\n\nWith Webpack, you'll need two config files, one for development and one for production. Here's a snippet from an example production config:\n\n##### `webpack.config.prod.js`\n\n```js\n// ...\nplugins: [\n new webpack.DefinePlugin({\n 'process.env.NODE_ENV': JSON.stringify('production')\n })\n],\n// ...\n```\n\nIf you are using ES6 modules with Webpack 1.x and Babel, you might try putting your `import` statement inside an `if (process.env.NODE_ENV !== 'production)` to exclude the DevTools package from your production bundle. However this ES6 specification forbids it, so this won’t compile. Instead, you can use a conditional CommonJS `require`. Babel will let it compile, and Uglify will eliminate the dead branches before Webpack creates a bundle. This is why we recommend creating a `configureStore.js` file that either directs you to `configureStore.dev.js` or `configureStore.prod.js` depending on the configuration. While it is a little bit more maintenance, the upside is that you can be sure you won’t pull any development dependencies into the production builds, and that you can easily enable different middleware (e.g. crash reporting, logging) in the production environment.\n\n##### `store/configureStore.js`\n\n```js\n// Use DefinePlugin (Webpack) or loose-envify (Browserify)\n// together with Uglify to strip the dev branch in prod build.\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./configureStore.prod');\n} else {\n module.exports = require('./configureStore.dev');\n}\n```\n\n##### `store/configureStore.prod.js`\n\n```js\nimport { createStore, applyMiddleware, compose } from 'redux';\nimport rootReducer from '../reducers';\n\n// Middleware you want to use in production:\nconst enhancer = applyMiddleware(p1, p2, p3);\n\nexport default function configureStore(initialState) {\n // Note: only Redux >= 3.1.0 supports passing enhancer as third argument.\n // See https://github.com/rackt/redux/releases/tag/v3.1.0\n return createStore(rootReducer, initialState, enhancer);\n}\n```\n\n##### `store/configureStore.dev.js`\n\n```js\nimport { createStore, applyMiddleware, compose } from 'redux';\nimport { persistState } from '@redux-devtools/core';\nimport rootReducer from '../reducers';\nimport DevTools from '../containers/DevTools';\n\nconst enhancer = compose(\n // Middleware you want to use in development:\n applyMiddleware(d1, d2, d3),\n // Required! Enable Redux DevTools with the monitors you chose\n DevTools.instrument(),\n // Optional. Lets you write ?debug_session= in address bar to persist debug sessions\n persistState(getDebugSessionKey()),\n);\n\nfunction getDebugSessionKey() {\n // You can write custom logic here!\n // By default we try to read the key from ?debug_session= in the address bar\n const matches = window.location.href.match(/[?&]debug_session=([^&]+)\\b/);\n return matches && matches.length > 0 ? matches[1] : null;\n}\n\nexport default function configureStore(initialState) {\n // Note: only Redux >= 3.1.0 supports passing enhancer as third argument.\n // See https://github.com/rackt/redux/releases/tag/v3.1.0\n const store = createStore(rootReducer, initialState, enhancer);\n\n // Hot reload reducers (requires Webpack or Browserify HMR to be enabled)\n if (module.hot) {\n module.hot.accept('../reducers', () =>\n store.replaceReducer(\n require('../reducers') /*.default if you use Babel 6+ */,\n ),\n );\n }\n\n return store;\n}\n```\n\n#### Render `` in Your App...\n\nFinally, include the `DevTools` component in your page. \nA naïve way to do this would be to render it right in your `index.js`:\n\n##### `index.js`\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Provider } from 'react-redux';\nimport configureStore from './store/configureStore';\nimport TodoApp from './containers/TodoApp';\n\n// Don't do this! You’re bringing DevTools into the production bundle.\nimport DevTools from './containers/DevTools';\n\nconst store = configureStore();\n\nrender(\n \n
\n \n \n
\n \n document.getElementById('app')\n);\n```\n\nWe recommend a different approach. Create a `Root.js` component that renders the root of your application (usually some component surrounded by a ``). Then use the same trick with conditional `require` statements to have two versions of it, one for development, and one for production:\n\n##### `containers/Root.js`\n\n```js\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./Root.prod');\n} else {\n module.exports = require('./Root.dev');\n}\n```\n\n##### `containers/Root.dev.js`\n\n```js\nimport React, { Component } from 'react';\nimport { Provider } from 'react-redux';\nimport TodoApp from './TodoApp';\nimport DevTools from './DevTools';\n\nexport default class Root extends Component {\n render() {\n const { store } = this.props;\n return (\n \n
\n \n \n
\n \n );\n }\n}\n```\n\n##### `containers/Root.prod.js`\n\n```js\nimport React, { Component } from 'react';\nimport { Provider } from 'react-redux';\nimport TodoApp from './TodoApp';\n\nexport default class Root extends Component {\n render() {\n const { store } = this.props;\n return (\n \n \n \n );\n }\n}\n```\n\n#### ...Or Open Them in a New Window\n\nWhen you use [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor), you usually want to render `` at the root of your app. It will appear in a docked container above it. However, you can also render it anywhere else in your React component tree. To do this, you can remove `DockMonitor` and instead render `` inside some component of your app. Don’t forget to create two versions of this component to exclude `DevTools` in production!\n\nHowever you don’t even have to render `` in the same window. For example, you may prefer to display it in a popup. In this case, you can remove `DockMonitor` from `DevTools.js` and just use the `LogMonitor`, and have some code like this:\n\n##### `index.js`\n\n```js\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport { render } from 'react-dom';\nimport configureStore from './store/configureStore';\nimport App from './containers/App';\n\nconst store = configureStore();\n\nrender(\n \n \n ,\n document.getElementById('root'),\n);\n\nif (process.env.NODE_ENV !== 'production') {\n const showDevTools = require('./showDevTools');\n showDevTools(store);\n}\n```\n\n##### `showDevTools.js`\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport DevTools from './containers/DevTools';\n\nexport default function showDevTools(store) {\n const popup = window.open(\n null,\n 'Redux DevTools',\n 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no',\n );\n // Reload in case it already exists\n popup.location.reload();\n\n setTimeout(() => {\n popup.document.write('
');\n render(\n ,\n popup.document.getElementById('react-devtools-root'),\n );\n }, 10);\n}\n```\n\nPersonal preferences vary, and whether to put the DevTools in a separate window, in a dock, or right inside you app’s user interface, is up to you. Make sure to check the documentation for the monitors you use and learn about the different props they support for customizing the appearance and the behavior.\n\nNote that there are no useful props you can pass to the `DevTools` component other than the `store`. The `store` prop is needed if you don’t wrap `` in a ``—just like with any connected component. To adjust the monitors, you need to pass props to them inside `DevTools.js` itself inside the `createDevTools()` call when they are used.\n\n### Gotchas\n\n- **Your reducers have to be pure and free of side effects to work correctly with DevTools.** For example, even generating a random ID in reducer makes it impure and non-deterministic. Instead, do this in action creators.\n\n- **Make sure to only apply `DevTools.instrument()` and render `` in development!** In production, this will be terribly slow because actions just accumulate forever. As described above, you need to use conditional `require`s and use `DefinePlugin` (Webpack) or `loose-envify` (Browserify) together with Uglify to remove the dead code. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/) that adds Redux DevTools handling the production case correctly.\n\n- **It is important that `DevTools.instrument()` store enhancer should be added to your middleware stack _after_ `applyMiddleware` in the `compose`d functions, as `applyMiddleware` is potentially asynchronous.** Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk).\n\n### What Next?\n\nNow that you see the DevTools, you might want to learn what those buttons mean and how to use them. This usually depends on the monitor. You can begin by exploring the [LogMonitor](https://github.com/gaearon/redux-devtools-log-monitor) and [DockMonitor](https://github.com/gaearon/redux-devtools-dock-monitor) documentation, as they are the default monitors we suggest to use together. When you’re comfortable using them, you may want to create your own monitor for more exotic purposes, such as a [chart](https://github.com/romseguy/redux-devtools-chart-monitor) or a [diff](https://github.com/whetstone/redux-devtools-diff-monitor) monitor. Don’t forget to send a PR to feature your monitor at the front page!\n" }, { "path": "eslint.js.config.base.mjs", "content": "import { defineConfig } from 'eslint/config';\nimport eslint from '@eslint/js';\nimport eslintConfigPrettier from 'eslint-config-prettier';\n\nexport default defineConfig([eslint.configs.recommended, eslintConfigPrettier]);\n" }, { "path": "eslint.js.react.jest.config.base.mjs", "content": "import { defineConfig } from 'eslint/config';\nimport eslint from '@eslint/js';\nimport react from 'eslint-plugin-react';\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport jest from 'eslint-plugin-jest';\nimport eslintConfigPrettier from 'eslint-config-prettier';\n\nexport default defineConfig([\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n ...eslint.configs.recommended,\n },\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n ...react.configs.flat.recommended,\n },\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n settings: {\n react: {\n version: 'detect',\n },\n },\n },\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n ...reactHooks.configs.flat.recommended,\n },\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n ...jest.configs['flat/recommended'],\n },\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n ...jest.configs['jest/style'],\n },\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n ...eslintConfigPrettier,\n },\n]);\n" }, { "path": "eslint.ts.config.base.mjs", "content": "import { defineConfig } from 'eslint/config';\nimport eslint from '@eslint/js';\nimport tseslint from 'typescript-eslint';\nimport eslintConfigPrettier from 'eslint-config-prettier';\n\nexport default (tsconfigRootDir, files = ['**/*.ts'], project = true) =>\n defineConfig([\n {\n files,\n ...eslint.configs.recommended,\n },\n ...tseslint.configs.recommendedTypeChecked.map((config) => ({\n files,\n ...config,\n })),\n ...tseslint.configs.stylisticTypeChecked.map((config) => ({\n files,\n ...config,\n })),\n {\n files,\n languageOptions: {\n parserOptions: {\n project,\n tsconfigRootDir,\n },\n },\n },\n {\n files,\n ...eslintConfigPrettier,\n },\n {\n files,\n rules: {\n '@typescript-eslint/no-unsafe-return': 'off',\n '@typescript-eslint/no-unsafe-assignment': 'off',\n '@typescript-eslint/no-unsafe-call': 'off',\n '@typescript-eslint/no-unsafe-member-access': 'off',\n '@typescript-eslint/prefer-optional-chain': 'off',\n '@typescript-eslint/no-base-to-string': 'off',\n '@typescript-eslint/consistent-indexed-object-style': 'off',\n '@typescript-eslint/prefer-nullish-coalescing': 'off',\n '@typescript-eslint/consistent-type-definitions': 'off',\n '@typescript-eslint/no-unused-vars': 'off',\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/prefer-for-of': 'off',\n '@typescript-eslint/non-nullable-type-assertion-style': 'off',\n '@typescript-eslint/class-literal-property-style': 'off',\n '@typescript-eslint/no-redundant-type-constituents': 'off',\n '@typescript-eslint/prefer-string-starts-ends-with': 'off',\n '@typescript-eslint/no-duplicate-type-constituents': 'off',\n '@typescript-eslint/array-type': 'off',\n '@typescript-eslint/prefer-function-type': 'off',\n },\n },\n ]);\n" }, { "path": "eslint.ts.jest.config.base.mjs", "content": "import { defineConfig } from 'eslint/config';\nimport eslint from '@eslint/js';\nimport tseslint from 'typescript-eslint';\nimport jest from 'eslint-plugin-jest';\nimport eslintConfigPrettier from 'eslint-config-prettier';\n\nexport default (tsconfigRootDir) =>\n defineConfig([\n {\n files: ['test/**/*.ts'],\n ...eslint.configs.recommended,\n },\n ...tseslint.configs.recommendedTypeChecked.map((config) => ({\n files: ['test/**/*.ts'],\n ...config,\n })),\n ...tseslint.configs.stylisticTypeChecked.map((config) => ({\n files: ['test/**/*.ts'],\n ...config,\n })),\n {\n files: ['test/**/*.ts'],\n languageOptions: {\n parserOptions: {\n project: ['./tsconfig.test.json'],\n tsconfigRootDir,\n },\n },\n },\n {\n files: ['test/**/*.ts'],\n ...jest.configs['flat/recommended'],\n },\n {\n files: ['test/**/*.ts'],\n ...jest.configs['jest/style'],\n },\n {\n files: ['test/**/*.ts'],\n ...eslintConfigPrettier,\n },\n {\n files: ['test/**/*.ts'],\n rules: {\n '@typescript-eslint/no-unsafe-return': 'off',\n '@typescript-eslint/no-unsafe-assignment': 'off',\n '@typescript-eslint/no-unsafe-call': 'off',\n '@typescript-eslint/no-unsafe-member-access': 'off',\n '@typescript-eslint/prefer-optional-chain': 'off',\n '@typescript-eslint/no-base-to-string': 'off',\n '@typescript-eslint/consistent-indexed-object-style': 'off',\n '@typescript-eslint/prefer-nullish-coalescing': 'off',\n '@typescript-eslint/consistent-type-definitions': 'off',\n '@typescript-eslint/no-unused-vars': 'off',\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/prefer-for-of': 'off',\n '@typescript-eslint/non-nullable-type-assertion-style': 'off',\n '@typescript-eslint/class-literal-property-style': 'off',\n '@typescript-eslint/no-redundant-type-constituents': 'off',\n '@typescript-eslint/prefer-string-starts-ends-with': 'off',\n '@typescript-eslint/no-duplicate-type-constituents': 'off',\n '@typescript-eslint/array-type': 'off',\n '@typescript-eslint/prefer-function-type': 'off',\n },\n },\n ]);\n" }, { "path": "eslint.ts.react.config.base.mjs", "content": "import { defineConfig } from 'eslint/config';\nimport eslint from '@eslint/js';\nimport tseslint from 'typescript-eslint';\nimport react from 'eslint-plugin-react';\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport eslintConfigPrettier from 'eslint-config-prettier';\n\nexport default (\n tsconfigRootDir,\n files = ['**/*.ts', '**/*.tsx'],\n project = true,\n) =>\n defineConfig([\n {\n files,\n ...eslint.configs.recommended,\n },\n ...tseslint.configs.recommendedTypeChecked.map((config) => ({\n files,\n ...config,\n })),\n ...tseslint.configs.stylisticTypeChecked.map((config) => ({\n files,\n ...config,\n })),\n {\n files,\n languageOptions: {\n parserOptions: {\n project,\n tsconfigRootDir,\n },\n },\n },\n {\n files,\n ...react.configs.flat.recommended,\n },\n {\n files,\n settings: {\n react: {\n version: 'detect',\n },\n },\n },\n {\n files,\n ...reactHooks.configs.flat.recommended,\n },\n {\n files,\n ...eslintConfigPrettier,\n },\n {\n files,\n rules: {\n '@typescript-eslint/no-unsafe-return': 'off',\n '@typescript-eslint/no-unsafe-assignment': 'off',\n '@typescript-eslint/no-unsafe-call': 'off',\n '@typescript-eslint/no-unsafe-member-access': 'off',\n '@typescript-eslint/no-misused-promises': [\n 'error',\n {\n checksVoidReturn: {\n attributes: false,\n },\n },\n ],\n '@typescript-eslint/prefer-optional-chain': 'off',\n '@typescript-eslint/no-base-to-string': 'off',\n '@typescript-eslint/consistent-indexed-object-style': 'off',\n '@typescript-eslint/prefer-nullish-coalescing': 'off',\n '@typescript-eslint/consistent-type-definitions': 'off',\n '@typescript-eslint/no-unused-vars': 'off',\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/prefer-for-of': 'off',\n '@typescript-eslint/non-nullable-type-assertion-style': 'off',\n '@typescript-eslint/class-literal-property-style': 'off',\n '@typescript-eslint/no-redundant-type-constituents': 'off',\n '@typescript-eslint/prefer-string-starts-ends-with': 'off',\n '@typescript-eslint/no-duplicate-type-constituents': 'off',\n '@typescript-eslint/array-type': 'off',\n '@typescript-eslint/prefer-function-type': 'off',\n 'react/prop-types': 'off',\n },\n },\n ]);\n" }, { "path": "eslint.ts.react.jest.config.base.mjs", "content": "import { defineConfig } from 'eslint/config';\nimport eslint from '@eslint/js';\nimport tseslint from 'typescript-eslint';\nimport react from 'eslint-plugin-react';\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport jest from 'eslint-plugin-jest';\nimport eslintConfigPrettier from 'eslint-config-prettier';\n\nexport default (tsconfigRootDir) =>\n defineConfig([\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...eslint.configs.recommended,\n },\n ...tseslint.configs.recommendedTypeChecked.map((config) => ({\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...config,\n })),\n ...tseslint.configs.stylisticTypeChecked.map((config) => ({\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...config,\n })),\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n languageOptions: {\n parserOptions: {\n project: ['./tsconfig.test.json'],\n tsconfigRootDir,\n },\n },\n },\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...react.configs.flat.recommended,\n },\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n settings: {\n react: {\n version: 'detect',\n },\n },\n },\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...reactHooks.configs.flat.recommended,\n },\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...jest.configs['flat/recommended'],\n },\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...jest.configs['jest/style'],\n },\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n ...eslintConfigPrettier,\n },\n {\n files: ['test/**/*.ts', 'test/**/*.tsx'],\n rules: {\n '@typescript-eslint/no-unsafe-return': 'off',\n '@typescript-eslint/no-unsafe-assignment': 'off',\n '@typescript-eslint/no-unsafe-call': 'off',\n '@typescript-eslint/no-unsafe-member-access': 'off',\n '@typescript-eslint/prefer-optional-chain': 'off',\n '@typescript-eslint/no-base-to-string': 'off',\n '@typescript-eslint/consistent-indexed-object-style': 'off',\n '@typescript-eslint/prefer-nullish-coalescing': 'off',\n '@typescript-eslint/consistent-type-definitions': 'off',\n '@typescript-eslint/no-unused-vars': 'off',\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/prefer-for-of': 'off',\n '@typescript-eslint/non-nullable-type-assertion-style': 'off',\n '@typescript-eslint/class-literal-property-style': 'off',\n '@typescript-eslint/no-redundant-type-constituents': 'off',\n '@typescript-eslint/prefer-string-starts-ends-with': 'off',\n '@typescript-eslint/no-duplicate-type-constituents': 'off',\n '@typescript-eslint/array-type': 'off',\n '@typescript-eslint/prefer-function-type': 'off',\n },\n },\n ]);\n" }, { "path": "extension/.gitignore", "content": "node_modules\ndist\n" }, { "path": "extension/CHANGELOG.md", "content": "# remotedev-redux-devtools-extension\n\n## 3.2.12\n\n### Patch Changes\n\n- Updated dependencies [3f90241]\n- Updated dependencies [d61d31a]\n- Updated dependencies [804e729]\n- Updated dependencies [12849a4]\n- Updated dependencies [804d6bd]\n- Updated dependencies [6481386]\n - @redux-devtools/instrument@3.0.0\n - @redux-devtools/ui@3.0.0\n - @redux-devtools/slider-monitor@7.0.0\n - @redux-devtools/core@5.0.0\n - @redux-devtools/app@8.0.0\n - @redux-devtools/serialize@1.0.0\n - @redux-devtools/utils@4.0.0\n\n## 3.2.11\n\n### Patch Changes\n\n- Updated dependencies [6163276]\n - @redux-devtools/app@7.0.0\n - @redux-devtools/slider-monitor@6.0.0\n - @redux-devtools/ui@2.0.0\n\n## 3.2.10\n\n### Patch Changes\n\n- @redux-devtools/app@6.2.2\n\n## 3.2.9\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n - @redux-devtools/slider-monitor@5.1.1\n - @redux-devtools/utils@3.1.1\n - @redux-devtools/app@6.2.1\n\n## 3.2.8\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - react-json-tree@0.20.0\n - @redux-devtools/app@6.2.0\n - @redux-devtools/slider-monitor@6.0.0\n - @redux-devtools/ui@1.4.0\n - @redux-devtools/core@4.1.0\n - @redux-devtools/utils@4.0.0\n\n## 3.2.7\n\n### Patch Changes\n\n- b25bf13: Send state from background when monitor connects\n\n## 3.2.6\n\n### Patch Changes\n\n- 50d7682: Fix DevTools from losing connection\n\n## 3.2.5\n\n### Patch Changes\n\n- eb3ac09: Add logging to background service worker\n\n## 3.2.4\n\n### Patch Changes\n\n- f1d6158: Fix mocking Chrome API for Electron\n\n## 3.2.3\n\n### Patch Changes\n\n- fd9f950: Fix monitoring on opening panel\n- e49708d: Fix manifest.json for Edge\n\n## 3.2.1\n\n### Patch Changes\n\n- abd03a7: Fix: only send data to extension if DevTools are open\n\n## 3.2.0\n\n### Minor Changes\n\n- 83b2c19: Upgrade to Manifest V3\n\n## 3.1.11\n\n### Patch Changes\n\n- 73688e1: Fix releasing Firefox extension\n\n## 3.1.10\n\n### Patch Changes\n\n- 2163bc3: Split large messages sent from background page to devpanel\n\n## 3.1.9\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-json-tree@0.19.0\n - @redux-devtools/slider-monitor@5.0.1\n - @redux-devtools/ui@1.3.2\n\n## 3.1.8\n\n### Patch Changes\n\n- 191d419: Convert d3 packages to ESM\n- Updated dependencies [191d419]\n - @redux-devtools/app@6.0.1\n\n## 3.1.7\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n- Updated dependencies [decc035]\n - @redux-devtools/app@6.0.0\n - @redux-devtools/slider-monitor@5.0.0\n - @redux-devtools/core@4.0.0\n - @redux-devtools/utils@3.0.0\n\n## 3.1.6\n\n### Patch Changes\n\n- Updated dependencies [158ba2c]\n - @redux-devtools/app@5.0.0\n\n## 3.1.5\n\n### Patch Changes\n\n- 65205f90: Replace Action with Action\n- Updated dependencies [65205f90]\n - @redux-devtools/app@4.0.1\n - @redux-devtools/core@3.13.2\n\n## 3.1.4\n\n### Patch Changes\n\n- Updated dependencies [e57bcb39]\n - @redux-devtools/app@4.0.0\n\n## 3.1.3\n\n### Patch Changes\n\n- bca76009: Fix missing CSS for code editor\n\n## 3.1.2\n\n### Patch Changes\n\n- 64ed81b0: Fix extension in Firefox and Chrome Incognito\n\n## 3.1.1\n\n### Patch Changes\n\n- d18525b5: Increase min-width of popup\n- Updated dependencies [57751ff9]\n - @redux-devtools/app@3.0.0\n\n## 3.1.0\n\n### Minor Changes\n\n- d54adb76: Option to sort State Tree keys alphabetically\n Option to disable collapsing of object keys\n\n### Patch Changes\n\n- @redux-devtools/app@2.2.2\n\n## 3.0.19\n\n### Patch Changes\n\n- 450cde6e: Fix responsive layout\n\n## 3.0.18\n\n### Patch Changes\n\n- Updated dependencies [81926f32]\n - react-json-tree@0.18.0\n - @redux-devtools/app@2.2.1\n\n## 3.0.17\n\n### Patch Changes\n\n- 1aa6c4f7: Fix remounting root for devpanel\n\n## 3.0.16\n\n### Patch Changes\n\n- 20ebf725: Remove source map from page wrap bundle\n\n## 3.0.14\n\n### Patch Changes\n\n- 24f60a7a: bump min popup window width to 760px #1126 #1129\n\n## 3.0.13\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - react-json-tree@0.17.0\n - @redux-devtools/app@2.2.0\n - @redux-devtools/slider-monitor@4.0.0\n - @redux-devtools/ui@1.3.0\n - @redux-devtools/core@3.13.0\n - @redux-devtools/utils@2.0.0\n\n## 3.0.12\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n - @redux-devtools/slider-monitor@3.1.2\n - @redux-devtools/utils@1.2.1\n - @redux-devtools/app@2.1.4\n\n## 3.0.11\n\n### Patch Changes\n\n- ab3c0e2: Avoid persisting the selected action index between sessions\n- Updated dependencies [ab3c0e2]\n- Updated dependencies [4c9a890]\n - @redux-devtools/app@2.1.3\n - react-json-tree@0.16.2\n\n## 3.0.10\n\n### Patch Changes\n\n- 55cc37e: Fix filter to show state-controlled search value\n- Updated dependencies [55cc37e]\n - @redux-devtools/app@2.1.2\n" }, { "path": "extension/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": "extension/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": "extension/README.md", "content": "# 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\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/docs/extensions/get-started/tutorial/hello-world#load-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/docs/extensions/get-started/tutorial/hello-world#load-unpacked) `./dev`.\n\n### 2. For Firefox\n\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\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\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\n### 1.1 Basic store\n\nFor a basic [Redux store](https://redux.js.org/api/createstore#createstorereducer-preloadedstate-enhancer) simply add:\n\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\n```js\nconst composeEnhancers =\n (typeof window !== 'undefined' &&\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||\n compose;\n```\n\n> For TypeScript use [`redux-devtools-extension` npm package](#13-use-redux-devtoolsextension-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\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\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\n\nIf you setup your store with [middleware and enhancers](http://redux.js.org/docs/api/applyMiddleware.html), change:\n\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\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\n```js\nconst composeEnhancers =\n typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({\n // Specify extension’s options like name, actionsDenylist, actionsCreators, serialize...\n })\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\n```\nnpm install --save @redux-devtools/extension\n```\n\nand to use like so:\n\n```js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from '@redux-devtools/extension';\n\nconst store = createStore(\n reducer,\n composeWithDevTools(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ),\n);\n```\n\nTo specify [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig):\n\n```js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from '@redux-devtools/extension';\n\nconst composeEnhancers = composeWithDevTools({\n // Specify name here, actionsDenylist, actionsCreators and other options if needed\n});\nconst store = createStore(\n reducer,\n /* preloadedState, */ composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ),\n);\n```\n\n> There are just a [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\n```js\nimport { createStore } from 'redux';\nimport { devToolsEnhancer } from '@redux-devtools/extension';\n\nconst store = createStore(\n reducer,\n /* preloadedState, */ devToolsEnhancer(),\n // Specify name here, actionsDenylist, actionsCreators and other options if needed\n);\n```\n\n### 1.4 Using in production\n\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 `composeWithDevToolsLogOnlyInProduction` or `devToolsEnhancerLogOnlyInProduction`:\n\n```js\nimport { createStore } from 'redux';\nimport { devToolsEnhancerLogOnlyInProduction } from '@redux-devtools/extension';\n\nconst store = createStore(\n reducer,\n /* preloadedState, */ devToolsEnhancerLogOnlyInProduction(),\n // options like actionSanitizer, stateSanitizer\n);\n```\n\nor with middlewares and enhancers:\n\n```js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevToolsLogOnlyInProduction } from '@redux-devtools/extension';\n\nconst composeEnhancers = composeWithDevToolsLogOnlyInProduction({\n // options like actionSanitizer, stateSanitizer\n});\nconst store = createStore(\n reducer,\n /* preloadedState, */ composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ),\n);\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\nIf you're already checking `process.env.NODE_ENV` when creating the store, import `composeWithDevToolsLogOnly` or `devToolsEnhancerLogOnly` for production environment.\n\nIf you don’t want to allow the extension in production, just use `composeWithDevToolsDevelopmentOnly` or `devToolsEnhancerDevelopmentOnly`.\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\n\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\n\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\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\n\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\n\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## Sponsors\n\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": "extension/babel.config.json", "content": "{\n \"presets\": [\n [\"@babel/preset-env\", { \"targets\": \"defaults\" }],\n \"@babel/preset-react\",\n \"@babel/preset-typescript\"\n ]\n}\n" }, { "path": "extension/build.mjs", "content": "import * as fs from 'node:fs';\nimport * as esbuild from 'esbuild';\nimport pug from 'pug';\n\nconst args = process.argv.slice(2);\nconst prod = !args.includes('--dev');\n\nawait esbuild.build({\n bundle: true,\n logLevel: 'info',\n outdir: 'dist',\n minify: prod,\n sourcemap: !prod,\n define: {\n 'process.env.NODE_ENV': prod ? '\"production\"' : '\"development\"',\n 'process.env.BABEL_ENV': prod ? '\"production\"' : '\"development\"',\n },\n entryPoints: [\n { out: 'background.bundle', in: 'src/background/index.ts' },\n { out: 'options.bundle', in: 'src/options/index.tsx' },\n { out: 'remote.bundle', in: 'src/remote/index.tsx' },\n { out: 'devpanel.bundle', in: 'src/devpanel/index.tsx' },\n { out: 'devtools.bundle', in: 'src/devtools/index.ts' },\n { out: 'content.bundle', in: 'src/contentScript/index.ts' },\n { out: 'page.bundle', in: 'src/pageScript/index.ts' },\n ],\n loader: {\n '.woff2': 'file',\n },\n});\n\nconsole.log();\n\nconsole.log('Creating HTML files...');\nconst htmlFiles = ['devpanel', 'devtools', 'options', 'remote'];\nfor (const htmlFile of htmlFiles) {\n fs.writeFileSync(\n `dist/${htmlFile}.html`,\n pug.renderFile(`src/${htmlFile}/${htmlFile}.pug`),\n );\n}\n\nconsole.log('Copying manifest.json...');\nfs.copyFileSync('chrome/manifest.json', 'dist/manifest.json');\n\nconsole.log('Copying assets...');\nfs.cpSync('src/assets', 'dist', { recursive: true });\n\nconsole.log('Copying dist for each browser...');\nfs.cpSync('dist', 'chrome/dist', { recursive: true });\nfs.copyFileSync('chrome/manifest.json', 'chrome/dist/manifest.json');\nfs.cpSync('dist', 'edge/dist', { recursive: true });\nfs.copyFileSync('edge/manifest.json', 'edge/dist/manifest.json');\nfs.cpSync('dist', 'firefox/dist', { recursive: true });\nfs.copyFileSync('firefox/manifest.json', 'firefox/dist/manifest.json');\n" }, { "path": "extension/chrome/manifest.json", "content": "{\n \"version\": \"3.2.10\",\n \"name\": \"Redux DevTools\",\n \"description\": \"Redux DevTools for debugging application's state changes.\",\n \"homepage_url\": \"https://github.com/reduxjs/redux-devtools\",\n \"manifest_version\": 3,\n \"action\": {\n \"default_icon\": \"img/logo/gray.png\",\n \"default_title\": \"Redux DevTools\",\n \"default_popup\": \"devpanel.html#popup\"\n },\n \"commands\": {\n \"devtools-window\": {\n \"description\": \"DevTools window\"\n },\n \"devtools-remote\": {\n \"description\": \"Remote DevTools\"\n },\n \"_execute_action\": {\n \"suggested_key\": {\n \"default\": \"Ctrl+Shift+E\"\n }\n }\n },\n \"icons\": {\n \"16\": \"img/logo/16x16.png\",\n \"48\": \"img/logo/48x48.png\",\n \"128\": \"img/logo/128x128.png\"\n },\n \"options_ui\": {\n \"page\": \"options.html\"\n },\n \"background\": {\n \"service_worker\": \"background.bundle.js\"\n },\n \"content_scripts\": [\n {\n \"matches\": [\"\"],\n \"exclude_globs\": [\"https://www.google*\"],\n \"js\": [\"content.bundle.js\"],\n \"run_at\": \"document_start\",\n \"all_frames\": true\n },\n {\n \"matches\": [\"\"],\n \"exclude_globs\": [\"https://www.google*\"],\n \"js\": [\"page.bundle.js\"],\n \"run_at\": \"document_start\",\n \"all_frames\": true,\n \"world\": \"MAIN\"\n }\n ],\n \"devtools_page\": \"devtools.html\",\n \"externally_connectable\": {\n \"ids\": [\"*\"]\n },\n \"permissions\": [\"notifications\", \"contextMenus\", \"storage\"],\n \"host_permissions\": [\"file:///*\", \"http://*/*\", \"https://*/*\"],\n \"content_security_policy\": {\n \"extension_pages\": \"script-src 'self'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;\"\n },\n \"update_url\": \"https://clients2.google.com/service/update2/crx\",\n \"key\": \"MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsdJEPwY92xUACA9CcDBDBmbdbp8Ap3cKQ0DJTUuVQvqb4FQAv8RtKY3iUjGvdwuAcSJQIZwHXcP2aNDH3TiFik/NhRK2GRW8X3OZyTdkuDueABGP2KEX8q1WQDgjX/rPIinGYztUrvoICw/UerMPwNW62jwGoVU3YhAGf+15CgX2Y6a4tppnf/+1mPedKPidh0RsM+aJY98rX+r1SPAHPcGzMjocLkqcT75DZBXer8VQN14tOOzRCd6T6oy7qm7eWru8lJwcY66qMQvhk0osqEod2G3nA7aTWpmqPFS66VEiecP9PgZlp8gQdgZ3dFhA62exydlD55JuRhiMIR63yQIDAQAB\"\n}\n" }, { "path": "extension/docs/API/Arguments.md", "content": "# Options\n\nUse with\n\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\n```js\nimport { composeWithDevTools } from '@redux-devtools/extension';\n\nconst composeEnhancers = composeWithDevTools(options);\nconst store = createStore(\n reducer,\n /* preloadedState, */ composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ),\n);\n```\n\nThe `options` object is optional, and can include any of the following.\n\n### `name`\n\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\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\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\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\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\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\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(\n reducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n options: {\n undefined: true,\n function: function (fn) {\n return fn.toString();\n },\n },\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\n ```js\n const store = Redux.createStore(\n reducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n replacer: (key, value) =>\n value && mori.isMap(value) ? mori.toJs(value) : value,\n },\n }),\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\n ```js\n const store = Redux.createStore(\n reducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n replacer: (key, value) => {\n if (Immutable.List.isList(value)) {\n // 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 ```\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\n ```js\n const store = Redux.createStore(\n reducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n reviver: (key, value) => {\n if (\n typeof value === 'object' &&\n value !== null &&\n '__serializedType__' in value\n ) {\n switch (value.__serializedType__) {\n case 'ImmutableList':\n return Immutable.List(value.data);\n }\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 =\n typeof window === 'object' &&\n typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ !== 'undefined'\n ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({\n serialize: {\n immutable: Immutable,\n },\n })\n : compose;\n ```\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\n- **refs** `array` - ImmutableJS `Record` classes used to make possible restore its instances back when importing, persisting... Example of usage:\n\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(\n rootReducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: {\n immutable: Immutable,\n refs: [ABRecord],\n },\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\n```js\nfunction component(\n state = { component: null, toJSON: () => ({ component: '[React]' }) },\n action,\n) {\n switch (action.type) {\n case 'ADD_COMPONENT':\n return { component: action.component };\n default:\n 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\n```js\nfunction counter(\n state = {\n count: 0,\n toJSON: function () {\n return { conter: this.count * 10 };\n },\n },\n action,\n) {\n switch (action.type) {\n case 'INCREMENT':\n return { count: state.count + 1 };\n default:\n return state;\n }\n}\n```\n\n### `actionSanitizer` / `stateSanitizer`\n\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: '<>' }\n : action;\nconst store = createStore(\n rootReducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n actionSanitizer,\n stateSanitizer: (state) =>\n state.data ? { ...state, data: '<>' } : state,\n }),\n);\n```\n\n### `actionsDenylist` / `actionsAllowlist`\n\n_string or array of strings as regex_ - actions types to be hidden / shown in the monitors (while passed to the reducers). If `actionsAllowlist` specified, `actionsDenylist` is ignored.\n\nExample:\n\n```js\ncreateStore(\n reducer,\n remotedev({\n sendTo: 'http://localhost:8000',\n actionsDenylist: 'SOME_ACTION',\n // or actionsDenylist: ['SOME_ACTION', 'SOME_OTHER_ACTION']\n // or just actionsDenylist: 'SOME_' to omit both\n }),\n);\n```\n\n### `predicate`\n\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 `actionsDenylist`/`actionsAllowlist` parameters.\nExample of usage:\n\n```js\nconst store = createStore(\n rootReducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n predicate: (state, action) =>\n state.dev.logLevel === VERBOSE && !action.forwarded,\n }),\n);\n```\n\n### `shouldRecordChanges`\n\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\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\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\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\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\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`\n\nIf you want to restrict the extension, just specify the features you allow:\n\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```\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": "extension/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\n### connect([options])\n\n##### Arguments\n\n- [`options`] _Object_ - [see the available options](Arguments.md).\n\n##### Returns\n\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/reduxjs/redux-devtools/blob/main/packages/redux-devtools-extension/src/logOnly.ts), [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\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\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\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\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": "extension/docs/API/README.md", "content": "# API Reference\n\n- [Parameters](Arguments.md)\n- [Methods](Methods.md)\n" }, { "path": "extension/docs/Architecture.md", "content": "# Architecture Notes\n\nThis document exists to keep track of how the different parts of the Redux DevTools interact, since it's easy to forget how it all works together. This is intended for internal purposes and is just a collection of notes to myself.\n\n## Entry Points\n\n### Window\n\nThis is the default view that is shown in the Redux DevTools popup, the Chrome DevTools tab (if direct access to the background page is available), and new popup windows that are created. It has direct access to the background page via `chrome.runtime.getBackgroundPage`.\n\n### DevPanel\n\nThis is the view that is shown in the Chrome DevTools tab if direct access to the background page is not available.\n\nInitially this was the view that was always used for the Chrome DevTools tab, but when support to directly access the background page from the DevTools tab was added, [the Window View became the preferred view](https://github.com/zalmoxisus/redux-devtools-extension/pull/580).\n\n### Remote\n\nThis does not interact with the other parts of the extension at all, it just renders the `App` component from `@redux-devtools/app`.\n\nIt can be triggered by hitting the \"Remote\" button in any of the other views, which calls `chrome.windows.create` and creates a new window.\n\n### DevTools\n\nThis is the script that adds the Redux panel in the Chrome DevTools using `chrome.devtools.panels.create`.\n\nIt creates a Window View if it has direct access to the background page, otherwise it creates a DevPanel View.\n\nNote that this used to always show the DevPanel View, but [started using the Window View by default](https://github.com/zalmoxisus/redux-devtools-extension/pull/580) once direct access to the background page was added to Chrome DevTools tabs.\n\n### Content Script\n\nPasses messages between the injected page script and the background page.\n\nIt listens for messages from the injected page script using `window.addEventListener('message', ...)`. It knows the message is from the injected page script if `message.source` is `'@devtools-page'`. See the Chrome DevTools docs where this approach [is documented](https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools#evaluated-scripts-to-devtools).\n\nIt creates a connection to the background page using `chrome.runtime.connect` with the name `'tab'` when it receives the first message from the injected page script.\n" }, { "path": "extension/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": "extension/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": "extension/docs/FAQ.md", "content": "# Redux DevTools Extension FAQ\n\n## Table of Contents\n\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\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\n\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\n#### How to persist debug sessions across page reloads\n\nJust click the `Persist` button or add `?debug_session=` to the url.\n\n#### How to open DevTools programmatically\n\n```js\nwindow.__REDUX_DEVTOOLS_EXTENSION__.open();\n```\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\n#### How to enable/disable errors notifying\n\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\n#### How to get it work with WebWorkers, React Native, hybrid, desktop and server side apps\n\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\n#### Keyboard shortcuts\n\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": "extension/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": "extension/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": "extension/docs/Integrations.md", "content": "# Integrations for js and non-js frameworks\n\nMostly functional:\n\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\n- [ClojureScript](#clojurescript)\n- [Horizon](#horizon)\n- [Python](#python)\n- [Swift](#swift)\n\n### [React](https://github.com/facebook/react)\n\n#### Inspect React props\n\n##### [`react-inspect-props`](https://github.com/lucasconstantino/react-inspect-props)\n\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\n##### [`remotedev-react-state`](https://github.com/jhen0409/remotedev-react-state)\n\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\n##### [`reinspect`](https://github.com/troch/reinspect)\n\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\n#### [`mobx-remotedev`](https://github.com/zalmoxisus/mobx-remotedev)\n\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\n#### [ng2-redux](https://github.com/angular-redux/ng2-redux)\n\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```\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\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\n#### [`ember-redux`](https://github.com/ember-redux/ember-redux)\n\n```js\n//app/enhancers/index.js\nimport { compose } from 'redux';\nvar devtools = window.__REDUX_DEVTOOLS_EXTENSION__\n ? window.__REDUX_DEVTOOLS_EXTENSION__()\n : (f) => f;\nexport default compose(devtools);\n```\n\n### [Cycle](https://github.com/cyclejs/cyclejs)\n\n#### [`@culli/store`](https://github.com/milankinen/culli/tree/master/packages/store)\n\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\nrun(App, {\n DOM: DOM('#app'),\n Store: Store(\n ReduxDevtools({\n items: [\n { id: newId(), num: 0 },\n { id: newId(), num: 0 },\n ],\n }),\n ),\n});\n```\n\n### [Freezer](https://github.com/arqex/freezer)\n\n#### [`freezer-redux-devtools`](https://github.com/arqex/freezer-redux-devtools)\n\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\n#### [`horizon-remotedev`](https://github.com/zalmoxisus/horizon-remotedev)\n\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\n#### [`fable-elmish/debugger`](https://github.com/fable-elmish/debugger)\n\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\n#### [`purescript-react-redux`](https://github.com/ethul/purescript-react-redux)\n\n[`Example of integration`](https://github.com/ethul/purescript-react-redux-example).\n\n### [ClojureScript](https://github.com/clojure/clojurescript)\n\n[`Example of integration`](http://gitlab.xet.ru:9999/publicpr/clojurescript-redux/tree/master#dev-setup)\n\n### [Python](https://www.python.org/)\n\n#### [`pyredux`](https://github.com/peterpeter5/pyredux)\n\n[WIP](https://github.com/zalmoxisus/remotedev-server/issues/34)\n\n### [Swift](https://github.com/apple/swift)\n\n#### [`katanaMonitor`](https://github.com/bolismauro/katanaMonitor-lib-swift) for [`katana-swift`](https://github.com/BendingSpoons/katana-swift)\n\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\n#### [`reductive-dev-tools`](https://github.com/ambientlight/reductive-dev-tools)\n\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\n#### [`aurelia-store`](https://aurelia.io/docs/plugins/store)\n\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": "extension/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": "extension/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```\n\nNote that you many need to set `no-any` to false in your `tslint.json` file.\n\nAlternatively you can use type-guard 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(\n rootReducer,\n initialState,\n isReduxDevtoolsExtenstionExist(window)\n ? window.__REDUX_DEVTOOLS_EXTENSION__()\n : undefined,\n);\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/reduxjs/redux-devtools/blob/main/packages/redux-devtools-extension/src/logOnly.ts), which can be used it like so:\n\n```js\nimport { createStore, compose } from 'redux';\nimport { devToolsEnhancerLogOnly } from '@redux-devtools/extension';\n\nconst store = createStore(\n reducer,\n /* preloadedState, */ compose(\n devToolsEnhancerLogOnly({\n instaceID: 1,\n name: 'Denylisted',\n actionsDenylist: '...',\n }),\n devToolsEnhancerLogOnly({\n instaceID: 2,\n name: 'Allowlisted',\n actionsAllowlist: '...',\n }),\n ),\n);\n```\n" }, { "path": "extension/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\nAnother cause could be that you are creating multiple stores, which means that the devtools get attached to one but the application uses another. See [https://github.com/reduxjs/redux-toolkit/issues/2753](this issue).\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(\n reducer,\n preloadedState,\n compose(\n // applyMiddleware(thunk),\n window.__REDUX_DEVTOOLS_EXTENSION__\n ? window.__REDUX_DEVTOOLS_EXTENSION__()\n : (noop) => noop,\n batchedSubscribe(/* ... */),\n ),\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: '<>' }\n : action;\nconst store = createStore(\n rootReducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n actionSanitizer,\n stateSanitizer: (state) =>\n state.data ? { ...state, data: '<>' } : state,\n }),\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\n```diff\nfunction 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\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\n```js\nconst store = Redux.createStore(\n reducer,\n window.__REDUX_DEVTOOLS_EXTENSION__ &&\n window.__REDUX_DEVTOOLS_EXTENSION__({\n serialize: true,\n }),\n);\n```\n\nIt will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.\n" }, { "path": "extension/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": "extension/edge/manifest.json", "content": "{\n \"version\": \"3.2.10\",\n \"name\": \"Redux DevTools\",\n \"description\": \"Redux DevTools for debugging application's state changes.\",\n \"homepage_url\": \"https://github.com/reduxjs/redux-devtools\",\n \"manifest_version\": 3,\n \"action\": {\n \"default_icon\": \"img/logo/gray.png\",\n \"default_title\": \"Redux DevTools\",\n \"default_popup\": \"devpanel.html#popup\"\n },\n \"commands\": {\n \"devtools-window\": {\n \"description\": \"DevTools window\"\n },\n \"devtools-remote\": {\n \"description\": \"Remote DevTools\"\n },\n \"_execute_action\": {\n \"suggested_key\": {\n \"default\": \"Ctrl+Shift+E\"\n }\n }\n },\n \"icons\": {\n \"16\": \"img/logo/16x16.png\",\n \"48\": \"img/logo/48x48.png\",\n \"128\": \"img/logo/128x128.png\"\n },\n \"options_ui\": {\n \"page\": \"options.html\"\n },\n \"background\": {\n \"service_worker\": \"background.bundle.js\"\n },\n \"content_scripts\": [\n {\n \"matches\": [\"\"],\n \"exclude_globs\": [\"https://www.google*\"],\n \"js\": [\"content.bundle.js\"],\n \"run_at\": \"document_start\",\n \"all_frames\": true\n },\n {\n \"matches\": [\"\"],\n \"exclude_globs\": [\"https://www.google*\"],\n \"js\": [\"page.bundle.js\"],\n \"run_at\": \"document_start\",\n \"all_frames\": true,\n \"world\": \"MAIN\"\n }\n ],\n \"devtools_page\": \"devtools.html\",\n \"externally_connectable\": {\n \"ids\": [\"*\"]\n },\n \"permissions\": [\"notifications\", \"contextMenus\", \"storage\"],\n \"host_permissions\": [\"file:///*\", \"http://*/*\", \"https://*/*\"],\n \"content_security_policy\": {\n \"extension_pages\": \"script-src 'self'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;\"\n }\n}\n" }, { "path": "extension/eslint.config.mjs", "content": "import globals from 'globals';\nimport eslintJs from '../eslint.js.config.base.mjs';\nimport eslintTsReact from '../eslint.ts.react.config.base.mjs';\nimport eslintJsReactJest from '../eslint.js.react.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n ...eslintJsReactJest,\n {\n ignores: [\n 'chrome',\n 'dist',\n 'edge',\n 'examples',\n 'firefox',\n 'jest.config.ts',\n 'test/electron/fixture/dist',\n ],\n },\n {\n files: ['build.mjs'],\n languageOptions: {\n globals: {\n ...globals.nodeBuiltin,\n },\n },\n },\n {\n files: ['test/**/*.js', 'test/**/*.jsx'],\n languageOptions: {\n globals: {\n ...globals.browser,\n ...globals.node,\n EUI: true,\n },\n },\n },\n];\n" }, { "path": "extension/firefox/manifest.json", "content": "{\n \"version\": \"3.2.10\",\n \"name\": \"Redux DevTools\",\n \"manifest_version\": 3,\n \"description\": \"Redux Developer Tools for debugging application state changes.\",\n \"homepage_url\": \"https://github.com/reduxjs/redux-devtools\",\n \"browser_specific_settings\": {\n \"gecko\": {\n \"id\": \"extension@redux.devtools\"\n }\n },\n \"action\": {\n \"default_icon\": \"img/logo/38x38.png\",\n \"default_title\": \"Redux DevTools\",\n \"default_popup\": \"devpanel.html#popup\"\n },\n \"commands\": {\n \"devtools-window\": {\n \"description\": \"DevTools window\"\n },\n \"devtools-remote\": {\n \"description\": \"Remote DevTools\"\n }\n },\n \"icons\": {\n \"16\": \"img/logo/16x16.png\",\n \"48\": \"img/logo/48x48.png\",\n \"128\": \"img/logo/128x128.png\"\n },\n \"options_ui\": {\n \"page\": \"options.html\"\n },\n \"background\": {\n \"scripts\": [\"background.bundle.js\"]\n },\n \"content_scripts\": [\n {\n \"matches\": [\"\"],\n \"js\": [\"content.bundle.js\"],\n \"run_at\": \"document_start\",\n \"all_frames\": true\n },\n {\n \"matches\": [\"\"],\n \"js\": [\"page.bundle.js\"],\n \"run_at\": \"document_start\",\n \"all_frames\": true,\n \"world\": \"MAIN\"\n }\n ],\n \"devtools_page\": \"devtools.html\",\n \"permissions\": [\"notifications\", \"contextMenus\", \"tabs\", \"storage\"],\n \"host_permissions\": [\"file:///*\", \"http://*/*\", \"https://*/*\"],\n \"content_security_policy\": {\n \"extension_pages\": \"script-src 'self'; object-src 'self'; img-src 'self' data:;\"\n }\n}\n" }, { "path": "extension/jest.config.ts", "content": "import { createJsWithTsEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createJsWithTsEsmPreset({\n tsconfig: 'tsconfig.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n setupFilesAfterEnv: ['/test/setup.js'],\n testPathIgnorePatterns: ['/examples'],\n testEnvironment: 'jsdom',\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n '\\\\.css$': '/test/__mocks__/styleMock.js',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "extension/package.json", "content": "{\n \"private\": true,\n \"name\": \"remotedev-redux-devtools-extension\",\n \"version\": \"3.2.12\",\n \"description\": \"Redux Developer Tools for debugging application state changes.\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/extension\",\n \"license\": \"MIT\",\n \"author\": \"Mihail Diordiev (https://github.com/zalmoxisus)\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"pnpm run build:extension && pnpm run type-check\",\n \"build:extension\": \"node build.mjs\",\n \"clean\": \"rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist\",\n \"test:app\": \"cross-env BABEL_ENV=test node --experimental-vm-modules node_modules/jest/bin/jest.js test/app\",\n \"test:chrome\": \"cross-env SE_FORCE_BROWSER_DOWNLOAD=true node --experimental-vm-modules node_modules/jest/bin/jest.js test/chrome\",\n \"build:test:electron:fixture\": \"webpack --config test/electron/fixture/webpack.config.js\",\n \"test:electron\": \"pnpm run build:test:electron:fixture && node --experimental-vm-modules node_modules/jest/bin/jest.js test/electron\",\n \"test\": \"pnpm run test:app && pnpm run test:chrome && pnpm run test:electron\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@redux-devtools/app\": \"workspace:^\",\n \"@redux-devtools/core\": \"workspace:^\",\n \"@redux-devtools/instrument\": \"workspace:^\",\n \"@redux-devtools/serialize\": \"workspace:^\",\n \"@redux-devtools/slider-monitor\": \"workspace:^\",\n \"@redux-devtools/ui\": \"workspace:^\",\n \"@redux-devtools/utils\": \"workspace:^\",\n \"@reduxjs/toolkit\": \"^2.11.2\",\n \"@types/jsan\": \"^3.1.5\",\n \"jsan\": \"^3.1.14\",\n \"localforage\": \"^1.10.0\",\n \"lodash-es\": \"^4.17.23\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-icons\": \"^5.6.0\",\n \"react-is\": \"^19.2.4\",\n \"react-json-tree\": \"workspace:^\",\n \"react-redux\": \"^9.2.0\",\n \"redux\": \"^5.0.1\",\n \"redux-persist\": \"^6.0.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.29.0\",\n \"@babel/preset-env\": \"^7.29.0\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@babel/register\": \"^7.28.6\",\n \"@jest/globals\": \"^30.3.0\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/jest-dom\": \"^6.9.1\",\n \"@testing-library/react\": \"^16.3.2\",\n \"@types/chrome\": \"^0.1.37\",\n \"@types/lodash-es\": \"^4.17.12\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"chromedriver\": \"^146.0.3\",\n \"cross-env\": \"^10.1.0\",\n \"electron\": \"^41.0.2\",\n \"esbuild\": \"^0.27.4\",\n \"globals\": \"^17.4.0\",\n \"immutable\": \"^5.1.5\",\n \"jest\": \"^30.3.0\",\n \"jest-environment-jsdom\": \"^30.3.0\",\n \"pug\": \"^3.0.4\",\n \"rimraf\": \"^6.1.3\",\n \"selenium-webdriver\": \"^4.41.0\",\n \"sinon-chrome\": \"^3.0.1\",\n \"ts-jest\": \"^29.4.6\",\n \"typescript\": \"~5.9.3\",\n \"webpack\": \"^5.105.4\",\n \"webpack-cli\": \"^7.0.0\"\n }\n}\n" }, { "path": "extension/src/app/Actions.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Button, Container, Divider, Toolbar } from '@redux-devtools/ui';\nimport {\n DevTools,\n Dispatcher,\n DispatcherButton,\n ExportButton,\n getActiveInstance,\n getReport,\n ImportButton,\n liftedDispatch,\n MonitorSelector,\n PrintButton,\n SliderButton,\n SliderMonitor,\n StoreState,\n TopButtons,\n} from '@redux-devtools/app';\nimport { GoBroadcast } from 'react-icons/go';\nimport { MdOutlineWindow } from 'react-icons/md';\nimport type { Position } from '../pageScript/api/openWindow.js';\nimport type { SingleMessage } from '../background/store/apiMiddleware.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n readonly position: string;\n}\ntype Props = StateProps & DispatchProps & OwnProps;\n\nconst isElectron = navigator.userAgent.includes('Electron');\n\nasync function sendMessage(message: SingleMessage) {\n await chrome.runtime.sendMessage(message);\n}\n\nclass Actions extends Component {\n openWindow = async (position: Position) => {\n await sendMessage({ type: 'OPEN', position });\n };\n openOptionsPage = async () => {\n if (navigator.userAgent.includes('Firefox')) {\n await sendMessage({ type: 'OPEN_OPTIONS' });\n } else {\n await chrome.runtime.openOptionsPage();\n }\n };\n\n render() {\n const {\n monitor,\n dispatcherIsOpen,\n sliderIsOpen,\n options,\n liftedState,\n liftedDispatch,\n position,\n stateTreeSettings,\n } = this.props;\n const { features } = options;\n return (\n \n \n \n {sliderIsOpen && options.connectionId && options.features.jump && (\n \n )}\n {dispatcherIsOpen &&\n options.connectionId &&\n options.features.dispatch && }\n \n {features.export && }\n {features.import && }\n {position &&\n (position !== '#popup' ||\n navigator.userAgent.includes('Firefox')) && }\n \n \n \n {features.jump && }\n {features.dispatch && (\n \n )}\n \n {!isElectron && (\n {\n await this.openWindow('window');\n }}\n >\n \n \n )}\n {!isElectron && (\n {\n await this.openWindow('remote');\n }}\n >\n \n \n )}\n \n \n );\n }\n}\n\nconst mapStateToProps = (state: StoreState) => {\n const instances = state.instances;\n const id = getActiveInstance(instances);\n return {\n liftedState: instances.states[id],\n monitorState: state.monitor.monitorState,\n options: instances.options[id],\n monitor: state.monitor.selected,\n dispatcherIsOpen: state.monitor.dispatcherIsOpen,\n sliderIsOpen: state.monitor.sliderIsOpen,\n reports: state.reports.data,\n stateTreeSettings: state.stateTreeSettings,\n };\n};\n\nconst actionCreators = {\n liftedDispatch,\n getReport,\n};\n\nexport default connect(mapStateToProps, actionCreators)(Actions);\n" }, { "path": "extension/src/app/App.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Container, Notification } from '@redux-devtools/ui';\nimport {\n clearNotification,\n getActiveInstance,\n Header,\n Settings,\n StoreState,\n} from '@redux-devtools/app';\nimport Actions from './Actions.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n readonly position: string;\n}\ntype Props = StateProps & DispatchProps & OwnProps;\n\nclass App extends Component {\n render() {\n const { position, options, section, theme, notification } = this.props;\n if (!position && (!options || !options.features)) {\n return (\n
\n No store found. Make sure to follow{' '}\n \n the instructions\n \n .\n
\n );\n }\n\n let body;\n switch (section) {\n case 'Settings':\n body = ;\n break;\n default:\n body = ;\n }\n\n return (\n \n
\n {body}\n {notification && (\n \n {notification.message}\n \n )}\n \n );\n }\n}\n\nfunction mapStateToProps(state: StoreState) {\n const instances = state.instances;\n const id = getActiveInstance(instances);\n return {\n options: instances.options[id],\n section: state.section,\n theme: state.theme,\n notification: state.notification,\n };\n}\n\nconst actionCreators = {\n clearNotification,\n};\n\nexport default connect(mapStateToProps, actionCreators)(App);\n" }, { "path": "extension/src/background/contextMenus.ts", "content": "import openDevToolsWindow, { DevToolsPosition } from './openWindow.js';\n\nexport function createMenu() {\n const menus = [\n { id: 'devtools-window', title: 'Open in a window' },\n { id: 'devtools-remote', title: 'Open Remote DevTools' },\n ];\n\n const shortcuts: { [commandName: string]: string | undefined } = {};\n chrome.commands.getAll((commands) => {\n for (const { name, shortcut } of commands) {\n shortcuts[name!] = shortcut;\n }\n\n for (const { id, title } of menus) {\n chrome.contextMenus.create({\n id: id,\n title: title + (shortcuts[id] ? ' (' + shortcuts[id] + ')' : ''),\n contexts: ['all'],\n });\n }\n });\n}\n\nexport async function removeMenu() {\n await chrome.contextMenus.removeAll();\n}\n\nchrome.contextMenus.onClicked.addListener(({ menuItemId }) => {\n openDevToolsWindow(menuItemId as DevToolsPosition);\n});\n" }, { "path": "extension/src/background/index.ts", "content": "import '../chromeApiMock.js';\nimport configureStore from './store/backgroundStore.js';\nimport openDevToolsWindow, { DevToolsPosition } from './openWindow.js';\nimport { createMenu, removeMenu } from './contextMenus.js';\nimport { getOptions } from '../options/syncOptions.js';\n\n// Expose the extension's store globally to access it from the windows\n// via chrome.runtime.getBackgroundPage\nexport const store = configureStore();\n\n// Listen for keyboard shortcuts\nchrome.commands.onCommand.addListener((shortcut) => {\n openDevToolsWindow(shortcut as DevToolsPosition);\n});\n\n// Disable the action by default and create the context menu when installed\nchrome.runtime.onInstalled.addListener(() => {\n void chrome.action.disable();\n\n getOptions((option) => {\n if (option.showContextMenus) createMenu();\n });\n});\n\n// Create or Remove context menu when config changed\nchrome.storage.onChanged.addListener((changes) => {\n if (changes.showContextMenus) {\n if (changes.showContextMenus.newValue) createMenu();\n else void removeMenu();\n }\n});\n\n// https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#keep_a_service_worker_alive_continuously\nsetInterval(\n () =>\n void chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() }),\n 20000,\n);\n" }, { "path": "extension/src/background/logging.ts", "content": "import { LIFTED_ACTION } from '@redux-devtools/app';\nimport { store } from './index.js';\n\nexport function getReport(\n reportId: string,\n tabId: string | number,\n instanceId: number,\n) {\n chrome.storage.local.get<{\n 's:hostname': string | undefined;\n 's:port': string | undefined;\n 's:secure': string | undefined;\n }>(['s:hostname', 's:port', 's:secure'], (options) => {\n if (!options['s:hostname'] || !options['s:port']) return;\n const url = `${options['s:secure'] ? 'https' : 'http'}://${\n options['s:hostname']\n }:${options['s:port']}`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'content-type': 'application/json',\n },\n body: JSON.stringify({ op: 'get', id: reportId }),\n })\n .then((response) => {\n return response.json();\n })\n .then((json) => {\n const { payload, preloadedState } = json;\n if (!payload) return;\n store.dispatch({\n type: LIFTED_ACTION,\n message: 'IMPORT',\n state: JSON.stringify({ payload, preloadedState }),\n id: tabId,\n instanceId: `${tabId}/${instanceId}`,\n });\n })\n .catch(function (err) {\n /* eslint-disable no-console */\n console.warn(err);\n /* eslint-enable no-console */\n });\n });\n}\n" }, { "path": "extension/src/background/openWindow.ts", "content": "export type DevToolsPosition = 'devtools-window' | 'devtools-remote';\n\nconst windows: { [K in DevToolsPosition]?: number } = {};\n\nexport default function openDevToolsWindow(position: DevToolsPosition) {\n if (!windows[position]) {\n createWindow(position);\n } else {\n chrome.windows.update(windows[position], { focused: true }, () => {\n if (chrome.runtime.lastError) createWindow(position);\n });\n }\n}\n\nfunction createWindow(position: DevToolsPosition) {\n const url = chrome.runtime.getURL(getPath(position));\n chrome.windows.create({ type: 'popup', url }, (win) => {\n windows[position] = win!.id;\n if (navigator.userAgent.includes('Firefox')) {\n void chrome.windows.update(win!.id!, { focused: true });\n }\n });\n}\n\nfunction getPath(position: DevToolsPosition) {\n switch (position) {\n case 'devtools-window':\n return 'devpanel.html';\n case 'devtools-remote':\n return 'remote.html';\n default:\n throw new Error('Unrecognized position');\n }\n}\n" }, { "path": "extension/src/background/store/apiMiddleware.ts", "content": "import {\n CustomAction,\n DispatchAction as AppDispatchAction,\n LibConfig,\n LIFTED_ACTION,\n nonReduxDispatch,\n REMOVE_INSTANCE,\n SET_PERSIST,\n SetPersistAction,\n stringifyJSON,\n TOGGLE_PERSIST,\n UPDATE_STATE,\n} from '@redux-devtools/app';\nimport type { Options, OptionsMessage } from '../../options/syncOptions.js';\nimport openDevToolsWindow, { DevToolsPosition } from '../openWindow.js';\nimport { getReport } from '../logging.js';\nimport { Action, Dispatch, Middleware } from 'redux';\nimport type {\n ContentScriptToBackgroundMessage,\n SplitMessage,\n} from '../../contentScript/index.js';\nimport type {\n ErrorMessage,\n PageScriptToContentScriptMessageForwardedToMonitors,\n PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance,\n} from '../../pageScript/api/index.js';\nimport { LiftedState } from '@redux-devtools/instrument';\nimport type {\n BackgroundAction,\n LiftedActionAction,\n} from './backgroundStore.js';\nimport type { Position } from '../../pageScript/api/openWindow.js';\nimport type { BackgroundState } from './backgroundReducer.js';\nimport { store } from '../index.js';\n\ninterface TabMessageBase {\n readonly type: string;\n readonly state?: string | undefined;\n readonly id?: string;\n}\n\ninterface StartAction extends TabMessageBase {\n readonly type: 'START';\n readonly state?: never;\n readonly id?: never;\n}\n\ninterface StopAction extends TabMessageBase {\n readonly type: 'STOP';\n readonly state?: never;\n readonly id?: never;\n}\n\ninterface OptionsAction {\n readonly type: 'OPTIONS';\n readonly options: Options;\n}\n\ninterface DispatchAction extends TabMessageBase {\n readonly type: 'DISPATCH';\n readonly action: AppDispatchAction;\n readonly state: string | undefined;\n readonly id: string;\n}\n\ninterface ImportAction extends TabMessageBase {\n readonly type: 'IMPORT';\n readonly action: undefined;\n readonly state: string | undefined;\n readonly id: string;\n}\n\ninterface ActionAction extends TabMessageBase {\n readonly type: 'ACTION';\n readonly action: string | CustomAction;\n readonly state: string | undefined;\n readonly id: string;\n}\n\ninterface ExportAction extends TabMessageBase {\n readonly type: 'EXPORT';\n readonly action: undefined;\n readonly state: string | undefined;\n readonly id: string;\n}\n\nexport interface NAAction {\n readonly type: 'NA';\n readonly id: string | number;\n}\n\ninterface InitMessage> {\n readonly type: 'INIT';\n readonly payload: string;\n instanceId: string;\n readonly source: '@devtools-page';\n action?: string;\n name?: string | undefined;\n liftedState?: LiftedState;\n libConfig?: LibConfig;\n}\n\ninterface LiftedMessage {\n type: 'LIFTED';\n liftedState: { isPaused: boolean | undefined };\n instanceId: number;\n source: '@devtools-page';\n}\n\ninterface SerializedPartialLiftedState {\n readonly stagedActionIds: readonly number[];\n readonly currentStateIndex: number;\n readonly nextActionId: number;\n}\n\ninterface SerializedPartialStateMessage {\n readonly type: 'PARTIAL_STATE';\n readonly payload: SerializedPartialLiftedState;\n readonly source: '@devtools-page';\n instanceId: number;\n readonly maxAge: number;\n readonly actionsById: string;\n readonly computedStates: string;\n readonly committedState: boolean;\n}\n\ninterface SerializedExportMessage {\n readonly type: 'EXPORT';\n readonly payload: string;\n readonly committedState: string | undefined;\n readonly source: '@devtools-page';\n instanceId: number;\n}\n\ninterface SerializedActionMessage {\n readonly type: 'ACTION';\n readonly payload: string;\n readonly source: '@devtools-page';\n instanceId: number;\n readonly action: string;\n readonly maxAge: number;\n readonly nextActionId: number;\n}\n\ninterface SerializedStateMessage> {\n readonly type: 'STATE';\n readonly payload: Omit<\n LiftedState,\n 'actionsById' | 'computedStates' | 'committedState'\n >;\n readonly source: '@devtools-page';\n instanceId: string;\n readonly libConfig?: LibConfig;\n readonly actionsById: string;\n readonly computedStates: string;\n readonly committedState: boolean;\n}\n\nexport type UpdateStateRequest> =\n | InitMessage\n | LiftedMessage\n | SerializedPartialStateMessage\n | SerializedExportMessage\n | SerializedActionMessage\n | SerializedStateMessage;\n\ninterface UpdateStateAction> {\n readonly type: typeof UPDATE_STATE;\n request: UpdateStateRequest;\n readonly id: string | number;\n}\n\ntype SplitUpdateStateRequestStart> = {\n split: 'start';\n} & Partial>;\n\ninterface SplitUpdateStateRequestChunk {\n readonly split: 'chunk';\n readonly chunk: [string, string];\n}\n\ninterface SplitUpdateStateRequestEnd {\n readonly split: 'end';\n}\n\nexport type SplitUpdateStateRequest> =\n | SplitUpdateStateRequestStart\n | SplitUpdateStateRequestChunk\n | SplitUpdateStateRequestEnd;\n\ninterface SplitUpdateStateAction> {\n readonly type: typeof UPDATE_STATE;\n request: SplitUpdateStateRequest;\n readonly id: string | number;\n}\n\nexport type TabMessage =\n | StartAction\n | StopAction\n | OptionsAction\n | DispatchAction\n | ImportAction\n | ActionAction\n | ExportAction;\nexport type PanelMessageWithoutNA> =\n | ErrorMessage\n | UpdateStateAction\n | SetPersistAction;\nexport type PanelMessage> =\n | PanelMessageWithoutNA\n | NAAction;\nexport type PanelMessageWithSplitAction> =\n | PanelMessage\n | SplitUpdateStateAction;\n\ntype TabPort = Omit & {\n postMessage: (message: TabMessage) => void;\n};\ntype PanelPort = Omit & {\n postMessage: >(\n message: PanelMessageWithSplitAction,\n ) => void;\n};\n\nexport const CONNECTED = 'socket/CONNECTED';\nexport const DISCONNECTED = 'socket/DISCONNECTED';\nconst connections: {\n readonly tab: { [K in number | string]: TabPort };\n readonly panel: { [K in number | string]: PanelPort };\n} = {\n tab: {},\n panel: {},\n};\nconst chunks: {\n [instanceId: string]: PageScriptToContentScriptMessageForwardedToMonitors<\n unknown,\n Action\n >;\n} = {};\nlet monitors = 0;\n\nconst getId = (sender: chrome.runtime.MessageSender, name?: string) =>\n sender.tab ? sender.tab.id! : name || sender.id!;\n\ntype MonitorAction> =\n | NAAction\n | ErrorMessage\n | UpdateStateAction\n | SetPersistAction;\n\n// Chrome message limit is 64 MB, but we're using 32 MB to include other object's parts\nconst maxChromeMsgSize = 32 * 1024 * 1024;\n\nfunction toMonitors>(action: MonitorAction) {\n console.log(`Message to monitors: ${action.type}`);\n\n for (const port of Object.values(connections.panel)) {\n try {\n port.postMessage(action);\n } catch (err) {\n if (\n action.type !== UPDATE_STATE ||\n err == null ||\n (err as Error).message !==\n 'Message length exceeded maximum allowed length.'\n ) {\n throw err;\n }\n\n const splitMessageStart: SplitUpdateStateRequestStart = {\n split: 'start',\n };\n const toSplit: [string, string][] = [];\n let size = 0;\n for (const [key, value] of Object.entries(\n action.request as unknown as Record,\n )) {\n if (typeof value === 'string') {\n size += value.length;\n if (size > maxChromeMsgSize) {\n toSplit.push([key, value]);\n continue;\n }\n }\n\n (splitMessageStart as any)[key as keyof typeof splitMessageStart] =\n value;\n }\n\n port.postMessage({ ...action, request: splitMessageStart });\n\n for (let i = 0; i < toSplit.length; i++) {\n for (let j = 0; j < toSplit[i][1].length; j += maxChromeMsgSize) {\n port.postMessage({\n ...action,\n request: {\n split: 'chunk',\n chunk: [\n toSplit[i][0],\n toSplit[i][1].substring(j, j + maxChromeMsgSize),\n ],\n },\n });\n }\n }\n\n port.postMessage({ ...action, request: { split: 'end' } });\n }\n }\n}\n\ninterface ImportMessage {\n readonly message: 'IMPORT';\n readonly id: string | number;\n readonly instanceId: string;\n readonly state: string;\n readonly action?: never;\n}\n\ntype ToContentScriptMessage = ImportMessage | LiftedActionAction;\n\nfunction toContentScript(messageBody: ToContentScriptMessage) {\n console.log(`Message to tab ${messageBody.id}: ${messageBody.message}`);\n\n if (messageBody.message === 'DISPATCH') {\n const { message, action, id, instanceId, state } = messageBody;\n connections.tab[id!].postMessage({\n type: message,\n action,\n state: nonReduxDispatch(store, message, instanceId, action, state),\n id: instanceId.toString().replace(/^[^/]+\\//, ''),\n });\n } else if (messageBody.message === 'IMPORT') {\n const { message, action, id, instanceId, state } = messageBody;\n connections.tab[id!].postMessage({\n type: message,\n action,\n state: nonReduxDispatch(\n store,\n message,\n instanceId,\n action as unknown as AppDispatchAction,\n state,\n ),\n id: instanceId.toString().replace(/^[^/]+\\//, ''),\n });\n } else if (messageBody.message === 'ACTION') {\n const { message, action, id, instanceId, state } = messageBody;\n connections.tab[id!].postMessage({\n type: message,\n action,\n state: nonReduxDispatch(\n store,\n message,\n instanceId,\n action as unknown as AppDispatchAction,\n state,\n ),\n id: instanceId.toString().replace(/^[^/]+\\//, ''),\n });\n } else if (messageBody.message === 'EXPORT') {\n const { message, action, id, instanceId, state } = messageBody;\n connections.tab[id!].postMessage({\n type: message,\n action,\n state: nonReduxDispatch(\n store,\n message,\n instanceId,\n action as unknown as AppDispatchAction,\n state,\n ),\n id: instanceId.toString().replace(/^[^/]+\\//, ''),\n });\n } else {\n const { message, action, id, instanceId, state } = messageBody;\n connections.tab[id].postMessage({\n type: message,\n action,\n state: nonReduxDispatch(\n store,\n message,\n instanceId,\n action as AppDispatchAction,\n state,\n ),\n id: (instanceId as number).toString().replace(/^[^/]+\\//, ''),\n });\n }\n}\n\nfunction toAllTabs(msg: TabMessage) {\n console.log(`Message to all tabs: ${msg.type}`);\n\n for (const tabPort of Object.values(connections.tab)) {\n tabPort.postMessage(msg);\n }\n}\n\nfunction getReducerError() {\n const instancesState = store.getState().instances;\n const payload = instancesState.states[instancesState.current];\n const computedState = payload.computedStates[payload.currentStateIndex];\n if (!computedState) return false;\n return computedState.error;\n}\n\nfunction togglePersist() {\n const state = store.getState();\n if (state.instances.persisted) {\n for (const id of Object.keys(state.instances.connections)) {\n if (connections.tab[id]) return;\n store.dispatch({ type: REMOVE_INSTANCE, id });\n toMonitors({ type: 'NA', id });\n }\n }\n}\n\ninterface OpenMessage {\n readonly type: 'OPEN';\n readonly position: Position;\n}\n\ninterface OpenOptionsMessage {\n readonly type: 'OPEN_OPTIONS';\n}\n\nexport type SingleMessage = OpenMessage | OpenOptionsMessage | OptionsMessage;\n\ntype BackgroundStoreMessage> =\n | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance\n | SplitMessage\n | SingleMessage;\n\n// Receive messages from content scripts\nfunction messaging>(\n request: BackgroundStoreMessage,\n sender: chrome.runtime.MessageSender,\n) {\n let tabId = getId(sender);\n console.log(`Message from tab ${tabId}: ${request.type ?? request.split}`);\n if (!tabId) return;\n if (sender.frameId) tabId = `${tabId}-${sender.frameId}`;\n\n if (request.type === 'STOP') {\n if (!Object.keys(store.getState().instances.connections).length) {\n store.dispatch({ type: DISCONNECTED });\n }\n return;\n }\n if (request.type === 'OPEN_OPTIONS') {\n void chrome.runtime.openOptionsPage();\n return;\n }\n if (request.type === 'OPTIONS') {\n toAllTabs({ type: 'OPTIONS', options: request.options });\n return;\n }\n if (request.type === 'GET_REPORT') {\n getReport(request.payload, tabId, request.instanceId);\n return;\n }\n if (request.type === 'OPEN') {\n let position: DevToolsPosition = 'devtools-window';\n if (['remote', 'window'].includes(request.position)) {\n position = ('devtools-' + request.position) as DevToolsPosition;\n }\n openDevToolsWindow(position);\n return;\n }\n if (request.type === 'ERROR') {\n if (request.payload) {\n toMonitors(request);\n return;\n }\n if (!request.message) return;\n const reducerError = getReducerError();\n void chrome.notifications.create('app-error', {\n type: 'basic',\n title: reducerError\n ? 'An error occurred in the reducer'\n : 'An error occurred in the app',\n message: reducerError || request.message,\n iconUrl: 'img/logo/48x48.png',\n isClickable: !!reducerError,\n });\n return;\n }\n\n const action: UpdateStateAction = {\n type: UPDATE_STATE,\n request,\n id: tabId,\n } as UpdateStateAction;\n const instanceId = `${tabId}/${request.instanceId}`;\n if ('split' in request) {\n if (request.split === 'start') {\n chunks[instanceId] = request as any;\n return;\n }\n if (request.split === 'chunk') {\n (chunks[instanceId] as any)[request.chunk[0]] =\n ((chunks[instanceId] as any)[request.chunk[0]] || '') +\n request.chunk[1];\n return;\n }\n action.request = chunks[instanceId] as any;\n delete chunks[instanceId];\n }\n if (request.instanceId) {\n action.request.instanceId = instanceId;\n }\n store.dispatch(action);\n\n toMonitors(action);\n}\n\nfunction disconnect(\n type: 'tab' | 'panel',\n id: number | string,\n listener: (message: any, port: chrome.runtime.Port) => void,\n) {\n return function disconnectListener() {\n console.log(`Disconnected from ${type} ${id}`);\n\n const p = connections[type][id];\n if (listener && p) p.onMessage.removeListener(listener);\n if (p) p.onDisconnect.removeListener(disconnectListener);\n delete connections[type][id];\n if (type === 'tab') {\n if (!store.getState().instances.persisted) {\n store.dispatch({ type: REMOVE_INSTANCE, id });\n toMonitors({ type: 'NA', id });\n }\n } else {\n monitors--;\n if (monitors === 0) toAllTabs({ type: 'STOP' });\n }\n };\n}\n\nfunction onConnect>(port: chrome.runtime.Port) {\n let id: number | string;\n let listener;\n\n store.dispatch({ type: CONNECTED, port });\n\n if (port.name === 'tab') {\n id = getId(port.sender!);\n console.log(`Connected to tab ${id}`);\n if (port.sender!.frameId) id = `${id}-${port.sender!.frameId}`;\n connections.tab[id] = port;\n listener = (msg: ContentScriptToBackgroundMessage) => {\n console.log(`Message from tab ${id}: ${msg.name}`);\n if (msg.name === 'INIT_INSTANCE') {\n if (typeof id === 'number') {\n void chrome.action.enable(id);\n void chrome.action.setIcon({ tabId: id, path: 'img/logo/38x38.png' });\n }\n if (monitors > 0) port.postMessage({ type: 'START' });\n\n const state = store.getState();\n if (state.instances.persisted) {\n const instanceId = `${id}/${msg.instanceId}`;\n const persistedState = state.instances.states[instanceId];\n if (!persistedState) return;\n toContentScript({\n message: 'IMPORT',\n id,\n instanceId,\n state: stringifyJSON(\n persistedState,\n state.instances.options[instanceId].serialize,\n ),\n });\n }\n return;\n }\n if (msg.name === 'RELAY') {\n messaging(msg.message, port.sender!);\n }\n };\n port.onMessage.addListener(listener);\n port.onDisconnect.addListener(disconnect('tab', id, listener));\n } else if (port.name && port.name.indexOf('monitor') === 0) {\n // devpanel\n id = getId(port.sender!, port.name);\n console.log(`Connected to monitor ${id}`);\n connections.panel[id] = port;\n monitors++;\n toAllTabs({ type: 'START' });\n listener = (msg: BackgroundAction) => {\n console.log(`Message from monitor ${id}: ${msg.type}`);\n store.dispatch(msg);\n };\n port.onMessage.addListener(listener);\n port.onDisconnect.addListener(disconnect('panel', id, listener));\n\n const { current } = store.getState().instances;\n if (current !== 'default') {\n const connectionId = Object.entries(\n store.getState().instances.connections,\n ).find(([, instanceIds]) => instanceIds.includes(current))?.[0];\n const options = store.getState().instances.options[current];\n const state = store.getState().instances.states[current];\n const { actionsById, computedStates, committedState, ...rest } = state;\n toMonitors({\n type: UPDATE_STATE,\n request: {\n type: 'STATE',\n payload: rest as Omit<\n LiftedState,\n 'actionsById' | 'computedStates' | 'committedState'\n >,\n source: '@devtools-page',\n instanceId:\n typeof current === 'number' ? current.toString() : current,\n actionsById: stringifyJSON(actionsById, options.serialize),\n computedStates: stringifyJSON(computedStates, options.serialize),\n committedState: typeof committedState !== 'undefined',\n },\n id: connectionId ?? current,\n });\n }\n }\n}\n\nchrome.runtime.onConnect.addListener(onConnect);\nchrome.runtime.onConnectExternal.addListener(onConnect);\nchrome.runtime.onMessage.addListener(messaging);\nchrome.runtime.onMessageExternal.addListener(messaging);\n\nchrome.notifications.onClicked.addListener((id) => {\n void chrome.notifications.clear(id);\n openDevToolsWindow('devtools-window');\n});\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst api: Middleware<{}, BackgroundState, Dispatch> =\n (store) => (next) => (untypedAction) => {\n const action = untypedAction as BackgroundAction;\n\n if (action.type === LIFTED_ACTION) toContentScript(action);\n else if (action.type === TOGGLE_PERSIST) {\n togglePersist();\n toMonitors({\n type: SET_PERSIST,\n payload: !store.getState().instances.persisted,\n });\n }\n return next(action);\n };\n\nexport default api;\n" }, { "path": "extension/src/background/store/backgroundReducer.ts", "content": "import { combineReducers, Reducer } from 'redux';\nimport { instances, InstancesState } from '@redux-devtools/app';\nimport { BackgroundAction } from './backgroundStore.js';\n\nexport interface BackgroundState {\n readonly instances: InstancesState;\n}\n\nconst rootReducer: Reducer<\n BackgroundState,\n BackgroundAction,\n Partial\n> = combineReducers({\n instances,\n}) as any;\n\nexport default rootReducer;\n" }, { "path": "extension/src/background/store/backgroundStore.ts", "content": "import { createStore, applyMiddleware } from 'redux';\nimport {\n CustomAction,\n DispatchAction,\n LIFTED_ACTION,\n StoreActionWithoutLiftedAction,\n} from '@redux-devtools/app';\nimport rootReducer, { BackgroundState } from './backgroundReducer.js';\nimport api, { CONNECTED, DISCONNECTED } from './apiMiddleware.js';\n\ninterface LiftedActionActionBase {\n action?: DispatchAction | string | CustomAction;\n state?: string;\n toAll?: boolean;\n readonly instanceId: string | number;\n readonly id: string | number | undefined;\n}\ninterface LiftedActionDispatchAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'DISPATCH';\n action: DispatchAction;\n toAll?: boolean;\n}\ninterface LiftedActionImportAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'IMPORT';\n state: string;\n preloadedState?: unknown | undefined;\n action?: never;\n}\ninterface LiftedActionActionAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'ACTION';\n action: string | CustomAction;\n}\ninterface LiftedActionExportAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'EXPORT';\n toExport: boolean;\n action?: never;\n}\nexport type LiftedActionAction =\n | LiftedActionDispatchAction\n | LiftedActionImportAction\n | LiftedActionActionAction\n | LiftedActionExportAction;\n\ninterface ConnectedAction {\n readonly type: typeof CONNECTED;\n}\n\ninterface DisconnectedAction {\n readonly type: typeof DISCONNECTED;\n}\n\nexport type BackgroundAction =\n | StoreActionWithoutLiftedAction\n | LiftedActionAction\n | ConnectedAction\n | DisconnectedAction;\n\nexport default function configureStore(\n preloadedState?: Partial,\n) {\n return createStore(rootReducer, preloadedState, applyMiddleware(api));\n /*\n let enhancer;\n if (process.env.NODE_ENV === 'production') {\n enhancer = applyMiddleware(api);\n } else {\n const logger = require('redux-logger');\n enhancer = applyMiddleware(api, logger());\n }\n\n return createStore(rootReducer, preloadedState, enhancer);\n*/\n}\n" }, { "path": "extension/src/chromeApiMock.ts", "content": "// Mock not supported chrome.* API for Firefox and Electron\n\nconst isElectron = navigator.userAgent.includes('Electron');\nconst isFirefox = navigator.userAgent.includes('Firefox');\n\n// Background page only\nif (\n (isElectron && location.pathname === '/background.bundle.js') ||\n isFirefox\n) {\n (chrome.runtime as any).onConnectExternal = {\n addListener() {\n // do nothing.\n },\n };\n (chrome.runtime as any).onMessageExternal = {\n addListener() {\n // do nothing.\n },\n };\n\n if (isElectron) {\n (chrome.notifications as any) = {\n onClicked: {\n addListener() {\n // do nothing.\n },\n },\n create() {\n // do nothing.\n },\n clear() {\n // do nothing.\n },\n };\n (chrome.contextMenus as any) = {\n onClicked: {\n addListener() {\n // do nothing.\n },\n },\n };\n (chrome.commands as any) = {\n onCommand: {\n addListener() {\n // do nothing.\n },\n },\n };\n } else {\n (chrome.storage as any).sync = chrome.storage.local;\n (chrome.runtime as any).onInstalled = {\n addListener: (cb: any) => cb(),\n };\n }\n}\n\nif (isElectron) {\n if (!chrome.storage.local || !chrome.storage.local.remove) {\n (chrome.storage as any).local = {\n set(items: { [key: string]: string }, callback: () => void) {\n for (const [key, value] of Object.entries(items)) {\n localStorage.setItem(key, value);\n }\n if (callback) {\n callback();\n }\n },\n get(\n keys: { [key: string]: any },\n callback: (items: { [key: string]: any }) => void,\n ) {\n const result = Object.fromEntries(\n Object.entries(keys).map(([key, value]) => [\n key,\n localStorage.getItem(key) ?? value,\n ]),\n );\n if (callback) {\n callback(result);\n }\n },\n // Electron ~ 1.4.6\n remove(keys: string | string[], callback: () => void) {\n if (Array.isArray(keys)) {\n for (const key of keys) {\n localStorage.removeItem(key);\n }\n } else {\n localStorage.removeItem(keys);\n }\n if (callback) {\n callback();\n }\n },\n };\n }\n // Avoid error: chrome.runtime.sendMessage is not supported responseCallback\n const originSendMessage = (chrome.runtime as any).sendMessage;\n (chrome.runtime as any).sendMessage = function (...args: unknown[]) {\n if (process.env.NODE_ENV === 'development') {\n return originSendMessage(...args);\n }\n if (typeof args[arguments.length - 1] === 'function') {\n Array.prototype.pop.call(args);\n }\n return originSendMessage(...args);\n };\n}\n\nif (isFirefox || isElectron) {\n (chrome.storage as any).sync = chrome.storage.local;\n}\n" }, { "path": "extension/src/contentScript/index.ts", "content": "import '../chromeApiMock.js';\nimport {\n getOptions,\n isAllowed,\n Options,\n prefetchOptions,\n prepareOptionsForPage,\n} from '../options/syncOptions.js';\nimport type { TabMessage } from '../background/store/apiMiddleware.js';\nimport type {\n PageScriptToContentScriptMessage,\n PageScriptToContentScriptMessageWithoutDisconnect,\n PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance,\n} from '../pageScript/api/index.js';\nimport { Action } from 'redux';\nimport {\n CustomAction,\n DispatchAction as AppDispatchAction,\n} from '@redux-devtools/app';\nimport { LiftedState } from '@redux-devtools/instrument';\n\nconst source = '@devtools-extension';\nconst pageSource = '@devtools-page';\n// Chrome message limit is 64 MB, but we're using 32 MB to include other object's parts\nconst maxChromeMsgSize = 32 * 1024 * 1024;\nlet connected = false;\nlet bg: chrome.runtime.Port | undefined;\n\ndeclare global {\n interface Window {\n devToolsExtensionID?: string;\n }\n}\n\ninterface StartAction {\n readonly type: 'START';\n readonly state: undefined;\n readonly id: undefined;\n readonly source: typeof source;\n}\n\ninterface StopAction {\n readonly type: 'STOP';\n readonly state: undefined;\n readonly id: undefined;\n readonly source: typeof source;\n readonly failed?: boolean;\n}\n\ninterface DispatchAction {\n readonly type: 'DISPATCH';\n readonly payload: AppDispatchAction;\n readonly state: string | undefined;\n readonly id: string;\n readonly source: typeof source;\n}\n\ninterface ImportAction {\n readonly type: 'IMPORT';\n readonly payload: undefined;\n readonly state: string | undefined;\n readonly id: string;\n readonly source: typeof source;\n}\n\ninterface ActionAction {\n readonly type: 'ACTION';\n readonly payload: string | CustomAction;\n readonly state: string | undefined;\n readonly id: string;\n readonly source: typeof source;\n}\n\ninterface ExportAction {\n readonly type: 'EXPORT';\n readonly payload: undefined;\n readonly state: string | undefined;\n readonly id: string;\n readonly source: typeof source;\n}\n\ninterface UpdateAction {\n readonly type: 'UPDATE';\n readonly state: string | undefined;\n readonly id: string;\n readonly source: typeof source;\n}\n\ninterface OptionsAction {\n readonly type: 'OPTIONS';\n readonly options: Options;\n readonly id: undefined;\n readonly source: typeof source;\n}\n\nexport type ContentScriptToPageScriptMessage =\n | StartAction\n | StopAction\n | DispatchAction\n | ImportAction\n | ActionAction\n | ExportAction\n | UpdateAction\n | OptionsAction;\n\ninterface ImportStatePayload> {\n readonly type: 'IMPORT_STATE';\n readonly nextLiftedState: LiftedState | readonly A[];\n readonly preloadedState?: S;\n}\n\ninterface ImportStateDispatchAction> {\n readonly type: 'DISPATCH';\n readonly payload: ImportStatePayload;\n}\n\nexport type ListenerMessage> =\n | StartAction\n | StopAction\n | DispatchAction\n | ImportAction\n | ActionAction\n | ExportAction\n | UpdateAction\n | OptionsAction\n | ImportStateDispatchAction;\n\nfunction postToPageScript(message: ContentScriptToPageScriptMessage) {\n window.postMessage(message, '*');\n}\n\nfunction connect() {\n // Connect to the background script\n connected = true;\n const name = 'tab';\n if (window.devToolsExtensionID) {\n bg = chrome.runtime.connect(window.devToolsExtensionID, { name });\n } else {\n bg = chrome.runtime.connect({ name });\n }\n\n // Relay background script messages to the page script\n bg.onMessage.addListener((message: TabMessage) => {\n if ('action' in message) {\n if (message.type === 'DISPATCH') {\n postToPageScript({\n type: message.type,\n payload: message.action,\n state: message.state,\n id: message.id,\n source,\n });\n } else if (message.type === 'ACTION') {\n postToPageScript({\n type: message.type,\n payload: message.action,\n state: message.state,\n id: message.id,\n source,\n });\n } else {\n postToPageScript({\n type: message.type,\n payload: message.action,\n state: message.state,\n id: message.id,\n source,\n });\n }\n } else if (message.type === 'OPTIONS') {\n postToPageScript({\n type: message.type,\n options: prepareOptionsForPage(message.options),\n id: undefined,\n source,\n });\n } else {\n postToPageScript({\n type: message.type,\n state: message.state,\n id: message.id,\n source,\n });\n }\n });\n\n bg.onDisconnect.addListener(handleDisconnect);\n}\n\nfunction handleDisconnect() {\n window.removeEventListener('message', handleMessages);\n window.postMessage({ type: 'STOP', failed: true, source }, '*');\n bg = undefined;\n}\n\ninterface SplitMessageBase {\n readonly type?: never;\n}\n\ninterface SplitMessageStart extends SplitMessageBase {\n readonly instanceId: number;\n readonly source: typeof pageSource;\n readonly split: 'start';\n}\n\ninterface SplitMessageChunk extends SplitMessageBase {\n readonly instanceId: number;\n readonly source: typeof pageSource;\n readonly split: 'chunk';\n readonly chunk: [string, string];\n}\n\ninterface SplitMessageEnd extends SplitMessageBase {\n readonly instanceId: number;\n readonly source: typeof pageSource;\n readonly split: 'end';\n}\n\nexport type SplitMessage =\n | SplitMessageStart\n | SplitMessageChunk\n | SplitMessageEnd;\n\nfunction tryCatch>(\n fn: (\n args:\n | PageScriptToContentScriptMessageWithoutDisconnect\n | SplitMessage,\n ) => void,\n args: PageScriptToContentScriptMessageWithoutDisconnect,\n) {\n try {\n return fn(args);\n } catch (err) {\n if (\n (err as Error).message ===\n 'Message length exceeded maximum allowed length.'\n ) {\n const instanceId = (args as any).instanceId;\n const newArgs = {\n split: 'start',\n };\n const toSplit: [string, string][] = [];\n let size = 0;\n let arg;\n Object.keys(args).map((key) => {\n arg = args[key as keyof typeof args];\n if (typeof arg === 'string') {\n size += arg.length;\n if (size > maxChromeMsgSize) {\n toSplit.push([key, arg]);\n return;\n }\n }\n newArgs[key as keyof typeof newArgs] = arg;\n });\n fn(newArgs as SplitMessage);\n for (let i = 0; i < toSplit.length; i++) {\n for (let j = 0; j < toSplit[i][1].length; j += maxChromeMsgSize) {\n fn({\n instanceId,\n source: pageSource,\n split: 'chunk',\n chunk: [toSplit[i][0], toSplit[i][1].substr(j, maxChromeMsgSize)],\n });\n }\n }\n return fn({ instanceId, source: pageSource, split: 'end' });\n }\n handleDisconnect();\n /* eslint-disable no-console */\n if (process.env.NODE_ENV !== 'production') {\n console.error('Failed to send message', err);\n }\n /* eslint-enable no-console */\n }\n}\n\ninterface InitInstanceContentScriptToBackgroundMessage {\n readonly name: 'INIT_INSTANCE';\n readonly instanceId: number;\n}\n\ninterface RelayMessage> {\n readonly name: 'RELAY';\n readonly message:\n | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance\n | SplitMessage;\n}\n\nexport type ContentScriptToBackgroundMessage> =\n | InitInstanceContentScriptToBackgroundMessage\n | RelayMessage;\n\nfunction postToBackground>(\n message: ContentScriptToBackgroundMessage,\n) {\n bg!.postMessage(message);\n}\n\nfunction send>(\n message:\n | PageScriptToContentScriptMessageWithoutDisconnect\n | SplitMessage,\n) {\n if (!connected) connect();\n if (message.type === 'INIT_INSTANCE') {\n getOptions((options) => {\n postToPageScript({\n type: 'OPTIONS',\n options: prepareOptionsForPage(options),\n id: undefined,\n source,\n });\n });\n postToBackground({ name: 'INIT_INSTANCE', instanceId: message.instanceId });\n } else {\n postToBackground({ name: 'RELAY', message });\n }\n}\n\n// Resend messages from the page to the background script\nfunction handleMessages>(\n event: MessageEvent>,\n) {\n if (!isAllowed()) return;\n if (!event || event.source !== window || typeof event.data !== 'object') {\n return;\n }\n const message = event.data;\n if (message.source !== pageSource) return;\n if (message.type === 'DISCONNECT') {\n if (bg) {\n bg.disconnect();\n connected = false;\n }\n return;\n }\n\n tryCatch(send, message);\n}\n\nprefetchOptions();\n\nwindow.addEventListener('message', handleMessages, false);\n" }, { "path": "extension/src/devpanel/devpanel.pug", "content": "doctype html\r\n\r\nhtml\r\n head\r\n meta(charset='UTF-8')\r\n title Redux DevTools\r\n include ../style.pug\r\n\r\n body\r\n #root\r\n div(style='display: flex; justify-content: center; align-items: center')\r\n img(\r\n src='/img/loading.svg',\r\n height=300, width=350,\r\n )\r\n link(href='/devpanel.bundle.css', rel='stylesheet')\r\n script(src='/devpanel.bundle.js')\r\n" }, { "path": "extension/src/devpanel/index.tsx", "content": "import '../chromeApiMock.js';\nimport React, { CSSProperties, ReactNode } from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport { Provider } from 'react-redux';\nimport { Persistor } from 'redux-persist';\nimport {\n REMOVE_INSTANCE,\n StoreAction,\n StoreState,\n UPDATE_STATE,\n} from '@redux-devtools/app';\nimport App from '../app/App.js';\nimport configureStore from './store/panelStore.js';\n\nimport { Action, Store } from 'redux';\nimport {\n PanelMessageWithoutNA,\n PanelMessageWithSplitAction,\n SplitUpdateStateRequest,\n UpdateStateRequest,\n} from '../background/store/apiMiddleware.js';\nimport { PersistGate } from 'redux-persist/integration/react';\n\nconst position = location.hash;\nconst messageStyle: CSSProperties = {\n paddingTop: '20px',\n width: '100%',\n textAlign: 'center',\n boxSizing: 'border-box',\n};\n\nlet rendered: boolean | undefined;\nlet currentRoot: Root | undefined;\nlet store: Store | undefined;\nlet persistor: Persistor | undefined;\nlet bgConnection: chrome.runtime.Port;\nlet naTimeout: NodeJS.Timeout;\n\nconst isChrome = !navigator.userAgent.includes('Firefox');\n\nfunction renderNodeAtRoot(node: ReactNode) {\n if (currentRoot) currentRoot.unmount();\n currentRoot = createRoot(document.getElementById('root')!);\n currentRoot.render(node);\n}\n\nfunction renderDevTools() {\n clearTimeout(naTimeout);\n ({ store, persistor } = configureStore(position, bgConnection));\n renderNodeAtRoot(\n \n \n \n \n ,\n );\n rendered = true;\n}\n\nfunction renderNA() {\n if (rendered === false) return;\n rendered = false;\n naTimeout = setTimeout(() => {\n let message = (\n
\n No store found. Make sure to follow{' '}\n \n the instructions\n \n .\n
\n );\n if (\n isChrome &&\n chrome &&\n chrome.devtools &&\n chrome.devtools.inspectedWindow\n ) {\n chrome.devtools.inspectedWindow.getResources((resources) => {\n if (resources[0].url.substr(0, 4) === 'file') {\n message = (\n
\n No store found. Most likely you did not allow access to file URLs.{' '}\n \n See details\n \n .\n
\n );\n }\n\n renderNodeAtRoot(message);\n store = undefined;\n });\n } else {\n renderNodeAtRoot(message);\n store = undefined;\n }\n }, 3500);\n}\n\nlet splitMessage: SplitUpdateStateRequest>;\n\nfunction init() {\n renderNA();\n\n let name = 'monitor';\n if (chrome && chrome.devtools && chrome.devtools.inspectedWindow) {\n name += chrome.devtools.inspectedWindow.tabId;\n }\n bgConnection = chrome.runtime.connect({ name });\n\n bgConnection.onMessage.addListener(\n >(\n message: PanelMessageWithSplitAction,\n ) => {\n if (message.type === 'NA') {\n // TODO Double-check this now that the name is different\n if (message.id === name) renderNA();\n else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });\n } else {\n if (!rendered) renderDevTools();\n\n if (\n message.type === UPDATE_STATE &&\n (message.request as SplitUpdateStateRequest).split\n ) {\n const request = message.request as SplitUpdateStateRequest;\n\n if (request.split === 'start') {\n splitMessage = request;\n return;\n }\n\n if (request.split === 'chunk') {\n if (\n (splitMessage as unknown as Record)[\n request.chunk[0]\n ]\n ) {\n (splitMessage as unknown as Record)[\n request.chunk[0]\n ] += request.chunk[1];\n } else {\n (splitMessage as unknown as Record)[\n request.chunk[0]\n ] = request.chunk[1];\n }\n return;\n }\n\n if (request.split === 'end') {\n store!.dispatch({\n ...message,\n request: splitMessage as UpdateStateRequest,\n });\n return;\n }\n\n throw new Error(\n `Unable to process split message with type: ${(request as any).split}`,\n );\n } else {\n store!.dispatch(message as PanelMessageWithoutNA);\n }\n }\n },\n );\n}\n\nif (position === '#popup') document.body.style.minWidth = '760px';\nif (position !== '#popup') document.body.style.minHeight = '100%';\n\ninit();\n" }, { "path": "extension/src/devpanel/store/panelReducer.ts", "content": "import { combineReducers, Reducer } from 'redux';\nimport {\n connection,\n instances,\n monitor,\n notification,\n reports,\n section,\n socket,\n stateTreeSettings,\n StoreAction,\n StoreState,\n theme,\n} from '@redux-devtools/app';\n\nconst rootReducer: Reducer<\n StoreState,\n StoreAction,\n Partial\n> = combineReducers({\n instances,\n monitor,\n reports,\n notification,\n section,\n socket,\n theme,\n connection,\n stateTreeSettings,\n}) as any;\n\nexport default rootReducer;\n" }, { "path": "extension/src/devpanel/store/panelStore.ts", "content": "import { createStore, applyMiddleware, Reducer, Store } from 'redux';\nimport localForage from 'localforage';\nimport { persistReducer, persistStore } from 'redux-persist';\nimport {\n exportStateMiddleware,\n StoreAction,\n StoreState,\n} from '@redux-devtools/app';\nimport panelDispatcher from './panelSyncMiddleware.js';\nimport rootReducer from './panelReducer.js';\n\nconst persistConfig = {\n key: 'redux-devtools',\n blacklist: ['instances', 'socket'],\n storage: localForage,\n};\n\nconst persistedReducer: Reducer = persistReducer(\n persistConfig,\n rootReducer,\n) as any;\n\nexport default function configureStore(\n position: string,\n bgConnection: chrome.runtime.Port,\n) {\n const enhancer = applyMiddleware(\n exportStateMiddleware,\n panelDispatcher(bgConnection),\n );\n const store = createStore(persistedReducer, enhancer);\n const persistor = persistStore(store as Store);\n return { store, persistor };\n}\n" }, { "path": "extension/src/devpanel/store/panelSyncMiddleware.ts", "content": "import {\n getActiveInstance,\n LIFTED_ACTION,\n SELECT_INSTANCE,\n StoreAction,\n StoreState,\n TOGGLE_PERSIST,\n UPDATE_STATE,\n} from '@redux-devtools/app';\nimport { Dispatch, Middleware, MiddlewareAPI } from 'redux';\n\nfunction selectInstance(\n tabId: number,\n store: MiddlewareAPI, StoreState>,\n next: (action: unknown) => unknown,\n) {\n const instances = store.getState().instances;\n if (instances.current === 'default') return;\n const connections = instances.connections[tabId];\n if (connections && connections.length === 1) {\n next({ type: SELECT_INSTANCE, selected: connections[0] });\n }\n}\n\nfunction getCurrentTabId(next: (tabId: number) => void) {\n chrome.tabs.query(\n {\n active: true,\n lastFocusedWindow: true,\n },\n (tabs) => {\n const tab = tabs[0];\n if (!tab) return;\n next(tab.id!);\n },\n );\n}\n\nfunction panelDispatcher(\n bgConnection: chrome.runtime.Port,\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n): Middleware<{}, StoreState, Dispatch> {\n let autoselected = false;\n\n return (store) => (next) => (untypedAction) => {\n const action = untypedAction as StoreAction;\n\n const result = next(action);\n if (!autoselected && action.type === UPDATE_STATE) {\n autoselected = true;\n\n if (chrome.devtools && chrome.devtools.inspectedWindow) {\n selectInstance(chrome.devtools.inspectedWindow.tabId, store, next);\n } else {\n getCurrentTabId((tabId) => selectInstance(tabId, store, next));\n }\n }\n if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) {\n const instances = store.getState().instances;\n const instanceId = getActiveInstance(instances);\n const id = instances.options[instanceId].connectionId;\n bgConnection.postMessage({ ...action, instanceId, id });\n }\n return result;\n };\n}\n\nexport default panelDispatcher;\n" }, { "path": "extension/src/devtools/devtools.pug", "content": "doctype html\r\n\r\nhtml\r\n head\r\n meta(charset='UTF-8')\r\n title Redux DevTools\r\n\r\n body\r\n #root\r\n script(src='/devtools.bundle.js')\r\n" }, { "path": "extension/src/devtools/index.ts", "content": "chrome.devtools.panels.create(\n 'Redux',\n 'img/logo/scalable.png',\n 'devpanel.html',\n () => {\n // do nothing.\n },\n);\n" }, { "path": "extension/src/options/AllowToRunGroup.tsx", "content": "import React from 'react';\nimport { OptionsProps } from './Options.js';\n\nexport default function AllowToRunGroup({ options, saveOption }: OptionsProps) {\n const AllowToRunState = {\n EVERYWHERE: true,\n ON_SPECIFIC_URLS: false,\n };\n\n return (\n
\n Allow to run\n\n
\n saveOption('inject', AllowToRunState.EVERYWHERE)}\n />\n \n
\n\n
\n \n saveOption('inject', AllowToRunState.ON_SPECIFIC_URLS)\n }\n />\n \n
\n saveOption('urls', e.target.value)}\n />\n
Each RegExp from the new line
\n
\n
\n );\n}\n" }, { "path": "extension/src/options/ContextMenuGroup.tsx", "content": "import React from 'react';\nimport { OptionsProps } from './Options.js';\n\nexport default function ContextMenuGroup({\n options,\n saveOption,\n}: OptionsProps) {\n return (\n
\n Context Menu\n\n
\n saveOption('showContextMenus', e.target.checked)}\n />\n \n
\n Add Redux DevTools to right-click context menu\n
\n
\n
\n );\n}\n" }, { "path": "extension/src/options/EditorGroup.tsx", "content": "import React from 'react';\nimport { OptionsProps } from './Options.js';\n\nexport default function EditorGroup({ options, saveOption }: OptionsProps) {\n const EditorState = {\n BROWSER: 0,\n EXTERNAL: 1,\n };\n\n return (\n
\n Editor for stack traces\n\n
\n saveOption('useEditor', EditorState.BROWSER)}\n />\n \n
\n\n \n saveOption('useEditor', EditorState.EXTERNAL)}\n />\n \n \n saveOption('editor', e.target.value.replace(/\\W/g, ''))\n }\n />\n \n
\n \n Absolute path to the project directory to open:\n \n
\n \n saveOption('projectPath', e.target.value.replace('\\n', ''))\n }\n />\n
\n Run `pwd` in your project root directory to get it\n
\n
\n
\n );\n}\n" }, { "path": "extension/src/options/FilterGroup.tsx", "content": "import React from 'react';\nimport { FilterState } from '../pageScript/api/filters.js';\nimport { OptionsProps } from './Options.js';\n\nexport default function FilterGroup({ options, saveOption }: OptionsProps) {\n return (\n
\n \n Filter actions in DevTools\n \n\n
\n saveOption('filter', FilterState.DO_NOT_FILTER)}\n />\n \n
\n\n
\n saveOption('filter', FilterState.DENYLIST_SPECIFIC)}\n />\n \n
\n saveOption('denylist', e.target.value)}\n />\n
Each action from the new line
\n
\n\n
\n saveOption('filter', FilterState.ALLOWLIST_SPECIFIC)}\n />\n \n
\n saveOption('allowlist', e.target.value)}\n />\n
Each action from the new line
\n
\n
\n );\n}\n" }, { "path": "extension/src/options/MiscellaneousGroup.tsx", "content": "import React from 'react';\nimport { OptionsProps } from './Options.js';\n\nexport default function MiscellaneousGroup({\n options,\n saveOption,\n}: OptionsProps) {\n return (\n
\n Miscellaneous\n\n
\n {' '}\n saveOption('maxAge', Number(e.target.value))}\n />{' '}\n \n
\n When the number is reached, DevTools start removing the oldest\n actions. Improves the DevTools performance.{' '}\n \n More info\n \n
\n
\n\n
\n saveOption('shouldCatchErrors', e.target.checked)}\n />\n \n
\n Show the browser notifications when errors occur in the app\n
\n
\n
\n );\n}\n" }, { "path": "extension/src/options/Options.tsx", "content": "import React from 'react';\nimport EditorGroup from './EditorGroup.js';\nimport FilterGroup from './FilterGroup.js';\nimport AllowToRunGroup from './AllowToRunGroup.js';\nimport MiscellaneousGroup from './MiscellaneousGroup.js';\nimport ContextMenuGroup from './ContextMenuGroup.js';\nimport { Options } from './syncOptions.js';\n\nexport interface OptionsProps {\n readonly options: Options;\n readonly saveOption: (\n name: K,\n value: Options[K],\n ) => void;\n}\n\nexport default function OptionsComponent(props: OptionsProps) {\n return (\n
\n \n \n \n \n \n
\n
\n
\n Setting options here is discouraged, and will not be possible in the\n next major release. Please{' '}\n \n specify them as parameters\n \n . See{' '}\n \n the issue\n {' '}\n for more details.\n
\n
\n );\n}\n" }, { "path": "extension/src/options/index.tsx", "content": "import '../chromeApiMock.js';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport OptionsComponent from './Options.js';\nimport {\n getOptions,\n Options,\n OptionsMessage,\n saveOption,\n subscribeToOptions,\n} from './syncOptions.js';\n\nsubscribeToOptions((options) => {\n const message: OptionsMessage = { type: 'OPTIONS', options };\n void chrome.runtime.sendMessage(message);\n});\n\nconst renderOptions = (options: Options) => {\n const root = createRoot(document.getElementById('root')!);\n root.render();\n};\n\nsubscribeToOptions(renderOptions);\ngetOptions((options) => {\n renderOptions(options);\n});\n" }, { "path": "extension/src/options/options.pug", "content": "doctype html\r\n\r\nhtml\r\n head\r\n meta(charset='UTF-8')\r\n title Redux DevTools Options\r\n style.\r\n body {\r\n padding: 2px;\r\n min-width: 380px;\r\n }\r\n\r\n .option-group {\r\n /* Reset the default fieldset styles */\r\n margin: initial;\r\n border: initial;\r\n padding: initial;\r\n }\r\n\r\n .option-group + .option-group {\r\n margin-top: 30px;\r\n }\r\n\r\n .option-group__title {\r\n /* Reset the default legend styles */\r\n margin: initial;\r\n padding: initial;\r\n\r\n margin-bottom: 8px;\r\n font-weight: bold;\r\n font-size: 30px;\r\n }\r\n\r\n .option + .option {\r\n margin-top: 5px;\r\n }\r\n\r\n .option__textarea {\r\n margin-top: 2px;\r\n width: 300px;\r\n min-height: 50px;\r\n }\r\n\r\n .option__hint {\r\n margin-top: 2px;\r\n font-size: 10px;\r\n }\r\n\r\n .option__textarea + .option__hint {\r\n margin-top: -2px;\r\n }\r\n\r\n /* Checkbox and radio styling */\r\n .option_type_checkbox .option__element,\r\n .option_type_radio .option__element {\r\n vertical-align: bottom;\r\n }\r\n\r\n .option_type_checkbox .option__label,\r\n .option_type_radio .option__label {\r\n margin-left: 4px;\r\n }\r\n\r\n .option_type_checkbox .option__textarea,\r\n .option_type_checkbox .option__hint,\r\n .option_type_radio .option__textarea,\r\n .option_type_radio .option__hint {\r\n margin-left: 20px;\r\n }\r\n\r\n\r\n /* Checkbox styling */\r\n .option_type_checkbox .option__element {\r\n /* Checkboxes in Chrome are 2px narrower than radio buttons.\r\n These margins align them. */\r\n margin-left: 1px;\r\n /* ...margin-right is 2px instead of 1px\r\n because both radios and checkboxes have initial margin-right of 1px */\r\n margin-right: 2px;\r\n }\r\n\r\n /* Value-based styling */\r\n .option_value_max-age {\r\n margin-left: 20px;\r\n }\r\n\r\n .option_value_max-age .option__element {\r\n width: 50px;\r\n }\r\n\r\n body\r\n #root\r\n script(src='/options.bundle.js')\r\n" }, { "path": "extension/src/options/syncOptions.ts", "content": "import { FilterState, FilterStateValue } from '../pageScript/api/filters.js';\n\nexport interface Options {\n readonly useEditor: number;\n readonly editor: string;\n readonly projectPath: string;\n readonly maxAge: number;\n readonly filter: FilterStateValue;\n readonly allowlist: string;\n readonly denylist: string;\n readonly shouldCatchErrors: boolean;\n readonly inject: boolean;\n readonly urls: string;\n readonly showContextMenus: boolean;\n}\n\ninterface OldOrNewOptions {\n readonly useEditor: number;\n readonly editor: string;\n readonly projectPath: string;\n readonly maxAge: number;\n readonly filter:\n | FilterStateValue\n | 'WHITELIST_SPECIFIC'\n | 'BLACKLIST_SPECIFIC'\n | boolean;\n readonly allowlist: string;\n readonly denylist: string;\n readonly whitelist: string;\n readonly blacklist: string;\n readonly shouldCatchErrors: boolean;\n readonly inject: boolean;\n readonly urls: string;\n readonly showContextMenus: boolean;\n}\n\nlet options: Options | undefined;\nlet subscribers: ((options: Options) => void)[] = [];\n\nexport interface OptionsMessage {\n readonly type: 'OPTIONS';\n readonly options: Options;\n}\n\nexport const saveOption = (\n key: K,\n value: Options[K],\n) => {\n const obj: { [K1 in keyof Options]?: Options[K1] } = {};\n obj[key] = value;\n void chrome.storage.sync.set(obj);\n options![key] = value;\n for (const subscriber of subscribers) {\n subscriber(options!);\n }\n};\n\nconst migrateOldOptions = (oldOptions: OldOrNewOptions): Options => ({\n ...oldOptions,\n filter:\n // Migrate the old `filter` option from 2.2.1\n typeof oldOptions.filter === 'boolean'\n ? oldOptions.filter && oldOptions.whitelist.length > 0\n ? FilterState.ALLOWLIST_SPECIFIC\n : oldOptions.filter\n ? FilterState.DENYLIST_SPECIFIC\n : FilterState.DO_NOT_FILTER\n : oldOptions.filter === 'WHITELIST_SPECIFIC'\n ? FilterState.ALLOWLIST_SPECIFIC\n : oldOptions.filter === 'BLACKLIST_SPECIFIC'\n ? FilterState.DENYLIST_SPECIFIC\n : oldOptions.filter,\n});\n\nexport const getOptions = (callback: (options: Options) => void) => {\n if (options) callback(options);\n else {\n chrome.storage.sync.get(\n {\n useEditor: 0,\n editor: '',\n projectPath: '',\n maxAge: 50,\n filter: FilterState.DO_NOT_FILTER,\n whitelist: '',\n blacklist: '',\n allowlist: '',\n denylist: '',\n shouldCatchErrors: false,\n inject: true,\n urls: '^https?://localhost|0\\\\.0\\\\.0\\\\.0:\\\\d+\\n^https?://.+\\\\.github\\\\.io',\n showContextMenus: true,\n },\n function (items) {\n options = migrateOldOptions(items);\n callback(options);\n },\n );\n }\n};\n\nexport const prefetchOptions = () =>\n getOptions(() => {\n // do nothing.\n });\n\nexport const subscribeToOptions = (callback: (options: Options) => void) => {\n subscribers = subscribers.concat(callback);\n};\n\nconst toReg = (str: string) =>\n str !== '' ? str.split('\\n').filter(Boolean).join('|') : null;\n\nexport const prepareOptionsForPage = (options: Options): Options => ({\n ...options,\n allowlist:\n options.filter !== FilterState.DO_NOT_FILTER\n ? toReg(options.allowlist)!\n : options.allowlist,\n denylist:\n options.filter !== FilterState.DO_NOT_FILTER\n ? toReg(options.denylist)!\n : options.denylist,\n});\n\nexport const isAllowed = (localOptions = options) =>\n !localOptions ||\n localOptions.inject ||\n !localOptions.urls ||\n location.href.match(toReg(localOptions.urls)!);\n" }, { "path": "extension/src/pageScript/Monitor.ts", "content": "import { Action } from 'redux';\nimport { LiftedState } from '@redux-devtools/instrument';\nimport { DispatchAction, LibConfig } from '@redux-devtools/app';\n\ndeclare global {\n interface Window {\n __REDUX_DEVTOOLS_EXTENSION_LOCKED__?: boolean;\n }\n}\n\nexport default class Monitor> {\n update: (\n liftedState?: LiftedState | undefined,\n libConfig?: LibConfig,\n ) => void;\n active?: boolean;\n paused?: boolean;\n lastAction?: string;\n waitingTimeout?: number;\n\n constructor(\n update: (\n liftedState?: LiftedState | undefined,\n libConfig?: LibConfig,\n ) => void,\n ) {\n this.update = update;\n }\n reducer = (state = {}, action: DispatchAction) => {\n if (!this.active) return state;\n this.lastAction = action.type;\n if (action.type === 'LOCK_CHANGES') {\n window.__REDUX_DEVTOOLS_EXTENSION_LOCKED__ = action.status;\n } else if (action.type === 'PAUSE_RECORDING') {\n this.paused = action.status;\n } else if (this.isHotReloaded()) {\n // Send new lifted state on hot-reloading\n setTimeout(this.update, 0);\n }\n return state;\n };\n start = (skipUpdate: boolean) => {\n this.active = true;\n if (!skipUpdate) this.update();\n };\n stop = () => {\n this.active = false;\n clearTimeout(this.waitingTimeout);\n };\n isHotReloaded = () =>\n this.lastAction && /^@@redux\\/(INIT|REPLACE)/.test(this.lastAction);\n isMonitorAction = () =>\n this.lastAction && this.lastAction !== 'PERFORM_ACTION';\n isTimeTraveling = () =>\n this.lastAction === 'JUMP_TO_STATE' || this.lastAction === 'JUMP_TO_ACTION';\n isPaused = () => {\n if (this.paused) {\n if (this.lastAction !== 'BLOCKED') {\n if (!window.__REDUX_DEVTOOLS_EXTENSION_LOCKED__) {\n this.lastAction = 'BLOCKED';\n }\n return false;\n }\n return true;\n }\n return false;\n };\n isLocked = () => {\n if (window.__REDUX_DEVTOOLS_EXTENSION_LOCKED__) {\n if (this.lastAction !== 'BLOCKED') {\n this.lastAction = 'BLOCKED';\n return false;\n }\n return true;\n }\n return false;\n };\n}\n" }, { "path": "extension/src/pageScript/api/filters.ts", "content": "import { Action } from 'redux';\nimport { LiftedState, PerformAction } from '@redux-devtools/instrument';\nimport { LocalFilter } from '@redux-devtools/utils';\n\nexport type FilterStateValue =\n | 'DO_NOT_FILTER'\n | 'DENYLIST_SPECIFIC'\n | 'ALLOWLIST_SPECIFIC';\n\nexport const FilterState: { [K in FilterStateValue]: FilterStateValue } = {\n DO_NOT_FILTER: 'DO_NOT_FILTER',\n DENYLIST_SPECIFIC: 'DENYLIST_SPECIFIC',\n ALLOWLIST_SPECIFIC: 'ALLOWLIST_SPECIFIC',\n};\n\nexport const noFiltersApplied = (localFilter: LocalFilter | undefined) =>\n // !predicate &&\n !localFilter &&\n (!window.devToolsOptions ||\n !window.devToolsOptions.filter ||\n window.devToolsOptions.filter === FilterState.DO_NOT_FILTER);\n\nexport function isFiltered>(\n action: A | string,\n localFilter: LocalFilter | undefined,\n) {\n if (\n noFiltersApplied(localFilter) ||\n (typeof action !== 'string' && typeof action.type.match !== 'function')\n ) {\n return false;\n }\n\n const { allowlist, denylist } = localFilter || window.devToolsOptions || {};\n const actionType = ((action as A).type || action) as string;\n return (\n (allowlist && !actionType.match(allowlist)) ||\n (denylist && actionType.match(denylist))\n );\n}\n\nfunction filterActions>(\n actionsById: { [p: number]: PerformAction },\n actionSanitizer: ((action: A, id: number) => A) | undefined,\n): { [p: number]: PerformAction } {\n if (!actionSanitizer) return actionsById;\n return Object.fromEntries(\n Object.entries(actionsById).map(([actionId, action]) => [\n actionId,\n {\n ...action,\n action: actionSanitizer(action.action, actionId as unknown as number),\n },\n ]),\n );\n}\n\nfunction filterStates(\n computedStates: { state: S; error?: string | undefined }[],\n stateSanitizer: ((state: S, index: number) => S) | undefined,\n) {\n if (!stateSanitizer) return computedStates;\n return computedStates.map((state, idx) => ({\n ...state,\n state: stateSanitizer(state.state, idx),\n }));\n}\n\nexport function filterState>(\n state: LiftedState,\n localFilter: LocalFilter | undefined,\n stateSanitizer: ((state: S, index: number) => S) | undefined,\n actionSanitizer: ((action: A, id: number) => A) | undefined,\n predicate: ((state: S, action: A) => boolean) | undefined,\n): LiftedState {\n if (predicate || !noFiltersApplied(localFilter)) {\n const filteredStagedActionIds: number[] = [];\n const filteredComputedStates: { state: S; error?: string | undefined }[] =\n [];\n const sanitizedActionsById: { [p: number]: PerformAction } | undefined =\n actionSanitizer && {};\n const { actionsById } = state;\n const { computedStates } = state;\n\n state.stagedActionIds.forEach((id, idx) => {\n const liftedAction = actionsById[id];\n if (!liftedAction) return;\n const currAction = liftedAction.action;\n const liftedState = computedStates[idx];\n const currState = liftedState.state;\n if (idx) {\n if (predicate && !predicate(currState, currAction)) return;\n if (isFiltered(currAction, localFilter)) return;\n }\n\n filteredStagedActionIds.push(id);\n filteredComputedStates.push(\n stateSanitizer\n ? { ...liftedState, state: stateSanitizer(currState, idx) }\n : liftedState,\n );\n if (actionSanitizer) {\n sanitizedActionsById![id] = {\n ...liftedAction,\n action: actionSanitizer(currAction, id),\n };\n }\n });\n\n return {\n ...state,\n actionsById: sanitizedActionsById || actionsById,\n stagedActionIds: filteredStagedActionIds,\n computedStates: filteredComputedStates,\n };\n }\n\n if (!stateSanitizer && !actionSanitizer) return state;\n return {\n ...state,\n actionsById: filterActions(state.actionsById, actionSanitizer),\n computedStates: filterStates(state.computedStates, stateSanitizer),\n };\n}\n\nexport interface PartialLiftedState> {\n readonly actionsById: { [actionId: number]: PerformAction };\n readonly computedStates: { state: S; error?: string }[];\n readonly stagedActionIds: readonly number[];\n readonly currentStateIndex: number;\n readonly nextActionId: number;\n readonly committedState?: S;\n}\n\nexport function startingFrom>(\n sendingActionId: number,\n state: LiftedState,\n localFilter: LocalFilter | undefined,\n stateSanitizer: ((state: S, index: number) => S) | undefined,\n actionSanitizer:\n | (>(action: A, id: number) => A)\n | undefined,\n predicate:\n | (>(state: S, action: A) => boolean)\n | undefined,\n): LiftedState | PartialLiftedState | undefined {\n const stagedActionIds = state.stagedActionIds;\n if (sendingActionId <= stagedActionIds[1]) return state;\n const index = stagedActionIds.indexOf(sendingActionId);\n if (index === -1) return state;\n\n const shouldFilter = predicate || !noFiltersApplied(localFilter);\n const filteredStagedActionIds = shouldFilter ? [0] : stagedActionIds;\n const actionsById = state.actionsById;\n const computedStates = state.computedStates;\n const newActionsById: { [key: number]: PerformAction } = {};\n const newComputedStates = [];\n let key;\n let currAction;\n let currState;\n\n for (let i = shouldFilter ? 1 : index; i < stagedActionIds.length; i++) {\n key = stagedActionIds[i];\n currAction = actionsById[key];\n currState = computedStates[i];\n\n if (shouldFilter) {\n if (\n (predicate && !predicate(currState.state, currAction.action)) ||\n isFiltered(currAction.action, localFilter)\n ) {\n continue;\n }\n filteredStagedActionIds.push(key);\n if (i < index) continue;\n }\n\n newActionsById[key] = !actionSanitizer\n ? currAction\n : { ...currAction, action: actionSanitizer(currAction.action, key) };\n newComputedStates.push(\n !stateSanitizer\n ? currState\n : { ...currState, state: stateSanitizer(currState.state, i) },\n );\n }\n\n if (newComputedStates.length === 0) return undefined;\n\n return {\n actionsById: newActionsById,\n computedStates: newComputedStates,\n stagedActionIds: filteredStagedActionIds,\n currentStateIndex: state.currentStateIndex,\n nextActionId: state.nextActionId,\n };\n}\n" }, { "path": "extension/src/pageScript/api/generateInstanceId.ts", "content": "let id = 0;\n\nexport default function generateId(instanceId: number | undefined) {\n return instanceId || ++id;\n}\n" }, { "path": "extension/src/pageScript/api/importState.ts", "content": "import jsan from 'jsan';\nimport { immutableSerialize } from '@redux-devtools/serialize';\nimport type { Config, SerializeWithImmutable } from '../index.js';\nimport Immutable from 'immutable';\nimport { LiftedState } from '@redux-devtools/instrument';\nimport { Action } from 'redux';\n\ninterface SerializeWithRequiredImmutable extends SerializeWithImmutable {\n readonly immutable: typeof Immutable;\n}\n\nfunction isSerializeWithImmutable(\n serialize: boolean | SerializeWithImmutable,\n): serialize is SerializeWithRequiredImmutable {\n return !!(serialize as SerializeWithImmutable).immutable;\n}\n\ninterface SerializeWithRequiredReviver extends SerializeWithImmutable {\n readonly reviver: (key: string, value: unknown) => unknown;\n}\n\nfunction isSerializeWithReviver(\n serialize: boolean | SerializeWithImmutable,\n): serialize is SerializeWithRequiredReviver {\n return !!(serialize as SerializeWithImmutable).immutable;\n}\n\ninterface ParsedSerializedLiftedState {\n readonly payload: string;\n readonly preloadedState?: string;\n}\n\nexport default function importState>(\n state: string | undefined,\n { serialize }: Config,\n) {\n if (!state) return undefined;\n let parse = jsan.parse;\n if (serialize) {\n if (isSerializeWithImmutable(serialize)) {\n parse = (v) =>\n jsan.parse(\n v,\n immutableSerialize(\n serialize.immutable,\n serialize.refs,\n serialize.replacer,\n serialize.reviver,\n ).reviver,\n );\n } else if (isSerializeWithReviver(serialize)) {\n parse = (v) => jsan.parse(v, serialize.reviver);\n }\n }\n\n const parsedSerializedLiftedState:\n | ParsedSerializedLiftedState\n | LiftedState = parse(state) as\n | ParsedSerializedLiftedState\n | LiftedState;\n const preloadedState =\n 'payload' in parsedSerializedLiftedState &&\n parsedSerializedLiftedState.preloadedState\n ? (parse(parsedSerializedLiftedState.preloadedState) as S)\n : undefined;\n const nextLiftedState =\n 'payload' in parsedSerializedLiftedState\n ? (parse(parsedSerializedLiftedState.payload) as LiftedState<\n S,\n A,\n unknown\n >)\n : parsedSerializedLiftedState;\n\n return { nextLiftedState, preloadedState };\n}\n" }, { "path": "extension/src/pageScript/api/index.ts", "content": "import jsan, { Options } from 'jsan';\nimport { throttle } from 'lodash-es';\nimport { immutableSerialize } from '@redux-devtools/serialize';\nimport { getActionsArray, getLocalFilter } from '@redux-devtools/utils';\nimport { isFiltered, PartialLiftedState } from './filters.js';\nimport importState from './importState.js';\nimport generateId from './generateInstanceId.js';\nimport type { Config } from '../index.js';\nimport { Action } from 'redux';\nimport { LiftedState, PerformAction } from '@redux-devtools/instrument';\nimport { LibConfig } from '@redux-devtools/app';\nimport type {\n ContentScriptToPageScriptMessage,\n ListenerMessage,\n} from '../../contentScript/index.js';\nimport type { Position } from './openWindow.js';\n\nconst listeners: {\n [instanceId: string]:\n | ((message: ContentScriptToPageScriptMessage) => void)\n | ((message: ContentScriptToPageScriptMessage) => void)[];\n} = {};\nexport const source = '@devtools-page';\n\nfunction windowReplacer(key: string, value: unknown) {\n if (value && (value as Window).window === value) {\n return '[WINDOW]';\n }\n return value;\n}\n\nfunction tryCatchStringify(obj: unknown) {\n try {\n return JSON.stringify(obj);\n } catch (err) {\n /* eslint-disable no-console */\n if (process.env.NODE_ENV !== 'production') {\n console.log('Failed to stringify', err);\n }\n /* eslint-enable no-console */\n return jsan.stringify(obj, windowReplacer, undefined, {\n circular: '[CIRCULAR]',\n date: true,\n });\n }\n}\n\nlet stringifyWarned: boolean;\nfunction stringify(obj: unknown, serialize?: Serialize | undefined) {\n const str =\n typeof serialize === 'undefined'\n ? tryCatchStringify(obj)\n : jsan.stringify(obj, serialize.replacer, undefined, serialize.options);\n\n if (!stringifyWarned && str && str.length > 16 * 1024 * 1024) {\n // 16 MB\n /* eslint-disable no-console */\n console.warn(\n 'Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See https://github.com/reduxjs/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu on how to configure it.',\n );\n /* eslint-enable no-console */\n stringifyWarned = true;\n }\n\n return str;\n}\n\nexport interface Serialize {\n readonly replacer?: (key: string, value: unknown) => unknown;\n readonly reviver?: (key: string, value: unknown) => unknown;\n readonly options?: Options | boolean;\n}\n\nexport function getSerializeParameter(config: Config) {\n const serialize = config.serialize;\n if (serialize) {\n if (serialize === true) return { options: true };\n if (serialize.immutable) {\n const immutableSerializer = immutableSerialize(\n serialize.immutable,\n serialize.refs,\n serialize.replacer,\n serialize.reviver,\n );\n return {\n replacer: immutableSerializer.replacer,\n reviver: immutableSerializer.reviver,\n options:\n typeof serialize.options === 'object'\n ? { ...immutableSerializer.options, ...serialize.options }\n : immutableSerializer.options,\n };\n }\n if (!serialize.replacer && !serialize.reviver) {\n return { options: serialize.options };\n }\n return {\n replacer: serialize.replacer,\n reviver: serialize.reviver,\n options: serialize.options || true,\n };\n }\n\n return undefined;\n}\n\ninterface InitInstancePageScriptToContentScriptMessage {\n readonly type: 'INIT_INSTANCE';\n readonly instanceId: number;\n readonly source: typeof source;\n}\n\ninterface DisconnectMessage {\n readonly type: 'DISCONNECT';\n readonly source: typeof source;\n}\n\ninterface InitMessage> {\n readonly type: 'INIT';\n readonly payload: string;\n readonly instanceId: number;\n readonly source: typeof source;\n action?: string;\n name?: string | undefined;\n liftedState?: LiftedState;\n libConfig?: LibConfig;\n}\n\ninterface SerializedPartialLiftedState {\n readonly stagedActionIds: readonly number[];\n readonly currentStateIndex: number;\n readonly nextActionId: number;\n}\n\ninterface SerializedPartialStateMessage {\n readonly type: 'PARTIAL_STATE';\n readonly payload: SerializedPartialLiftedState;\n readonly source: typeof source;\n readonly instanceId: number;\n readonly maxAge: number;\n readonly actionsById: string;\n readonly computedStates: string;\n readonly committedState: boolean;\n}\n\ninterface SerializedExportMessage {\n readonly type: 'EXPORT';\n readonly payload: string;\n readonly committedState: string | undefined;\n readonly source: typeof source;\n readonly instanceId: number;\n}\n\ninterface SerializedActionMessage {\n readonly type: 'ACTION';\n readonly payload: string;\n readonly source: typeof source;\n readonly instanceId: number;\n readonly action: string;\n readonly maxAge: number;\n readonly nextActionId?: number;\n}\n\ninterface SerializedStateMessage> {\n readonly type: 'STATE';\n readonly payload: Omit<\n LiftedState,\n 'actionsById' | 'computedStates' | 'committedState'\n >;\n readonly source: typeof source;\n readonly instanceId: number;\n readonly libConfig?: LibConfig;\n readonly actionsById: string;\n readonly computedStates: string;\n readonly committedState: boolean;\n}\n\ninterface OpenMessage {\n readonly source: typeof source;\n readonly type: 'OPEN';\n readonly position: Position;\n}\n\nexport type PageScriptToContentScriptMessageForwardedToMonitors<\n S,\n A extends Action,\n> =\n | InitMessage\n | LiftedMessage\n | SerializedPartialStateMessage\n | SerializedExportMessage\n | SerializedActionMessage\n | SerializedStateMessage;\n\nexport type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance<\n S,\n A extends Action,\n> =\n | PageScriptToContentScriptMessageForwardedToMonitors\n | ErrorMessage\n | GetReportMessage\n | StopMessage\n | OpenMessage;\n\nexport type PageScriptToContentScriptMessageWithoutDisconnect<\n S,\n A extends Action,\n> =\n | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance\n | InitInstancePageScriptToContentScriptMessage\n | InitInstanceMessage;\n\nexport type PageScriptToContentScriptMessage> =\n | PageScriptToContentScriptMessageWithoutDisconnect\n | DisconnectMessage;\n\nfunction post>(\n message: PageScriptToContentScriptMessage,\n) {\n window.postMessage(message, '*');\n}\n\nfunction getStackTrace(\n config: Config,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n toExcludeFromTrace: Function | undefined,\n) {\n if (!config.trace) return undefined;\n if (typeof config.trace === 'function') return config.trace();\n\n let stack;\n let extraFrames = 0;\n let prevStackTraceLimit;\n const traceLimit = config.traceLimit;\n const error = Error();\n if (Error.captureStackTrace) {\n if (Error.stackTraceLimit < traceLimit!) {\n prevStackTraceLimit = Error.stackTraceLimit;\n Error.stackTraceLimit = traceLimit!;\n }\n Error.captureStackTrace(error, toExcludeFromTrace);\n } else {\n extraFrames = 3;\n }\n stack = error.stack;\n if (prevStackTraceLimit) Error.stackTraceLimit = prevStackTraceLimit;\n if (\n extraFrames ||\n typeof Error.stackTraceLimit !== 'number' ||\n Error.stackTraceLimit > traceLimit!\n ) {\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n const frames = stack!.split('\\n');\n if (frames.length > traceLimit!) {\n stack = frames\n .slice(0, traceLimit! + extraFrames + (frames[0] === 'Error' ? 1 : 0))\n .join('\\n');\n }\n }\n return stack;\n}\n\nfunction amendActionType>(\n action:\n | A\n | StructuralPerformAction\n | StructuralPerformAction[]\n | string,\n config: Config,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n toExcludeFromTrace: Function | undefined,\n): StructuralPerformAction {\n const timestamp = Date.now();\n const stack = getStackTrace(config, toExcludeFromTrace);\n if (typeof action === 'string') {\n return { action: { type: action } as A, timestamp, stack };\n }\n if (!(action as A).type)\n return { action: { type: 'update' } as A, timestamp, stack };\n if ((action as StructuralPerformAction).action)\n return (\n stack ? { stack, ...action } : action\n ) as StructuralPerformAction;\n return { action, timestamp, stack } as StructuralPerformAction;\n}\n\ninterface LiftedMessage {\n readonly type: 'LIFTED';\n readonly liftedState: { readonly isPaused: boolean | undefined };\n readonly instanceId: number;\n readonly source: typeof source;\n}\n\ninterface PartialStateMessage> {\n readonly type: 'PARTIAL_STATE';\n readonly payload: PartialLiftedState;\n readonly source: typeof source;\n readonly instanceId: number;\n readonly maxAge: number;\n}\n\ninterface ExportMessage> {\n readonly type: 'EXPORT';\n readonly payload: readonly A[];\n readonly committedState: S;\n readonly source: typeof source;\n readonly instanceId: number;\n}\n\nexport interface StructuralPerformAction> {\n readonly action: A;\n readonly timestamp?: number;\n readonly stack?: string;\n}\n\ntype SingleUserAction> =\n | PerformAction\n | StructuralPerformAction\n | A;\ntype UserAction> =\n | SingleUserAction\n | readonly SingleUserAction[];\n\ninterface ActionMessage> {\n readonly type: 'ACTION';\n readonly payload: S;\n readonly source: typeof source;\n readonly instanceId: number;\n readonly action: UserAction;\n readonly maxAge: number;\n readonly nextActionId?: number;\n readonly name?: string;\n}\n\ninterface StateMessage> {\n readonly type: 'STATE';\n readonly payload: LiftedState;\n readonly source: typeof source;\n readonly instanceId: number;\n readonly libConfig?: LibConfig;\n readonly action?: UserAction;\n readonly maxAge?: number;\n readonly name?: string;\n}\n\nexport interface ErrorMessage {\n readonly type: 'ERROR';\n readonly payload: string;\n readonly source: typeof source;\n readonly instanceId: number;\n readonly message?: string | undefined;\n}\n\ninterface InitInstanceMessage {\n readonly type: 'INIT_INSTANCE';\n readonly payload: undefined;\n readonly source: typeof source;\n readonly instanceId: number;\n}\n\ninterface GetReportMessage {\n readonly type: 'GET_REPORT';\n readonly payload: string;\n readonly source: typeof source;\n readonly instanceId: number;\n}\n\ninterface StopMessage {\n readonly type: 'STOP';\n readonly payload: undefined;\n readonly source: typeof source;\n readonly instanceId: number;\n}\n\ntype ToContentScriptMessage> =\n | LiftedMessage\n | PartialStateMessage\n | ExportMessage\n | ActionMessage\n | StateMessage\n | ErrorMessage\n | InitInstanceMessage\n | GetReportMessage\n | StopMessage;\n\nexport function toContentScript>(\n message: ToContentScriptMessage,\n serializeState?: Serialize | undefined,\n serializeAction?: Serialize | undefined,\n) {\n if (message.type === 'ACTION') {\n post({\n ...message,\n action: stringify(message.action, serializeAction),\n payload: stringify(message.payload, serializeState),\n });\n } else if (message.type === 'STATE') {\n const { actionsById, computedStates, committedState, ...rest } =\n message.payload;\n post({\n ...message,\n payload: rest,\n actionsById: stringify(actionsById, serializeAction),\n computedStates: stringify(computedStates, serializeState),\n committedState: typeof committedState !== 'undefined',\n });\n } else if (message.type === 'PARTIAL_STATE') {\n const { actionsById, computedStates, committedState, ...rest } =\n message.payload;\n post({\n ...message,\n payload: rest,\n actionsById: stringify(actionsById, serializeAction),\n computedStates: stringify(computedStates, serializeState),\n committedState: typeof committedState !== 'undefined',\n });\n } else if (message.type === 'EXPORT') {\n post({\n ...message,\n payload: stringify(message.payload, serializeAction),\n committedState:\n typeof message.committedState !== 'undefined'\n ? stringify(message.committedState, serializeState)\n : (message.committedState as undefined),\n });\n } else {\n post(message);\n }\n}\n\nexport function sendMessage>(\n action: StructuralPerformAction | StructuralPerformAction[],\n state: LiftedState,\n config: Config,\n instanceId?: number,\n name?: string,\n) {\n let amendedAction = action;\n if (typeof config !== 'object') {\n // Legacy: sending actions not from connected part\n config = {}; // eslint-disable-line no-param-reassign\n if (action) amendedAction = amendActionType(action, config, sendMessage);\n }\n if (action) {\n toContentScript(\n {\n type: 'ACTION',\n action: amendedAction,\n payload: state,\n maxAge: config.maxAge!,\n source,\n name: config.name || name,\n instanceId: config.instanceId || instanceId || 1,\n },\n config.serialize as Serialize | undefined,\n config.serialize as Serialize | undefined,\n );\n } else {\n toContentScript(\n {\n type: 'STATE',\n action: amendedAction,\n payload: state,\n maxAge: config.maxAge,\n source,\n name: config.name || name,\n instanceId: config.instanceId || instanceId || 1,\n },\n config.serialize as Serialize | undefined,\n config.serialize as Serialize | undefined,\n );\n }\n}\n\nfunction handleMessages(event: MessageEvent) {\n if (process.env.BABEL_ENV !== 'test' && (!event || event.source !== window)) {\n return;\n }\n const message = event.data;\n if (!message || message.source !== '@devtools-extension') return;\n Object.keys(listeners).forEach((id) => {\n if (message.id && id !== message.id) return;\n const listenersForId = listeners[id];\n if (typeof listenersForId === 'function') listenersForId(message);\n else {\n listenersForId.forEach((fn) => {\n fn(message);\n });\n }\n });\n}\n\nexport function setListener(\n onMessage: (message: ContentScriptToPageScriptMessage) => void,\n instanceId: number,\n) {\n listeners[instanceId] = onMessage;\n window.addEventListener('message', handleMessages, false);\n}\n\nconst liftListener =\n >(\n listener: (message: ListenerMessage) => void,\n config: Config,\n ) =>\n (message: ContentScriptToPageScriptMessage) => {\n if (message.type === 'IMPORT') {\n listener({\n type: 'DISPATCH',\n payload: {\n type: 'IMPORT_STATE',\n ...importState(message.state, config)!,\n },\n });\n } else {\n listener(message);\n }\n };\n\nexport function disconnect() {\n window.removeEventListener('message', handleMessages);\n post({ type: 'DISCONNECT', source });\n}\n\nexport interface ConnectResponse {\n init: >(\n state: S,\n liftedData?: LiftedState,\n ) => void;\n subscribe: >(\n listener: (message: ListenerMessage) => void,\n ) => (() => void) | undefined;\n unsubscribe: () => void;\n send: >(\n action: A,\n state: LiftedState,\n ) => void;\n error: (payload: string) => void;\n}\n\nexport function connect(preConfig: Config): ConnectResponse {\n const config = preConfig || {};\n const id = generateId(config.instanceId);\n if (!config.instanceId) config.instanceId = id;\n if (!config.name) {\n config.name =\n document.title && id === 1 ? document.title : `Instance ${id}`;\n }\n if (config.serialize) config.serialize = getSerializeParameter(config);\n const actionCreators = config.actionCreators || {};\n const latency = config.latency;\n const predicate = config.predicate;\n const localFilter = getLocalFilter(config);\n const autoPause = config.autoPause;\n let isPaused = autoPause;\n let delayedActions: StructuralPerformAction>[] = [];\n let delayedStates: LiftedState, unknown>[] = [];\n\n const rootListener = (action: ContentScriptToPageScriptMessage) => {\n if (autoPause) {\n if (action.type === 'START') isPaused = false;\n else if (action.type === 'STOP') isPaused = true;\n }\n if (action.type === 'DISPATCH') {\n const payload = action.payload;\n if (payload.type === 'PAUSE_RECORDING') {\n isPaused = payload.status;\n toContentScript({\n type: 'LIFTED',\n liftedState: { isPaused },\n instanceId: id,\n source,\n });\n }\n }\n };\n\n listeners[id] = [rootListener];\n\n const subscribe = >(\n listener: (message: ListenerMessage) => void,\n ) => {\n if (!listener) return undefined;\n const liftedListener = liftListener(listener, config);\n const listenersForId = listeners[id] as ((\n message: ContentScriptToPageScriptMessage,\n ) => void)[];\n listenersForId.push(liftedListener);\n\n return function unsubscribe() {\n const index = listenersForId.indexOf(liftedListener);\n listenersForId.splice(index, 1);\n };\n };\n\n const unsubscribe = () => {\n delete listeners[id];\n };\n\n const sendDelayed = throttle(() => {\n sendMessage(\n delayedActions,\n delayedStates as unknown as LiftedState, unknown>,\n config,\n );\n delayedActions = [];\n delayedStates = [];\n }, latency);\n\n const send = >(\n action: A,\n state: LiftedState,\n ) => {\n if (\n isPaused ||\n isFiltered(action, localFilter) ||\n (predicate && !predicate(state, action))\n ) {\n return;\n }\n\n let amendedAction: A | StructuralPerformAction = action;\n const amendedState = config.stateSanitizer\n ? config.stateSanitizer(state)\n : state;\n if (action) {\n if (config.getActionType) {\n amendedAction = config.getActionType(action);\n if (typeof amendedAction !== 'object') {\n amendedAction = {\n action: { type: amendedAction },\n timestamp: Date.now(),\n } as unknown as A;\n }\n } else if (config.actionSanitizer) {\n amendedAction = config.actionSanitizer(action);\n }\n amendedAction = amendActionType(amendedAction, config, send);\n if (latency) {\n delayedActions.push(amendedAction);\n delayedStates.push(amendedState);\n sendDelayed();\n return;\n }\n }\n sendMessage(\n amendedAction as StructuralPerformAction,\n amendedState,\n config,\n );\n };\n\n const init = >(\n state: S,\n liftedData?: LiftedState,\n ) => {\n const message: InitMessage = {\n type: 'INIT',\n payload: stringify(state, config.serialize as Serialize | undefined),\n instanceId: id,\n source,\n };\n if (liftedData && Array.isArray(liftedData)) {\n // Legacy\n message.action = stringify(liftedData);\n message.name = config.name;\n } else {\n if (liftedData) {\n message.liftedState = liftedData;\n if (liftedData.isPaused) isPaused = true;\n }\n message.libConfig = {\n actionCreators: JSON.stringify(getActionsArray(actionCreators)),\n name: config.name || document.title,\n features: config.features,\n serialize: !!config.serialize,\n type: config.type,\n };\n }\n post(message);\n };\n\n const error = (payload: string) => {\n post({ type: 'ERROR', payload, instanceId: id, source });\n };\n\n window.addEventListener('message', handleMessages, false);\n\n post({ type: 'INIT_INSTANCE', instanceId: id, source });\n\n return {\n init,\n subscribe,\n unsubscribe,\n send,\n error,\n };\n}\n\nexport function isInIframe() {\n try {\n return window.self !== window.top;\n } catch (e) {\n return true;\n }\n}\n" }, { "path": "extension/src/pageScript/api/notifyErrors.ts", "content": "let handleError: (() => boolean) | undefined;\nlet lastTime = 0;\n\nfunction createExpBackoffTimer(step: number) {\n let count = 1;\n return function (reset?: boolean) {\n // Reset call\n if (reset) {\n count = 1;\n return 0;\n }\n // Calculate next timeout\n const timeout = Math.pow(2, count - 1);\n if (count < 5) count += 1;\n return timeout * step;\n };\n}\n\nconst nextErrorTimeout = createExpBackoffTimer(5000);\n\nfunction postError(message: string) {\n if (handleError && !handleError()) return;\n window.postMessage(\n {\n source: '@devtools-page',\n type: 'ERROR',\n message: message,\n },\n '*',\n );\n}\n\nfunction catchErrors(e: ErrorEvent) {\n if (\n (window.devToolsOptions && !window.devToolsOptions.shouldCatchErrors) ||\n e.timeStamp - lastTime < nextErrorTimeout()\n ) {\n return;\n }\n lastTime = e.timeStamp;\n nextErrorTimeout(true);\n postError(e.message);\n}\n\nexport default function notifyErrors(onError?: () => boolean) {\n handleError = onError;\n window.addEventListener('error', catchErrors, false);\n}\n" }, { "path": "extension/src/pageScript/api/openWindow.ts", "content": "import { Action } from 'redux';\nimport type { PageScriptToContentScriptMessage } from './index.js';\n\nexport type Position = 'window' | 'remote';\n\nfunction post>(\n message: PageScriptToContentScriptMessage,\n) {\n window.postMessage(message, '*');\n}\n\nexport default function openWindow(position?: Position) {\n post({\n source: '@devtools-page',\n type: 'OPEN',\n position: position ?? 'window',\n });\n}\n" }, { "path": "extension/src/pageScript/enhancerStore.ts", "content": "import { Action, compose, Reducer, StoreEnhancerStoreCreator } from 'redux';\nimport { instrument } from '@redux-devtools/instrument';\nimport { persistState } from '@redux-devtools/core';\nimport type { ConfigWithExpandedMaxAge } from './index.js';\n\nexport function getUrlParam(key: string) {\n const matches = new RegExp(`[?&]${key}=([^&#]+)\\\\b`).exec(\n window.location.href,\n );\n return matches && matches.length > 0 ? matches[1] : null;\n}\n\ndeclare global {\n interface Window {\n shouldCatchErrors?: boolean;\n }\n}\n\nexport default function configureStore<\n S,\n A extends Action,\n MonitorState,\n MonitorAction extends Action,\n>(\n next: StoreEnhancerStoreCreator,\n monitorReducer: Reducer,\n config: ConfigWithExpandedMaxAge,\n) {\n return compose(\n instrument(monitorReducer, {\n maxAge: config.maxAge,\n trace: config.trace,\n traceLimit: config.traceLimit,\n shouldCatchErrors: config.shouldCatchErrors || window.shouldCatchErrors,\n shouldHotReload: config.shouldHotReload,\n shouldRecordChanges: config.shouldRecordChanges,\n shouldStartLocked: config.shouldStartLocked,\n pauseActionType: config.pauseActionType || '@@PAUSED',\n }),\n persistState(getUrlParam('debug_session')),\n )(next);\n}\n" }, { "path": "extension/src/pageScript/index.ts", "content": "import {\n ActionCreatorObject,\n evalAction,\n getActionsArray,\n getLocalFilter,\n} from '@redux-devtools/utils';\nimport { throttle } from 'lodash-es';\nimport { Action, ActionCreator, Dispatch, Reducer, StoreEnhancer } from 'redux';\nimport Immutable from 'immutable';\nimport {\n EnhancedStore,\n LiftedAction,\n LiftedState,\n PerformAction,\n} from '@redux-devtools/instrument';\nimport {\n CustomAction,\n DispatchAction,\n LibConfig,\n Features,\n} from '@redux-devtools/app';\nimport configureStore, { getUrlParam } from './enhancerStore.js';\nimport { isAllowed, Options } from '../options/syncOptions.js';\nimport Monitor from './Monitor.js';\nimport {\n noFiltersApplied,\n isFiltered,\n filterState,\n startingFrom,\n} from './api/filters.js';\nimport notifyErrors from './api/notifyErrors.js';\nimport importState from './api/importState.js';\nimport openWindow, { Position } from './api/openWindow.js';\nimport generateId from './api/generateInstanceId.js';\nimport {\n toContentScript,\n sendMessage,\n setListener,\n connect,\n disconnect,\n isInIframe,\n getSerializeParameter,\n Serialize,\n StructuralPerformAction,\n ConnectResponse,\n} from './api/index.js';\nimport type { ContentScriptToPageScriptMessage } from '../contentScript/index.js';\n\ntype EnhancedStoreWithInitialDispatch<\n S,\n A extends Action,\n MonitorState,\n> = EnhancedStore & { initialDispatch: Dispatch };\n\nconst source = '@devtools-page';\nconst stores: {\n [K in string | number]: EnhancedStoreWithInitialDispatch<\n unknown,\n Action,\n unknown\n >;\n} = {};\nlet reportId: string | null | undefined;\n\nfunction deprecateParam(oldParam: string, newParam: string) {\n /* eslint-disable no-console */\n console.warn(\n `${oldParam} parameter is deprecated, use ${newParam} instead: https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md`,\n );\n /* eslint-enable no-console */\n}\n\nexport interface SerializeWithImmutable extends Serialize {\n readonly immutable?: typeof Immutable;\n readonly refs?: (new (data: any) => unknown)[] | null;\n}\n\nexport interface ConfigWithExpandedMaxAge {\n instanceId?: number;\n /**\n * @deprecated Use actionsDenylist instead.\n */\n readonly actionsBlacklist?: string | readonly string[];\n /**\n * @deprecated Use actionsAllowlist instead.\n */\n readonly actionsWhitelist?: string | readonly string[];\n readonly actionsDenylist?: string | readonly string[];\n readonly actionsAllowlist?: string | readonly string[];\n serialize?: boolean | SerializeWithImmutable;\n readonly stateSanitizer?: (state: S, index?: number) => S;\n readonly actionSanitizer?: >(\n action: A,\n id?: number,\n ) => A;\n readonly predicate?: >(\n state: S,\n action: A,\n ) => boolean;\n readonly latency?: number;\n readonly maxAge?:\n | number\n | (>(\n currentLiftedAction: LiftedAction,\n previousLiftedState: LiftedState | undefined,\n ) => number);\n readonly trace?: boolean | (() => string | undefined);\n readonly traceLimit?: number;\n readonly shouldCatchErrors?: boolean;\n readonly shouldHotReload?: boolean;\n readonly shouldRecordChanges?: boolean;\n readonly shouldStartLocked?: boolean;\n readonly pauseActionType?: unknown;\n name?: string;\n readonly autoPause?: boolean;\n readonly features?: Features;\n readonly type?: string;\n readonly getActionType?: >(action: A) => A;\n readonly actionCreators?: {\n readonly [key: string]: ActionCreator>;\n };\n}\n\nexport interface Config extends ConfigWithExpandedMaxAge {\n readonly maxAge?: number;\n}\n\ninterface ReduxDevtoolsExtension {\n (config?: Config): StoreEnhancer;\n open: (position?: Position) => void;\n notifyErrors: (onError?: () => boolean) => void;\n send: >(\n action: StructuralPerformAction | StructuralPerformAction[],\n state: LiftedState,\n config: Config,\n instanceId?: number,\n name?: string,\n ) => void;\n listen: (\n onMessage: (message: ContentScriptToPageScriptMessage) => void,\n instanceId: number,\n ) => void;\n connect: (preConfig: Config) => ConnectResponse;\n disconnect: () => void;\n}\n\ndeclare global {\n interface Window {\n devToolsOptions: Options;\n }\n}\n\nfunction __REDUX_DEVTOOLS_EXTENSION__>(\n config?: Config,\n): StoreEnhancer {\n /* eslint-disable no-param-reassign */\n if (typeof config !== 'object') config = {};\n /* eslint-enable no-param-reassign */\n if (!window.devToolsOptions) window.devToolsOptions = {} as any;\n\n let store: EnhancedStoreWithInitialDispatch;\n let errorOccurred = false;\n let maxAge: number | undefined;\n let actionCreators: readonly ActionCreatorObject[];\n let sendingActionId = 1;\n const instanceId = generateId(config.instanceId);\n const localFilter = getLocalFilter(config);\n const serializeState = getSerializeParameter(config);\n const serializeAction = getSerializeParameter(config);\n const { stateSanitizer, actionSanitizer, predicate, latency = 500 } = config;\n\n // Deprecate actionsWhitelist and actionsBlacklist\n if (config.actionsWhitelist) {\n deprecateParam('actionsWhiteList', 'actionsAllowlist');\n }\n if (config.actionsBlacklist) {\n deprecateParam('actionsBlacklist', 'actionsDenylist');\n }\n\n const relayState = throttle(\n (\n liftedState?: LiftedState | undefined,\n libConfig?: LibConfig,\n ) => {\n relayAction.cancel();\n const state = liftedState || store.liftedStore.getState();\n sendingActionId = state.nextActionId;\n toContentScript(\n {\n type: 'STATE',\n payload: filterState(\n state,\n localFilter,\n stateSanitizer,\n actionSanitizer,\n predicate,\n ),\n source,\n instanceId,\n libConfig,\n },\n serializeState,\n serializeAction,\n );\n },\n latency,\n );\n\n const monitor = new Monitor(relayState);\n\n function exportState() {\n const liftedState = store.liftedStore.getState();\n const actionsById = liftedState.actionsById;\n const payload: A[] = [];\n liftedState.stagedActionIds.slice(1).forEach((id) => {\n // if (isFiltered(actionsById[id].action, localFilter)) return;\n payload.push(actionsById[id].action);\n });\n toContentScript(\n {\n type: 'EXPORT',\n payload,\n committedState: liftedState.committedState,\n source,\n instanceId,\n },\n serializeState,\n serializeAction,\n );\n }\n\n const relayAction = throttle(() => {\n const liftedState = store.liftedStore.getState();\n const nextActionId = liftedState.nextActionId;\n const currentActionId = nextActionId - 1;\n const liftedAction = liftedState.actionsById[currentActionId];\n\n // Send a single action\n if (sendingActionId === currentActionId) {\n sendingActionId = nextActionId;\n const action = liftedAction.action;\n const computedStates = liftedState.computedStates;\n if (\n isFiltered(action, localFilter) ||\n (predicate &&\n !predicate(computedStates[computedStates.length - 1].state, action))\n ) {\n return;\n }\n const state =\n liftedState.computedStates[liftedState.computedStates.length - 1].state;\n toContentScript(\n {\n type: 'ACTION',\n payload: !stateSanitizer\n ? state\n : stateSanitizer(state, nextActionId - 1),\n source,\n instanceId,\n action: !actionSanitizer\n ? liftedState.actionsById[nextActionId - 1]\n : actionSanitizer(\n liftedState.actionsById[nextActionId - 1].action,\n nextActionId - 1,\n ),\n maxAge: getMaxAge(),\n nextActionId,\n },\n serializeState,\n serializeAction,\n );\n return;\n }\n\n // Send multiple actions\n const payload = startingFrom(\n sendingActionId,\n liftedState,\n localFilter,\n stateSanitizer,\n actionSanitizer,\n predicate,\n );\n sendingActionId = nextActionId;\n if (typeof payload === 'undefined') return;\n if ('skippedActionIds' in payload) {\n toContentScript(\n {\n type: 'STATE',\n payload: filterState(\n payload,\n localFilter,\n stateSanitizer,\n actionSanitizer,\n predicate,\n ),\n source,\n instanceId,\n },\n serializeState,\n serializeAction,\n );\n return;\n }\n toContentScript(\n {\n type: 'PARTIAL_STATE',\n payload,\n source,\n instanceId,\n maxAge: getMaxAge(),\n },\n serializeState,\n serializeAction,\n );\n }, latency);\n\n function dispatchRemotely(action: string | CustomAction) {\n if (config!.features && !config!.features.dispatch) return;\n try {\n const result = evalAction(action, actionCreators);\n (store.initialDispatch || store.dispatch)(result);\n } catch (e) {\n toContentScript(\n {\n type: 'ERROR',\n payload: (e as Error).message,\n source,\n instanceId,\n },\n serializeState,\n serializeAction,\n );\n }\n }\n\n function importPayloadFrom(state: string | undefined) {\n if (config!.features && !config!.features.import) return;\n try {\n const nextLiftedState = importState(state, config!);\n if (!nextLiftedState) return;\n store.liftedStore.dispatch({ type: 'IMPORT_STATE', ...nextLiftedState });\n } catch (e) {\n toContentScript(\n {\n type: 'ERROR',\n payload: (e as Error).message,\n source,\n instanceId,\n },\n serializeState,\n serializeAction,\n );\n }\n }\n\n function dispatchMonitorAction(action: DispatchAction) {\n const features = config!.features;\n if (features) {\n if (\n !features.jump &&\n (action.type === 'JUMP_TO_STATE' || action.type === 'JUMP_TO_ACTION')\n ) {\n return;\n }\n if (!features.skip && action.type === 'TOGGLE_ACTION') return;\n if (!features.reorder && action.type === 'REORDER_ACTION') return;\n if (!features.import && action.type === 'IMPORT_STATE') return;\n if (!features.lock && action.type === 'LOCK_CHANGES') return;\n if (!features.pause && action.type === 'PAUSE_RECORDING') return;\n }\n store.liftedStore.dispatch(action as any);\n }\n\n function onMessage(message: ContentScriptToPageScriptMessage) {\n switch (message.type) {\n case 'DISPATCH':\n dispatchMonitorAction(message.payload);\n return;\n case 'ACTION':\n dispatchRemotely(message.payload);\n return;\n case 'IMPORT':\n importPayloadFrom(message.state);\n return;\n case 'EXPORT':\n exportState();\n return;\n case 'UPDATE':\n relayState();\n return;\n case 'START':\n monitor.start(true);\n if (!actionCreators && config!.actionCreators) {\n actionCreators = getActionsArray(config!.actionCreators);\n }\n relayState(undefined, {\n name: config!.name || document.title,\n actionCreators: JSON.stringify(actionCreators),\n features: config!.features,\n serialize: !!config!.serialize,\n type: 'redux',\n });\n\n if (reportId) {\n toContentScript(\n {\n type: 'GET_REPORT',\n payload: reportId,\n source,\n instanceId,\n },\n serializeState,\n serializeAction,\n );\n reportId = null;\n }\n return;\n case 'STOP':\n monitor.stop();\n relayAction.cancel();\n relayState.cancel();\n if (!message.failed) {\n toContentScript(\n {\n type: 'STOP',\n payload: undefined,\n source,\n instanceId,\n },\n serializeState,\n serializeAction,\n );\n }\n return;\n case 'OPTIONS':\n window.devToolsOptions = Object.assign(\n window.devToolsOptions || {},\n message.options,\n );\n return;\n }\n }\n\n const filteredActionIds: number[] = []; // simple circular buffer of non-excluded actions with fixed maxAge-1 length\n const getMaxAge = (\n liftedAction?: LiftedAction,\n liftedState?: LiftedState | undefined,\n ) => {\n const m = (config && config.maxAge) || window.devToolsOptions.maxAge || 50;\n if (\n !liftedAction ||\n noFiltersApplied(localFilter) ||\n !(liftedAction as PerformAction).action\n ) {\n return m;\n }\n if (!maxAge || maxAge < m) maxAge = m; // it can be modified in process on options page\n if (isFiltered((liftedAction as PerformAction).action, localFilter)) {\n // TODO: check also predicate && !predicate(state, action) with current state\n maxAge++;\n } else {\n filteredActionIds.push(liftedState!.nextActionId);\n if (filteredActionIds.length >= m) {\n const stagedActionIds = liftedState!.stagedActionIds;\n let i = 1;\n while (maxAge > m && !filteredActionIds.includes(stagedActionIds[i])) {\n maxAge--;\n i++;\n }\n filteredActionIds.shift();\n }\n }\n return maxAge;\n };\n\n function init() {\n setListener(onMessage, instanceId);\n notifyErrors(() => {\n errorOccurred = true;\n const state = store.liftedStore.getState();\n if (state.computedStates[state.currentStateIndex].error) {\n relayState(state);\n }\n return true;\n });\n\n toContentScript(\n {\n type: 'INIT_INSTANCE',\n payload: undefined,\n source,\n instanceId,\n },\n serializeState,\n serializeAction,\n );\n store.subscribe(handleChange);\n\n if (typeof reportId === 'undefined') {\n reportId = getUrlParam('remotedev_report');\n if (reportId) openWindow();\n }\n }\n\n function handleChange() {\n if (!monitor.active) return;\n if (!errorOccurred && !monitor.isMonitorAction()) {\n relayAction();\n return;\n }\n if (monitor.isPaused() || monitor.isLocked() || monitor.isTimeTraveling()) {\n return;\n }\n const liftedState = store.liftedStore.getState();\n if (\n errorOccurred &&\n !liftedState.computedStates[liftedState.currentStateIndex].error\n ) {\n errorOccurred = false;\n }\n relayState(liftedState);\n }\n\n const enhance = (): StoreEnhancer => (next) => {\n return , PreloadedState>(\n reducer_: Reducer,\n initialState_?: PreloadedState | undefined,\n ) => {\n if (!isAllowed(window.devToolsOptions)) {\n return next(reducer_, initialState_);\n }\n\n store = stores[instanceId] = (\n configureStore(next, monitor.reducer, {\n ...config,\n maxAge: getMaxAge as any,\n }) as any\n )(reducer_, initialState_);\n\n if (isInIframe()) setTimeout(init, 3000);\n else init();\n\n return store as any;\n };\n };\n\n return enhance();\n}\n\ndeclare global {\n interface Window {\n __REDUX_DEVTOOLS_EXTENSION__: ReduxDevtoolsExtension;\n }\n}\n\n// noinspection JSAnnotator\nwindow.__REDUX_DEVTOOLS_EXTENSION__ = __REDUX_DEVTOOLS_EXTENSION__ as any;\nwindow.__REDUX_DEVTOOLS_EXTENSION__.open = openWindow;\nwindow.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors = notifyErrors;\nwindow.__REDUX_DEVTOOLS_EXTENSION__.send = sendMessage;\nwindow.__REDUX_DEVTOOLS_EXTENSION__.listen = setListener;\nwindow.__REDUX_DEVTOOLS_EXTENSION__.connect = connect;\nwindow.__REDUX_DEVTOOLS_EXTENSION__.disconnect = disconnect;\n\nconst preEnhancer =\n (instanceId: number): StoreEnhancer =>\n (next) =>\n (reducer, preloadedState) => {\n const store = next(reducer, preloadedState);\n\n if (stores[instanceId]) {\n (stores[instanceId].initialDispatch as any) = store.dispatch;\n }\n\n return {\n ...store,\n dispatch: (...args: any[]) =>\n !window.__REDUX_DEVTOOLS_EXTENSION_LOCKED__ &&\n (store.dispatch as any)(...args),\n } as any;\n };\n\nexport type InferComposedStoreExt = StoreEnhancers extends [\n infer HeadStoreEnhancer,\n ...infer RestStoreEnhancers,\n]\n ? HeadStoreEnhancer extends StoreEnhancer\n ? StoreExt & InferComposedStoreExt\n : never\n : // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n {};\n\nconst extensionCompose =\n (config: Config) =>\n (\n ...funcs: StoreEnhancers\n ): StoreEnhancer> => {\n // @ts-expect-error FIXME\n return (...args) => {\n const instanceId = generateId(config.instanceId);\n return [preEnhancer(instanceId), ...funcs].reduceRight(\n (composed, f) => f(composed),\n __REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId })(...args),\n );\n };\n };\n\ninterface ReduxDevtoolsExtensionCompose {\n (\n config: Config,\n ): (\n ...funcs: StoreEnhancers\n ) => StoreEnhancer>;\n (\n ...funcs: StoreEnhancers\n ): StoreEnhancer>;\n}\n\ndeclare global {\n interface Window {\n __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: ReduxDevtoolsExtensionCompose;\n }\n}\n\nfunction reduxDevtoolsExtensionCompose(\n config: Config,\n): (\n ...funcs: StoreEnhancers\n) => StoreEnhancer>;\nfunction reduxDevtoolsExtensionCompose<\n StoreEnhancers extends readonly StoreEnhancer[],\n>(\n ...funcs: StoreEnhancers\n): StoreEnhancer>;\nfunction reduxDevtoolsExtensionCompose(...funcs: [Config] | StoreEnhancer[]) {\n if (funcs.length === 0) {\n return __REDUX_DEVTOOLS_EXTENSION__();\n }\n if (funcs.length === 1 && typeof funcs[0] === 'object') {\n return extensionCompose(funcs[0]);\n }\n return extensionCompose({})(...(funcs as StoreEnhancer[]));\n}\n\nwindow.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = reduxDevtoolsExtensionCompose;\n" }, { "path": "extension/src/remote/index.tsx", "content": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Root } from '@redux-devtools/app';\n\nchrome.storage.local.get(\n {\n 'select-monitor': 'InspectorMonitor',\n 'test-templates': null,\n 'test-templates-sel': null,\n 's:hostname': null,\n 's:port': null,\n 's:secure': null,\n },\n (options) => {\n const AppAsAny = Root as any;\n const root = createRoot(document.getElementById('root')!);\n root.render(\n ,\n );\n },\n);\n" }, { "path": "extension/src/remote/remote.pug", "content": "doctype html\r\n\r\nhtml\r\n head\r\n meta(charset='UTF-8')\r\n title RemoteDev\r\n include ../style.pug\r\n\r\n body\r\n #root\r\n link(href='/remote.bundle.css', rel='stylesheet')\r\n script(src='/remote.bundle.js')\r\n" }, { "path": "extension/src/style.pug", "content": "style.\n html {\n height: 100%;\n width: 100%;\n }\n body {\n overflow: hidden;\n height: 100%;\n width: 100%;\n min-width: 350px;\n min-height: 400px;\n margin: 0;\n padding: 0;\n font-family: \"Helvetica Neue\", \"Lucida Grande\", sans-serif;\n font-size: 11px;\n background-color: rgb(53, 59, 70);\n color: #fff;\n }\n #root {\n height: 100%;\n }\n #root > div {\n height: 100%;\n }\n #root > div > div:nth-child(2) {\n min-height: 0;\n }\n .ReactCodeMirror {\n overflow: auto;\n height: 100%;\n }\n button:disabled {\n opacity: 0.5;\n cursor: initial !important;\n }\n\n @media print {\n @page {\n size: auto;\n margin: 0;\n }\n\n body {\n position: static;\n }\n\n #root > div > div:not(:nth-child(2)) {\n display: none !important;\n }\n\n #root > div > div:nth-child(2) {\n overflow: visible !important;\n position: absolute !important;\n z-index: 2147483647;\n page-break-after: avoid;\n }\n\n #root > div > div:nth-child(2) * {\n overflow: visible !important;\n }\n }\n" }, { "path": "extension/test/.eslintrc", "content": "{\n \"env\": {\n \"mocha\": true\n },\n \"globals\": {\n \"UI\": true\n },\n \"rules\": {\n \"no-unused-expressions\": 0\n }\n}\n" }, { "path": "extension/test/__mocks__/styleMock.js", "content": "export default {};\n" }, { "path": "extension/test/app/containers/App.spec.jsx", "content": "import { jest } from '@jest/globals';\nimport React from 'react';\nimport { render, screen, within } from '@testing-library/react';\nimport { Provider } from 'react-redux';\nimport configureStore from '../../../src/devpanel/store/panelStore.js';\nimport App from '../../../src/app/App.js';\n\nObject.defineProperty(window, 'matchMedia', {\n writable: true,\n value: jest.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: jest.fn(), // deprecated\n removeListener: jest.fn(), // deprecated\n addEventListener: jest.fn(),\n removeEventListener: jest.fn(),\n dispatchEvent: jest.fn(),\n })),\n});\n\nconst { store } = configureStore();\n\ndescribe('App container', () => {\n it(\"should render inspector monitor's component\", () => {\n render(\n \n \n ,\n );\n expect(screen.getByTestId('inspector')).toBeDefined();\n });\n\n it('should contain an empty action list', () => {\n render(\n \n \n ,\n );\n const actionList = screen.getByTestId('actionList');\n expect(within(actionList).queryByRole('button')).not.toBeInTheDocument();\n });\n});\n" }, { "path": "extension/test/app/inject/api.spec.js", "content": "import { jest } from '@jest/globals';\nimport { insertScript, listenMessage } from '../../utils/inject.js';\nimport '../../../src/pageScript/index.js';\n\ndescribe('API', () => {\n it('should get window.__REDUX_DEVTOOLS_EXTENSION__ function', () => {\n expect(typeof window.__REDUX_DEVTOOLS_EXTENSION__).toBe('function');\n });\n\n it('should notify error', () => {\n const mockFunc = jest.fn(() => {});\n window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors(mockFunc);\n insertScript('hi()');\n expect(mockFunc.mock.calls.length).toBeGreaterThan(0);\n });\n\n it('should open monitor', async () => {\n let message = await listenMessage(() => {\n window.__REDUX_DEVTOOLS_EXTENSION__.open();\n });\n expect(message).toEqual({\n source: '@devtools-page',\n type: 'OPEN',\n position: 'window',\n });\n });\n\n it('should send message', async () => {\n let message = await listenMessage(() => {\n window.__REDUX_DEVTOOLS_EXTENSION__.send('hi');\n });\n expect(message).toMatchObject({\n type: 'ACTION',\n payload: undefined,\n instanceId: 1,\n name: undefined,\n source: '@devtools-page',\n });\n expect(message.action).toMatch(/{\"action\":{\"type\":\"hi\"},\"timestamp\":\\d+}/);\n\n message = await listenMessage(() => {\n window.__REDUX_DEVTOOLS_EXTENSION__.send(\n { type: 'hi' },\n { counter: 1 },\n 1,\n );\n });\n expect(message).toMatchObject({\n type: 'ACTION',\n payload: '{\"counter\":1}',\n instanceId: 1,\n name: undefined,\n source: '@devtools-page',\n });\n expect(message.action).toMatch(/{\"action\":{\"type\":\"hi\"},\"timestamp\":\\d+}/);\n\n message = await listenMessage(() => {\n window.__REDUX_DEVTOOLS_EXTENSION__.send(\n { type: 'hi' },\n { counter: 1 },\n 1,\n );\n });\n expect(message).toMatchObject({\n type: 'ACTION',\n payload: '{\"counter\":1}',\n instanceId: 1,\n name: undefined,\n source: '@devtools-page',\n });\n expect(message.action).toMatch(/{\"action\":{\"type\":\"hi\"},\"timestamp\":\\d+}/);\n\n message = await listenMessage(() => {\n window.__REDUX_DEVTOOLS_EXTENSION__.send(undefined, { counter: 1 }, 1);\n });\n expect(message).toEqual({\n action: undefined,\n type: 'STATE',\n payload: { counter: 1 },\n actionsById: undefined,\n computedStates: undefined,\n committedState: false,\n instanceId: 1,\n maxAge: undefined,\n name: undefined,\n source: '@devtools-page',\n });\n });\n});\n" }, { "path": "extension/test/app/inject/enhancer.spec.js", "content": "import { createStore, compose } from 'redux';\nimport { insertScript, listenMessage } from '../../utils/inject.js';\nimport '../../../src/pageScript/index.js';\n\nfunction counter(state = 0, action) {\n switch (action.type) {\n case 'INCREMENT':\n return state + 1;\n case 'DECREMENT':\n return state - 1;\n default:\n return state;\n }\n}\n\ndescribe('Redux enhancer', () => {\n it('should create the store', async () => {\n const message = await listenMessage(() => {\n window.store = createStore(\n counter,\n window.__REDUX_DEVTOOLS_EXTENSION__(),\n );\n expect(typeof window.store).toBe('object');\n });\n expect(message.type).toBe('INIT_INSTANCE');\n expect(window.store.getState()).toBe(0);\n insertScript('window.devToolsOptions = { serialize: false }');\n });\n\n it('should start monitoring', async () => {\n let message = await listenMessage(() => {\n window.postMessage({ type: 'START', source: '@devtools-extension' }, '*');\n });\n expect(message.type).toBe('START');\n\n message = await listenMessage();\n expect(message.type).toBe('STATE');\n expect(message.actionsById).toMatch(\n /{\"0\":{\"type\":\"PERFORM_ACTION\",\"action\":{\"type\":\"@@INIT\"},\"/,\n );\n expect(message.computedStates).toBe('[{\"state\":0}]');\n });\n\n it('should perform actions', async () => {\n let message = await listenMessage(() => {\n window.store.dispatch({ type: 'INCREMENT' });\n expect(window.store.getState()).toBe(1);\n });\n expect(message.type).toBe('ACTION');\n expect(message.action).toMatch(\n /{\"type\":\"PERFORM_ACTION\",\"action\":{\"type\":\"INCREMENT\"},/,\n );\n expect(message.payload).toBe('1');\n\n message = await listenMessage(() => {\n window.store.dispatch({ type: 'INCREMENT' });\n expect(window.store.getState()).toBe(2);\n });\n expect(message.type).toBe('ACTION');\n expect(message.action).toMatch(\n /{\"type\":\"PERFORM_ACTION\",\"action\":{\"type\":\"INCREMENT\"},/,\n );\n expect(message.payload).toBe('2');\n });\n\n it('should dispatch actions remotely', async () => {\n let message = await listenMessage(() => {\n window.postMessage(\n {\n type: 'ACTION',\n payload: \"{ type: 'INCREMENT' }\",\n source: '@devtools-extension',\n },\n '*',\n );\n });\n expect(message.type).toBe('ACTION');\n\n message = await listenMessage();\n expect(message.type).toBe('ACTION');\n expect(message.action).toMatch(\n /{\"type\":\"PERFORM_ACTION\",\"action\":{\"type\":\"INCREMENT\"},/,\n );\n expect(message.payload).toBe('3');\n });\n\n it('should cancel (toggle) action', async () => {\n let message = await listenMessage(() => {\n window.postMessage(\n {\n type: 'DISPATCH',\n payload: { type: 'TOGGLE_ACTION', id: 1 },\n source: '@devtools-extension',\n },\n '*',\n );\n });\n expect(message.type).toBe('DISPATCH');\n\n message = await listenMessage();\n expect(message.type).toBe('STATE');\n expect(window.store.getState()).toBe(2);\n\n message = await listenMessage(() => {\n window.postMessage(\n {\n type: 'DISPATCH',\n payload: { type: 'TOGGLE_ACTION', id: 1 },\n source: '@devtools-extension',\n },\n '*',\n );\n });\n expect(message.type).toBe('DISPATCH');\n\n message = await listenMessage();\n expect(message.type).toBe('STATE');\n expect(window.store.getState()).toBe(3);\n });\n\n it('should move back and forward (time travel)', async () => {\n let message = await listenMessage(() => {\n window.postMessage(\n {\n type: 'DISPATCH',\n payload: { type: 'JUMP_TO_STATE', index: 2, actionId: 2 },\n source: '@devtools-extension',\n },\n '*',\n );\n });\n expect(message.type).toBe('DISPATCH');\n expect(window.store.getState()).toBe(2);\n\n message = await listenMessage(() => {\n window.postMessage(\n {\n type: 'DISPATCH',\n payload: { type: 'JUMP_TO_STATE', index: 3, actionId: 3 },\n source: '@devtools-extension',\n },\n '*',\n );\n });\n expect(message.type).toBe('DISPATCH');\n expect(window.store.getState()).toBe(3);\n });\n\n it('should import state history', async () => {\n let message = await listenMessage(() => {\n window.postMessage(\n {\n type: 'IMPORT',\n state: JSON.stringify({\n monitorState: {},\n actionsById: {\n 0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },\n 1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } },\n 2: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } },\n },\n nextActionId: 3,\n stagedActionIds: [0, 1, 2],\n skippedActionIds: [],\n currentStateIndex: 2,\n computedStates: [{ state: 0 }, { state: 1 }, { state: 2 }],\n }),\n source: '@devtools-extension',\n },\n '*',\n );\n });\n expect(message.type).toBe('IMPORT');\n message = await listenMessage();\n expect(message.type).toBe('STATE');\n expect(window.store.getState()).toBe(2);\n });\n\n it('should create the store with config parameters', async () => {\n const message = await listenMessage(() => {\n window.store = createStore(\n counter,\n window.__REDUX_DEVTOOLS_EXTENSION__({\n actionsDenylist: ['SOME_ACTION'],\n }),\n );\n expect(typeof window.store).toBe('object');\n });\n expect(message.type).toBe('INIT_INSTANCE');\n });\n\n it('should create the store using old Redux api', async () => {\n const message = await listenMessage(() => {\n window.store =\n window.__REDUX_DEVTOOLS_EXTENSION__()(createStore)(counter);\n expect(typeof window.store).toBe('object');\n });\n expect(message.type).toBe('INIT_INSTANCE');\n });\n\n it('should create the store with several enhancers', async () => {\n const testEnhancer = (next) => (reducer, initialState, enhancer) =>\n next(reducer, initialState, enhancer);\n const message = await listenMessage(() => {\n window.store = createStore(\n counter,\n compose(testEnhancer, window.__REDUX_DEVTOOLS_EXTENSION__()),\n );\n expect(typeof window.store).toBe('object');\n });\n expect(message.type).toBe('INIT_INSTANCE');\n });\n});\n" }, { "path": "extension/test/chrome/extension.spec.js", "content": "import { resolve } from 'path';\nimport webdriver from 'selenium-webdriver';\nimport chrome from 'selenium-webdriver/chrome';\nimport { switchMonitorTests, delay } from '../utils/e2e.js';\n\nconst path = resolve(import.meta.dirname, '..', '..', 'dist');\nconst extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd';\nconst actionsPattern =\n /^@@INIT(.|\\n)+@@reduxReactRouter\\/routerDidChange(.|\\n)+@@reduxReactRouter\\/initRoutes(.|\\n)+$/;\n\ndescribe('Chrome extension', function () {\n let driver;\n\n beforeAll(async () => {\n driver = new webdriver.Builder()\n .setChromeOptions(\n new chrome.Options()\n .setBrowserVersion('stable')\n .addArguments(`load-extension=${path}`),\n )\n .forBrowser('chrome')\n .build();\n });\n\n afterAll(async () => {\n await driver.quit();\n });\n\n it(\"should open extension's window\", async () => {\n await driver.get(`chrome-extension://${extensionId}/devpanel.html`);\n const url = await driver.getCurrentUrl();\n expect(url).toBe(`chrome-extension://${extensionId}/devpanel.html`);\n });\n\n it('should match document title', async () => {\n const title = await driver.getTitle();\n expect(title).toBe('Redux DevTools');\n });\n\n it('should get actions list', async () => {\n const url = 'https://zalmoxisus.github.io/examples/router/';\n await driver.executeScript(`window.open('${url}')`);\n await delay(2000);\n\n const tabs = await driver.getAllWindowHandles();\n\n await driver.switchTo().window(tabs[1]);\n expect(await driver.getCurrentUrl()).toMatch(url);\n\n await driver.switchTo().window(tabs[0]);\n\n await delay(1000);\n const result = await driver.wait(\n driver\n .findElement(webdriver.By.xpath('//div[@data-testid=\"actionListRows\"]'))\n .getText()\n .then((val) => {\n return actionsPattern.test(val);\n }),\n 15000,\n \"it doesn't match actions pattern\",\n );\n expect(result).toBeTruthy();\n });\n\n it(\"should contain inspector monitor's component\", async () => {\n const val = await driver\n .findElement(webdriver.By.xpath('//div[@data-testid=\"inspector\"]'))\n .getText();\n expect(val).toBeDefined();\n });\n\n Object.keys(switchMonitorTests).forEach((description) =>\n // eslint-disable-next-line jest/expect-expect,jest/valid-title\n it(description, () => switchMonitorTests[description](driver)),\n );\n});\n" }, { "path": "extension/test/electron/devpanel.spec.js", "content": "import { join } from 'path';\nimport webdriver from 'selenium-webdriver';\nimport chrome from 'selenium-webdriver/chrome';\nimport electronPath from 'electron';\nimport chromedriver from 'chromedriver';\nimport { switchMonitorTests, delay } from '../utils/e2e.js';\n\nconst devPanelPath =\n 'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/devpanel.html';\n\ndescribe('DevTools panel for Electron', function () {\n let driver;\n\n beforeAll(async () => {\n chromedriver.start(['--port=9515']);\n await delay(1000);\n driver = new webdriver.Builder()\n .usingServer('http://localhost:9515')\n .setChromeOptions(\n new chrome.Options()\n .setChromeBinaryPath(electronPath)\n .addArguments(`app=${join(import.meta.dirname, 'fixture')}`),\n )\n .forBrowser('chrome')\n .build();\n });\n\n afterAll(async () => {\n await driver.quit();\n chromedriver.stop();\n });\n\n it('should open Redux DevTools tab', async () => {\n if (!(await driver.getCurrentUrl()).startsWith('devtools')) {\n const originalWindow = await driver.getWindowHandle();\n const windows = await driver.getAllWindowHandles();\n for (const window of windows) {\n if (window === originalWindow) continue;\n await driver.switchTo().window(window);\n if ((await driver.getCurrentUrl()).startsWith('devtools')) {\n break;\n }\n }\n }\n expect(await driver.getCurrentUrl()).toMatch(\n /devtools:\\/\\/devtools\\/bundled\\/devtools_app.html/,\n );\n\n const id = await driver.executeAsyncScript(function (callback) {\n let attempts = 5;\n function showReduxPanel() {\n if (attempts === 0) {\n return callback('Redux panel not found');\n }\n if (EUI.InspectorView) {\n const instance = EUI.InspectorView.InspectorView.instance();\n const tabs = instance.tabbedPane.tabs;\n const idList = tabs.map((tab) => tab.id);\n const reduxPanelId =\n 'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljdRedux';\n if (idList.indexOf(reduxPanelId) !== -1) {\n instance.showPanel(reduxPanelId);\n return callback(reduxPanelId);\n }\n }\n attempts--;\n setTimeout(showReduxPanel, 500);\n }\n showReduxPanel();\n });\n expect(id).toBe('chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljdRedux');\n\n const className = await driver\n .findElement(webdriver.By.className(id))\n .getAttribute('class');\n expect(className).not.toMatch(/hidden/); // not hidden\n });\n\n // eslint-disable-next-line jest/expect-expect\n it('should have Redux DevTools UI on current tab', async () => {\n await driver\n .switchTo()\n .frame(\n driver.findElement(\n webdriver.By.xpath(`//iframe[@src='${devPanelPath}']`),\n ),\n );\n await delay(1000);\n });\n\n it('should contain INIT action', async () => {\n const element = await driver.wait(\n webdriver.until.elementLocated(\n webdriver.By.xpath('//div[@data-testid=\"actionListRows\"]'),\n ),\n 5000,\n 'Element not found',\n );\n const val = await element.getText();\n expect(val).toMatch(/@@INIT/);\n });\n\n it(\"should contain Inspector monitor's component\", async () => {\n const val = await driver\n .findElement(webdriver.By.xpath('//div[@data-testid=\"inspector\"]'))\n .getText();\n expect(val).toBeDefined();\n });\n\n Object.keys(switchMonitorTests).forEach((description) =>\n // eslint-disable-next-line jest/expect-expect,jest/valid-title\n it(description, () => switchMonitorTests[description](driver)),\n );\n\n // eslint-disable-next-line jest/no-commented-out-tests\n /* it('should be no logs in console of main window', async () => {\n const handles = await driver.getAllWindowHandles();\n await driver.switchTo().window(handles[1]); // Change to main window\n\n expect(await driver.getTitle()).toBe('Electron Test');\n\n const logs = await driver.manage().logs().get(webdriver.logging.Type.BROWSER);\n expect(logs).toEqual([]);\n });\n*/\n});\n" }, { "path": "extension/test/electron/fixture/index.html", "content": "\n\n \n \n Electron Test\n \n \n 0\n \n \n \n \n\n" }, { "path": "extension/test/electron/fixture/main.js", "content": "const path = require('path');\nconst { app, BrowserWindow, session } = require('electron');\n\napp.on('window-all-closed', app.quit);\napp.whenReady().then(async () => {\n await session.defaultSession.loadExtension(\n path.join(__dirname, '../../../dist'),\n { allowFileAccess: true },\n );\n\n const mainWindow = new BrowserWindow({\n width: 150,\n height: 100,\n webPreferences: {\n nodeIntegration: true,\n contextIsolation: false,\n },\n });\n mainWindow.loadFile('index.html');\n mainWindow.webContents.openDevTools({ mode: 'detach' });\n});\n" }, { "path": "extension/test/electron/fixture/package.json", "content": "{\n \"name\": \"electron-test\",\n \"productName\": \"Electron Test\",\n \"main\": \"main.js\",\n \"version\": \"0.1.0\"\n}\n" }, { "path": "extension/test/electron/fixture/src/renderer.js", "content": "const { createStore } = require('redux');\n\nconst INCREMENT_COUNTER = 'INCREMENT_COUNTER';\nconst DECREMENT_COUNTER = 'DECREMENT_COUNTER';\n\nconst initialState = { value: 0 };\n\nconst store = createStore(\n (state, action) => {\n switch (action.type) {\n case INCREMENT_COUNTER:\n return { value: state.value + 1 };\n case DECREMENT_COUNTER:\n return { value: state.value - 1 };\n default:\n return state;\n }\n },\n initialState,\n window.__REDUX_DEVTOOLS_EXTENSION__\n ? window.__REDUX_DEVTOOLS_EXTENSION__()\n : (noop) => noop,\n);\n\nconst el = document.getElementById('counter');\n\nstore.subscribe(() => {\n el.innerHTML = store.getState().value;\n});\n\nconst increment = document.getElementById('increment');\nconst decrement = document.getElementById('decrement');\nincrement.onclick = () => store.dispatch({ type: INCREMENT_COUNTER });\ndecrement.onclick = () => store.dispatch({ type: DECREMENT_COUNTER });\n" }, { "path": "extension/test/electron/fixture/webpack.config.js", "content": "const path = require('path');\n\nmodule.exports = {\n mode: 'development',\n entry: './test/electron/fixture/src/renderer.js',\n output: {\n filename: 'renderer.js',\n path: path.resolve(__dirname, 'dist'),\n },\n};\n" }, { "path": "extension/test/perf/data.js", "content": "// Source: http://beta.json-generator.com/V1omRaUJG\n/* eslint-disable */\n\nexport const bigString = Array(10000000).join('t');\n\nexport const bigArray = [\n {\n _id: '580ddf0b168ab8fe470be6e0',\n index: 0,\n guid: '2ce09bef-e6a5-4894-b720-74c9eb72098d',\n isActive: true,\n balance: '$3,164.44',\n picture: 'http://placehold.it/32x32',\n age: 30,\n eyeColor: 'green',\n name: {\n first: 'Kenya',\n last: 'Hoover',\n },\n company: 'QUALITERN',\n email: 'kenya.hoover@qualitern.biz',\n phone: '+1 (829) 556-2040',\n address: '605 Glenwood Road, Cherokee, Oklahoma, 8113',\n about:\n 'Fugiat dolore ut esse ullamco incididunt culpa qui pariatur mollit nostrud incididunt. Quis pariatur sunt ut ipsum qui consequat sit dolore consequat esse elit consectetur do. Cillum labore cupidatat ipsum laboris. Non nisi minim adipisicing et culpa consectetur mollit incididunt ullamco. Non velit ea irure aute aliqua et incididunt officia laborum.',\n registered: 'Monday, June 22, 2015 9:38 AM',\n latitude: '84.835869',\n longitude: '64.139911',\n tags: ['eiusmod', 'aute', 'ipsum', 'ad', 'mollit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Alba Bartlett',\n },\n {\n id: 1,\n name: 'Andrews Mcleod',\n },\n {\n id: 2,\n name: 'Elise Velazquez',\n },\n ],\n greeting: 'Hello, Kenya! You have 8 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0bc26524220b80fa59',\n index: 1,\n guid: '80713a26-75b0-4a4e-914d-52f31fade72c',\n isActive: true,\n balance: '$1,455.30',\n picture: 'http://placehold.it/32x32',\n age: 28,\n eyeColor: 'blue',\n name: {\n first: 'Jami',\n last: 'Mcfarland',\n },\n company: 'LIMAGE',\n email: 'jami.mcfarland@limage.co.uk',\n phone: '+1 (944) 566-3918',\n address: '804 Montgomery Place, Henrietta, Alaska, 9608',\n about:\n 'Velit esse ut dolor Lorem laboris esse aute est pariatur tempor esse aute ut ut. In magna esse aute ea cillum qui mollit consectetur minim qui pariatur. Sit consequat fugiat ut veniam non ut deserunt culpa velit ex id laborum tempor. Duis est amet sunt id sunt. Ullamco minim officia irure quis veniam ipsum. Minim proident commodo ea ea dolore. Velit sunt magna commodo quis est dolor eiusmod aliqua occaecat tempor ut.',\n registered: 'Saturday, October 24, 2015 9:38 AM',\n latitude: '-39.25774',\n longitude: '-118.315297',\n tags: ['voluptate', 'dolor', 'enim', 'reprehenderit', 'et'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Goff Compton',\n },\n {\n id: 1,\n name: 'Sherry Randall',\n },\n {\n id: 2,\n name: 'Janell Mcconnell',\n },\n ],\n greeting: 'Hello, Jami! You have 9 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b8b30c17733f75cf3',\n index: 2,\n guid: 'dca38381-500a-4f4e-823a-d95484f9e87d',\n isActive: false,\n balance: '$1,451.88',\n picture: 'http://placehold.it/32x32',\n age: 27,\n eyeColor: 'brown',\n name: {\n first: 'Jodie',\n last: 'Holder',\n },\n company: 'AVIT',\n email: 'jodie.holder@avit.us',\n phone: '+1 (948) 512-2550',\n address:\n '371 Stockholm Street, Wattsville, Federated States Of Micronesia, 4778',\n about:\n 'Voluptate nisi commodo duis sunt. Magna consectetur minim consectetur esse excepteur adipisicing laboris. Culpa sunt culpa sit exercitation. Duis ea culpa aliqua do exercitation adipisicing ullamco ut officia occaecat incididunt dolore nisi. Tempor est proident cillum nulla do exercitation dolor incididunt. Aute magna aliquip elit irure dolor anim voluptate.',\n registered: 'Sunday, April 5, 2015 12:27 PM',\n latitude: '68.671844',\n longitude: '100.317594',\n tags: ['Lorem', 'qui', 'do', 'excepteur', 'duis'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Mason Carroll',\n },\n {\n id: 1,\n name: 'Bonnie Ross',\n },\n {\n id: 2,\n name: 'Shields Mays',\n },\n ],\n greeting: 'Hello, Jodie! You have 5 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0bd7a19dd3361592b6',\n index: 3,\n guid: '0c45af75-ee65-427a-a462-e01d5a3d882f',\n isActive: true,\n balance: '$1,883.45',\n picture: 'http://placehold.it/32x32',\n age: 25,\n eyeColor: 'brown',\n name: {\n first: 'Britney',\n last: 'Ryan',\n },\n company: 'BUNGA',\n email: 'britney.ryan@bunga.name',\n phone: '+1 (996) 502-2698',\n address: '520 Monument Walk, Shindler, Iowa, 1721',\n about:\n 'Cupidatat aute est consectetur eiusmod ut veniam qui sit adipisicing Lorem nostrud proident deserunt exercitation. Laborum ullamco minim nisi nulla ullamco fugiat laboris nisi eiusmod ullamco enim aliqua deserunt. Occaecat anim aliquip est sunt voluptate qui dolore. Minim mollit et esse quis tempor eu anim deserunt nostrud. Voluptate amet voluptate eu anim culpa quis. Non do aliqua sit cupidatat eiusmod commodo in sit esse consequat. Cupidatat elit do exercitation ex proident ex nulla ex ad ut.',\n registered: 'Tuesday, January 19, 2016 12:05 PM',\n latitude: '-12.692828',\n longitude: '172.541591',\n tags: ['fugiat', 'fugiat', 'anim', 'magna', 'in'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Jeanette Paul',\n },\n {\n id: 1,\n name: 'Jones Sherman',\n },\n {\n id: 2,\n name: 'Pruitt Gross',\n },\n ],\n greeting: 'Hello, Britney! You have 8 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0bdb18815e253438a8',\n index: 4,\n guid: '35df48d8-e840-43fc-b99c-f078a0c028d5',\n isActive: false,\n balance: '$2,753.26',\n picture: 'http://placehold.it/32x32',\n age: 20,\n eyeColor: 'blue',\n name: {\n first: 'West',\n last: 'Sharp',\n },\n company: 'GROK',\n email: 'west.sharp@grok.info',\n phone: '+1 (947) 561-3088',\n address: '217 Clay Street, Fingerville, Puerto Rico, 382',\n about:\n 'Tempor ut ex aliqua ipsum. Ipsum fugiat dolor exercitation mollit eiusmod duis nulla occaecat excepteur ea irure minim minim sit. Proident esse id deserunt tempor dolor sit consectetur proident deserunt fugiat excepteur laborum. Incididunt fugiat id fugiat id Lorem est sit aliqua sit officia excepteur nulla mollit. Aliquip nulla nisi ea qui ex non nostrud culpa et anim. Velit labore esse id exercitation ex duis aliquip est ea eu. Sint Lorem mollit deserunt adipisicing do amet laborum velit nostrud commodo enim fugiat anim pariatur.',\n registered: 'Tuesday, May 10, 2016 2:56 PM',\n latitude: '6.032735',\n longitude: '-168.931741',\n tags: ['non', 'aliquip', 'ullamco', 'ex', 'veniam'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Head Riley',\n },\n {\n id: 1,\n name: 'Meyer Oneal',\n },\n {\n id: 2,\n name: 'Molina Tyson',\n },\n ],\n greeting: 'Hello, West! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0ba2234b9e4a2b47b2',\n index: 5,\n guid: '16a1e635-f30b-49d7-b0f2-69ee74313900',\n isActive: true,\n balance: '$3,982.09',\n picture: 'http://placehold.it/32x32',\n age: 40,\n eyeColor: 'blue',\n name: {\n first: 'Manuela',\n last: 'Henry',\n },\n company: 'MEDCOM',\n email: 'manuela.henry@medcom.io',\n phone: '+1 (876) 521-2923',\n address: '112 Clove Road, Cliffside, Kansas, 6979',\n about:\n 'Exercitation ea esse aliquip sint nisi consequat dolor adipisicing do pariatur et id est voluptate. In occaecat dolor exercitation do aliquip cillum in. Deserunt nisi deserunt Lorem aliqua adipisicing. Consequat eiusmod occaecat pariatur mollit aliqua non tempor aliquip sint consequat sit enim. Elit consectetur dolor sint ipsum officia in duis laboris irure aliquip ea labore. Aliquip ullamco fugiat dolore fugiat id. Deserunt id amet eiusmod tempor do tempor ut laborum.',\n registered: 'Wednesday, March 4, 2015 4:00 PM',\n latitude: '-53.534313',\n longitude: '101.348892',\n tags: ['sint', 'voluptate', 'duis', 'laboris', 'nisi'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Beryl Chang',\n },\n {\n id: 1,\n name: 'Pierce Simpson',\n },\n {\n id: 2,\n name: 'Sonja Pacheco',\n },\n ],\n greeting: 'Hello, Manuela! You have 6 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b39bcca5393e6b4a5',\n index: 6,\n guid: '4c69c263-a646-4446-adfe-eeac5481ade3',\n isActive: false,\n balance: '$1,557.52',\n picture: 'http://placehold.it/32x32',\n age: 36,\n eyeColor: 'green',\n name: {\n first: 'Marcy',\n last: 'Collier',\n },\n company: 'KINETICA',\n email: 'marcy.collier@kinetica.com',\n phone: '+1 (812) 599-2621',\n address: '701 Melrose Street, Cloverdale, North Dakota, 8703',\n about:\n 'Cupidatat velit cupidatat officia ad. Nulla cupidatat esse velit velit. Officia amet ea cupidatat sint consequat cupidatat. Eiusmod deserunt laborum qui proident tempor ullamco tempor officia laborum cillum ipsum commodo mollit.',\n registered: 'Sunday, December 7, 2014 11:48 PM',\n latitude: '19.152716',\n longitude: '119.251991',\n tags: ['minim', 'qui', 'exercitation', 'tempor', 'sunt'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Estes Porter',\n },\n {\n id: 1,\n name: 'Sheila Miller',\n },\n {\n id: 2,\n name: 'Bell Rosario',\n },\n ],\n greeting: 'Hello, Marcy! You have 9 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b0887381e90657c23',\n index: 7,\n guid: '80b50d03-70cd-4ce5-b6c7-c3d60b9e29ff',\n isActive: false,\n balance: '$3,203.72',\n picture: 'http://placehold.it/32x32',\n age: 34,\n eyeColor: 'green',\n name: {\n first: 'Esperanza',\n last: 'Mack',\n },\n company: 'FURNAFIX',\n email: 'esperanza.mack@furnafix.tv',\n phone: '+1 (948) 511-2731',\n address: '502 Bliss Terrace, Marenisco, Northern Mariana Islands, 7773',\n about:\n 'Proident deserunt ipsum aute irure laboris nisi non velit officia nisi anim. Magna nisi eiusmod deserunt ad veniam sit ullamco sit fugiat officia dolor incididunt id irure. Laborum id fugiat pariatur dolor proident Lorem do ex occaecat.',\n registered: 'Sunday, April 24, 2016 9:33 AM',\n latitude: '79.033601',\n longitude: '138.782377',\n tags: ['velit', 'sint', 'est', 'proident', 'in'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Roy Clemons',\n },\n {\n id: 1,\n name: 'Baldwin Glenn',\n },\n {\n id: 2,\n name: 'Castaneda Combs',\n },\n ],\n greeting: 'Hello, Esperanza! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0bee6486345816b9f4',\n index: 8,\n guid: '629ee6bb-bbe3-4f7e-9f6c-b8b53761e7b5',\n isActive: false,\n balance: '$2,112.11',\n picture: 'http://placehold.it/32x32',\n age: 37,\n eyeColor: 'green',\n name: {\n first: 'Bender',\n last: 'Sheppard',\n },\n company: 'PROXSOFT',\n email: 'bender.sheppard@proxsoft.net',\n phone: '+1 (986) 490-3036',\n address: '509 Fuller Place, Dodge, Montana, 1706',\n about:\n 'Ullamco dolore fugiat nulla non amet Lorem elit ullamco ipsum. Mollit anim do eiusmod esse sint esse voluptate exercitation ipsum ut nulla. Dolore pariatur eiusmod amet reprehenderit. Ea officia in ipsum laborum officia id tempor quis nostrud id ex id duis. Eiusmod incididunt voluptate duis sint laborum.',\n registered: 'Sunday, June 19, 2016 8:45 AM',\n latitude: '-35.720137',\n longitude: '-49.926356',\n tags: ['enim', 'cupidatat', 'cupidatat', 'tempor', 'cupidatat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Owens Branch',\n },\n {\n id: 1,\n name: 'Williams Boone',\n },\n {\n id: 2,\n name: 'Doris Morrison',\n },\n ],\n greeting: 'Hello, Bender! You have 5 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b4b41ebbb13abd5d0',\n index: 9,\n guid: '54401f5b-ae5f-412c-9149-7a361a73e02f',\n isActive: true,\n balance: '$1,483.87',\n picture: 'http://placehold.it/32x32',\n age: 26,\n eyeColor: 'brown',\n name: {\n first: 'Summers',\n last: 'Donaldson',\n },\n company: 'ARTIQ',\n email: 'summers.donaldson@artiq.org',\n phone: '+1 (972) 486-2456',\n address: '980 Pierrepont Street, Gerber, Ohio, 9892',\n about:\n 'Proident veniam officia sunt esse culpa labore anim quis do. Sunt ullamco elit amet incididunt fugiat magna id do veniam ullamco et anim. Aute labore pariatur ex ea deserunt nulla Lorem adipisicing non ad. Id ea proident voluptate aliqua velit aliquip enim incididunt. Do ipsum ipsum voluptate voluptate aliquip ex officia velit in officia ex esse aute.',\n registered: 'Tuesday, December 30, 2014 1:21 AM',\n latitude: '-83.907394',\n longitude: '10.741994',\n tags: ['laborum', 'proident', 'occaecat', 'elit', 'occaecat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Love Lott',\n },\n {\n id: 1,\n name: 'Johnson Clay',\n },\n {\n id: 2,\n name: 'Nelson Blair',\n },\n ],\n greeting: 'Hello, Summers! You have 8 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0bc2e80831e45b4dc6',\n index: 10,\n guid: '0e7ba51d-202e-4e28-a6a5-a9b6ec63abd4',\n isActive: false,\n balance: '$3,079.46',\n picture: 'http://placehold.it/32x32',\n age: 38,\n eyeColor: 'blue',\n name: {\n first: 'Shelby',\n last: 'Conway',\n },\n company: 'ZINCA',\n email: 'shelby.conway@zinca.me',\n phone: '+1 (985) 510-2634',\n address: '955 Seagate Terrace, Verdi, Oregon, 6649',\n about:\n 'Incididunt aliqua veniam elit ea cupidatat dolore. Ipsum culpa ut consequat velit sint sint ad. Ex fugiat consequat et sit ex sit esse ullamco magna reprehenderit ea id reprehenderit. Adipisicing et esse commodo sit Lorem ipsum ea fugiat officia do et culpa reprehenderit sunt.',\n registered: 'Tuesday, March 1, 2016 12:46 PM',\n latitude: '79.379348',\n longitude: '-179.029537',\n tags: ['elit', 'dolore', 'in', 'excepteur', 'sit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Dean Salinas',\n },\n {\n id: 1,\n name: 'Josie Calhoun',\n },\n {\n id: 2,\n name: 'Huffman Walton',\n },\n ],\n greeting: 'Hello, Shelby! You have 10 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b38c03f61248fbb18',\n index: 11,\n guid: '004be9ab-5520-4f85-b6e9-806c701faafe',\n isActive: false,\n balance: '$3,974.78',\n picture: 'http://placehold.it/32x32',\n age: 23,\n eyeColor: 'green',\n name: {\n first: 'Reynolds',\n last: 'Hurley',\n },\n company: 'TELLIFLY',\n email: 'reynolds.hurley@tellifly.ca',\n phone: '+1 (906) 482-2018',\n address: '364 Jackson Court, Edmund, Arizona, 5300',\n about:\n 'Aute deserunt labore consectetur non anim culpa mollit. Cillum Lorem excepteur esse non anim. Duis aliqua id laborum ex mollit id tempor nisi non voluptate. Nostrud enim in labore consequat id laboris Lorem veniam veniam amet. Laboris nostrud dolore proident labore incididunt elit quis officia elit est exercitation veniam aute.',\n registered: 'Friday, May 27, 2016 1:32 PM',\n latitude: '-5.022457',\n longitude: '96.958037',\n tags: ['sit', 'laboris', 'Lorem', 'dolor', 'sint'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Heidi Flores',\n },\n {\n id: 1,\n name: 'Armstrong Middleton',\n },\n {\n id: 2,\n name: 'Figueroa Camacho',\n },\n ],\n greeting: 'Hello, Reynolds! You have 9 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0b1835b3ed2579bfc0',\n index: 12,\n guid: '88c12f0a-23df-4161-8e3a-c6c3101292f2',\n isActive: false,\n balance: '$1,419.27',\n picture: 'http://placehold.it/32x32',\n age: 38,\n eyeColor: 'blue',\n name: {\n first: 'Young',\n last: 'Santiago',\n },\n company: 'GINKLE',\n email: 'young.santiago@ginkle.biz',\n phone: '+1 (922) 566-2702',\n address: '278 Bartlett Place, Tetherow, Vermont, 191',\n about:\n 'Est consectetur esse culpa ullamco. Dolore voluptate aute consequat voluptate. Exercitation fugiat est anim qui exercitation nostrud.',\n registered: 'Tuesday, June 28, 2016 7:18 AM',\n latitude: '-43.055507',\n longitude: '45.085776',\n tags: ['sit', 'Lorem', 'deserunt', 'fugiat', 'cupidatat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Sheryl Smith',\n },\n {\n id: 1,\n name: 'Felicia Mcintosh',\n },\n {\n id: 2,\n name: 'Hoover Hardy',\n },\n ],\n greeting: 'Hello, Young! You have 5 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0bf31dbaaeb3c9cfcd',\n index: 13,\n guid: '3a39f0ef-3659-4e01-b2d7-bb537fdd1a3a',\n isActive: false,\n balance: '$2,529.26',\n picture: 'http://placehold.it/32x32',\n age: 34,\n eyeColor: 'blue',\n name: {\n first: 'Trina',\n last: 'Decker',\n },\n company: 'SULTRAXIN',\n email: 'trina.decker@sultraxin.co.uk',\n phone: '+1 (980) 524-2887',\n address: '874 Llama Court, Klondike, California, 293',\n about:\n 'Ad duis Lorem nulla ex. Proident pariatur Lorem pariatur fugiat deserunt duis incididunt esse eiusmod officia. Eiusmod quis pariatur mollit sint exercitation aute. Mollit enim consequat aliqua quis. Fugiat Lorem do duis aute sit dolore.',\n registered: 'Friday, February 19, 2016 1:30 PM',\n latitude: '15.917567',\n longitude: '-1.518009',\n tags: ['ex', 'sit', 'enim', 'consequat', 'sit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Wyatt Pickett',\n },\n {\n id: 1,\n name: 'Valarie Barr',\n },\n {\n id: 2,\n name: 'Pace Best',\n },\n ],\n greeting: 'Hello, Trina! You have 6 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0b3934d0edbaeaba18',\n index: 14,\n guid: 'd5f5a79c-de56-4aca-bcc4-1b9df58a2b1d',\n isActive: false,\n balance: '$3,670.31',\n picture: 'http://placehold.it/32x32',\n age: 35,\n eyeColor: 'green',\n name: {\n first: 'Tasha',\n last: 'Merritt',\n },\n company: 'RODEOCEAN',\n email: 'tasha.merritt@rodeocean.us',\n phone: '+1 (940) 421-2122',\n address: '790 Suydam Place, Keyport, Idaho, 2211',\n about:\n 'Ad elit cillum laboris laborum ut minim aute non ullamco ipsum incididunt labore officia velit. Cillum sunt do laboris enim eiusmod ad elit nostrud est deserunt quis. Consectetur ea ex consectetur commodo cillum sunt mollit Lorem ea sunt sit ut magna. Quis labore fugiat aliquip non consectetur est. Ut pariatur duis veniam ut exercitation est est. Ullamco dolore nulla est pariatur.',\n registered: 'Wednesday, October 22, 2014 11:57 PM',\n latitude: '12.554934',\n longitude: '-149.800679',\n tags: ['reprehenderit', 'ex', 'tempor', 'sint', 'exercitation'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Dennis Mills',\n },\n {\n id: 1,\n name: 'Vargas Guerrero',\n },\n {\n id: 2,\n name: 'Hollie Chavez',\n },\n ],\n greeting: 'Hello, Tasha! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0bafee284452c9a02e',\n index: 15,\n guid: 'b35eff37-836a-4928-9a06-701c2bc32881',\n isActive: true,\n balance: '$2,931.23',\n picture: 'http://placehold.it/32x32',\n age: 24,\n eyeColor: 'blue',\n name: {\n first: 'Maryann',\n last: 'Ewing',\n },\n company: 'ASSISTIA',\n email: 'maryann.ewing@assistia.name',\n phone: '+1 (911) 512-2851',\n address: '450 Seeley Street, Winfred, Mississippi, 587',\n about:\n 'Aliquip et Lorem aliquip aute adipisicing nisi incididunt deserunt non ipsum irure cillum voluptate. Sunt exercitation irure mollit proident anim ut veniam enim ullamco eiusmod do sint aliqua aliqua. Enim sunt quis exercitation culpa velit. Officia commodo amet enim quis ipsum non Lorem non excepteur. Quis aute elit irure elit sit ullamco cupidatat ullamco enim et cillum id.',\n registered: 'Friday, June 17, 2016 2:12 PM',\n latitude: '47.215077',\n longitude: '81.317216',\n tags: ['commodo', 'id', 'nulla', 'pariatur', 'exercitation'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Sue Finley',\n },\n {\n id: 1,\n name: 'Chandler Mccarty',\n },\n {\n id: 2,\n name: 'Laura Coleman',\n },\n ],\n greeting: 'Hello, Maryann! You have 8 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0b5b3b1890b6b64d7b',\n index: 16,\n guid: 'ef7682f0-23ff-479d-8a81-54d01e2641ec',\n isActive: true,\n balance: '$1,841.30',\n picture: 'http://placehold.it/32x32',\n age: 30,\n eyeColor: 'brown',\n name: {\n first: 'Hammond',\n last: 'Koch',\n },\n company: 'CYCLONICA',\n email: 'hammond.koch@cyclonica.info',\n phone: '+1 (974) 481-2184',\n address: '141 Exeter Street, Kipp, Alabama, 643',\n about:\n 'Ullamco aliqua id veniam ea do. Commodo dolore fugiat ut aliquip. Est ut qui elit amet. Aliquip mollit occaecat consequat id exercitation eu fugiat voluptate culpa labore eiusmod aliqua cillum. Eu amet consequat deserunt enim qui mollit aliqua nisi ad ut veniam elit pariatur.',\n registered: 'Sunday, July 13, 2014 10:47 PM',\n latitude: '8.698118',\n longitude: '-68.775186',\n tags: ['id', 'voluptate', 'labore', 'magna', 'Lorem'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Mildred Brewer',\n },\n {\n id: 1,\n name: 'Buck Potts',\n },\n {\n id: 2,\n name: 'Kline Valencia',\n },\n ],\n greeting: 'Hello, Hammond! You have 5 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0be6e62a7ef65bf203',\n index: 17,\n guid: '2c45743d-dfe7-4621-acc2-7664fc7a39f1',\n isActive: true,\n balance: '$3,281.24',\n picture: 'http://placehold.it/32x32',\n age: 23,\n eyeColor: 'blue',\n name: {\n first: 'Holt',\n last: 'Pennington',\n },\n company: 'NORALEX',\n email: 'holt.pennington@noralex.io',\n phone: '+1 (948) 557-3137',\n address: '483 Woodruff Avenue, Kapowsin, Illinois, 6162',\n about:\n 'Nisi non consectetur est deserunt nisi aliqua. Mollit labore dolore ex ex id eu proident nostrud deserunt consequat nostrud. Ad irure duis ex enim commodo proident ullamco esse. Ex sit eiusmod occaecat minim nulla ut Lorem Lorem. Quis est in et est cupidatat fugiat dolor minim voluptate.',\n registered: 'Saturday, September 20, 2014 3:43 AM',\n latitude: '-1.585287',\n longitude: '-32.054323',\n tags: ['ex', 'adipisicing', 'est', 'aute', 'amet'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Irma Wynn',\n },\n {\n id: 1,\n name: 'Branch Todd',\n },\n {\n id: 2,\n name: 'Carey Dejesus',\n },\n ],\n greeting: 'Hello, Holt! You have 7 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0bd38a23008f8a6714',\n index: 18,\n guid: 'ef07b7c0-ee2e-4163-9c25-829cfcd2b142',\n isActive: true,\n balance: '$2,267.65',\n picture: 'http://placehold.it/32x32',\n age: 27,\n eyeColor: 'brown',\n name: {\n first: 'Farley',\n last: 'Jensen',\n },\n company: 'CODACT',\n email: 'farley.jensen@codact.com',\n phone: '+1 (861) 581-3498',\n address: '535 Richmond Street, Boomer, Rhode Island, 4214',\n about:\n 'Et dolore do qui velit aliquip sit laboris consequat tempor officia pariatur ex. Consectetur adipisicing non exercitation qui culpa deserunt reprehenderit magna qui laboris irure commodo ex excepteur. Do sit eiusmod amet pariatur velit reprehenderit pariatur tempor irure.',\n registered: 'Thursday, January 21, 2016 10:53 PM',\n latitude: '57.38679',\n longitude: '-118.607665',\n tags: ['esse', 'ipsum', 'nisi', 'tempor', 'veniam'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Roslyn Bush',\n },\n {\n id: 1,\n name: 'Garrison Good',\n },\n {\n id: 2,\n name: 'Langley Mccray',\n },\n ],\n greeting: 'Hello, Farley! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0b4d770216e6684e75',\n index: 19,\n guid: '7d88afe0-cc56-454c-ae62-bebcd97bf1ce',\n isActive: false,\n balance: '$2,132.97',\n picture: 'http://placehold.it/32x32',\n age: 20,\n eyeColor: 'green',\n name: {\n first: 'Lindsey',\n last: 'Mccall',\n },\n company: 'CENTICE',\n email: 'lindsey.mccall@centice.tv',\n phone: '+1 (833) 454-2919',\n address: '809 Seaview Court, Sexton, New Mexico, 333',\n about:\n 'Id minim voluptate ullamco voluptate elit in consectetur irure commodo velit qui eiusmod exercitation. Commodo magna consectetur excepteur eiusmod est minim ipsum occaecat amet. Labore quis anim aliqua Lorem qui. Sint ad cillum cillum excepteur eu nostrud aute.',\n registered: 'Thursday, February 20, 2014 10:05 AM',\n latitude: '41.095766',\n longitude: '-80.580867',\n tags: ['esse', 'do', 'velit', 'deserunt', 'officia'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Allie Deleon',\n },\n {\n id: 1,\n name: 'Trudy Miles',\n },\n {\n id: 2,\n name: 'Lucy Lambert',\n },\n ],\n greeting: 'Hello, Lindsey! You have 5 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b1cd38dd10da43b88',\n index: 20,\n guid: '29e94d5c-de50-4bd1-93bd-ccbb98e2b0b5',\n isActive: true,\n balance: '$1,494.27',\n picture: 'http://placehold.it/32x32',\n age: 35,\n eyeColor: 'brown',\n name: {\n first: 'Schmidt',\n last: 'Terry',\n },\n company: 'ACCUSAGE',\n email: 'schmidt.terry@accusage.net',\n phone: '+1 (917) 421-2816',\n address: '949 Beard Street, Allensworth, Marshall Islands, 5372',\n about:\n 'Sint ex aute irure consequat mollit nostrud non. Non laboris ut deserunt nulla commodo id deserunt ut magna duis irure cupidatat. Deserunt eu incididunt exercitation velit ad laborum ad ipsum mollit reprehenderit laboris occaecat ullamco nulla. Consequat culpa id ullamco voluptate esse incididunt sint labore anim minim Lorem quis duis. In officia ex enim enim.',\n registered: 'Tuesday, January 26, 2016 1:28 PM',\n latitude: '41.675283',\n longitude: '-72.234891',\n tags: ['consequat', 'aliqua', 'nostrud', 'voluptate', 'dolor'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Vonda Byers',\n },\n {\n id: 1,\n name: 'Ashley Mayer',\n },\n {\n id: 2,\n name: 'Deborah Fuller',\n },\n ],\n greeting: 'Hello, Schmidt! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0b06efb327eb692d35',\n index: 21,\n guid: 'ea02ef2d-6359-47c3-b324-c753511ea778',\n isActive: false,\n balance: '$1,009.38',\n picture: 'http://placehold.it/32x32',\n age: 24,\n eyeColor: 'brown',\n name: {\n first: 'Bradley',\n last: 'Wyatt',\n },\n company: 'PANZENT',\n email: 'bradley.wyatt@panzent.org',\n phone: '+1 (875) 520-2168',\n address: '287 Utica Avenue, Hendersonville, Nebraska, 8366',\n about:\n 'Do duis proident qui reprehenderit adipisicing nisi aliquip. Ut proident adipisicing quis proident sunt laboris adipisicing dolor. Non est aute Lorem cupidatat minim ea irure laborum minim eiusmod tempor nulla.',\n registered: 'Tuesday, May 6, 2014 6:25 PM',\n latitude: '77.325105',\n longitude: '-85.665071',\n tags: ['in', 'laborum', 'irure', 'irure', 'exercitation'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Stacey Banks',\n },\n {\n id: 1,\n name: 'Kelley Cox',\n },\n {\n id: 2,\n name: 'Gayle Ochoa',\n },\n ],\n greeting: 'Hello, Bradley! You have 6 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0b39a0426fed8383c6',\n index: 22,\n guid: '061746b2-33e4-4f40-b19d-d829a2068d87',\n isActive: true,\n balance: '$2,235.00',\n picture: 'http://placehold.it/32x32',\n age: 32,\n eyeColor: 'blue',\n name: {\n first: 'Stafford',\n last: 'Sweet',\n },\n company: 'VIRVA',\n email: 'stafford.sweet@virva.me',\n phone: '+1 (902) 447-3038',\n address: '688 Bond Street, Robinette, Pennsylvania, 3883',\n about:\n 'Proident minim quis esse excepteur voluptate reprehenderit ea. Adipisicing esse ex aute in exercitation aute enim ut qui fugiat ex tempor eiusmod. Consectetur minim exercitation dolor aliquip pariatur cupidatat deserunt eu reprehenderit anim duis occaecat culpa. Sint aliquip ad mollit ut dolor excepteur duis nulla ipsum.',\n registered: 'Sunday, March 30, 2014 7:54 PM',\n latitude: '83.670234',\n longitude: '-59.354751',\n tags: ['proident', 'et', 'sit', 'id', 'reprehenderit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Christi Willis',\n },\n {\n id: 1,\n name: 'Deidre Thompson',\n },\n {\n id: 2,\n name: 'Torres Kennedy',\n },\n ],\n greeting: 'Hello, Stafford! You have 9 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0bbd300e4bf08c3141',\n index: 23,\n guid: '9319b49d-63ef-4a31-bf86-70b0ceb377d9',\n isActive: false,\n balance: '$2,151.45',\n picture: 'http://placehold.it/32x32',\n age: 25,\n eyeColor: 'blue',\n name: {\n first: 'Clarke',\n last: 'Rhodes',\n },\n company: 'LIQUIDOC',\n email: 'clarke.rhodes@liquidoc.ca',\n phone: '+1 (861) 411-3808',\n address: '276 Gain Court, Downsville, Maine, 6619',\n about:\n 'Ullamco eu enim fugiat duis quis eiusmod elit eiusmod aute. Adipisicing anim mollit non cillum irure velit deserunt magna voluptate incididunt ad dolore laboris non. Excepteur aute cillum dolore voluptate mollit quis ut ea non ullamco sint. Ullamco exercitation quis consequat proident ipsum aliqua dolor laboris voluptate dolore excepteur veniam. Nostrud sunt proident officia quis laborum proident elit laboris do.',\n registered: 'Sunday, February 15, 2015 5:43 AM',\n latitude: '-81.487322',\n longitude: '-112.87443',\n tags: ['velit', 'nostrud', 'enim', 'voluptate', 'et'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Mindy Horne',\n },\n {\n id: 1,\n name: 'Pamela Logan',\n },\n {\n id: 2,\n name: 'Peters Mccullough',\n },\n ],\n greeting: 'Hello, Clarke! You have 7 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b736919e3a60cfa05',\n index: 24,\n guid: '8e31e6e1-3cc6-4a9f-bfa7-9955ec571776',\n isActive: true,\n balance: '$3,542.80',\n picture: 'http://placehold.it/32x32',\n age: 25,\n eyeColor: 'brown',\n name: {\n first: 'Simon',\n last: 'Sellers',\n },\n company: 'PEARLESSA',\n email: 'simon.sellers@pearlessa.biz',\n phone: '+1 (963) 586-2837',\n address: '691 Wyona Street, Calvary, West Virginia, 216',\n about:\n 'Mollit consequat aliquip ad ut in reprehenderit. Ea aute laborum id dolor labore est adipisicing deserunt sit aliquip culpa culpa eiusmod excepteur. Mollit veniam magna ut mollit. Exercitation elit veniam laboris nostrud deserunt sint aute.',\n registered: 'Monday, November 9, 2015 12:10 AM',\n latitude: '-3.493185',\n longitude: '-172.87793',\n tags: ['id', 'labore', 'consequat', 'ea', 'occaecat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Lorrie Eaton',\n },\n {\n id: 1,\n name: 'Puckett Harper',\n },\n {\n id: 2,\n name: 'Roach Powers',\n },\n ],\n greeting: 'Hello, Simon! You have 10 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b2d85bc8100e78a3c',\n index: 25,\n guid: 'c836a6ee-d898-46a8-82f5-30408c199ed9',\n isActive: false,\n balance: '$1,425.17',\n picture: 'http://placehold.it/32x32',\n age: 36,\n eyeColor: 'blue',\n name: {\n first: 'Tyler',\n last: 'Rose',\n },\n company: 'ZOGAK',\n email: 'tyler.rose@zogak.co.uk',\n phone: '+1 (959) 508-3061',\n address: '575 Furman Avenue, Zeba, South Dakota, 5624',\n about:\n 'Lorem irure eiusmod quis nostrud anim aute consequat mollit est. Fugiat laboris tempor officia voluptate commodo dolore. Aute elit ipsum esse cupidatat laborum anim nisi in exercitation quis duis. Nisi exercitation labore pariatur quis fugiat. Consequat cillum deserunt exercitation officia mollit amet reprehenderit laborum adipisicing id ex cupidatat. Tempor in aliqua irure ad. Cupidatat qui et aliqua sunt sint laboris incididunt in.',\n registered: 'Friday, November 27, 2015 6:39 PM',\n latitude: '21.932938',\n longitude: '-144.979719',\n tags: ['mollit', 'excepteur', 'deserunt', 'ipsum', 'proident'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Felecia Cantrell',\n },\n {\n id: 1,\n name: 'Ortega Wilkinson',\n },\n {\n id: 2,\n name: 'Linda Jennings',\n },\n ],\n greeting: 'Hello, Tyler! You have 6 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0b0a52937ecb5d0c4d',\n index: 26,\n guid: 'a7778e1d-70c3-4f66-ac41-60035653fb5f',\n isActive: true,\n balance: '$1,640.96',\n picture: 'http://placehold.it/32x32',\n age: 21,\n eyeColor: 'green',\n name: {\n first: 'Greer',\n last: 'Robbins',\n },\n company: 'KYAGURU',\n email: 'greer.robbins@kyaguru.us',\n phone: '+1 (925) 443-3311',\n address: '650 Grant Avenue, Falmouth, Texas, 2573',\n about:\n 'Ipsum adipisicing occaecat occaecat deserunt non cupidatat non velit deserunt velit amet velit exercitation sint. Commodo eiusmod nisi velit ea officia laborum cupidatat mollit sunt esse tempor est non. Veniam aliquip dolor est sunt et. Et laboris nostrud reprehenderit nisi dolor aliqua occaecat aute commodo aute duis do. Esse exercitation Lorem adipisicing sunt cillum nisi minim pariatur consectetur. Ipsum amet dolore id voluptate ipsum amet ut cupidatat laboris fugiat ex sunt minim.',\n registered: 'Wednesday, January 27, 2016 1:24 AM',\n latitude: '43.532255',\n longitude: '102.388279',\n tags: ['non', 'occaecat', 'deserunt', 'exercitation', 'velit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Hogan Powell',\n },\n {\n id: 1,\n name: 'Valenzuela Chase',\n },\n {\n id: 2,\n name: 'Lakeisha Ball',\n },\n ],\n greeting: 'Hello, Greer! You have 6 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b10e85c3f2db6e944',\n index: 27,\n guid: '7f5f0c36-a744-4121-81f0-8840fb327754',\n isActive: true,\n balance: '$2,977.50',\n picture: 'http://placehold.it/32x32',\n age: 23,\n eyeColor: 'green',\n name: {\n first: 'Kitty',\n last: 'Saunders',\n },\n company: 'SINGAVERA',\n email: 'kitty.saunders@singavera.name',\n phone: '+1 (896) 427-2344',\n address: '107 Norfolk Street, Noxen, Missouri, 169',\n about:\n 'Commodo voluptate consectetur id et occaecat consequat consectetur adipisicing eiusmod commodo. Aute nisi culpa fugiat sunt proident. Aliquip laboris elit veniam quis cillum. Nulla enim proident excepteur magna. Proident do aute tempor exercitation nostrud. Lorem officia id excepteur commodo incididunt et deserunt excepteur qui officia est incididunt mollit ut. Aute dolore cupidatat eu pariatur.',\n registered: 'Sunday, April 27, 2014 10:20 PM',\n latitude: '33.543748',\n longitude: '10.300569',\n tags: ['id', 'esse', 'voluptate', 'occaecat', 'incididunt'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Webb Hawkins',\n },\n {\n id: 1,\n name: 'Angie Cline',\n },\n {\n id: 2,\n name: 'Mathews Juarez',\n },\n ],\n greeting: 'Hello, Kitty! You have 9 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0baf8e44be8a693264',\n index: 28,\n guid: '99b20c7a-567f-4810-a793-8470571ce457',\n isActive: false,\n balance: '$1,017.55',\n picture: 'http://placehold.it/32x32',\n age: 36,\n eyeColor: 'green',\n name: {\n first: 'Faith',\n last: 'Mendoza',\n },\n company: 'XPLOR',\n email: 'faith.mendoza@xplor.info',\n phone: '+1 (872) 504-2016',\n address: '323 Leonard Street, Deltaville, New Hampshire, 5194',\n about:\n 'Tempor commodo laborum fugiat sit consequat reprehenderit sint anim voluptate. In velit do non aliquip officia est deserunt incididunt. Officia dolor id incididunt cillum minim dolore aliqua proident duis. Irure excepteur irure culpa commodo veniam culpa quis Lorem aute.',\n registered: 'Saturday, May 30, 2015 7:01 AM',\n latitude: '12.428182',\n longitude: '-166.07543',\n tags: ['non', 'aute', 'aute', 'sint', 'consequat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Blair Mcknight',\n },\n {\n id: 1,\n name: 'Mcclain Mcguire',\n },\n {\n id: 2,\n name: 'Araceli Dorsey',\n },\n ],\n greeting: 'Hello, Faith! You have 8 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0b52e4d918273360dd',\n index: 29,\n guid: '8c61aed3-6235-4e09-8ec4-ece4fe285a9c',\n isActive: false,\n balance: '$1,182.53',\n picture: 'http://placehold.it/32x32',\n age: 36,\n eyeColor: 'green',\n name: {\n first: 'Amie',\n last: 'Crane',\n },\n company: 'RODEOLOGY',\n email: 'amie.crane@rodeology.io',\n phone: '+1 (955) 536-3756',\n address: '578 Box Street, Shelby, Hawaii, 1306',\n about:\n 'Ex esse et minim dolore sint pariatur incididunt esse. Aute dolore quis ad dolor minim laborum amet. Aliquip deserunt ad aute fugiat proident mollit adipisicing mollit sit duis.',\n registered: 'Thursday, June 19, 2014 2:34 PM',\n latitude: '-19.02611',\n longitude: '127.57473',\n tags: ['ad', 'nostrud', 'sit', 'duis', 'adipisicing'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Kirk Stewart',\n },\n {\n id: 1,\n name: 'Rice Horton',\n },\n {\n id: 2,\n name: 'Kathy Shaffer',\n },\n ],\n greeting: 'Hello, Amie! You have 7 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c28c0b7bda4325a1d',\n index: 30,\n guid: 'ed1385bf-c7d8-41fa-a099-734894807171',\n isActive: false,\n balance: '$3,062.06',\n picture: 'http://placehold.it/32x32',\n age: 39,\n eyeColor: 'green',\n name: {\n first: 'Best',\n last: 'Buchanan',\n },\n company: 'CONFERIA',\n email: 'best.buchanan@conferia.com',\n phone: '+1 (845) 406-3653',\n address: '742 Miami Court, Wanship, Georgia, 6992',\n about:\n 'Officia labore velit non mollit adipisicing sit do anim ullamco ut. Incididunt labore aliquip nostrud irure adipisicing id voluptate nulla ex. Ex duis incididunt eu sit et pariatur ullamco incididunt fugiat ex incididunt ea laboris.',\n registered: 'Tuesday, December 30, 2014 11:23 AM',\n latitude: '-14.672379',\n longitude: '123.40741',\n tags: ['et', 'deserunt', 'cupidatat', 'pariatur', 'eu'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Hudson Mejia',\n },\n {\n id: 1,\n name: 'Byers Montoya',\n },\n {\n id: 2,\n name: 'Patty Spencer',\n },\n ],\n greeting: 'Hello, Best! You have 6 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c9e948778b2db882e',\n index: 31,\n guid: '700b5215-132e-4524-9ca8-1224a746f09b',\n isActive: true,\n balance: '$3,891.22',\n picture: 'http://placehold.it/32x32',\n age: 29,\n eyeColor: 'green',\n name: {\n first: 'Francine',\n last: 'Green',\n },\n company: 'NUTRALAB',\n email: 'francine.green@nutralab.tv',\n phone: '+1 (841) 589-3865',\n address: '165 Union Street, Hebron, North Carolina, 8094',\n about:\n 'Sunt eu irure aute incididunt mollit. Nisi mollit nulla aliquip cupidatat aute culpa cupidatat mollit tempor. Irure magna officia sint officia. Quis adipisicing ullamco non id aliquip. Non velit commodo quis elit nostrud adipisicing nisi incididunt non sint enim. In qui fugiat ullamco irure Lorem veniam pariatur culpa.',\n registered: 'Tuesday, June 30, 2015 2:52 AM',\n latitude: '-83.386439',\n longitude: '-80.298927',\n tags: ['mollit', 'aliqua', 'dolor', 'tempor', 'sit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Page Beasley',\n },\n {\n id: 1,\n name: 'Keith Atkinson',\n },\n {\n id: 2,\n name: 'Hahn Evans',\n },\n ],\n greeting: 'Hello, Francine! You have 6 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c565d848f7f4b0064',\n index: 32,\n guid: '88163664-2ab3-4a01-80f9-10b83ad3dece',\n isActive: false,\n balance: '$2,387.41',\n picture: 'http://placehold.it/32x32',\n age: 35,\n eyeColor: 'green',\n name: {\n first: 'Kelly',\n last: 'Fowler',\n },\n company: 'COMVERGES',\n email: 'kelly.fowler@comverges.net',\n phone: '+1 (926) 440-3886',\n address: '917 Kathleen Court, Outlook, Arkansas, 505',\n about:\n 'Esse dolore eiusmod culpa ea velit elit culpa veniam proident culpa consequat cupidatat. Fugiat id proident pariatur est fugiat ea. Esse ex dolor minim cillum incididunt voluptate ipsum. Non dolor amet labore excepteur enim eu duis in qui. Sint dolore minim anim mollit laborum proident ea ipsum officia aliquip. Amet culpa adipisicing nisi occaecat commodo irure in ad veniam ipsum officia labore labore.',\n registered: 'Friday, April 4, 2014 7:14 PM',\n latitude: '-24.694221',\n longitude: '43.274287',\n tags: ['sunt', 'ex', 'est', 'nisi', 'sint'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Cash Hull',\n },\n {\n id: 1,\n name: 'Lorene Michael',\n },\n {\n id: 2,\n name: 'Rodgers Underwood',\n },\n ],\n greeting: 'Hello, Kelly! You have 9 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0cab9f4bf7a91707f2',\n index: 33,\n guid: '7f857967-0524-44fc-a028-14bc9b78be00',\n isActive: false,\n balance: '$3,904.91',\n picture: 'http://placehold.it/32x32',\n age: 34,\n eyeColor: 'brown',\n name: {\n first: 'Walters',\n last: 'Bishop',\n },\n company: 'CEPRENE',\n email: 'walters.bishop@ceprene.org',\n phone: '+1 (955) 536-2146',\n address: '441 Livonia Avenue, Norvelt, Indiana, 8326',\n about:\n 'Enim ad culpa ut aliqua id eiusmod ad aliqua. Cupidatat voluptate enim esse amet anim officia aliquip incididunt ipsum ut. Dolore magna cillum sunt duis duis elit commodo ipsum cillum aliquip proident nisi laboris. Ad Lorem cillum commodo quis tempor consequat laborum velit aliquip et laboris deserunt officia labore. Commodo enim et est id aute nostrud id. Excepteur consequat aliquip laboris ipsum sit aliqua proident esse adipisicing sint consectetur enim aliquip veniam.',\n registered: 'Sunday, August 2, 2015 11:14 AM',\n latitude: '-33.507298',\n longitude: '-177.843777',\n tags: ['est', 'officia', 'ad', 'fugiat', 'fugiat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Sloan Larson',\n },\n {\n id: 1,\n name: 'Lora Howe',\n },\n {\n id: 2,\n name: 'Cheri Cain',\n },\n ],\n greeting: 'Hello, Walters! You have 8 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c41960d0332abb69f',\n index: 34,\n guid: 'c179f976-46db-4ceb-97dd-d511c2ff2cba',\n isActive: false,\n balance: '$3,922.97',\n picture: 'http://placehold.it/32x32',\n age: 36,\n eyeColor: 'brown',\n name: {\n first: 'Jamie',\n last: 'Justice',\n },\n company: 'CEMENTION',\n email: 'jamie.justice@cemention.me',\n phone: '+1 (886) 453-3323',\n address: '534 Downing Street, Coldiron, Louisiana, 2936',\n about:\n 'Ad sint ut qui duis commodo magna sit irure duis labore reprehenderit dolor voluptate. Cillum non dolore mollit amet proident. Tempor sunt aliquip pariatur ullamco incididunt laboris. Adipisicing incididunt magna Lorem voluptate.',\n registered: 'Wednesday, February 25, 2015 4:11 AM',\n latitude: '-83.79595',\n longitude: '71.384564',\n tags: ['quis', 'nisi', 'dolore', 'voluptate', 'fugiat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Harvey Ramos',\n },\n {\n id: 1,\n name: 'Mays Shannon',\n },\n {\n id: 2,\n name: 'Ball Mcbride',\n },\n ],\n greeting: 'Hello, Jamie! You have 5 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c9fb032931aaf922e',\n index: 35,\n guid: '2d85869d-f1e0-4f2d-8544-78652740bb11',\n isActive: true,\n balance: '$1,468.38',\n picture: 'http://placehold.it/32x32',\n age: 38,\n eyeColor: 'green',\n name: {\n first: 'Dyer',\n last: 'Tran',\n },\n company: 'COMVEYOR',\n email: 'dyer.tran@comveyor.ca',\n phone: '+1 (890) 529-2771',\n address: '299 Hyman Court, Sims, Colorado, 8328',\n about:\n 'Adipisicing dolor velit non tempor incididunt magna magna dolore. Officia pariatur mollit anim Lorem Lorem esse. Occaecat eiusmod ipsum ipsum excepteur ut duis commodo esse incididunt. Veniam non officia consequat amet duis nulla qui qui ex sint veniam.',\n registered: 'Tuesday, October 11, 2016 7:57 AM',\n latitude: '-58.389129',\n longitude: '-86.760618',\n tags: ['incididunt', 'laboris', 'consectetur', 'voluptate', 'aliqua'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Dominguez Woodard',\n },\n {\n id: 1,\n name: 'Leach Kramer',\n },\n {\n id: 2,\n name: 'Cruz Wilder',\n },\n ],\n greeting: 'Hello, Dyer! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0cc5bcf8eb53c8bfdf',\n index: 36,\n guid: '6ced7a65-2989-44d3-8d79-7f02fbaf0f4b',\n isActive: true,\n balance: '$1,243.22',\n picture: 'http://placehold.it/32x32',\n age: 32,\n eyeColor: 'green',\n name: {\n first: 'Maureen',\n last: 'Ramsey',\n },\n company: 'PROFLEX',\n email: 'maureen.ramsey@proflex.biz',\n phone: '+1 (966) 547-2724',\n address: '828 Louise Terrace, Groton, Michigan, 9563',\n about:\n 'Enim aliqua qui velit ut dolore Lorem officia. Nisi Lorem aute consequat consectetur reprehenderit tempor. Consectetur velit laboris Lorem do anim ex exercitation. Est deserunt mollit reprehenderit eu amet aute eu reprehenderit mollit voluptate adipisicing excepteur dolor. Cillum commodo laborum in commodo do incididunt excepteur exercitation nostrud. Officia aliquip labore id aliquip sunt officia deserunt. Sunt officia nulla commodo sit velit excepteur dolor ea occaecat commodo eu.',\n registered: 'Monday, May 18, 2015 11:36 AM',\n latitude: '35.536999',\n longitude: '-158.630389',\n tags: ['qui', 'amet', 'eu', 'eu', 'mollit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Good Spears',\n },\n {\n id: 1,\n name: 'Gina Rodriguez',\n },\n {\n id: 2,\n name: 'Snow Harrington',\n },\n ],\n greeting: 'Hello, Maureen! You have 6 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c4f6c60bdf26873c9',\n index: 37,\n guid: '4883e626-07c8-47af-97d4-8ea82f07aa9d',\n isActive: false,\n balance: '$2,250.74',\n picture: 'http://placehold.it/32x32',\n age: 21,\n eyeColor: 'blue',\n name: {\n first: 'Cannon',\n last: 'Walters',\n },\n company: 'LUNCHPAD',\n email: 'cannon.walters@lunchpad.co.uk',\n phone: '+1 (830) 427-3699',\n address: '202 Clarkson Avenue, Durham, New Jersey, 3075',\n about:\n 'Ipsum sint nulla labore do magna fugiat et in irure ex laborum sunt consequat ipsum. Duis et velit nostrud et sit incididunt laborum magna laboris do ex. Reprehenderit culpa nostrud eu qui labore sint ipsum amet reprehenderit dolor incididunt. Nulla proident dolor Lorem culpa officia eu excepteur anim in anim esse id sunt qui. Sit Lorem ea irure id ipsum culpa qui deserunt nulla veniam nisi in. Eiusmod laborum Lorem esse consectetur enim quis minim culpa nostrud.',\n registered: 'Thursday, October 6, 2016 6:33 PM',\n latitude: '84.142398',\n longitude: '15.387476',\n tags: ['occaecat', 'officia', 'sunt', 'labore', 'consequat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Coleman Hendrix',\n },\n {\n id: 1,\n name: 'Bridges Benson',\n },\n {\n id: 2,\n name: 'Anthony Mathews',\n },\n ],\n greeting: 'Hello, Cannon! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0cf09ee09c6eaa88cb',\n index: 38,\n guid: 'c54b0b2a-2a0f-4168-b335-bc9a8e0460ca',\n isActive: true,\n balance: '$3,203.52',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'brown',\n name: {\n first: 'Nannie',\n last: 'Beard',\n },\n company: 'ANIMALIA',\n email: 'nannie.beard@animalia.us',\n phone: '+1 (889) 443-3959',\n address: '225 Jay Street, Datil, Wyoming, 5453',\n about:\n 'Esse culpa ipsum duis minim ut ex tempor proident sunt minim consequat commodo ipsum anim. Lorem exercitation cupidatat tempor Lorem quis officia minim qui proident et. Qui esse non ex mollit magna nostrud cillum sit pariatur magna fugiat qui id.',\n registered: 'Saturday, April 25, 2015 9:25 AM',\n latitude: '-87.539067',\n longitude: '63.880414',\n tags: ['ut', 'et', 'esse', 'cillum', 'nulla'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Francis Barron',\n },\n {\n id: 1,\n name: 'Pate Aguirre',\n },\n {\n id: 2,\n name: 'Gay Acosta',\n },\n ],\n greeting: 'Hello, Nannie! You have 10 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0cca904f751c058d2e',\n index: 39,\n guid: '7a2ff5cf-270a-4211-a2e8-3509d8884622',\n isActive: false,\n balance: '$3,606.94',\n picture: 'http://placehold.it/32x32',\n age: 35,\n eyeColor: 'blue',\n name: {\n first: 'Lacy',\n last: 'Beach',\n },\n company: 'DATAGEN',\n email: 'lacy.beach@datagen.name',\n phone: '+1 (831) 573-3879',\n address: '984 Adelphi Street, Herbster, Maryland, 4378',\n about:\n 'Occaecat do consectetur voluptate veniam id id officia ea deserunt aute anim irure magna quis. Ipsum cupidatat ea commodo dolor ea dolor nisi non. Excepteur irure veniam laborum qui id eu nulla reprehenderit mollit ad aute consectetur elit Lorem.',\n registered: 'Thursday, March 13, 2014 1:02 PM',\n latitude: '-9.391908',\n longitude: '159.065461',\n tags: ['dolor', 'reprehenderit', 'labore', 'aute', 'voluptate'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Rosa Mercado',\n },\n {\n id: 1,\n name: 'Fuentes Valenzuela',\n },\n {\n id: 2,\n name: 'Dixon Singleton',\n },\n ],\n greeting: 'Hello, Lacy! You have 10 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c1458894607879e9d',\n index: 40,\n guid: '45bbc6f7-4183-4eeb-b34a-98ecc8787e7a',\n isActive: false,\n balance: '$2,097.65',\n picture: 'http://placehold.it/32x32',\n age: 34,\n eyeColor: 'brown',\n name: {\n first: 'Cara',\n last: 'Lyons',\n },\n company: 'VICON',\n email: 'cara.lyons@vicon.info',\n phone: '+1 (933) 546-2258',\n address: '813 Ingraham Street, Riner, Tennessee, 3069',\n about:\n 'Commodo quis excepteur nulla qui. Fugiat ullamco ex excepteur tempor. Sint duis aute magna in fugiat. Laborum sit magna est duis reprehenderit elit nulla elit. Mollit Lorem ut incididunt nostrud ad voluptate aliquip et et sint ullamco.',\n registered: 'Sunday, May 11, 2014 7:13 AM',\n latitude: '11.108367',\n longitude: '-144.351099',\n tags: ['excepteur', 'cillum', 'sunt', 'et', 'duis'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Ayala Black',\n },\n {\n id: 1,\n name: 'Nichole Sutton',\n },\n {\n id: 2,\n name: 'Mathis Cash',\n },\n ],\n greeting: 'Hello, Cara! You have 9 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0ca9d8edf2d7811aab',\n index: 41,\n guid: 'f4aa6a49-0c71-4ad7-9514-614ecb9cc221',\n isActive: true,\n balance: '$2,945.42',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'blue',\n name: {\n first: 'Jean',\n last: 'Copeland',\n },\n company: 'KIGGLE',\n email: 'jean.copeland@kiggle.io',\n phone: '+1 (841) 470-2173',\n address: '687 Prospect Place, Welda, New York, 4786',\n about:\n 'Quis eiusmod enim ad velit mollit occaecat. Ea aute laborum fugiat consequat. Exercitation laboris aliquip ad tempor culpa. Ipsum aute excepteur in fugiat adipisicing incididunt exercitation non occaecat. Id labore ex occaecat esse dolore sit commodo duis quis incididunt enim reprehenderit. Tempor sit qui irure ut pariatur laborum laboris in nostrud sit excepteur.',\n registered: 'Monday, June 22, 2015 4:57 AM',\n latitude: '-36.057061',\n longitude: '-91.348514',\n tags: ['occaecat', 'sit', 'id', 'anim', 'elit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Sherman Christian',\n },\n {\n id: 1,\n name: 'Janna Weiss',\n },\n {\n id: 2,\n name: 'Janette Nieves',\n },\n ],\n greeting: 'Hello, Jean! You have 8 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c06cac977a4bff550',\n index: 42,\n guid: 'e0aacdb6-61dd-44b2-afa5-d23f8b11ff2d',\n isActive: true,\n balance: '$2,740.65',\n picture: 'http://placehold.it/32x32',\n age: 29,\n eyeColor: 'blue',\n name: {\n first: 'Alfreda',\n last: 'Duncan',\n },\n company: 'BITREX',\n email: 'alfreda.duncan@bitrex.com',\n phone: '+1 (903) 491-3912',\n address: '541 Sunnyside Court, Ryderwood, Virginia, 9259',\n about:\n 'Pariatur mollit qui veniam sunt enim Lorem non. Commodo ea deserunt aute dolor id enim anim Lorem occaecat esse nostrud id irure. Aliquip dolore voluptate enim dolore velit adipisicing id est dolore consequat enim. Voluptate ex duis duis elit. Occaecat ex nulla labore ex sit. Proident officia sunt mollit irure non quis commodo sint laboris tempor ut aliquip incididunt. Aliquip ea ad consectetur incididunt.',\n registered: 'Saturday, March 12, 2016 2:20 PM',\n latitude: '33.795212',\n longitude: '-48.161379',\n tags: ['velit', 'dolore', 'deserunt', 'exercitation', 'nostrud'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Tracie Hendricks',\n },\n {\n id: 1,\n name: 'Deann Mathis',\n },\n {\n id: 2,\n name: 'Newman Pace',\n },\n ],\n greeting: 'Hello, Alfreda! You have 10 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c547ba7b2b5b2ff68',\n index: 43,\n guid: '63630a5c-d6b6-4dd9-a096-ae1c81a92bc5',\n isActive: false,\n balance: '$2,655.36',\n picture: 'http://placehold.it/32x32',\n age: 31,\n eyeColor: 'green',\n name: {\n first: 'Estelle',\n last: 'Carson',\n },\n company: 'GEEKFARM',\n email: 'estelle.carson@geekfarm.tv',\n phone: '+1 (829) 551-2574',\n address: '854 Calder Place, Greer, Nevada, 7137',\n about:\n 'Laborum velit deserunt ad magna et qui sint sint sunt elit. Exercitation eiusmod ea deserunt quis consectetur sit cillum tempor eiusmod labore ad consequat. Pariatur tempor sunt Lorem sit tempor elit sint ex exercitation. Aliquip tempor irure aute anim tempor sint exercitation exercitation. Consectetur veniam laboris tempor ipsum duis sit tempor laboris eu aute.',\n registered: 'Wednesday, June 3, 2015 5:48 PM',\n latitude: '45.625966',\n longitude: '-113.836952',\n tags: ['esse', 'nostrud', 'consectetur', 'est', 'qui'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Albert Conrad',\n },\n {\n id: 1,\n name: 'Etta Lara',\n },\n {\n id: 2,\n name: 'James Joseph',\n },\n ],\n greeting: 'Hello, Estelle! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0ce1fbdc13fd921dfa',\n index: 44,\n guid: 'bab756db-f4f0-4c20-8819-805f4de1acf1',\n isActive: false,\n balance: '$3,043.42',\n picture: 'http://placehold.it/32x32',\n age: 28,\n eyeColor: 'green',\n name: {\n first: 'Flowers',\n last: 'Guthrie',\n },\n company: 'GLOBOIL',\n email: 'flowers.guthrie@globoil.net',\n phone: '+1 (848) 547-2136',\n address: '757 Rodney Street, Lupton, Washington, 290',\n about:\n 'Nulla sunt ut laboris id consequat id quis excepteur et eu sint esse est. Nostrud voluptate voluptate minim enim exercitation sunt labore ea cillum veniam mollit pariatur enim. Officia ipsum voluptate eu veniam dolor est do. Ullamco minim excepteur aute eu cillum reprehenderit non laborum. Do magna eiusmod veniam eu cillum magna deserunt labore. Nisi culpa nisi proident amet eu et cillum mollit reprehenderit veniam et. Ad elit sint aliquip cupidatat exercitation do ex velit esse nisi sunt nostrud.',\n registered: 'Wednesday, May 7, 2014 11:25 PM',\n latitude: '-18.985921',\n longitude: '-170.937155',\n tags: ['sunt', 'nostrud', 'ex', 'qui', 'proident'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Holcomb Joyce',\n },\n {\n id: 1,\n name: 'Dolores Guy',\n },\n {\n id: 2,\n name: 'Alisa Garrett',\n },\n ],\n greeting: 'Hello, Flowers! You have 8 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0ce0cd552ea52c7f2c',\n index: 45,\n guid: 'dea849a7-62f2-4a50-8215-6070082f02e7',\n isActive: false,\n balance: '$2,088.13',\n picture: 'http://placehold.it/32x32',\n age: 35,\n eyeColor: 'green',\n name: {\n first: 'Duran',\n last: 'Houston',\n },\n company: 'ENQUILITY',\n email: 'duran.houston@enquility.org',\n phone: '+1 (968) 460-3781',\n address: '968 Prospect Avenue, Eastmont, Minnesota, 5346',\n about:\n 'Irure nisi occaecat quis ipsum exercitation esse minim nulla magna sunt nisi culpa exercitation. Nulla ea ipsum exercitation est culpa consequat nostrud duis ex do incididunt est. Dolore et sit labore ex non do ipsum. Do velit voluptate sint nisi enim sit sunt tempor voluptate aliquip ullamco reprehenderit do. Id sunt cillum ea nisi aute qui do tempor nisi aute nostrud. Ipsum cupidatat laboris elit dolore pariatur tempor mollit exercitation tempor et voluptate laboris eu. Ex Lorem sint sit tempor sunt elit.',\n registered: 'Saturday, June 11, 2016 4:20 PM',\n latitude: '18.300079',\n longitude: '-83.967577',\n tags: ['labore', 'sunt', 'mollit', 'voluptate', 'duis'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Lori Roach',\n },\n {\n id: 1,\n name: 'Benita Farley',\n },\n {\n id: 2,\n name: 'Sheri Hurst',\n },\n ],\n greeting: 'Hello, Duran! You have 9 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c491e46a12015041d',\n index: 46,\n guid: '2c10fc4c-47d7-41b0-ab6d-b27348fd3a2c',\n isActive: false,\n balance: '$1,874.46',\n picture: 'http://placehold.it/32x32',\n age: 24,\n eyeColor: 'green',\n name: {\n first: 'Cortez',\n last: 'Levy',\n },\n company: 'OPTICON',\n email: 'cortez.levy@opticon.me',\n phone: '+1 (831) 454-3969',\n address: '707 Lefferts Avenue, Stouchsburg, District Of Columbia, 5615',\n about:\n 'Dolor labore exercitation magna eu exercitation veniam culpa ad dolore ut consequat Lorem et officia. Voluptate aliqua laborum amet voluptate consequat id. Laboris tempor dolor cillum ut ullamco voluptate incididunt amet ipsum laboris exercitation tempor. Do quis duis qui magna eu irure sunt.',\n registered: 'Wednesday, November 4, 2015 7:46 PM',\n latitude: '5.931545',\n longitude: '58.787345',\n tags: ['enim', 'consequat', 'irure', 'sit', 'voluptate'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Marquita Figueroa',\n },\n {\n id: 1,\n name: 'Justice Stephens',\n },\n {\n id: 2,\n name: 'Traci Blevins',\n },\n ],\n greeting: 'Hello, Cortez! You have 6 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c163f106a3d9867a0',\n index: 47,\n guid: '2299f9f1-f9c9-4d53-b9f5-829132d1b1f6',\n isActive: false,\n balance: '$3,704.08',\n picture: 'http://placehold.it/32x32',\n age: 31,\n eyeColor: 'brown',\n name: {\n first: 'Sampson',\n last: 'Sloan',\n },\n company: 'ZAGGLES',\n email: 'sampson.sloan@zaggles.ca',\n phone: '+1 (812) 536-2825',\n address: '921 Beadel Street, Manila, Guam, 2501',\n about:\n 'Nisi irure laboris dolore Lorem nulla irure consectetur mollit commodo aliqua pariatur et. Officia magna veniam culpa excepteur ea sint reprehenderit eiusmod. Ex dolor non nisi enim eu et ad occaecat magna id ullamco in occaecat. Commodo labore Lorem aliqua quis amet irure labore. Deserunt proident cillum et do consequat mollit reprehenderit eiusmod voluptate proident sunt ex. Aute aliqua ullamco duis laborum labore et exercitation.',\n registered: 'Sunday, October 26, 2014 2:43 AM',\n latitude: '83.228508',\n longitude: '0.459083',\n tags: ['tempor', 'exercitation', 'proident', 'exercitation', 'et'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Hannah Schneider',\n },\n {\n id: 1,\n name: 'White Williamson',\n },\n {\n id: 2,\n name: 'Annie Moreno',\n },\n ],\n greeting: 'Hello, Sampson! You have 5 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0ccd1cc56b6ac487a6',\n index: 48,\n guid: '857676b3-f998-4efa-9ec8-6762b2468e43',\n isActive: false,\n balance: '$3,662.77',\n picture: 'http://placehold.it/32x32',\n age: 35,\n eyeColor: 'blue',\n name: {\n first: 'Nona',\n last: 'Nguyen',\n },\n company: 'QUARMONY',\n email: 'nona.nguyen@quarmony.biz',\n phone: '+1 (921) 562-2588',\n address: '660 Sutton Street, Eggertsville, American Samoa, 7519',\n about:\n 'Et esse sit labore pariatur eu eiusmod eu et non elit adipisicing mollit esse id. Quis dolore magna ipsum do velit cupidatat in officia do dolore voluptate anim laboris aliquip. Lorem amet sunt irure laborum ad sunt commodo cillum minim consectetur. Eiusmod id exercitation occaecat esse enim magna consectetur reprehenderit nostrud quis ea dolor sit incididunt. Ipsum eu quis consequat ad eiusmod amet velit veniam aliquip reprehenderit in ea. Duis et aliquip voluptate dolor proident incididunt eiusmod. Magna eu aliquip aliquip id.',\n registered: 'Friday, January 22, 2016 1:24 AM',\n latitude: '45.499893',\n longitude: '71.913207',\n tags: ['proident', 'irure', 'eu', 'laborum', 'tempor'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Ross Landry',\n },\n {\n id: 1,\n name: 'Chan Joyner',\n },\n {\n id: 2,\n name: 'Richardson Snow',\n },\n ],\n greeting: 'Hello, Nona! You have 5 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c4546f881c8f7555f',\n index: 49,\n guid: '28bddafd-23f4-49a2-bae8-643e1e7c9fb3',\n isActive: false,\n balance: '$2,081.58',\n picture: 'http://placehold.it/32x32',\n age: 38,\n eyeColor: 'brown',\n name: {\n first: 'Wendi',\n last: 'Cleveland',\n },\n company: 'EVENTEX',\n email: 'wendi.cleveland@eventex.co.uk',\n phone: '+1 (935) 410-2326',\n address: '737 Ebony Court, Elfrida, Delaware, 5439',\n about:\n 'Enim deserunt commodo qui laboris mollit ullamco. Id qui laboris magna do consequat nostrud sint occaecat amet officia. Laboris excepteur Lorem aliqua in est exercitation ut laborum et. Officia nisi eiusmod veniam mollit laborum magna esse labore elit pariatur pariatur. Esse ipsum pariatur pariatur eiusmod est ex tempor non.',\n registered: 'Sunday, March 9, 2014 5:48 PM',\n latitude: '88.457536',\n longitude: '-65.024239',\n tags: ['aliquip', 'duis', 'tempor', 'ipsum', 'velit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Gabrielle Cote',\n },\n {\n id: 1,\n name: 'Brandi Downs',\n },\n {\n id: 2,\n name: 'Rhonda Ellison',\n },\n ],\n greeting: 'Hello, Wendi! You have 9 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0cec2076eb6d116dfc',\n index: 50,\n guid: '39489d24-b8b8-47bc-b7d0-c3481f3ad5bd',\n isActive: false,\n balance: '$1,075.68',\n picture: 'http://placehold.it/32x32',\n age: 40,\n eyeColor: 'blue',\n name: {\n first: 'Dale',\n last: 'Douglas',\n },\n company: 'DELPHIDE',\n email: 'dale.douglas@delphide.us',\n phone: '+1 (977) 457-3984',\n address: '754 Hicks Street, Vaughn, Palau, 7264',\n about:\n 'Ad incididunt proident proident ipsum nisi ipsum cillum consectetur cupidatat aliquip labore duis aliquip est. Esse nulla sit magna ipsum. Proident aliquip sint fugiat dolor sunt elit velit qui tempor officia amet nostrud.',\n registered: 'Saturday, July 30, 2016 8:55 AM',\n latitude: '-8.058598',\n longitude: '-33.314846',\n tags: ['irure', 'nisi', 'consequat', 'cillum', 'dolor'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Harriett Gamble',\n },\n {\n id: 1,\n name: 'Hester Pittman',\n },\n {\n id: 2,\n name: 'Lesley Washington',\n },\n ],\n greeting: 'Hello, Dale! You have 10 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0cd4ecef796970cd3f',\n index: 51,\n guid: '52dc9e03-d6bc-4776-975e-22735a673bb9',\n isActive: false,\n balance: '$2,094.76',\n picture: 'http://placehold.it/32x32',\n age: 23,\n eyeColor: 'green',\n name: {\n first: 'Eula',\n last: 'Huber',\n },\n company: 'COMTENT',\n email: 'eula.huber@comtent.name',\n phone: '+1 (914) 552-2231',\n address: '389 Grove Street, Eagletown, Massachusetts, 8524',\n about:\n 'Id sunt consectetur nostrud occaecat ea eu reprehenderit excepteur amet nostrud et ea. In ipsum occaecat aliquip est ex aute labore nostrud eu incididunt velit est. Aliquip velit occaecat laborum consectetur dolor.',\n registered: 'Saturday, June 20, 2015 8:33 AM',\n latitude: '-27.235963',\n longitude: '17.691481',\n tags: ['eu', 'ex', 'exercitation', 'reprehenderit', 'irure'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Melva Coffey',\n },\n {\n id: 1,\n name: 'Farmer Weaver',\n },\n {\n id: 2,\n name: 'Watkins Serrano',\n },\n ],\n greeting: 'Hello, Eula! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0ccb817c1dc5c145c8',\n index: 52,\n guid: '7ec24512-cb72-4fa5-b411-44c7b7ac0cde',\n isActive: true,\n balance: '$3,388.55',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'green',\n name: {\n first: 'Lamb',\n last: 'Contreras',\n },\n company: 'COMTRAK',\n email: 'lamb.contreras@comtrak.info',\n phone: '+1 (866) 451-3939',\n address: '403 Himrod Street, Haring, South Carolina, 7598',\n about:\n 'Labore labore ipsum non eu quis eiusmod sint fugiat qui tempor sit. Ex exercitation culpa exercitation sunt ipsum nisi et adipisicing proident adipisicing do. Amet cillum amet sit ea dolor. Ex mollit ut eu ad quis consequat cillum ullamco aliquip. Minim enim ut et incididunt occaecat ea. Et dolor nisi sunt eiusmod duis. Reprehenderit aliqua eiusmod amet dolor aliqua.',\n registered: 'Tuesday, December 23, 2014 11:42 AM',\n latitude: '-56.076139',\n longitude: '126.054413',\n tags: ['nostrud', 'et', 'commodo', 'nisi', 'deserunt'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Kasey Andrews',\n },\n {\n id: 1,\n name: 'Pearl Bridges',\n },\n {\n id: 2,\n name: 'Tameka Chandler',\n },\n ],\n greeting: 'Hello, Lamb! You have 10 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c39b5a56a264d4bcf',\n index: 53,\n guid: 'e07bd38e-e79b-4ceb-bcbc-ea60b4b0e740',\n isActive: false,\n balance: '$1,011.72',\n picture: 'http://placehold.it/32x32',\n age: 28,\n eyeColor: 'blue',\n name: {\n first: 'Angelique',\n last: 'Barry',\n },\n company: 'INSOURCE',\n email: 'angelique.barry@insource.io',\n phone: '+1 (983) 464-3474',\n address: '691 Heyward Street, Bodega, Florida, 4333',\n about:\n 'Deserunt voluptate eiusmod sit et quis aliquip eiusmod ex consequat velit. Cillum elit excepteur ex esse officia cupidatat ut. Nostrud pariatur ex et ullamco dolor dolore fugiat excepteur irure exercitation. Id Lorem proident ea quis.',\n registered: 'Tuesday, April 26, 2016 12:53 PM',\n latitude: '69.146806',\n longitude: '-136.72291',\n tags: ['qui', 'anim', 'anim', 'quis', 'pariatur'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Doyle Tanner',\n },\n {\n id: 1,\n name: 'Gloria Stevens',\n },\n {\n id: 2,\n name: 'Sally Chapman',\n },\n ],\n greeting: 'Hello, Angelique! You have 7 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c653a65b1bde5a9af',\n index: 54,\n guid: '79ad167a-209e-4ce3-8e84-cc46e9d79702',\n isActive: true,\n balance: '$2,652.68',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'blue',\n name: {\n first: 'Marissa',\n last: 'Head',\n },\n company: 'BOLAX',\n email: 'marissa.head@bolax.com',\n phone: '+1 (919) 411-2094',\n address: '224 Tampa Court, Harleigh, Virgin Islands, 2507',\n about:\n 'Nulla elit do ullamco nulla. Fugiat incididunt culpa deserunt deserunt dolore nisi commodo. Labore exercitation pariatur aliqua id id duis.',\n registered: 'Saturday, April 9, 2016 11:53 PM',\n latitude: '12.624239',\n longitude: '-108.119849',\n tags: ['labore', 'proident', 'labore', 'eiusmod', 'aute'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Chambers Lester',\n },\n {\n id: 1,\n name: 'Mckenzie Mcdonald',\n },\n {\n id: 2,\n name: 'Benson Clark',\n },\n ],\n greeting: 'Hello, Marissa! You have 6 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0cbbf466925baae126',\n index: 55,\n guid: '44384d90-908a-44f7-ac6a-f3e4e9ce3541',\n isActive: false,\n balance: '$2,707.40',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'blue',\n name: {\n first: 'Avila',\n last: 'Pena',\n },\n company: 'TERASCAPE',\n email: 'avila.pena@terascape.tv',\n phone: '+1 (973) 462-2068',\n address: '393 Story Court, Veguita, Utah, 6716',\n about:\n 'Reprehenderit nostrud laborum duis excepteur adipisicing voluptate dolor. Quis aliqua et laborum officia dolor nostrud laborum est. Excepteur aliquip ipsum id eiusmod esse laboris nostrud in excepteur est. Non eiusmod esse non ut.',\n registered: 'Tuesday, August 11, 2015 11:07 PM',\n latitude: '-40.827485',\n longitude: '159.48116',\n tags: ['et', 'culpa', 'cupidatat', 'ut', 'sunt'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Boone Goodman',\n },\n {\n id: 1,\n name: 'Jenny Weeks',\n },\n {\n id: 2,\n name: 'Tracy Franklin',\n },\n ],\n greeting: 'Hello, Avila! You have 10 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c0224b3b46507d00d',\n index: 56,\n guid: '7631262c-7af8-4caf-9dd6-9882b20e9ccf',\n isActive: true,\n balance: '$3,127.77',\n picture: 'http://placehold.it/32x32',\n age: 24,\n eyeColor: 'brown',\n name: {\n first: 'Graciela',\n last: 'Vang',\n },\n company: 'EARWAX',\n email: 'graciela.vang@earwax.net',\n phone: '+1 (810) 450-2884',\n address: '620 Tech Place, Glendale, Connecticut, 369',\n about:\n 'Cillum laboris elit laboris irure ex aliquip amet aute commodo ea ea sunt nostrud irure. Ex incididunt anim nostrud excepteur in dolore aliqua laboris incididunt consequat officia dolore. Aliqua aliqua minim elit pariatur nulla occaecat aliquip consectetur mollit sit elit proident.',\n registered: 'Thursday, September 1, 2016 6:03 PM',\n latitude: '-22.465372',\n longitude: '174.750198',\n tags: ['irure', 'amet', 'ad', 'cupidatat', 'consequat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Teresa Dickson',\n },\n {\n id: 1,\n name: 'Reyna Gonzales',\n },\n {\n id: 2,\n name: 'Carol Hunt',\n },\n ],\n greeting: 'Hello, Graciela! You have 9 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c44df164b323518f0',\n index: 57,\n guid: '21cf0aae-e2fd-4987-a12a-df9845dfe256',\n isActive: true,\n balance: '$2,129.83',\n picture: 'http://placehold.it/32x32',\n age: 38,\n eyeColor: 'green',\n name: {\n first: 'Kaye',\n last: 'Whitehead',\n },\n company: 'TALKOLA',\n email: 'kaye.whitehead@talkola.org',\n phone: '+1 (998) 495-2808',\n address: '933 Sands Street, Frystown, Wisconsin, 9993',\n about:\n 'Laborum id id esse fugiat eu consectetur non nostrud eu sint. Enim dolor aliquip ut elit et. Officia labore labore duis veniam reprehenderit. Ut id nulla minim adipisicing laboris deserunt pariatur. Laborum aute magna laboris quis.',\n registered: 'Friday, May 2, 2014 8:39 PM',\n latitude: '5.18003',\n longitude: '-138.228885',\n tags: ['elit', 'labore', 'id', 'nisi', 'pariatur'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Leona Soto',\n },\n {\n id: 1,\n name: 'Cunningham Blankenship',\n },\n {\n id: 2,\n name: 'Campbell Turner',\n },\n ],\n greeting: 'Hello, Kaye! You have 10 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0ca827218ce430db2f',\n index: 58,\n guid: 'f1cc09e1-4502-4b54-8aa6-272b93335375',\n isActive: true,\n balance: '$1,635.66',\n picture: 'http://placehold.it/32x32',\n age: 38,\n eyeColor: 'green',\n name: {\n first: 'Vickie',\n last: 'Walsh',\n },\n company: 'ZORK',\n email: 'vickie.walsh@zork.me',\n phone: '+1 (966) 458-2157',\n address: '770 Flatlands Avenue, Marion, Oklahoma, 5819',\n about:\n 'Velit laboris sint velit elit esse est commodo est officia. Sit do ut eiusmod duis ex ullamco eiusmod proident esse est cupidatat aliqua pariatur veniam. Culpa incididunt Lorem ea ut. Sint nostrud quis et tempor magna voluptate. Aliqua ea irure ad sint. Irure non nostrud non in ad officia officia laboris nostrud eiusmod. Labore commodo sit consequat velit ipsum culpa tempor.',\n registered: 'Friday, June 24, 2016 6:10 AM',\n latitude: '-21.293579',\n longitude: '-171.238054',\n tags: ['quis', 'dolore', 'sunt', 'sint', 'ut'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Kristie Davenport',\n },\n {\n id: 1,\n name: 'Sandy Foreman',\n },\n {\n id: 2,\n name: 'Eve Patel',\n },\n ],\n greeting: 'Hello, Vickie! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0ca320d90456f0650c',\n index: 59,\n guid: '7bfed2cf-dbf1-461b-949a-42c300172e0f',\n isActive: false,\n balance: '$3,809.61',\n picture: 'http://placehold.it/32x32',\n age: 22,\n eyeColor: 'blue',\n name: {\n first: 'Travis',\n last: 'Carrillo',\n },\n company: 'INTERODEO',\n email: 'travis.carrillo@interodeo.ca',\n phone: '+1 (820) 527-3349',\n address: '878 Dekalb Avenue, Jeff, Alaska, 4205',\n about:\n 'Sit aliqua aliqua eiusmod aliquip ullamco amet nulla fugiat anim dolor est cillum eiusmod. Proident dolor consectetur officia voluptate do tempor aliquip qui minim. Dolore culpa magna nulla irure. Est ad laborum deserunt amet commodo esse officia incididunt. Sit aute laborum aliqua id excepteur sunt ipsum cupidatat commodo exercitation proident.',\n registered: 'Saturday, November 7, 2015 11:49 PM',\n latitude: '59.311122',\n longitude: '38.059303',\n tags: ['ex', 'elit', 'voluptate', 'consectetur', 'Lorem'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Velez Daniel',\n },\n {\n id: 1,\n name: 'Mae Burris',\n },\n {\n id: 2,\n name: 'Henson Francis',\n },\n ],\n greeting: 'Hello, Travis! You have 10 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c4d57f9870f521abc',\n index: 60,\n guid: '6de5e184-4e24-41c1-8071-7fbd2fc184f0',\n isActive: false,\n balance: '$3,692.96',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'blue',\n name: {\n first: 'Elvia',\n last: 'Haynes',\n },\n company: 'OPTICOM',\n email: 'elvia.haynes@opticom.biz',\n phone: '+1 (918) 418-2771',\n address: '646 Quincy Street, Fedora, Federated States Of Micronesia, 1232',\n about:\n 'Occaecat officia amet ipsum ut mollit. Eu qui tempor voluptate sint pariatur id Lorem eiusmod veniam magna sint qui esse proident. Reprehenderit ut est sit ad tempor sit magna veniam consectetur. Id quis aliquip occaecat sint excepteur in nisi voluptate laborum ad anim. Id Lorem in incididunt ut culpa culpa duis aliqua mollit adipisicing.',\n registered: 'Monday, November 16, 2015 2:49 AM',\n latitude: '-82.030922',\n longitude: '-160.684246',\n tags: ['esse', 'minim', 'nulla', 'eiusmod', 'est'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Mcdowell Maxwell',\n },\n {\n id: 1,\n name: 'Dawson Gay',\n },\n {\n id: 2,\n name: 'Herminia Leach',\n },\n ],\n greeting: 'Hello, Elvia! You have 8 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c62a1b2744f05b1a7',\n index: 61,\n guid: 'fe9f08a4-cfe5-4cdb-b2e4-9ecfa54d873b',\n isActive: false,\n balance: '$3,807.03',\n picture: 'http://placehold.it/32x32',\n age: 30,\n eyeColor: 'blue',\n name: {\n first: 'Blackwell',\n last: 'Benton',\n },\n company: 'TUBESYS',\n email: 'blackwell.benton@tubesys.co.uk',\n phone: '+1 (897) 452-2584',\n address: '343 Dupont Street, Blodgett, Iowa, 509',\n about:\n 'Ut anim consectetur enim officia. Mollit anim et proident pariatur exercitation consectetur exercitation incididunt. Ullamco pariatur sit enim velit minim aliquip.',\n registered: 'Thursday, September 25, 2014 1:31 AM',\n latitude: '50.446336',\n longitude: '-17.513084',\n tags: ['ipsum', 'quis', 'et', 'labore', 'est'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Henrietta Santana',\n },\n {\n id: 1,\n name: 'Carla Cobb',\n },\n {\n id: 2,\n name: 'Nita Durham',\n },\n ],\n greeting: 'Hello, Blackwell! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0ce6f3ef88019d28bc',\n index: 62,\n guid: '62666a91-4a93-404c-bbce-170ab0668ee7',\n isActive: false,\n balance: '$3,792.15',\n picture: 'http://placehold.it/32x32',\n age: 40,\n eyeColor: 'brown',\n name: {\n first: 'Stanton',\n last: 'Potter',\n },\n company: 'UTARIAN',\n email: 'stanton.potter@utarian.us',\n phone: '+1 (965) 569-3822',\n address: '498 Holmes Lane, Belgreen, Puerto Rico, 1728',\n about:\n 'Ullamco esse sunt aliquip incididunt velit mollit aute. Et est eiusmod commodo aliqua cillum sint nostrud in dolor labore fugiat deserunt aliquip nostrud. Velit non incididunt consectetur tempor veniam minim. Magna enim minim dolore labore do magna ea pariatur tempor anim.',\n registered: 'Thursday, November 20, 2014 7:07 PM',\n latitude: '13.26351',\n longitude: '-169.826766',\n tags: ['dolore', 'commodo', 'ex', 'anim', 'commodo'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Jillian Burnett',\n },\n {\n id: 1,\n name: 'Evangelina Blackburn',\n },\n {\n id: 2,\n name: 'Castro Nolan',\n },\n ],\n greeting: 'Hello, Stanton! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c66bd8e3191775b81',\n index: 63,\n guid: 'babde8c1-773d-4f96-aeb9-bcf68d233204',\n isActive: true,\n balance: '$2,096.56',\n picture: 'http://placehold.it/32x32',\n age: 23,\n eyeColor: 'green',\n name: {\n first: 'Kerry',\n last: 'Barnes',\n },\n company: 'PYRAMIS',\n email: 'kerry.barnes@pyramis.name',\n phone: '+1 (959) 455-2215',\n address: '676 Roder Avenue, Eden, Kansas, 7602',\n about:\n 'Et non et mollit velit proident exercitation velit elit cillum voluptate. Lorem reprehenderit nulla ex sunt adipisicing laborum excepteur in occaecat culpa fugiat enim fugiat proident. Duis minim deserunt aliqua ea. Ea minim ea eiusmod qui elit. Cupidatat quis commodo irure nisi.',\n registered: 'Wednesday, October 21, 2015 7:02 PM',\n latitude: '77.232279',\n longitude: '153.606067',\n tags: ['in', 'cupidatat', 'Lorem', 'consequat', 'laborum'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Veronica Beck',\n },\n {\n id: 1,\n name: 'Hull Velez',\n },\n {\n id: 2,\n name: 'Meghan Wiley',\n },\n ],\n greeting: 'Hello, Kerry! You have 10 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c8e8776857572353b',\n index: 64,\n guid: 'd34861fb-ed0e-4fd1-a315-c41e04ec60f3',\n isActive: true,\n balance: '$1,081.03',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'green',\n name: {\n first: 'Cameron',\n last: 'Barber',\n },\n company: 'FRANSCENE',\n email: 'cameron.barber@franscene.info',\n phone: '+1 (849) 484-3425',\n address: '446 Macon Street, Heil, North Dakota, 4499',\n about:\n 'Consectetur elit eu labore adipisicing. Enim dolore sunt sint duis exercitation do quis enim veniam enim incididunt sint nostrud. Est veniam exercitation deserunt irure consectetur non esse ut eu aliqua ad. Occaecat commodo dolore magna labore ad id ipsum. Aliquip ad consectetur incididunt laborum exercitation cillum cillum minim commodo laboris proident in. Sit aliqua consequat sunt dolor veniam.',\n registered: 'Wednesday, March 25, 2015 12:58 AM',\n latitude: '-0.119378',\n longitude: '-52.799542',\n tags: ['laboris', 'ut', 'nostrud', 'nisi', 'tempor'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Young Bates',\n },\n {\n id: 1,\n name: 'Rhea Chen',\n },\n {\n id: 2,\n name: 'Alissa Morin',\n },\n ],\n greeting: 'Hello, Cameron! You have 5 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c3a6582461fb89886',\n index: 65,\n guid: '4974e20f-b8df-4cbd-92ce-fe1cfc9c3657',\n isActive: false,\n balance: '$1,022.79',\n picture: 'http://placehold.it/32x32',\n age: 40,\n eyeColor: 'blue',\n name: {\n first: 'Ashlee',\n last: 'Randolph',\n },\n company: 'SLUMBERIA',\n email: 'ashlee.randolph@slumberia.io',\n phone: '+1 (850) 590-3733',\n address: '539 Wortman Avenue, Rose, Northern Mariana Islands, 4842',\n about:\n 'Lorem non commodo ea anim proident reprehenderit id consequat velit laborum deserunt. Veniam ad excepteur anim laboris laboris quis ad in dolor. Minim irure ad mollit reprehenderit dolor voluptate duis dolor incididunt cillum irure.',\n registered: 'Saturday, March 28, 2015 2:02 AM',\n latitude: '45.475368',\n longitude: '-140.783475',\n tags: ['nulla', 'ea', 'eiusmod', 'adipisicing', 'ea'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Martin Abbott',\n },\n {\n id: 1,\n name: 'Franco Munoz',\n },\n {\n id: 2,\n name: 'Briggs Briggs',\n },\n ],\n greeting: 'Hello, Ashlee! You have 8 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c9b9a0708efa913ae',\n index: 66,\n guid: 'd7e3871b-05bc-4db9-8ebb-aa136e9349a1',\n isActive: false,\n balance: '$1,282.07',\n picture: 'http://placehold.it/32x32',\n age: 24,\n eyeColor: 'brown',\n name: {\n first: 'Karin',\n last: 'Mcintyre',\n },\n company: 'QIAO',\n email: 'karin.mcintyre@qiao.com',\n phone: '+1 (827) 522-3528',\n address: '476 Kings Place, Rowe, Montana, 1003',\n about:\n 'Anim Lorem irure commodo sunt culpa proident velit quis consectetur. Et qui irure et ullamco ut ipsum. In sit dolor cupidatat dolore veniam sunt aliquip elit aliquip incididunt commodo eu in. Quis labore adipisicing officia eu mollit veniam officia ipsum excepteur dolor.',\n registered: 'Sunday, February 9, 2014 3:39 PM',\n latitude: '-50.934733',\n longitude: '80.069751',\n tags: ['non', 'aliqua', 'deserunt', 'exercitation', 'sint'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Bradshaw Vega',\n },\n {\n id: 1,\n name: 'Imelda Barnett',\n },\n {\n id: 2,\n name: 'Margaret Cross',\n },\n ],\n greeting: 'Hello, Karin! You have 5 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c5e44b5027bec1ac0',\n index: 67,\n guid: '4be33215-4b35-4079-9831-c2632a0bfe28',\n isActive: false,\n balance: '$2,900.86',\n picture: 'http://placehold.it/32x32',\n age: 38,\n eyeColor: 'blue',\n name: {\n first: 'Rowe',\n last: 'Hogan',\n },\n company: 'ISOSURE',\n email: 'rowe.hogan@isosure.tv',\n phone: '+1 (925) 401-2733',\n address: '978 Ditmas Avenue, Herald, Ohio, 4322',\n about:\n 'Nostrud commodo deserunt Lorem magna esse nulla eu cillum. Aliquip aute est laborum enim ut irure enim exercitation anim ipsum minim cillum. Qui commodo labore veniam et anim proident anim. Aliquip ut veniam consectetur amet mollit reprehenderit qui.',\n registered: 'Wednesday, April 13, 2016 6:04 AM',\n latitude: '38.442477',\n longitude: '-127.884805',\n tags: ['et', 'occaecat', 'elit', 'tempor', 'sint'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Elnora Guzman',\n },\n {\n id: 1,\n name: 'Talley Townsend',\n },\n {\n id: 2,\n name: 'Chaney Harvey',\n },\n ],\n greeting: 'Hello, Rowe! You have 8 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c9075ebf36eef4cb0',\n index: 68,\n guid: '6cc1ae86-7aa6-4c1f-8338-1cd7b3630ade',\n isActive: true,\n balance: '$3,381.58',\n picture: 'http://placehold.it/32x32',\n age: 27,\n eyeColor: 'blue',\n name: {\n first: 'Ronda',\n last: 'Parker',\n },\n company: 'BOILCAT',\n email: 'ronda.parker@boilcat.net',\n phone: '+1 (888) 404-2571',\n address: '836 Java Street, Detroit, Oregon, 9319',\n about:\n 'Fugiat quis est id anim. Enim nostrud tempor esse in officia enim deserunt. Nisi anim adipisicing nostrud occaecat laboris occaecat. Qui laborum ut exercitation culpa aute veniam exercitation tempor qui adipisicing minim. Dolor ex voluptate pariatur aliquip dolor cillum laborum est. Ex adipisicing mollit ea occaecat ut eu.',\n registered: 'Friday, August 12, 2016 6:40 AM',\n latitude: '-67.552112',\n longitude: '-148.920666',\n tags: ['enim', 'occaecat', 'ex', 'est', 'magna'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Ora Cannon',\n },\n {\n id: 1,\n name: 'Mcintosh Carter',\n },\n {\n id: 2,\n name: 'Glenn Foley',\n },\n ],\n greeting: 'Hello, Ronda! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0cd164eec1663b2d49',\n index: 69,\n guid: '03ba15d9-ec37-4820-9833-5191c760dabe',\n isActive: false,\n balance: '$3,202.56',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'brown',\n name: {\n first: 'Gallegos',\n last: 'Preston',\n },\n company: 'VETRON',\n email: 'gallegos.preston@vetron.org',\n phone: '+1 (923) 570-3649',\n address: '327 Irvington Place, Snelling, Arizona, 5946',\n about:\n 'Anim aliquip deserunt commodo id incididunt mollit cillum et fugiat ullamco magna sint fugiat. Minim qui ea sint commodo eiusmod velit cupidatat excepteur eu. Enim cillum est sint incididunt. Culpa deserunt ex sunt labore voluptate. Ad laboris in pariatur dolore laboris dolor duis quis esse do sit velit pariatur dolore.',\n registered: 'Saturday, July 23, 2016 4:24 AM',\n latitude: '23.3067',\n longitude: '26.605291',\n tags: ['adipisicing', 'aute', 'consequat', 'fugiat', 'elit'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Raquel Dillard',\n },\n {\n id: 1,\n name: 'Conway Cruz',\n },\n {\n id: 2,\n name: 'Hope Woods',\n },\n ],\n greeting: 'Hello, Gallegos! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c0282495ae724dd00',\n index: 70,\n guid: 'e4e4b345-ccb8-46bd-ad7e-25905e3f887d',\n isActive: false,\n balance: '$2,592.79',\n picture: 'http://placehold.it/32x32',\n age: 28,\n eyeColor: 'green',\n name: {\n first: 'Scott',\n last: 'Anderson',\n },\n company: 'SCENTRIC',\n email: 'scott.anderson@scentric.me',\n phone: '+1 (869) 517-3912',\n address: '408 Caton Place, Nadine, Vermont, 538',\n about:\n 'Do elit sunt eiusmod anim anim eiusmod ex. Ipsum officia velit ipsum non minim enim. Enim culpa nostrud occaecat voluptate sit minim consectetur sit ut eiusmod. Magna voluptate fugiat occaecat id et eiusmod voluptate. Dolore consequat fugiat quis ipsum non deserunt ex culpa ut aliqua officia.',\n registered: 'Wednesday, February 25, 2015 11:02 AM',\n latitude: '88.07987',\n longitude: '157.464013',\n tags: ['dolore', 'sint', 'amet', 'voluptate', 'nulla'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Browning Brock',\n },\n {\n id: 1,\n name: 'Goldie Greer',\n },\n {\n id: 2,\n name: 'Bright Clayton',\n },\n ],\n greeting: 'Hello, Scott! You have 9 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c997d595f28bed4b2',\n index: 71,\n guid: '2e81e82f-097d-4ed9-816b-678f7b5f28f4',\n isActive: true,\n balance: '$1,316.05',\n picture: 'http://placehold.it/32x32',\n age: 23,\n eyeColor: 'green',\n name: {\n first: 'Clarice',\n last: 'York',\n },\n company: 'SOPRANO',\n email: 'clarice.york@soprano.ca',\n phone: '+1 (822) 485-3017',\n address: '428 Midwood Street, Witmer, California, 4690',\n about:\n 'Exercitation adipisicing aute commodo commodo exercitation. Aliquip aliquip minim sit anim cillum. Cupidatat veniam adipisicing mollit duis exercitation eu consequat non nulla proident. Occaecat sunt sunt consectetur occaecat veniam consectetur do minim. Adipisicing reprehenderit eu laboris sunt minim fugiat enim est proident duis consequat laboris ea ut. Officia dolor incididunt exercitation dolore et ut veniam. Minim est incididunt ullamco quis proident velit esse et est Lorem.',\n registered: 'Friday, October 24, 2014 8:31 AM',\n latitude: '50.680453',\n longitude: '-22.267809',\n tags: ['esse', 'dolore', 'deserunt', 'labore', 'officia'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Madge Battle',\n },\n {\n id: 1,\n name: 'Francis Dunn',\n },\n {\n id: 2,\n name: 'Rosario Irwin',\n },\n ],\n greeting: 'Hello, Clarice! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0ce47eee37facdfcc8',\n index: 72,\n guid: 'f7880df6-e31a-42ff-971a-82d7ca76bc14',\n isActive: true,\n balance: '$2,569.05',\n picture: 'http://placehold.it/32x32',\n age: 22,\n eyeColor: 'green',\n name: {\n first: 'Madeleine',\n last: 'Mann',\n },\n company: 'PHORMULA',\n email: 'madeleine.mann@phormula.biz',\n phone: '+1 (839) 443-3345',\n address: '948 McKibben Street, Wyoming, Idaho, 2596',\n about:\n 'Amet eiusmod quis sit veniam irure eiusmod eiusmod et. Amet ex consectetur velit aliqua fugiat excepteur commodo in non do anim proident enim. Do nulla minim id cillum cillum non non proident laborum ullamco in nostrud excepteur.',\n registered: 'Monday, September 7, 2015 9:57 AM',\n latitude: '1.417271',\n longitude: '14.344005',\n tags: ['minim', 'aliqua', 'aliqua', 'velit', 'nisi'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Carole Bond',\n },\n {\n id: 1,\n name: 'Diann Vaughan',\n },\n {\n id: 2,\n name: 'Morgan Rojas',\n },\n ],\n greeting: 'Hello, Madeleine! You have 10 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c49e7bdd7ed590e84',\n index: 73,\n guid: '7bf69708-15f1-4d35-b71e-17c43001af61',\n isActive: false,\n balance: '$3,449.63',\n picture: 'http://placehold.it/32x32',\n age: 29,\n eyeColor: 'green',\n name: {\n first: 'Riley',\n last: 'Moses',\n },\n company: 'COMDOM',\n email: 'riley.moses@comdom.co.uk',\n phone: '+1 (855) 426-2672',\n address: '556 Richardson Street, Grazierville, Mississippi, 7295',\n about:\n 'Ullamco do reprehenderit duis mollit ad duis aute qui reprehenderit ipsum qui in eiusmod. Officia culpa cillum cupidatat irure ipsum id occaecat. Enim do in dolor veniam laborum dolor est reprehenderit occaecat et minim laboris. Duis sint voluptate deserunt cillum fugiat velit irure. Lorem ullamco laboris reprehenderit dolor aute tempor excepteur. In elit enim aliquip ut in. Nulla et tempor ut mollit reprehenderit dolore ullamco veniam nisi minim.',\n registered: 'Wednesday, March 18, 2015 5:28 AM',\n latitude: '-17.956865',\n longitude: '60.984652',\n tags: ['quis', 'elit', 'excepteur', 'incididunt', 'sint'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Jana Knowles',\n },\n {\n id: 1,\n name: 'Dotson Calderon',\n },\n {\n id: 2,\n name: 'Stacy Winters',\n },\n ],\n greeting: 'Hello, Riley! You have 10 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c4e5dea19708856e5',\n index: 74,\n guid: 'cf4a7bf9-7a0e-4810-b5f5-23dd2bea6a9a',\n isActive: true,\n balance: '$1,365.62',\n picture: 'http://placehold.it/32x32',\n age: 24,\n eyeColor: 'brown',\n name: {\n first: 'Emilia',\n last: 'Sanford',\n },\n company: 'AQUAZURE',\n email: 'emilia.sanford@aquazure.us',\n phone: '+1 (812) 451-2498',\n address: '649 Guernsey Street, Wedgewood, Alabama, 7660',\n about:\n 'Amet cillum esse exercitation enim tempor ut est amet ad anim. Cillum veniam exercitation sit dolor velit irure tempor anim amet quis aliquip. Aliqua dolor cupidatat culpa consequat dolor in qui est tempor aliqua dolor. Mollit tempor dolor ad nisi Lorem anim adipisicing deserunt tempor. Tempor elit eiusmod dolor reprehenderit sint consequat aliqua incididunt dolore aliqua proident exercitation officia. Et velit tempor minim voluptate. Veniam dolor labore laboris ad quis minim tempor est ad cillum nulla.',\n registered: 'Thursday, May 5, 2016 10:20 PM',\n latitude: '66.972869',\n longitude: '26.31688',\n tags: ['eiusmod', 'sit', 'occaecat', 'nostrud', 'nisi'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Desiree Norman',\n },\n {\n id: 1,\n name: 'Carlson Meadows',\n },\n {\n id: 2,\n name: 'Miranda Gutierrez',\n },\n ],\n greeting: 'Hello, Emilia! You have 10 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0cbb2ae9fb9dc2c667',\n index: 75,\n guid: 'f814f3d7-fd66-4061-81de-1097a56ddc95',\n isActive: false,\n balance: '$2,546.18',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'green',\n name: {\n first: 'Cristina',\n last: 'Carver',\n },\n company: 'DOGNOSIS',\n email: 'cristina.carver@dognosis.name',\n phone: '+1 (967) 552-2825',\n address: '293 Metrotech Courtr, Cawood, Illinois, 7748',\n about:\n 'Incididunt nulla ut velit in tempor pariatur sit ipsum dolor do laborum elit nostrud ullamco. Quis voluptate minim qui eu enim consectetur. In duis excepteur aute nostrud exercitation proident.',\n registered: 'Saturday, November 14, 2015 9:50 AM',\n latitude: '66.369831',\n longitude: '-113.48546',\n tags: ['do', 'laborum', 'non', 'velit', 'sunt'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Dianna Armstrong',\n },\n {\n id: 1,\n name: 'Gena Stafford',\n },\n {\n id: 2,\n name: 'Clare Allison',\n },\n ],\n greeting: 'Hello, Cristina! You have 10 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c6311ae4dab4a3f34',\n index: 76,\n guid: '13d0bb42-7310-486c-9717-a91fe51873e9',\n isActive: false,\n balance: '$2,712.28',\n picture: 'http://placehold.it/32x32',\n age: 31,\n eyeColor: 'green',\n name: {\n first: 'Rosa',\n last: 'Cook',\n },\n company: 'MATRIXITY',\n email: 'rosa.cook@matrixity.info',\n phone: '+1 (937) 505-2696',\n address: '119 Madison Place, Dola, Rhode Island, 7030',\n about:\n 'Veniam laborum mollit dolor nostrud anim ex duis eiusmod ex. Nostrud excepteur laborum officia eu eiusmod aute ea aute ea irure adipisicing. Ex consectetur laboris ex nisi ex esse ea sit cupidatat cupidatat anim labore nostrud Lorem. Esse quis consectetur eiusmod officia sunt cupidatat esse ullamco esse eiusmod tempor enim laborum nulla. Esse occaecat Lorem amet laboris laborum reprehenderit eu eiusmod excepteur qui officia. Nisi irure reprehenderit adipisicing dolor ipsum pariatur sint pariatur.',\n registered: 'Tuesday, September 29, 2015 7:15 PM',\n latitude: '47.166257',\n longitude: '48.962919',\n tags: ['sint', 'reprehenderit', 'aute', 'velit', 'excepteur'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Nellie Mooney',\n },\n {\n id: 1,\n name: 'Bridget Rocha',\n },\n {\n id: 2,\n name: 'Rosie Neal',\n },\n ],\n greeting: 'Hello, Rosa! You have 9 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c3f6b67c114a34891',\n index: 77,\n guid: 'a72c60f4-ea12-47ca-a738-dfc886a23fb3',\n isActive: false,\n balance: '$3,863.37',\n picture: 'http://placehold.it/32x32',\n age: 37,\n eyeColor: 'brown',\n name: {\n first: 'Hallie',\n last: 'Cherry',\n },\n company: 'MAXIMIND',\n email: 'hallie.cherry@maximind.io',\n phone: '+1 (883) 445-2642',\n address: '816 Bridgewater Street, Worcester, New Mexico, 3552',\n about:\n 'Ut id cillum mollit excepteur sunt adipisicing sint do nostrud velit nisi Lorem. Incididunt amet tempor aliqua ad. Consequat veniam non exercitation veniam occaecat eu reprehenderit excepteur. In dolor ex sunt deserunt cupidatat in consequat est commodo excepteur ea. Eu ex qui ea exercitation proident est cillum aliqua pariatur amet in anim deserunt.',\n registered: 'Wednesday, December 16, 2015 1:09 AM',\n latitude: '-22.963385',\n longitude: '-18.88522',\n tags: ['ad', 'tempor', 'adipisicing', 'ea', 'consequat'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Karla Waters',\n },\n {\n id: 1,\n name: 'Salinas Duran',\n },\n {\n id: 2,\n name: 'Juliette Bell',\n },\n ],\n greeting: 'Hello, Hallie! You have 6 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0caf58b7c09ccbbfe0',\n index: 78,\n guid: 'a2136e10-0d46-4e2a-9d45-1ad4a7fb6150',\n isActive: false,\n balance: '$1,715.46',\n picture: 'http://placehold.it/32x32',\n age: 37,\n eyeColor: 'green',\n name: {\n first: 'Hill',\n last: 'Adams',\n },\n company: 'UNI',\n email: 'hill.adams@uni.com',\n phone: '+1 (887) 533-2728',\n address: '341 Union Avenue, Tyro, Marshall Islands, 6939',\n about:\n 'Lorem excepteur cupidatat dolor voluptate eu et reprehenderit id nisi eiusmod tempor. Occaecat et reprehenderit tempor est reprehenderit magna elit eu do pariatur laborum dolore fugiat do. Occaecat dolor mollit ea sunt ex ea sint eu culpa irure enim nostrud. Ipsum eu anim elit quis officia anim do laborum velit sunt tempor in. Quis id veniam laborum sint in dolor do.',\n registered: 'Thursday, August 20, 2015 6:41 PM',\n latitude: '49.668798',\n longitude: '48.122152',\n tags: ['deserunt', 'labore', 'ea', 'reprehenderit', 'dolore'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Dixie Reyes',\n },\n {\n id: 1,\n name: 'Randall Mason',\n },\n {\n id: 2,\n name: 'Morrison Church',\n },\n ],\n greeting: 'Hello, Hill! You have 7 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0c120ddc3a2597b83c',\n index: 79,\n guid: '5d601f0c-923c-41f2-86ec-2794c25ba07d',\n isActive: true,\n balance: '$1,368.60',\n picture: 'http://placehold.it/32x32',\n age: 26,\n eyeColor: 'blue',\n name: {\n first: 'Megan',\n last: 'Grant',\n },\n company: 'PURIA',\n email: 'megan.grant@puria.tv',\n phone: '+1 (867) 456-2370',\n address: '688 Jewel Street, Stagecoach, Nebraska, 5430',\n about:\n 'Reprehenderit et aliquip sunt nisi aliquip minim ut. Nostrud veniam velit laboris sit consectetur occaecat incididunt nulla officia adipisicing labore commodo qui anim. Sunt sunt mollit Lorem et do magna magna occaecat ea esse sit deserunt deserunt non. Est aliqua cupidatat veniam laboris amet officia ex consequat ullamco fugiat tempor laborum. Irure minim veniam deserunt est mollit. Do elit ipsum ea laborum magna amet id qui ea non veniam. Laboris Lorem ullamco dolore ad dolor anim tempor sint nisi reprehenderit proident tempor.',\n registered: 'Wednesday, September 10, 2014 7:56 PM',\n latitude: '62.666152',\n longitude: '-103.092817',\n tags: ['officia', 'sit', 'veniam', 'consequat', 'aliqua'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Rush Klein',\n },\n {\n id: 1,\n name: 'Bruce Bryan',\n },\n {\n id: 2,\n name: 'Vicki Griffith',\n },\n ],\n greeting: 'Hello, Megan! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c923ee8af5787fc95',\n index: 80,\n guid: '27f1d835-7fe3-4ace-8f1c-e9d834d58b51',\n isActive: true,\n balance: '$1,120.98',\n picture: 'http://placehold.it/32x32',\n age: 22,\n eyeColor: 'brown',\n name: {\n first: 'Kathie',\n last: 'Adkins',\n },\n company: 'ZANILLA',\n email: 'kathie.adkins@zanilla.net',\n phone: '+1 (827) 443-2787',\n address: '225 Stillwell Avenue, Clayville, Pennsylvania, 2403',\n about:\n 'Cillum proident cupidatat consectetur aliqua amet ad. Dolor magna anim id aliquip deserunt occaecat do sunt ad est laborum consequat non esse. Nisi magna voluptate sunt magna exercitation officia cupidatat exercitation minim eu Lorem et. Occaecat ex velit fugiat reprehenderit veniam nulla. Consequat laboris eu reprehenderit dolore ea ut anim culpa ipsum ullamco. Amet pariatur dolor dolor non cillum enim elit id. Aute magna dolor ea ea fugiat.',\n registered: 'Wednesday, January 8, 2014 9:01 AM',\n latitude: '-57.35919',\n longitude: '16.081565',\n tags: ['mollit', 'ut', 'velit', 'eu', 'ea'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Martha Webb',\n },\n {\n id: 1,\n name: 'Quinn Hampton',\n },\n {\n id: 2,\n name: 'Phelps Reilly',\n },\n ],\n greeting: 'Hello, Kathie! You have 9 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c0f013070624983d3',\n index: 81,\n guid: 'd20f5d74-7e69-4a38-8afc-f9eafd9eb9b8',\n isActive: true,\n balance: '$2,486.01',\n picture: 'http://placehold.it/32x32',\n age: 28,\n eyeColor: 'green',\n name: {\n first: 'Reid',\n last: 'Moon',\n },\n company: 'UPLINX',\n email: 'reid.moon@uplinx.org',\n phone: '+1 (974) 588-2358',\n address: '437 Wythe Place, Bergoo, Maine, 2688',\n about:\n 'Proident sit nostrud adipisicing fugiat laborum adipisicing commodo est. Eu voluptate dolor ad consequat cillum tempor excepteur. Veniam sit ullamco velit aliquip nulla nisi magna sunt commodo officia tempor mollit. Velit occaecat occaecat culpa in duis dolor enim aute incididunt ipsum adipisicing excepteur adipisicing in. Mollit duis incididunt sit deserunt tempor ullamco sit. Nisi et aliquip aliquip nisi ad cillum deserunt amet Lorem id minim in. Nisi ullamco labore consequat deserunt voluptate sunt nulla commodo quis dolore et do sunt dolor.',\n registered: 'Wednesday, November 5, 2014 8:41 PM',\n latitude: '-57.701702',\n longitude: '98.460257',\n tags: ['culpa', 'dolore', 'sunt', 'duis', 'sint'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Christina Brennan',\n },\n {\n id: 1,\n name: 'Joan Key',\n },\n {\n id: 2,\n name: 'Terrie Colon',\n },\n ],\n greeting: 'Hello, Reid! You have 6 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0cd7d10e075f923c32',\n index: 82,\n guid: 'eff18055-8039-4733-8e71-0e8161a9a37f',\n isActive: true,\n balance: '$1,703.03',\n picture: 'http://placehold.it/32x32',\n age: 27,\n eyeColor: 'green',\n name: {\n first: 'Myra',\n last: 'Cooper',\n },\n company: 'LOTRON',\n email: 'myra.cooper@lotron.me',\n phone: '+1 (833) 490-3199',\n address: '454 Argyle Road, Tilleda, West Virginia, 4341',\n about:\n 'Dolor sint commodo est excepteur sunt labore consequat cillum et minim. Id proident id officia aute. Aliquip exercitation nulla esse ad id do adipisicing occaecat ipsum veniam veniam dolor. Voluptate tempor qui dolor ullamco consequat consequat cupidatat nisi elit et non qui non adipisicing. Excepteur consequat minim laborum minim nostrud mollit anim exercitation minim duis ullamco. Minim minim fugiat qui voluptate dolor dolore voluptate non consectetur nulla commodo exercitation do non. Ad commodo sit excepteur adipisicing do ex sunt minim laborum dolore non do elit in.',\n registered: 'Friday, September 30, 2016 1:21 AM',\n latitude: '12.698327',\n longitude: '98.957272',\n tags: ['et', 'esse', 'sint', 'incididunt', 'esse'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Angelia Roth',\n },\n {\n id: 1,\n name: 'Vasquez Cole',\n },\n {\n id: 2,\n name: 'Tanner Hayes',\n },\n ],\n greeting: 'Hello, Myra! You have 10 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c79029337f04c4f74',\n index: 83,\n guid: '10fb3103-bb73-42c0-8fac-3fe42121176e',\n isActive: false,\n balance: '$3,028.72',\n picture: 'http://placehold.it/32x32',\n age: 33,\n eyeColor: 'green',\n name: {\n first: 'Mccarty',\n last: 'Workman',\n },\n company: 'TURNABOUT',\n email: 'mccarty.workman@turnabout.ca',\n phone: '+1 (839) 409-3408',\n address: '138 Rutledge Street, Tivoli, South Dakota, 9041',\n about:\n 'Culpa laborum ea magna nulla ipsum velit excepteur incididunt occaecat sit. Ullamco laborum voluptate dolor est proident ex culpa. Ex est sunt aliquip culpa in adipisicing mollit irure magna exercitation.',\n registered: 'Thursday, December 18, 2014 10:46 AM',\n latitude: '3.78797',\n longitude: '-146.349265',\n tags: ['ut', 'pariatur', 'ad', 'voluptate', 'qui'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Skinner Webster',\n },\n {\n id: 1,\n name: 'Atkins James',\n },\n {\n id: 2,\n name: 'Enid Meyer',\n },\n ],\n greeting: 'Hello, Mccarty! You have 9 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0c642e9641a7bfbcee',\n index: 84,\n guid: 'a774c4b8-b1d2-42c3-837a-52bce2aa7a94',\n isActive: false,\n balance: '$2,539.93',\n picture: 'http://placehold.it/32x32',\n age: 34,\n eyeColor: 'blue',\n name: {\n first: 'Davenport',\n last: 'Small',\n },\n company: 'ISOTRACK',\n email: 'davenport.small@isotrack.biz',\n phone: '+1 (909) 521-2228',\n address: '646 Fleet Walk, Dale, Texas, 3140',\n about:\n 'Non magna officia veniam velit nostrud elit. Nulla ad cupidatat quis aliquip ut. Adipisicing labore sint nostrud eu veniam sunt dolor consequat pariatur commodo consectetur magna sunt. Tempor dolor consectetur deserunt in quis id proident occaecat sunt. Est minim anim proident occaecat culpa ex minim mollit ea. Enim deserunt tempor ea eu nulla sunt veniam ad. Laborum cillum dolor proident voluptate id sint ut voluptate cillum anim incididunt laboris.',\n registered: 'Friday, May 1, 2015 11:13 AM',\n latitude: '-49.904277',\n longitude: '-35.151297',\n tags: ['anim', 'labore', 'Lorem', 'anim', 'cillum'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Emerson Gilmore',\n },\n {\n id: 1,\n name: 'Castillo Wright',\n },\n {\n id: 2,\n name: 'Marva Stone',\n },\n ],\n greeting: 'Hello, Davenport! You have 10 unread messages.',\n favoriteFruit: 'strawberry',\n },\n {\n _id: '580ddf0cf681ca1388d97783',\n index: 85,\n guid: 'b5860a9d-45ff-47ef-bd87-e43adc9dc8d6',\n isActive: true,\n balance: '$1,578.95',\n picture: 'http://placehold.it/32x32',\n age: 29,\n eyeColor: 'brown',\n name: {\n first: 'Reyes',\n last: 'Dotson',\n },\n company: 'GRACKER',\n email: 'reyes.dotson@gracker.co.uk',\n phone: '+1 (909) 410-2034',\n address: '739 Junius Street, Nutrioso, Missouri, 6051',\n about:\n 'Esse magna Lorem enim nostrud quis sit minim et do elit. Culpa proident ipsum dolore aute do exercitation tempor eu. Reprehenderit ullamco sunt ad anim aliqua proident deserunt commodo dolor ad quis cillum cupidatat. Ea sint id aute adipisicing do anim minim exercitation labore id ullamco duis do sit. Laboris do in sunt esse anim cillum anim nulla eu do consequat aliquip culpa amet. Ipsum velit reprehenderit minim velit incididunt enim duis ut aliquip.',\n registered: 'Wednesday, February 5, 2014 11:01 AM',\n latitude: '-11.383582',\n longitude: '102.513196',\n tags: ['occaecat', 'consequat', 'ipsum', 'elit', 'voluptate'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Baker Bennett',\n },\n {\n id: 1,\n name: 'Franklin Nelson',\n },\n {\n id: 2,\n name: 'Wilda Hill',\n },\n ],\n greeting: 'Hello, Reyes! You have 7 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0cc99c7d2e5622dbb5',\n index: 86,\n guid: '0a1d6c96-621e-4fe5-9f0f-ccba26458cf1',\n isActive: false,\n balance: '$1,760.99',\n picture: 'http://placehold.it/32x32',\n age: 25,\n eyeColor: 'green',\n name: {\n first: 'Ratliff',\n last: 'Kinney',\n },\n company: 'YURTURE',\n email: 'ratliff.kinney@yurture.us',\n phone: '+1 (962) 417-2906',\n address: '832 Duryea Court, Moscow, New Hampshire, 7275',\n about:\n 'Sint commodo ullamco proident ullamco esse elit Lorem anim veniam sunt veniam nulla elit. Tempor nulla culpa ut occaecat tempor elit aliqua ipsum. Anim nisi reprehenderit pariatur officia aute elit fugiat amet est incididunt. Irure excepteur id cillum exercitation esse officia dolor in amet id nostrud. Incididunt consectetur culpa tempor officia veniam aute eu incididunt duis tempor incididunt ex nisi irure. Tempor proident aute aliquip in aliqua Lorem cillum consequat exercitation et sint nulla minim. Cillum magna ut aliqua eu qui tempor culpa laborum amet magna ullamco.',\n registered: 'Tuesday, April 29, 2014 6:13 AM',\n latitude: '-13.301568',\n longitude: '-112.255058',\n tags: ['labore', 'sit', 'excepteur', 'laboris', 'nulla'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Ingrid Rutledge',\n },\n {\n id: 1,\n name: 'Simpson Barlow',\n },\n {\n id: 2,\n name: 'Lottie Hickman',\n },\n ],\n greeting: 'Hello, Ratliff! You have 6 unread messages.',\n favoriteFruit: 'banana',\n },\n {\n _id: '580ddf0c461fe67eb5044e47',\n index: 87,\n guid: '4f264353-60c0-4324-af56-34d2f28e718a',\n isActive: true,\n balance: '$1,034.62',\n picture: 'http://placehold.it/32x32',\n age: 21,\n eyeColor: 'blue',\n name: {\n first: 'Bettye',\n last: 'Jenkins',\n },\n company: 'LUNCHPOD',\n email: 'bettye.jenkins@lunchpod.name',\n phone: '+1 (873) 530-2152',\n address: '577 Oliver Street, Gallina, Hawaii, 2623',\n about:\n 'Consectetur eiusmod aute ad duis nisi minim dolore ad do deserunt occaecat voluptate cupidatat. Sunt exercitation cillum deserunt veniam cillum. Lorem anim dolor occaecat elit amet. Magna reprehenderit laboris enim occaecat eiusmod Lorem duis sint nulla quis exercitation occaecat ipsum. Laborum Lorem magna ullamco enim ad id. Pariatur exercitation nisi cupidatat incididunt ipsum magna cillum laborum. Laboris exercitation excepteur adipisicing Lorem duis id ipsum fugiat nostrud labore culpa consequat ad.',\n registered: 'Sunday, May 1, 2016 11:30 AM',\n latitude: '-2.873736',\n longitude: '108.897468',\n tags: ['aliqua', 'sunt', 'ex', 'duis', 'commodo'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Leonard Kelley',\n },\n {\n id: 1,\n name: 'Penny Watson',\n },\n {\n id: 2,\n name: 'Roxanne French',\n },\n ],\n greeting: 'Hello, Bettye! You have 5 unread messages.',\n favoriteFruit: 'apple',\n },\n {\n _id: '580ddf0cf9dae7fe5522c648',\n index: 88,\n guid: 'b47a7f45-3805-44d7-b455-67038c5466e8',\n isActive: true,\n balance: '$2,489.68',\n picture: 'http://placehold.it/32x32',\n age: 35,\n eyeColor: 'blue',\n name: {\n first: 'Barr',\n last: 'Pearson',\n },\n company: 'QNEKT',\n email: 'barr.pearson@qnekt.info',\n phone: '+1 (914) 541-3874',\n address: '186 Robert Street, Ona, Georgia, 8717',\n about:\n 'Anim ullamco mollit adipisicing sit tempor aute eiusmod adipisicing cupidatat laborum tempor reprehenderit pariatur. Reprehenderit ullamco aliqua laboris Lorem. Exercitation magna pariatur mollit ea ullamco et nostrud commodo laboris dolore. Esse do cupidatat pariatur esse in labore do et cillum reprehenderit incididunt. Ad mollit adipisicing proident culpa occaecat tempor et elit esse occaecat fugiat consectetur occaecat occaecat. Et adipisicing esse labore ullamco proident laboris consequat enim aliqua. Eu laboris et in voluptate.',\n registered: 'Friday, September 5, 2014 6:22 PM',\n latitude: '55.604021',\n longitude: '-152.171415',\n tags: ['occaecat', 'culpa', 'do', 'id', 'qui'],\n range: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n friends: [\n {\n id: 0,\n name: 'Kimberley Mckinney',\n },\n {\n id: 1,\n name: 'Mosley Gardner',\n },\n {\n id: 2,\n name: 'Gay Garner',\n },\n ],\n greeting: 'Hello, Barr! You have 6 unread messages.',\n favoriteFruit: 'apple',\n },\n];\n\nexport const circularData = { bigArray };\ncircularData.c = circularData;\n" }, { "path": "extension/test/perf/send.spec.js", "content": "import { bigArray, bigString, circularData } from './data.js';\nimport { listenMessage } from '../utils/inject.js';\n\nfunction test(title, data, maxTime = 100) {\n it('should send ' + title, async () => {\n const start = new Date();\n await listenMessage(() => {\n window.__REDUX_DEVTOOLS_EXTENSION__.send(\n { type: 'TEST_ACTION', data },\n data,\n );\n });\n const ms = new Date() - start;\n // console.log(ms);\n expect(ms).toBeLessThan(maxTime);\n });\n}\n\ndescribe('Perf', () => {\n test('a huge string', bigString);\n test('a huge array', bigArray);\n test('an object with circular references', circularData);\n});\n" }, { "path": "extension/test/setup.js", "content": "import { jest } from '@jest/globals';\nimport * as chrome from 'sinon-chrome';\n\nglobal.chrome = chrome;\nimport '@testing-library/jest-dom';\n\njest.setTimeout(50000);\n" }, { "path": "extension/test/utils/e2e.js", "content": "import webdriver from 'selenium-webdriver';\n\nexport const delay = (time) =>\n new Promise((resolve) => setTimeout(resolve, time));\n\nexport const switchMonitorTests = {\n 'should switch to Log Monitor': async function (driver) {\n await driver\n .findElement(webdriver.By.xpath('//button[text()=\"Inspector\"]'))\n .click();\n await delay(500); // Wait till menu is fully opened\n await driver\n .findElement(webdriver.By.xpath('//button[text()=\"Log monitor\"]'))\n .click();\n await delay(500);\n await driver.findElement(\n webdriver.By.xpath(\n '//div[div[button[text()=\"Reset\"]] and .//div[button[text()=\"Revert\"]]]',\n ),\n );\n await delay(500);\n },\n\n 'should switch to Chart Monitor': async function (driver) {\n await driver\n .findElement(webdriver.By.xpath('//button[text()=\"Log monitor\"]'))\n .click();\n await delay(500); // Wait till menu is fully opened\n await driver\n .findElement(webdriver.By.xpath('//button[text()=\"Chart\"]'))\n .click();\n await delay(500);\n await driver.findElement(\n webdriver.By.xpath('//*[@class=\"nodeText\" and text()=\"state\"]'),\n );\n await delay(500); // Wait till menu is closed\n },\n\n 'should switch back to Inspector Monitor': async function (driver) {\n await driver\n .findElement(webdriver.By.xpath('//button[text()=\"Chart\"]'))\n .click();\n await delay(1000); // Wait till menu is fully opened\n await driver\n .findElement(webdriver.By.xpath('//button[text()=\"Inspector\"]'))\n .click();\n await delay(1500); // Wait till menu is closed\n },\n};\n" }, { "path": "extension/test/utils/inject.js", "content": "export function insertScript(str) {\n const s = window.document.createElement('script');\n s.appendChild(document.createTextNode(str));\n (document.head || document.documentElement).appendChild(s);\n}\n\nexport function listenMessage(f) {\n return new Promise((resolve) => {\n const listener = (event) => {\n const message = event.data;\n window.removeEventListener('message', listener);\n resolve(message);\n };\n window.addEventListener('message', listener);\n if (f) f();\n });\n}\n" }, { "path": "extension/tsconfig.json", "content": "{\n \"extends\": \"../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"chrome\"]\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "jest.config.js", "content": "module.exports = {\n projects: ['/extension', '/packages/*'],\n};\n" }, { "path": "package.json", "content": "{\n \"private\": true,\n \"devDependencies\": {\n \"@babel/core\": \"^7.29.0\",\n \"@changesets/cli\": \"^2.30.0\",\n \"@eslint/js\": \"^9.39.4\",\n \"eslint\": \"^9.39.4\",\n \"eslint-config-prettier\": \"^10.1.8\",\n \"eslint-plugin-jest\": \"^29.15.0\",\n \"eslint-plugin-react\": \"^7.37.5\",\n \"eslint-plugin-react-hooks\": \"^7.0.1\",\n \"jest\": \"^30.3.0\",\n \"prettier\": \"3.8.1\",\n \"typescript\": \"~5.9.3\",\n \"typescript-eslint\": \"^8.57.0\"\n },\n \"scripts\": {\n \"format\": \"prettier --write .\",\n \"format:check\": \"prettier --check .\",\n \"build:all\": \"pnpm --recursive run build\",\n \"lint:all\": \"pnpm --recursive run lint\",\n \"test:all\": \"pnpm --recursive run test\",\n \"clean:all\": \"pnpm --recursive run clean\",\n \"release\": \"pnpm build:all && pnpm publish -r\"\n },\n \"packageManager\": \"pnpm@10.32.1\"\n}\n" }, { "path": "packages/d3-state-visualizer/CHANGELOG.md", "content": "# Change Log\n\n## 3.0.0\n\n### Major Changes\n\n- 191d419: Convert d3 packages to ESM\n\n### Patch Changes\n\n- Updated dependencies [191d419]\n - d3tooltip@4.0.0\n - map2tree@4.0.0\n\n## 2.0.0\n\n### Major Changes\n\n- b323f77d: Upgrade D3\n - Remove UMD build.\n - Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.\n - The shape of the argument passed to the `onClickText` option has been updated.\n - Rename `InputOptions` to `Options`, `Primitive` to `StyleValue`, and `NodeWithId` to `HierarchyPointNode`.\n\n### Patch Changes\n\n- Updated dependencies [b323f77d]\n- Updated dependencies [b323f77d]\n - d3tooltip@3.0.0\n - map2tree@3.0.0\n\n## [1.4.0](https://github.com/reduxjs/redux-devtools/compare/d3-state-visualizer@1.3.4...d3-state-visualizer@1.4.0) (2021-03-06)\n\n### Features\n\n- **d3-state-visualizer:** convert example to TypeScript ([#641](https://github.com/reduxjs/redux-devtools/issues/641)) ([300b60a](https://github.com/reduxjs/redux-devtools/commit/300b60a8b1f92a6d7c78510a1bea304490aa23be))\n- **d3-state-visualizer:** convert to TypeScript ([#640](https://github.com/reduxjs/redux-devtools/issues/640)) ([0c78a5a](https://github.com/reduxjs/redux-devtools/commit/0c78a5a9a76ee7eff37dcd8e39272d98c03e0869))\n- **redux-devtools-chart-monitor:** convert to TypeScript ([#642](https://github.com/reduxjs/redux-devtools/issues/642)) ([761baba](https://github.com/reduxjs/redux-devtools/commit/761baba0aa0f4dc672f8771f4b12bed3863557f7))\n\n## [1.3.4](https://github.com/reduxjs/redux-devtools/compare/d3-state-visualizer@1.3.3...d3-state-visualizer@1.3.4) (2020-09-07)\n\n**Note:** Version bump only for package d3-state-visualizer\n\n## 1.3.3 (2020-08-14)\n\n**Note:** Version bump only for package d3-state-visualizer\n" }, { "path": "packages/d3-state-visualizer/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Romain Séguy\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.\n" }, { "path": "packages/d3-state-visualizer/README.md", "content": "# d3-state-visualizer\n\nEnables real-time visualization of your application state.\n\nCreated by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/d3-state-visualizer`](https://github.com/reduxjs/d3-state-visualizer).\n\n[Demo](http://reduxjs.github.io/d3-state-visualizer)\n\n## Installation\n\n`yarn install d3-state-visualizer`\n\n## Usage\n\n```javascript\nimport { tree } from 'd3-state-visualizer';\n\nconst appState = {\n todoStore: {\n todos: [\n { title: 'd3' },\n { title: 'state' },\n { title: 'visualizer' },\n { title: 'tree' },\n ],\n completedCount: 1,\n },\n};\n\nconst render = tree(document.getElementById('root'), {\n state: appState,\n id: 'treeExample',\n size: 1000,\n aspectRatio: 0.5,\n isSorted: false,\n widthBetweenNodesCoeff: 1.5,\n heightBetweenNodesCoeff: 2,\n chartStyles: { border: '1px solid black' },\n tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },\n});\n\nrender();\n```\n\n## Charts API\n\nThe APIs are minimal and consists of a single function you provide with:\n\n- a DOM element\n- a plain old JS object for options.\n\n#### Tree\n\nThis chart is a bit special as it accepts either one of the two following options, but **not both**:\n\n- `tree`: a properly formed tree structure such as one generated by [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree) or [react2tree](https://github.com/romseguy/react2tree)\n- `state`: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree).\n\nOther options are listed below and have reasonable default values if you want to omit them:\n\n| Option | Type | Default | Description |\n| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument |\n| `chartStyles` | Object | `{}` | Sets the CSS style of the chart |\n| `size` | Number | `500` | Sets size of the chart in pixels |\n| `aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works |\n| `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node |\n| `heightBetweenNodesCoeff` | Float | `1.0` | Alters the vertical space between each node |\n| `isSorted` | Boolean | `false` | Sorts the chart in alphabetical order |\n| `transitionDuration` | Number | `750` | Sets the duration of all the transitions used by the chart |\n| `tooltipOptions` | Object | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes |\n| `rootKeyName` | String | `'state'` | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option |\n| `pushMethod` | String | `'push'` | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option |\n\nMore to come...\n\n## Roadmap\n\n- Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.\n" }, { "path": "packages/d3-state-visualizer/eslint.config.js", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTs from '../../eslint.ts.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n {\n ignores: ['examples', 'lib'],\n },\n];\n" }, { "path": "packages/d3-state-visualizer/examples/tree/CHANGELOG.md", "content": "# d3-state-visualizer-tree-example\n\n## 0.1.6\n\n### Patch Changes\n\n- Updated dependencies [191d419]\n - d3-state-visualizer@3.0.0\n - map2tree@4.0.0\n\n## 0.1.5\n\n### Patch Changes\n\n- Updated dependencies [b323f77d]\n- Updated dependencies [b323f77d]\n - d3-state-visualizer@2.0.0\n - map2tree@3.0.0\n" }, { "path": "packages/d3-state-visualizer/examples/tree/eslint.config.mjs", "content": "import eslintJs from '../../../../eslint.js.config.base.mjs';\nimport eslintTs from '../../../../eslint.ts.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTs(\n import.meta.dirname,\n ['webpack.config.ts'],\n ['./tsconfig.webpack.json'],\n ),\n {\n ignores: ['dist'],\n },\n];\n" }, { "path": "packages/d3-state-visualizer/examples/tree/index.html", "content": "\n\n \n \n \n State tree with d3-state-visualizer\n \n \n \n
\n \n \n\n" }, { "path": "packages/d3-state-visualizer/examples/tree/package.json", "content": "{\n \"private\": true,\n \"name\": \"d3-state-visualizer-tree-example\",\n \"version\": \"0.1.6\",\n \"description\": \"Visualize your app state as a tree\",\n \"keywords\": [\n \"d3\",\n \"state\",\n \"store\",\n \"visualization\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/tree\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc\"\n },\n \"dependencies\": {\n \"d3-state-visualizer\": \"workspace:^\",\n \"map2tree\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"typescript\": \"~5.9.3\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "packages/d3-state-visualizer/examples/tree/src/index.ts", "content": "import { tree } from 'd3-state-visualizer';\n\nconst appState = {\n todoStore: {\n todos: [\n { title: 'd3' },\n { title: 'state' },\n { title: 'visualizer' },\n { title: 'tree' },\n ],\n completedCount: 1,\n alphabeticalOrder: true,\n },\n someStore: {\n someProperty: 0,\n someObject: {\n anotherProperty: 'value',\n someArray: [0, 1, 2],\n },\n },\n};\n\nconst render = tree(document.getElementById('root')!, {\n state: appState,\n id: 'treeExample',\n size: 1000,\n aspectRatio: 0.5,\n isSorted: false,\n widthBetweenNodesCoeff: 1.5,\n heightBetweenNodesCoeff: 2,\n chartStyles: { border: '1px solid black' },\n tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },\n});\n\nrender();\n" }, { "path": "packages/d3-state-visualizer/examples/tree/tsconfig.json", "content": "{\n \"extends\": \"../../../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"noEmit\": true\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/d3-state-visualizer/package.json", "content": "{\n \"name\": \"d3-state-visualizer\",\n \"version\": \"3.0.0\",\n \"description\": \"Visualize your app state with a range of reusable charts\",\n \"keywords\": [\n \"d3\",\n \"state\",\n \"store\",\n \"tree\",\n \"visualization\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"romseguy\",\n \"files\": [\n \"dist\",\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run lint\"\n },\n \"dependencies\": {\n \"@types/d3\": \"^7.4.3\",\n \"d3\": \"^7.9.0\",\n \"d3tooltip\": \"workspace:^\",\n \"deepmerge\": \"^4.3.1\",\n \"map2tree\": \"workspace:^\",\n \"ramda\": \"^0.32.0\"\n },\n \"devDependencies\": {\n \"@types/ramda\": \"^0.31.1\",\n \"rimraf\": \"^6.1.3\",\n \"typescript\": \"~5.9.3\"\n }\n}\n" }, { "path": "packages/d3-state-visualizer/src/charts/index.ts", "content": "export type { HierarchyPointNode } from 'd3';\nexport type { StyleValue } from 'd3tooltip';\nexport { default as tree } from './tree/tree.js';\nexport type { Node, Options } from './tree/tree.js';\n" }, { "path": "packages/d3-state-visualizer/src/charts/tree/sortAndSerialize.ts", "content": "function sortObject(obj: unknown, strict?: boolean) {\n if (obj instanceof Array) {\n let ary;\n if (strict) {\n ary = obj.sort();\n } else {\n ary = obj;\n }\n return ary;\n }\n\n if (obj && typeof obj === 'object') {\n const tObj: { [key: string]: unknown } = {};\n Object.keys(obj)\n .sort()\n .forEach((key) => (tObj[key] = sortObject(obj[key as keyof typeof obj])));\n return tObj;\n }\n\n return obj;\n}\n\nexport default function sortAndSerialize(obj: unknown) {\n return JSON.stringify(sortObject(obj, true), undefined, 2);\n}\n" }, { "path": "packages/d3-state-visualizer/src/charts/tree/tree.ts", "content": "import * as d3 from 'd3';\nimport type { D3ZoomEvent, HierarchyPointLink, HierarchyPointNode } from 'd3';\nimport { isEmpty } from 'ramda';\nimport { map2tree } from 'map2tree';\nimport type { Node } from 'map2tree';\nimport deepmerge from 'deepmerge';\nimport {\n getTooltipString,\n toggleChildren,\n visit,\n getNodeGroupByDepthCount,\n} from './utils.js';\nimport { tooltip } from 'd3tooltip';\nimport type { StyleValue } from 'd3tooltip';\n\nexport interface Options {\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n state?: {} | null;\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n tree?: Node | {};\n\n rootKeyName: string;\n pushMethod: 'push' | 'unshift';\n id: string;\n chartStyles: { [key: string]: StyleValue };\n nodeStyleOptions: {\n colors: {\n default: string;\n collapsed: string;\n parent: string;\n };\n radius: number;\n };\n textStyleOptions: {\n colors: {\n default: string;\n hover: string;\n };\n };\n linkStyles: { [key: string]: StyleValue };\n size: number;\n aspectRatio: number;\n initialZoom: number;\n margin: {\n top: number;\n right: number;\n bottom: number;\n left: number;\n };\n isSorted: boolean;\n heightBetweenNodesCoeff: number;\n widthBetweenNodesCoeff: number;\n transitionDuration: number;\n blinkDuration: number;\n onClickText: (datum: HierarchyPointNode) => void;\n tooltipOptions: {\n disabled?: boolean;\n left?: number | undefined;\n top?: number | undefined;\n offset?: {\n left: number;\n top: number;\n };\n styles?: { [key: string]: StyleValue } | undefined;\n indentationSize?: number;\n };\n}\n\nconst defaultOptions: Options = {\n state: undefined,\n rootKeyName: 'state',\n pushMethod: 'push',\n tree: undefined,\n id: 'd3svg',\n chartStyles: {},\n nodeStyleOptions: {\n colors: {\n default: '#ccc',\n collapsed: 'lightsteelblue',\n parent: 'white',\n },\n radius: 7,\n },\n textStyleOptions: {\n colors: {\n default: 'black',\n hover: 'skyblue',\n },\n },\n linkStyles: {\n stroke: '#000',\n fill: 'none',\n },\n size: 500,\n aspectRatio: 1.0,\n initialZoom: 1,\n margin: {\n top: 10,\n right: 10,\n bottom: 10,\n left: 50,\n },\n isSorted: false,\n heightBetweenNodesCoeff: 2,\n widthBetweenNodesCoeff: 1,\n transitionDuration: 750,\n blinkDuration: 100,\n onClickText: () => {\n // noop\n },\n tooltipOptions: {\n disabled: false,\n left: undefined,\n top: undefined,\n offset: {\n left: 0,\n top: 0,\n },\n styles: undefined,\n },\n} satisfies Options;\n\nexport interface InternalNode extends Node {\n _children?: this[] | undefined;\n id: string | number;\n}\n\ninterface NodePosition {\n parentId: string | number | null;\n id: string | number;\n x: number;\n y: number;\n}\n\nexport default function (DOMNode: HTMLElement, options: Partial = {}) {\n const {\n id,\n chartStyles,\n nodeStyleOptions,\n textStyleOptions,\n linkStyles,\n size,\n aspectRatio,\n initialZoom,\n margin,\n isSorted,\n widthBetweenNodesCoeff,\n heightBetweenNodesCoeff,\n transitionDuration,\n blinkDuration,\n state,\n rootKeyName,\n pushMethod,\n tree,\n tooltipOptions,\n onClickText,\n } = deepmerge(defaultOptions, options);\n\n const width = size - margin.left - margin.right;\n const height = size * aspectRatio - margin.top - margin.bottom;\n const fullWidth = size;\n const fullHeight = size * aspectRatio;\n\n const root = d3.select(DOMNode);\n const zoom = d3.zoom().scaleExtent([0.1, 3]);\n\n const svgElement = root\n .append('svg')\n .attr('id', id)\n .attr('preserveAspectRatio', 'xMinYMin slice')\n .style('cursor', '-webkit-grab');\n\n if (!chartStyles.width) {\n svgElement.attr('width', fullWidth);\n }\n\n if (!chartStyles.width || !chartStyles.height) {\n svgElement.attr('viewBox', `0 0 ${fullWidth} ${fullHeight}`);\n }\n\n for (const [key, value] of Object.entries(chartStyles)) {\n svgElement.style(key, value);\n }\n\n const vis = svgElement\n // eslint-disable-next-line @typescript-eslint/unbound-method\n .call(zoom.scaleTo, initialZoom)\n .call(\n zoom.on('zoom', (event) => {\n const { transform } = event as D3ZoomEvent;\n vis.attr('transform', transform.toString());\n }),\n )\n .append('g')\n .attr(\n 'transform',\n `translate(${margin.left + nodeStyleOptions.radius}, ${\n margin.top\n }) scale(${initialZoom})`,\n );\n\n // previousNodePositionsById stores node x and y\n // as well as hierarchy (id / parentId);\n // helps animating transitions\n let previousNodePositionsById: { [nodeId: string]: NodePosition } = {\n root: {\n id: 'root',\n parentId: null,\n x: height / 2,\n y: 0,\n },\n };\n\n // traverses a map with node positions by going through the chain\n // of parent ids; once a parent that matches the given filter is found,\n // the parent position gets returned\n function findParentNodePosition(\n nodePositionsById: { [nodeId: string | number]: NodePosition },\n nodeId: string | number,\n filter: (nodePosition: NodePosition) => boolean,\n ) {\n let currentPosition = nodePositionsById[nodeId];\n while (currentPosition) {\n currentPosition = nodePositionsById[currentPosition.parentId!];\n if (!currentPosition) {\n return null;\n }\n if (!filter || filter(currentPosition)) {\n return currentPosition;\n }\n }\n }\n\n return function renderChart(nextState = tree || state) {\n let data = !tree\n ? (map2tree(nextState, {\n key: rootKeyName,\n pushMethod,\n }) as InternalNode)\n : (nextState as InternalNode);\n\n if (isEmpty(data) || !data.name) {\n data = {\n name: 'error',\n message: 'Please provide a state map or a tree structure',\n } as unknown as InternalNode;\n }\n\n let nodeIndex = 0;\n let maxLabelLength = 0;\n\n // nodes are assigned with string ids, which reflect their location\n // within the hierarcy; e.g. \"root|branch|subBranch|subBranch[0]|property\"\n // top-level elemnt always has id \"root\"\n visit(\n data,\n (node) => {\n maxLabelLength = Math.max(node.name.length, maxLabelLength);\n node.id = node.id || 'root';\n },\n (node) =>\n node.children && node.children.length > 0\n ? node.children.map((c) => {\n c.id = `${node.id || ''}|${c.name}`;\n return c;\n })\n : null,\n );\n\n update();\n\n function update() {\n // path generator for links\n const linkHorizontal = d3\n .linkHorizontal<\n {\n source: { x: number; y: number };\n target: { x: number; y: number };\n },\n { x: number; y: number }\n >()\n .x((d) => d.y)\n .y((d) => d.x);\n // set tree dimensions and spacing between branches and nodes\n const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));\n\n const layout = d3\n .tree()\n .size([maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, width]);\n\n const rootNode = d3.hierarchy(data);\n if (isSorted) {\n rootNode.sort((a, b) =>\n b.data.name.toLowerCase() < a.data.name.toLowerCase() ? 1 : -1,\n );\n }\n\n const rootPointNode = layout(rootNode);\n const links = rootPointNode.links();\n\n rootPointNode.each(\n (node) =>\n (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff)),\n );\n\n const nodes = rootPointNode.descendants();\n\n const nodePositions = nodes.map((n) => ({\n parentId: n.parent && n.parent.data.id,\n id: n.data.id,\n x: n.x,\n y: n.y,\n }));\n const nodePositionsById: { [nodeId: string | number]: NodePosition } = {};\n nodePositions.forEach((node) => (nodePositionsById[node.id] = node));\n\n // process the node selection\n const node = vis\n .selectAll>('g.node')\n .property('__oldData__', (d) => d)\n .data(nodes, (d) => d.data.id || (d.data.id = ++nodeIndex));\n const nodeEnter = node\n .enter()\n .append('g')\n .attr('class', 'node')\n .attr('transform', (d) => {\n const position = findParentNodePosition(\n nodePositionsById,\n d.data.id,\n (n) => !!previousNodePositionsById[n.id],\n );\n const previousPosition =\n (position && previousNodePositionsById[position.id]) ||\n previousNodePositionsById.root;\n return `translate(${previousPosition.y},${previousPosition.x})`;\n })\n .style('fill', textStyleOptions.colors.default)\n .style('cursor', 'pointer')\n .on('mouseover', function mouseover() {\n d3.select(this).style('fill', textStyleOptions.colors.hover);\n })\n .on('mouseout', function mouseout() {\n d3.select(this).style('fill', textStyleOptions.colors.default);\n });\n\n if (!tooltipOptions.disabled) {\n nodeEnter.call(\n tooltip<\n SVGGElement,\n HierarchyPointNode,\n SVGGElement,\n unknown,\n HTMLElement,\n unknown,\n null,\n undefined\n >('tooltip', {\n ...tooltipOptions,\n root,\n text: (d) => getTooltipString(d.data, tooltipOptions),\n }),\n );\n }\n\n // g inside node contains circle and text\n // this extra wrapper helps run d3 transitions in parallel\n const nodeEnterInnerGroup = nodeEnter.append('g');\n nodeEnterInnerGroup\n .append('circle')\n .attr('class', 'nodeCircle')\n .attr('r', 0)\n .on('click', (event, clickedNode) => {\n if ((event as Event).defaultPrevented) return;\n toggleChildren(clickedNode.data);\n update();\n });\n\n nodeEnterInnerGroup\n .append('text')\n .attr('class', 'nodeText')\n .attr('text-anchor', 'middle')\n .attr('transform', 'translate(0,0)')\n .attr('dy', '.35em')\n .style('fill-opacity', 0)\n .text((d) => d.data.name)\n .on('click', (_, datum) => {\n onClickText(datum as unknown as HierarchyPointNode);\n });\n\n const nodeEnterAndUpdate = nodeEnter.merge(node);\n\n // update the text to reflect whether node has children or not\n nodeEnterAndUpdate.select('text').text((d) => d.data.name);\n\n // change the circle fill depending on whether it has children and is collapsed\n nodeEnterAndUpdate\n .select('circle')\n .style('stroke', 'black')\n .style('stroke-width', '1.5px')\n .style('fill', (d) =>\n d.data._children && d.data._children.length > 0\n ? nodeStyleOptions.colors.collapsed\n : d.data.children && d.data.children.length > 0\n ? nodeStyleOptions.colors.parent\n : nodeStyleOptions.colors.default,\n );\n\n // transition nodes to their new position\n const nodeUpdate = nodeEnterAndUpdate\n .transition()\n .duration(transitionDuration)\n .attr('transform', (d) => `translate(${d.y},${d.x})`);\n\n // ensure circle radius is correct\n nodeUpdate.select('circle').attr('r', nodeStyleOptions.radius);\n\n // fade the text in and align it\n nodeUpdate\n .select('text')\n .style('fill-opacity', 1)\n .attr('transform', function transform(d) {\n const x =\n (((d.data.children ?? d.data._children)?.length ?? 0) > 0\n ? -1\n : 1) *\n (this.getBBox().width / 2 + nodeStyleOptions.radius + 5);\n return `translate(${x},0)`;\n });\n\n // blink updated nodes\n nodeEnterAndUpdate\n .filter(function flick(\n this: SVGGElement & {\n __oldData__?: HierarchyPointNode;\n },\n d,\n ) {\n // test whether the relevant properties of d match\n // the equivalent property of the oldData\n // also test whether the old data exists,\n // to catch the entering elements!\n return (\n !!this.__oldData__ && d.data.value !== this.__oldData__.data.value\n );\n })\n .select('g')\n .style('opacity', '0.3')\n .transition()\n .duration(blinkDuration)\n .style('opacity', '1');\n\n // transition exiting nodes to the parent's new position\n const nodeExit = node\n .exit>()\n .transition()\n .duration(transitionDuration)\n .attr('transform', (d) => {\n const position = findParentNodePosition(\n previousNodePositionsById,\n d.data.id,\n (n) => !!nodePositionsById[n.id],\n );\n const futurePosition =\n (position && nodePositionsById[position.id]) ||\n nodePositionsById.root;\n return `translate(${futurePosition.y},${futurePosition.x})`;\n })\n .remove();\n\n nodeExit.select('circle').attr('r', 0);\n\n nodeExit.select('text').style('fill-opacity', 0);\n\n // update the links\n const link = vis\n .selectAll<\n SVGPathElement,\n HierarchyPointLink\n >('path.link')\n .data(links, (d) => d.target.data.id);\n\n // enter any new links at the parent's previous position\n const linkEnter = link\n .enter()\n .insert('path', 'g')\n .attr('class', 'link')\n .attr('d', (d) => {\n const position = findParentNodePosition(\n nodePositionsById,\n d.target.data.id,\n (n) => !!previousNodePositionsById[n.id],\n );\n const previousPosition =\n (position && previousNodePositionsById[position.id]) ||\n previousNodePositionsById.root;\n return linkHorizontal({\n source: previousPosition,\n target: previousPosition,\n });\n });\n\n for (const [key, value] of Object.entries(linkStyles)) {\n linkEnter.style(key, value);\n }\n\n const linkEnterAndUpdate = linkEnter.merge(link);\n\n // transition links to their new position\n linkEnterAndUpdate\n .transition()\n .duration(transitionDuration)\n .attr('d', linkHorizontal);\n\n // transition exiting nodes to the parent's new position\n link\n .exit>()\n .transition()\n .duration(transitionDuration)\n .attr('d', (d) => {\n const position = findParentNodePosition(\n previousNodePositionsById,\n d.target.data.id,\n (n) => !!nodePositionsById[n.id],\n );\n const futurePosition =\n (position && nodePositionsById[position.id]) ||\n nodePositionsById.root;\n return linkHorizontal({\n source: futurePosition,\n target: futurePosition,\n });\n })\n .remove();\n\n // delete the old data once it's no longer needed\n nodeEnterAndUpdate.property('__oldData__', null);\n\n // stash the old positions for transition\n previousNodePositionsById = nodePositionsById;\n }\n };\n}\n\nexport type { Node };\n" }, { "path": "packages/d3-state-visualizer/src/charts/tree/utils.ts", "content": "import { is, join, pipe, replace } from 'ramda';\nimport sortAndSerialize from './sortAndSerialize.js';\nimport type { InternalNode } from './tree.js';\n\nexport function collapseChildren(node: InternalNode) {\n if (node.children) {\n node._children = node.children;\n node._children.forEach(collapseChildren);\n node.children = undefined;\n }\n}\n\nexport function expandChildren(node: InternalNode) {\n if (node._children) {\n node.children = node._children;\n node.children.forEach(expandChildren);\n node._children = undefined;\n }\n}\n\nexport function toggleChildren(node: InternalNode) {\n if (node.children) {\n node._children = node.children;\n node.children = undefined;\n } else if (node._children) {\n node.children = node._children;\n node._children = undefined;\n }\n return node;\n}\n\nexport function visit(\n parent: InternalNode,\n visitFn: (parent: InternalNode) => void,\n childrenFn: (parent: InternalNode) => InternalNode[] | null | undefined,\n) {\n if (!parent) {\n return;\n }\n\n visitFn(parent);\n\n const children = childrenFn(parent);\n if (children) {\n const count = children.length;\n\n for (let i = 0; i < count; i++) {\n visit(children[i], visitFn, childrenFn);\n }\n }\n}\n\nexport function getNodeGroupByDepthCount(rootNode: InternalNode) {\n const nodeGroupByDepthCount = [1];\n\n const traverseFrom = function traverseFrom(node: InternalNode, depth = 0) {\n if (!node.children || node.children.length === 0) {\n return 0;\n }\n\n if (nodeGroupByDepthCount.length <= depth + 1) {\n nodeGroupByDepthCount.push(0);\n }\n\n nodeGroupByDepthCount[depth + 1] += node.children.length;\n\n node.children.forEach((childNode) => {\n traverseFrom(childNode, depth + 1);\n });\n };\n\n traverseFrom(rootNode);\n return nodeGroupByDepthCount;\n}\n\nexport function getTooltipString(node: InternalNode, { indentationSize = 4 }) {\n if (!is(Object, node)) return '';\n\n const spacer = join('  ');\n const cr2br = replace(/\\n/g, '
');\n const spaces2nbsp = replace(/\\s{2}/g, spacer(new Array(indentationSize)));\n const json2html = pipe(sortAndSerialize, cr2br, spaces2nbsp);\n\n const children = node.children || node._children;\n\n if (typeof node.value !== 'undefined') return json2html(node.value);\n if (typeof node.object !== 'undefined') return json2html(node.object);\n if (children && children.length) return `childrenCount: ${children.length}`;\n return 'empty';\n}\n" }, { "path": "packages/d3-state-visualizer/src/index.ts", "content": "export { tree } from './charts/index.js';\nexport type {\n HierarchyPointNode,\n Node,\n Options,\n StyleValue,\n} from './charts/index.js';\n" }, { "path": "packages/d3-state-visualizer/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/d3tooltip/CHANGELOG.md", "content": "# Change Log\n\n## 4.0.0\n\n### Major Changes\n\n- 191d419: Convert d3 packages to ESM\n\n## 3.0.1\n\n### Patch Changes\n\n- 7f5bddbd: Widen peer dependencies\n\n## 3.0.0\n\n### Major Changes\n\n- b323f77d: Upgrade D3\n - Remove UMD build.\n - Upgrade d3 peer dependency from v3 to v7.\n - Remove `attr` configuration method.\n - Rename `style` configuration method to `styles` and move to options.\n - Move `text` configuration method to options.\n - Remove d3 parameter as first parameter for `tooltip`.\n\n## 2.0.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import d3tooltip from 'd3tooltip';\n+ import { tooltip } from 'd3tooltip';\n```\n\n## [1.3.0](https://github.com/reduxjs/redux-devtools/compare/d3tooltip@1.2.3...d3tooltip@1.3.0) (2021-03-06)\n\n### Features\n\n- **d3-state-visualizer:** convert to TypeScript ([#640](https://github.com/reduxjs/redux-devtools/issues/640)) ([0c78a5a](https://github.com/reduxjs/redux-devtools/commit/0c78a5a9a76ee7eff37dcd8e39272d98c03e0869))\n- **d3tooltip:** convert to TypeScript ([#639](https://github.com/reduxjs/redux-devtools/issues/639)) ([3b580da](https://github.com/reduxjs/redux-devtools/commit/3b580dad4cb36abc395f9be139b2c3f94e872d87))\n\n## 1.2.3 (2020-08-14)\n\n**Note:** Version bump only for package d3tooltip\n" }, { "path": "packages/d3tooltip/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 romseguy\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.\n" }, { "path": "packages/d3tooltip/README.md", "content": "# d3tooltip\n\nThis tooltip aims for a minimal yet highly configurable API. It has a long way to go, but the essentials are there.\nIt was created by [@romseguy](https://github.com/romseguy) and merged from [`romseguy/d3tooltip`](https://github.com/romseguy/d3tooltip).\n\n## Installation\n\n`npm install d3-state-visualizer`\n\n## Quick usage\n\n```javascript\nimport * as d3 from 'd3';\nimport { tooltip } from 'd3tooltip';\n\nconst DOMNode = document.getElementById('chart');\nconst root = d3.select(DOMNode);\nconst vis = root.append('svg');\n\nconst options = {\n offset: { left: 30, top: 10 },\n styles: { 'min-width': '50px', 'border-radius': '5px' },\n};\n\nvis\n .selectAll('circle')\n .data(someData)\n .enter()\n .append('circle')\n .attr('r', 10)\n .call(\n d3tooltip('tooltipClassName', {\n ...options,\n text: (d) => toStringOrHtml(d),\n }),\n )\n .on('mouseover', function () {\n d3.select(this).style('fill', 'skyblue');\n })\n .on('mouseout', function () {\n d3.select(this).style('fill', 'black');\n });\n```\n\n## API\n\n| Option | Type | Default | Description |\n| -------- | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `root` | DOM.Element | `body` | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select). |\n| `left` | Number | `undefined` | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element. |\n| `top` | Number | `undefined` | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element. |\n| `offset` | Object | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option. |\n| `styles` | Object | `{}` | Sets the styles of the tooltip element. |\n| `text` | String or Function | `''` | Sets the text of the tooltip. Can be a constant `string` or a function that takes the datum and returns a `string`. |\n" }, { "path": "packages/d3tooltip/eslint.config.js", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTs from '../../eslint.ts.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n {\n ignores: ['lib'],\n },\n];\n" }, { "path": "packages/d3tooltip/package.json", "content": "{\n \"name\": \"d3tooltip\",\n \"version\": \"4.0.0\",\n \"description\": \"A highly configurable tooltip for d3\",\n \"keywords\": [\n \"d3\",\n \"tooltip\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"romseguy\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run lint\"\n },\n \"devDependencies\": {\n \"@types/d3\": \"^7.4.3\",\n \"d3\": \"^7.9.0\",\n \"rimraf\": \"^6.1.3\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@types/d3\": \"^7.4.3\",\n \"d3\": \"^7.9.0\"\n }\n}\n" }, { "path": "packages/d3tooltip/src/index.ts", "content": "import * as d3 from 'd3';\nimport type { BaseType, Selection } from 'd3';\n\nexport type StyleValue = string | number | boolean;\n\ninterface Options<\n Datum,\n RootGElement extends BaseType,\n RootDatum,\n RootPElement extends BaseType,\n RootPDatum,\n> {\n left: number | undefined;\n top: number | undefined;\n offset: {\n left: number;\n top: number;\n };\n root:\n | Selection\n | undefined;\n styles: { [key: string]: StyleValue };\n text: string | ((datum: Datum) => string);\n}\n\nconst defaultOptions: Options = {\n left: undefined, // mouseX\n top: undefined, // mouseY\n offset: { left: 0, top: 0 },\n root: undefined,\n styles: {},\n text: '',\n};\n\nexport function tooltip<\n GElement extends BaseType,\n Datum,\n PElement extends BaseType,\n PDatum,\n RootGElement extends BaseType,\n RootDatum,\n RootPElement extends BaseType,\n RootPDatum,\n>(\n className = 'tooltip',\n options: Partial<\n Options\n > = {},\n) {\n const { left, top, offset, root, styles, text } = {\n ...defaultOptions,\n ...options,\n } as Options;\n\n let el: Selection;\n const anchor: Selection<\n RootGElement,\n RootDatum,\n RootPElement | HTMLElement,\n RootPDatum\n > = root || d3.select('body');\n const rootNode = anchor.node()!;\n\n return function tip(selection: Selection) {\n selection.on('mouseover.tip', (event, datum) => {\n const [pointerX, pointerY] = d3.pointer(event, rootNode);\n const [x, y] = [\n left || pointerX + offset.left,\n top || pointerY - offset.top,\n ];\n\n anchor.selectAll(`div.${className}`).remove();\n\n el = anchor\n .append('div')\n .attr('class', className)\n .style('position', 'absolute')\n .style('z-index', 1001)\n .style('left', `${x}px`)\n .style('top', `${y}px`)\n .html(typeof text === 'function' ? () => text(datum) : () => text);\n\n for (const [key, value] of Object.entries(styles)) {\n el.style(key, value);\n }\n });\n\n selection.on('mousemove.tip', (event, datum) => {\n const [pointerX, pointerY] = d3.pointer(event, rootNode);\n const [x, y] = [\n left || pointerX + offset.left,\n top || pointerY - offset.top,\n ];\n\n el.style('left', `${x}px`)\n .style('top', `${y}px`)\n .html(typeof text === 'function' ? () => text(datum) : () => text);\n });\n\n selection.on('mouseout.tip', () => el.remove());\n };\n}\n" }, { "path": "packages/d3tooltip/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/map2tree/CHANGELOG.md", "content": "# Change Log\n\n## 4.0.0\n\n### Major Changes\n\n- 191d419: Convert d3 packages to ESM\n\n## 3.0.0\n\n### Major Changes\n\n- b323f77d: Remove UMD build.\n\n## 2.0.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import map2tree from 'map2tree';\n+ import { map2tree } from 'map2tree';\n```\n\n## [1.5.0](https://github.com/reduxjs/redux-devtools/compare/map2tree@1.4.2...map2tree@1.5.0) (2021-03-06)\n\n### Features\n\n- **d3-state-visualizer:** convert to TypeScript ([#640](https://github.com/reduxjs/redux-devtools/issues/640)) ([0c78a5a](https://github.com/reduxjs/redux-devtools/commit/0c78a5a9a76ee7eff37dcd8e39272d98c03e0869))\n- **d3tooltip:** convert to TypeScript ([#639](https://github.com/reduxjs/redux-devtools/issues/639)) ([3b580da](https://github.com/reduxjs/redux-devtools/commit/3b580dad4cb36abc395f9be139b2c3f94e872d87))\n- **map2tree:** convert to TypeScript ([#638](https://github.com/reduxjs/redux-devtools/issues/638)) ([3b027f4](https://github.com/reduxjs/redux-devtools/commit/3b027f400e0e326596eedc2ee17ab45a8383080d))\n\n## 1.4.2 (2020-08-14)\n\n### Bug Fixes\n\n- **map2tree:** consolidate immutable version ([#538](https://github.com/reduxjs/redux-devtools/issues/538)) ([999ed2a](https://github.com/reduxjs/redux-devtools/commit/999ed2ad8b4a09eddd55c2a944f5488ecce6bc7b))\n" }, { "path": "packages/map2tree/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Romain Séguy\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.\n" }, { "path": "packages/map2tree/README.md", "content": "A pure function to convert a map into a tree structure. Created by [@romseguy](https://github.com/romseguy) and merged from [`romseguy/map2tree`](https://github.com/romseguy/map2tree).\n\nThe following opinions must be taken into account since the primary use case of this library is [redux-devtools-chart-monitor](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor):\n\n- Objects and arrays deeply nested within collections are not converted into a tree structure. See `someNestedObject` and `someNestedArray` in the [output](https://github.com/romseguy/map2tree#output) below, or the [corresponding test](https://github.com/romseguy/map2tree/blob/master/test/map2tree.js#L140).\n- Provides support for [Immutable.js](https://github.com/facebook/immutable-js) data structures (only List and Map though).\n\n# Usage\n\n```javascript\nmap2tree(\n someMap,\n (options = {\n key: 'state', // the name you want for as the root node of the output tree\n pushMethod: 'push', // use 'unshift' to change the order children nodes are added\n }),\n);\n```\n\n# Input\n\n```javascript\nconst someMap = {\n someReducer: {\n todos: [\n { title: 'map', someNestedObject: { foo: 'bar' } },\n { title: 'to', someNestedArray: ['foo', 'bar'] },\n { title: 'tree' },\n { title: 'map2tree' },\n ],\n completedCount: 1,\n },\n otherReducer: {\n foo: 0,\n bar: { key: 'value' },\n },\n};\n```\n\n# Output\n\n```javascript\n{\n name: `${options.key}`,\n children: [\n {\n name: 'someReducer',\n children: [\n {\n name: 'todos',\n children: [\n {\n name: 'todo[0]',\n object: {\n title: 'map',\n someNestedObject: {foo: 'bar'}\n }\n },\n {\n name: 'todo[1]',\n object: {\n title: 'to',\n someNestedArray: ['foo', 'bar']\n }\n },\n // ...\n ]\n },\n // ...\n ]\n },\n {\n name: 'otherReducer',\n children: [\n {\n name: 'foo',\n value: 0\n },\n {\n name: 'bar',\n object: {\n key: 'value'\n }\n }\n ]\n }\n ]\n}\n```\n" }, { "path": "packages/map2tree/eslint.config.js", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTs from '../../eslint.ts.config.base.mjs';\nimport eslintTsJest from '../../eslint.ts.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTsJest(import.meta.dirname),\n {\n ignores: ['jest.config.ts', 'lib'],\n },\n];\n" }, { "path": "packages/map2tree/jest.config.ts", "content": "import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createDefaultEsmPreset({\n tsconfig: 'tsconfig.test.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "packages/map2tree/package.json", "content": "{\n \"name\": \"map2tree\",\n \"version\": \"4.0.0\",\n \"description\": \"Utility for mapping maps to trees\",\n \"keywords\": [\n \"map2tree\",\n \"map-to-tree\",\n \"mapToTree\",\n \"map\",\n \"tree\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"romseguy\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run lint && pnpm run test\"\n },\n \"dependencies\": {\n \"lodash-es\": \"^4.17.23\"\n },\n \"devDependencies\": {\n \"@types/jest\": \"^30.0.0\",\n \"@types/lodash-es\": \"^4.17.12\",\n \"immutable\": \"^5.1.5\",\n \"jest\": \"^30.3.0\",\n \"rimraf\": \"^6.1.3\",\n \"ts-jest\": \"^29.4.6\",\n \"typescript\": \"~5.9.3\"\n }\n}\n" }, { "path": "packages/map2tree/src/index.ts", "content": "import { isArray, isPlainObject, mapValues } from 'lodash-es';\n\nexport interface Node {\n name: string;\n children?: this[];\n object?: unknown;\n value?: unknown;\n}\n\nfunction visit(\n parent: Node,\n visitFn: (parent: Node) => void,\n childrenFn: (parent: Node) => Node[] | undefined | null,\n) {\n if (!parent) return;\n\n visitFn(parent);\n\n const children = childrenFn(parent);\n if (children) {\n const count = children.length;\n for (let i = 0; i < count; i++) {\n visit(children[i], visitFn, childrenFn);\n }\n }\n}\n\nfunction getNode(tree: Node, key: string): Node | null {\n let node = null;\n\n visit(\n tree,\n (d) => {\n if (d.name === key) {\n node = d;\n }\n },\n (d) => d.children,\n );\n\n return node;\n}\n\nexport function map2tree(\n root: unknown,\n options: { key?: string; pushMethod?: 'push' | 'unshift' } = {},\n tree: Node = { name: options.key || 'state', children: [] },\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n): Node | {} {\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n if (!isPlainObject(root) && root && !(root as { toJS: () => {} }).toJS) {\n return {};\n }\n\n const { key: rootNodeKey = 'state', pushMethod = 'push' } = options;\n const currentNode = getNode(tree, rootNodeKey);\n\n if (currentNode === null) {\n return {};\n }\n\n mapValues(\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n root && (root as { toJS: () => {} }).toJS\n ? // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n (root as { toJS: () => {} }).toJS()\n : // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n (root as {}),\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n (maybeImmutable: { toJS?: () => {} }, key) => {\n const value =\n maybeImmutable && maybeImmutable.toJS\n ? maybeImmutable.toJS()\n : maybeImmutable;\n const newNode: Node = { name: key };\n\n if (isArray(value)) {\n newNode.children = [];\n\n for (let i = 0; i < value.length; i++) {\n newNode.children[pushMethod]({\n name: `${key}[${i}]`,\n [isPlainObject(value[i]) ? 'object' : 'value']: value[i],\n });\n }\n } else if (isPlainObject(value)) {\n newNode.children = [];\n } else {\n newNode.value = value;\n }\n\n currentNode.children![pushMethod](newNode);\n\n map2tree(value, { key, pushMethod }, tree);\n },\n );\n\n return tree;\n}\n" }, { "path": "packages/map2tree/test/map2tree.spec.ts", "content": "import { map2tree, Node } from '../src/index.js';\nimport * as immutable from 'immutable';\n\ntest('# rootNodeKey', () => {\n const map = {};\n const options = { key: 'foo' };\n\n expect((map2tree(map, options) as Node).name).toBe('foo');\n});\n\ndescribe('# shallow map', () => {\n test('## null', () => {\n const map = {\n a: null,\n };\n\n const expected = {\n name: 'state',\n children: [{ name: 'a', value: null }],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n\n test('## value', () => {\n const map = {\n a: 'foo',\n b: 'bar',\n };\n\n const expected = {\n name: 'state',\n children: [\n { name: 'a', value: 'foo' },\n { name: 'b', value: 'bar' },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n\n test('## object', () => {\n const map = {\n a: { aa: 'foo' },\n };\n\n const expected = {\n name: 'state',\n children: [{ name: 'a', children: [{ name: 'aa', value: 'foo' }] }],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n\n test('## immutable Map', () => {\n const map = {\n a: immutable.fromJS({ aa: 'foo', ab: 'bar' }),\n };\n\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [\n { name: 'aa', value: 'foo' },\n { name: 'ab', value: 'bar' },\n ],\n },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n });\n});\n\ndescribe('# deep map', () => {\n test('## null', () => {\n const map = {\n a: { aa: null },\n };\n\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [\n {\n name: 'aa',\n value: null,\n },\n ],\n },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n\n test('## object', () => {\n const map = {\n a: { aa: { aaa: 'foo' } },\n };\n\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [\n {\n name: 'aa',\n children: [{ name: 'aaa', value: 'foo' }],\n },\n ],\n },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n});\n\ndescribe('# array map', () => {\n const map = {\n a: [1, 2],\n };\n\n test('## push', () => {\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [\n { name: 'a[0]', value: 1 },\n { name: 'a[1]', value: 2 },\n ],\n },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n\n test('## unshift', () => {\n const options = { pushMethod: 'unshift' as const };\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [\n { name: 'a[1]', value: 2 },\n { name: 'a[0]', value: 1 },\n ],\n },\n ],\n };\n\n expect(map2tree(map, options)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map), options)).toEqual(expected);\n });\n\n test('## null', () => {\n const map = {\n a: [null],\n };\n\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [{ name: 'a[0]', value: null }],\n },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n});\n\ndescribe('# collection map', () => {\n test('## value', () => {\n const map = {\n a: [{ aa: 1 }, { aa: 2 }],\n };\n\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [\n { name: 'a[0]', object: { aa: 1 } },\n { name: 'a[1]', object: { aa: 2 } },\n ],\n },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n\n test('## object', () => {\n const map = {\n a: [{ aa: { aaa: 'foo' } }],\n };\n\n const expected = {\n name: 'state',\n children: [\n {\n name: 'a',\n children: [{ name: 'a[0]', object: { aa: { aaa: 'foo' } } }],\n },\n ],\n };\n\n expect(map2tree(map)).toEqual(expected);\n expect(map2tree(immutable.fromJS(map))).toEqual(expected);\n });\n});\n" }, { "path": "packages/map2tree/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/map2tree/tsconfig.test.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\"]\n },\n \"include\": [\"src\", \"test\"]\n}\n" }, { "path": "packages/react-base16-styling/CHANGELOG.md", "content": "# Change Log\n\n## 0.10.0\n\n### Minor Changes\n\n- bbb1a40: Convert React packages to ESM\n\n## 0.9.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997).\n\n## [0.8.0](https://github.com/reduxjs/redux-devtools/compare/react-base16-styling@0.7.0...react-base16-styling@0.8.0) (2020-09-07)\n\n### Bug Fixes\n\n- **react-base16-styling:** fix Styling type ([#602](https://github.com/reduxjs/redux-devtools/issues/602)) ([e7304b5](https://github.com/reduxjs/redux-devtools/commit/e7304b5853a572b53429809ed8ac4b7a198c90f8))\n\n### Features\n\n- **redux-devtools-inspector:** convert to TypeScript ([#623](https://github.com/reduxjs/redux-devtools/issues/623)) ([c7b0c7a](https://github.com/reduxjs/redux-devtools/commit/c7b0c7aa6e09f46a36b382ae3ec8e38bd48aeb28))\n- **redux-devtools-serialize:** convert to TypeScript ([#621](https://github.com/reduxjs/redux-devtools/issues/621)) ([d586f19](https://github.com/reduxjs/redux-devtools/commit/d586f1955a3648883107f8c981ee17eeb4c013a3))\n\n## 0.7.0 (2020-08-14)\n\n- feat(react-base16-styling)!: add invertTheme helper (#565) ([92d16e4](https://github.com/reduxjs/redux-devtools/commit/92d16e4f56fbeaf06966afd9024ed4b58ba98ecb)), closes [#565](https://github.com/reduxjs/redux-devtools/issues/565)\n\n### BREAKING CHANGES\n\n- rename previous invertTheme to invertBase16Theme\n" }, { "path": "packages/react-base16-styling/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2016 Alexander Kuznetsov\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.\n" }, { "path": "packages/react-base16-styling/README.md", "content": "# react-base16-styling [![Latest Stable Version](https://img.shields.io/npm/v/react-base16-styling.svg)](https://www.npmjs.com/package/react-base16-styling)\n\nReact styling with base16 color scheme support\n\nInspired by [react-themeable](https://github.com/markdalgleish/react-themeable), this utility provides flexible theming for your component with [base16](https://github.com/chriskempson/base16) theme support.\n\n## Install\n\n```\nyarn add react-base16-styling\n```\n\n## Usage\n\n```jsx\nimport { createStyling } from 'react-base16-styling';\nimport base16Themes from './base16Themes';\n\nfunction getStylingFromBase16(base16Theme) {\n return {\n myComponent: {\n backgroundColor: base16Theme.base00,\n },\n\n myComponentToggleColor({ style, className }, clickCount) {\n return {\n style: {\n ...style,\n backgroundColor: clickCount % 2 ? 'red' : 'blue',\n },\n };\n },\n };\n}\n\nconst createStylingFromTheme = createStyling(getStylingFromBase16, {\n defaultBase16: base16Themes.solarized,\n base16Themes,\n});\n\nclass MyComponent extends Component {\n state = { clickCount: 0 };\n render() {\n const { theme } = this.props;\n const { clickCount } = this.state;\n\n const styling = createStylingFromTheme(theme);\n\n return (\n \n );\n }\n}\n```\n\n## `createStyling`\n\n```js\nfunction(getStylingFromBase16, defaultStylingOptions, themeOrStyling)\n```\n\n| Argument | Signature | Description |\n| ----------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `getStylingFromBase16` | `function(base16Theme)` | creates object with default stylings for your component, using provided base16 theme. |\n| `defaultStylingOptions` | `{ defaultBase16, base16Themes }` | optional parameters, allow to set default `base16` theme and additional `base16` themes for component. |\n| `themeOrStyling` | `string` or `object` | `base16` theme name, `base16` theme object or styling object. Theme name can have a modifier: `\"themeName:inverted\"` to invert theme colors (see [[#invertTheme]]) |\n\nStyling object values could be: - objects (treated as style definitions) - strings (class names) - functions (they may be provided with additional parameters and should return object { style, className })\n\n## `getBase16Theme`\n\n```js\nfunction(themeOrStyling, base16Themes)\n```\n\nHelper method that returns `base16` theme object if `themeOrStyling` is `base16` theme name or theme object.\n\n## `invertBase16Theme`\n\n```js\nfunction(base16Theme)\n```\n\nHelper method that inverts `base16` theme colors, creating light theme out of dark one or vice versa.\n\n## `invertTheme`\n\n```js\nfunction(theme)\n```\n\nHelper method that inverts a theme or styling object to be passed into the `themeOrStyling` parameter of [createStyling](#createstyling).\n" }, { "path": "packages/react-base16-styling/eslint.config.js", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTs from '../../eslint.ts.config.base.mjs';\nimport eslintTsJest from '../../eslint.ts.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTsJest(import.meta.dirname),\n {\n ignores: ['jest.config.ts', 'lib'],\n },\n];\n" }, { "path": "packages/react-base16-styling/jest.config.ts", "content": "import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createDefaultEsmPreset({\n tsconfig: 'tsconfig.test.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "packages/react-base16-styling/package.json", "content": "{\n \"name\": \"react-base16-styling\",\n \"version\": \"0.10.0\",\n \"description\": \"React styling with base16 color scheme support\",\n \"keywords\": [\n \"react\",\n \"theme\",\n \"base16\",\n \"styling\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/react-base16-styling\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Alexander (http://kuzya.org/)\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run lint && pnpm run test\"\n },\n \"dependencies\": {\n \"@types/lodash\": \"^4.17.24\",\n \"color\": \"^5.0.3\",\n \"csstype\": \"^3.2.3\",\n \"lodash-es\": \"^4.17.23\"\n },\n \"devDependencies\": {\n \"@types/color\": \"^4.2.0\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/lodash-es\": \"^4.17.12\",\n \"jest\": \"^30.3.0\",\n \"jest-environment-jsdom\": \"^30.3.0\",\n \"rimraf\": \"^6.1.3\",\n \"ts-jest\": \"^29.4.6\",\n \"typescript\": \"~5.9.3\"\n }\n}\n" }, { "path": "packages/react-base16-styling/src/colorConverters.ts", "content": "export type Color = [number, number, number];\n\nexport function yuv2rgb(yuv: Color): Color {\n const y = yuv[0],\n u = yuv[1],\n v = yuv[2];\n let r, g, b;\n\n r = y * 1 + u * 0 + v * 1.13983;\n g = y * 1 + u * -0.39465 + v * -0.5806;\n b = y * 1 + u * 2.02311 + v * 0;\n\n r = Math.min(Math.max(0, r), 1);\n g = Math.min(Math.max(0, g), 1);\n b = Math.min(Math.max(0, b), 1);\n\n return [r * 255, g * 255, b * 255];\n}\n\nexport function rgb2yuv(rgb: Color): Color {\n const r = rgb[0] / 255,\n g = rgb[1] / 255,\n b = rgb[2] / 255;\n\n const y = r * 0.299 + g * 0.587 + b * 0.114;\n const u = r * -0.14713 + g * -0.28886 + b * 0.436;\n const v = r * 0.615 + g * -0.51499 + b * -0.10001;\n\n return [y, u, v];\n}\n" }, { "path": "packages/react-base16-styling/src/index.ts", "content": "import Color from 'color';\nimport * as CSS from 'csstype';\nimport { curry } from 'lodash-es';\nimport type { CurriedFunction3 } from 'lodash';\nimport { Color as ColorTuple, yuv2rgb, rgb2yuv } from './colorConverters.js';\nimport {\n Styling,\n StylingConfig,\n StylingFunction,\n StylingValue,\n StylingValueFunction,\n Theme,\n} from './types.js';\nimport { base16Themes as base16 } from './themes/index.js';\nimport type { Base16Theme } from './themes/index.js';\n\nconst DEFAULT_BASE16 = base16.default;\n\nconst BASE16_KEYS = Object.keys(DEFAULT_BASE16);\n\n// we need a correcting factor, so that a dark, but not black background color\n// converts to bright enough inversed color\nconst flip = (x: number) => (x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x);\n\nconst invertColor = (hexString: string) => {\n const color = Color(hexString);\n const [y, u, v] = rgb2yuv(color.array() as ColorTuple);\n const flippedYuv: ColorTuple = [flip(y), u, v];\n const rgb = yuv2rgb(flippedYuv);\n return Color.rgb(rgb).hex();\n};\n\nconst merger = (styling: Partial) => {\n return (prevStyling: Partial) => ({\n className: [prevStyling.className, styling.className]\n .filter(Boolean)\n .join(' '),\n style: { ...(prevStyling.style || {}), ...(styling.style || {}) },\n });\n};\n\nconst mergeStyling = (\n customStyling: StylingValue,\n defaultStyling: StylingValue,\n): StylingValue | undefined => {\n if (customStyling === undefined) {\n return defaultStyling;\n }\n if (defaultStyling === undefined) {\n return customStyling;\n }\n\n const customType = typeof customStyling;\n const defaultType = typeof defaultStyling;\n\n switch (customType) {\n case 'string':\n switch (defaultType) {\n case 'string':\n return [defaultStyling, customStyling].filter(Boolean).join(' ');\n case 'object':\n return merger({\n className: customStyling as string,\n style: defaultStyling as CSS.Properties,\n });\n case 'function':\n return (styling: Styling, ...args: unknown[]) =>\n merger({\n className: customStyling as string,\n })((defaultStyling as StylingValueFunction)(styling, ...args));\n }\n break;\n case 'object':\n switch (defaultType) {\n case 'string':\n return merger({\n className: defaultStyling as string,\n style: customStyling as CSS.Properties,\n });\n case 'object':\n return {\n ...(defaultStyling as CSS.Properties),\n ...(customStyling as CSS.Properties),\n };\n case 'function':\n return (styling: Styling, ...args: unknown[]) =>\n merger({\n style: customStyling as CSS.Properties,\n })((defaultStyling as StylingValueFunction)(styling, ...args));\n }\n break;\n case 'function':\n switch (defaultType) {\n case 'string':\n return (styling, ...args) =>\n (customStyling as StylingValueFunction)(\n merger(styling)({\n className: defaultStyling as string,\n }),\n ...args,\n );\n case 'object':\n return (styling, ...args) =>\n (customStyling as StylingValueFunction)(\n merger(styling)({\n style: defaultStyling as CSS.Properties,\n }),\n ...args,\n );\n case 'function':\n return (styling, ...args) =>\n (customStyling as StylingValueFunction)(\n (defaultStyling as StylingValueFunction)(\n styling,\n ...args,\n ) as Styling,\n ...args,\n );\n }\n }\n};\n\nconst mergeStylings = (\n customStylings: StylingConfig,\n defaultStylings: StylingConfig,\n): StylingConfig => {\n const keys = Object.keys(defaultStylings);\n for (const key in customStylings) {\n if (!keys.includes(key)) keys.push(key);\n }\n\n return keys.reduce(\n (mergedStyling, key) => (\n (mergedStyling[key as keyof StylingConfig] = mergeStyling(\n customStylings[key] as StylingValue,\n defaultStylings[key] as StylingValue,\n ) as StylingValue),\n mergedStyling\n ),\n {} as StylingConfig,\n );\n};\n\nconst getStylingByKeys = (\n mergedStyling: StylingConfig,\n keys: (string | false | undefined) | (string | false | undefined)[],\n ...args: unknown[]\n): Styling => {\n if (keys === null) {\n return mergedStyling as unknown as Styling;\n }\n\n if (!Array.isArray(keys)) {\n keys = [keys];\n }\n\n const styles = keys\n .map((key) => mergedStyling[key as string])\n .filter(Boolean);\n\n const props = styles.reduce(\n (obj, s) => {\n if (typeof s === 'string') {\n obj.className = [obj.className, s].filter(Boolean).join(' ');\n } else if (typeof s === 'object') {\n obj.style = { ...obj.style, ...s };\n } else if (typeof s === 'function') {\n obj = { ...obj, ...s(obj, ...args) };\n }\n\n return obj;\n },\n { className: '', style: {} },\n );\n\n if (!props.className) {\n delete props.className;\n }\n\n if (Object.keys(props.style!).length === 0) {\n delete props.style;\n }\n\n return props;\n};\n\nexport const invertBase16Theme = (base16Theme: Base16Theme): Base16Theme =>\n Object.keys(base16Theme).reduce(\n (t, key) => (\n (t[key as keyof Base16Theme] = /^base/.test(key)\n ? invertColor(base16Theme[key as keyof Base16Theme])\n : key === 'scheme'\n ? base16Theme[key] + ':inverted'\n : base16Theme[key as keyof Base16Theme]),\n t\n ),\n {} as Base16Theme,\n );\n\ninterface Options {\n defaultBase16?: Base16Theme;\n base16Themes?: { [themeName: string]: Base16Theme };\n}\n\nexport const createStyling: CurriedFunction3<\n (base16Theme: Base16Theme) => StylingConfig,\n Options | undefined,\n Theme | undefined,\n StylingFunction\n> = curry<\n (base16Theme: Base16Theme) => StylingConfig,\n Options | undefined,\n Theme | undefined,\n StylingFunction\n>(\n (\n getStylingFromBase16: (base16Theme: Base16Theme) => StylingConfig,\n options: Options = {},\n themeOrStyling: Theme = {},\n ...args\n ): StylingFunction => {\n const { defaultBase16 = DEFAULT_BASE16, base16Themes = null } = options;\n\n const base16Theme = getBase16Theme(themeOrStyling, base16Themes);\n if (base16Theme) {\n themeOrStyling = {\n ...base16Theme,\n ...(themeOrStyling as Base16Theme | StylingConfig),\n };\n }\n\n const theme = BASE16_KEYS.reduce(\n (t, key) => (\n (t[key as keyof Base16Theme] =\n (themeOrStyling as Base16Theme)[key as keyof Base16Theme] ||\n defaultBase16[key as keyof Base16Theme]),\n t\n ),\n {} as Base16Theme,\n );\n\n const customStyling = Object.keys(themeOrStyling).reduce(\n (s, key) =>\n !BASE16_KEYS.includes(key)\n ? ((s[key] = (themeOrStyling as StylingConfig)[key]), s)\n : s,\n {} as StylingConfig,\n );\n\n const defaultStyling = getStylingFromBase16(theme);\n\n const mergedStyling = mergeStylings(customStyling, defaultStyling);\n\n return curry(getStylingByKeys, 2)(mergedStyling, ...args);\n },\n 3,\n);\n\nconst isStylingConfig = (theme: Theme): theme is StylingConfig =>\n !!(theme as StylingConfig).extend;\n\nexport const getBase16Theme = (\n theme: Theme,\n base16Themes?: { [themeName: string]: Base16Theme } | null,\n): Base16Theme | undefined => {\n if (theme && isStylingConfig(theme) && theme.extend) {\n theme = theme.extend as string | Base16Theme;\n }\n\n if (typeof theme === 'string') {\n const [themeName, modifier] = theme.split(':');\n if (base16Themes) {\n theme = base16Themes[themeName];\n } else {\n theme = base16[themeName as keyof typeof base16] as Base16Theme;\n }\n if (modifier === 'inverted') {\n theme = invertBase16Theme(theme);\n }\n }\n\n return theme && Object.prototype.hasOwnProperty.call(theme, 'base00')\n ? (theme as Base16Theme)\n : undefined;\n};\n\nexport const invertTheme = (theme: Theme | undefined): Theme | undefined => {\n if (typeof theme === 'string') {\n return `${theme}:inverted`;\n }\n\n if (theme && isStylingConfig(theme) && theme.extend) {\n if (typeof theme.extend === 'string') {\n return { ...theme, extend: `${theme.extend}:inverted` };\n }\n\n return {\n ...theme,\n extend: invertBase16Theme(theme.extend as Base16Theme),\n };\n }\n\n if (theme) {\n return invertBase16Theme(theme as Base16Theme);\n }\n\n return theme;\n};\n\nexport type { Base16Theme };\nexport { base16 as base16Themes };\nexport * from './types.js';\n" }, { "path": "packages/react-base16-styling/src/themes/apathy.ts", "content": "export default {\n scheme: 'apathy',\n author: 'jannik siebert (https://github.com/janniks)',\n base00: '#031A16',\n base01: '#0B342D',\n base02: '#184E45',\n base03: '#2B685E',\n base04: '#5F9C92',\n base05: '#81B5AC',\n base06: '#A7CEC8',\n base07: '#D2E7E4',\n base08: '#3E9688',\n base09: '#3E7996',\n base0A: '#3E4C96',\n base0B: '#883E96',\n base0C: '#963E4C',\n base0D: '#96883E',\n base0E: '#4C963E',\n base0F: '#3E965B',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/ashes.ts", "content": "export default {\n scheme: 'ashes',\n author: 'jannik siebert (https://github.com/janniks)',\n base00: '#1C2023',\n base01: '#393F45',\n base02: '#565E65',\n base03: '#747C84',\n base04: '#ADB3BA',\n base05: '#C7CCD1',\n base06: '#DFE2E5',\n base07: '#F3F4F5',\n base08: '#C7AE95',\n base09: '#C7C795',\n base0A: '#AEC795',\n base0B: '#95C7AE',\n base0C: '#95AEC7',\n base0D: '#AE95C7',\n base0E: '#C795AE',\n base0F: '#C79595',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/atelier-dune.ts", "content": "export default {\n scheme: 'atelier dune',\n author:\n 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)',\n base00: '#20201d',\n base01: '#292824',\n base02: '#6e6b5e',\n base03: '#7d7a68',\n base04: '#999580',\n base05: '#a6a28c',\n base06: '#e8e4cf',\n base07: '#fefbec',\n base08: '#d73737',\n base09: '#b65611',\n base0A: '#cfb017',\n base0B: '#60ac39',\n base0C: '#1fad83',\n base0D: '#6684e1',\n base0E: '#b854d4',\n base0F: '#d43552',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/atelier-forest.ts", "content": "export default {\n scheme: 'atelier forest',\n author:\n 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest)',\n base00: '#1b1918',\n base01: '#2c2421',\n base02: '#68615e',\n base03: '#766e6b',\n base04: '#9c9491',\n base05: '#a8a19f',\n base06: '#e6e2e0',\n base07: '#f1efee',\n base08: '#f22c40',\n base09: '#df5320',\n base0A: '#d5911a',\n base0B: '#5ab738',\n base0C: '#00ad9c',\n base0D: '#407ee7',\n base0E: '#6666ea',\n base0F: '#c33ff3',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/atelier-heath.ts", "content": "export default {\n scheme: 'atelier heath',\n author:\n 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath)',\n base00: '#1b181b',\n base01: '#292329',\n base02: '#695d69',\n base03: '#776977',\n base04: '#9e8f9e',\n base05: '#ab9bab',\n base06: '#d8cad8',\n base07: '#f7f3f7',\n base08: '#ca402b',\n base09: '#a65926',\n base0A: '#bb8a35',\n base0B: '#379a37',\n base0C: '#159393',\n base0D: '#516aec',\n base0E: '#7b59c0',\n base0F: '#cc33cc',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/atelier-lakeside.ts", "content": "export default {\n scheme: 'atelier lakeside',\n author:\n 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/)',\n base00: '#161b1d',\n base01: '#1f292e',\n base02: '#516d7b',\n base03: '#5a7b8c',\n base04: '#7195a8',\n base05: '#7ea2b4',\n base06: '#c1e4f6',\n base07: '#ebf8ff',\n base08: '#d22d72',\n base09: '#935c25',\n base0A: '#8a8a0f',\n base0B: '#568c3b',\n base0C: '#2d8f6f',\n base0D: '#257fad',\n base0E: '#5d5db1',\n base0F: '#b72dd2',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/atelier-seaside.ts", "content": "export default {\n scheme: 'atelier seaside',\n author:\n 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/)',\n base00: '#131513',\n base01: '#242924',\n base02: '#5e6e5e',\n base03: '#687d68',\n base04: '#809980',\n base05: '#8ca68c',\n base06: '#cfe8cf',\n base07: '#f0fff0',\n base08: '#e6193c',\n base09: '#87711d',\n base0A: '#c3c322',\n base0B: '#29a329',\n base0C: '#1999b3',\n base0D: '#3d62f5',\n base0E: '#ad2bee',\n base0F: '#e619c3',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/bespin.ts", "content": "export default {\n scheme: 'bespin',\n author: 'jan t. sott',\n base00: '#28211c',\n base01: '#36312e',\n base02: '#5e5d5c',\n base03: '#666666',\n base04: '#797977',\n base05: '#8a8986',\n base06: '#9d9b97',\n base07: '#baae9e',\n base08: '#cf6a4c',\n base09: '#cf7d34',\n base0A: '#f9ee98',\n base0B: '#54be0d',\n base0C: '#afc4db',\n base0D: '#5ea6ea',\n base0E: '#9b859d',\n base0F: '#937121',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/brewer.ts", "content": "export default {\n scheme: 'brewer',\n author: 'timothée poisot (http://github.com/tpoisot)',\n base00: '#0c0d0e',\n base01: '#2e2f30',\n base02: '#515253',\n base03: '#737475',\n base04: '#959697',\n base05: '#b7b8b9',\n base06: '#dadbdc',\n base07: '#fcfdfe',\n base08: '#e31a1c',\n base09: '#e6550d',\n base0A: '#dca060',\n base0B: '#31a354',\n base0C: '#80b1d3',\n base0D: '#3182bd',\n base0E: '#756bb1',\n base0F: '#b15928',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/bright.ts", "content": "export default {\n scheme: 'bright',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#000000',\n base01: '#303030',\n base02: '#505050',\n base03: '#b0b0b0',\n base04: '#d0d0d0',\n base05: '#e0e0e0',\n base06: '#f5f5f5',\n base07: '#ffffff',\n base08: '#fb0120',\n base09: '#fc6d24',\n base0A: '#fda331',\n base0B: '#a1c659',\n base0C: '#76c7b7',\n base0D: '#6fb3d2',\n base0E: '#d381c3',\n base0F: '#be643c',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/chalk.ts", "content": "export default {\n scheme: 'chalk',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#151515',\n base01: '#202020',\n base02: '#303030',\n base03: '#505050',\n base04: '#b0b0b0',\n base05: '#d0d0d0',\n base06: '#e0e0e0',\n base07: '#f5f5f5',\n base08: '#fb9fb1',\n base09: '#eda987',\n base0A: '#ddb26f',\n base0B: '#acc267',\n base0C: '#12cfc0',\n base0D: '#6fc2ef',\n base0E: '#e1a3ee',\n base0F: '#deaf8f',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/codeschool.ts", "content": "export default {\n scheme: 'codeschool',\n author: 'brettof86',\n base00: '#232c31',\n base01: '#1c3657',\n base02: '#2a343a',\n base03: '#3f4944',\n base04: '#84898c',\n base05: '#9ea7a6',\n base06: '#a7cfa3',\n base07: '#b5d8f6',\n base08: '#2a5491',\n base09: '#43820d',\n base0A: '#a03b1e',\n base0B: '#237986',\n base0C: '#b02f30',\n base0D: '#484d79',\n base0E: '#c59820',\n base0F: '#c98344',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/colors.ts", "content": "export default {\n scheme: 'colors',\n author: 'mrmrs (http://clrs.cc)',\n base00: '#111111',\n base01: '#333333',\n base02: '#555555',\n base03: '#777777',\n base04: '#999999',\n base05: '#bbbbbb',\n base06: '#dddddd',\n base07: '#ffffff',\n base08: '#ff4136',\n base09: '#ff851b',\n base0A: '#ffdc00',\n base0B: '#2ecc40',\n base0C: '#7fdbff',\n base0D: '#0074d9',\n base0E: '#b10dc9',\n base0F: '#85144b',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/default.ts", "content": "export default {\n scheme: 'default',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#181818',\n base01: '#282828',\n base02: '#383838',\n base03: '#585858',\n base04: '#b8b8b8',\n base05: '#d8d8d8',\n base06: '#e8e8e8',\n base07: '#f8f8f8',\n base08: '#ab4642',\n base09: '#dc9656',\n base0A: '#f7ca88',\n base0B: '#a1b56c',\n base0C: '#86c1b9',\n base0D: '#7cafc2',\n base0E: '#ba8baf',\n base0F: '#a16946',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/eighties.ts", "content": "export default {\n scheme: 'eighties',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#2d2d2d',\n base01: '#393939',\n base02: '#515151',\n base03: '#747369',\n base04: '#a09f93',\n base05: '#d3d0c8',\n base06: '#e8e6df',\n base07: '#f2f0ec',\n base08: '#f2777a',\n base09: '#f99157',\n base0A: '#ffcc66',\n base0B: '#99cc99',\n base0C: '#66cccc',\n base0D: '#6699cc',\n base0E: '#cc99cc',\n base0F: '#d27b53',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/embers.ts", "content": "export default {\n scheme: 'embers',\n author: 'jannik siebert (https://github.com/janniks)',\n base00: '#16130F',\n base01: '#2C2620',\n base02: '#433B32',\n base03: '#5A5047',\n base04: '#8A8075',\n base05: '#A39A90',\n base06: '#BEB6AE',\n base07: '#DBD6D1',\n base08: '#826D57',\n base09: '#828257',\n base0A: '#6D8257',\n base0B: '#57826D',\n base0C: '#576D82',\n base0D: '#6D5782',\n base0E: '#82576D',\n base0F: '#825757',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/flat.ts", "content": "export default {\n scheme: 'flat',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#2C3E50',\n base01: '#34495E',\n base02: '#7F8C8D',\n base03: '#95A5A6',\n base04: '#BDC3C7',\n base05: '#e0e0e0',\n base06: '#f5f5f5',\n base07: '#ECF0F1',\n base08: '#E74C3C',\n base09: '#E67E22',\n base0A: '#F1C40F',\n base0B: '#2ECC71',\n base0C: '#1ABC9C',\n base0D: '#3498DB',\n base0E: '#9B59B6',\n base0F: '#be643c',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/google.ts", "content": "export default {\n scheme: 'google',\n author: 'seth wright (http://sethawright.com)',\n base00: '#1d1f21',\n base01: '#282a2e',\n base02: '#373b41',\n base03: '#969896',\n base04: '#b4b7b4',\n base05: '#c5c8c6',\n base06: '#e0e0e0',\n base07: '#ffffff',\n base08: '#CC342B',\n base09: '#F96A38',\n base0A: '#FBA922',\n base0B: '#198844',\n base0C: '#3971ED',\n base0D: '#3971ED',\n base0E: '#A36AC7',\n base0F: '#3971ED',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/grayscale.ts", "content": "export default {\n scheme: 'grayscale',\n author: 'alexandre gavioli (https://github.com/alexx2/)',\n base00: '#101010',\n base01: '#252525',\n base02: '#464646',\n base03: '#525252',\n base04: '#ababab',\n base05: '#b9b9b9',\n base06: '#e3e3e3',\n base07: '#f7f7f7',\n base08: '#7c7c7c',\n base09: '#999999',\n base0A: '#a0a0a0',\n base0B: '#8e8e8e',\n base0C: '#868686',\n base0D: '#686868',\n base0E: '#747474',\n base0F: '#5e5e5e',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/greenscreen.ts", "content": "export default {\n scheme: 'green screen',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#001100',\n base01: '#003300',\n base02: '#005500',\n base03: '#007700',\n base04: '#009900',\n base05: '#00bb00',\n base06: '#00dd00',\n base07: '#00ff00',\n base08: '#007700',\n base09: '#009900',\n base0A: '#007700',\n base0B: '#00bb00',\n base0C: '#005500',\n base0D: '#009900',\n base0E: '#00bb00',\n base0F: '#005500',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/harmonic.ts", "content": "export default {\n scheme: 'harmonic16',\n author: 'jannik siebert (https://github.com/janniks)',\n base00: '#0b1c2c',\n base01: '#223b54',\n base02: '#405c79',\n base03: '#627e99',\n base04: '#aabcce',\n base05: '#cbd6e2',\n base06: '#e5ebf1',\n base07: '#f7f9fb',\n base08: '#bf8b56',\n base09: '#bfbf56',\n base0A: '#8bbf56',\n base0B: '#56bf8b',\n base0C: '#568bbf',\n base0D: '#8b56bf',\n base0E: '#bf568b',\n base0F: '#bf5656',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/hopscotch.ts", "content": "export default {\n scheme: 'hopscotch',\n author: 'jan t. sott',\n base00: '#322931',\n base01: '#433b42',\n base02: '#5c545b',\n base03: '#797379',\n base04: '#989498',\n base05: '#b9b5b8',\n base06: '#d5d3d5',\n base07: '#ffffff',\n base08: '#dd464c',\n base09: '#fd8b19',\n base0A: '#fdcc59',\n base0B: '#8fc13e',\n base0C: '#149b93',\n base0D: '#1290bf',\n base0E: '#c85e7c',\n base0F: '#b33508',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/index.ts", "content": "import { default as threezerotwofour } from './threezerotwofour.js';\nimport { default as apathy } from './apathy.js';\nimport { default as ashes } from './ashes.js';\nimport { default as atelierDune } from './atelier-dune.js';\nimport { default as atelierForest } from './atelier-forest.js';\nimport { default as atelierHeath } from './atelier-heath.js';\nimport { default as atelierLakeside } from './atelier-lakeside.js';\nimport { default as atelierSeaside } from './atelier-seaside.js';\nimport { default as bespin } from './bespin.js';\nimport { default as brewer } from './brewer.js';\nimport { default as bright } from './bright.js';\nimport { default as chalk } from './chalk.js';\nimport { default as codeschool } from './codeschool.js';\nimport { default as colors } from './colors.js';\nimport { default as defaultTheme } from './default.js';\nimport { default as eighties } from './eighties.js';\nimport { default as embers } from './embers.js';\nimport { default as flat } from './flat.js';\nimport { default as google } from './google.js';\nimport { default as grayscale } from './grayscale.js';\nimport { default as greenscreen } from './greenscreen.js';\nimport { default as harmonic } from './harmonic.js';\nimport { default as hopscotch } from './hopscotch.js';\nimport { default as isotope } from './isotope.js';\nimport { default as marrakesh } from './marrakesh.js';\nimport { default as mocha } from './mocha.js';\nimport { default as monokai } from './monokai.js';\nimport { default as nicinabox } from './nicinabox.js';\nimport { default as ocean } from './ocean.js';\nimport { default as paraiso } from './paraiso.js';\nimport { default as pop } from './pop.js';\nimport { default as railscasts } from './railscasts.js';\nimport { default as shapeshifter } from './shapeshifter.js';\nimport { default as solarized } from './solarized.js';\nimport { default as summerfruit } from './summerfruit.js';\nimport { default as tomorrow } from './tomorrow.js';\nimport { default as tube } from './tube.js';\nimport { default as twilight } from './twilight.js';\n\nexport interface Base16Theme {\n scheme: string;\n author: string;\n base00: string;\n base01: string;\n base02: string;\n base03: string;\n base04: string;\n base05: string;\n base06: string;\n base07: string;\n base08: string;\n base09: string;\n base0A: string;\n base0B: string;\n base0C: string;\n base0D: string;\n base0E: string;\n base0F: string;\n}\n\nexport const base16Themes = {\n threezerotwofour,\n apathy,\n ashes,\n atelierDune,\n atelierForest,\n atelierHeath,\n atelierLakeside,\n atelierSeaside,\n bespin,\n brewer,\n bright,\n chalk,\n codeschool,\n colors,\n default: defaultTheme,\n eighties,\n embers,\n flat,\n google,\n grayscale,\n greenscreen,\n harmonic,\n hopscotch,\n isotope,\n marrakesh,\n mocha,\n monokai,\n nicinabox,\n ocean,\n paraiso,\n pop,\n railscasts,\n shapeshifter,\n solarized,\n summerfruit,\n tomorrow,\n tube,\n twilight,\n};\n" }, { "path": "packages/react-base16-styling/src/themes/isotope.ts", "content": "export default {\n scheme: 'isotope',\n author: 'jan t. sott',\n base00: '#000000',\n base01: '#404040',\n base02: '#606060',\n base03: '#808080',\n base04: '#c0c0c0',\n base05: '#d0d0d0',\n base06: '#e0e0e0',\n base07: '#ffffff',\n base08: '#ff0000',\n base09: '#ff9900',\n base0A: '#ff0099',\n base0B: '#33ff00',\n base0C: '#00ffff',\n base0D: '#0066ff',\n base0E: '#cc00ff',\n base0F: '#3300ff',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/marrakesh.ts", "content": "export default {\n scheme: 'marrakesh',\n author: 'alexandre gavioli (http://github.com/alexx2/)',\n base00: '#201602',\n base01: '#302e00',\n base02: '#5f5b17',\n base03: '#6c6823',\n base04: '#86813b',\n base05: '#948e48',\n base06: '#ccc37a',\n base07: '#faf0a5',\n base08: '#c35359',\n base09: '#b36144',\n base0A: '#a88339',\n base0B: '#18974e',\n base0C: '#75a738',\n base0D: '#477ca1',\n base0E: '#8868b3',\n base0F: '#b3588e',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/mocha.ts", "content": "export default {\n scheme: 'mocha',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#3B3228',\n base01: '#534636',\n base02: '#645240',\n base03: '#7e705a',\n base04: '#b8afad',\n base05: '#d0c8c6',\n base06: '#e9e1dd',\n base07: '#f5eeeb',\n base08: '#cb6077',\n base09: '#d28b71',\n base0A: '#f4bc87',\n base0B: '#beb55b',\n base0C: '#7bbda4',\n base0D: '#8ab3b5',\n base0E: '#a89bb9',\n base0F: '#bb9584',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/monokai.ts", "content": "export default {\n scheme: 'monokai',\n author: 'wimer hazenberg (http://www.monokai.nl)',\n base00: '#272822',\n base01: '#383830',\n base02: '#49483e',\n base03: '#75715e',\n base04: '#a59f85',\n base05: '#f8f8f2',\n base06: '#f5f4f1',\n base07: '#f9f8f5',\n base08: '#f92672',\n base09: '#fd971f',\n base0A: '#f4bf75',\n base0B: '#a6e22e',\n base0C: '#a1efe4',\n base0D: '#66d9ef',\n base0E: '#ae81ff',\n base0F: '#cc6633',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/nicinabox.ts", "content": "export default {\n scheme: 'nicinabox',\n author: 'nicinabox (http://github.com/nicinabox)',\n base00: '#2A2F3A',\n base01: '#3C444F',\n base02: '#4F5A65',\n base03: '#BEBEBE',\n base04: '#b0b0b0', // based on ocean theme\n base05: '#d0d0d0', // based on ocean theme\n base06: '#FFFFFF',\n base07: '#f5f5f5', // based on ocean theme\n base08: '#fb9fb1', // based on ocean theme\n base09: '#FC6D24',\n base0A: '#ddb26f', // based on ocean theme\n base0B: '#A1C659',\n base0C: '#12cfc0', // based on ocean theme\n base0D: '#6FB3D2',\n base0E: '#D381C3',\n base0F: '#deaf8f', // based on ocean theme\n};\n" }, { "path": "packages/react-base16-styling/src/themes/ocean.ts", "content": "export default {\n scheme: 'ocean',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#2b303b',\n base01: '#343d46',\n base02: '#4f5b66',\n base03: '#65737e',\n base04: '#a7adba',\n base05: '#c0c5ce',\n base06: '#dfe1e8',\n base07: '#eff1f5',\n base08: '#bf616a',\n base09: '#d08770',\n base0A: '#ebcb8b',\n base0B: '#a3be8c',\n base0C: '#96b5b4',\n base0D: '#8fa1b3',\n base0E: '#b48ead',\n base0F: '#ab7967',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/paraiso.ts", "content": "export default {\n scheme: 'paraiso',\n author: 'jan t. sott',\n base00: '#2f1e2e',\n base01: '#41323f',\n base02: '#4f424c',\n base03: '#776e71',\n base04: '#8d8687',\n base05: '#a39e9b',\n base06: '#b9b6b0',\n base07: '#e7e9db',\n base08: '#ef6155',\n base09: '#f99b15',\n base0A: '#fec418',\n base0B: '#48b685',\n base0C: '#5bc4bf',\n base0D: '#06b6ef',\n base0E: '#815ba4',\n base0F: '#e96ba8',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/pop.ts", "content": "export default {\n scheme: 'pop',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#000000',\n base01: '#202020',\n base02: '#303030',\n base03: '#505050',\n base04: '#b0b0b0',\n base05: '#d0d0d0',\n base06: '#e0e0e0',\n base07: '#ffffff',\n base08: '#eb008a',\n base09: '#f29333',\n base0A: '#f8ca12',\n base0B: '#37b349',\n base0C: '#00aabb',\n base0D: '#0e5a94',\n base0E: '#b31e8d',\n base0F: '#7a2d00',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/railscasts.ts", "content": "export default {\n scheme: 'railscasts',\n author: 'ryan bates (http://railscasts.com)',\n base00: '#2b2b2b',\n base01: '#272935',\n base02: '#3a4055',\n base03: '#5a647e',\n base04: '#d4cfc9',\n base05: '#e6e1dc',\n base06: '#f4f1ed',\n base07: '#f9f7f3',\n base08: '#da4939',\n base09: '#cc7833',\n base0A: '#ffc66d',\n base0B: '#a5c261',\n base0C: '#519f50',\n base0D: '#6d9cbe',\n base0E: '#b6b3eb',\n base0F: '#bc9458',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/shapeshifter.ts", "content": "export default {\n scheme: 'shapeshifter',\n author: 'tyler benziger (http://tybenz.com)',\n base00: '#000000',\n base01: '#040404',\n base02: '#102015',\n base03: '#343434',\n base04: '#555555',\n base05: '#ababab',\n base06: '#e0e0e0',\n base07: '#f9f9f9',\n base08: '#e92f2f',\n base09: '#e09448',\n base0A: '#dddd13',\n base0B: '#0ed839',\n base0C: '#23edda',\n base0D: '#3b48e3',\n base0E: '#f996e2',\n base0F: '#69542d',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/solarized.ts", "content": "export default {\n scheme: 'solarized',\n author: 'ethan schoonover (http://ethanschoonover.com/solarized)',\n base00: '#002b36',\n base01: '#073642',\n base02: '#586e75',\n base03: '#657b83',\n base04: '#839496',\n base05: '#93a1a1',\n base06: '#eee8d5',\n base07: '#fdf6e3',\n base08: '#dc322f',\n base09: '#cb4b16',\n base0A: '#b58900',\n base0B: '#859900',\n base0C: '#2aa198',\n base0D: '#268bd2',\n base0E: '#6c71c4',\n base0F: '#d33682',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/summerfruit.ts", "content": "export default {\n scheme: 'summerfruit',\n author: 'christopher corley (http://cscorley.github.io/)',\n base00: '#151515',\n base01: '#202020',\n base02: '#303030',\n base03: '#505050',\n base04: '#B0B0B0',\n base05: '#D0D0D0',\n base06: '#E0E0E0',\n base07: '#FFFFFF',\n base08: '#FF0086',\n base09: '#FD8900',\n base0A: '#ABA800',\n base0B: '#00C918',\n base0C: '#1faaaa',\n base0D: '#3777E6',\n base0E: '#AD00A1',\n base0F: '#cc6633',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/threezerotwofour.ts", "content": "export default {\n scheme: 'threezerotwofour',\n author: 'jan t. sott (http://github.com/idleberg)',\n base00: '#090300',\n base01: '#3a3432',\n base02: '#4a4543',\n base03: '#5c5855',\n base04: '#807d7c',\n base05: '#a5a2a2',\n base06: '#d6d5d4',\n base07: '#f7f7f7',\n base08: '#db2d20',\n base09: '#e8bbd0',\n base0A: '#fded02',\n base0B: '#01a252',\n base0C: '#b5e4f4',\n base0D: '#01a0e4',\n base0E: '#a16a94',\n base0F: '#cdab53',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/tomorrow.ts", "content": "export default {\n scheme: 'tomorrow',\n author: 'chris kempson (http://chriskempson.com)',\n base00: '#1d1f21',\n base01: '#282a2e',\n base02: '#373b41',\n base03: '#969896',\n base04: '#b4b7b4',\n base05: '#c5c8c6',\n base06: '#e0e0e0',\n base07: '#ffffff',\n base08: '#cc6666',\n base09: '#de935f',\n base0A: '#f0c674',\n base0B: '#b5bd68',\n base0C: '#8abeb7',\n base0D: '#81a2be',\n base0E: '#b294bb',\n base0F: '#a3685a',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/tube.ts", "content": "export default {\n scheme: 'london tube',\n author: 'jan t. sott',\n base00: '#231f20',\n base01: '#1c3f95',\n base02: '#5a5758',\n base03: '#737171',\n base04: '#959ca1',\n base05: '#d9d8d8',\n base06: '#e7e7e8',\n base07: '#ffffff',\n base08: '#ee2e24',\n base09: '#f386a1',\n base0A: '#ffd204',\n base0B: '#00853e',\n base0C: '#85cebc',\n base0D: '#009ddc',\n base0E: '#98005d',\n base0F: '#b06110',\n};\n" }, { "path": "packages/react-base16-styling/src/themes/twilight.ts", "content": "export default {\n scheme: 'twilight',\n author: 'david hart (http://hart-dev.com)',\n base00: '#1e1e1e',\n base01: '#323537',\n base02: '#464b50',\n base03: '#5f5a60',\n base04: '#838184',\n base05: '#a7a7a7',\n base06: '#c3c3c3',\n base07: '#ffffff',\n base08: '#cf6a4c',\n base09: '#cda869',\n base0A: '#f9ee98',\n base0B: '#8f9d6a',\n base0C: '#afc4db',\n base0D: '#7587a6',\n base0E: '#9b859d',\n base0F: '#9b703f',\n};\n" }, { "path": "packages/react-base16-styling/src/types.ts", "content": "import * as CSS from 'csstype';\nimport type { Base16Theme } from './themes/index.js';\n\nexport interface Styling {\n className?: string;\n style?: CSS.Properties;\n}\n\nexport type StylingValueFunction = (\n styling: Styling,\n ...rest: unknown[]\n) => Partial;\n\nexport type StylingValue =\n | string\n | CSS.Properties\n | StylingValueFunction;\n\nexport type StylingConfig = {\n // Should actually only be string | Base16Theme\n extend?: string | Base16Theme | StylingValue;\n} & {\n // Should actually only be StylingValue\n [name: string]: StylingValue | string | Base16Theme;\n};\n\nexport type Theme = string | Base16Theme | StylingConfig;\n\nexport type StylingFunction = (\n keys: (string | false | undefined) | (string | false | undefined)[],\n ...rest: unknown[]\n) => Styling;\n" }, { "path": "packages/react-base16-styling/test/index.test.ts", "content": "import {\n createStyling,\n invertBase16Theme,\n getBase16Theme,\n} from '../src/index.js';\nimport { base16Themes, Base16Theme } from '../src/themes/index.js';\nimport { Styling, StylingConfig } from '../src/types.js';\n\nconst base16Theme = {\n scheme: 'myscheme',\n author: 'me',\n base00: '#000000',\n base01: '#222222',\n base02: '#444444',\n base03: '#666666',\n base04: '#999999',\n base05: '#bbbbbb',\n base06: '#dddddd',\n base07: '#ffffff',\n base08: '#ff0000',\n base09: '#ff9900',\n base0A: '#ffff00',\n base0B: '#999900',\n base0C: '#009999',\n base0D: '#009900',\n base0E: '#9999ff',\n base0F: '#ff0099',\n};\n\nconst invertedBase16Theme = {\n scheme: 'myscheme:inverted',\n author: 'me',\n base00: '#FFFFFF',\n base01: '#FFFFFF',\n base02: '#A2A1A2',\n base03: '#807F80',\n base04: '#807F80',\n base05: '#5E5D5E',\n base06: '#3C3B3C',\n base07: '#1A191A',\n base08: '#FF4D4D',\n base09: '#CB6500',\n base0A: '#545400',\n base0B: '#A2A20A',\n base0C: '#0FA8A8',\n base0D: '#32CB32',\n base0E: '#6868CE',\n base0F: '#FF2AC3',\n};\n\nconst apathyInverted = {\n author: 'jannik siebert (https://github.com/janniks)',\n base00: '#EFFFFF',\n base01: '#E3FFFF',\n base02: '#DAFFFF',\n base03: '#67A49A',\n base04: '#66A399',\n base05: '#51857C',\n base06: '#3C635D',\n base07: '#2A3F3C',\n base08: '#2F8779',\n base09: '#4E89A6',\n base0A: '#8391DB',\n base0B: '#B167BF',\n base0C: '#C8707E',\n base0D: '#A7994F',\n base0E: '#469038',\n base0F: '#3A9257',\n scheme: 'apathy:inverted',\n};\n\nconst getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({\n testClass: 'testClass',\n testStyle: {\n color: base16.base00,\n },\n testFunc: ({ style }, arg) => ({\n className: `testClass--${arg as string}`,\n style: {\n ...style,\n width: 0,\n color: base16.base00,\n },\n }),\n baseStyle: {\n color: 'red',\n },\n additionalStyle: {\n border: 0,\n },\n testFuncNoStyle: (_, arg) => ({\n className: `testClass--${arg as string}`,\n }),\n});\n\ntest('invertTheme', () => {\n expect(invertBase16Theme(base16Theme)).toEqual(invertedBase16Theme);\n});\n\ntest('getBase16Theme', () => {\n expect(getBase16Theme('apathy')).toEqual(base16Themes.apathy);\n expect(getBase16Theme({ extend: 'apathy' })).toEqual(base16Themes.apathy);\n expect(getBase16Theme('apathy:inverted')).toEqual(apathyInverted);\n expect(getBase16Theme({})).toBeUndefined();\n});\n\ntest('createStyling (default)', () => {\n const styling = createStyling(getStylingFromBase16, {\n defaultBase16: base16Themes.apathy,\n });\n const defaultStyling = styling(undefined);\n\n expect(defaultStyling('testClass')).toEqual({ className: 'testClass' });\n expect(defaultStyling('testStyle')).toEqual({\n style: { color: base16Themes.apathy.base00 },\n });\n expect(defaultStyling('testFunc', 'mod')).toEqual({\n className: 'testClass--mod',\n style: {\n width: 0,\n color: base16Themes.apathy.base00,\n },\n });\n});\n\ntest('createStyling (custom)', () => {\n const styling = createStyling(getStylingFromBase16, {\n defaultBase16: base16Themes.apathy,\n });\n let customStyling = styling({\n testClass: 'customClass',\n testStyle: { height: 0 },\n testFunc: (styling: Styling, arg) => ({\n className: `${styling.className!} customClass--${arg as string}`,\n style: {\n ...styling.style,\n border: 0,\n },\n }),\n testFuncNoStyle: (styling: Styling, arg) => ({\n className: `${styling.className!} customClass--${arg as string}`,\n style: {\n ...styling.style,\n border: 0,\n },\n }),\n });\n\n expect(customStyling('testClass')).toEqual({\n className: 'testClass customClass',\n });\n expect(customStyling('testStyle')).toEqual({\n style: { color: base16Themes.apathy.base00, height: 0 },\n });\n expect(customStyling('testFunc', 'mod')).toEqual({\n className: 'testClass--mod customClass--mod',\n style: {\n width: 0,\n color: base16Themes.apathy.base00,\n border: 0,\n },\n });\n expect(customStyling('testFuncNoStyle', 'mod')).toEqual({\n className: 'testClass--mod customClass--mod',\n style: {\n border: 0,\n },\n });\n\n customStyling = styling({\n testClass: () => ({\n className: 'customClass',\n }),\n testStyle: () => ({\n style: {\n border: 0,\n },\n }),\n });\n\n expect(customStyling('testClass')).toEqual({ className: 'customClass' });\n expect(customStyling('testStyle')).toEqual({ style: { border: 0 } });\n});\n\ntest('createStyling (multiple)', () => {\n const styling = createStyling(getStylingFromBase16, {\n defaultBase16: base16Themes.apathy,\n });\n let customStyling = styling({\n baseStyle: ({ style }) => ({ style: { ...style, color: 'blue' } }),\n });\n\n expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({\n style: {\n color: 'blue',\n border: 0,\n },\n });\n\n customStyling = styling({\n additionalStyle: ({ style }) => ({ style: { ...style, border: 1 } }),\n });\n\n expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({\n style: {\n color: 'red',\n border: 1,\n },\n });\n});\n" }, { "path": "packages/react-base16-styling/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/react-base16-styling/tsconfig.test.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\"]\n },\n \"include\": [\"src\", \"test\"]\n}\n" }, { "path": "packages/react-dock/CHANGELOG.md", "content": "# Change Log\n\n## 0.8.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n## 0.7.0\n\n### Minor Changes\n\n- bbb1a40: Convert React packages to ESM\n\n## 0.6.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n## 0.5.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import Dock from 'react-dock';\n+ import { Dock } from 'react-dock';\n```\n\n## [0.4.0](https://github.com/reduxjs/redux-devtools/compare/react-dock@0.3.0...react-dock@0.4.0) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## 0.3.0 (2020-09-07)\n\n### Features\n\n- **react-dock:** allow ReactNode children in types ([#610](https://github.com/reduxjs/redux-devtools/issues/610)) ([9000e36](https://github.com/reduxjs/redux-devtools/commit/9000e369cd4ecd21d2f3e32f0112bd332eb8b631))\n- **react-dock:** convert to TypeScript ([#607](https://github.com/reduxjs/redux-devtools/issues/607)) ([78ded9e](https://github.com/reduxjs/redux-devtools/commit/78ded9e0ca5ced5f6ae4e6d4474fa133b6d081b9))\n- **redux-devtools-inspector:** convert to TypeScript ([#623](https://github.com/reduxjs/redux-devtools/issues/623)) ([c7b0c7a](https://github.com/reduxjs/redux-devtools/commit/c7b0c7aa6e09f46a36b382ae3ec8e38bd48aeb28))\n" }, { "path": "packages/react-dock/LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Alexander Kuznetsov\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.\n\n" }, { "path": "packages/react-dock/README.md", "content": "# react-dock\n\nResizable dockable react component.\n\n#### Demo\n\n[http://alexkuz.github.io/react-dock/demo/](http://alexkuz.github.io/react-dock/demo/)\n\n#### Install\n\n```\n$ npm i -S react-dock\n```\n\n#### Example\n\n```jsx\nrender() {\n return (\n \n {/* you can pass a function as a child here */}\n
this.setState({ isVisible: !this.state.isVisible })}>X
\n \n );\n}\n```\n\n#### Dock Props\n\n| Prop Name | Description |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| position | Side to dock (`left`, `right`, `top` or `bottom`). Default is `left`. |\n| fluid | If `true`, resize dock proportionally on window resize. |\n| size | Size of dock panel (width or height, depending on `position`). If this prop is set, `Dock` is considered as a controlled component, so you need to use `onSizeChange` to track dock resizing. Value is a fraction of window width/height, if `fluid` is true, or pixels otherwise |\n| defaultSize | Default size of dock panel (used for uncontrolled `Dock` component) |\n| isVisible | If `true`, dock is visible |\n| dimMode | If `none` - content is not dimmed, if `transparent` - pointer events are disabled (so you can click through it), if `opaque` - click on dim area closes the dock. Default is `opaque` |\n| duration | Animation duration. Should be synced with transition animation in style properties |\n| dimStyle | Style for dim area |\n| dockStyle | Style for dock |\n| zIndex | Z-index for wrapper |\n| onVisibleChange | Fires when `Dock` wants to change `isVisible` (when opaque dim is clicked, in particular) |\n| onSizeChange | Fires when `Dock` wants to change `size` |\n| children | Dock content - react elements or function that returns an element. Function receives an object with these state values: `{ position, isResizing, size, isVisible }` |\n" }, { "path": "packages/react-dock/demo/CHANGELOG.md", "content": "# react-dock-demo\n\n## 0.1.7\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - react-dock@0.8.0\n\n## 0.1.6\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-dock@0.7.0\n\n## 0.1.5\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - react-dock@0.6.0\n" }, { "path": "packages/react-dock/demo/eslint.config.mjs", "content": "import eslintJs from '../../../eslint.js.config.base.mjs';\nimport eslintTs from '../../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(\n import.meta.dirname,\n ['./src/**/*.ts', './src/**/*.tsx'],\n ['./tsconfig.app.json'],\n ),\n ...eslintTs(\n import.meta.dirname,\n ['vite.config.ts'],\n ['./tsconfig.node.json'],\n ),\n {\n ignores: ['dist'],\n },\n];\n" }, { "path": "packages/react-dock/demo/index.html", "content": "\n\n \n \n \n React Dock\n \n \n \n \n \n
\n \n \n\n" }, { "path": "packages/react-dock/demo/package.json", "content": "{\n \"private\": true,\n \"name\": \"react-dock-demo\",\n \"version\": \"0.1.7\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc -b && vite build\",\n \"preview\": \"vite preview\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc\"\n },\n \"dependencies\": {\n \"@emotion/styled\": \"^11.14.1\",\n \"react\": \"^19.2.4\",\n \"react-bootstrap\": \"^2.10.10\",\n \"react-dock\": \"workspace:^\",\n \"react-dom\": \"^19.2.4\",\n \"react-icons\": \"^5.6.0\",\n \"react-is\": \"^19.2.4\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@vitejs/plugin-react\": \"^6.0.0\",\n \"typescript\": \"~5.9.3\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "packages/react-dock/demo/src/App.tsx", "content": "import React, { Component } from 'react';\nimport { Button, Form } from 'react-bootstrap';\nimport { BsX } from 'react-icons/bs';\nimport styled from '@emotion/styled';\n\nimport { Dock } from 'react-dock';\n\nconst Root = styled.div`\n font-size: 16px;\n color: #999;\n height: 100vh;\n`;\n\nconst Main = styled.div`\n width: 100%;\n height: 150%;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 30vh;\n`;\n\nconst DockContent = styled.div`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n`;\n\nconst Remove = styled(BsX)`\n position: absolute;\n z-index: 1;\n right: 10px;\n top: 10px;\n cursor: pointer;\n`;\n\nconst positions = ['left', 'top', 'right', 'bottom'] as const;\nconst dimModes = ['transparent', 'none', 'opaque'] as const;\n\ninterface State {\n positionIdx: number;\n dimModeIdx: number;\n isVisible: boolean;\n fluid: boolean;\n customAnimation: boolean;\n slow: boolean;\n size: number;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport default class App extends Component<{}, State> {\n state: State = {\n positionIdx: 0,\n dimModeIdx: 0,\n isVisible: true,\n fluid: true,\n customAnimation: false,\n slow: false,\n size: 0.25,\n };\n\n render() {\n const duration = this.state.slow ? 2000 : 200;\n const dur = duration / 1000;\n const transitions = ['left', 'top', 'width', 'height']\n .map((p) => `${p} ${dur}s cubic-bezier(0, 1.5, 0.5, 1)`)\n .join(',');\n\n return (\n \n
\n

Main Content

\n
\n
\n Position: {positions[this.state.positionIdx]}\n \n Change\n \n
\n
\n Dim Mode: {dimModes[this.state.dimModeIdx]}\n \n Change\n \n
\n \n this.setState({\n isVisible: !this.state.isVisible,\n })\n }\n />\n\n \n this.setState({\n customAnimation: !this.state.customAnimation,\n })\n }\n />\n\n \n this.setState({\n slow: !this.state.slow,\n })\n }\n />\n\n \n this.setState({\n fluid: !this.state.fluid,\n })\n }\n />\n
\n
\n \n {({ position, isResizing }) => (\n \n

Dock Content

\n
Position: {position}
\n
Resizing: {isResizing ? 'true' : 'false'}
\n this.setState({ isVisible: false })} />\n \n )}\n \n \n );\n }\n\n handleVisibleChange = (isVisible: boolean) => {\n this.setState({ isVisible });\n };\n\n handleSizeChange = (size: number) => {\n this.setState({ size });\n };\n\n handlePositionClick = () => {\n this.setState({ positionIdx: (this.state.positionIdx + 1) % 4 });\n };\n\n handleDimModeClick = () => {\n this.setState({ dimModeIdx: (this.state.dimModeIdx + 1) % 3 });\n };\n}\n" }, { "path": "packages/react-dock/demo/src/index.tsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App.js';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render();\n" }, { "path": "packages/react-dock/demo/tsconfig.app.json", "content": "{\n \"extends\": \"../../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"noEmit\": true\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/react-dock/demo/tsconfig.json", "content": "{\n \"files\": [],\n \"references\": [\n { \"path\": \"./tsconfig.app.json\" },\n { \"path\": \"./tsconfig.node.json\" }\n ]\n}\n" }, { "path": "packages/react-dock/demo/tsconfig.node.json", "content": "{\n \"extends\": \"../../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"types\": [\"node\"],\n \"noEmit\": true\n },\n \"include\": [\"vite.config.ts\"]\n}\n" }, { "path": "packages/react-dock/demo/vite.config.ts", "content": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [react()],\n});\n" }, { "path": "packages/react-dock/eslint.config.js", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n {\n ignores: ['demo', 'lib'],\n },\n];\n" }, { "path": "packages/react-dock/package.json", "content": "{\n \"name\": \"react-dock\",\n \"version\": \"0.8.0\",\n \"description\": \"Resizable dockable react component\",\n \"keywords\": [\n \"react\",\n \"reactjs\",\n \"dock\",\n \"sidebar\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Alexander (http://kuzya.org/)\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run lint\"\n },\n \"dependencies\": {\n \"@types/lodash-es\": \"^4.17.12\",\n \"lodash-es\": \"^4.17.23\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^19.2.14\",\n \"react\": \"^19.2.4\",\n \"rimraf\": \"^6.1.3\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@types/react\": \"^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n }\n}\n" }, { "path": "packages/react-dock/src/Dock.tsx", "content": "import React, { Component, ReactNode } from 'react';\nimport { debounce } from 'lodash-es';\nimport type { DebouncedFunc } from 'lodash-es';\nimport autoprefix from './autoprefix.js';\n\ninterface Styles {\n [key: string]: React.CSSProperties;\n}\n\nfunction autoprefixes(styles: Styles) {\n return Object.keys(styles).reduce(\n (obj, key) => ((obj[key] = autoprefix(styles[key])), obj),\n {},\n );\n}\n\nconst styles = autoprefixes({\n wrapper: {\n position: 'fixed',\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n },\n\n dim: {\n position: 'fixed',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n zIndex: 0,\n background: 'rgba(0, 0, 0, 0.2)',\n opacity: 1,\n },\n\n dimAppear: {\n opacity: 0,\n },\n\n dimTransparent: {\n pointerEvents: 'none',\n },\n\n dimHidden: {\n opacity: 0,\n },\n\n dock: {\n position: 'fixed',\n zIndex: 1,\n boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)',\n background: 'white',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n },\n\n dockHidden: {\n opacity: 0,\n },\n\n dockResizing: {\n transition: 'none',\n },\n\n dockContent: {\n width: '100%',\n height: '100%',\n overflow: 'auto',\n },\n\n resizer: {\n position: 'absolute',\n zIndex: 2,\n opacity: 0,\n },\n});\n\nfunction getTransitions(duration: number) {\n return ['left', 'top', 'width', 'height'].map(\n (p) => `${p} ${duration / 1000}s ease-out`,\n );\n}\n\nfunction getDockStyles(\n { fluid, dockStyle, dockHiddenStyle, duration, position, isVisible }: Props,\n { size, isResizing, fullWidth, fullHeight }: State,\n) {\n let posStyle;\n const absSize = fluid ? `${size * 100}%` : `${size}px`;\n\n function getRestSize(fullSize: number) {\n return fluid ? `${100 - size * 100}%` : `${fullSize - size}px`;\n }\n\n switch (position) {\n case 'left':\n posStyle = {\n width: absSize,\n left: isVisible ? 0 : '-' + absSize,\n };\n break;\n case 'right':\n posStyle = {\n left: isVisible ? getRestSize(fullWidth) : fullWidth,\n width: absSize,\n };\n break;\n case 'top':\n posStyle = {\n top: isVisible ? 0 : '-' + absSize,\n height: absSize,\n };\n break;\n case 'bottom':\n posStyle = {\n top: isVisible ? getRestSize(fullHeight) : fullHeight,\n height: absSize,\n };\n break;\n }\n\n const transitions = getTransitions(duration);\n\n return [\n styles.dock,\n autoprefix({\n transition: [\n ...transitions,\n !isVisible && `opacity 0.01s linear ${duration / 1000}s`,\n ]\n .filter((t) => t)\n .join(','),\n }),\n dockStyle,\n autoprefix(posStyle),\n isResizing && styles.dockResizing,\n !isVisible && styles.dockHidden,\n !isVisible && dockHiddenStyle,\n ];\n}\n\nfunction getDimStyles(\n { dimMode, dimStyle, duration, isVisible }: Props,\n { isTransitionStarted }: State,\n) {\n return [\n styles.dim,\n autoprefix({\n transition: `opacity ${duration / 1000}s ease-out`,\n }),\n dimStyle,\n dimMode === 'transparent' && styles.dimTransparent,\n !isVisible && styles.dimHidden,\n isTransitionStarted && isVisible && styles.dimAppear,\n isTransitionStarted && !isVisible && styles.dimDisappear,\n ];\n}\n\nfunction getResizerStyles(position: 'left' | 'right' | 'top' | 'bottom') {\n let resizerStyle;\n const size = 10;\n\n switch (position) {\n case 'left':\n resizerStyle = {\n right: -size / 2,\n width: size,\n top: 0,\n height: '100%',\n cursor: 'col-resize',\n };\n break;\n case 'right':\n resizerStyle = {\n left: -size / 2,\n width: size,\n top: 0,\n height: '100%',\n cursor: 'col-resize',\n };\n break;\n case 'top':\n resizerStyle = {\n bottom: -size / 2,\n height: size,\n left: 0,\n width: '100%',\n cursor: 'row-resize',\n };\n break;\n case 'bottom':\n resizerStyle = {\n top: -size / 2,\n height: size,\n left: 0,\n width: '100%',\n cursor: 'row-resize',\n };\n break;\n }\n\n return [styles.resizer, autoprefix(resizerStyle)];\n}\n\nfunction getFullSize(\n position: 'left' | 'right' | 'top' | 'bottom',\n fullWidth: number,\n fullHeight: number,\n) {\n return position === 'left' || position === 'right' ? fullWidth : fullHeight;\n}\n\ninterface Props {\n position: 'left' | 'right' | 'top' | 'bottom';\n zIndex: number;\n fluid: boolean;\n size?: number;\n defaultSize: number;\n dimMode: 'none' | 'transparent' | 'opaque';\n isVisible?: boolean;\n onVisibleChange?: (isVisible: boolean) => void;\n onSizeChange?: (size: number) => void;\n dimStyle?: React.CSSProperties | null;\n dockStyle?: React.CSSProperties | null;\n dockHiddenStyle?: React.CSSProperties | null;\n duration: number;\n children?:\n | ((params: {\n position: 'left' | 'right' | 'top' | 'bottom';\n isResizing: boolean | undefined;\n size: number;\n isVisible: boolean | undefined;\n }) => ReactNode)\n | ReactNode;\n}\n\ninterface State {\n isControlled: boolean;\n size: number;\n isDimHidden: boolean;\n fullWidth: number;\n fullHeight: number;\n isTransitionStarted: boolean;\n isWindowResizing: unknown;\n isResizing?: boolean;\n}\n\nexport default class Dock extends Component {\n state: State = {\n isControlled: typeof this.props.size !== 'undefined',\n size: this.props.size || this.props.defaultSize,\n isDimHidden: !this.props.isVisible,\n fullWidth: window.innerWidth,\n fullHeight: window.innerHeight,\n isTransitionStarted: false,\n isWindowResizing: false,\n };\n\n static defaultProps = {\n position: 'left',\n zIndex: 99999999,\n fluid: true,\n defaultSize: 0.3,\n dimMode: 'opaque',\n duration: 200,\n };\n\n componentDidMount() {\n window.addEventListener('touchend', this.handleMouseUp);\n window.addEventListener('mouseup', this.handleMouseUp);\n window.addEventListener('touchmove', this.handleMouseMove);\n window.addEventListener('mousemove', this.handleMouseMove);\n window.addEventListener('resize', this.handleResize);\n\n this.updateWindowSize();\n }\n\n componentWillUnmount() {\n window.removeEventListener('touchend', this.handleMouseUp);\n window.removeEventListener('mouseup', this.handleMouseUp);\n window.removeEventListener('touchmove', this.handleMouseMove);\n window.removeEventListener('mousemove', this.handleMouseMove);\n window.removeEventListener('resize', this.handleResize);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: Props) {\n const isControlled = typeof nextProps.size !== 'undefined';\n\n this.setState({ isControlled });\n\n if (isControlled && nextProps.size && this.props.size !== nextProps.size) {\n this.setState({ size: nextProps.size });\n } else if (this.props.fluid !== nextProps.fluid) {\n this.updateSize(nextProps);\n }\n\n if (this.props.isVisible !== nextProps.isVisible) {\n this.setState({\n isTransitionStarted: true,\n });\n }\n }\n\n updateSize(props: Props) {\n const { fullWidth, fullHeight } = this.state;\n\n this.setState({\n size: props.fluid\n ? this.state.size / getFullSize(props.position, fullWidth, fullHeight)\n : getFullSize(props.position, fullWidth, fullHeight) * this.state.size,\n });\n }\n\n componentDidUpdate(prevProps: Props) {\n if (this.props.isVisible !== prevProps.isVisible) {\n if (!this.props.isVisible) {\n window.setTimeout(() => this.hideDim(), this.props.duration);\n } else {\n this.setState({ isDimHidden: false });\n }\n\n window.setTimeout(() => this.setState({ isTransitionStarted: false }), 0);\n }\n }\n\n transitionEnd = () => {\n this.setState({ isTransitionStarted: false });\n };\n\n hideDim = () => {\n if (!this.props.isVisible) {\n this.setState({ isDimHidden: true });\n }\n };\n\n render() {\n const { children, zIndex, dimMode, position, isVisible } = this.props;\n const { isResizing, size, isDimHidden } = this.state;\n\n const dimStyles = Object.assign(\n {},\n ...getDimStyles(this.props, this.state),\n );\n const dockStyles = Object.assign(\n {},\n ...getDockStyles(this.props, this.state),\n );\n const resizerStyles = Object.assign({}, ...getResizerStyles(position));\n\n return (\n
\n {dimMode !== 'none' && !isDimHidden && (\n
\n )}\n
\n \n
\n {typeof children === 'function'\n ? children({\n position,\n isResizing,\n size,\n isVisible,\n })\n : children}\n
\n
\n
\n );\n }\n\n handleDimClick = () => {\n if (this.props.dimMode === 'opaque') {\n if (this.props.onVisibleChange) this.props.onVisibleChange(false);\n }\n };\n\n handleResize = () => {\n if (window.requestAnimationFrame) {\n window.requestAnimationFrame(this.updateWindowSize.bind(this, true));\n } else {\n this.updateWindowSize(true);\n }\n };\n\n updateWindowSize = (windowResize?: true) => {\n const sizeState = {\n fullWidth: window.innerWidth,\n fullHeight: window.innerHeight,\n };\n\n if (windowResize) {\n this.setState({\n ...sizeState,\n isResizing: true,\n isWindowResizing: windowResize,\n });\n\n this.debouncedUpdateWindowSizeEnd();\n } else {\n this.setState(sizeState);\n }\n };\n\n updateWindowSizeEnd = () => {\n this.setState({\n isResizing: false,\n isWindowResizing: false,\n });\n };\n\n debouncedUpdateWindowSizeEnd: DebouncedFunc<() => void> = debounce(\n this.updateWindowSizeEnd,\n 30,\n );\n\n handleWrapperLeave = () => {\n this.setState({ isResizing: false });\n };\n\n handleMouseDown = () => {\n this.setState({ isResizing: true });\n };\n\n handleMouseUp = () => {\n this.setState({ isResizing: false });\n };\n\n handleMouseMove = (e: MouseEvent | TouchEvent) => {\n if (!this.state.isResizing || this.state.isWindowResizing) return;\n\n if (!(e as TouchEvent).touches) e.preventDefault();\n\n const { position, fluid } = this.props;\n const { fullWidth, fullHeight, isControlled } = this.state;\n let { clientX: x, clientY: y } = e as MouseEvent;\n\n if ((e as TouchEvent).touches) {\n x = (e as TouchEvent).touches[0].clientX;\n y = (e as TouchEvent).touches[0].clientY;\n }\n\n let size;\n\n switch (position) {\n case 'left':\n size = fluid ? x / fullWidth : x;\n break;\n case 'right':\n size = fluid ? (fullWidth - x) / fullWidth : fullWidth - x;\n break;\n case 'top':\n size = fluid ? y / fullHeight : y;\n break;\n case 'bottom':\n size = fluid ? (fullHeight - y) / fullHeight : fullHeight - y;\n break;\n }\n\n if (this.props.onSizeChange) this.props.onSizeChange(size);\n\n if (!isControlled) {\n this.setState({ size });\n }\n };\n}\n" }, { "path": "packages/react-dock/src/autoprefix.ts", "content": "// Same as https://github.com/SimenB/react-vendor-prefixes/blob/master/src/index.js,\n// but dumber\n\nimport { CSSProperties } from 'react';\n\nconst vendorSpecificProperties = [\n 'animation',\n 'animationDelay',\n 'animationDirection',\n 'animationDuration',\n 'animationFillMode',\n 'animationIterationCount',\n 'animationName',\n 'animationPlayState',\n 'animationTimingFunction',\n 'appearance',\n 'backfaceVisibility',\n 'backgroundClip',\n 'borderImage',\n 'borderImageSlice',\n 'boxSizing',\n 'boxShadow',\n 'contentColumns',\n 'transform',\n 'transformOrigin',\n 'transformStyle',\n 'transition',\n 'transitionDelay',\n 'transitionDuration',\n 'transitionProperty',\n 'transitionTimingFunction',\n 'perspective',\n 'perspectiveOrigin',\n 'userSelect',\n];\n\nconst prefixes = ['Moz', 'Webkit', 'ms', 'O'];\n\nfunction prefixProp(key: string, value: Value) {\n return prefixes.reduce<{ [key: string]: Value }>(\n (obj, pre) => (\n (obj[pre + key[0].toUpperCase() + key.substr(1)] = value),\n obj\n ),\n {},\n );\n}\n\nexport default function autoprefix(style: CSSProperties) {\n return Object.keys(style).reduce(\n (obj, key) =>\n vendorSpecificProperties.includes(key)\n ? {\n ...obj,\n ...prefixProp(key, style[key as keyof CSSProperties]),\n }\n : obj,\n style,\n );\n}\n" }, { "path": "packages/react-dock/src/index.ts", "content": "export { default as Dock } from './Dock.js';\n" }, { "path": "packages/react-dock/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/react-dock/tsconfig.test.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\"]\n },\n \"include\": [\"src\", \"test\"]\n}\n" }, { "path": "packages/react-json-tree/CHANGELOG.md", "content": "# Change Log\n\n## 0.20.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n## 0.19.0\n\n### Minor Changes\n\n- bbb1a40: Convert React packages to ESM\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-base16-styling@0.10.0\n\n## 0.18.0\n\n### Major Changes\n\n- 81926f32: Remove UNSAFE method from react-json-tree\n - Replace `shouldExpandNode` with `shouldExpandNodeInitially`. This function is now only called when a node in the tree is first rendered, when before it would update the expanded state of the node if the results of calling `shouldExpandNode` changed between renders. There is no way to replicate the old behavior exactly, but the new behavior is the intended behavior for the use cases within Redux DevTools. Please open an issue if you need a way to programatically control the expanded state of nodes.\n - Bump the minimum React version from `16.3.0` to `16.8.0` so that `react-json-tree` can use hooks.\n - Tightened TypeScript prop types to use `unknown` instead of `any` where possible and make the key path array `readonly`.\n\n## 0.17.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n## 0.16.2\n\n### Patch Changes\n\n- 4c9a890: Fix type import for Typescript versions <4.5\n\n## 0.16.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import JSONTree from 'react-json-tree';\n+ import { JSONTree } from 'react-json-tree';\n```\n\n## [0.15.0](https://github.com/reduxjs/redux-devtools/compare/react-json-tree@0.14.0...react-json-tree@0.15.0) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## [0.14.0](https://github.com/reduxjs/redux-devtools/compare/react-json-tree@0.13.0...react-json-tree@0.14.0) (2021-03-06)\n\n### Bug Fixes\n\n- **react-json-tree:** remove isRequired from `data` prop type ([#685](https://github.com/reduxjs/redux-devtools/issues/685)) ([d76d6c6](https://github.com/reduxjs/redux-devtools/commit/d76d6c678d3b3b304cf53c1b4b1b329e8962f7b0))\n\n### Features\n\n- **react-json-tree:** Add keyPath to getItemString ([#694](https://github.com/reduxjs/redux-devtools/issues/694)) ([85b4b0f](https://github.com/reduxjs/redux-devtools/commit/85b4b0fb04b1d6d95054d5073fa17fa61efc0df3))\n\n## [0.13.0](https://github.com/reduxjs/redux-devtools/compare/react-json-tree@0.12.1...react-json-tree@0.13.0) (2020-09-07)\n\n### Bug Fixes\n\n- **react-base16-styling:** fix Styling type ([#602](https://github.com/reduxjs/redux-devtools/issues/602)) ([e7304b5](https://github.com/reduxjs/redux-devtools/commit/e7304b5853a572b53429809ed8ac4b7a198c90f8))\n\n### Features\n\n- **react-dock:** convert to TypeScript ([#607](https://github.com/reduxjs/redux-devtools/issues/607)) ([78ded9e](https://github.com/reduxjs/redux-devtools/commit/78ded9e0ca5ced5f6ae4e6d4474fa133b6d081b9))\n- **redux-devtools:** convert counter example to TypeScript ([#616](https://github.com/reduxjs/redux-devtools/issues/616)) ([f1e3f4f](https://github.com/reduxjs/redux-devtools/commit/f1e3f4f8340dea288de5229006acf9dc1ef1cccf))\n- **redux-devtools:** convert todomvc example to TypeScript ([#618](https://github.com/reduxjs/redux-devtools/issues/618)) ([37191e4](https://github.com/reduxjs/redux-devtools/commit/37191e46e600cd9ac2839f0687efb347fc4ef7c1))\n\n## [0.12.1](https://github.com/reduxjs/redux-devtools/compare/react-json-tree@0.12.0...react-json-tree@0.12.1) (2020-08-14)\n\n### Bug Fixes\n\n- **react-json-tree:** fix react-json-tree examples ([#531](https://github.com/reduxjs/redux-devtools/issues/531)) ([0864f28](https://github.com/reduxjs/redux-devtools/commit/0864f281560dcbad1ddb2ab985e23b841771cb8c))\n" }, { "path": "packages/react-json-tree/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Shusaku Uesugi, (c) 2016-present Alexander Kuznetsov\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.\n" }, { "path": "packages/react-json-tree/README.md", "content": "# react-json-tree\n\nReact JSON Viewer Component, Extracted from [redux-devtools](https://github.com/reduxjs/redux-devtools). Supports [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable) objects, such as [Immutable.js](https://facebook.github.io/immutable-js/).\n\n![](https://img.shields.io/npm/v/react-json-tree.svg)\n\n### Usage\n\n```jsx\nimport { JSONTree } from 'react-json-tree';\n// If you're using Immutable.js: `npm i --save immutable`\nimport { Map } from 'immutable';\n\n// Inside a React component:\nconst json = {\n array: [1, 2, 3],\n bool: true,\n object: {\n foo: 'bar',\n },\n immutable: Map({ key: 'value' }),\n};\n\n;\n```\n\n#### Result:\n\n![](https://i.ibb.co/0KSYRJg/example-result.png)\n\nCheck out [examples](examples) directory for more details.\n\n### Theming\n\nThis component now uses [react-base16-styling](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-base16-styling) module, which allows to customize component via `theme` property, which can be the following:\n\n- [base16](https://github.com/chriskempson/base16) theme data. [The example theme data can be found here](https://github.com/gaearon/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes).\n- object that contains style objects, strings (that treated as classnames) or functions. A function is used to extend its first argument `{ style, className }` and should return an object with the same structure. Other arguments depend on particular context (and should be described here). See [createStylingFromTheme.js](https://github.com/reduxjs/redux-devtools/blob/main/packages/react-json-tree/src/createStylingFromTheme.ts) for the list of styling object keys. Also, this object can extend `base16` theme via `extend` property.\n\nEvery theme has a light version, which is enabled with `invertTheme` prop.\n\n```jsx\nconst theme = {\n scheme: 'monokai',\n author: 'wimer hazenberg (http://www.monokai.nl)',\n base00: '#272822',\n base01: '#383830',\n base02: '#49483e',\n base03: '#75715e',\n base04: '#a59f85',\n base05: '#f8f8f2',\n base06: '#f5f4f1',\n base07: '#f9f8f5',\n base08: '#f92672',\n base09: '#fd971f',\n base0A: '#f4bf75',\n base0B: '#a6e22e',\n base0C: '#a1efe4',\n base0D: '#66d9ef',\n base0E: '#ae81ff',\n base0F: '#cc6633',\n};\n\n
\n \n
;\n```\n\n#### Result (Monokai theme, dark background):\n\n![](http://cl.ly/image/330o2L1J3V0h/screenshot%202015-08-26%20at%2010.48.24%20AM.png)\n\n#### Advanced Customization\n\n```jsx\n
\n ({\n style: {\n ...style,\n textTransform: expanded ? 'uppercase' : style.textTransform,\n },\n }),\n }}\n />\n
\n```\n\n#### Customize Labels for Arrays, Objects, and Iterables\n\nYou can pass `getItemString` to customize the way arrays, objects, and iterable nodes are displayed (optional).\n\nBy default, it'll be:\n\n```jsx\n {itemType} {itemString}}\n```\n\nBut if you pass the following:\n\n```jsx\nconst getItemString = (type, data, itemType, itemString, keyPath)\n => ( // {type});\n```\n\nThen the preview of child elements now look like this:\n\n![](http://cl.ly/image/1J1a0b0T0K3c/screenshot%202015-10-07%20at%203.44.31%20PM.png)\n\n#### Customize Rendering\n\nYou can pass the following properties to customize rendered labels and values:\n\n```jsx\n {key}}\n valueRenderer={(raw) => {raw}}\n/>\n```\n\nIn this example the label and value will be rendered with `` and `` wrappers respectively.\n\nFor `labelRenderer`, you can provide a full path - [see this PR](https://github.com/chibicode/react-json-tree/pull/32).\n\nTheir full signatures are:\n\n- `labelRenderer: function(keyPath, nodeType, expanded, expandable)`\n- `valueRenderer: function(valueAsString, value, ...keyPath)`\n\n#### More Options\n\n- `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default)\n- `hideRoot: boolean` - if `true`, the root node is hidden.\n- `sortObjectKeys: boolean | function(a, b)` - sorts object keys with compare function (optional). Isn't applied to iterable maps like `Immutable.Map`.\n- `postprocessValue: function(value)` - maps `value` to a new `value`\n- `isCustomNode: function(value)` - overrides the default object type detection and renders the value as a single value\n- `collectionLimit: number` - sets the number of nodes that will be rendered in a collection before rendering them in collapsed ranges\n- `keyPath: (string | number)[]` - overrides the initial key path for the root node (defaults to `[root]`)\n\n### Credits\n\n- All credits to [Dave Vedder](http://www.eskimospy.com/) ([veddermatic@gmail.com](mailto:veddermatic@gmail.com)), who wrote the original code as [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/).\n- Extracted from [redux-devtools](https://github.com/gaearon/redux-devtools), which contained ES6 + inline style port of [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/) by [Daniele Zannotti](http://www.github.com/dzannotti) ([dzannotti@me.com](mailto:dzannotti@me.com))\n- [Iterable support](https://github.com/gaearon/redux-devtools/pull/79) thanks to [Daniel K](https://github.com/FredyC).\n- npm package created by [Shu Uesugi](http://github.com/chibicode) ([shu@chibicode.com](mailto:shu@chibicode.com)) per [this issue](https://github.com/gaearon/redux-devtools/issues/85).\n- Improved and maintained by [Alexander Kuznetsov](https://github.com/alexkuz). The repository was merged into [`redux-devtools` monorepo](https://github.com/reduxjs/redux-devtools) from [`alexkuz/react-json-tree`](https://github.com/alexkuz/react-json-tree).\n\n### Similar Libraries\n\n- [react-treeview](https://github.com/chenglou/react-treeview)\n- [react-json-inspector](https://github.com/Lapple/react-json-inspector)\n- [react-object-inspector](https://github.com/xyc/react-object-inspector)\n- [react-json-view](https://github.com/mac-s-g/react-json-view)\n\n### License\n\nMIT\n" }, { "path": "packages/react-json-tree/eslint.config.js", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\nimport eslintTsReactJest from '../../eslint.ts.react.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n ...eslintTsReactJest(import.meta.dirname),\n {\n ignores: ['examples', 'jest.config.ts', 'lib'],\n },\n];\n" }, { "path": "packages/react-json-tree/examples/CHANGELOG.md", "content": "# react-json-tree-example\n\n## 1.1.10\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - react-json-tree@0.20.0\n\n## 1.1.9\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-base16-styling@0.10.0\n - react-json-tree@0.19.0\n\n## 1.1.8\n\n### Patch Changes\n\n- Updated dependencies [81926f32]\n - react-json-tree@0.18.0\n\n## 1.1.7\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - react-json-tree@0.17.0\n" }, { "path": "packages/react-json-tree/examples/LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2014 Dan Abramov\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.\n" }, { "path": "packages/react-json-tree/examples/README.md", "content": "# react-hot-boilerplate\n\nThe minimal dev environment to enable live-editing React components.\n\n### Usage\n\n```\nnpm install\nnpm start\nopen http://localhost:3000\n```\n\nNow edit `src/App.js`. \nYour changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).\n\n### Linting\n\nThis boilerplate project includes React-friendly ESLint configuration.\n\n```\nnpm run lint\n```\n\n### Using `0.0.0.0` as Host\n\nYou may want to change the host in `server.js` and `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.\n\n### Missing Features\n\nThis boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits).\n\n### Dependencies\n\n- React\n- Webpack\n- [webpack-dev-server](https://github.com/webpack/webpack-dev-server)\n- [babel-loader](https://github.com/babel/babel-loader)\n- [react-hot-loader](https://github.com/gaearon/react-hot-loader)\n\n### Resources\n\n- [Demo video](http://vimeo.com/100010922)\n- [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader)\n- [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/)\n- [Troubleshooting guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)\n- Ping dan_abramov on Twitter or #reactjs IRC\n" }, { "path": "packages/react-json-tree/examples/eslint.config.mjs", "content": "import eslintJs from '../../../eslint.js.config.base.mjs';\nimport eslintTs from '../../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(\n import.meta.dirname,\n ['./src/**/*.ts', './src/**/*.tsx'],\n ['./tsconfig.app.json'],\n ),\n ...eslintTs(\n import.meta.dirname,\n ['vite.config.ts'],\n ['./tsconfig.node.json'],\n ),\n {\n ignores: ['dist'],\n },\n];\n" }, { "path": "packages/react-json-tree/examples/index.html", "content": "\n\n \n Sample App\n \n \n \n
\n \n \n\n" }, { "path": "packages/react-json-tree/examples/package.json", "content": "{\n \"private\": true,\n \"name\": \"react-json-tree-example\",\n \"version\": \"1.1.10\",\n \"description\": \"React-Json-Tree example\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree/examples\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc -b && vite build\",\n \"preview\": \"vite preview\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc\"\n },\n \"dependencies\": {\n \"immutable\": \"^5.1.5\",\n \"react\": \"^19.2.4\",\n \"react-base16-styling\": \"workspace:^\",\n \"react-dom\": \"^19.2.4\",\n \"react-json-tree\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@vitejs/plugin-react\": \"^6.0.0\",\n \"typescript\": \"~5.9.3\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "packages/react-json-tree/examples/src/App.tsx", "content": "import React from 'react';\nimport { Map } from 'immutable';\nimport { JSONTree, StylingValue } from 'react-json-tree';\n\nconst getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({\n style: {\n ...style,\n textTransform: expanded ? 'uppercase' : style!.textTransform,\n },\n});\n\nconst getBoolStyle: StylingValue = ({ style }, nodeType) => ({\n style: {\n ...style,\n border: nodeType === 'Boolean' ? '1px solid #DD3333' : style!.border,\n borderRadius: nodeType === 'Boolean' ? 3 : style!.borderRadius,\n },\n});\n\nconst getItemString = (type: string) => (\n \n {' // '}\n {type}\n \n);\n\nconst getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({\n style: {\n ...style,\n color:\n !Number.isNaN((keyPath as unknown[])[0]) &&\n !(parseInt(keyPath as string, 10) % 2)\n ? '#33F'\n : style!.color,\n },\n});\n\nconst longString =\n 'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.'; // eslint-disable-line max-len\n\nclass Custom {\n value: unknown;\n\n constructor(value: unknown) {\n this.value = value;\n }\n\n get [Symbol.toStringTag]() {\n return 'Custom';\n }\n}\n\nconst data = {\n array: [1, 2, 3],\n emptyArray: [],\n bool: true,\n date: new Date(),\n error: new Error(longString),\n object: {\n foo: {\n bar: 'baz',\n nested: {\n moreNested: {\n evenMoreNested: {\n veryNested: {\n insanelyNested: {\n ridiculouslyDeepValue: 'Hello',\n },\n },\n },\n },\n },\n },\n baz: undefined,\n func: function User() {\n // noop\n },\n },\n emptyObject: {},\n symbol: Symbol('value'),\n // eslint-disable-next-line new-cap\n immutable: Map([\n ['key', 'value'],\n [{ objectKey: 'value' }, { objectKey: 'value' }],\n ]),\n map: new window.Map([\n ['key', 'value'],\n [0, 'value'],\n [{ objectKey: 'value' }, { objectKey: 'value' }],\n ]),\n weakMap: new window.WeakMap([\n [{ objectKey: 'value' }, { objectKey: 'value' }],\n ]),\n set: new window.Set(['value', 0, { objectKey: 'value' }]),\n weakSet: new window.WeakSet([\n { objectKey: 'value1' },\n { objectKey: 'value2' },\n ]),\n hugeArray: Array.from({ length: 10000 }).map((_, i) => `item #${i}`),\n customProfile: {\n avatar: new Custom('placehold.it/50x50'),\n name: new Custom('Name'),\n },\n longString,\n};\n\nconst theme = {\n scheme: 'monokai',\n author: 'wimer hazenberg (http://www.monokai.nl)',\n base00: '#272822',\n base01: '#383830',\n base02: '#49483e',\n base03: '#75715e',\n base04: '#a59f85',\n base05: '#f8f8f2',\n base06: '#f5f4f1',\n base07: '#f9f8f5',\n base08: '#f92672',\n base09: '#fd971f',\n base0A: '#f4bf75',\n base0B: '#a6e22e',\n base0C: '#a1efe4',\n base0D: '#66d9ef',\n base0E: '#ae81ff',\n base0F: '#cc6633',\n};\n\nconst App = () => (\n
\n \n
\n

Dark Theme

\n \n
\n

Hidden Root

\n \n
\n

Base16 Greenscreen Theme

\n \n

Inverted Theme

\n \n
\n

Style Customization

\n
    \n
  • \n Label changes between uppercase/lowercase based on the expanded state.\n
    • \n
  • Array keys are styled based on their parity.
    • \n
  • \n The labels of objects, arrays, and iterables are customized as "//\n type".\n
    • \n
  • See code for details.
    • \n
\n
\n \n
\n

More Fine Grained Rendering

\n

\n Pass labelRenderer or valueRenderer.\n

\n
\n (({raw})):}\n valueRenderer={(raw) => (\n \n \n 😐\n {' '}\n {raw as string}{' '}\n \n 😐\n \n \n )}\n />\n
\n

\n Sort object keys with sortObjectKeys prop.\n

\n
\n \n
\n

Collapsed root node

\n
\n false}\n />\n
\n
\n);\n\nexport default App;\n" }, { "path": "packages/react-json-tree/examples/src/index.tsx", "content": "import { createRoot } from 'react-dom/client';\nimport React from 'react';\nimport App from './App.js';\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n" }, { "path": "packages/react-json-tree/examples/tsconfig.app.json", "content": "{\n \"extends\": \"../../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"noEmit\": true\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/react-json-tree/examples/tsconfig.json", "content": "{\n \"files\": [],\n \"references\": [\n { \"path\": \"./tsconfig.app.json\" },\n { \"path\": \"./tsconfig.node.json\" }\n ]\n}\n" }, { "path": "packages/react-json-tree/examples/tsconfig.node.json", "content": "{\n \"extends\": \"../../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"types\": [\"node\"],\n \"noEmit\": true\n },\n \"include\": [\"vite.config.ts\"]\n}\n" }, { "path": "packages/react-json-tree/examples/vite.config.ts", "content": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [react()],\n});\n" }, { "path": "packages/react-json-tree/jest.config.ts", "content": "import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createDefaultEsmPreset({\n tsconfig: 'tsconfig.test.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "packages/react-json-tree/package.json", "content": "{\n \"name\": \"react-json-tree\",\n \"version\": \"0.20.0\",\n \"description\": \"React JSON Viewer Component, Extracted from redux-devtools\",\n \"keywords\": [\n \"react\",\n \"json viewer\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Shu Uesugi (http://github.com/chibicode)\",\n \"contributors\": [\n \"Alexander Kuznetsov (http://kuzya.org/)\",\n \"Dave Vedder (http://www.eskimospy.com/)\",\n \"Daniele Zannotti (http://www.github.com/dzannotti)\",\n \"Mihail Diordiev (https://github.com/zalmoxisus)\"\n ],\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run lint && pnpm run test\"\n },\n \"dependencies\": {\n \"@types/lodash\": \"^4.17.24\",\n \"react-base16-styling\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@types/jest\": \"^30.0.0\",\n \"@types/react\": \"^19.2.14\",\n \"jest\": \"^30.3.0\",\n \"react\": \"^19.2.4\",\n \"rimraf\": \"^6.1.3\",\n \"ts-jest\": \"^29.4.6\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n }\n}\n" }, { "path": "packages/react-json-tree/src/ItemRange.tsx", "content": "import React, { useCallback, useState } from 'react';\nimport JSONArrow from './JSONArrow.js';\nimport type { CircularCache, CommonInternalProps } from './types.js';\n\ninterface Props extends CommonInternalProps {\n data: unknown;\n nodeType: string;\n from: number;\n to: number;\n renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode;\n circularCache: CircularCache;\n level: number;\n}\n\nexport default function ItemRange(props: Props) {\n const { styling, from, to, renderChildNodes, nodeType } = props;\n\n const [expanded, setExpanded] = useState(false);\n const handleClick = useCallback(() => {\n setExpanded(!expanded);\n }, [expanded]);\n\n return expanded ? (\n
\n {renderChildNodes(props, from, to)}\n
\n ) : (\n
\n \n {`${from} ... ${to}`}\n
\n );\n}\n" }, { "path": "packages/react-json-tree/src/JSONArrayNode.tsx", "content": "import React from 'react';\nimport JSONNestedNode from './JSONNestedNode.js';\nimport type { CommonInternalProps } from './types.js';\n\n// Returns the \"n Items\" string for this node,\n// generating and caching it if it hasn't been created yet.\nfunction createItemString(data: unknown) {\n return `${(data as unknown[]).length} ${\n (data as unknown[]).length !== 1 ? 'items' : 'item'\n }`;\n}\n\ninterface Props extends CommonInternalProps {\n data: unknown;\n nodeType: string;\n}\n\n// Configures to render an Array\nexport default function JSONArrayNode({ data, ...props }: Props) {\n return (\n 0}\n />\n );\n}\n" }, { "path": "packages/react-json-tree/src/JSONArrow.tsx", "content": "import React from 'react';\nimport type { StylingFunction } from 'react-base16-styling';\n\ninterface Props {\n styling: StylingFunction;\n arrowStyle?: 'single' | 'double';\n expanded: boolean;\n nodeType: string;\n onClick: React.MouseEventHandler;\n}\n\nexport default function JSONArrow({\n styling,\n arrowStyle = 'single',\n expanded,\n nodeType,\n onClick,\n}: Props) {\n return (\n
\n
\n {'\\u25B6'}\n {arrowStyle === 'double' && (\n
{'\\u25B6'}
\n )}\n
\n
\n );\n}\n" }, { "path": "packages/react-json-tree/src/JSONIterableNode.tsx", "content": "import React from 'react';\nimport JSONNestedNode from './JSONNestedNode.js';\nimport type { CommonInternalProps } from './types.js';\n\n// Returns the \"n Items\" string for this node,\n// generating and caching it if it hasn't been created yet.\nfunction createItemString(data: any, limit: number) {\n let count = 0;\n let hasMore = false;\n if (Number.isSafeInteger(data.size)) {\n count = data.size;\n } else {\n // eslint-disable-next-line no-unused-vars\n for (const entry of data) {\n if (limit && count + 1 > limit) {\n hasMore = true;\n break;\n }\n count += 1;\n }\n }\n return `${hasMore ? '>' : ''}${count} ${count !== 1 ? 'entries' : 'entry'}`;\n}\n\ninterface Props extends CommonInternalProps {\n data: unknown;\n nodeType: string;\n}\n\n// Configures to render an iterable\nexport default function JSONIterableNode(props: Props) {\n return (\n \n );\n}\n" }, { "path": "packages/react-json-tree/src/JSONNestedNode.tsx", "content": "import React, { useCallback, useState } from 'react';\nimport JSONArrow from './JSONArrow.js';\nimport getCollectionEntries from './getCollectionEntries.js';\nimport JSONNode from './JSONNode.js';\nimport ItemRange from './ItemRange.js';\nimport type { CircularCache, CommonInternalProps } from './types.js';\n\n/**\n * Renders nested values (eg. objects, arrays, lists, etc.)\n */\n\nexport interface RenderChildNodesProps extends CommonInternalProps {\n data: unknown;\n nodeType: string;\n circularCache: CircularCache;\n level: number;\n}\n\ninterface Range {\n from: number;\n to: number;\n}\n\ninterface Entry {\n key: string | number;\n value: unknown;\n}\n\nfunction isRange(rangeOrEntry: Range | Entry): rangeOrEntry is Range {\n return (rangeOrEntry as Range).to !== undefined;\n}\n\nfunction renderChildNodes(\n props: RenderChildNodesProps,\n from?: number,\n to?: number,\n) {\n const {\n nodeType,\n data,\n collectionLimit,\n circularCache,\n keyPath,\n postprocessValue,\n sortObjectKeys,\n } = props;\n const childNodes: React.ReactNode[] = [];\n\n getCollectionEntries(\n nodeType,\n data,\n sortObjectKeys,\n collectionLimit,\n from,\n to,\n ).forEach((entry) => {\n if (isRange(entry)) {\n childNodes.push(\n ,\n );\n } else {\n const { key, value } = entry;\n const isCircular = circularCache.includes(value);\n\n childNodes.push(\n ,\n );\n }\n });\n\n return childNodes;\n}\n\ninterface Props extends CommonInternalProps {\n data: unknown;\n nodeType: string;\n nodeTypeIndicator: string;\n createItemString: (data: unknown, collectionLimit: number) => string;\n expandable: boolean;\n}\n\nexport default function JSONNestedNode(props: Props) {\n const {\n circularCache = [],\n collectionLimit,\n createItemString,\n data,\n expandable,\n getItemString,\n hideRoot,\n isCircular,\n keyPath,\n labelRenderer,\n level = 0,\n nodeType,\n nodeTypeIndicator,\n shouldExpandNodeInitially,\n styling,\n } = props;\n\n const [expanded, setExpanded] = useState(\n // calculate individual node expansion if necessary\n isCircular ? false : shouldExpandNodeInitially(keyPath, data, level),\n );\n\n const handleClick = useCallback(() => {\n if (expandable) setExpanded(!expanded);\n }, [expandable, expanded]);\n\n const renderedChildren =\n expanded || (hideRoot && level === 0)\n ? renderChildNodes({ ...props, circularCache, level: level + 1 })\n : null;\n\n const itemType = (\n \n {nodeTypeIndicator}\n \n );\n const renderedItemString = getItemString(\n nodeType,\n data,\n itemType,\n createItemString(data, collectionLimit),\n keyPath,\n );\n const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;\n\n return hideRoot ? (\n
  • \n
      \n {renderedChildren}\n
    \n
    • \n ) : (\n
  • \n {expandable && (\n \n )}\n \n {labelRenderer(...stylingArgs)}\n \n \n {renderedItemString}\n \n
      \n {renderedChildren}\n
    \n
    • \n );\n}\n" }, { "path": "packages/react-json-tree/src/JSONNode.tsx", "content": "import React from 'react';\nimport objType from './objType.js';\nimport JSONObjectNode from './JSONObjectNode.js';\nimport JSONArrayNode from './JSONArrayNode.js';\nimport JSONIterableNode from './JSONIterableNode.js';\nimport JSONValueNode from './JSONValueNode.js';\nimport type { CommonInternalProps } from './types.js';\n\ninterface Props extends CommonInternalProps {\n value: unknown;\n}\n\nexport default function JSONNode({\n getItemString,\n keyPath,\n labelRenderer,\n styling,\n value,\n valueRenderer,\n isCustomNode,\n ...rest\n}: Props) {\n const nodeType = isCustomNode(value) ? 'Custom' : objType(value);\n\n const simpleNodeProps = {\n getItemString,\n key: keyPath[0],\n keyPath,\n labelRenderer,\n nodeType,\n styling,\n value,\n valueRenderer,\n };\n\n const nestedNodeProps = {\n ...rest,\n ...simpleNodeProps,\n data: value,\n isCustomNode,\n };\n\n switch (nodeType) {\n case 'Object':\n case 'Error':\n case 'WeakMap':\n case 'WeakSet':\n return ;\n case 'Array':\n return ;\n case 'Iterable':\n case 'Map':\n case 'Set':\n return ;\n case 'String':\n return (\n `\"${raw}\"`}\n />\n );\n case 'Number':\n return ;\n case 'Boolean':\n return (\n (raw ? 'true' : 'false')}\n />\n );\n case 'Date':\n return (\n raw.toISOString()}\n />\n );\n case 'Null':\n return 'null'} />;\n case 'Undefined':\n return (\n 'undefined'} />\n );\n case 'Function':\n case 'Symbol':\n return (\n raw.toString()}\n />\n );\n case 'Custom':\n return ;\n default:\n return (\n `<${nodeType}>`}\n />\n );\n }\n}\n" }, { "path": "packages/react-json-tree/src/JSONObjectNode.tsx", "content": "import React from 'react';\nimport JSONNestedNode from './JSONNestedNode.js';\nimport type { CommonInternalProps } from './types.js';\n\n// Returns the \"n Items\" string for this node,\n// generating and caching it if it hasn't been created yet.\nfunction createItemString(data: unknown) {\n const len = Object.getOwnPropertyNames(data).length;\n return `${len} ${len !== 1 ? 'keys' : 'key'}`;\n}\n\ninterface Props extends CommonInternalProps {\n data: unknown;\n nodeType: string;\n}\n\n// Configures to render an Object\nexport default function JSONObjectNode({ data, ...props }: Props) {\n return (\n 0}\n />\n );\n}\n" }, { "path": "packages/react-json-tree/src/JSONValueNode.tsx", "content": "import React from 'react';\nimport type {\n GetItemString,\n Key,\n KeyPath,\n LabelRenderer,\n Styling,\n ValueRenderer,\n} from './types.js';\n\n/**\n * Renders simple values (eg. strings, numbers, booleans, etc)\n */\n\ninterface Props {\n getItemString: GetItemString;\n key: Key;\n keyPath: KeyPath;\n labelRenderer: LabelRenderer;\n nodeType: string;\n styling: Styling;\n value: unknown;\n valueRenderer: ValueRenderer;\n valueGetter?: (value: any) => unknown;\n}\n\nexport default function JSONValueNode({\n nodeType,\n styling,\n labelRenderer,\n keyPath,\n valueRenderer,\n value,\n valueGetter = (value) => value,\n}: Props) {\n return (\n
  • \n \n \n {valueRenderer(valueGetter(value), value, ...keyPath)}\n \n
    • \n );\n}\n" }, { "path": "packages/react-json-tree/src/createStylingFromTheme.ts", "content": "import type { CurriedFunction1 } from 'lodash';\nimport { createStyling } from 'react-base16-styling';\nimport type {\n Base16Theme,\n StylingConfig,\n StylingFunction,\n Theme,\n} from 'react-base16-styling';\nimport solarized from './themes/solarized.js';\n\nconst colorMap = (theme: Base16Theme) => ({\n BACKGROUND_COLOR: theme.base00,\n TEXT_COLOR: theme.base07,\n STRING_COLOR: theme.base0B,\n DATE_COLOR: theme.base0B,\n NUMBER_COLOR: theme.base09,\n BOOLEAN_COLOR: theme.base09,\n NULL_COLOR: theme.base08,\n UNDEFINED_COLOR: theme.base08,\n FUNCTION_COLOR: theme.base08,\n SYMBOL_COLOR: theme.base08,\n LABEL_COLOR: theme.base0D,\n ARROW_COLOR: theme.base0D,\n ITEM_STRING_COLOR: theme.base0B,\n ITEM_STRING_EXPANDED_COLOR: theme.base03,\n});\n\ntype Color = keyof ReturnType;\ntype Colors = {\n [color in Color]: string;\n};\n\nconst valueColorMap = (colors: Colors) => ({\n String: colors.STRING_COLOR,\n Date: colors.DATE_COLOR,\n Number: colors.NUMBER_COLOR,\n Boolean: colors.BOOLEAN_COLOR,\n Null: colors.NULL_COLOR,\n Undefined: colors.UNDEFINED_COLOR,\n Function: colors.FUNCTION_COLOR,\n Symbol: colors.SYMBOL_COLOR,\n});\n\nconst getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {\n const colors = colorMap(theme);\n\n return {\n tree: {\n border: 0,\n padding: 0,\n marginTop: '0.5em',\n marginBottom: '0.5em',\n marginLeft: '0.125em',\n marginRight: 0,\n listStyle: 'none',\n MozUserSelect: 'none',\n WebkitUserSelect: 'none',\n backgroundColor: colors.BACKGROUND_COLOR,\n },\n\n value: ({ style }, nodeType, keyPath) => ({\n style: {\n ...style,\n paddingTop: '0.25em',\n paddingRight: 0,\n marginLeft: '0.875em',\n WebkitUserSelect: 'text',\n MozUserSelect: 'text',\n wordWrap: 'break-word',\n paddingLeft: (keyPath as unknown[]).length > 1 ? '2.125em' : '1.25em',\n textIndent: '-0.5em',\n wordBreak: 'break-all',\n },\n }),\n\n label: {\n display: 'inline-block',\n color: colors.LABEL_COLOR,\n },\n\n valueLabel: {\n margin: '0 0.5em 0 0',\n },\n\n valueText: ({ style }, nodeType) => ({\n style: {\n ...style,\n color:\n valueColorMap(colors)[\n nodeType as keyof ReturnType\n ],\n },\n }),\n\n itemRange: (styling, expanded) => ({\n style: {\n paddingTop: expanded ? 0 : '0.25em',\n cursor: 'pointer',\n color: colors.LABEL_COLOR,\n },\n }),\n\n arrow: ({ style }, nodeType, expanded) => ({\n style: {\n ...style,\n marginLeft: 0,\n transition: '150ms',\n WebkitTransition: '150ms',\n MozTransition: '150ms',\n WebkitTransform: expanded ? 'rotateZ(90deg)' : 'rotateZ(0deg)',\n MozTransform: expanded ? 'rotateZ(90deg)' : 'rotateZ(0deg)',\n transform: expanded ? 'rotateZ(90deg)' : 'rotateZ(0deg)',\n transformOrigin: '45% 50%',\n WebkitTransformOrigin: '45% 50%',\n MozTransformOrigin: '45% 50%',\n position: 'relative',\n lineHeight: '1.1em',\n fontSize: '0.75em',\n },\n }),\n\n arrowContainer: ({ style }, arrowStyle) => ({\n style: {\n ...style,\n display: 'inline-block',\n paddingRight: '0.5em',\n paddingLeft: arrowStyle === 'double' ? '1em' : 0,\n cursor: 'pointer',\n },\n }),\n\n arrowSign: {\n color: colors.ARROW_COLOR,\n },\n\n arrowSignInner: {\n position: 'absolute',\n top: 0,\n left: '-0.4em',\n },\n\n nestedNode: ({ style }, keyPath, nodeType, expanded, expandable) => ({\n style: {\n ...style,\n position: 'relative',\n paddingTop: '0.25em',\n marginLeft: (keyPath as unknown[]).length > 1 ? '0.875em' : 0,\n paddingLeft: !expandable ? '1.125em' : 0,\n },\n }),\n\n rootNode: {\n padding: 0,\n margin: 0,\n },\n\n nestedNodeLabel: ({ style }, keyPath, nodeType, expanded, expandable) => ({\n style: {\n ...style,\n margin: 0,\n padding: 0,\n WebkitUserSelect: expandable ? 'inherit' : 'text',\n MozUserSelect: expandable ? 'inherit' : 'text',\n cursor: expandable ? 'pointer' : 'default',\n },\n }),\n\n nestedNodeItemString: ({ style }, keyPath, nodeType, expanded) => ({\n style: {\n ...style,\n paddingLeft: '0.5em',\n cursor: 'default',\n color: expanded\n ? colors.ITEM_STRING_EXPANDED_COLOR\n : colors.ITEM_STRING_COLOR,\n },\n }),\n\n nestedNodeItemType: {\n marginLeft: '0.3em',\n marginRight: '0.3em',\n },\n\n nestedNodeChildren: ({ style }, nodeType, expanded) => ({\n style: {\n ...style,\n padding: 0,\n margin: 0,\n listStyle: 'none',\n display: expanded ? 'block' : 'none',\n },\n }),\n\n rootNodeChildren: {\n padding: 0,\n margin: 0,\n listStyle: 'none',\n },\n };\n};\n\nconst createStylingFromTheme: CurriedFunction1<\n Theme | undefined,\n StylingFunction\n> = createStyling(getDefaultThemeStyling, {\n defaultBase16: solarized,\n});\n\nexport default createStylingFromTheme;\n" }, { "path": "packages/react-json-tree/src/getCollectionEntries.ts", "content": "import type { SortObjectKeys } from './types.js';\n\nfunction getLength(type: string, collection: unknown) {\n if (type === 'Object') {\n return Object.keys(collection as object).length;\n } else if (type === 'Array') {\n return (collection as unknown[]).length;\n }\n\n return Infinity;\n}\n\nfunction isIterableMap(collection: unknown) {\n return typeof (collection as Map).set === 'function';\n}\n\nfunction getEntries(\n type: string,\n collection: any,\n sortObjectKeys: SortObjectKeys,\n from = 0,\n to = Infinity,\n): { entries: { key: string | number; value: unknown }[]; hasMore?: boolean } {\n let res;\n\n if (type === 'Object') {\n let keys = Object.getOwnPropertyNames(collection);\n\n if (sortObjectKeys) {\n keys.sort(sortObjectKeys === true ? undefined : sortObjectKeys);\n }\n\n keys = keys.slice(from, to + 1);\n\n res = {\n entries: keys.map((key) => ({ key, value: collection[key] })),\n };\n } else if (type === 'Array') {\n res = {\n entries: collection\n .slice(from, to + 1)\n .map((val: unknown, idx: number) => ({ key: idx + from, value: val })),\n };\n } else {\n let idx = 0;\n const entries = [];\n let done = true;\n\n const isMap = isIterableMap(collection);\n\n for (const item of collection) {\n if (idx > to) {\n done = false;\n break;\n }\n if (from <= idx) {\n if (isMap && Array.isArray(item)) {\n if (typeof item[0] === 'string' || typeof item[0] === 'number') {\n entries.push({ key: item[0], value: item[1] });\n } else {\n entries.push({\n key: `[entry ${idx}]`,\n value: {\n '[key]': item[0],\n '[value]': item[1],\n },\n });\n }\n } else {\n entries.push({ key: idx, value: item });\n }\n }\n idx++;\n }\n\n res = {\n hasMore: !done,\n entries,\n };\n }\n\n return res;\n}\n\nfunction getRanges(from: number, to: number, limit: number) {\n const ranges = [];\n while (to - from > limit * limit) {\n limit = limit * limit;\n }\n for (let i = from; i <= to; i += limit) {\n ranges.push({ from: i, to: Math.min(to, i + limit - 1) });\n }\n\n return ranges;\n}\n\nexport default function getCollectionEntries(\n type: string,\n collection: unknown,\n sortObjectKeys: SortObjectKeys,\n limit: number,\n from = 0,\n to = Infinity,\n) {\n const getEntriesBound = getEntries.bind(\n null,\n type,\n collection,\n sortObjectKeys,\n );\n\n if (!limit) {\n return getEntriesBound().entries;\n }\n\n const isSubset = to < Infinity;\n const length = Math.min(to - from, getLength(type, collection));\n\n if (type !== 'Iterable') {\n if (length <= limit || limit < 7) {\n return getEntriesBound(from, to).entries;\n }\n } else {\n if (length <= limit && !isSubset) {\n return getEntriesBound(from, to).entries;\n }\n }\n\n let limitedEntries;\n if (type === 'Iterable') {\n const { hasMore, entries } = getEntriesBound(from, from + limit - 1);\n\n limitedEntries = hasMore\n ? [...entries, ...getRanges(from + limit, from + 2 * limit - 1, limit)]\n : entries;\n } else {\n limitedEntries = isSubset\n ? getRanges(from, to, limit)\n : [\n ...getEntriesBound(0, limit - 5).entries,\n ...getRanges(limit - 4, length - 5, limit),\n ...getEntriesBound(length - 4, length - 1).entries,\n ];\n }\n\n return limitedEntries;\n}\n" }, { "path": "packages/react-json-tree/src/index.tsx", "content": "// ES6 + inline style port of JSONViewer https://bitbucket.org/davevedder/react-json-viewer/\n// all credits and original code to the author\n// Dave Vedder http://www.eskimospy.com/\n// port by Daniele Zannotti http://www.github.com/dzannotti \n\nimport React, { useMemo } from 'react';\nimport { invertTheme } from 'react-base16-styling';\nimport type { StylingValue, Theme } from 'react-base16-styling';\nimport JSONNode from './JSONNode.js';\nimport createStylingFromTheme from './createStylingFromTheme.js';\nimport type {\n CommonExternalProps,\n GetItemString,\n IsCustomNode,\n LabelRenderer,\n ShouldExpandNodeInitially,\n} from './types.js';\n\ninterface Props extends Partial {\n data: unknown;\n theme?: Theme;\n invertTheme?: boolean;\n}\n\nconst identity = (value: any) => value;\nconst expandRootNode: ShouldExpandNodeInitially = (keyPath, data, level) =>\n level === 0;\nconst defaultItemString: GetItemString = (type, data, itemType, itemString) => (\n \n {itemType} {itemString}\n \n);\nconst defaultLabelRenderer: LabelRenderer = ([label]) => {label}:;\nconst noCustomNode: IsCustomNode = () => false;\n\nexport function JSONTree({\n data: value,\n theme,\n invertTheme: shouldInvertTheme,\n keyPath = ['root'],\n labelRenderer = defaultLabelRenderer,\n valueRenderer = identity,\n shouldExpandNodeInitially = expandRootNode,\n hideRoot = false,\n getItemString = defaultItemString,\n postprocessValue = identity,\n isCustomNode = noCustomNode,\n collectionLimit = 50,\n sortObjectKeys = false,\n}: Props) {\n const styling = useMemo(\n () =>\n createStylingFromTheme(shouldInvertTheme ? invertTheme(theme) : theme),\n [theme, shouldInvertTheme],\n );\n\n return (\n
      \n \n
    \n );\n}\n\nexport type {\n Key,\n KeyPath,\n GetItemString,\n LabelRenderer,\n ValueRenderer,\n ShouldExpandNodeInitially,\n PostprocessValue,\n IsCustomNode,\n SortObjectKeys,\n Styling,\n CommonExternalProps,\n} from './types.js';\nexport type { StylingValue };\n" }, { "path": "packages/react-json-tree/src/objType.ts", "content": "export default function objType(obj: any) {\n const type = Object.prototype.toString.call(obj).slice(8, -1);\n if (type === 'Object' && typeof obj[Symbol.iterator] === 'function') {\n return 'Iterable';\n }\n\n if (\n type === 'Custom' &&\n obj.constructor !== Object &&\n obj instanceof Object\n ) {\n // For projects implementing objects overriding `.prototype[Symbol.toStringTag]`\n return 'Object';\n }\n\n return type;\n}\n" }, { "path": "packages/react-json-tree/src/themes/solarized.ts", "content": "export default {\n scheme: 'solarized',\n author: 'ethan schoonover (http://ethanschoonover.com/solarized)',\n base00: '#002b36',\n base01: '#073642',\n base02: '#586e75',\n base03: '#657b83',\n base04: '#839496',\n base05: '#93a1a1',\n base06: '#eee8d5',\n base07: '#fdf6e3',\n base08: '#dc322f',\n base09: '#cb4b16',\n base0A: '#b58900',\n base0B: '#859900',\n base0C: '#2aa198',\n base0D: '#268bd2',\n base0E: '#6c71c4',\n base0F: '#d33682',\n};\n" }, { "path": "packages/react-json-tree/src/types.ts", "content": "import React from 'react';\nimport { StylingFunction } from 'react-base16-styling';\n\nexport type Key = string | number;\n\nexport type KeyPath = readonly (string | number)[];\n\nexport type GetItemString = (\n nodeType: string,\n data: unknown,\n itemType: React.ReactNode,\n itemString: string,\n keyPath: KeyPath,\n) => React.ReactNode;\n\nexport type LabelRenderer = (\n keyPath: KeyPath,\n nodeType: string,\n expanded: boolean,\n expandable: boolean,\n) => React.ReactNode;\n\nexport type ValueRenderer = (\n valueAsString: unknown,\n value: unknown,\n ...keyPath: KeyPath\n) => React.ReactNode;\n\nexport type ShouldExpandNodeInitially = (\n keyPath: KeyPath,\n data: unknown,\n level: number,\n) => boolean;\n\nexport type PostprocessValue = (value: unknown) => unknown;\n\nexport type IsCustomNode = (value: unknown) => boolean;\n\nexport type SortObjectKeys = ((a: unknown, b: unknown) => number) | boolean;\n\nexport type Styling = StylingFunction;\n\nexport type CircularCache = unknown[];\n\nexport interface CommonExternalProps {\n keyPath: KeyPath;\n labelRenderer: LabelRenderer;\n valueRenderer: ValueRenderer;\n shouldExpandNodeInitially: ShouldExpandNodeInitially;\n hideRoot: boolean;\n getItemString: GetItemString;\n postprocessValue: PostprocessValue;\n isCustomNode: IsCustomNode;\n collectionLimit: number;\n sortObjectKeys: SortObjectKeys;\n}\n\nexport interface CommonInternalProps extends CommonExternalProps {\n styling: StylingFunction;\n circularCache?: CircularCache;\n level?: number;\n isCircular?: boolean;\n}\n" }, { "path": "packages/react-json-tree/test/objType.spec.ts", "content": "import objType from '../src/objType.js';\n\ndescribe('objType', () => {\n it('should determine the correct type', () => {\n expect(objType({})).toBe('Object');\n expect(objType([])).toBe('Array');\n expect(objType(new Map())).toBe('Map');\n expect(objType(new WeakMap())).toBe('WeakMap');\n expect(objType(new Set())).toBe('Set');\n expect(objType(new WeakSet())).toBe('WeakSet');\n expect(objType(new Error())).toBe('Error');\n expect(objType(new Date())).toBe('Date');\n expect(\n objType(() => {\n // noop\n }),\n ).toBe('Function');\n expect(objType('')).toBe('String');\n expect(objType(true)).toBe('Boolean');\n expect(objType(null)).toBe('Null');\n expect(objType(undefined)).toBe('Undefined');\n expect(objType(10)).toBe('Number');\n expect(objType(Symbol.iterator)).toBe('Symbol');\n });\n});\n" }, { "path": "packages/react-json-tree/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/react-json-tree/tsconfig.test.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\"]\n },\n \"include\": [\"src\", \"test\"]\n}\n" }, { "path": "packages/redux-devtools/CHANGELOG.md", "content": "# Change Log\n\n## 5.0.0\n\n### Major Changes\n\n- 804d6bd: Convert @redux-devtools/core to ESM\n\n### Patch Changes\n\n- Updated dependencies [3f90241]\n - @redux-devtools/instrument@3.0.0\n\n## 4.1.1\n\n### Patch Changes\n\n- 91f21b2: Fix compatibility of createDevTools with React 19 types\n\n## 4.1.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n## 4.0.0\n\n### Major Changes\n\n- decc035: Remove support for legacy context. Minimum supported react-redux version is 7.0.0 and minimum support React version is 16.8.4.\n\n## 3.14.0\n\n### Minor Changes\n\n- 6fc18ed7: Add new Redux version to peer dependencies\n\n### Patch Changes\n\n- 7f5bddbd: Widen peer dependencies\n- Updated dependencies [6fc18ed7]\n - @redux-devtools/instrument@2.2.0\n\n## 3.13.3\n\n### Patch Changes\n\n- 42531c50: Bump versions\n- Updated dependencies [42531c50]\n - @redux-devtools/instrument@2.1.1\n\n## 3.13.2\n\n### Patch Changes\n\n- 65205f90: Replace Action with Action\n\n## 3.13.1\n\n### Patch Changes\n\n- a55ba302: Fix peer dependencies on @redux-devtools/core\n\n## 3.13.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n## 3.12.0\n\n### Minor Changes\n\n- 4891bf6: Add react-redux v8 to peerDependencies range\n\n## [3.9.0](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/core@3.8.0...@redux-devtools/core@3.9.0) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## 3.8.0 (2021-03-06)\n\n### Bug Fixes\n\n- **redux-devtools:** type MonitorState should extend LiftedState ([#612](https://github.com/reduxjs/redux-devtools/issues/612)) ([47af8c9](https://github.com/reduxjs/redux-devtools/commit/47af8c98ce87fa115d093e2c578a0cd48c058792))\n\n### Features\n\n- **redux-devtools:** add more exported types ([#611](https://github.com/reduxjs/redux-devtools/issues/611)) ([0f51992](https://github.com/reduxjs/redux-devtools/commit/0f51992b0bac12c1334966e8f99a66681bdae8d6))\n- **redux-devtools:** convert counter example to TypeScript ([#616](https://github.com/reduxjs/redux-devtools/issues/616)) ([f1e3f4f](https://github.com/reduxjs/redux-devtools/commit/f1e3f4f8340dea288de5229006acf9dc1ef1cccf))\n- **redux-devtools:** convert todomvc example to TypeScript ([#618](https://github.com/reduxjs/redux-devtools/issues/618)) ([37191e4](https://github.com/reduxjs/redux-devtools/commit/37191e46e600cd9ac2839f0687efb347fc4ef7c1))\n- **redux-devtools:** export more types ([#615](https://github.com/reduxjs/redux-devtools/issues/615)) ([c154405](https://github.com/reduxjs/redux-devtools/commit/c154405c6c2448743040d0d7cfa9e8463b647a14))\n- **redux-devtools-slider-monitor:** convert example to TypeScript ([#632](https://github.com/reduxjs/redux-devtools/issues/632)) ([ec75d3a](https://github.com/reduxjs/redux-devtools/commit/ec75d3a4b62d0f4b8d52a739a7727142421cc261))\n\n## 3.6.0 (2020-07-28)\n\n## 3.5.0 (2018-12-21)\n\n## [3.7.0](https://github.com/reduxjs/redux-devtools/compare/redux-devtools@3.6.1...redux-devtools@3.7.0) (2020-09-07)\n\n### Bug Fixes\n\n- **redux-devtools:** type MonitorState should extend LiftedState ([#612](https://github.com/reduxjs/redux-devtools/issues/612)) ([47af8c9](https://github.com/reduxjs/redux-devtools/commit/47af8c98ce87fa115d093e2c578a0cd48c058792))\n\n### Features\n\n- **redux-devtools:** add more exported types ([#611](https://github.com/reduxjs/redux-devtools/issues/611)) ([0f51992](https://github.com/reduxjs/redux-devtools/commit/0f51992b0bac12c1334966e8f99a66681bdae8d6))\n- **redux-devtools:** convert counter example to TypeScript ([#616](https://github.com/reduxjs/redux-devtools/issues/616)) ([f1e3f4f](https://github.com/reduxjs/redux-devtools/commit/f1e3f4f8340dea288de5229006acf9dc1ef1cccf))\n- **redux-devtools:** convert todomvc example to TypeScript ([#618](https://github.com/reduxjs/redux-devtools/issues/618)) ([37191e4](https://github.com/reduxjs/redux-devtools/commit/37191e46e600cd9ac2839f0687efb347fc4ef7c1))\n- **redux-devtools:** export more types ([#615](https://github.com/reduxjs/redux-devtools/issues/615)) ([c154405](https://github.com/reduxjs/redux-devtools/commit/c154405c6c2448743040d0d7cfa9e8463b647a14))\n\n## [3.6.1](https://github.com/reduxjs/redux-devtools/compare/redux-devtools@3.6.0...redux-devtools@3.6.1) (2020-08-14)\n\n**Note:** Version bump only for package redux-devtools\n" }, { "path": "packages/redux-devtools/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Dan Abramov\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.\n" }, { "path": "packages/redux-devtools/README.md", "content": "# Redux DevTools\n\nA live-editing time travel environment for [Redux](https://github.com/reactjs/redux). \n**[See Dan's React Europe talk demoing it!](http://youtube.com/watch?v=xsSnOQynTHs)**\n\n> Note that the implemention in this repository is different from [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension). Please refer to the latter for browser extension.\n\n### Table of Contents\n\n- [Features](#features)\n- [Overview](#overview)\n- [Browser Extension](#browser-extension)\n- [Setup Instructions](#setup-instructions)\n- [Custom Monitors](#custom-monitors)\n- [License](#license)\n\n[![npm version](https://img.shields.io/npm/v/redux-devtools.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools)\n[![npm downloads](https://img.shields.io/npm/dm/redux-devtools.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools)\n[![redux channel on discord](https://img.shields.io/badge/discord-redux@reactiflux-738bd7.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bWb10Ma)\n\n![](http://i.imgur.com/J4GeW0M.gif)\n\n### Features\n\n- Lets you inspect every state and action payload\n- Lets you go back in time by “cancelling” actions\n- If you change the reducer code, each “staged” action will be re-evaluated\n- If the reducers throw, you will see during which action this happened, and what the error was\n- With `persistState()` store enhancer, you can persist debug sessions across page reloads\n\n### Overview\n\nRedux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](../../docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.\n\nIf you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor#features).\n\n### Browser Extension\n\nIf you don’t want to bother with installing Redux DevTools and integrating it into your project, consider using [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) for Chrome and Firefox. It provides access to the most popular monitors, is easy to configure to filter actions, and doesn’t require installing any packages.\n\n### Setup Instructions\n\nRead the installation [walkthrough](../../docs/Walkthrough.md) for integration instructions and usage examples (`` component, `DevTools.instrument()`, exclude from production builds, gotchas).\n\n### Running Examples\n\nClone the project:\n\n```\ngit clone https://github.com/reduxjs/redux-devtools.git\ncd redux-devtools/packages/redux-devtools\n```\n\nRun `npm install` in the package folder:\n\n```\nnpm install\n```\n\nNow you can open an example folder and run `npm install` there:\n\n```\ncd examples/counter # or examples/todomvc\nnpm install\n```\n\nFinally, run the development server and open the page:\n\n```\nnpm start\nopen http://localhost:3000\n```\n\nTry clicking on actions in the log, or changing some code inside the reducers. You should see the action log re-evaluate the state on every code change.\n\nAlso try opening `http://localhost:3000/?debug_session=123`, click around, and then refresh. You should see that all actions have been restored from the local storage.\n\n### Custom Monitors\n\n**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) are just examples of what is possible.\n\n**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)**\n\nSome crazy ideas for custom monitors:\n\n- A slider that lets you jump between computed states just by dragging it\n- An in-app layer that shows the last N states right in the app (e.g. for animation)\n- A time machine like interface where the last N states of your app reside on different Z layers\n- Feel free to come up with and implement your own! Check [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) `propTypes` to see what you can do.\n\nIn fact some of these are implemented already:\n\n#### [Slider Monitor](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-slider-monitor)\n\n![](https://camo.githubusercontent.com/47a3f427c9d2e0c763b74e33417b3001fe8604b6/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f662e636c2e6c792f6974656d732f3149335032323243334e3252314d3279314b33622f53637265656e2532305265636f7264696e67253230323031352d31322d3232253230617425323030372e3230253230504d2e6769663f763d3162363236376537)\n\n#### [Inspector Monitor](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector-monitor)\n\n![](http://i.imgur.com/fYh8fk5.gif)\n\n#### [Diff Monitor](https://github.com/whetstone/redux-devtools-diff-monitor)\n\n![](https://camo.githubusercontent.com/c2c0ba1ad82d003b5386404ae09c00763d73510c/687474703a2f2f692e696d6775722e636f6d2f72764352394f512e706e67)\n\n#### [Filterable Log Monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor/)\n\n![redux-devtools-filterable-log-monitor](https://cloud.githubusercontent.com/assets/29597/12440009/182bb31c-beec-11e5-8fd0-bdda48e646b2.gif)\n\n#### [Chart Monitor](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor)\n\n![redux-devtools-chart-monitor](http://i.imgur.com/MSgvU6l.gif)\n\n#### [Filter Actions](https://github.com/zalmoxisus/redux-devtools-filter-actions)\n\n(Does not have a UI but can wrap any other monitor)\n\n\n\n#### [Dispatch](https://github.com/YoruNoHikage/redux-devtools-dispatch)\n\n![redux-devtools-dispatch](https://cloud.githubusercontent.com/assets/969003/12874321/2c3624ec-cdd2-11e5-9856-fd7e24efb8d5.gif)\n\n#### [Redux Usage Report](https://github.com/aholachek/redux-usage-report)\n\n![redux-usage-report](https://furtive-discussion.surge.sh/redux-usage-monitor.gif)\n\n#### Keep them coming!\n\nCreate a PR to add your custom monitor.\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools/eslint.config.mjs", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\nimport eslintTsReactJest from '../../eslint.ts.react.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n ...eslintTsReactJest(import.meta.dirname),\n {\n ignores: ['examples', 'jest.config.ts', 'lib'],\n },\n];\n" }, { "path": "packages/redux-devtools/examples/counter/CHANGELOG.md", "content": "# counter-redux\n\n## 0.1.13\n\n### Patch Changes\n\n- Updated dependencies [12849a4]\n- Updated dependencies [804d6bd]\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/log-monitor@6.0.0\n - @redux-devtools/core@5.0.0\n\n## 0.1.12\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n - @redux-devtools/dock-monitor@4.1.1\n - @redux-devtools/log-monitor@5.1.1\n\n## 0.1.11\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/log-monitor@6.0.0\n - @redux-devtools/core@4.1.0\n\n## 0.1.10\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n- Updated dependencies [decc035]\n - @redux-devtools/dock-monitor@4.0.0\n - @redux-devtools/log-monitor@5.0.0\n - @redux-devtools/core@4.0.0\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - @redux-devtools/dock-monitor@3.0.0\n - @redux-devtools/log-monitor@4.0.0\n - @redux-devtools/core@3.13.0\n\n## 0.1.8\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n - @redux-devtools/dock-monitor@2.1.1\n - @redux-devtools/log-monitor@3.1.1\n" }, { "path": "packages/redux-devtools/examples/counter/README.md", "content": "# Redux DevTools Counter example\n\n## Running Example\n\nFirst, clone the project:\n\n```\ngit clone https://github.com/reduxjs/redux-devtools.git\n```\n\nThen install the dependencies in the package folder:\n\n```\ncd redux-devtools/packages/redux-devtools\nnpm install\n```\n\nInstall the dependencies in the example folder:\n\n```\ncd examples/counter\nnpm install\n```\n\nFinally, run the project:\n\n```\nnpm start\nopen http://localhost:3000\n```\n" }, { "path": "packages/redux-devtools/examples/counter/eslint.config.mjs", "content": "import eslintJs from '../../../../eslint.js.config.base.mjs';\nimport eslintTs from '../../../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTs(\n import.meta.dirname,\n ['webpack.config.ts'],\n ['./tsconfig.webpack.json'],\n ),\n {\n ignores: ['dist'],\n },\n];\n" }, { "path": "packages/redux-devtools/examples/counter/index.html", "content": "\n \n Redux Counter Example\n \n \n
    \n \n\n" }, { "path": "packages/redux-devtools/examples/counter/package.json", "content": "{\n \"private\": true,\n \"name\": \"counter-redux\",\n \"version\": \"0.1.13\",\n \"description\": \"Counter example for redux\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools/examples/counter\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"start\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack serve --open\",\n \"build\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@redux-devtools/core\": \"workspace:^\",\n \"@redux-devtools/dock-monitor\": \"workspace:^\",\n \"@redux-devtools/log-monitor\": \"workspace:^\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-redux\": \"^9.2.0\",\n \"redux\": \"^5.0.1\",\n \"redux-thunk\": \"^3.1.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.29.0\",\n \"@babel/preset-env\": \"^7.29.0\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@types/webpack-env\": \"^1.18.8\",\n \"babel-loader\": \"^10.1.1\",\n \"cross-env\": \"^10.1.0\",\n \"fork-ts-checker-webpack-plugin\": \"^9.1.0\",\n \"html-webpack-plugin\": \"^5.6.6\",\n \"ts-node\": \"^10.9.2\",\n \"typescript\": \"~5.9.3\",\n \"webpack\": \"^5.105.4\",\n \"webpack-cli\": \"^7.0.0\",\n \"webpack-dev-server\": \"^5.2.3\"\n }\n}\n" }, { "path": "packages/redux-devtools/examples/counter/src/actions/CounterActions.ts", "content": "import { ThunkAction } from 'redux-thunk';\nimport { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';\nimport { CounterState } from '../reducers';\n\ninterface IncrementCounterAction {\n type: typeof INCREMENT_COUNTER;\n}\nexport function increment(): IncrementCounterAction {\n return {\n type: INCREMENT_COUNTER,\n };\n}\n\ninterface DecrementCounterAction {\n type: typeof DECREMENT_COUNTER;\n}\nexport function decrement(): DecrementCounterAction {\n return {\n type: DECREMENT_COUNTER,\n };\n}\n\nexport type CounterAction = IncrementCounterAction | DecrementCounterAction;\n\nexport function incrementIfOdd(): ThunkAction<\n void,\n CounterState,\n never,\n CounterAction\n> {\n return (dispatch, getState) => {\n const { counter } = getState();\n\n if (counter % 2 === 0) {\n return;\n }\n\n dispatch(increment());\n };\n}\n\nexport function incrementAsync(): ThunkAction<\n void,\n CounterState,\n never,\n CounterAction\n> {\n return (dispatch) => {\n setTimeout(() => {\n dispatch(increment());\n }, 1000);\n };\n}\n" }, { "path": "packages/redux-devtools/examples/counter/src/components/Counter.tsx", "content": "import React, { Component } from 'react';\n\ninterface Props {\n increment: () => void;\n incrementIfOdd: () => void;\n decrement: () => void;\n counter: number;\n}\n\nexport default class Counter extends Component {\n render() {\n const { increment, incrementIfOdd, decrement, counter } = this.props;\n return (\n

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

    \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/counter/src/constants/ActionTypes.ts", "content": "export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';\nexport const DECREMENT_COUNTER = 'DECREMENT_COUNTER';\n" }, { "path": "packages/redux-devtools/examples/counter/src/containers/CounterApp.tsx", "content": "import React, { Component } from 'react';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { connect } from 'react-redux';\nimport Counter from '../components/Counter';\nimport * as CounterActions from '../actions/CounterActions';\nimport { CounterAction } from '../actions/CounterActions';\nimport { CounterState } from '../reducers';\n\ninterface Props {\n counter: number;\n dispatch: Dispatch;\n}\n\nclass CounterApp extends Component {\n render() {\n const { counter, dispatch } = this.props;\n return (\n \n );\n }\n}\n\nfunction select(state: CounterState) {\n return {\n counter: state.counter,\n };\n}\n\nexport default connect(select)(CounterApp);\n" }, { "path": "packages/redux-devtools/examples/counter/src/containers/DevTools.tsx", "content": "import React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { LogMonitor } from '@redux-devtools/log-monitor';\nimport { DockMonitor } from '@redux-devtools/dock-monitor';\n\nexport default createDevTools(\n \n \n ,\n);\n" }, { "path": "packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx", "content": "import React, { Component } from 'react';\nimport { Provider } from 'react-redux';\nimport { Store } from 'redux';\nimport CounterApp from './CounterApp';\nimport DevTools from './DevTools';\nimport { CounterState } from '../reducers';\nimport { CounterAction } from '../actions/CounterActions';\n\ninterface Props {\n store: Store;\n}\n\nexport default class Root extends Component {\n render() {\n const { store } = this.props;\n return (\n \n
    \n \n \n
    \n     \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx", "content": "import React, { Component } from 'react';\nimport { Provider } from 'react-redux';\nimport { Store } from 'redux';\nimport CounterApp from './CounterApp';\nimport { CounterState } from '../reducers';\nimport { CounterAction } from '../actions/CounterActions';\n\ninterface Props {\n store: Store;\n}\n\nexport default class Root extends Component {\n render() {\n const { store } = this.props;\n return (\n \n \n \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/counter/src/containers/Root.ts", "content": "import { Store } from 'redux';\nimport { CounterState } from '../reducers';\nimport { CounterAction } from '../actions/CounterActions';\nimport { ComponentType } from 'react';\n\ninterface Props {\n store: Store;\n}\nconst Root: ComponentType =\n process.env.NODE_ENV === 'production'\n ? // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./Root.prod').default\n : // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./Root.dev').default;\nexport default Root;\n" }, { "path": "packages/redux-devtools/examples/counter/src/index.tsx", "content": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport configureStore from './store/configureStore';\nimport Root from './containers/Root';\n\nconst store = configureStore();\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n" }, { "path": "packages/redux-devtools/examples/counter/src/reducers/counter.ts", "content": "import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';\nimport { CounterAction } from '../actions/CounterActions';\n\nexport default function counter(state = 0, action: CounterAction) {\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": "packages/redux-devtools/examples/counter/src/reducers/index.ts", "content": "import { combineReducers, Reducer } from 'redux';\nimport counter from './counter';\nimport { CounterAction } from '../actions/CounterActions';\n\nconst rootReducer: Reducer<\n CounterState,\n CounterAction,\n Partial\n> = combineReducers({\n counter,\n}) as any;\n\nexport interface CounterState {\n counter: number;\n}\n\nexport default rootReducer;\n" }, { "path": "packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts", "content": "import {\n createStore,\n applyMiddleware,\n compose,\n Reducer,\n StoreEnhancer,\n Middleware,\n} from 'redux';\nimport { persistState } from '@redux-devtools/core';\nimport { thunk } from 'redux-thunk';\nimport rootReducer, { CounterState } from '../reducers';\nimport DevTools from '../containers/DevTools';\nimport { CounterAction } from '../actions/CounterActions';\n\nfunction getDebugSessionKey() {\n const matches = /[?&]debug_session=([^&#]+)\\b/.exec(window.location.href);\n return matches && matches.length > 0 ? matches[1] : null;\n}\n\nconst enhancer: StoreEnhancer = compose(\n applyMiddleware(thunk as unknown as Middleware),\n DevTools.instrument(),\n persistState(getDebugSessionKey()),\n);\n\nexport default function configureStore(initialState?: Partial) {\n const store = createStore(rootReducer, initialState, enhancer);\n\n if (module.hot) {\n module.hot.accept('../reducers', () =>\n store.replaceReducer(\n // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('../reducers').default as Reducer<\n CounterState,\n CounterAction,\n Partial\n >,\n ),\n );\n }\n\n return store;\n}\n" }, { "path": "packages/redux-devtools/examples/counter/src/store/configureStore.prod.ts", "content": "import { createStore, applyMiddleware, Middleware } from 'redux';\nimport { thunk } from 'redux-thunk';\nimport rootReducer, { CounterState } from '../reducers';\n\nconst enhancer = applyMiddleware(thunk as unknown as Middleware);\n\nexport default function configureStore(initialState?: Partial) {\n return createStore(rootReducer, initialState, enhancer);\n}\n" }, { "path": "packages/redux-devtools/examples/counter/src/store/configureStore.ts", "content": "import { Store } from 'redux';\nimport { CounterState } from '../reducers';\nimport { CounterAction } from '../actions/CounterActions';\n\nconst configureStore: (\n initialState?: Partial,\n) => Store =\n process.env.NODE_ENV === 'production'\n ? // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./configureStore.prod').default\n : // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./configureStore.dev').default;\nexport default configureStore;\n" }, { "path": "packages/redux-devtools/examples/counter/tsconfig.json", "content": "{\n \"extends\": \"../../../../tsconfig.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"webpack-env\"]\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools/examples/counter/tsconfig.webpack.json", "content": "{\n \"extends\": \"../../../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"types\": [\"node\", \"webpack-dev-server\"]\n },\n \"include\": [\"webpack.config.ts\"]\n}\n" }, { "path": "packages/redux-devtools/examples/counter/webpack.config.ts", "content": "import * as path from 'path';\nimport * as webpack from 'webpack';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';\n\nconst config: webpack.Configuration = {\n mode: 'development',\n entry: './src/index.tsx',\n devtool: 'eval-source-map',\n devServer: {\n static: './dist',\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: './index.html',\n }),\n new ForkTsCheckerWebpackPlugin(),\n ],\n output: {\n filename: 'bundle.js',\n path: path.join(__dirname, 'dist'),\n clean: true,\n },\n module: {\n rules: [\n {\n test: /\\.(js|ts)x?$/,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: [\n ['@babel/preset-env', { targets: 'defaults' }],\n '@babel/preset-react',\n '@babel/preset-typescript',\n ],\n },\n },\n },\n ],\n },\n resolve: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n};\n\nexport default config;\n" }, { "path": "packages/redux-devtools/examples/todomvc/CHANGELOG.md", "content": "# todomvc\n\n## 0.2.12\n\n### Patch Changes\n\n- Updated dependencies [12849a4]\n- Updated dependencies [804d6bd]\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/log-monitor@6.0.0\n - @redux-devtools/core@5.0.0\n\n## 0.2.11\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n - @redux-devtools/dock-monitor@4.1.1\n - @redux-devtools/log-monitor@5.1.1\n\n## 0.2.10\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/log-monitor@6.0.0\n - @redux-devtools/core@4.1.0\n\n## 0.2.9\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n- Updated dependencies [decc035]\n - @redux-devtools/dock-monitor@4.0.0\n - @redux-devtools/log-monitor@5.0.0\n - @redux-devtools/core@4.0.0\n\n## 0.2.8\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - @redux-devtools/dock-monitor@3.0.0\n - @redux-devtools/log-monitor@4.0.0\n - @redux-devtools/core@3.13.0\n\n## 0.2.7\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n - @redux-devtools/dock-monitor@2.1.1\n - @redux-devtools/log-monitor@3.1.1\n" }, { "path": "packages/redux-devtools/examples/todomvc/README.md", "content": "# Redux DevTools todomvc example\n\n## Running Example\n\nFirst, clone the project:\n\n```\ngit clone https://github.com/reduxjs/redux-devtools.git\n```\n\nThen install the dependencies in the package folder:\n\n```\ncd redux-devtools/packages/redux-devtools\nnpm install\n```\n\nInstall the dependencies in the example folder:\n\n```\ncd examples/todomvc\nnpm install\n```\n\nFinally, run the project:\n\n```\nnpm start\nopen http://localhost:3000\n```\n" }, { "path": "packages/redux-devtools/examples/todomvc/eslint.config.mjs", "content": "import eslintJs from '../../../../eslint.js.config.base.mjs';\nimport eslintTs from '../../../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTs(\n import.meta.dirname,\n ['webpack.config.ts'],\n ['./tsconfig.webpack.json'],\n ),\n {\n ignores: ['dist'],\n },\n];\n" }, { "path": "packages/redux-devtools/examples/todomvc/index.html", "content": "\n \n Redux TodoMVC\n \n \n
    \n \n\n" }, { "path": "packages/redux-devtools/examples/todomvc/package.json", "content": "{\n \"private\": true,\n \"name\": \"todomvc\",\n \"version\": \"0.2.12\",\n \"description\": \"TodoMVC example for redux\",\n \"keywords\": [\n \"react\",\n \"reactjs\",\n \"hot\",\n \"reload\",\n \"hmr\",\n \"live\",\n \"edit\",\n \"webpack\",\n \"flux\",\n \"todomvc\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools/examples/todomvc\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"start\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack serve --open\",\n \"build\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@redux-devtools/core\": \"workspace:^\",\n \"@redux-devtools/dock-monitor\": \"workspace:^\",\n \"@redux-devtools/log-monitor\": \"workspace:^\",\n \"classnames\": \"^2.5.1\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-redux\": \"^9.2.0\",\n \"redux\": \"^5.0.1\",\n \"todomvc-app-css\": \"^2.4.3\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.29.0\",\n \"@babel/preset-env\": \"^7.29.0\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@types/webpack-env\": \"^1.18.8\",\n \"babel-loader\": \"^10.1.1\",\n \"cross-env\": \"^10.1.0\",\n \"css-loader\": \"^7.1.4\",\n \"fork-ts-checker-webpack-plugin\": \"^9.1.0\",\n \"html-webpack-plugin\": \"^5.6.6\",\n \"style-loader\": \"^4.0.0\",\n \"ts-node\": \"^10.9.2\",\n \"typescript\": \"~5.9.3\",\n \"webpack\": \"^5.105.4\",\n \"webpack-cli\": \"^7.0.0\",\n \"webpack-dev-server\": \"^5.2.3\"\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/actions/TodoActions.ts", "content": "import * as types from '../constants/ActionTypes';\n\ninterface AddTodoAction {\n type: typeof types.ADD_TODO;\n text: string;\n}\nexport function addTodo(text: string): AddTodoAction {\n return {\n type: types.ADD_TODO,\n text,\n };\n}\n\ninterface DeleteTodoAction {\n type: typeof types.DELETE_TODO;\n id: number;\n}\nexport function deleteTodo(id: number): DeleteTodoAction {\n return {\n type: types.DELETE_TODO,\n id,\n };\n}\n\ninterface EditTodoAction {\n type: typeof types.EDIT_TODO;\n id: number;\n text: string;\n}\nexport function editTodo(id: number, text: string): EditTodoAction {\n return {\n type: types.EDIT_TODO,\n id,\n text,\n };\n}\n\ninterface MarkTodoAction {\n type: typeof types.MARK_TODO;\n id: number;\n}\nexport function markTodo(id: number): MarkTodoAction {\n return {\n type: types.MARK_TODO,\n id,\n };\n}\n\ninterface MarkAllAction {\n type: typeof types.MARK_ALL;\n}\nexport function markAll(): MarkAllAction {\n return {\n type: types.MARK_ALL,\n };\n}\n\ninterface ClearMarkedAction {\n type: typeof types.CLEAR_MARKED;\n}\nexport function clearMarked(): ClearMarkedAction {\n return {\n type: types.CLEAR_MARKED,\n };\n}\n\nexport type TodoAction =\n | AddTodoAction\n | DeleteTodoAction\n | EditTodoAction\n | MarkTodoAction\n | MarkAllAction\n | ClearMarkedAction;\n\nexport interface TodoActions {\n addTodo(this: void, text: string): AddTodoAction;\n deleteTodo(this: void, id: number): DeleteTodoAction;\n editTodo(this: void, id: number, text: string): EditTodoAction;\n markTodo(this: void, id: number): MarkTodoAction;\n markAll(this: void): MarkAllAction;\n clearMarked(this: void): ClearMarkedAction;\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/components/Footer.tsx", "content": "import React, { Component, MouseEventHandler } from 'react';\nimport classnames from 'classnames';\nimport {\n SHOW_ALL,\n SHOW_MARKED,\n SHOW_UNMARKED,\n TodoFilter,\n} from '../constants/TodoFilters';\n\nconst FILTER_TITLES = {\n [SHOW_ALL]: 'All',\n [SHOW_UNMARKED]: 'Active',\n [SHOW_MARKED]: 'Completed',\n};\n\ninterface Props {\n markedCount: number;\n unmarkedCount: number;\n filter: TodoFilter;\n onClearMarked: MouseEventHandler;\n onShow: (filter: TodoFilter) => void;\n}\n\nexport default class Footer extends Component {\n render() {\n return (\n
    \n {this.renderTodoCount()}\n
      \n {([SHOW_ALL, SHOW_UNMARKED, SHOW_MARKED] as const).map((filter) => (\n
    • {this.renderFilterLink(filter)}
      • \n ))}\n
    \n {this.renderClearButton()}\n
    \n );\n }\n\n renderTodoCount() {\n const { unmarkedCount } = this.props;\n const itemWord = unmarkedCount === 1 ? 'item' : 'items';\n\n return (\n \n {unmarkedCount || 'No'} {itemWord} left\n \n );\n }\n\n renderFilterLink(filter: TodoFilter) {\n const title = FILTER_TITLES[filter];\n const { filter: selectedFilter, onShow } = this.props;\n\n return (\n onShow(filter)}\n >\n {title}\n \n );\n }\n\n renderClearButton() {\n const { markedCount, onClearMarked } = this.props;\n if (markedCount > 0) {\n return (\n \n );\n }\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/components/Header.tsx", "content": "import React, { Component } from 'react';\nimport TodoTextInput from './TodoTextInput';\n\ninterface Props {\n addTodo: (text: string) => void;\n}\n\nexport default class Header extends Component {\n handleSave = (text: string) => {\n if (text.length !== 0) {\n this.props.addTodo(text);\n }\n };\n\n render() {\n return (\n
    \n

    todos

    \n \n
    \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/components/MainSection.tsx", "content": "import React, { Component, MouseEventHandler } from 'react';\nimport TodoItem from './TodoItem';\nimport Footer from './Footer';\nimport {\n SHOW_ALL,\n SHOW_MARKED,\n SHOW_UNMARKED,\n TodoFilter,\n} from '../constants/TodoFilters';\nimport { Todo } from '../reducers/todos';\nimport { TodoActions } from '../actions/TodoActions';\n\nconst TODO_FILTERS = {\n [SHOW_ALL]: () => true,\n [SHOW_UNMARKED]: (todo: Todo) => !todo.marked,\n [SHOW_MARKED]: (todo: Todo) => todo.marked,\n};\n\ninterface State {\n filter: TodoFilter;\n}\n\ninterface Props {\n todos: Todo[];\n actions: TodoActions;\n}\n\nexport default class MainSection extends Component {\n // Keep a counter that can be used to create an html `id` attribute.\n static mountCount = 0;\n\n state: State = { filter: SHOW_ALL };\n htmlFormInputId = `toggle-all-${MainSection.mountCount++}`;\n\n handleClearMarked: MouseEventHandler = () => {\n const atLeastOneMarked = this.props.todos.some((todo) => todo.marked);\n if (atLeastOneMarked) {\n this.props.actions.clearMarked();\n }\n };\n\n handleShow = (filter: TodoFilter) => {\n this.setState({ filter });\n };\n\n render() {\n const { todos, actions } = this.props;\n const { filter } = this.state;\n\n const filteredTodos = todos.filter(TODO_FILTERS[filter]);\n const markedCount = todos.reduce(\n (count, todo) => (todo.marked ? count + 1 : count),\n 0,\n );\n\n return (\n
    \n {this.renderToggleAll(markedCount)}\n
      \n {filteredTodos.map((todo) => (\n \n ))}\n
    \n {this.renderFooter(markedCount)}\n
    \n );\n }\n\n renderToggleAll(markedCount: number) {\n const { todos, actions } = this.props;\n\n if (todos.length > 0) {\n return (\n
    \n \n \n
    \n );\n }\n }\n\n renderFooter(markedCount: number) {\n const { todos } = this.props;\n const { filter } = this.state;\n const unmarkedCount = todos.length - markedCount;\n\n if (todos.length) {\n return (\n \n );\n }\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/components/TodoItem.tsx", "content": "import React, { Component } from 'react';\nimport classnames from 'classnames';\nimport TodoTextInput from './TodoTextInput';\nimport { Todo } from '../reducers/todos';\n\ninterface State {\n editing: boolean;\n}\n\ninterface Props {\n todo: Todo;\n addTodo: (text: string) => void;\n deleteTodo: (id: number) => void;\n editTodo: (id: number, text: string) => void;\n markTodo: (id: number) => void;\n markAll: () => void;\n clearMarked: () => void;\n}\n\nexport default class TodoItem extends Component {\n state: State = {\n editing: false,\n };\n\n handleDoubleClick = () => {\n this.setState({ editing: true });\n };\n\n handleSave(id: number, text: string) {\n if (text.length === 0) {\n this.props.deleteTodo(id);\n } else {\n this.props.editTodo(id, text);\n }\n this.setState({ editing: false });\n }\n\n render() {\n const { todo, markTodo, deleteTodo } = this.props;\n\n let element;\n if (this.state.editing) {\n element = (\n this.handleSave(todo.id, text)}\n />\n );\n } else {\n element = (\n
    \n markTodo(todo.id)}\n />\n \n
    \n );\n }\n\n return (\n \n {element}\n \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/components/TodoTextInput.tsx", "content": "import React, {\n ChangeEventHandler,\n Component,\n FocusEventHandler,\n KeyboardEventHandler,\n} from 'react';\nimport classnames from 'classnames';\n\ninterface State {\n text: string;\n}\n\ninterface Props {\n onSave: (text: string) => void;\n text?: string;\n placeholder?: string;\n editing?: boolean;\n newTodo?: boolean;\n}\n\nexport default class TodoTextInput extends Component {\n state = {\n text: this.props.text || '',\n };\n\n handleSubmit: KeyboardEventHandler = (e) => {\n const text = e.currentTarget.value.trim();\n if (e.which === 13) {\n this.props.onSave(text);\n if (this.props.newTodo) {\n this.setState({ text: '' });\n }\n }\n };\n\n handleChange: ChangeEventHandler = (e) => {\n this.setState({ text: e.target.value });\n };\n\n handleBlur: FocusEventHandler = (e) => {\n if (!this.props.newTodo) {\n this.props.onSave(e.target.value);\n }\n };\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/constants/ActionTypes.ts", "content": "export const ADD_TODO = 'ADD_TODO';\nexport const DELETE_TODO = 'DELETE_TODO';\nexport const EDIT_TODO = 'EDIT_TODO';\nexport const MARK_TODO = 'MARK_TODO';\nexport const MARK_ALL = 'MARK_ALL';\nexport const CLEAR_MARKED = 'CLEAR_MARKED';\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/constants/TodoFilters.ts", "content": "export const SHOW_ALL = 'show_all';\nexport const SHOW_MARKED = 'show_marked';\nexport const SHOW_UNMARKED = 'show_unmarked';\n\nexport type TodoFilter =\n | typeof SHOW_ALL\n | typeof SHOW_MARKED\n | typeof SHOW_UNMARKED;\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/containers/DevTools.tsx", "content": "import React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { LogMonitor } from '@redux-devtools/log-monitor';\nimport { DockMonitor } from '@redux-devtools/dock-monitor';\n\nexport default createDevTools(\n \n \n ,\n);\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/containers/Root.dev.tsx", "content": "import React, { Component } from 'react';\nimport { Provider } from 'react-redux';\nimport TodoApp from './TodoApp';\nimport DevTools from './DevTools';\nimport { Store } from 'redux';\nimport { TodoState } from '../reducers';\nimport { TodoAction } from '../actions/TodoActions';\n\ninterface Props {\n store: Store;\n}\n\nexport default class Root extends Component {\n render() {\n const { store } = this.props;\n return (\n \n
    \n \n \n
    \n     \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/containers/Root.prod.tsx", "content": "import React, { Component } from 'react';\nimport { Provider } from 'react-redux';\nimport TodoApp from './TodoApp';\nimport { Store } from 'redux';\nimport { TodoState } from '../reducers';\nimport { TodoAction } from '../actions/TodoActions';\n\ninterface Props {\n store: Store;\n}\n\nexport default class Root extends Component {\n render() {\n const { store } = this.props;\n return (\n \n \n \n );\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/containers/Root.ts", "content": "import { Store } from 'redux';\nimport { ComponentType } from 'react';\nimport { TodoState } from '../reducers';\nimport { TodoAction } from '../actions/TodoActions';\n\ninterface Props {\n store: Store;\n}\nconst Root: ComponentType =\n process.env.NODE_ENV === 'production'\n ? // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./Root.prod').default\n : // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./Root.dev').default;\nexport default Root;\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/containers/TodoApp.tsx", "content": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport Header from '../components/Header';\nimport MainSection from '../components/MainSection';\nimport * as TodoActions from '../actions/TodoActions';\nimport {\n TodoAction,\n TodoActions as TodoActionsType,\n} from '../actions/TodoActions';\nimport { TodoState } from '../reducers';\nimport { Todo } from '../reducers/todos';\n\ninterface Props {\n todos: Todo[];\n actions: TodoActionsType;\n}\n\nclass TodoApp extends Component {\n render() {\n const { todos, actions } = this.props;\n\n return (\n
    \n
    \n \n
    \n );\n }\n}\n\nfunction mapState(state: TodoState) {\n return {\n todos: state.todos,\n };\n}\n\nfunction mapDispatch(dispatch: Dispatch) {\n return {\n actions: bindActionCreators(TodoActions, dispatch),\n };\n}\n\nexport default connect(mapState, mapDispatch)(TodoApp);\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/index.tsx", "content": "import 'todomvc-app-css/index.css';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport configureStore from './store/configureStore';\nimport Root from './containers/Root';\n\nconst store = configureStore();\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/reducers/index.ts", "content": "import { combineReducers, Reducer } from 'redux';\nimport todos, { Todo } from './todos';\nimport { TodoAction } from '../actions/TodoActions';\n\nexport interface TodoState {\n todos: Todo[];\n}\n\nconst rootReducer: Reducer<\n TodoState,\n TodoAction,\n Partial\n> = combineReducers({\n todos,\n}) as any;\n\nexport default rootReducer;\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/reducers/todos.ts", "content": "import {\n ADD_TODO,\n DELETE_TODO,\n EDIT_TODO,\n MARK_TODO,\n MARK_ALL,\n CLEAR_MARKED,\n} from '../constants/ActionTypes';\nimport { TodoAction } from '../actions/TodoActions';\n\nexport interface Todo {\n text: string;\n marked: boolean;\n id: number;\n}\n\nconst initialState: Todo[] = [\n {\n text: 'Use Redux',\n marked: false,\n id: 0,\n },\n];\n\nexport default function todos(state = initialState, action: TodoAction) {\n switch (action.type) {\n case ADD_TODO:\n return [\n {\n id: state.length === 0 ? 0 : state[0].id + 1,\n marked: false,\n text: action.text,\n },\n ...state,\n ];\n\n case DELETE_TODO:\n return state.filter((todo) => todo.id !== action.id);\n\n case EDIT_TODO:\n return state.map((todo) =>\n todo.id === action.id ? { ...todo, text: action.text } : todo,\n );\n\n case MARK_TODO:\n return state.map((todo) =>\n todo.id === action.id ? { ...todo, marked: !todo.marked } : todo,\n );\n\n case MARK_ALL: {\n const areAllMarked = state.every((todo) => todo.marked);\n return state.map((todo) => ({\n ...todo,\n marked: !areAllMarked,\n }));\n }\n\n case CLEAR_MARKED:\n return state.filter((todo) => !todo.marked);\n\n default:\n return state;\n }\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/store/configureStore.dev.ts", "content": "import { createStore, compose, StoreEnhancer } from 'redux';\nimport { persistState } from '@redux-devtools/core';\nimport rootReducer, { TodoState } from '../reducers';\nimport DevTools from '../containers/DevTools';\n\nfunction getDebugSessionKey() {\n const matches = /[?&]debug_session=([^&#]+)\\b/.exec(window.location.href);\n return matches && matches.length > 0 ? matches[1] : null;\n}\n\nconst enhancer: StoreEnhancer = compose(\n DevTools.instrument(),\n persistState(getDebugSessionKey()),\n);\n\nexport default function configureStore(initialState?: Partial) {\n return createStore(rootReducer, initialState, enhancer);\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/store/configureStore.prod.ts", "content": "import { createStore } from 'redux';\nimport rootReducer, { TodoState } from '../reducers';\n\nexport default function configureStore(initialState?: Partial) {\n return createStore(rootReducer, initialState);\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/src/store/configureStore.ts", "content": "import { Store } from 'redux';\nimport { TodoState } from '../reducers';\nimport { TodoAction } from '../actions/TodoActions';\n\nconst configureStore: (\n initialState?: Partial,\n) => Store =\n process.env.NODE_ENV === 'production'\n ? // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./configureStore.prod').default\n : // eslint-disable-next-line @typescript-eslint/no-require-imports\n require('./configureStore.dev').default;\nexport default configureStore;\n" }, { "path": "packages/redux-devtools/examples/todomvc/tsconfig.json", "content": "{\n \"extends\": \"../../../../tsconfig.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"webpack-env\"]\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/tsconfig.webpack.json", "content": "{\n \"extends\": \"../../../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"types\": [\"node\", \"webpack-dev-server\"]\n },\n \"include\": [\"webpack.config.ts\"]\n}\n" }, { "path": "packages/redux-devtools/examples/todomvc/webpack.config.ts", "content": "import * as path from 'path';\nimport * as webpack from 'webpack';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';\n\nconst config: webpack.Configuration = {\n mode: 'development',\n entry: './src/index.tsx',\n devtool: 'eval-source-map',\n devServer: {\n static: './dist',\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: './index.html',\n }),\n new ForkTsCheckerWebpackPlugin(),\n ],\n output: {\n filename: 'bundle.js',\n path: path.join(__dirname, 'dist'),\n clean: true,\n },\n module: {\n rules: [\n {\n test: /\\.(js|ts)x?$/,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: [\n ['@babel/preset-env', { targets: 'defaults' }],\n '@babel/preset-react',\n '@babel/preset-typescript',\n ],\n },\n },\n },\n {\n test: /\\.css$/i,\n use: ['style-loader', 'css-loader'],\n },\n ],\n },\n resolve: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n};\n\nexport default config;\n" }, { "path": "packages/redux-devtools/jest.config.ts", "content": "import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createDefaultEsmPreset({\n tsconfig: 'tsconfig.test.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "packages/redux-devtools/package.json", "content": "{\n \"name\": \"@redux-devtools/core\",\n \"version\": \"5.0.0\",\n \"description\": \"Redux DevTools with hot reloading and time travel\",\n \"keywords\": [\n \"redux\",\n \"devtools\",\n \"flux\",\n \"hot reloading\",\n \"time travel\",\n \"live edit\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Dan Abramov (http://github.com/gaearon)\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint && pnpm run test\"\n },\n \"dependencies\": {\n \"@redux-devtools/instrument\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@jest/globals\": \"^30.3.0\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"jest\": \"^30.3.0\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-redux\": \"^9.2.0\",\n \"redux\": \"^5.0.1\",\n \"rimraf\": \"^6.1.3\",\n \"ts-jest\": \"^29.4.6\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-redux\": \"^7.0.0 || ^8.0.0 || ^9.0.0\",\n \"redux\": \"^3.5.2 || ^4.0.0 || ^5.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools/src/createDevTools.tsx", "content": "import React, { Children, Component } from 'react';\nimport { connect, Provider, ReactReduxContext } from 'react-redux';\nimport {\n instrument,\n EnhancedStore,\n LiftedState,\n LiftedStore,\n Options,\n InstrumentExt,\n} from '@redux-devtools/instrument';\nimport { Action, StoreEnhancer } from 'redux';\n\nfunction logError(type: string) {\n if (type === 'NoStore') {\n console.error(\n 'Redux DevTools could not render. You must pass the Redux store ' +\n 'to either as a \"store\" prop or by wrapping it in a ' +\n '.',\n );\n } else {\n console.error(\n 'Redux DevTools could not render. Did you forget to include ' +\n 'DevTools.instrument() in your store enhancer chain before ' +\n 'using createStore()?',\n );\n }\n}\n\nexport interface Props, MonitorState> {\n store?: EnhancedStore;\n}\n\nexport type Monitor<\n S,\n A extends Action,\n MonitorProps extends LiftedState,\n MonitorState,\n MonitorAction extends Action,\n> = React.ReactElement<\n MonitorProps,\n React.ComponentType> & {\n update(\n monitorProps: MonitorProps,\n state: MonitorState | undefined,\n action: MonitorAction,\n ): MonitorState;\n }\n>;\n\nexport interface DevToolsInstance<\n S,\n A extends Action,\n MonitorState,\n> extends Component> {\n liftedStore?: LiftedStore;\n}\n\nexport interface DevToolsClass<\n S,\n A extends Action,\n MonitorState,\n MonitorAction extends Action,\n> {\n new (props: Props): DevToolsInstance;\n instrument: (\n options?: Options,\n ) => StoreEnhancer>;\n}\n\nexport default function createDevTools<\n S,\n A extends Action,\n MonitorProps extends LiftedState,\n MonitorState,\n MonitorAction extends Action,\n>(\n children: Monitor,\n): DevToolsClass {\n const monitorElement = Children.only(children);\n const monitorProps = monitorElement.props;\n const Monitor = monitorElement.type;\n const ConnectedMonitor = connect(\n (state: LiftedState) => state,\n )(Monitor as React.ComponentType);\n\n return class DevTools extends Component> {\n liftedStore?: LiftedStore;\n\n static instrument = (\n options?: Options,\n ) =>\n instrument(\n (state, action) => Monitor.update(monitorProps, state, action),\n options,\n );\n\n constructor(props: Props) {\n super(props);\n\n if (ReactReduxContext as typeof ReactReduxContext | undefined) {\n if (this.props.store && !this.props.store.liftedStore) {\n logError('NoLiftedStore');\n }\n return;\n }\n\n if (!props.store) {\n logError('NoStore');\n return;\n }\n\n this.liftedStore = props.store.liftedStore;\n\n if (!this.liftedStore) {\n logError('NoLiftedStore');\n }\n }\n\n render() {\n if (ReactReduxContext) {\n // For react-redux@6\n if (this.props.store) {\n if (!this.props.store.liftedStore) {\n return null;\n }\n return (\n \n \n \n );\n }\n return (\n \n {(props) => {\n if (!props || !props.store) {\n logError('NoStore');\n return null;\n }\n if (\n !(props.store as unknown as EnhancedStore)\n .liftedStore\n ) {\n logError('NoLiftedStore');\n return null;\n }\n return (\n \n ).liftedStore\n }\n >\n \n \n );\n }}\n \n );\n }\n\n if (!this.liftedStore) {\n return null;\n }\n\n return ;\n }\n };\n}\n" }, { "path": "packages/redux-devtools/src/index.ts", "content": "export {\n instrument,\n ActionCreators,\n ActionTypes,\n type PerformAction,\n type LiftedAction,\n type LiftedState,\n} from '@redux-devtools/instrument';\nexport { default as persistState } from './persistState.js';\nexport { default as createDevTools, type Monitor } from './createDevTools.js';\n" }, { "path": "packages/redux-devtools/src/persistState.ts", "content": "import { Action, Reducer, StoreEnhancer } from 'redux';\nimport { LiftedState } from '@redux-devtools/instrument';\n\nexport default function persistState, MonitorState>(\n sessionId?: string | null,\n deserializeState: (state: S) => S = (state) => state,\n deserializeAction: (action: A) => A = (state) => state,\n): StoreEnhancer {\n if (!sessionId) {\n return (next) =>\n (...args) =>\n next(...args);\n }\n\n function deserialize(\n state: LiftedState,\n ): LiftedState {\n return {\n ...state,\n actionsById: Object.fromEntries(\n Object.entries(state.actionsById).map(([actionId, liftedAction]) => [\n actionId,\n {\n ...liftedAction,\n action: deserializeAction(liftedAction.action),\n },\n ]),\n ),\n committedState: deserializeState(state.committedState),\n computedStates: state.computedStates.map((computedState) => ({\n ...computedState,\n state: deserializeState(computedState.state),\n })),\n };\n }\n\n return (next) =>\n , PreloadedState>(\n reducer: Reducer,\n initialState?: PreloadedState | undefined,\n ) => {\n const key = `redux-dev-session-${sessionId}`;\n\n let finalInitialState;\n try {\n const json = localStorage.getItem(key);\n if (json) {\n finalInitialState =\n deserialize(JSON.parse(json) as LiftedState) ||\n initialState;\n next(reducer, initialState);\n }\n } catch (e) {\n console.warn('Could not read debug session from localStorage:', e); // eslint-disable-line no-console\n try {\n localStorage.removeItem(key);\n } finally {\n finalInitialState = undefined;\n }\n }\n\n const store = next(\n reducer,\n finalInitialState as PreloadedState | undefined,\n );\n\n return {\n ...store,\n dispatch(action: T) {\n store.dispatch(action);\n\n try {\n localStorage.setItem(key, JSON.stringify(store.getState()));\n } catch (e) {\n console.warn('Could not write debug session to localStorage:', e); // eslint-disable-line no-console\n }\n\n return action;\n },\n };\n };\n}\n" }, { "path": "packages/redux-devtools/test/globalLocalStorage.d.ts", "content": "declare namespace NodeJS {\n interface Global {\n localStorage: Storage;\n }\n}\n" }, { "path": "packages/redux-devtools/test/persistState.spec.ts", "content": "import { jest } from '@jest/globals';\nimport { instrument, persistState } from '../src/index.js';\nimport { compose, createStore, StoreEnhancer } from 'redux';\n\ndescribe('persistState', () => {\n const savedLocalStorage = global.localStorage;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n delete global.localStorage;\n\n beforeEach(() => {\n global.localStorage = {\n store: {},\n getItem(key) {\n return this.store[key] || null;\n },\n setItem(key, value) {\n this.store[key] = value;\n },\n removeItem(key) {\n delete this.store[key];\n },\n clear() {\n this.store = {};\n },\n get length() {\n return this.store.length;\n },\n key(index) {\n throw new Error('Unimplemented');\n },\n };\n });\n\n afterAll(() => {\n global.localStorage = savedLocalStorage;\n });\n\n type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };\n const reducer = (state = 0, action: Action) => {\n switch (action.type) {\n case 'INCREMENT':\n return state + 1;\n case 'DECREMENT':\n return state - 1;\n default:\n return state;\n }\n };\n\n it('should persist state', () => {\n const store = createStore(\n reducer,\n compose(instrument(), persistState('id')) as StoreEnhancer,\n );\n expect(store.getState()).toBe(0);\n\n store.dispatch({ type: 'INCREMENT' });\n store.dispatch({ type: 'INCREMENT' });\n expect(store.getState()).toBe(2);\n\n const store2 = createStore(\n reducer,\n compose(instrument(), persistState('id')) as StoreEnhancer,\n );\n expect(store2.getState()).toBe(2);\n });\n\n it('should not persist state if no session id', () => {\n const store = createStore(\n reducer,\n compose(instrument(), persistState()) as StoreEnhancer,\n );\n expect(store.getState()).toBe(0);\n\n store.dispatch({ type: 'INCREMENT' });\n store.dispatch({ type: 'INCREMENT' });\n expect(store.getState()).toBe(2);\n\n const store2 = createStore(\n reducer,\n compose(instrument(), persistState()) as StoreEnhancer,\n );\n expect(store2.getState()).toBe(0);\n });\n\n it('should run with a custom state deserializer', () => {\n const oneLess = (state: number | undefined) =>\n state === undefined ? -1 : state - 1;\n const store = createStore(\n reducer,\n compose(instrument(), persistState('id', oneLess)) as StoreEnhancer,\n );\n expect(store.getState()).toBe(0);\n\n store.dispatch({ type: 'INCREMENT' });\n store.dispatch({ type: 'INCREMENT' });\n expect(store.getState()).toBe(2);\n\n const store2 = createStore(\n reducer,\n compose(instrument(), persistState('id', oneLess)) as StoreEnhancer,\n );\n expect(store2.getState()).toBe(1);\n });\n\n it('should run with a custom action deserializer', () => {\n const incToDec = (action: Action) =>\n action.type === 'INCREMENT' ? ({ type: 'DECREMENT' } as const) : action;\n const store = createStore(\n reducer,\n compose(\n instrument(),\n persistState('id', undefined, incToDec),\n ) as StoreEnhancer,\n );\n expect(store.getState()).toBe(0);\n\n store.dispatch({ type: 'INCREMENT' });\n store.dispatch({ type: 'INCREMENT' });\n expect(store.getState()).toBe(2);\n\n const store2 = createStore(\n reducer,\n compose(\n instrument(),\n persistState('id', undefined, incToDec),\n ) as StoreEnhancer,\n );\n expect(store2.getState()).toBe(-2);\n });\n\n it('should warn if read from localStorage fails', () => {\n const spy = jest.spyOn(console, 'warn').mockImplementation(() => {\n // noop\n });\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n delete global.localStorage.getItem;\n createStore(\n reducer,\n compose(instrument(), persistState('id')) as StoreEnhancer,\n );\n\n expect(spy.mock.calls[0]).toContain(\n 'Could not read debug session from localStorage:',\n );\n\n spy.mockReset();\n });\n\n it('should warn if write to localStorage fails', () => {\n const spy = jest.spyOn(console, 'warn').mockImplementation(() => {\n // noop\n });\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n delete global.localStorage.setItem;\n const store = createStore(\n reducer,\n compose(instrument(), persistState('id')) as StoreEnhancer,\n );\n\n store.dispatch({ type: 'INCREMENT' });\n expect(spy.mock.calls[0]).toContain(\n 'Could not write debug session to localStorage:',\n );\n\n spy.mockReset();\n });\n});\n" }, { "path": "packages/redux-devtools/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools/tsconfig.test.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\", \"node\"]\n },\n \"include\": [\"src\", \"test\"]\n}\n" }, { "path": "packages/redux-devtools-app/CHANGELOG.md", "content": "# Change Log\n\n## 8.0.0\n\n### Major Changes\n\n- 6481386: Convert remaining packages to ESM\n\n### Patch Changes\n\n- Updated dependencies [d61d31a]\n- Updated dependencies [804e729]\n- Updated dependencies [6481386]\n - @redux-devtools/ui@3.0.0\n - @redux-devtools/app-core@3.0.0\n\n## 7.0.0\n\n### Major Changes\n\n- 6163276: Replace styled-components with Emotion\n\n### Patch Changes\n\n- Updated dependencies [6163276]\n - @redux-devtools/app-core@2.0.0\n - @redux-devtools/ui@2.0.0\n\n## 6.2.2\n\n### Patch Changes\n\n- @redux-devtools/app-core@1.1.2\n\n## 6.2.1\n\n### Patch Changes\n\n- @redux-devtools/app-core@1.1.1\n\n## 6.2.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/app-core@1.1.0\n - @redux-devtools/ui@1.4.0\n\n## 6.1.0\n\n### Minor Changes\n\n- 96ac1f2: Move the logic from @redux-devtools/app into @redux-devtools/app-core\n\n### Patch Changes\n\n- Updated dependencies [96ac1f2]\n - @redux-devtools/app-core@1.0.0\n\n## 6.0.1\n\n### Patch Changes\n\n- 191d419: Convert d3 packages to ESM\n- Updated dependencies [191d419]\n - d3-state-visualizer@3.0.0\n - @redux-devtools/chart-monitor@5.0.1\n\n## 6.0.0\n\n### Major Changes\n\n- 5cfe3e5: Update min required React version to 16.8.4\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n- Updated dependencies [decc035]\n - @redux-devtools/chart-monitor@5.0.0\n - @redux-devtools/inspector-monitor-test-tab@4.0.0\n - @redux-devtools/inspector-monitor-trace-tab@4.0.0\n - @redux-devtools/inspector-monitor@6.0.0\n - @redux-devtools/log-monitor@5.0.0\n - @redux-devtools/rtk-query-monitor@5.0.0\n - @redux-devtools/slider-monitor@5.0.0\n - @redux-devtools/core@4.0.0\n\n## 5.0.0\n\n### Major Changes\n\n- 158ba2c: Replace jss with Emotion in inspector-monitor. `@emotion/react` is now a required peer dependency.\n\n### Patch Changes\n\n- Updated dependencies [158ba2c]\n- Updated dependencies [6954eb9]\n - @redux-devtools/inspector-monitor-test-tab@3.0.0\n - @redux-devtools/inspector-monitor-trace-tab@3.0.0\n - @redux-devtools/inspector-monitor@5.0.0\n - @redux-devtools/rtk-query-monitor@4.0.0\n\n## 4.0.2\n\n### Patch Changes\n\n- 7f5bddbd: Widen peer dependencies\n- Updated dependencies [7f5bddbd]\n- Updated dependencies [6fc18ed7]\n - @redux-devtools/chart-monitor@4.1.0\n - @redux-devtools/inspector-monitor-test-tab@2.1.0\n - @redux-devtools/inspector-monitor-trace-tab@2.1.0\n - @redux-devtools/inspector-monitor@4.1.0\n - @redux-devtools/log-monitor@4.1.0\n - @redux-devtools/rtk-query-monitor@3.2.0\n - @redux-devtools/slider-monitor@4.1.0\n - @redux-devtools/ui@1.3.1\n - @redux-devtools/core@3.14.0\n\n## 4.0.1\n\n### Patch Changes\n\n- 65205f90: Replace Action with Action\n- Updated dependencies [65205f90]\n - @redux-devtools/chart-monitor@4.0.1\n - @redux-devtools/inspector-monitor-test-tab@2.0.1\n - @redux-devtools/inspector-monitor-trace-tab@2.0.1\n - @redux-devtools/inspector-monitor@4.0.1\n - @redux-devtools/core@3.13.2\n\n## 4.0.0\n\n### Major Changes\n\n- e57bcb39: The UMD bundle now exports the same thing as the library and includes the CSS in a sperate file. Therfore, the new usage is:\n\n ```diff\n \n \n \n \n Redux DevTools\n + \n \n \n
    \n \n \n \n \n \n \n \n ```\n\n## 3.0.0\n\n### Major Changes\n\n- 57751ff9: Add react-dom peerDependency and bump react peerDependency to `^16.8.0 || ^17.0.0 || ^18.0.0`\n\n### Patch Changes\n\n- Updated dependencies [57751ff9]\n - @redux-devtools/inspector-monitor-test-tab@2.0.0\n - @redux-devtools/inspector-monitor-trace-tab@2.0.0\n - @redux-devtools/inspector-monitor@4.0.0\n\n## 2.2.3\n\n### Patch Changes\n\n- fe32709c: Update jsondiffpatch to fix bundling issues.\n- Updated dependencies [fe32709c]\n - @redux-devtools/inspector-monitor@3.1.1\n\n## 2.2.2\n\n### Patch Changes\n\n- Updated dependencies [14a79573]\n- Updated dependencies [d54adb76]\n- Updated dependencies [bb9bd907]\n - @redux-devtools/inspector-monitor@3.1.0\n - @redux-devtools/inspector-monitor-test-tab@2.0.0\n - @redux-devtools/inspector-monitor-trace-tab@2.0.0\n\n## 2.2.1\n\n### Patch Changes\n\n- Updated dependencies [b323f77d]\n- Updated dependencies [b323f77d]\n - d3-state-visualizer@2.0.0\n - @redux-devtools/chart-monitor@4.0.0\n - @redux-devtools/inspector-monitor@3.0.2\n - @redux-devtools/log-monitor@4.0.2\n - @redux-devtools/rtk-query-monitor@3.1.1\n\n## 2.2.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - @redux-devtools/chart-monitor@3.0.0\n - @redux-devtools/inspector-monitor-test-tab@1.0.0\n - @redux-devtools/inspector-monitor-trace-tab@1.0.0\n - @redux-devtools/inspector-monitor@3.0.0\n - @redux-devtools/log-monitor@4.0.0\n - @redux-devtools/rtk-query-monitor@3.0.0\n - @redux-devtools/slider-monitor@4.0.0\n - @redux-devtools/ui@1.3.0\n - @redux-devtools/core@3.13.0\n\n## 2.1.4\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n - @redux-devtools/chart-monitor@2.1.1\n - @redux-devtools/inspector-monitor@2.1.2\n - @redux-devtools/log-monitor@3.1.1\n - @redux-devtools/rtk-query-monitor@2.1.2\n - @redux-devtools/slider-monitor@3.1.2\n - @redux-devtools/inspector-monitor-test-tab@0.8.6\n - @redux-devtools/inspector-monitor-trace-tab@0.3.4\n\n## 2.1.3\n\n### Patch Changes\n\n- ab3c0e2: Avoid persisting the selected action index between sessions\n\n## 2.1.2\n\n### Patch Changes\n\n- 55cc37e: Fix filter to show state-controlled search value\n- Updated dependencies [55cc37e]\n - @redux-devtools/inspector-monitor@2.1.1\n\n## 2.0.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import DevToolsApp from '@redux-devtools/app';\n+ import { Root } from '@redux-devtools/app';\n```\n\n## [1.0.0-8](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/app@1.0.0-7...@redux-devtools/app@1.0.0-8) (2021-06-11)\n\n### Bug Fixes\n\n- **app:** fix dependency version of inspector ([#732](https://github.com/reduxjs/redux-devtools/issues/732)) ([30c6971](https://github.com/reduxjs/redux-devtools/commit/30c6971d379c53ec1343a20240b73705751f7445))\n\n## [1.0.0-7](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/app@1.0.0-6...@redux-devtools/app@1.0.0-7) (2021-06-11)\n\n### Bug Fixes\n\n- fix Select types and usages ([#724](https://github.com/reduxjs/redux-devtools/issues/724)) ([07e409d](https://github.com/reduxjs/redux-devtools/commit/07e409de6a1c3d362929d854542df0c1d74ce18e))\n- **app:** remove unimplemented reports tab ([#731](https://github.com/reduxjs/redux-devtools/issues/731)) ([c4a8fa2](https://github.com/reduxjs/redux-devtools/commit/c4a8fa286cfe3f30133c2f948164001bd2a618ac))\n\n## [1.0.0-6](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/app@1.0.0-5...@redux-devtools/app@1.0.0-6) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## 1.0.0-5 (2021-03-06)\n\n**Note:** Version bump only for package @redux-devtools/app\n\n## [1.0.0-4](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-core@1.0.0-3...redux-devtools-core@1.0.0-4) (2020-09-07)\n\n### Bug Fixes\n\n- **redux-devtools-core:** don't mutate source object during stringification ([#627](https://github.com/reduxjs/redux-devtools/issues/627)) ([5259dee](https://github.com/reduxjs/redux-devtools/commit/5259dee601e07c46f8e7af964ab83cb23a4e7b1b))\n\n## [1.0.0-3](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-core@1.0.0-2...redux-devtools-core@1.0.0-3) (2020-08-14)\n\n**Note:** Version bump only for package redux-devtools-core\n" }, { "path": "packages/redux-devtools-app/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2016 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.\n" }, { "path": "packages/redux-devtools-app/README.md", "content": "# Redux DevTools monitor app\n\n![Demo](https://raw.githubusercontent.com/zalmoxisus/remote-redux-devtools/master/demo.gif)\n\nWeb, Electron and Chrome app for monitoring [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools).\n\nAlso it's a react component you can use to build amazing monitor applications like:\n\n- [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension).\n- [react-native-debugger](https://github.com/jhen0409/react-native-debugger) - Electron app, which already includes `remotedev-server`, `redux-devtools-app` and even React DevTools.\n- [remote-redux-devtools-on-debugger](https://github.com/jhen0409/remote-redux-devtools-on-debugger) - Used in React Native debugger as a dock monitor.\n- [atom-redux-devtools](https://github.com/zalmoxisus/atom-redux-devtools) - Used in Atom editor.\n- [vscode-redux-devtools](https://github.com/jkzing/vscode-redux-devtools) - Used in Visual Studio Code.\n- [intellij-redux-devtools](https://github.com/takanuva15/intellij-redux-devtools) - Used in IntelliJ IDEA.\n\n### Usage\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Root } from '@redux-devtools/app';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render();\n```\n\n### Parameters\n\n- `socketOptions` - _object_ used to specify predefined options for the connection:\n - `hostname` - _string_\n - `port` - _number or string_\n - `autoReconnect` - _boolean_\n - `secure` - _boolean_.\n- `monitorOptions` - _object_ used to specify predefined monitor options:\n - `selected` - _string_ - which monitor is selected by default. One of the following values: `LogMonitor`, `InspectorMonitor`, `ChartMonitor`.\n- `testTemplates` - _array_ of strings representing predefined test templates.\n- `noSettings` - _boolean_ set to `true` in order to hide settings button and dialog.\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools-app/assets/index.html", "content": "\n\n \n \n Redux DevTools\n \n \n \n
    \n \n\n" }, { "path": "packages/redux-devtools-app/babel.config.json", "content": "{\n \"presets\": [\n [\"@babel/preset-env\", { \"targets\": \"defaults\" }],\n \"@babel/preset-react\",\n \"@babel/preset-typescript\"\n ],\n \"plugins\": [\"@babel/plugin-transform-runtime\"]\n}\n" }, { "path": "packages/redux-devtools-app/buildUmd.mjs", "content": "import * as esbuild from 'esbuild';\n\nconst args = process.argv.slice(2);\nconst prod = !args.includes('--dev');\n\nawait esbuild.build({\n bundle: true,\n logLevel: 'info',\n format: 'iife',\n globalName: 'ReduxDevToolsApp',\n outfile: prod ? 'umd/redux-devtools-app.min.js' : 'umd/redux-devtools-app.js',\n minify: prod,\n sourcemap: true,\n define: {\n 'process.env.NODE_ENV': prod ? '\"production\"' : '\"development\"',\n },\n entryPoints: ['src/index.tsx'],\n loader: {\n '.woff2': 'dataurl',\n },\n plugins: [\n importAsGlobals({\n react: 'React',\n 'react-dom': 'ReactDOM',\n }),\n ],\n});\n\n// https://github.com/evanw/esbuild/issues/337#issuecomment-954633403\nfunction importAsGlobals(mapping) {\n // https://stackoverflow.com/a/3561711/153718\n const escRe = (s) => s.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n const filter = new RegExp(\n Object.keys(mapping)\n .map((mod) => `^${escRe(mod)}$`)\n .join('|'),\n );\n\n return {\n name: 'global-imports',\n setup(build) {\n build.onResolve({ filter }, (args) => {\n if (!mapping[args.path]) {\n throw new Error('Unknown global: ' + args.path);\n }\n return {\n path: args.path,\n namespace: 'external-global',\n };\n });\n\n build.onLoad(\n {\n filter,\n namespace: 'external-global',\n },\n async (args) => {\n const global = mapping[args.path];\n return {\n contents: `module.exports = ${global};`,\n loader: 'js',\n };\n },\n );\n },\n };\n}\n" }, { "path": "packages/redux-devtools-app/demo/index.tsx", "content": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Root } from '../lib';\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n\nif (module.hot) {\n // https://github.com/webpack/webpack/issues/418#issuecomment-53398056\n module.hot.accept((err) => {\n if (err) console.error(err.message); // eslint-disable-line no-console\n });\n\n /*\n module.hot.accept('./app', () => {\n const NextApp = require('./app').default;\n render(\n ,\n document.getElementById('root')\n );\n });\n */\n}\n" }, { "path": "packages/redux-devtools-app/eslint.config.mjs", "content": "import globals from 'globals';\nimport eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\nimport eslintTsReactJest from '../../eslint.ts.react.jest.config.base.mjs';\nimport eslintTs from '../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n ...eslintTsReact(\n import.meta.dirname,\n ['demo/**/*.ts', 'demo/**/*.tsx'],\n ['./tsconfig.demo.json'],\n ),\n ...eslintTsReactJest(import.meta.dirname),\n ...eslintTs(\n import.meta.dirname,\n ['webpack.config.ts'],\n ['./tsconfig.webpack.json'],\n ),\n {\n ignores: ['build', 'lib', 'umd'],\n },\n {\n files: ['buildUmd.mjs'],\n languageOptions: {\n globals: {\n ...globals.nodeBuiltin,\n },\n },\n },\n];\n" }, { "path": "packages/redux-devtools-app/package.json", "content": "{\n \"name\": \"@redux-devtools/app\",\n \"version\": \"8.0.0\",\n \"description\": \"Redux DevTools app\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-app\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Mihail Diordiev (https://github.com/zalmoxisus)\",\n \"files\": [\n \"build\",\n \"lib\",\n \"src\",\n \"umd\"\n ],\n \"exports\": {\n \".\": \"./lib/index.js\",\n \"./package.json\": \"./package.json\"\n },\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"start\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack serve --hot --env development --env platform=web --progress\",\n \"build\": \"pnpm run build:lib && pnpm run build:web && pnpm run build:umd && pnpm run build:umd:min\",\n \"build:lib\": \"tsc\",\n \"build:web\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack --env platform=web\",\n \"build:umd\": \"node buildUmd.mjs --dev\",\n \"build:umd:min\": \"node buildUmd.mjs\",\n \"clean\": \"rimraf build lib umd\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint\"\n },\n \"dependencies\": {\n \"@redux-devtools/app-core\": \"workspace:^\",\n \"@redux-devtools/ui\": \"workspace:^\",\n \"localforage\": \"^1.10.0\",\n \"jsan\": \"^3.1.14\",\n \"react-redux\": \"^9.2.0\",\n \"redux\": \"^5.0.1\",\n \"redux-persist\": \"^6.0.0\",\n \"socketcluster-client\": \"^20.0.1\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.29.0\",\n \"@babel/eslint-parser\": \"^7.28.6\",\n \"@babel/plugin-transform-runtime\": \"^7.29.0\",\n \"@babel/preset-env\": \"^7.29.0\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@reduxjs/toolkit\": \"^2.11.2\",\n \"@rjsf/core\": \"^6.4.1\",\n \"@types/jsan\": \"^3.1.5\",\n \"@types/json-schema\": \"^7.0.15\",\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@types/socketcluster-client\": \"^20.0.0\",\n \"@types/webpack-env\": \"^1.18.8\",\n \"babel-loader\": \"^10.1.1\",\n \"cross-env\": \"^10.1.0\",\n \"css-loader\": \"^7.1.4\",\n \"esbuild\": \"^0.27.4\",\n \"fork-ts-checker-webpack-plugin\": \"^9.1.0\",\n \"globals\": \"^17.4.0\",\n \"html-loader\": \"^5.1.0\",\n \"html-webpack-plugin\": \"^5.6.6\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"rimraf\": \"^6.1.3\",\n \"style-loader\": \"^4.0.0\",\n \"ts-jest\": \"^29.4.6\",\n \"ts-node\": \"^10.9.2\",\n \"typescript\": \"~5.9.3\",\n \"webpack\": \"^5.105.4\",\n \"webpack-cli\": \"^7.0.0\",\n \"webpack-dev-server\": \"^5.2.3\"\n },\n \"peerDependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@reduxjs/toolkit\": \"^1.0.0 || ^2.0.0\",\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools-app/src/actions/index.ts", "content": "import { AuthStates, States } from 'socketcluster-client/lib/clientsocket.js';\nimport {\n CoreStoreActionWithoutUpdateStateOrLiftedAction,\n LiftedActionAction,\n UPDATE_REPORTS,\n UPDATE_STATE,\n UpdateStateAction,\n} from '@redux-devtools/app-core';\nimport {\n AUTH_ERROR,\n AUTH_REQUEST,\n AUTH_SUCCESS,\n CONNECT_ERROR,\n CONNECT_REQUEST,\n CONNECT_SUCCESS,\n DEAUTHENTICATE,\n DISCONNECTED,\n EMIT,\n RECONNECT,\n SUBSCRIBE_ERROR,\n SUBSCRIBE_REQUEST,\n SUBSCRIBE_SUCCESS,\n UNSUBSCRIBE,\n} from '../constants/socketActionTypes.js';\n\nexport type ConnectionType = 'disabled' | 'custom';\nexport interface ConnectionOptions {\n readonly type: ConnectionType;\n readonly hostname: string;\n readonly port: number;\n readonly secure: boolean;\n}\nexport interface ReconnectAction {\n readonly type: typeof RECONNECT;\n readonly options: ConnectionOptions;\n}\nexport function saveSocketSettings(\n options: ConnectionOptions,\n): ReconnectAction {\n return { type: RECONNECT, options };\n}\n\nexport interface ConnectRequestAction {\n type: typeof CONNECT_REQUEST;\n}\n\ninterface ConnectSuccessPayload {\n id: string;\n authState: AuthStates;\n socketState: States;\n}\nexport interface ConnectSuccessAction {\n type: typeof CONNECT_SUCCESS;\n payload: ConnectSuccessPayload;\n error: Error | undefined;\n}\n\nexport interface ConnectErrorAction {\n type: typeof CONNECT_ERROR;\n error: Error | undefined;\n}\n\nexport interface AuthRequestAction {\n type: typeof AUTH_REQUEST;\n}\n\nexport interface AuthSuccessAction {\n type: typeof AUTH_SUCCESS;\n baseChannel: string;\n}\n\nexport interface AuthErrorAction {\n type: typeof AUTH_ERROR;\n error: Error;\n}\n\nexport interface DisconnectedAction {\n type: typeof DISCONNECTED;\n code: number;\n}\n\nexport interface DeauthenticateAction {\n type: typeof DEAUTHENTICATE;\n}\n\nexport interface SubscribeRequestAction {\n type: typeof SUBSCRIBE_REQUEST;\n channel: string;\n subscription: typeof UPDATE_STATE | typeof UPDATE_REPORTS;\n}\n\nexport interface SubscribeSuccessAction {\n type: typeof SUBSCRIBE_SUCCESS;\n channel: string;\n}\n\nexport interface SubscribeErrorAction {\n type: typeof SUBSCRIBE_ERROR;\n error: Error;\n status: string;\n}\n\nexport interface UnsubscribeAction {\n type: typeof UNSUBSCRIBE;\n channel: string;\n}\n\nexport interface EmitAction {\n type: typeof EMIT;\n message: string;\n id?: string | number | false;\n instanceId?: string | number;\n action?: unknown;\n state?: unknown;\n}\n\nexport type StoreActionWithoutUpdateStateOrLiftedAction =\n | CoreStoreActionWithoutUpdateStateOrLiftedAction\n | ReconnectAction\n | ConnectRequestAction\n | ConnectSuccessAction\n | ConnectErrorAction\n | AuthRequestAction\n | AuthSuccessAction\n | AuthErrorAction\n | DisconnectedAction\n | DeauthenticateAction\n | SubscribeRequestAction\n | SubscribeSuccessAction\n | SubscribeErrorAction\n | UnsubscribeAction\n | EmitAction;\n\nexport type StoreActionWithoutUpdateState =\n | StoreActionWithoutUpdateStateOrLiftedAction\n | LiftedActionAction;\n\nexport type StoreActionWithoutLiftedAction =\n | StoreActionWithoutUpdateStateOrLiftedAction\n | UpdateStateAction;\n\nexport type StoreAction = StoreActionWithoutUpdateState | UpdateStateAction;\n" }, { "path": "packages/redux-devtools-app/src/components/Settings/Connection.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Container, Form } from '@redux-devtools/ui';\nimport { JSONSchema7Definition, JSONSchema7TypeName } from 'json-schema';\nimport { ConnectionType, saveSocketSettings } from '../../actions/index.js';\nimport { StoreState } from '../../reducers/index.js';\nimport { ConnectionStateOptions } from '../../reducers/connection.js';\nimport { IChangeEvent } from '@rjsf/core';\n\ndeclare module 'json-schema' {\n export interface JSONSchema7 {\n enumNames?: JSONSchema7Type[];\n }\n}\n\ninterface Schema {\n type: JSONSchema7TypeName;\n required?: string[];\n properties: {\n [key: string]: JSONSchema7Definition;\n };\n}\n\nconst defaultSchema: Schema = {\n type: 'object',\n required: [],\n properties: {\n type: {\n title: 'Connection settings (for getting reports and remote debugging)',\n type: 'string',\n enum: ['disabled', 'custom'],\n enumNames: ['no remote connection', 'use local (custom) server'],\n },\n hostname: {\n type: 'string',\n },\n port: {\n type: 'number',\n },\n secure: {\n type: 'boolean',\n },\n },\n};\n\nconst uiSchema = {\n type: {\n 'ui:widget': 'radio',\n },\n};\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps & DispatchProps;\n\ninterface FormData extends ConnectionStateOptions {\n readonly type: ConnectionType;\n}\n\ninterface State {\n readonly formData: FormData;\n readonly type: ConnectionType;\n readonly schema: Schema;\n readonly changed: boolean | undefined;\n}\n\nexport class Connection extends Component {\n setFormData = (type: ConnectionType, changed?: boolean) => {\n let schema: Schema;\n if (type !== 'custom') {\n schema = {\n type: 'object',\n properties: { type: defaultSchema.properties.type },\n };\n } else {\n schema = defaultSchema;\n }\n return {\n formData: {\n type,\n ...this.props.options,\n },\n type,\n schema,\n changed,\n };\n };\n\n state: State = this.setFormData(this.props.type);\n\n shouldComponentUpdate(nextProps: Props, nextState: State) {\n return this.state !== nextState;\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: Props) {\n if (this.props.options !== nextProps.options) {\n this.setState({\n formData: { ...nextProps.options, type: nextProps.type },\n });\n }\n }\n\n handleSave = (data: IChangeEvent) => {\n this.props.saveSettings(data.formData!);\n this.setState({ changed: false });\n };\n\n handleChange = (data: IChangeEvent) => {\n const formData = data.formData!;\n const type = formData.type;\n if (type !== this.state.type) {\n this.setState(this.setFormData(type, true));\n } else if (!this.state.changed) {\n this.setState({ changed: true, formData });\n }\n };\n\n render() {\n const type = this.state.type || 'disabled';\n const changed = this.state.changed;\n const disabled = type === 'disabled';\n\n return (\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state: StoreState) => state.connection;\n\nconst actionCreators = {\n saveSettings: saveSocketSettings,\n};\n\nexport default connect(mapStateToProps, actionCreators)(Connection);\n" }, { "path": "packages/redux-devtools-app/src/constants/socketActionTypes.ts", "content": "import socketCluster from 'socketcluster-client';\n\ninterface States {\n CLOSED: 'closed';\n CONNECTING: 'connecting';\n OPEN: 'open';\n AUTHENTICATED: 'authenticated';\n PENDING: 'pending';\n UNAUTHENTICATED: 'unauthenticated';\n}\n\nexport const {\n CLOSED,\n CONNECTING,\n OPEN,\n AUTHENTICATED,\n PENDING,\n UNAUTHENTICATED,\n} = socketCluster.AGClientSocket as unknown as States;\nexport const CONNECT_REQUEST = 'socket/CONNECT_REQUEST';\nexport const CONNECT_SUCCESS = 'socket/CONNECT_SUCCESS';\nexport const CONNECT_ERROR = 'socket/CONNECT_ERROR';\nexport const RECONNECT = 'socket/RECONNECT';\nexport const AUTH_REQUEST = 'socket/AUTH_REQUEST';\nexport const AUTH_SUCCESS = 'socket/AUTH_SUCCESS';\nexport const AUTH_ERROR = 'socket/AUTH_ERROR';\nexport const DISCONNECTED = 'socket/DISCONNECTED';\nexport const DEAUTHENTICATE = 'socket/DEAUTHENTICATE';\nexport const SUBSCRIBE_REQUEST = 'socket/SUBSCRIBE_REQUEST';\nexport const SUBSCRIBE_SUCCESS = 'socket/SUBSCRIBE_SUCCESS';\nexport const SUBSCRIBE_ERROR = 'socket/SUBSCRIBE_ERROR';\nexport const UNSUBSCRIBE = 'socket/UNSUBSCRIBE';\nexport const EMIT = 'socket/EMIT';\n" }, { "path": "packages/redux-devtools-app/src/index.tsx", "content": "import React, { Component } from 'react';\nimport { Provider } from 'react-redux';\nimport { Store } from 'redux';\nimport { Persistor } from 'redux-persist';\nimport { PersistGate } from 'redux-persist/integration/react';\nimport { App } from '@redux-devtools/app-core';\nimport { StoreState } from './reducers/index.js';\nimport { StoreAction } from './actions/index.js';\nimport { CONNECT_REQUEST } from './constants/socketActionTypes.js';\nimport Connection from './components/Settings/Connection.js';\nimport configureStore from './store/configureStore.js';\n\nexport class Root extends Component {\n store?: Store;\n persistor?: Persistor;\n\n UNSAFE_componentWillMount() {\n const { store, persistor } = configureStore(\n (store: Store) => {\n if (store.getState().connection.type !== 'disabled') {\n store.dispatch({\n type: CONNECT_REQUEST,\n });\n }\n },\n );\n this.store = store;\n this.persistor = persistor;\n }\n\n render() {\n if (!this.store) return null;\n return (\n \n \n \n \n \n );\n }\n}\n\nexport * from '@redux-devtools/app-core';\nexport * from './actions/index.js';\nexport * from './constants/socketActionTypes.js';\nexport * from './middlewares/api.js';\nexport * from './reducers/index.js';\nexport * from './reducers/connection.js';\nexport * from './reducers/socket.js';\nexport * from './utils/monitorActions.js';\n" }, { "path": "packages/redux-devtools-app/src/middlewares/api.ts", "content": "import {\n DispatchAction,\n GET_REPORT_ERROR,\n GET_REPORT_REQUEST,\n GET_REPORT_SUCCESS,\n CLEAR_INSTANCES,\n getActiveInstance,\n importState,\n LIFTED_ACTION,\n LiftedActionAction,\n REMOVE_INSTANCE,\n Request,\n showNotification,\n UPDATE_REPORTS,\n UPDATE_STATE,\n UpdateReportsRequest,\n} from '@redux-devtools/app-core';\nimport socketClusterClient, { AGClientSocket } from 'socketcluster-client';\nimport { stringify } from 'jsan';\nimport { Dispatch, Middleware, MiddlewareAPI } from 'redux';\nimport * as actions from '../constants/socketActionTypes.js';\nimport { nonReduxDispatch } from '../utils/monitorActions.js';\nimport { EmitAction, StoreAction } from '../actions/index.js';\nimport { StoreState } from '../reducers/index.js';\n\nlet socket: AGClientSocket;\nlet store: MiddlewareAPI, StoreState>;\n\nfunction emit({ message: type, id, instanceId, action, state }: EmitAction) {\n void socket.transmit(id ? `sc-${id}` : 'respond', {\n type,\n action,\n state,\n instanceId,\n });\n}\n\nfunction startMonitoring(channel: string) {\n if (channel !== store.getState().socket.baseChannel) return;\n store.dispatch({ type: actions.EMIT, message: 'START' });\n}\n\nfunction dispatchRemoteAction({\n message,\n action,\n state,\n toAll,\n}: LiftedActionAction) {\n const instances = store.getState().instances;\n const instanceId = getActiveInstance(instances);\n const id = !toAll && instances.options[instanceId].connectionId;\n store.dispatch({\n type: actions.EMIT,\n message,\n action,\n state: nonReduxDispatch(\n store,\n message,\n instanceId,\n action as DispatchAction,\n state,\n instances,\n ),\n instanceId,\n id,\n });\n}\n\ninterface RequestBase {\n id?: string;\n instanceId?: string;\n}\ninterface DisconnectedAction extends RequestBase {\n type: 'DISCONNECTED';\n id: string;\n}\ninterface StartAction extends RequestBase {\n type: 'START';\n id: string;\n}\ninterface ErrorAction extends RequestBase {\n type: 'ERROR';\n payload: string;\n}\ninterface RequestWithData extends RequestBase {\n data: Request;\n}\ntype MonitoringRequest =\n | DisconnectedAction\n | StartAction\n | ErrorAction\n | Request;\n\nfunction monitoring(request: MonitoringRequest) {\n if (request.type === 'DISCONNECTED') {\n store.dispatch({\n type: REMOVE_INSTANCE,\n id: request.id,\n });\n return;\n }\n if (request.type === 'START') {\n store.dispatch({ type: actions.EMIT, message: 'START', id: request.id });\n return;\n }\n\n if (request.type === 'ERROR') {\n store.dispatch(showNotification(request.payload));\n return;\n }\n\n store.dispatch({\n type: UPDATE_STATE,\n request: (request as unknown as RequestWithData).data\n ? { ...(request as unknown as RequestWithData).data, id: request.id }\n : request,\n });\n\n const instances = store.getState().instances;\n const instanceId = request.instanceId || request.id;\n if (\n instances.sync &&\n instanceId === instances.selected &&\n (request.type === 'ACTION' || request.type === 'STATE')\n ) {\n void socket.transmit('respond', {\n type: 'SYNC',\n state: stringify(instances.states[instanceId]),\n id: request.id,\n instanceId,\n });\n }\n}\n\nfunction subscribe(\n channelName: string,\n subscription: typeof UPDATE_STATE | typeof UPDATE_REPORTS,\n) {\n const channel = socket.subscribe(channelName);\n if (subscription === UPDATE_STATE) {\n void (async () => {\n for await (const data of channel) {\n monitoring(data as MonitoringRequest);\n }\n })();\n } else {\n const watcher = (request: UpdateReportsRequest) => {\n store.dispatch({ type: subscription, request });\n };\n void (async () => {\n for await (const data of channel) {\n watcher(data as UpdateReportsRequest);\n }\n })();\n }\n}\n\nfunction handleConnection() {\n void (async () => {\n for await (const data of socket.listener('connect')) {\n store.dispatch({\n type: actions.CONNECT_SUCCESS,\n payload: {\n id: data.id,\n authState: socket.authState,\n socketState: socket.state,\n },\n // @ts-expect-error Is this legitimate?\n error: data.authError,\n });\n if (socket.authState !== actions.AUTHENTICATED) {\n store.dispatch({ type: actions.AUTH_REQUEST });\n }\n }\n })();\n void (async () => {\n for await (const data of socket.listener('disconnect')) {\n store.dispatch({ type: actions.DISCONNECTED, code: data.code });\n store.dispatch({ type: CLEAR_INSTANCES });\n }\n })();\n\n void (async () => {\n for await (const data of socket.listener('subscribe')) {\n store.dispatch({\n type: actions.SUBSCRIBE_SUCCESS,\n channel: data.channel,\n });\n }\n })();\n void (async () => {\n for await (const data of socket.listener('unsubscribe')) {\n void socket.unsubscribe(data.channel);\n store.dispatch({ type: actions.UNSUBSCRIBE, channel: data.channel });\n }\n })();\n void (async () => {\n for await (const data of socket.listener('subscribeFail')) {\n store.dispatch({\n type: actions.SUBSCRIBE_ERROR,\n error: data.error,\n status: 'subscribeFail',\n });\n }\n })();\n\n void (async () => {\n for await (const data of socket.listener('error')) {\n store.dispatch({ type: actions.CONNECT_ERROR, error: data.error });\n }\n })();\n}\n\nfunction connect() {\n if (process.env.NODE_ENV === 'test') return;\n const connection = store.getState().connection;\n try {\n socket = socketClusterClient.create(connection.options);\n handleConnection();\n } catch (error) {\n store.dispatch({ type: actions.CONNECT_ERROR, error: error as Error });\n store.dispatch(\n showNotification((error as Error).message || (error as string)),\n );\n }\n}\n\nfunction disconnect() {\n if (socket) {\n socket.disconnect();\n }\n}\n\nfunction login() {\n void (async () => {\n try {\n const baseChannel = (await socket.invoke('login', {})) as string;\n store.dispatch({ type: actions.AUTH_SUCCESS, baseChannel });\n store.dispatch({\n type: actions.SUBSCRIBE_REQUEST,\n channel: baseChannel,\n subscription: UPDATE_STATE,\n });\n store.dispatch({\n type: actions.SUBSCRIBE_REQUEST,\n channel: 'report',\n subscription: UPDATE_REPORTS,\n });\n } catch (error) {\n store.dispatch({ type: actions.AUTH_ERROR, error: error as Error });\n }\n })();\n}\n\nfunction getReport(reportId: unknown) {\n void (async () => {\n try {\n const data = (await socket.invoke('getReport', reportId)) as {\n payload: string;\n };\n store.dispatch({ type: GET_REPORT_SUCCESS, data });\n store.dispatch(importState(data.payload));\n } catch (error) {\n store.dispatch({ type: GET_REPORT_ERROR, error: error as Error });\n }\n })();\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport const api: Middleware<{}, StoreState, Dispatch> = (\n inStore,\n) => {\n store = inStore;\n return (next) => (untypedAction) => {\n const result = next(untypedAction);\n\n const action = untypedAction as StoreAction;\n switch (action.type) {\n case actions.CONNECT_REQUEST:\n connect();\n break;\n case actions.RECONNECT:\n disconnect();\n if (action.options.type !== 'disabled') connect();\n break;\n case actions.AUTH_REQUEST:\n login();\n break;\n case actions.SUBSCRIBE_REQUEST:\n subscribe(action.channel, action.subscription);\n break;\n case actions.SUBSCRIBE_SUCCESS:\n startMonitoring(action.channel);\n break;\n case actions.EMIT:\n if (socket) emit(action);\n break;\n case LIFTED_ACTION:\n dispatchRemoteAction(action);\n break;\n case GET_REPORT_REQUEST:\n getReport(action.report);\n break;\n }\n return result;\n };\n};\n" }, { "path": "packages/redux-devtools-app/src/reducers/connection.ts", "content": "import { RECONNECT } from '../constants/socketActionTypes.js';\nimport { ConnectionType, StoreAction } from '../actions/index.js';\n\nexport interface ConnectionStateOptions {\n readonly hostname: string;\n readonly port: number;\n readonly secure: boolean;\n}\nexport interface ConnectionState {\n readonly options: ConnectionStateOptions;\n readonly type: ConnectionType;\n}\n\nexport function connection(\n state: ConnectionState = {\n options: { hostname: 'localhost', port: 8000, secure: false },\n type: 'disabled',\n },\n action: StoreAction,\n) {\n if (action.type === RECONNECT) {\n const { type, ...options } = action.options;\n return { ...state, type, options };\n }\n return state;\n}\n" }, { "path": "packages/redux-devtools-app/src/reducers/index.ts", "content": "import { CoreStoreState, coreReducers } from '@redux-devtools/app-core';\nimport { combineReducers } from 'redux';\nimport { connection, ConnectionState } from './connection.js';\nimport { socket, SocketState } from './socket.js';\n\nexport interface StoreState extends CoreStoreState {\n readonly connection: ConnectionState;\n readonly socket: SocketState;\n}\n\nexport const rootReducer = combineReducers({\n ...coreReducers,\n connection,\n socket,\n});\n" }, { "path": "packages/redux-devtools-app/src/reducers/socket.ts", "content": "import { AuthStates, States } from 'socketcluster-client/lib/clientsocket.js';\nimport * as actions from '../constants/socketActionTypes.js';\nimport { StoreAction } from '../actions/index.js';\n\nexport interface SocketState {\n id: string | null;\n channels: string[];\n socketState: States;\n authState: AuthStates | 'pending';\n error: Error | undefined;\n baseChannel?: string;\n authToken?: null;\n}\n\nconst initialState: SocketState = {\n id: null,\n channels: [],\n socketState: actions.CLOSED,\n authState: actions.PENDING,\n error: undefined,\n};\n\nexport function socket(state = initialState, action: StoreAction): SocketState {\n switch (action.type) {\n case actions.CONNECT_REQUEST: {\n return {\n ...state,\n socketState: actions.CONNECTING,\n };\n }\n case actions.CONNECT_ERROR:\n return {\n ...state,\n error: action.error,\n };\n case actions.CONNECT_SUCCESS:\n return {\n ...state,\n id: action.payload.id,\n socketState: action.payload.socketState,\n authState: action.payload.authState,\n error: action.error,\n };\n case actions.AUTH_REQUEST:\n return {\n ...state,\n authState: actions.PENDING,\n };\n case actions.AUTH_SUCCESS:\n return {\n ...state,\n authState: actions.AUTHENTICATED,\n baseChannel: action.baseChannel,\n };\n case actions.AUTH_ERROR:\n return {\n ...state,\n authState: actions.UNAUTHENTICATED,\n error: action.error,\n };\n case actions.DEAUTHENTICATE:\n return {\n ...state,\n authState: actions.UNAUTHENTICATED,\n authToken: null,\n };\n case actions.SUBSCRIBE_SUCCESS:\n return {\n ...state,\n channels: [...state.channels, action.channel],\n };\n case actions.UNSUBSCRIBE:\n return {\n ...state,\n channels: state.channels.filter(\n (channel) => channel !== action.channel,\n ),\n };\n case actions.DISCONNECTED:\n return initialState;\n default:\n return state;\n }\n}\n" }, { "path": "packages/redux-devtools-app/src/store/configureStore.ts", "content": "import { middlewares } from '@redux-devtools/app-core';\nimport { createStore, compose, applyMiddleware, Reducer, Store } from 'redux';\nimport localForage from 'localforage';\nimport { persistReducer, persistStore } from 'redux-persist';\nimport { api } from '../middlewares/api.js';\nimport { StoreState, rootReducer } from '../reducers/index.js';\nimport { StoreAction } from '../actions/index.js';\n\nconst persistConfig = {\n key: 'redux-devtools',\n blacklist: ['instances', 'socket'],\n storage: localForage,\n};\n\nconst persistedReducer: Reducer = persistReducer(\n persistConfig,\n rootReducer as unknown as Reducer,\n) as any;\n\nexport default function configureStore(\n callback: (store: Store) => void,\n) {\n let composeEnhancers = compose;\n if (process.env.NODE_ENV !== 'production') {\n if (\n (\n window as unknown as {\n __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;\n }\n ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n ) {\n composeEnhancers = (\n window as unknown as {\n __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;\n }\n ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;\n }\n }\n\n const store = createStore(\n persistedReducer,\n composeEnhancers(applyMiddleware(...middlewares, api)),\n );\n const persistor = persistStore(store as Store, null, () => {\n callback(store);\n });\n return { store, persistor };\n}\n" }, { "path": "packages/redux-devtools-app/src/utils/monitorActions.ts", "content": "import {\n DispatchAction,\n InstancesState,\n SET_STATE,\n State,\n stringifyJSON,\n} from '@redux-devtools/app-core';\nimport { Dispatch, MiddlewareAPI } from 'redux';\nimport { StoreActionWithoutLiftedAction } from '../actions/index.js';\n\nexport function sweep(state: State): State {\n const skippedActionIdsSet = new Set(state.skippedActionIds);\n\n return {\n ...state,\n actionsById: Object.fromEntries(\n Object.entries(state.actionsById).filter(\n ([actionId]) => !skippedActionIdsSet.has(parseInt(actionId, 10)),\n ),\n ),\n stagedActionIds: state.stagedActionIds.filter(\n (actionId) => !skippedActionIdsSet.has(actionId),\n ),\n skippedActionIds: [],\n currentStateIndex: Math.min(\n state.currentStateIndex,\n state.stagedActionIds.length - 1,\n ),\n };\n}\n\nexport function nonReduxDispatch(\n store: MiddlewareAPI<\n Dispatch,\n { readonly instances: InstancesState }\n >,\n message: string,\n instanceId: string | number,\n action: DispatchAction,\n initialState: string | undefined,\n preInstances?: InstancesState,\n) {\n const instances = preInstances || store.getState().instances;\n const state = instances.states[instanceId];\n const options = instances.options[instanceId];\n\n if (message !== 'DISPATCH') {\n if (message === 'IMPORT') {\n if (options.features.import === true) {\n return stringifyJSON(\n state.computedStates[state.currentStateIndex].state,\n true,\n );\n }\n return initialState;\n }\n return undefined;\n }\n\n if (options.lib === 'redux') return undefined;\n\n switch (action.type) {\n case 'TOGGLE_ACTION':\n return stringifyJSON(state, true);\n case 'JUMP_TO_STATE':\n return stringifyJSON(state.computedStates[action.index].state, true);\n case 'JUMP_TO_ACTION':\n return stringifyJSON(\n state.computedStates[state.stagedActionIds.indexOf(action.actionId)]\n .state,\n true,\n );\n case 'ROLLBACK':\n return stringifyJSON(state.computedStates[0].state, true);\n case 'SWEEP':\n store.dispatch({ type: SET_STATE, newState: sweep(state) });\n return undefined;\n default:\n return undefined;\n }\n}\n" }, { "path": "packages/redux-devtools-app/tsconfig.demo.json", "content": "{\n \"extends\": \"../../tsconfig.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"webpack-env\"]\n },\n \"include\": [\"demo\", \"src\"]\n}\n" }, { "path": "packages/redux-devtools-app/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\",\n \"types\": []\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-app/tsconfig.webpack.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"types\": [\"node\", \"webpack-dev-server\"]\n },\n \"include\": [\"webpack.config.ts\"]\n}\n" }, { "path": "packages/redux-devtools-app/webpack.config.ts", "content": "import * as path from 'path';\nimport webpack from 'webpack';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';\n\nexport default (\n env: { development?: boolean; platform?: string } = {},\n): webpack.Configuration => ({\n mode: env.development ? 'development' : 'production',\n entry: {\n app: './demo/index',\n },\n output: {\n path: path.resolve(import.meta.dirname, `build/${env.platform as string}`),\n publicPath: '',\n filename: 'js/[name].js',\n sourceMapFilename: 'js/[name].map',\n },\n module: {\n rules: [\n {\n test: /\\.(js|ts)x?$/,\n loader: 'babel-loader',\n exclude: /node_modules/,\n },\n {\n test: /\\.html$/,\n loader: 'html-loader',\n },\n {\n test: /\\.css$/,\n use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],\n },\n {\n test: /\\.woff2$/,\n type: 'asset/resource',\n },\n ],\n },\n resolve: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n plugins: [\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: JSON.stringify(\n env.development ? 'development' : 'production',\n ),\n PLATFORM: JSON.stringify(env.platform),\n },\n }),\n new HtmlWebpackPlugin({\n template: 'assets/index.html',\n }),\n new ForkTsCheckerWebpackPlugin({\n typescript: {\n configFile: 'tsconfig.demo.json',\n },\n }),\n ],\n optimization: {\n minimize: false,\n splitChunks: {\n cacheGroups: {\n vendor: {\n test: /[\\\\/]node_modules[\\\\/]/,\n name: 'common',\n chunks: 'all',\n },\n },\n },\n },\n performance: {\n hints: false,\n },\n devServer: {\n port: 3000,\n },\n devtool: env.development ? 'eval-source-map' : 'source-map',\n});\n" }, { "path": "packages/redux-devtools-app-core/CHANGELOG.md", "content": "# @redux-devtools/app-core\n\n## 3.0.0\n\n### Major Changes\n\n- 6481386: Convert remaining packages to ESM\n\n### Patch Changes\n\n- Updated dependencies [d61d31a]\n- Updated dependencies [804e729]\n- Updated dependencies [12849a4]\n- Updated dependencies [804d6bd]\n - @redux-devtools/ui@3.0.0\n - @redux-devtools/chart-monitor@6.0.0\n - @redux-devtools/inspector-monitor@7.0.0\n - @redux-devtools/inspector-monitor-test-tab@6.0.0\n - @redux-devtools/inspector-monitor-trace-tab@5.0.0\n - @redux-devtools/log-monitor@6.0.0\n - @redux-devtools/rtk-query-monitor@7.0.0\n - @redux-devtools/slider-monitor@7.0.0\n - @redux-devtools/core@5.0.0\n\n## 2.0.0\n\n### Major Changes\n\n- 6163276: Replace styled-components with Emotion\n\n### Patch Changes\n\n- Updated dependencies [6163276]\n- Updated dependencies [20883e5]\n - @redux-devtools/inspector-monitor-test-tab@5.0.0\n - @redux-devtools/rtk-query-monitor@6.0.0\n - @redux-devtools/slider-monitor@6.0.0\n - @redux-devtools/ui@2.0.0\n - @redux-devtools/inspector-monitor@6.1.2\n\n## 1.1.2\n\n### Patch Changes\n\n- Updated dependencies [17b55ef]\n - @redux-devtools/rtk-query-monitor@5.2.0\n\n## 1.1.1\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n - @redux-devtools/chart-monitor@5.1.1\n - @redux-devtools/inspector-monitor@6.1.1\n - @redux-devtools/inspector-monitor-test-tab@4.1.1\n - @redux-devtools/inspector-monitor-trace-tab@4.1.1\n - @redux-devtools/log-monitor@5.1.1\n - @redux-devtools/rtk-query-monitor@5.1.1\n - @redux-devtools/slider-monitor@5.1.1\n\n## 1.1.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/chart-monitor@6.0.0\n - @redux-devtools/inspector-monitor-test-tab@5.0.0\n - @redux-devtools/inspector-monitor-trace-tab@5.0.0\n - @redux-devtools/inspector-monitor@7.0.0\n - @redux-devtools/log-monitor@6.0.0\n - @redux-devtools/rtk-query-monitor@6.0.0\n - @redux-devtools/slider-monitor@6.0.0\n - @redux-devtools/ui@1.4.0\n - @redux-devtools/core@4.1.0\n\n## 1.0.0\n\n### Major Changes\n\n- 96ac1f2: Move the logic from @redux-devtools/app into @redux-devtools/app-core\n" }, { "path": "packages/redux-devtools-app-core/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2024 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.\n" }, { "path": "packages/redux-devtools-app-core/README.md", "content": "# Redux DevTools monitor app core\n\nThe core React component and Redux store for the Redux DevTools monitor app. It is split out to allow you to use it directly for transports other than the standard WebSocket one.\n\n### Usage\n\n```js\nimport { Provider } from 'react-redux';\nimport { Persistor } from 'redux-persist';\nimport { PersistGate } from 'redux-persist/integration/react';\nimport { App } from '@redux-devtools/app-core';\nimport { store, persistor } from \"./yourStore\";\n\nexport function Root() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools-app-core/eslint.config.mjs", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\nimport eslintTsReactJest from '../../eslint.ts.react.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n ...eslintTsReactJest(import.meta.dirname),\n {\n ignores: ['jest.config.ts', 'lib'],\n },\n];\n" }, { "path": "packages/redux-devtools-app-core/jest.config.ts", "content": "import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createDefaultEsmPreset({\n tsconfig: 'tsconfig.test.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n setupFilesAfterEnv: ['/test/setup.ts'],\n testEnvironment: 'jsdom',\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n '\\\\.css$': '/test/__mocks__/styleMock.ts',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "packages/redux-devtools-app-core/package.json", "content": "{\n \"name\": \"@redux-devtools/app-core\",\n \"version\": \"3.0.0\",\n \"description\": \"Redux DevTools app core\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-app-core\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Mihail Diordiev (https://github.com/zalmoxisus)\",\n \"files\": [\n \"build\",\n \"lib\",\n \"src\",\n \"umd\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint && pnpm run test\"\n },\n \"dependencies\": {\n \"@redux-devtools/chart-monitor\": \"workspace:^\",\n \"@redux-devtools/core\": \"workspace:^\",\n \"@redux-devtools/inspector-monitor\": \"workspace:^\",\n \"@redux-devtools/inspector-monitor-test-tab\": \"workspace:^\",\n \"@redux-devtools/inspector-monitor-trace-tab\": \"workspace:^\",\n \"@redux-devtools/log-monitor\": \"workspace:^\",\n \"@redux-devtools/rtk-query-monitor\": \"workspace:^\",\n \"@redux-devtools/slider-monitor\": \"workspace:^\",\n \"@redux-devtools/ui\": \"workspace:^\",\n \"d3-state-visualizer\": \"workspace:^\",\n \"javascript-stringify\": \"^2.1.0\",\n \"jsan\": \"^3.1.14\",\n \"jsondiffpatch\": \"^0.7.3\",\n \"react-icons\": \"^5.6.0\",\n \"react-is\": \"^19.2.4\"\n },\n \"devDependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@jest/globals\": \"^30.3.0\",\n \"@reduxjs/toolkit\": \"^2.11.2\",\n \"@rjsf/core\": \"^6.4.1\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/jest-dom\": \"^6.9.1\",\n \"@testing-library/react\": \"^16.3.2\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/jsan\": \"^3.1.5\",\n \"@types/json-schema\": \"^7.0.15\",\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"cross-env\": \"^10.1.0\",\n \"esbuild\": \"^0.27.4\",\n \"jest\": \"^30.3.0\",\n \"jest-environment-jsdom\": \"^30.3.0\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-redux\": \"^9.2.0\",\n \"redux\": \"^5.0.1\",\n \"redux-persist\": \"^6.0.0\",\n \"rimraf\": \"^6.1.3\",\n \"ts-jest\": \"^29.4.6\",\n \"ts-node\": \"^10.9.2\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@reduxjs/toolkit\": \"^1.0.0 || ^2.0.0\",\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-redux\": \"^8.0.0 || ^9.0.0\",\n \"redux\": \"^4.0.0 || ^5.0.0\",\n \"redux-persist\": \"^6.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/actions/index.ts", "content": "import { SchemeName, ThemeName } from '@redux-devtools/ui';\nimport { REHYDRATE } from 'redux-persist';\nimport {\n CHANGE_SECTION,\n CHANGE_THEME,\n SELECT_INSTANCE,\n SELECT_MONITOR,\n UPDATE_MONITOR_STATE,\n LIFTED_ACTION,\n MONITOR_ACTION,\n EXPORT,\n TOGGLE_SYNC,\n TOGGLE_SLIDER,\n TOGGLE_DISPATCHER,\n TOGGLE_PERSIST,\n GET_REPORT_REQUEST,\n SHOW_NOTIFICATION,\n CLEAR_NOTIFICATION,\n UPDATE_STATE,\n UPDATE_REPORTS,\n REMOVE_INSTANCE,\n SET_STATE,\n GET_REPORT_ERROR,\n GET_REPORT_SUCCESS,\n ERROR,\n SET_PERSIST,\n CHANGE_STATE_TREE_SETTINGS,\n CLEAR_INSTANCES,\n} from '../constants/actionTypes.js';\nimport { Action } from 'redux';\nimport { Features, State } from '../reducers/instances.js';\nimport { MonitorStateMonitorState } from '../reducers/monitor.js';\nimport { LiftedAction } from '@redux-devtools/core';\nimport { Data } from '../reducers/reports.js';\nimport { LiftedState } from '@redux-devtools/core';\n\nlet monitorReducer: (\n monitorProps: unknown,\n state: unknown | undefined,\n action: Action,\n) => unknown;\nlet monitorProps: unknown = {};\n\nexport interface ChangeSectionAction {\n readonly type: typeof CHANGE_SECTION;\n readonly section: string;\n}\nexport function changeSection(section: string): ChangeSectionAction {\n return { type: CHANGE_SECTION, section };\n}\n\ninterface ChangeThemeFormData {\n readonly theme: ThemeName;\n readonly scheme: SchemeName;\n readonly colorPreference: 'auto' | 'light' | 'dark';\n}\ninterface ChangeThemeData {\n readonly formData?: ChangeThemeFormData;\n}\nexport interface ChangeThemeAction {\n readonly type: typeof CHANGE_THEME;\n readonly theme: ThemeName;\n readonly scheme: SchemeName;\n readonly colorPreference: 'auto' | 'light' | 'dark';\n}\nexport function changeTheme(data: ChangeThemeData): ChangeThemeAction {\n return { type: CHANGE_THEME, ...data.formData! };\n}\n\ninterface ChangeStateTreeSettingsFormData {\n readonly sortAlphabetically: boolean;\n readonly disableCollection: boolean;\n}\n\ninterface ChangeStateTreeSettingsData {\n readonly formData?: ChangeStateTreeSettingsFormData;\n}\n\nexport interface ChangeStateTreeSettingsAction {\n readonly type: typeof CHANGE_STATE_TREE_SETTINGS;\n readonly sortAlphabetically: boolean;\n readonly disableCollection: boolean;\n}\n\nexport function changeStateTreeSettings(\n data: ChangeStateTreeSettingsData,\n): ChangeStateTreeSettingsAction {\n return { type: CHANGE_STATE_TREE_SETTINGS, ...data.formData! };\n}\n\nexport interface InitMonitorAction {\n type: '@@INIT_MONITOR';\n newMonitorState: unknown;\n update: (\n monitorProps: unknown,\n state: unknown | undefined,\n action: Action,\n ) => unknown;\n monitorProps: unknown;\n}\nexport interface MonitorActionAction {\n type: typeof MONITOR_ACTION;\n action: InitMonitorAction;\n monitorReducer: (\n monitorProps: unknown,\n state: unknown | undefined,\n action: Action,\n ) => unknown;\n monitorProps: unknown;\n}\nexport interface JumpToStateAction {\n type: 'JUMP_TO_STATE';\n index: number;\n}\nexport interface JumpToActionAction {\n type: 'JUMP_TO_ACTION';\n actionId: number;\n}\nexport interface PauseRecordingAction {\n type: 'PAUSE_RECORDING';\n status: boolean;\n}\nexport interface LockChangesAction {\n type: 'LOCK_CHANGES';\n status: boolean;\n}\nexport interface ToggleActionAction {\n type: 'TOGGLE_ACTION';\n id: number;\n}\nexport interface RollbackAction {\n type: 'ROLLBACK';\n timestamp: number;\n}\nexport interface SweepAction {\n type: 'SWEEP';\n}\ninterface ReorderActionAction {\n type: 'REORDER_ACTION';\n actionId: number;\n beforeActionId: number;\n}\ninterface ImportStateAction {\n type: 'IMPORT_STATE';\n nextLiftedState:\n | LiftedState, unknown>\n | readonly Action[];\n preloadedState?: unknown;\n noRecompute?: boolean | undefined;\n}\nexport type DispatchAction =\n | JumpToStateAction\n | JumpToActionAction\n | PauseRecordingAction\n | LockChangesAction\n | ToggleActionAction\n | RollbackAction\n | SweepAction\n | ReorderActionAction\n | ImportStateAction;\ninterface LiftedActionActionBase {\n action?: DispatchAction | string | CustomAction;\n state?: string;\n toAll?: boolean;\n}\nexport interface LiftedActionDispatchAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'DISPATCH';\n action: DispatchAction;\n toAll?: boolean;\n}\nexport interface LiftedActionImportAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'IMPORT';\n state: string;\n preloadedState: unknown | undefined;\n}\nexport interface LiftedActionActionAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'ACTION';\n action: string | CustomAction;\n}\nexport interface LiftedActionExportAction extends LiftedActionActionBase {\n type: typeof LIFTED_ACTION;\n message: 'EXPORT';\n toExport: boolean;\n}\nexport type LiftedActionAction =\n | LiftedActionDispatchAction\n | LiftedActionImportAction\n | LiftedActionActionAction\n | LiftedActionExportAction;\nexport function liftedDispatch(\n action:\n | InitMonitorAction\n | JumpToStateAction\n | JumpToActionAction\n | LiftedAction, unknown>,\n): MonitorActionAction | LiftedActionDispatchAction {\n if (action.type[0] === '@') {\n if (action.type === '@@INIT_MONITOR') {\n monitorReducer = action.update;\n monitorProps = action.monitorProps;\n }\n return {\n type: MONITOR_ACTION,\n action,\n monitorReducer,\n monitorProps,\n } as MonitorActionAction;\n }\n return {\n type: LIFTED_ACTION,\n message: 'DISPATCH',\n action,\n } as LiftedActionDispatchAction;\n}\n\nexport interface SelectInstanceAction {\n type: typeof SELECT_INSTANCE;\n selected: string | number;\n}\nexport function selectInstance(selected: string): SelectInstanceAction {\n return { type: SELECT_INSTANCE, selected };\n}\n\nexport interface SelectMonitorAction {\n type: typeof SELECT_MONITOR;\n monitor: string;\n monitorState?: MonitorStateMonitorState;\n}\nexport function selectMonitor(monitor: string): SelectMonitorAction {\n return { type: SELECT_MONITOR, monitor };\n}\nexport function selectMonitorWithState(\n value: string,\n monitorState: MonitorStateMonitorState,\n): SelectMonitorAction {\n return { type: SELECT_MONITOR, monitor: value, monitorState };\n}\n\ninterface NextState {\n subTabName: string;\n inspectedStatePath?: string[];\n}\nexport interface UpdateMonitorStateAction {\n type: typeof UPDATE_MONITOR_STATE;\n nextState: NextState;\n}\nexport function selectMonitorTab(subTabName: string): UpdateMonitorStateAction {\n return { type: UPDATE_MONITOR_STATE, nextState: { subTabName } };\n}\n\nexport function updateMonitorState(\n nextState: NextState,\n): UpdateMonitorStateAction {\n return { type: UPDATE_MONITOR_STATE, nextState };\n}\n\nexport function importState(\n state: string,\n preloadedState?: unknown,\n): LiftedActionImportAction {\n return { type: LIFTED_ACTION, message: 'IMPORT', state, preloadedState };\n}\n\nexport interface ExportAction {\n type: typeof EXPORT;\n}\nexport function exportState(): ExportAction {\n return { type: EXPORT };\n}\n\nexport function lockChanges(status: boolean): LiftedActionDispatchAction {\n return {\n type: LIFTED_ACTION,\n message: 'DISPATCH',\n action: { type: 'LOCK_CHANGES', status },\n toAll: true,\n };\n}\n\nexport function pauseRecording(status: boolean): LiftedActionDispatchAction {\n return {\n type: LIFTED_ACTION,\n message: 'DISPATCH',\n action: { type: 'PAUSE_RECORDING', status },\n toAll: true,\n };\n}\n\nexport interface CustomAction {\n name: string;\n selected: number;\n args: string[];\n rest: string;\n}\nexport function dispatchRemotely(\n action: string | CustomAction,\n): LiftedActionActionAction {\n return { type: LIFTED_ACTION, message: 'ACTION', action };\n}\n\nexport interface TogglePersistAction {\n type: typeof TOGGLE_PERSIST;\n}\nexport function togglePersist(): TogglePersistAction {\n return { type: TOGGLE_PERSIST };\n}\n\nexport interface SetPersistAction {\n type: typeof SET_PERSIST;\n payload: boolean;\n}\nexport function setPersist(persist: boolean): SetPersistAction {\n return { type: SET_PERSIST, payload: persist };\n}\n\nexport interface ToggleSyncAction {\n type: typeof TOGGLE_SYNC;\n}\nexport function toggleSync(): ToggleSyncAction {\n return { type: TOGGLE_SYNC };\n}\n\nexport interface ToggleSliderAction {\n type: typeof TOGGLE_SLIDER;\n}\nexport function toggleSlider(): ToggleSliderAction {\n return { type: TOGGLE_SLIDER };\n}\n\nexport interface ToggleDispatcherAction {\n type: typeof TOGGLE_DISPATCHER;\n}\nexport function toggleDispatcher(): ToggleDispatcherAction {\n return { type: TOGGLE_DISPATCHER };\n}\n\ninterface Notification {\n readonly type: 'error';\n readonly message: string;\n}\nexport interface ShowNotificationAction {\n readonly type: typeof SHOW_NOTIFICATION;\n readonly notification: Notification;\n}\nexport function showNotification(message: string): ShowNotificationAction {\n return { type: SHOW_NOTIFICATION, notification: { type: 'error', message } };\n}\n\nexport interface ClearNotificationAction {\n readonly type: typeof CLEAR_NOTIFICATION;\n}\nexport function clearNotification(): ClearNotificationAction {\n return { type: CLEAR_NOTIFICATION };\n}\n\nexport interface GetReportRequest {\n readonly type: typeof GET_REPORT_REQUEST;\n readonly report: unknown;\n}\nexport function getReport(report: unknown): GetReportRequest {\n return { type: GET_REPORT_REQUEST, report };\n}\n\nexport interface ActionCreator {\n args: string[];\n name: string;\n}\n\nexport interface LibConfig {\n actionCreators?: string;\n name?: string;\n type?: string;\n features?: Features;\n serialize?: boolean;\n}\n\nexport interface RequestBase {\n id?: string;\n instanceId?: string | number;\n action?: string;\n name?: string | undefined;\n libConfig?: LibConfig;\n actionsById?: string;\n computedStates?: string;\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n payload?: {} | string;\n liftedState?: Partial;\n}\ninterface InitRequest extends RequestBase {\n type: 'INIT';\n action?: string;\n payload?: string;\n}\ninterface ActionRequest extends RequestBase {\n type: 'ACTION';\n isExcess?: boolean;\n nextActionId: number;\n maxAge: number;\n batched?: boolean;\n}\ninterface StateRequest extends RequestBase {\n type: 'STATE';\n committedState: unknown;\n}\ninterface PartialStateRequest extends RequestBase {\n type: 'PARTIAL_STATE';\n committedState: unknown;\n maxAge: number;\n}\ninterface LiftedRequest extends RequestBase {\n type: 'LIFTED';\n}\nexport interface ExportRequest extends RequestBase {\n type: 'EXPORT';\n committedState: unknown;\n}\nexport type Request =\n | InitRequest\n | ActionRequest\n | StateRequest\n | PartialStateRequest\n | LiftedRequest\n | ExportRequest;\n\nexport interface UpdateStateAction {\n type: typeof UPDATE_STATE;\n request?: Request;\n id?: string | number;\n}\n\nexport interface SetStateAction {\n type: typeof SET_STATE;\n newState: State;\n}\n\nexport interface RemoveInstanceAction {\n type: typeof REMOVE_INSTANCE;\n id: string | number;\n}\n\nexport interface ClearInstancesAction {\n type: typeof CLEAR_INSTANCES;\n}\n\ninterface ListRequest {\n type: 'list';\n data: Data[];\n}\ninterface AddRequest {\n type: 'add';\n data: Data;\n}\ninterface RemoveRequest {\n type: 'remove';\n data: Data;\n id: unknown;\n}\nexport type UpdateReportsRequest = ListRequest | AddRequest | RemoveRequest;\nexport interface UpdateReportsAction {\n type: typeof UPDATE_REPORTS;\n request: UpdateReportsRequest;\n}\n\nexport interface GetReportError {\n type: typeof GET_REPORT_ERROR;\n error: Error;\n}\n\nexport interface GetReportSuccess {\n type: typeof GET_REPORT_SUCCESS;\n data: { payload: string };\n}\n\nexport interface ErrorAction {\n type: typeof ERROR;\n payload: string;\n}\n\nexport interface ReduxPersistRehydrateAction {\n type: typeof REHYDRATE;\n payload: unknown;\n}\n\nexport type CoreStoreActionWithoutUpdateStateOrLiftedAction =\n | ChangeSectionAction\n | ChangeThemeAction\n | ChangeStateTreeSettingsAction\n | MonitorActionAction\n | SelectInstanceAction\n | SelectMonitorAction\n | UpdateMonitorStateAction\n | ExportAction\n | TogglePersistAction\n | SetPersistAction\n | ToggleSyncAction\n | ToggleSliderAction\n | ToggleDispatcherAction\n | ShowNotificationAction\n | ClearNotificationAction\n | GetReportRequest\n | SetStateAction\n | RemoveInstanceAction\n | ClearInstancesAction\n | UpdateReportsAction\n | GetReportError\n | GetReportSuccess\n | ErrorAction\n | ReduxPersistRehydrateAction;\n\nexport type CoreStoreActionWithoutUpdateState =\n | CoreStoreActionWithoutUpdateStateOrLiftedAction\n | LiftedActionAction;\n\nexport type CoreStoreActionWithoutLiftedAction =\n | CoreStoreActionWithoutUpdateStateOrLiftedAction\n | UpdateStateAction;\n\nexport type CoreStoreAction =\n | CoreStoreActionWithoutUpdateState\n | UpdateStateAction;\n" }, { "path": "packages/redux-devtools-app-core/src/components/BottomButtons.tsx", "content": "import React, { Component } from 'react';\nimport { Toolbar, Divider } from '@redux-devtools/ui';\nimport ExportButton from './buttons/ExportButton.js';\nimport ImportButton from './buttons/ImportButton.js';\nimport PrintButton from './buttons/PrintButton.js';\nimport DispatcherButton from './buttons/DispatcherButton.js';\nimport SliderButton from './buttons/SliderButton.js';\nimport MonitorSelector from './MonitorSelector.js';\nimport { Options } from '../reducers/instances.js';\n\ninterface Props {\n dispatcherIsOpen: boolean;\n sliderIsOpen: boolean;\n options: Options;\n}\n\nexport default class BottomButtons extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return (\n nextProps.dispatcherIsOpen !== this.props.dispatcherIsOpen ||\n nextProps.sliderIsOpen !== this.props.sliderIsOpen ||\n nextProps.options !== this.props.options\n );\n }\n\n render() {\n const features = this.props.options.features;\n return (\n \n {features.export && }\n {features.import && }\n \n \n \n \n {features.jump && }\n {features.dispatch && (\n \n )}\n \n );\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/components/Header.tsx", "content": "import React, { Component } from 'react';\nimport { Tabs, Toolbar, Button, Divider } from '@redux-devtools/ui';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { GoBook } from 'react-icons/go';\nimport { IoMdText } from 'react-icons/io';\nimport { TiSocialTwitter } from 'react-icons/ti';\nimport { TiHeartFullOutline } from 'react-icons/ti';\nimport { changeSection } from '../actions/index.js';\n\nconst tabs = [{ name: 'Actions' }, { name: 'Settings' }];\n\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n readonly section: string;\n}\ntype Props = DispatchProps & OwnProps;\n\nclass Header extends Component {\n openLink = (url: string) => () => {\n window.open(url);\n };\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nconst actionCreators = {\n changeSection,\n};\n\nexport default connect(null, actionCreators)(Header);\n" }, { "path": "packages/redux-devtools-app-core/src/components/InstanceSelector.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Select } from '@redux-devtools/ui';\nimport { selectInstance } from '../actions/index.js';\nimport { CoreStoreState } from '../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps & DispatchProps;\n\nclass InstanceSelector extends Component {\n select?: { readonly value: string; readonly label: string | number }[];\n\n render() {\n this.select = [{ value: '', label: 'Autoselect instances' }];\n const instances = this.props.instances;\n let name;\n Object.keys(instances).forEach((key) => {\n name = instances[key].name;\n if (name !== undefined) this.select!.push({ value: key, label: name });\n });\n\n return (\n this.props.onSelect(option!.value)}\n value={this.select.find(\n (option) => option.value === this.props.selected,\n )}\n />\n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n selected: state.instances.selected,\n instances: state.instances.options,\n});\n\nconst actionCreators = {\n onSelect: selectInstance,\n};\n\nexport default connect(mapStateToProps, actionCreators)(InstanceSelector);\n" }, { "path": "packages/redux-devtools-app-core/src/components/MonitorSelector.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Tabs } from '@redux-devtools/ui';\nimport { monitors } from '../utils/getMonitor.js';\nimport { selectMonitor } from '../actions/index.js';\nimport { CoreStoreState } from '../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps & DispatchProps;\n\nclass MonitorSelector extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.selected !== this.props.selected;\n }\n\n render() {\n return (\n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n selected: state.monitor.selected,\n});\n\nconst actionCreators = {\n selectMonitor,\n};\n\nexport default connect(mapStateToProps, actionCreators)(MonitorSelector);\n" }, { "path": "packages/redux-devtools-app-core/src/components/Settings/StateTree.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Container, Form } from '@redux-devtools/ui';\nimport { changeStateTreeSettings } from '../../actions/index.js';\nimport { CoreStoreState } from '../../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps & DispatchProps;\n\nexport class StateTree extends Component {\n render() {\n const stateTree = this.props.theme;\n const formData = {\n sortAlphabetically: stateTree.sortAlphabetically,\n disableCollection: stateTree.disableCollection,\n };\n\n return (\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n theme: state.stateTreeSettings,\n});\n\nconst actionCreators = {\n changeStateTreeSettings,\n};\n\nexport default connect(mapStateToProps, actionCreators)(StateTree);\n" }, { "path": "packages/redux-devtools-app-core/src/components/Settings/Themes.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Container, Form } from '@redux-devtools/ui';\nimport { listSchemes, listThemes } from '@redux-devtools/ui';\nimport { changeTheme } from '../../actions/index.js';\nimport { CoreStoreState } from '../../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps & DispatchProps;\n\nexport class Themes extends Component {\n render() {\n const theme = this.props.theme;\n const formData = {\n theme: theme.theme,\n scheme: theme.scheme,\n colorPreference: theme.colorPreference,\n };\n\n return (\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n theme: state.theme,\n});\n\nconst actionCreators = {\n changeTheme,\n};\n\nexport default connect(mapStateToProps, actionCreators)(Themes);\n" }, { "path": "packages/redux-devtools-app-core/src/components/Settings/index.tsx", "content": "import React, { Component } from 'react';\nimport { Tabs } from '@redux-devtools/ui';\nimport Themes from './Themes.js';\nimport StateTree from './StateTree.js';\n\ninterface Props {\n extraTabs?: { name: string; component: React.ComponentType }[];\n}\n\ninterface State {\n selected: string | undefined;\n}\n\nexport default class Settings extends Component {\n state: State = { selected: undefined };\n\n handleSelect = (selected: string) => {\n this.setState({ selected });\n };\n\n render() {\n const { extraTabs = [] } = this.props;\n const tabs = [\n ...extraTabs,\n { name: 'Themes', component: Themes },\n { name: 'State Tree', component: StateTree },\n ];\n return (\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n \n tabs={tabs as any}\n selected={this.state.selected || tabs[0].name}\n onClick={this.handleSelect}\n />\n );\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/components/TopButtons.tsx", "content": "import React, { Component } from 'react';\nimport { ActionCreators, LiftedAction } from '@redux-devtools/core';\nimport { Button, Toolbar, Divider } from '@redux-devtools/ui';\nimport { Action } from 'redux';\nimport RecordButton from './buttons/RecordButton.js';\nimport PersistButton from './buttons/PersistButton.js';\nimport LockButton from './buttons/LockButton.js';\nimport InstanceSelector from './InstanceSelector.js';\nimport SyncButton from './buttons/SyncButton.js';\nimport { Options, State } from '../reducers/instances.js';\n\nconst { reset, rollback, commit, sweep } = ActionCreators;\n\ninterface Props {\n dispatch: (action: LiftedAction, unknown>) => void;\n liftedState: State;\n options: Options;\n}\n\nexport default class TopButtons extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return (\n nextProps.options !== this.props.options ||\n nextProps.liftedState !== this.props.liftedState\n );\n }\n\n handleRollback = () => {\n this.props.dispatch(rollback());\n };\n\n handleSweep = () => {\n this.props.dispatch(sweep());\n };\n\n handleCommit = () => {\n this.props.dispatch(commit());\n };\n\n handleReset = () => {\n this.props.dispatch(reset());\n };\n\n render() {\n const options = this.props.options;\n const features = options.features;\n const { computedStates, skippedActionIds, isPaused, isLocked } =\n this.props.liftedState;\n const noStates = computedStates.length < 2;\n\n return (\n \n {features.pause && }\n {features.persist && }\n {features.lock && (\n \n )}\n \n \n Reset\n \n \n Revert\n \n \n Sweep\n \n \n Commit\n \n \n \n {features.sync && }\n \n );\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/DispatcherButton.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { FaTerminal } from 'react-icons/fa';\nimport { toggleDispatcher } from '../../actions/index.js';\n\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n dispatcherIsOpen: boolean;\n}\ntype Props = DispatchProps & OwnProps;\n\nclass DispatcherButton extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.dispatcherIsOpen !== this.props.dispatcherIsOpen;\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nconst actionCreators = {\n toggleDispatcher,\n};\n\nexport default connect(null, actionCreators)(DispatcherButton);\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/ExportButton.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { TiDownload } from 'react-icons/ti';\nimport { exportState } from '../../actions/index.js';\n\ntype DispatchProps = ResolveThunks;\ntype Props = DispatchProps;\n\nclass ExportButton extends Component {\n shouldComponentUpdate() {\n return false;\n }\n\n render() {\n return (\n \n );\n }\n}\n\nconst actionCreators = {\n exportState,\n};\n\nexport default connect(null, actionCreators)(ExportButton);\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/ImportButton.tsx", "content": "import React, { ChangeEventHandler, Component, RefCallback } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { TiUpload } from 'react-icons/ti';\nimport { importState } from '../../actions/index.js';\n\ntype DispatchProps = ResolveThunks;\ntype Props = DispatchProps;\n\nclass ImportButton extends Component {\n fileInput?: HTMLInputElement | null;\n\n shouldComponentUpdate() {\n return false;\n }\n\n mapRef: RefCallback = (node) => {\n this.fileInput = node;\n };\n\n handleImport = () => {\n this.fileInput!.click();\n };\n\n handleImportFile: ChangeEventHandler = (e) => {\n const file = e.target.files![0];\n const reader = new FileReader();\n reader.onload = () => {\n this.props.importState(reader.result as string);\n };\n reader.readAsText(file);\n e.target.value = '';\n };\n\n render() {\n return (\n \n );\n }\n}\n\nconst actionCreators = {\n importState,\n};\n\nexport default connect(null, actionCreators)(ImportButton);\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/LockButton.tsx", "content": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { IoIosLock } from 'react-icons/io';\nimport { lockChanges, CoreStoreAction } from '../../actions/index.js';\nimport { Dispatch } from 'redux';\n\ntype DispatchProps = ReturnType;\ninterface OwnProps {\n locked: boolean | undefined;\n disabled: boolean;\n}\ntype Props = DispatchProps & OwnProps;\n\nclass LockButton extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.locked !== this.props.locked;\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nfunction mapDispatchToProps(\n dispatch: Dispatch,\n ownProps: OwnProps,\n) {\n return {\n lockChanges: () => dispatch(lockChanges(!ownProps.locked)),\n };\n}\n\nexport default connect(null, mapDispatchToProps)(LockButton);\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/PersistButton.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { FaThumbtack } from 'react-icons/fa';\nimport { togglePersist } from '../../actions/index.js';\nimport { CoreStoreState } from '../../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n disabled?: boolean;\n}\ntype Props = StateProps & DispatchProps & OwnProps;\n\nclass LockButton extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.persisted !== this.props.persisted;\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n persisted: state.instances.persisted,\n});\n\nconst actionCreators = {\n onClick: togglePersist,\n};\n\nexport default connect(mapStateToProps, actionCreators)(LockButton);\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/PrintButton.tsx", "content": "import React, { Component } from 'react';\nimport { Button } from '@redux-devtools/ui';\nimport { MdPrint } from 'react-icons/md';\n\nexport default class PrintButton extends Component {\n shouldComponentUpdate() {\n return false;\n }\n\n handlePrint = () => {\n const d3svg = document.getElementById('d3svg') as unknown as SVGGElement;\n if (!d3svg) {\n window.print();\n return;\n }\n\n const initHeight = d3svg.style.height;\n const initWidth = d3svg.style.width;\n const box = d3svg.getBBox();\n d3svg.style.height = `${box.height}`;\n d3svg.style.width = `${box.width}`;\n\n const g = d3svg.firstChild! as SVGGElement;\n const initTransform = g.getAttribute('transform')!;\n g.setAttribute(\n 'transform',\n initTransform.replace(/.+scale\\(/, 'translate(57, 10) scale('),\n );\n\n window.print();\n\n d3svg.style.height = initHeight;\n d3svg.style.width = initWidth;\n g.setAttribute('transform', initTransform);\n };\n\n render() {\n return (\n \n );\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/RecordButton.tsx", "content": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { MdFiberManualRecord } from 'react-icons/md';\nimport { pauseRecording, CoreStoreAction } from '../../actions/index.js';\nimport { Dispatch } from 'redux';\n\ntype DispatchProps = ReturnType;\ninterface OwnProps {\n paused: boolean | undefined;\n}\ntype Props = DispatchProps & OwnProps;\n\nclass RecordButton extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.paused !== this.props.paused;\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nfunction mapDispatchToProps(\n dispatch: Dispatch,\n ownProps: OwnProps,\n) {\n return {\n pauseRecording: () => dispatch(pauseRecording(!ownProps.paused)),\n };\n}\n\nexport default connect(null, mapDispatchToProps)(RecordButton);\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/SliderButton.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { MdAvTimer } from 'react-icons/md';\nimport { toggleSlider } from '../../actions/index.js';\n\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n isOpen: boolean;\n}\ntype Props = DispatchProps & OwnProps;\n\nclass SliderButton extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.isOpen !== this.props.isOpen;\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nconst actionCreators = {\n toggleSlider,\n};\n\nexport default connect(null, actionCreators)(SliderButton);\n" }, { "path": "packages/redux-devtools-app-core/src/components/buttons/SyncButton.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Button } from '@redux-devtools/ui';\nimport { TiArrowSync } from 'react-icons/ti';\nimport { toggleSync } from '../../actions/index.js';\nimport { CoreStoreState } from '../../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps & DispatchProps;\n\nclass SyncButton extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.sync !== this.props.sync;\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n sync: state.instances.sync,\n});\n\nconst actionCreators = {\n onClick: toggleSync,\n};\n\nexport default connect(mapStateToProps, actionCreators)(SyncButton);\n" }, { "path": "packages/redux-devtools-app-core/src/constants/actionTypes.ts", "content": "export const CHANGE_SECTION = 'main/CHANGE_SECTION';\nexport const CHANGE_THEME = 'main/CHANGE_THEME';\nexport const CHANGE_STATE_TREE_SETTINGS = 'main/CHANGE_STATE_TREE_SETTINGS';\n\nexport const UPDATE_STATE = 'devTools/UPDATE_STATE';\nexport const SET_STATE = 'devTools/SET_STATE';\nexport const SELECT_INSTANCE = 'devTools/SELECT_INSTANCE';\nexport const REMOVE_INSTANCE = 'devTools/REMOVE_INSTANCE';\nexport const CLEAR_INSTANCES = 'devTools/CLEAR_INSTANCES';\nexport const LIFTED_ACTION = 'devTools/LIFTED_ACTION';\nexport const MONITOR_ACTION = 'devTools/MONITOR_ACTION';\nexport const TOGGLE_SYNC = 'devTools/TOGGLE_SYNC';\nexport const TOGGLE_PERSIST = 'devTools/TOGGLE_PERSIST';\nexport const SET_PERSIST = 'devTools/SET_PERSIST';\nexport const SELECT_MONITOR = 'devTools/SELECT_MONITOR';\nexport const UPDATE_MONITOR_STATE = 'devTools/UPDATE_MONITOR_STATE';\nexport const TOGGLE_SLIDER = 'devTools/TOGGLE_SLIDER';\nexport const TOGGLE_DISPATCHER = 'devTools/TOGGLE_DISPATCHER';\nexport const EXPORT = 'devTools/EXPORT';\nexport const SHOW_NOTIFICATION = 'devTools/SHOW_NOTIFICATION';\nexport const CLEAR_NOTIFICATION = 'devTools/CLEAR_NOTIFICATION';\n\nexport const UPDATE_REPORTS = 'reports/UPDATE';\nexport const GET_REPORT_REQUEST = 'reports/GET_REPORT_REQUEST';\nexport const GET_REPORT_ERROR = 'reports/GET_REPORT_ERROR';\nexport const GET_REPORT_SUCCESS = 'reports/GET_REPORT_SUCCESS';\nexport const ERROR = 'ERROR';\n" }, { "path": "packages/redux-devtools-app-core/src/constants/dataTypes.ts", "content": "export const DATA_TYPE_KEY = Symbol.for('__serializedType__');\nexport const DATA_REF_KEY = Symbol.for('__serializedRef__');\n" }, { "path": "packages/redux-devtools-app-core/src/containers/Actions.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Container } from '@redux-devtools/ui';\nimport SliderMonitor from './monitors/Slider.js';\nimport { liftedDispatch, getReport } from '../actions/index.js';\nimport { getActiveInstance } from '../reducers/instances.js';\nimport DevTools from './DevTools.js';\nimport Dispatcher from './monitors/Dispatcher.js';\nimport TopButtons from '../components/TopButtons.js';\nimport BottomButtons from '../components/BottomButtons.js';\nimport { CoreStoreState } from '../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps & DispatchProps;\n\nclass Actions extends Component {\n render() {\n const {\n monitor,\n dispatcherIsOpen,\n sliderIsOpen,\n options,\n liftedState,\n liftedDispatch,\n stateTreeSettings,\n } = this.props;\n return (\n \n \n \n {sliderIsOpen && options.connectionId && options.features.jump && (\n \n )}\n {dispatcherIsOpen &&\n options.connectionId &&\n options.features.dispatch && }\n \n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => {\n const instances = state.instances;\n const id = getActiveInstance(instances);\n return {\n liftedState: instances.states[id],\n monitorState: state.monitor.monitorState,\n options: instances.options[id],\n monitor: state.monitor.selected,\n dispatcherIsOpen: state.monitor.dispatcherIsOpen,\n sliderIsOpen: state.monitor.sliderIsOpen,\n reports: state.reports.data,\n stateTreeSettings: state.stateTreeSettings,\n };\n};\n\nconst actionCreators = {\n liftedDispatch,\n getReport,\n};\n\nexport default connect(mapStateToProps, actionCreators)(Actions);\n" }, { "path": "packages/redux-devtools-app-core/src/containers/App.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Container, Notification } from '@redux-devtools/ui';\nimport { clearNotification } from '../actions/index.js';\nimport Header from '../components/Header.js';\nimport Actions from './Actions.js';\nimport Settings from '../components/Settings/index.js';\nimport { CoreStoreState } from '../reducers/index.js';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype OwnProps = {\n extraSettingsTabs?: { name: string; component: React.ComponentType }[];\n};\ntype Props = StateProps & DispatchProps & OwnProps;\n\nclass App extends Component {\n render() {\n const { extraSettingsTabs, section, theme, notification } = this.props;\n let body;\n switch (section) {\n case 'Settings':\n body = ;\n break;\n default:\n body = ;\n }\n\n return (\n \n
    \n {body}\n {notification && (\n \n {notification.message}\n \n )}\n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n section: state.section,\n theme: state.theme,\n notification: state.notification,\n});\n\nconst actionCreators = {\n clearNotification,\n};\n\nexport default connect(mapStateToProps, actionCreators)(App);\n" }, { "path": "packages/redux-devtools-app-core/src/containers/DevTools.tsx", "content": "import React, { Component } from 'react';\nimport { withTheme } from '@emotion/react';\nimport { LiftedAction, LiftedState } from '@redux-devtools/core';\nimport { Action } from 'redux';\nimport getMonitor from '../utils/getMonitor.js';\nimport { InitMonitorAction } from '../actions/index.js';\nimport { Features, State } from '../reducers/instances.js';\nimport { MonitorStateMonitorState } from '../reducers/monitor.js';\nimport { ThemeFromProvider } from '@redux-devtools/ui';\nimport { StateTreeSettings } from '../reducers/stateTreeSettings.js';\n\ninterface Props {\n monitor: string;\n liftedState: State;\n monitorState: MonitorStateMonitorState | undefined;\n dispatch: (\n action: LiftedAction, unknown> | InitMonitorAction,\n ) => void;\n features: Features | undefined;\n theme: ThemeFromProvider;\n stateTreeSettings: StateTreeSettings;\n}\n\nclass DevTools extends Component {\n monitorProps?: object;\n Monitor?: React.ComponentType<\n LiftedState, unknown>\n > & {\n update(\n this: void,\n monitorProps: unknown,\n state: unknown | undefined,\n action: Action,\n ): unknown;\n };\n preventRender?: boolean;\n\n constructor(props: Props) {\n super(props);\n this.getMonitor(props, props.monitorState);\n }\n\n getMonitor(props: Props, skipUpdate?: unknown) {\n const monitorElement = getMonitor(props);\n this.monitorProps = monitorElement.props;\n this.Monitor = monitorElement.type;\n\n const update = this.Monitor!.update;\n if (update) {\n let newMonitorState;\n const monitorState = props.monitorState;\n if (\n skipUpdate ||\n (monitorState && monitorState.__overwritten__ === props.monitor)\n ) {\n newMonitorState = monitorState;\n } else {\n newMonitorState = update(\n this.monitorProps,\n undefined,\n {} as Action,\n );\n if (newMonitorState !== monitorState) {\n this.preventRender = true;\n }\n }\n this.dispatch({\n type: '@@INIT_MONITOR',\n newMonitorState,\n update,\n monitorProps: this.monitorProps,\n });\n }\n }\n\n UNSAFE_componentWillUpdate(nextProps: Props) {\n if (nextProps.monitor !== this.props.monitor) this.getMonitor(nextProps);\n }\n\n shouldComponentUpdate(nextProps: Props) {\n return (\n nextProps.monitor !== this.props.monitor ||\n nextProps.liftedState !== this.props.liftedState ||\n nextProps.monitorState !== this.props.monitorState ||\n nextProps.features !== this.props.features ||\n nextProps.theme.scheme !== this.props.theme.scheme\n );\n }\n\n dispatch = (\n action: LiftedAction, unknown> | InitMonitorAction,\n ) => {\n this.props.dispatch(action);\n };\n\n render() {\n if (this.preventRender) {\n this.preventRender = false;\n return null;\n }\n\n const liftedState = {\n ...this.props.liftedState,\n monitorState: this.props.monitorState,\n };\n const MonitorAsAny = this.Monitor as any;\n return (\n
    \n \n
    \n );\n }\n}\n\nexport default withTheme(DevTools);\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/ChartMonitorWrapper.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport {\n ChartMonitor,\n ChartMonitorAction,\n ChartMonitorProps,\n ChartMonitorState,\n} from '@redux-devtools/chart-monitor';\nimport type { HierarchyPointNode, Node } from 'd3-state-visualizer';\nimport { selectMonitorWithState } from '../../actions/index.js';\nimport { Action } from 'redux';\n\nexport function getPath(\n obj: HierarchyPointNode,\n inspectedStatePath: string[],\n) {\n const parent = obj.parent;\n if (!parent) return;\n getPath(parent, inspectedStatePath);\n let name = obj.data.name;\n const item = /.+\\[(\\d+)]/.exec(name);\n if (item) name = item[1];\n inspectedStatePath.push(name);\n}\n\ntype DispatchProps = ResolveThunks;\ntype Props = DispatchProps;\n\nclass ChartMonitorWrapper extends Component {\n static update: >(\n props: ChartMonitorProps,\n state: ChartMonitorState | undefined,\n action: ChartMonitorAction,\n ) => ChartMonitorState = ChartMonitor.update;\n\n onClickText = (data: HierarchyPointNode) => {\n const inspectedStatePath: string[] = [];\n getPath(data, inspectedStatePath);\n this.props.selectMonitorWithState('InspectorMonitor', {\n inspectedStatePath,\n tabName: 'State',\n subTabName: data.children ? 'Chart' : 'Tree',\n selectedActionId: null,\n startActionId: null,\n inspectedActionPath: [],\n });\n };\n\n render() {\n return (\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n \n );\n }\n}\n\nconst actionCreators = {\n selectMonitorWithState: selectMonitorWithState,\n};\n\nexport default connect(null, actionCreators)(ChartMonitorWrapper);\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/Dispatcher.tsx", "content": "// Based on https://github.com/YoruNoHikage/redux-devtools-dispatch\n\nimport React, { Component } from 'react';\nimport styled from '@emotion/styled';\nimport {\n Button,\n Select,\n Editor,\n Toolbar,\n Base16Theme,\n} from '@redux-devtools/ui';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { dispatchRemotely } from '../../actions/index.js';\nimport { Options } from '../../reducers/instances.js';\n\nexport const DispatcherContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n padding-top: 2px;\n background: ${(props: { theme?: Base16Theme }) => props.theme!.base01};\n`;\n\nexport const CodeContainer = styled.div`\n height: 75px;\n padding-right: 6px;\n overflow: auto;\n`;\n\nexport const ActionContainer = styled.div`\n display: table;\n width: 100%;\n color: ${(props: { theme?: Base16Theme }) => props.theme!.base06};\n\n > div {\n display: table-row;\n\n > div:first-child {\n width: 1px;\n padding-left: 8px;\n display: table-cell;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n > div:nth-child(2) {\n display: table-cell;\n width: 100%;\n padding: 6px;\n }\n }\n`;\n\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n options: Options;\n}\ntype Props = DispatchProps & OwnProps;\n\ninterface State {\n selected: 'default' | number;\n customAction: string;\n args: string[];\n rest: string;\n changed: boolean;\n}\n\nclass Dispatcher extends Component {\n state: State = {\n selected: 'default',\n customAction:\n this.props.options.lib === 'redux' ? \"{\\n type: ''\\n}\" : 'this.',\n args: [],\n rest: '[]',\n changed: false,\n };\n\n UNSAFE_componentWillReceiveProps(nextProps: Props) {\n if (\n this.state.selected !== 'default' &&\n !nextProps.options.actionCreators\n ) {\n this.setState({\n selected: 'default',\n args: [],\n });\n }\n }\n\n shouldComponentUpdate(nextProps: Props, nextState: State) {\n return (\n nextState !== this.state ||\n nextProps.options.actionCreators !== this.props.options.actionCreators\n );\n }\n\n selectActionCreator = (selected: 'default' | 'actions-help' | number) => {\n if (selected === 'actions-help') {\n window.open(\n 'https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/' +\n 'API/Arguments.md#actioncreators',\n );\n return;\n }\n\n const args: string[] = [];\n if (selected !== 'default') {\n args.length = this.props.options.actionCreators![selected].args.length;\n }\n this.setState({ selected, args, rest: '[]', changed: false });\n };\n\n handleArg = (argIndex: number) => (value: string) => {\n const args = [\n ...this.state.args.slice(0, argIndex),\n (value || undefined)!,\n ...this.state.args.slice(argIndex + 1),\n ];\n this.setState({ args, changed: true });\n };\n\n handleRest = (rest: string) => {\n this.setState({ rest, changed: true });\n };\n\n handleCustomAction = (customAction: string) => {\n this.setState({ customAction, changed: true });\n };\n\n dispatchAction = () => {\n const { selected, customAction, args, rest } = this.state;\n\n if (selected !== 'default') {\n // remove trailing `undefined` arguments\n let i = args.length - 1;\n while (i >= 0 && typeof args[i] === 'undefined') {\n args.pop();\n i--;\n }\n this.props.dispatch({\n name: this.props.options.actionCreators![selected].name,\n selected,\n args,\n rest,\n });\n } else {\n this.props.dispatch(customAction);\n }\n this.setState({ changed: false });\n };\n\n render() {\n const actionCreators = this.props.options.actionCreators;\n let actionElement;\n\n if (this.state.selected === 'default' || !actionCreators) {\n actionElement = (\n \n \n \n );\n } else {\n actionElement = (\n \n {actionCreators[this.state.selected].args.map((param, i) => (\n
    \n
    {param}
    \n \n
    \n ))}\n
    \n
    ...rest
    \n \n
    \n     \n );\n }\n\n let options: {\n value: 'default' | 'actions-help' | number;\n label: string;\n }[] = [{ value: 'default', label: 'Custom action' }];\n if (actionCreators && actionCreators.length > 0) {\n options = options.concat(\n actionCreators.map(({ name, args }, i) => ({\n value: i,\n label: `${name}(${args.join(', ')})`,\n })),\n );\n } else {\n options.push({\n value: 'actions-help',\n label: 'Add your app built-in actions…',\n });\n }\n\n return (\n \n {actionElement}\n \n this.selectActionCreator(option!.value)}\n value={\n options.find((option) => option.value === this.state.selected) ||\n options.find((option) => option.value === 'default')\n }\n options={options}\n />\n \n \n \n );\n }\n}\n\nconst actionCreators = {\n dispatch: dispatchRemotely,\n};\n\nexport default connect(null, actionCreators)(Dispatcher);\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/ChartTab.tsx", "content": "import React, { Component, RefCallback } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { withTheme } from '@emotion/react';\nimport { tree } from 'd3-state-visualizer';\nimport type { HierarchyPointNode, Node, Options } from 'd3-state-visualizer';\nimport { getPath } from '../ChartMonitorWrapper.js';\nimport { updateMonitorState } from '../../../actions/index.js';\nimport { ThemeFromProvider } from '@redux-devtools/ui';\n\nconst style = {\n width: '100%',\n height: '100%',\n};\n\ntype DispatchProps = ResolveThunks;\ninterface OwnProps {\n data: unknown;\n theme: ThemeFromProvider;\n}\ntype Props = DispatchProps & OwnProps;\n\nclass ChartTab extends Component {\n node?: HTMLDivElement | null;\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n renderChart?: (nextState?: {} | null | undefined) => void;\n\n shouldComponentUpdate() {\n return false;\n }\n\n componentDidMount() {\n this.createChart(this.props);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: Props) {\n if (\n this.props.theme.scheme !== nextProps.theme.scheme ||\n nextProps.theme.light !== this.props.theme.light\n ) {\n this.node!.innerHTML = '';\n this.createChart(nextProps);\n } else if (nextProps.data !== this.props.data) {\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n this.renderChart!(nextProps.data as {} | null | undefined);\n }\n }\n\n getRef: RefCallback = (node) => {\n this.node = node;\n };\n\n createChart(props: Props) {\n this.renderChart = tree(this.node!, this.getChartTheme(props.theme));\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n this.renderChart(props.data as {} | null | undefined);\n }\n\n getChartTheme(theme: ThemeFromProvider): Partial {\n return {\n heightBetweenNodesCoeff: 1,\n widthBetweenNodesCoeff: 1.3,\n tooltipOptions: {\n styles: {\n color: theme.base06,\n 'background-color': theme.base01,\n opacity: '0.9',\n 'border-radius': '5px',\n padding: '5px',\n },\n offset: { left: 30, top: 10 },\n indentationSize: 2,\n },\n chartStyles: {\n width: '100%',\n height: '100%',\n },\n nodeStyleOptions: {\n colors: {\n default: theme.base0B,\n collapsed: theme.base0B,\n parent: theme.base0E,\n },\n radius: 7,\n },\n textStyleOptions: {\n colors: {\n default: theme.base0D,\n hover: theme.base06,\n },\n },\n onClickText: this.onClickText,\n };\n }\n\n onClickText = (data: HierarchyPointNode) => {\n const inspectedStatePath: string[] = [];\n getPath(data, inspectedStatePath);\n this.props.updateMonitorState({\n inspectedStatePath,\n subTabName: data.children ? 'Chart' : 'Tree',\n });\n };\n\n render() {\n return
    ;\n }\n}\n\nconst actionCreators = {\n updateMonitorState,\n};\n\nconst ConnectedChartTab = connect(null, actionCreators)(ChartTab);\nexport default withTheme(ConnectedChartTab);\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/RawTab.tsx", "content": "import React, { Component } from 'react';\nimport { Editor } from '@redux-devtools/ui';\nimport { stringify } from 'javascript-stringify';\n\ninterface Props {\n data: unknown;\n}\n\nexport default class RawTab extends Component {\n value?: string | undefined;\n\n constructor(props: Props) {\n super(props);\n this.stringifyData(props);\n }\n\n shouldComponentUpdate(nextProps: Props) {\n return nextProps.data !== this.value;\n }\n\n UNSAFE_componentWillUpdate(nextProps: Props) {\n this.stringifyData(nextProps);\n }\n\n stringifyData(props: Props) {\n this.value = stringify(props.data, null, 2);\n }\n\n render() {\n return ;\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/SubTabs.tsx", "content": "import React, { Component } from 'react';\nimport { connect, ResolveThunks } from 'react-redux';\nimport { Tab, Tabs } from '@redux-devtools/ui';\nimport {\n TabComponentProps,\n StateTab,\n ActionTab,\n DiffTab,\n} from '@redux-devtools/inspector-monitor';\nimport { Action } from 'redux';\nimport { selectMonitorTab } from '../../../actions/index.js';\nimport RawTab from './RawTab.js';\nimport ChartTab from './ChartTab.js';\nimport VisualDiffTab from './VisualDiffTab.js';\nimport { CoreStoreState } from '../../../reducers/index.js';\nimport type { Delta } from 'jsondiffpatch';\n\ntype StateProps = ReturnType;\ntype DispatchProps = ResolveThunks;\ntype Props = StateProps &\n DispatchProps &\n TabComponentProps>;\n\nclass SubTabs extends Component {\n tabs?: (Tab | Tab<{ data: unknown }> | Tab<{ data?: Delta }>)[];\n\n constructor(props: Props) {\n super(props);\n this.updateTabs(props);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: Props) {\n if (nextProps.parentTab !== this.props.parentTab) {\n this.updateTabs(nextProps);\n }\n }\n\n selector = () => {\n switch (this.props.parentTab) {\n case 'Action':\n return { data: this.props.action };\n case 'Diff':\n return { data: this.props.delta };\n default:\n return { data: this.props.nextState };\n }\n };\n\n updateTabs(props: Props) {\n const parentTab = props.parentTab;\n\n if (parentTab === 'Diff') {\n this.tabs = [\n {\n name: 'Tree',\n component: DiffTab,\n selector: () => this.props,\n },\n {\n name: 'Raw',\n component: VisualDiffTab,\n selector: this.selector as () => { data?: Delta },\n },\n ];\n return;\n }\n\n this.tabs = [\n {\n name: 'Tree',\n component: parentTab === 'Action' ? ActionTab : StateTab,\n selector: () => this.props,\n },\n {\n name: 'Chart',\n component: ChartTab,\n selector: this.selector,\n },\n {\n name: 'Raw',\n component: RawTab,\n selector: this.selector,\n },\n ];\n }\n\n render() {\n let selected = this.props.selected;\n if (selected === 'Chart' && this.props.parentTab === 'Diff')\n selected = 'Tree';\n\n return (\n \n );\n }\n}\n\nconst mapStateToProps = (state: CoreStoreState) => ({\n parentTab: state.monitor.monitorState!.tabName,\n selected: state.monitor.monitorState!.subTabName,\n});\n\nconst actionCreators = {\n selectMonitorTab,\n};\n\nexport default connect(mapStateToProps, actionCreators)(SubTabs);\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx", "content": "import React, { Component } from 'react';\nimport type { Delta } from 'jsondiffpatch';\nimport * as htmlFormatter from 'jsondiffpatch/formatters/html';\nimport styled from '@emotion/styled';\nimport { Base16Theme, effects } from '@redux-devtools/ui';\n\nexport const StyledContainer = styled.div`\n .jsondiffpatch-delta {\n line-height: 14px;\n font-size: 12px;\n padding: 12px;\n margin: 0;\n display: inline-block;\n }\n\n .jsondiffpatch-delta pre {\n font-size: 12px;\n margin: 0;\n padding: 2px 3px;\n border-radius: 3px;\n position: relative;\n color: ${(props: { theme?: Base16Theme }) => props.theme!.base07};\n display: inline-block;\n }\n\n ul.jsondiffpatch-delta {\n list-style-type: none;\n padding: 0 0 0 20px;\n margin: 0;\n }\n\n .jsondiffpatch-delta ul {\n list-style-type: none;\n padding: 0 0 0 20px;\n margin: 0;\n }\n\n .jsondiffpatch-left-value,\n .jsondiffpatch-right-value {\n vertical-align: top;\n }\n\n .jsondiffpatch-modified .jsondiffpatch-right-value:before {\n vertical-align: top;\n padding: 2px;\n color: ${(props) => props.theme.base0E};\n content: ' => ';\n }\n\n .jsondiffpatch-added .jsondiffpatch-value pre,\n .jsondiffpatch-modified .jsondiffpatch-right-value pre,\n .jsondiffpatch-textdiff-added {\n background: ${(props: { theme?: Base16Theme }) =>\n effects.color(props.theme!.base0B, 'alpha', 0.2)};\n }\n\n .jsondiffpatch-deleted pre,\n .jsondiffpatch-modified .jsondiffpatch-left-value pre,\n .jsondiffpatch-textdiff-deleted {\n background: ${(props: { theme?: Base16Theme }) =>\n effects.color(props.theme!.base08, 'alpha', 0.2)};\n text-decoration: line-through;\n }\n\n .jsondiffpatch-unchanged,\n .jsondiffpatch-movedestination {\n color: gray;\n }\n\n .jsondiffpatch-unchanged,\n .jsondiffpatch-movedestination > .jsondiffpatch-value {\n transition: all 0.5s;\n -webkit-transition: all 0.5s;\n overflow-y: hidden;\n }\n\n .jsondiffpatch-unchanged-showing .jsondiffpatch-unchanged,\n .jsondiffpatch-unchanged-showing\n .jsondiffpatch-movedestination\n > .jsondiffpatch-value {\n max-height: 100px;\n }\n\n .jsondiffpatch-unchanged-hidden .jsondiffpatch-unchanged,\n .jsondiffpatch-unchanged-hidden\n .jsondiffpatch-movedestination\n > .jsondiffpatch-value {\n max-height: 0;\n }\n\n .jsondiffpatch-unchanged-hiding\n .jsondiffpatch-movedestination\n > .jsondiffpatch-value,\n .jsondiffpatch-unchanged-hidden\n .jsondiffpatch-movedestination\n > .jsondiffpatch-value {\n display: block;\n }\n\n .jsondiffpatch-unchanged-visible .jsondiffpatch-unchanged,\n .jsondiffpatch-unchanged-visible\n .jsondiffpatch-movedestination\n > .jsondiffpatch-value {\n max-height: 100px;\n }\n\n .jsondiffpatch-unchanged-hiding .jsondiffpatch-unchanged,\n .jsondiffpatch-unchanged-hiding\n .jsondiffpatch-movedestination\n > .jsondiffpatch-value {\n max-height: 0;\n }\n\n .jsondiffpatch-unchanged-showing .jsondiffpatch-arrow,\n .jsondiffpatch-unchanged-hiding .jsondiffpatch-arrow {\n display: none;\n }\n\n .jsondiffpatch-value {\n display: inline-block;\n }\n\n .jsondiffpatch-property-name {\n display: inline-block;\n padding: 2px 0;\n padding-right: 5px;\n vertical-align: top;\n color: ${(props) => props.theme.base0D};\n }\n\n .jsondiffpatch-property-name:after {\n content: ': ';\n color: ${(props) => props.theme.base07};\n }\n\n .jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {\n content: ': [';\n }\n\n .jsondiffpatch-child-node-type-array:after {\n content: '],';\n }\n\n div.jsondiffpatch-child-node-type-array:before {\n content: '[';\n }\n\n div.jsondiffpatch-child-node-type-array:after {\n content: ']';\n }\n\n .jsondiffpatch-child-node-type-object > .jsondiffpatch-property-name:after {\n content: ': {';\n }\n\n .jsondiffpatch-child-node-type-object:after {\n content: '},';\n }\n\n div.jsondiffpatch-child-node-type-object:before {\n content: '{';\n }\n\n div.jsondiffpatch-child-node-type-object:after {\n content: '}';\n }\n\n .jsondiffpatch-value pre:after {\n color: ${(props) => props.theme.base07};\n content: ',';\n }\n\n li:last-child > .jsondiffpatch-value pre:after,\n .jsondiffpatch-modified > .jsondiffpatch-left-value pre:after {\n content: '';\n }\n\n .jsondiffpatch-modified .jsondiffpatch-value {\n display: inline-block;\n }\n\n .jsondiffpatch-modified .jsondiffpatch-right-value {\n margin-left: 5px;\n }\n\n .jsondiffpatch-moved .jsondiffpatch-value {\n display: none;\n }\n\n .jsondiffpatch-moved .jsondiffpatch-moved-destination {\n display: inline-block;\n background: ${(props) => props.theme.base0A};\n }\n\n .jsondiffpatch-moved .jsondiffpatch-moved-destination:before {\n content: ' => ';\n }\n\n ul.jsondiffpatch-textdiff {\n padding: 0;\n }\n\n .jsondiffpatch-textdiff-location {\n display: inline-block;\n min-width: 60px;\n }\n\n .jsondiffpatch-textdiff-line {\n display: inline-block;\n }\n\n .jsondiffpatch-textdiff-line-number:after {\n content: ',';\n }\n\n .jsondiffpatch-error {\n background: red;\n color: white;\n font-weight: bold;\n }\n`;\n\ninterface Props {\n data?: Delta;\n}\n\nexport default class VisualDiffTab extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return this.props.data !== nextProps.data;\n }\n\n render() {\n let __html: string | undefined;\n const data = this.props.data;\n if (data) {\n __html = htmlFormatter.format(data, undefined);\n }\n\n return ;\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/index.tsx", "content": "import React, { Component } from 'react';\nimport { Action } from 'redux';\nimport {\n DevtoolsInspectorAction,\n DevtoolsInspectorProps,\n DevtoolsInspectorState,\n InspectorMonitor,\n Tab,\n} from '@redux-devtools/inspector-monitor';\nimport { TraceTab } from '@redux-devtools/inspector-monitor-trace-tab';\nimport { TestTab } from '@redux-devtools/inspector-monitor-test-tab';\nimport { DATA_TYPE_KEY } from '../../../constants/dataTypes.js';\nimport SubTabs from './SubTabs.js';\n\nconst DEFAULT_TABS = [\n {\n name: 'Action',\n component: SubTabs,\n },\n {\n name: 'State',\n component: SubTabs,\n },\n {\n name: 'Diff',\n component: SubTabs,\n },\n {\n name: 'Trace',\n component: TraceTab,\n },\n];\n\ninterface Features {\n test?: boolean;\n skip?: boolean;\n}\ninterface Props {\n features?: Features;\n}\n\nclass InspectorWrapper extends Component {\n static update: (\n props: DevtoolsInspectorProps>,\n state: DevtoolsInspectorState | undefined,\n action: DevtoolsInspectorAction,\n // eslint-disable-next-line @typescript-eslint/unbound-method\n ) => DevtoolsInspectorState = InspectorMonitor.update;\n\n render() {\n const { features, ...rest } = this.props;\n let tabs: () => Tab>[];\n if (features && features.test) {\n tabs = () => [\n ...(DEFAULT_TABS as Tab>[]),\n { name: 'Test', component: TestTab } as unknown as Tab<\n unknown,\n Action\n >,\n ];\n } else {\n tabs = () => DEFAULT_TABS as Tab>[];\n }\n\n return (\n \n );\n }\n}\n\nexport default InspectorWrapper;\n" }, { "path": "packages/redux-devtools-app-core/src/containers/monitors/Slider.tsx", "content": "import React, { Component } from 'react';\nimport styled from '@emotion/styled';\nimport { withTheme } from '@emotion/react';\nimport { SliderMonitor } from '@redux-devtools/slider-monitor';\nimport { LiftedAction } from '@redux-devtools/core';\nimport { Action } from 'redux';\nimport { Base16Theme, ThemeFromProvider } from '@redux-devtools/ui';\nimport { State } from '../../reducers/instances.js';\n\nconst SliderWrapper = styled.div`\n border-color: ${(props: { theme?: Base16Theme }) => props.theme!.base02};\n border-style: solid;\n border-width: 1px 0;\n`;\n\ninterface Props {\n liftedState: State;\n dispatch: (action: LiftedAction, unknown>) => void;\n theme: ThemeFromProvider;\n}\n\nclass Slider extends Component {\n shouldComponentUpdate(nextProps: Props) {\n return (\n nextProps.liftedState !== this.props.liftedState ||\n nextProps.theme.scheme !== this.props.theme.scheme\n );\n }\n render() {\n return (\n \n \n \n );\n }\n}\n\nexport default withTheme(Slider);\n" }, { "path": "packages/redux-devtools-app-core/src/index.tsx", "content": "export * from './actions/index.js';\nexport { default as DispatcherButton } from './components/buttons/DispatcherButton.js';\nexport { default as ExportButton } from './components/buttons/ExportButton.js';\nexport { default as ImportButton } from './components/buttons/ImportButton.js';\nexport { default as PrintButton } from './components/buttons/PrintButton.js';\nexport { default as SliderButton } from './components/buttons/SliderButton.js';\nexport { default as Header } from './components/Header.js';\nexport { default as MonitorSelector } from './components/MonitorSelector.js';\nexport { default as Settings } from './components/Settings/index.js';\nexport { default as TopButtons } from './components/TopButtons.js';\nexport { default as App } from './containers/App.js';\nexport { default as DevTools } from './containers/DevTools.js';\nexport { default as Dispatcher } from './containers/monitors/Dispatcher.js';\nexport { default as SliderMonitor } from './containers/monitors/Slider.js';\nexport * from './constants/actionTypes.js';\nexport { default as middlewares } from './middlewares/index.js';\nexport * from './middlewares/exportState.js';\nexport * from './reducers/index.js';\nexport * from './reducers/instances.js';\nexport * from './reducers/monitor.js';\nexport * from './reducers/notification.js';\nexport * from './reducers/reports.js';\nexport * from './reducers/section.js';\nexport * from './reducers/theme.js';\nexport * from './reducers/stateTreeSettings.js';\nexport * from './utils/stringifyJSON.js';\n" }, { "path": "packages/redux-devtools-app-core/src/middlewares/exportState.ts", "content": "import { stringifyJSON } from '../utils/stringifyJSON.js';\nimport {\n UPDATE_STATE,\n LIFTED_ACTION,\n EXPORT,\n} from '../constants/actionTypes.js';\nimport { getActiveInstance } from '../reducers/instances.js';\nimport { Dispatch, Middleware } from 'redux';\nimport { CoreStoreAction } from '../actions/index.js';\nimport { CoreStoreState } from '../reducers/index.js';\n\nlet toExport: string | number | undefined;\n\nfunction download(state: string) {\n const blob = new Blob([state], { type: 'octet/stream' });\n const href = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.download = 'state.json';\n a.href = href;\n document.body.appendChild(a);\n a.click();\n setTimeout(() => {\n document.body.removeChild(a);\n window.URL.revokeObjectURL(href);\n }, 0);\n}\n\nexport const exportStateMiddleware: Middleware<\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n {},\n CoreStoreState,\n Dispatch\n> = (store) => (next) => (untypedAction) => {\n const result = next(untypedAction);\n\n const action = untypedAction as CoreStoreAction;\n if (\n toExport &&\n action.type === UPDATE_STATE &&\n action.request!.type === 'EXPORT'\n ) {\n const request = action.request!;\n const id = request.instanceId || request.id;\n if (id === toExport) {\n toExport = undefined;\n download(\n JSON.stringify(\n {\n payload: request.payload,\n preloadedState: request.committedState,\n },\n null,\n '\\t',\n ),\n );\n }\n } else if (action.type === EXPORT) {\n const instances = store.getState().instances;\n const instanceId = getActiveInstance(instances);\n const options = instances.options[instanceId];\n if (options.features.export === true) {\n download(stringifyJSON(instances.states[instanceId], options.serialize));\n } else {\n toExport = instanceId;\n next({ type: LIFTED_ACTION, message: 'EXPORT', toExport: true });\n }\n }\n return result;\n};\n" }, { "path": "packages/redux-devtools-app-core/src/middlewares/index.ts", "content": "import { exportStateMiddleware } from './exportState.js';\n\nconst middlewares = [exportStateMiddleware];\n\nexport default middlewares;\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/index.ts", "content": "import { section, SectionState } from './section.js';\nimport { monitor, MonitorState } from './monitor.js';\nimport { notification, NotificationState } from './notification.js';\nimport { instances, InstancesState } from './instances.js';\nimport { reports, ReportsState } from './reports.js';\nimport { theme, ThemeState } from './theme.js';\nimport { stateTreeSettings, StateTreeSettings } from './stateTreeSettings.js';\n\nexport interface CoreStoreState {\n readonly section: SectionState;\n readonly theme: ThemeState;\n readonly stateTreeSettings: StateTreeSettings;\n readonly monitor: MonitorState;\n readonly instances: InstancesState;\n readonly reports: ReportsState;\n readonly notification: NotificationState;\n}\n\nexport const coreReducers = {\n section,\n theme,\n stateTreeSettings,\n monitor,\n instances,\n reports,\n notification,\n};\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/instances.ts", "content": "import { PerformAction } from '@redux-devtools/core';\nimport { Action } from 'redux';\nimport {\n UPDATE_STATE,\n SET_STATE,\n LIFTED_ACTION,\n SELECT_INSTANCE,\n REMOVE_INSTANCE,\n TOGGLE_PERSIST,\n TOGGLE_SYNC,\n SET_PERSIST,\n CLEAR_INSTANCES,\n} from '../constants/actionTypes.js';\nimport parseJSON from '../utils/parseJSON.js';\nimport { recompute } from '../utils/updateState.js';\nimport {\n ActionCreator,\n LiftedActionDispatchAction,\n Request,\n CoreStoreAction,\n} from '../actions/index.js';\n\nexport interface Features {\n lock?: boolean;\n export?: string | boolean;\n import?: string | boolean;\n persist?: boolean;\n pause?: boolean;\n reorder?: boolean;\n jump?: boolean;\n skip?: boolean;\n dispatch?: boolean;\n sync?: boolean;\n test?: boolean;\n}\n\nexport interface Options {\n name?: string | number;\n connectionId?: string | number;\n explicitLib?: string;\n lib?: string;\n actionCreators?: ActionCreator[];\n features: Features;\n serialize?: boolean;\n}\n\nexport interface State {\n actionsById: { [actionId: number]: PerformAction> };\n computedStates: { state: unknown; error?: string }[];\n currentStateIndex: number;\n nextActionId: number;\n skippedActionIds: number[];\n stagedActionIds: number[];\n committedState?: unknown;\n isLocked?: boolean;\n isPaused?: boolean;\n}\n\nexport interface InstancesState {\n selected: string | number | null;\n current: string | number;\n sync: boolean;\n connections: { [id: string]: (string | number)[] };\n options: { [id: string]: Options };\n states: { [id: string]: State };\n persisted?: boolean;\n}\n\nexport const instancesInitialState: InstancesState = {\n selected: null,\n current: 'default',\n sync: false,\n connections: {},\n options: { default: { features: {} } },\n states: {\n default: {\n actionsById: {},\n computedStates: [],\n currentStateIndex: -1,\n nextActionId: 0,\n skippedActionIds: [],\n stagedActionIds: [],\n },\n },\n};\n\nfunction updateState(\n state: { [id: string]: State },\n request: Request,\n id: string | number,\n serialize: boolean | undefined,\n) {\n let payload: State = request.payload as State;\n const actionsById = request.actionsById;\n if (actionsById) {\n payload = {\n ...payload,\n actionsById: parseJSON(actionsById, serialize),\n computedStates: parseJSON(request.computedStates, serialize),\n } as State;\n if (request.type === 'STATE' && request.committedState) {\n payload.committedState = payload.computedStates[0].state;\n }\n } else {\n payload = parseJSON(payload as unknown as string, serialize) as State;\n }\n\n let newState;\n const liftedState = state[id] || state.default;\n const action = ((request.action && parseJSON(request.action, serialize)) ||\n {}) as PerformAction>;\n\n switch (request.type) {\n case 'INIT':\n newState = recompute(state.default, payload, {\n action: { type: '@@INIT' },\n timestamp: (action as { timestamp?: number }).timestamp || Date.now(),\n });\n break;\n case 'ACTION': {\n const isExcess = request.isExcess;\n const nextActionId = request.nextActionId || liftedState.nextActionId + 1;\n const maxAge = request.maxAge;\n if (Array.isArray(action)) {\n // Batched actions\n newState = liftedState;\n for (let i = 0; i < action.length; i++) {\n newState = recompute(\n newState,\n request.batched ? payload : (payload as unknown as State[])[i],\n action[i] as PerformAction>,\n newState.nextActionId + 1,\n maxAge,\n isExcess,\n );\n }\n } else {\n newState = recompute(\n liftedState,\n payload,\n action,\n nextActionId,\n maxAge,\n isExcess,\n );\n }\n break;\n }\n case 'STATE':\n newState = payload;\n if (newState.computedStates.length <= newState.currentStateIndex) {\n newState.currentStateIndex = newState.computedStates.length - 1;\n }\n break;\n case 'PARTIAL_STATE': {\n const maxAge = request.maxAge;\n const nextActionId = payload.nextActionId;\n const stagedActionIds = payload.stagedActionIds;\n let computedStates = payload.computedStates;\n let oldActionsById;\n let oldComputedStates;\n let committedState;\n if (nextActionId > maxAge) {\n const oldStagedActionIds = liftedState.stagedActionIds;\n const excess = oldStagedActionIds.indexOf(stagedActionIds[1]);\n let key;\n if (excess > 0) {\n oldComputedStates = liftedState.computedStates.slice(excess - 1);\n oldActionsById = { ...liftedState.actionsById };\n for (let i = 1; i < excess; i++) {\n key = oldStagedActionIds[i];\n if (key) delete oldActionsById[key];\n }\n committedState = computedStates[0].state;\n } else {\n oldActionsById = liftedState.actionsById;\n oldComputedStates = liftedState.computedStates;\n committedState = liftedState.committedState;\n }\n } else {\n oldActionsById = liftedState.actionsById;\n oldComputedStates = liftedState.computedStates;\n committedState = liftedState.committedState;\n }\n computedStates = [...oldComputedStates, ...computedStates];\n const statesCount = computedStates.length;\n let currentStateIndex = payload.currentStateIndex;\n if (statesCount <= currentStateIndex) currentStateIndex = statesCount - 1;\n\n newState = {\n ...liftedState,\n actionsById: { ...oldActionsById, ...payload.actionsById },\n computedStates,\n currentStateIndex,\n nextActionId,\n stagedActionIds,\n committedState,\n };\n break;\n }\n case 'LIFTED':\n newState = liftedState;\n break;\n default:\n return state;\n }\n\n if (request.liftedState) newState = { ...newState, ...request.liftedState };\n return { ...state, [id]: newState };\n}\n\nexport function dispatchAction(\n state: InstancesState,\n { action }: LiftedActionDispatchAction,\n) {\n if (action.type === 'JUMP_TO_STATE' || action.type === 'JUMP_TO_ACTION') {\n const id = state.selected || state.current;\n const liftedState = state.states[id];\n const currentStateIndex =\n action.type === 'JUMP_TO_STATE'\n ? action.index\n : liftedState.stagedActionIds.indexOf(action.actionId);\n return {\n ...state,\n states: {\n ...state.states,\n [id]: { ...liftedState, currentStateIndex },\n },\n };\n }\n return state;\n}\n\nfunction removeState(state: InstancesState, connectionId: string | number) {\n const instanceIds = state.connections[connectionId];\n if (!instanceIds) return state;\n\n const connections = { ...state.connections };\n const options = { ...state.options };\n const states = { ...state.states };\n let selected = state.selected;\n let current = state.current;\n let sync = state.sync;\n\n delete connections[connectionId];\n instanceIds.forEach((id) => {\n if (id === selected) {\n selected = null;\n sync = false;\n }\n if (id === current) {\n const inst = Object.keys(connections)[0];\n if (inst) current = connections[inst][0];\n else current = 'default';\n }\n delete options[id];\n delete states[id];\n });\n return {\n selected,\n current,\n sync,\n connections,\n options,\n states,\n };\n}\n\nfunction init(\n { type, action, name, libConfig = {} }: Request,\n connectionId: string | number,\n current: string | number,\n): Options {\n let lib;\n let actionCreators;\n let creators = libConfig.actionCreators || action;\n if (typeof creators === 'string') creators = JSON.parse(creators);\n if (Array.isArray(creators)) actionCreators = creators;\n if (type === 'STATE') lib = 'redux';\n return {\n name: libConfig.name || name || current,\n connectionId,\n explicitLib: libConfig.type,\n lib,\n actionCreators,\n features: libConfig.features\n ? libConfig.features\n : {\n lock: lib === 'redux',\n export: libConfig.type === 'redux' ? 'custom' : true,\n import: 'custom',\n persist: true,\n pause: true,\n reorder: true,\n jump: true,\n skip: true,\n dispatch: true,\n sync: true,\n test: true,\n },\n serialize: libConfig.serialize,\n };\n}\n\nexport function instances(\n state = instancesInitialState,\n action: CoreStoreAction,\n): InstancesState {\n switch (action.type) {\n case UPDATE_STATE: {\n const { request } = action;\n if (!request) return state;\n const connectionId = (action.id || request.id)!;\n const current = request.instanceId || connectionId;\n let connections = state.connections;\n let options = state.options;\n\n if (typeof state.options[current] === 'undefined') {\n connections = {\n ...state.connections,\n [connectionId]: [...(connections[connectionId] || []), current],\n };\n options = {\n ...options,\n [current]: init(request, connectionId, current),\n };\n }\n\n return {\n ...state,\n current,\n connections,\n options,\n states: updateState(\n state.states,\n request,\n current,\n options[current].serialize,\n ),\n };\n }\n case SET_STATE:\n return {\n ...state,\n states: {\n ...state.states,\n [getActiveInstance(state)]: action.newState,\n },\n };\n case TOGGLE_PERSIST:\n return { ...state, persisted: !state.persisted };\n case SET_PERSIST:\n return { ...state, persisted: action.payload };\n case TOGGLE_SYNC:\n return { ...state, sync: !state.sync };\n case SELECT_INSTANCE:\n return { ...state, selected: action.selected, sync: false };\n case REMOVE_INSTANCE:\n return removeState(state, action.id);\n case LIFTED_ACTION: {\n if (action.message === 'DISPATCH') return dispatchAction(state, action);\n if (action.message === 'IMPORT') {\n const id = state.selected || state.current;\n if (state.options[id].features.import === true) {\n return {\n ...state,\n states: {\n ...state.states,\n [id]: parseJSON(action.state) as State,\n },\n };\n }\n }\n return state;\n }\n case CLEAR_INSTANCES:\n return instancesInitialState;\n default:\n return state;\n }\n}\n\nexport const getActiveInstance = (instances: InstancesState) =>\n instances.selected || instances.current;\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/monitor.ts", "content": "import { REHYDRATE } from 'redux-persist';\nimport {\n MONITOR_ACTION,\n SELECT_MONITOR,\n UPDATE_MONITOR_STATE,\n TOGGLE_SLIDER,\n TOGGLE_DISPATCHER,\n} from '../constants/actionTypes.js';\nimport { MonitorActionAction, CoreStoreAction } from '../actions/index.js';\n\nexport interface MonitorStateMonitorState {\n inspectedStatePath?: string[];\n tabName?: string;\n subTabName?: string;\n selectedActionId?: number | null;\n startActionId?: number | null;\n inspectedActionPath?: string[];\n __overwritten__?: string;\n}\nexport interface MonitorState {\n selected: string;\n monitorState?: MonitorStateMonitorState | undefined;\n sliderIsOpen: boolean;\n dispatcherIsOpen: boolean;\n}\n\nconst initialState: MonitorState = {\n selected: 'InspectorMonitor',\n monitorState: undefined,\n sliderIsOpen: true,\n dispatcherIsOpen: false,\n};\n\nexport function dispatchMonitorAction(\n state: MonitorState,\n action: MonitorActionAction,\n): MonitorState {\n return {\n ...state,\n monitorState: (action.action.newMonitorState ||\n action.monitorReducer(\n action.monitorProps,\n state.monitorState,\n action.action,\n )) as MonitorStateMonitorState,\n };\n}\n\nexport function monitor(\n state = initialState,\n action: CoreStoreAction,\n): MonitorState {\n switch (action.type) {\n case MONITOR_ACTION:\n return dispatchMonitorAction(state, action);\n case SELECT_MONITOR: {\n let monitorState = state.monitorState;\n if (action.monitorState) {\n monitorState = {\n ...action.monitorState,\n __overwritten__: action.monitor,\n };\n }\n return {\n ...state,\n monitorState,\n selected: action.monitor,\n };\n }\n case UPDATE_MONITOR_STATE: {\n let inspectedStatePath = state.monitorState!.inspectedStatePath!;\n if (action.nextState.inspectedStatePath) {\n inspectedStatePath = [\n ...inspectedStatePath.slice(0, -1),\n ...action.nextState.inspectedStatePath,\n ];\n }\n return {\n ...state,\n monitorState: {\n ...state.monitorState,\n ...action.nextState,\n inspectedStatePath,\n },\n };\n }\n case TOGGLE_SLIDER:\n return {\n ...state,\n sliderIsOpen: !state.sliderIsOpen,\n };\n case TOGGLE_DISPATCHER:\n return {\n ...state,\n dispatcherIsOpen: !state.dispatcherIsOpen,\n };\n case REHYDRATE: {\n const rehydratedState = action.payload as\n | {\n readonly monitor: MonitorState;\n }\n | undefined;\n if (!rehydratedState) return state;\n if (\n rehydratedState.monitor.monitorState &&\n (typeof rehydratedState.monitor.monitorState.selectedActionId ===\n 'number' ||\n typeof rehydratedState.monitor.monitorState.startActionId ===\n 'number')\n ) {\n return {\n ...rehydratedState.monitor,\n monitorState: {\n ...rehydratedState.monitor.monitorState,\n selectedActionId: null,\n startActionId: null,\n },\n };\n }\n return rehydratedState.monitor;\n }\n default:\n return state;\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/notification.ts", "content": "import {\n SHOW_NOTIFICATION,\n CLEAR_NOTIFICATION,\n LIFTED_ACTION,\n ERROR,\n} from '../constants/actionTypes.js';\nimport { CoreStoreAction } from '../actions/index.js';\n\ninterface Notification {\n readonly type: 'error';\n readonly message: string;\n}\nexport type NotificationState = Notification | null;\n\nexport function notification(\n state: NotificationState = null,\n action: CoreStoreAction,\n): NotificationState {\n switch (action.type) {\n case SHOW_NOTIFICATION:\n return action.notification;\n case ERROR:\n return { type: 'error', message: action.payload };\n case LIFTED_ACTION:\n return null;\n case CLEAR_NOTIFICATION:\n return null;\n default:\n return state;\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/reports.ts", "content": "import {\n UPDATE_REPORTS /* , GET_REPORT_SUCCESS */,\n} from '../constants/actionTypes.js';\nimport { CoreStoreAction } from '../actions/index.js';\n\nexport interface Data {\n id: unknown;\n}\n\nexport interface ReportsState {\n data: Data[];\n}\n\nconst initialState: ReportsState = {\n data: [],\n};\n\nexport function reports(\n state = initialState,\n action: CoreStoreAction,\n): ReportsState {\n /* if (action.type === GET_REPORT_SUCCESS) {\n const id = action.data.id;\n return {\n ...state,\n data: state.data.map(d => (d.id === id ? action.data : d))\n };\n } else */ if (action.type !== UPDATE_REPORTS) return state;\n\n const request = action.request;\n switch (request.type) {\n case 'list':\n return {\n ...state,\n data: request.data,\n };\n case 'add':\n return {\n ...state,\n data: [...state.data, request.data],\n };\n case 'remove':\n return {\n ...state,\n data: state.data.filter((d) => d.id !== request.id),\n };\n default:\n return state;\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/section.ts", "content": "import { CHANGE_SECTION } from '../constants/actionTypes.js';\nimport { CoreStoreAction } from '../actions/index.js';\n\nexport type SectionState = string;\n\nexport function section(state = 'Actions', action: CoreStoreAction) {\n if (action.type === CHANGE_SECTION) {\n return action.section;\n }\n return state;\n}\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/stateTreeSettings.ts", "content": "import { CHANGE_STATE_TREE_SETTINGS } from '../constants/actionTypes.js';\nimport { CoreStoreAction } from '../actions/index.js';\n\nexport interface StateTreeSettings {\n readonly sortAlphabetically: boolean;\n readonly disableCollection: boolean;\n}\n\nexport function stateTreeSettings(\n state: StateTreeSettings = {\n sortAlphabetically: false,\n disableCollection: false,\n },\n action: CoreStoreAction,\n) {\n if (action.type === CHANGE_STATE_TREE_SETTINGS) {\n return {\n sortAlphabetically: action.sortAlphabetically,\n disableCollection: action.disableCollection,\n };\n }\n return state;\n}\n" }, { "path": "packages/redux-devtools-app-core/src/reducers/theme.ts", "content": "import { SchemeName, ThemeName } from '@redux-devtools/ui';\nimport { CHANGE_THEME } from '../constants/actionTypes.js';\nimport { CoreStoreAction } from '../actions/index.js';\n\nexport interface ThemeState {\n readonly theme: ThemeName;\n readonly scheme: SchemeName;\n readonly colorPreference: 'auto' | 'light' | 'dark';\n}\n\nexport function theme(\n state: ThemeState = {\n theme: 'default',\n scheme: 'default',\n colorPreference: 'auto',\n },\n action: CoreStoreAction,\n) {\n if (action.type === CHANGE_THEME) {\n return {\n theme: action.theme,\n scheme: action.scheme,\n colorPreference: action.colorPreference,\n };\n }\n return state;\n}\n" }, { "path": "packages/redux-devtools-app-core/src/utils/commitExcessActions.ts", "content": "// Based on https://github.com/gaearon/redux-devtools/pull/241\n/* eslint-disable no-param-reassign */\n\nimport { State } from '../reducers/instances.js';\n\nexport default function commitExcessActions(liftedState: State, n = 1) {\n // Auto-commits n-number of excess actions.\n let excess = n;\n let idsToDelete = liftedState.stagedActionIds.slice(1, excess + 1);\n\n for (let i = 0; i < idsToDelete.length; i++) {\n if (liftedState.computedStates[i + 1].error) {\n // Stop if error is found. Commit actions up to error.\n excess = i;\n idsToDelete = liftedState.stagedActionIds.slice(1, excess + 1);\n break;\n } else {\n delete liftedState.actionsById[idsToDelete[i]];\n }\n }\n\n liftedState.skippedActionIds = liftedState.skippedActionIds.filter(\n (id) => !idsToDelete.includes(id),\n );\n liftedState.stagedActionIds = [\n 0,\n ...liftedState.stagedActionIds.slice(excess + 1),\n ];\n liftedState.committedState = liftedState.computedStates[excess].state;\n liftedState.computedStates = liftedState.computedStates.slice(excess);\n liftedState.currentStateIndex =\n liftedState.currentStateIndex > excess\n ? liftedState.currentStateIndex - excess\n : 0;\n}\n" }, { "path": "packages/redux-devtools-app-core/src/utils/getMonitor.tsx", "content": "import React from 'react';\nimport { LogMonitor } from '@redux-devtools/log-monitor';\nimport ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper.js';\nimport InspectorWrapper from '../containers/monitors/InspectorWrapper/index.js';\nimport { RtkQueryMonitor } from '@redux-devtools/rtk-query-monitor';\n\nexport const monitors = [\n { value: 'InspectorMonitor', name: 'Inspector' },\n { value: 'LogMonitor', name: 'Log monitor' },\n { value: 'ChartMonitor', name: 'Chart' },\n { value: 'RtkQueryMonitor', name: 'RTK Query' },\n];\n\nexport default function getMonitor({ monitor }: { monitor: string }) {\n switch (monitor) {\n case 'LogMonitor':\n return (\n \n );\n case 'ChartMonitor':\n return ;\n case 'RtkQueryMonitor':\n return ;\n default:\n return ;\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/utils/parseJSON.ts", "content": "import jsan from 'jsan';\nimport { DATA_TYPE_KEY, DATA_REF_KEY } from '../constants/dataTypes.js';\n\nexport function reviver(key: string, value: unknown) {\n if (\n typeof value === 'object' &&\n value !== null &&\n '__serializedType__' in value &&\n typeof (value as any).data === 'object'\n ) {\n const data = (value as any).data;\n data[DATA_TYPE_KEY] = (value as any).__serializedType__;\n if ('__serializedRef__' in value)\n data[DATA_REF_KEY] = (value as any).__serializedRef__;\n /*\n if (Array.isArray(data)) {\n data.__serializedType__ = value.__serializedType__;\n } else {\n Object.defineProperty(data, '__serializedType__', {\n value: value.__serializedType__\n });\n }\n */\n return data;\n }\n return value;\n}\n\nexport default function parseJSON(\n data: string | undefined,\n serialize?: boolean,\n) {\n if (typeof data !== 'string') return data;\n try {\n return serialize ? jsan.parse(data, reviver) : jsan.parse(data);\n } catch (e) {\n if (process.env.NODE_ENV !== 'production')\n /* eslint-disable-next-line no-console */\n console.error(data + 'is not a valid JSON', e);\n return undefined;\n }\n}\n" }, { "path": "packages/redux-devtools-app-core/src/utils/stringifyJSON.ts", "content": "import jsan from 'jsan';\nimport { DATA_TYPE_KEY, DATA_REF_KEY } from '../constants/dataTypes.js';\n\nfunction replacer(key: string, value: unknown) {\n if (typeof value === 'object' && value !== null && DATA_TYPE_KEY in value) {\n const __serializedType__ = (value as any)[DATA_TYPE_KEY];\n const clone = { ...value };\n delete (clone as any)[DATA_TYPE_KEY]; // eslint-disable-line no-param-reassign\n const r = { data: clone, __serializedType__ };\n if (DATA_REF_KEY in value)\n (r as any).__serializedRef__ = (clone as any)[DATA_REF_KEY];\n return r;\n }\n return value;\n}\n\nexport function stringifyJSON(data: unknown, serialize: boolean | undefined) {\n return serialize\n ? jsan.stringify(data, replacer, null as unknown as undefined, true)\n : jsan.stringify(data);\n}\n" }, { "path": "packages/redux-devtools-app-core/src/utils/updateState.ts", "content": "import commitExcessActions from './commitExcessActions.js';\nimport { State } from '../reducers/instances.js';\nimport { Action } from 'redux';\nimport { PerformAction } from '@redux-devtools/core';\n\nexport function recompute(\n previousLiftedState: State,\n storeState: State,\n action:\n | PerformAction>\n | { action: Action; timestamp?: number; stack?: string },\n nextActionId = 1,\n maxAge?: number,\n isExcess?: boolean,\n) {\n const actionId = nextActionId - 1;\n const liftedState = { ...previousLiftedState };\n\n if (\n liftedState.currentStateIndex ===\n liftedState.stagedActionIds.length - 1\n ) {\n liftedState.currentStateIndex++;\n }\n liftedState.stagedActionIds = [...liftedState.stagedActionIds, actionId];\n liftedState.actionsById = { ...liftedState.actionsById };\n if ((action as PerformAction>).type === 'PERFORM_ACTION') {\n liftedState.actionsById[actionId] = action as PerformAction>;\n } else {\n liftedState.actionsById[actionId] = {\n action: action.action || action,\n timestamp: action.timestamp || Date.now(),\n stack: action.stack,\n type: 'PERFORM_ACTION',\n };\n }\n liftedState.nextActionId = nextActionId;\n liftedState.computedStates = [\n ...liftedState.computedStates,\n { state: storeState },\n ];\n\n if (isExcess) commitExcessActions(liftedState);\n else if (maxAge) {\n const excess = liftedState.stagedActionIds.length - maxAge;\n if (excess > 0) commitExcessActions(liftedState, excess);\n }\n\n return liftedState;\n}\n" }, { "path": "packages/redux-devtools-app-core/test/__mocks__/styleMock.ts", "content": "export default {};\n" }, { "path": "packages/redux-devtools-app-core/test/app.spec.tsx", "content": "import { jest } from '@jest/globals';\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport { createStore, applyMiddleware, Reducer } from 'redux';\nimport { render, screen, within } from '@testing-library/react';\nimport App from '../src/containers/App.js';\nimport { exportStateMiddleware } from '../src/middlewares/exportState.js';\nimport { coreReducers } from '../src/reducers/index.js';\nimport { DATA_TYPE_KEY } from '../src/constants/dataTypes.js';\nimport { stringifyJSON } from '../src/utils/stringifyJSON.js';\nimport { combineReducers } from 'redux';\nimport { CoreStoreAction, CoreStoreState } from '../src/index.js';\n\nObject.defineProperty(window, 'matchMedia', {\n writable: true,\n value: jest.fn().mockImplementation((query) => ({\n matches: false,\n media: query,\n onchange: null,\n addListener: jest.fn(), // deprecated\n removeListener: jest.fn(), // deprecated\n addEventListener: jest.fn(),\n removeEventListener: jest.fn(),\n dispatchEvent: jest.fn(),\n })),\n});\n\nconst store = createStore(\n combineReducers(coreReducers) as Reducer<\n CoreStoreState,\n CoreStoreAction,\n Partial\n >,\n applyMiddleware(exportStateMiddleware),\n);\n\ndescribe('App container', () => {\n it(\"should render inspector monitor's wrapper\", () => {\n render(\n \n \n ,\n );\n expect(screen.getByTestId('inspector')).toBeDefined();\n });\n\n it('should contain an empty action list', () => {\n render(\n \n \n ,\n );\n const actionList = screen.getByTestId('actionList');\n expect(within(actionList).queryByRole('button')).not.toBeInTheDocument();\n });\n});\n\ndescribe('stringifyJSON', () => {\n it('should not mutate the source object', () => {\n const src = {\n isTest: true,\n [DATA_TYPE_KEY]: 'Test',\n };\n\n const result = {\n data: {\n isTest: true,\n },\n __serializedType__: 'Test',\n };\n\n expect(stringifyJSON(src, true)).toEqual(JSON.stringify(result));\n expect(src).toEqual({\n isTest: true,\n [DATA_TYPE_KEY]: 'Test',\n });\n });\n});\n" }, { "path": "packages/redux-devtools-app-core/test/setup.ts", "content": "import '@testing-library/jest-dom';\n" }, { "path": "packages/redux-devtools-app-core/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\",\n \"types\": [\"node\"]\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-app-core/tsconfig.test.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"types\": [\"node\", \"jest\"]\n },\n \"include\": [\"src\", \"test\"]\n}\n" }, { "path": "packages/redux-devtools-chart-monitor/CHANGELOG.md", "content": "# Change Log\n\n## 6.0.0\n\n### Major Changes\n\n- 12849a4: Convert monitors to ESM\n\n### Patch Changes\n\n- Updated dependencies [804d6bd]\n - @redux-devtools/core@5.0.0\n\n## 5.1.1\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n\n## 5.1.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/core@4.1.0\n\n## 5.0.2\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-base16-styling@0.10.0\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [191d419]\n - d3-state-visualizer@3.0.0\n\n## 5.0.0\n\n### Major Changes\n\n- 5cfe3e5: Update min required React version to 16.8.4\n\n### Patch Changes\n\n- Updated dependencies [decc035]\n - @redux-devtools/core@4.0.0\n\n## 4.1.0\n\n### Minor Changes\n\n- 6fc18ed7: Add new Redux version to peer dependencies\n\n### Patch Changes\n\n- 7f5bddbd: Widen peer dependencies\n\n## 4.0.1\n\n### Patch Changes\n\n- 65205f90: Replace Action with Action\n- Updated dependencies [65205f90]\n - @redux-devtools/core@3.13.2\n\n## 4.0.0\n\n### Major Changes\n\n- b323f77d: Upgrade D3\n - Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.\n - The shape of the argument passed to the `onClickText` option has been updated.\n\n### Patch Changes\n\n- Updated dependencies [b323f77d]\n - d3-state-visualizer@2.0.0\n\n## 3.0.1\n\n### Patch Changes\n\n- a55ba302: Fix peer dependencies on @redux-devtools/core\n- Updated dependencies [a55ba302]\n - @redux-devtools/core@3.13.1\n\n## 3.0.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - @redux-devtools/core@3.13.0\n\n## 2.1.1\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n\n## 2.0.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import ChartMonitor from '@redux-devtools/chart-monitor';\n+ import { ChartMonitor } from '@redux-devtools/chart-monitor';\n```\n\n## [1.9.0](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/chart-monitor@1.8.0...@redux-devtools/chart-monitor@1.9.0) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## 1.8.0 (2021-03-06)\n\n### Features\n\n- **redux-devtools-chart-monitor:** convert to TypeScript ([#642](https://github.com/reduxjs/redux-devtools/issues/642)) ([761baba](https://github.com/reduxjs/redux-devtools/commit/761baba0aa0f4dc672f8771f4b12bed3863557f7))\n\n## [1.7.2](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-chart-monitor@1.7.1...redux-devtools-chart-monitor@1.7.2) (2020-09-07)\n\n**Note:** Version bump only for package redux-devtools-chart-monitor\n\n## 1.7.1 (2020-08-14)\n\n**Note:** Version bump only for package redux-devtools-chart-monitor\n" }, { "path": "packages/redux-devtools-chart-monitor/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 romseguy\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.\n" }, { "path": "packages/redux-devtools-chart-monitor/README.md", "content": "# Redux DevTools Chart Monitor\n\nA chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools).\n\nCreated by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/redux-devtools-chart-monitor`](https://github.com/reduxjs/redux-devtools-chart-monitor).\n\nIt shows a real-time view of the store aka the current state of the app.\n\n:rocket: Now with immutable-js support.\n\n[Demo](http://romseguy.github.io/redux-store-visualizer/) [(Source)](https://github.com/romseguy/redux-store-visualizer)\n\n![Chart Monitor](https://camo.githubusercontent.com/19aebaeba929e97f97225115c49dc994299cb76e/687474703a2f2f692e696d6775722e636f6d2f4d53677655366c2e676966)\n\n### Installation\n\n```\nyarn add @redux-devtools/chart-monitor\n```\n\n### Usage\n\nYou can use `ChartMonitor` as the only monitor in your app:\n\n##### `containers/DevTools.js`\n\n```js\nimport React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { ChartMonitor } from '@redux-devtools/chart-monitor';\n\nexport default createDevTools();\n```\n\nThen you can render `` to any place inside app or even into a separate popup window.\n\nAlternatively, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable. \nConsult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.\n\n[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)\n\n### Features\n\n### Props\n\n#### ChartMonitor props\n\nYou can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below:\n\n| Name | Description |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `defaultIsVisible` | By default, set to `true`. |\n| `transitionDuration` | By default, set to `750`, in milliseconds. |\n| `heightBetweenNodesCoeff` | By default, set to `1`. |\n| `widthBetweenNodesCoeff` | By default, set to `1.3`. |\n| `isSorted` | By default, set to `false`. |\n| `chartStyles` | {
      width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
    } |\n| `textStyleOptions` | {
      colors: {
        default: `theme.base0D`,
        hover: `theme.base06`,
      },
    } |\n| `nodeStyleOptions` | {
      colors: {
        default: `theme.base0B`,
        collapsed: `theme.base0B`,
        parent: `theme.base0E`,
      },
      radius: 7,
    } |\n| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |\n| `tooltipOptions` | {
      disabled: false,
      indentationSize: 2,
      styles: {
        'background-color': `theme.base06`,
        'opacity': '0.7',
        'border-radius': '5px',
        'padding': '5px',
      },
    }
    [More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |\n\n#### Redux DevTools props\n\n| Name | Description |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `theme` | Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js). |\n| `invertTheme` | Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false` |\n| `select` | A function that selects the slice of the state for DevTools to show. For example, `state => state.thePart.iCare.about`. Optional. By default, set to `state => state`. |\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools-chart-monitor/eslint.config.mjs", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n {\n ignores: ['lib'],\n },\n];\n" }, { "path": "packages/redux-devtools-chart-monitor/package.json", "content": "{\n \"name\": \"@redux-devtools/chart-monitor\",\n \"version\": \"6.0.0\",\n \"description\": \"Chart monitor for Redux DevTools\",\n \"keywords\": [\n \"redux\",\n \"devtools\",\n \"flux\",\n \"react\",\n \"chart\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"romseguy\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint\"\n },\n \"dependencies\": {\n \"d3-state-visualizer\": \"workspace:^\",\n \"deepmerge\": \"^4.3.1\",\n \"react-base16-styling\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@redux-devtools/core\": \"workspace:^\",\n \"@types/react\": \"^19.2.14\",\n \"react\": \"^19.2.4\",\n \"redux\": \"^5.0.1\",\n \"rimraf\": \"^6.1.3\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@redux-devtools/core\": \"workspace:^\",\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"redux\": \"^3.4.0 || ^4.0.0 || ^5.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools-chart-monitor/src/Chart.tsx", "content": "import React, { Component, createRef } from 'react';\nimport { tree } from 'd3-state-visualizer';\nimport type { Options } from 'd3-state-visualizer';\nimport { base16Themes } from 'react-base16-styling';\nimport type { Base16Theme } from 'react-base16-styling';\nimport { Action, Dispatch } from 'redux';\nimport { LiftedAction, LiftedState } from '@redux-devtools/core';\nimport { ChartMonitorState } from './reducers.js';\n\nconst wrapperStyle = {\n width: '100%',\n height: '100%',\n};\n\nexport interface Props>\n extends LiftedState, Options {\n dispatch: Dispatch>;\n preserveScrollTop: boolean;\n select: (state: S) => unknown;\n theme: keyof typeof base16Themes | Base16Theme;\n invertTheme: boolean;\n\n state: S | null;\n defaultIsVisible?: boolean;\n}\n\nclass Chart> extends Component> {\n divRef = createRef();\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n renderChart?: (state?: {} | null | undefined) => void;\n\n componentDidMount() {\n const { select, state, defaultIsVisible } = this.props;\n this.renderChart = tree(this.divRef.current!, this.props);\n if (defaultIsVisible) {\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n this.renderChart(select(state!) as {} | null | undefined);\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: Props) {\n const { state, select, monitorState } = nextProps;\n\n if (monitorState.isVisible !== false) {\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n this.renderChart!(select(state!) as {} | null | undefined);\n }\n }\n\n render() {\n return
    ;\n }\n}\n\nexport default Chart;\n" }, { "path": "packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx", "content": "import React, { CSSProperties, PureComponent } from 'react';\nimport { base16Themes } from 'react-base16-styling';\nimport type { Base16Theme } from 'react-base16-styling';\nimport {\n ActionCreators,\n LiftedAction,\n LiftedState,\n} from '@redux-devtools/core';\nimport deepmerge from 'deepmerge';\nimport { Action, Dispatch } from 'redux';\nimport type { Options } from 'd3-state-visualizer';\n\nimport reducer, { ChartMonitorState } from './reducers.js';\nimport Chart, { Props } from './Chart.js';\n\nconst { reset, rollback, commit, sweep, toggleAction } = ActionCreators;\n\nconst styles: { container: CSSProperties } = {\n container: {\n fontFamily: 'monaco, Consolas, Lucida Console, monospace',\n position: 'relative',\n overflowY: 'hidden',\n width: '100%',\n height: '100%',\n minWidth: 300,\n },\n};\n\nfunction invertColors(theme: Base16Theme) {\n return {\n ...theme,\n base00: theme.base07,\n base01: theme.base06,\n base02: theme.base05,\n base03: theme.base04,\n base04: theme.base03,\n base05: theme.base02,\n base06: theme.base01,\n base07: theme.base00,\n };\n}\n\nexport interface ChartMonitorProps>\n extends LiftedState, Options {\n dispatch: Dispatch>;\n preserveScrollTop: boolean;\n select: (state: S) => unknown;\n theme: keyof typeof base16Themes | Base16Theme;\n invertTheme: boolean;\n\n defaultIsVisible?: boolean;\n}\n\nclass ChartMonitor> extends PureComponent<\n ChartMonitorProps\n> {\n static update = reducer;\n\n static defaultProps = {\n select: (state: unknown) => state,\n theme: 'nicinabox',\n preserveScrollTop: true,\n invertTheme: false,\n };\n\n handleRollback = () => {\n this.props.dispatch(rollback());\n };\n\n handleSweep = () => {\n this.props.dispatch(sweep());\n };\n\n handleCommit = () => {\n this.props.dispatch(commit());\n };\n\n handleToggleAction = (id: number) => {\n this.props.dispatch(toggleAction(id));\n };\n\n handleReset = () => {\n this.props.dispatch(reset());\n };\n\n getTheme() {\n const { theme, invertTheme } = this.props;\n if (typeof theme !== 'string') {\n return invertTheme ? invertColors(theme) : theme;\n }\n\n if (typeof base16Themes[theme] !== 'undefined') {\n return invertTheme\n ? invertColors(base16Themes[theme])\n : base16Themes[theme];\n }\n\n console.warn(\n 'DevTools theme ' + theme + ' not found, defaulting to nicinabox',\n );\n return invertTheme\n ? invertColors(base16Themes.nicinabox)\n : base16Themes.nicinabox;\n }\n\n getChartOptions(props = this.props): Props {\n const { computedStates } = props;\n const theme = this.getTheme();\n\n const defaultOptions = {\n state: computedStates.length\n ? computedStates[props.currentStateIndex].state\n : null,\n isSorted: false,\n heightBetweenNodesCoeff: 1,\n widthBetweenNodesCoeff: 1.3,\n tooltipOptions: {\n disabled: false,\n offset: { left: 30, top: 10 },\n indentationSize: 2,\n styles: {\n 'background-color': theme.base06,\n opacity: '0.7',\n 'border-radius': '5px',\n padding: '5px',\n },\n },\n chartStyles: {\n width: '100%',\n height: '100%',\n },\n nodeStyleOptions: {\n colors: {\n default: theme.base0B,\n collapsed: theme.base0B,\n parent: theme.base0E,\n },\n radius: 7,\n },\n textStyleOptions: {\n colors: {\n default: theme.base0D,\n hover: theme.base06,\n },\n },\n };\n\n return deepmerge(defaultOptions, props);\n }\n\n render() {\n const theme = this.getTheme();\n\n return (\n
    \n \n
    \n );\n }\n}\n\nexport default ChartMonitor;\n" }, { "path": "packages/redux-devtools-chart-monitor/src/actions.ts", "content": "export const TOGGLE_VISIBILITY =\n '@@redux-devtools-log-monitor/TOGGLE_VISIBILITY';\ninterface ToggleVisibilityAction {\n type: typeof TOGGLE_VISIBILITY;\n}\nexport type ChartMonitorAction = ToggleVisibilityAction;\n" }, { "path": "packages/redux-devtools-chart-monitor/src/index.ts", "content": "export {\n default as ChartMonitor,\n type ChartMonitorProps,\n} from './ChartMonitor.js';\nexport { type ChartMonitorAction } from './actions.js';\nexport { type ChartMonitorState } from './reducers.js';\n" }, { "path": "packages/redux-devtools-chart-monitor/src/reducers.ts", "content": "import { Action } from 'redux';\nimport { ChartMonitorAction, TOGGLE_VISIBILITY } from './actions.js';\nimport { ChartMonitorProps } from './ChartMonitor.js';\n\nfunction toggleVisibility>(\n props: ChartMonitorProps,\n state = props.defaultIsVisible,\n action: ChartMonitorAction,\n): boolean {\n if (action.type === TOGGLE_VISIBILITY) {\n return !state;\n }\n\n if (props.defaultIsVisible !== undefined) {\n return props.defaultIsVisible;\n }\n\n return true;\n}\n\nexport interface ChartMonitorState {\n isVisible?: boolean;\n}\n\nexport default function reducer>(\n props: ChartMonitorProps,\n state: ChartMonitorState | undefined = {},\n action: ChartMonitorAction,\n) {\n return {\n isVisible: toggleVisibility(props, state.isVisible, action),\n };\n}\n" }, { "path": "packages/redux-devtools-chart-monitor/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-cli/CHANGELOG.md", "content": "# Change Log\n\n## 5.0.0\n\n### Major Changes\n\n- 56de415: Require Node.js 20\n\n### Patch Changes\n\n- Updated dependencies [6481386]\n - @redux-devtools/app@8.0.0\n\n## 4.0.4\n\n### Patch Changes\n\n- Updated dependencies [6163276]\n - @redux-devtools/app@7.0.0\n\n## 4.0.3\n\n### Patch Changes\n\n- @redux-devtools/app@6.2.2\n\n## 4.0.2\n\n### Patch Changes\n\n- @redux-devtools/app@6.2.1\n\n## 4.0.1\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/app@6.2.0\n\n## 4.0.0\n\n### Major Changes\n\n- 4dd0dd2: Require Node.js 18\n\n## 3.0.4\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n - @redux-devtools/app@6.0.0\n\n## 3.0.3\n\n### Patch Changes\n\n- Updated dependencies [158ba2c]\n - @redux-devtools/app@5.0.0\n\n## 3.0.2\n\n### Patch Changes\n\n- Updated dependencies [e57bcb39]\n - @redux-devtools/app@4.0.0\n\n## 3.0.1\n\n### Patch Changes\n\n- Updated dependencies [57751ff9]\n - @redux-devtools/app@3.0.0\n\n## 3.0.0\n\n### Major Changes\n\n- 81ba239e: Dropped support for Node.js 14.\n\n### Patch Changes\n\n- @redux-devtools/app@2.2.2\n\n## 2.0.0\n\n### Major Changes\n\n- 7e129988: Convert @redux-devtools/cli to ESM. Please [read this](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) for more info about ESM.\n Update supported Node versions from `>=14.15.0` to `^14.13.1 || ^16.13.0 || >=18.12.0`.\n\n### Patch Changes\n\n- a7729dae: Updates `--open` flag to respect protocol and host when provided\n\n## 1.0.7\n\n### Patch Changes\n\n- ab3c0e2: Avoid persisting the selected action index between sessions\n- Updated dependencies [ab3c0e2]\n - @redux-devtools/app@2.1.3\n\n## [1.0.0-9](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/cli@1.0.0-8...@redux-devtools/cli@1.0.0-9) (2021-06-11)\n\n**Note:** Version bump only for package @redux-devtools/cli\n\n## [1.0.0-8](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/cli@1.0.0-7...@redux-devtools/cli@1.0.0-8) (2021-06-11)\n\n### Bug Fixes\n\n- **cli:** fix starting Electron app ([#729](https://github.com/reduxjs/redux-devtools/issues/729)) ([457a201](https://github.com/reduxjs/redux-devtools/commit/457a201232d96a5c28dbaf3f8a42259a35b2b364))\n\n## [1.0.0-7](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/cli@1.0.0-6...@redux-devtools/cli@1.0.0-7) (2021-04-06)\n\n### Bug Fixes\n\n- **cli:** include dist directory in publish ([#707](https://github.com/reduxjs/redux-devtools/issues/707)) ([95c8c55](https://github.com/reduxjs/redux-devtools/commit/95c8c5520d7ad4d087edcbda2ab500436feffc4a))\n\n## [1.0.0-6](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/cli@1.0.0-5...@redux-devtools/cli@1.0.0-6) (2021-03-06)\n\n**Note:** Version bump only for package @redux-devtools/cli\n\n## 1.0.0-5 (2021-03-06)\n\n### Bug Fixes\n\n- **cli:** resolve dependency issues ([#666](https://github.com/reduxjs/redux-devtools/issues/666)) ([e39e439](https://github.com/reduxjs/redux-devtools/commit/e39e43968b445ecbdcdab515050c5338cadabbe6))\n- **redux-devtools-cli:** forward port to spawned electron ([#564](https://github.com/reduxjs/redux-devtools/issues/564)) ([a1c2f06](https://github.com/reduxjs/redux-devtools/commit/a1c2f068b53ad205d448baa86003c3313f7ab2d1))\n\n## [1.0.0-4](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-cli@1.0.0-3...redux-devtools-cli@1.0.0-4) (2020-09-07)\n\n**Note:** Version bump only for package redux-devtools-cli\n\n## [1.0.0-3](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-cli@1.0.0-2...redux-devtools-cli@1.0.0-3) (2020-08-14)\n\n### Bug Fixes\n\n- **redux-devtools-cli:** forward port to spawned electron ([#564](https://github.com/reduxjs/redux-devtools/issues/564)) ([a1c2f06](https://github.com/reduxjs/redux-devtools/commit/a1c2f068b53ad205d448baa86003c3313f7ab2d1))\n" }, { "path": "packages/redux-devtools-cli/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2016 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.\n" }, { "path": "packages/redux-devtools-cli/README.md", "content": "# Redux DevTools Command Line Interface\n\nBridge for remote debugging via [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev).\n\n### Usage\n\n#### Install the package globally\n\nwith npm:\n\n```\nnpm install -g @redux-devtools/cli\n```\n\nor with yarn:\n\n```\nyarn global add @redux-devtools/cli\n```\n\nand start as:\n\n```\nredux-devtools --hostname=localhost --port=8000\n```\n\n> Note the package is called `@redux-devtools/cli` not `redux-devtools` (the latter is a React component).\n\n#### Or add in your project\n\nwith npm:\n\n```\nnpm install --save-dev @redux-devtools/cli\n```\n\nor with yarn:\n\n```\nyarn add --dev @redux-devtools/cli\n```\n\nand add to `package.json`:\n\n```\n\"scripts\": {\n \"redux-devtools\": \"redux-devtools --hostname=localhost --port=8000\"\n}\n```\n\nSo, you can start redux-devtools server by running `npm run redux-devtools`.\n\n##### Import in your `server.js` script you use for starting a development server:\n\n```js\nvar reduxDevTools = require('@redux-devtools/cli');\nreduxDevTools({ hostname: 'localhost', port: 8000 });\n```\n\nSo, you can start redux-devtools server together with your dev server.\n\n### Open Redux DevTools\n\nYou can add `--open` argument (or set it as `electron`) to open Redux DevTools as a standalone application:\n\n```\nredux-devtools --open\n```\n\nSet it as `browser` to open as a web app in the default browser instead:\n\n```\nredux-devtools --open=browser\n```\n\nTo specify the browser:\n\n```\nredux-devtools --open=firefox\n```\n\n### Connection settings\n\nSet `hostname` and `port` to the values you want. `hostname` by default is `localhost` and `port` is `8000`.\n\nTo use WSS, set `protocol` argument to `https` and provide `key`, `cert` and `passphrase` arguments.\n\n#### Available options\n\n| Console argument | description | default value |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `--hostname` | hostname | localhost |\n| `--port` | port | 8000 |\n| `--protocol` | protocol | http |\n| `--key` | the key file for [running an https server](https://github.com/SocketCluster/socketcluster#using-over-https) (`--protocol` must be set to 'https') | - |\n| `--cert` | the cert file for [running an https server](https://github.com/SocketCluster/socketcluster#using-over-https) (`--protocol` must be set to 'https') | - |\n| `--passphrase` | the key passphrase for [running an https server](https://github.com/SocketCluster/socketcluster#using-over-https) (`--protocol` must be set to 'https') | - |\n| `--dbOptions` | database configuration, can be whether an object or a path (string) to json configuration file (by default it uses our `./defaultDbOptions.json` file. Set `migrate` key to `true` to use our migrations file. [More details bellow](#save-reports-and-logs). | - |\n| `--logLevel` | the socket server log level - 0=none, 1=error, 2=warn, 3=info | 3 |\n| `--wsEngine` | the socket server web socket engine - ws or uws (sc-uws) | ws |\n| `--open` | open Redux DevTools as a standalone application or as web app. See [Open Redux DevTools](#open-redux-devtools) for details. | false |\n\n### Inject to React Native local server\n\n##### Add in your React Native app's `package.json`:\n\n```\n\"scripts\": {\n \"redux-devtools\": \"redux-devtools --hostname=localhost --port=8000 --injectserver=reactnative\"\n}\n```\n\nThe `injectserver` value can be `reactnative` or `macos` ([react-native-macos](https://github.com/ptmt/react-native-macos)), it used `reactnative` by default.\n\nThen, we can start React Native server and Redux DevTools server with one command (`npm start`).\n\n##### Revert the injection\n\nAdd in your React Native app's `package.json`:\n\n```\n\"scripts\": {\n \"redux-devtools-revert\": \"redux-devtools --revert=reactnative\"\n}\n```\n\nOr just run `$(npm bin)/redux-devtools --revert`.\n\n### Connect from Android device or emulator\n\n> Note that if you're using `injectserver` argument explained above, this step is not necessary.\n\nIf you're running an Android 5.0+ device connected via USB or an Android emulator, use [adb command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer:\n\n```\nadb reverse tcp:8000 tcp:8000\n```\n\nIf you're still use Android 4.0, you should use `10.0.2.2` (Genymotion: `10.0.3.2`) instead of `localhost` in [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools#storeconfigurestorejs) or [remotedev](https://github.com/zalmoxisus/remotedev#usage).\n\n### Save reports and logs\n\nYou can store reports via [`redux-remotedev`](https://github.com/zalmoxisus/redux-remotedev) and get them replicated with [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension) or [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools). You can get action history right in the extension just by clicking the link from a report. Open `http://localhost:8000/graphql` (assuming you're using `localhost` as host and `8000`) to explore in GraphQL. Reports are posted to `http://localhost:8000/`. See examples in [tests](https://github.com/zalmoxisus/remotedev-server/blob/937cfa1f0ac9dc12ebf7068eeaa8b03022ec33bc/test/integration.spec.js#L110-L165).\n\nRedux DevTools server is database agnostic using `knex` schema. By default everything is stored in the memory using sqlite database. See [`defaultDbOptions.json`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-cli/defaultDbOptions.json) for example of sqlite. You can replace `\"connection\": { \"filename\": \":memory:\" },` with your file name (instead of `:memory:`) to persist teh database. Here's an example for PostgreSQL:\n\n```\n{\n \"client\": \"pg\",\n \"connection\": { \"user\": \"myuser\", \"password\": \"mypassword\", \"database\": \"mydb\" },\n \"debug\": false,\n \"migrate\": true\n}\n```\n\n### Advanced\n\n- [Writing your integration for a native application](https://github.com/reduxjs/redux-devtools/blob/master/docs/Integrations/Remote.md)\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools-cli/app/electron.cjs", "content": "// Based on https://github.com/electron/electron-quick-start\n\nconst { app, BrowserWindow } = require('electron');\nconst argv = require('minimist')(process.argv.slice(2));\n\nfunction createWindow() {\n const mainWindow = new BrowserWindow({\n width: 800,\n height: 600,\n });\n\n const port = argv.port ? argv.port : 8000;\n const host = argv.host ? argv.host : 'localhost';\n const protocol = argv.protocol ? argv.protocol : 'http';\n\n mainWindow.loadURL(protocol + '://' + host + ':' + port);\n}\n\napp.whenReady().then(() => {\n createWindow();\n\n app.on('activate', function () {\n if (BrowserWindow.getAllWindows().length === 0) createWindow();\n });\n});\n\napp.on('window-all-closed', function () {\n if (process.platform !== 'darwin') app.quit();\n});\n" }, { "path": "packages/redux-devtools-cli/app/index.html", "content": "\n\n \n \n Redux DevTools\n \n \n \n \n
    \n \n \n \n \n \n \n\n" }, { "path": "packages/redux-devtools-cli/app/package.json", "content": "{\n \"private\": true,\n \"name\": \"@redux-devtools/cli\",\n \"version\": \"0.0.1\",\n \"main\": \"electron.cjs\",\n \"description\": \"Remote Redux DevTools\",\n \"authors\": \"Mihail Diordiev\"\n}\n" }, { "path": "packages/redux-devtools-cli/bin/redux-devtools.js", "content": "#! /usr/bin/env node\n\nimport '../dist/bin/redux-devtools.js';\n" }, { "path": "packages/redux-devtools-cli/defaultDbOptions.json", "content": "{\n \"client\": \"sqlite3\",\n \"connection\": { \"filename\": \":memory:\" },\n \"useNullAsDefault\": true,\n \"debug\": false,\n \"migrate\": true\n}\n" }, { "path": "packages/redux-devtools-cli/eslint.config.mjs", "content": "import globals from 'globals';\nimport eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTs from '../../eslint.ts.config.base.mjs';\nimport eslintTsJest from '../../eslint.ts.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTsJest(import.meta.dirname),\n {\n ignores: ['dist', 'jest.config.ts', 'umd'],\n },\n {\n languageOptions: {\n globals: {\n ...globals.nodeBuiltin,\n },\n },\n },\n];\n" }, { "path": "packages/redux-devtools-cli/jest.config.ts", "content": "import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createDefaultEsmPreset({\n tsconfig: 'tsconfig.test.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "packages/redux-devtools-cli/package.json", "content": "{\n \"name\": \"@redux-devtools/cli\",\n \"version\": \"5.0.0\",\n \"description\": \"CLI for remote debugging with Redux DevTools.\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-cli\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Mihail Diordiev (https://github.com/zalmoxisus)\",\n \"files\": [\n \"bin\",\n \"dist\",\n \"src\",\n \"app\",\n \"index.js\",\n \"defaultDbOptions.json\"\n ],\n \"type\": \"module\",\n \"main\": \"dist/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"bin\": {\n \"redux-devtools\": \"bin/redux-devtools.js\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc && ncp ./src/api/schema_def.graphql ./dist/api/schema_def.graphql\",\n \"start\": \"node ./bin/redux-devtools.js\",\n \"start:electron\": \"node ./bin/redux-devtools.js --open\",\n \"clean\": \"rimraf dist\",\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint && pnpm run test\"\n },\n \"engines\": {\n \"node\": \">=20\"\n },\n \"dependencies\": {\n \"@apollo/server\": \"^5.2.0\",\n \"@as-integrations/express5\": \"^1.1.2\",\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@redux-devtools/app\": \"workspace:^\",\n \"@reduxjs/toolkit\": \"^2.11.2\",\n \"@types/react\": \"^19.2.14\",\n \"body-parser\": \"^2.2.2\",\n \"chalk\": \"^5.6.2\",\n \"cors\": \"^2.8.6\",\n \"cross-spawn\": \"^7.0.6\",\n \"electron\": \"^41.0.2\",\n \"express\": \"^5.2.1\",\n \"get-port\": \"^7.1.0\",\n \"graphql\": \"^16.13.1\",\n \"knex\": \"^3.1.0\",\n \"lodash-es\": \"^4.17.23\",\n \"minimist\": \"^1.2.8\",\n \"morgan\": \"^1.10.1\",\n \"open\": \"^11.0.0\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-is\": \"^19.2.4\",\n \"semver\": \"^7.7.4\",\n \"socketcluster-server\": \"^20.0.0\",\n \"sqlite3\": \"^6.0.1\",\n \"uuid\": \"^13.0.0\"\n },\n \"devDependencies\": {\n \"@jest/globals\": \"^30.3.0\",\n \"@types/body-parser\": \"^1.19.6\",\n \"@types/cors\": \"^2.8.19\",\n \"@types/cross-spawn\": \"^6.0.6\",\n \"@types/express\": \"^5.0.6\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/lodash-es\": \"^4.17.12\",\n \"@types/minimist\": \"^1.2.5\",\n \"@types/morgan\": \"^1.9.10\",\n \"@types/node\": \"^24.12.0\",\n \"@types/semver\": \"^7.7.1\",\n \"@types/socketcluster-client\": \"^20.0.0\",\n \"@types/socketcluster-server\": \"^20.0.0\",\n \"@types/supertest\": \"^7.2.0\",\n \"@types/uuid\": \"^11.0.0\",\n \"globals\": \"^17.4.0\",\n \"jest\": \"^30.3.0\",\n \"ncp\": \"^2.0.0\",\n \"rimraf\": \"^6.1.3\",\n \"socketcluster-client\": \"^20.0.1\",\n \"supertest\": \"^7.2.2\",\n \"ts-jest\": \"^29.4.6\",\n \"typescript\": \"~5.9.3\"\n }\n}\n" }, { "path": "packages/redux-devtools-cli/src/api/schema.ts", "content": "import fs from 'fs';\nimport type { Store } from '../store.js';\n\nexport const schema = fs.readFileSync(\n new URL('./schema_def.graphql', import.meta.url),\n 'utf8',\n);\n\nexport const resolvers = {\n Query: {\n reports: function report(\n source: unknown,\n args: unknown,\n context: { store: Store },\n ) {\n return context.store.listAll();\n },\n report: function report(\n source: unknown,\n args: { id: string },\n context: { store: Store },\n ) {\n return context.store.get(args.id);\n },\n },\n};\n" }, { "path": "packages/redux-devtools-cli/src/api/schema_def.graphql", "content": "# A list of options for the type of the report\nenum ReportType {\n STATE\n ACTION\n STATES\n ACTIONS\n}\n\ntype Report {\n # Report ID\n id: ID!\n # Type of the report, can be: STATE, ACTION, STATES, ACTIONS\n type: ReportType\n # Briefly what happened\n title: String\n # Details supplied by the user\n description: String\n # The last dispatched action before the report was sent\n action: String\n # Stringified actions or the state or both, which should be loaded the application to reproduce the exact behavior\n payload: String\n # Stringified preloaded state object. Could be the initial state of the app or committed state (after dispatching COMMIT action or reaching maxAge)\n preloadedState: String\n # Screenshot url or blob as a string\n screenshot: String\n # User Agent String\n userAgent: String\n # Application version to group the reports and versioning\n version: String\n # Used to identify the user who sent the report\n userId: String\n # More detailed data about the user, usually it's a stringified object\n user: String\n # Everything else you want to send\n meta: String\n # Error message which invoked sending the report\n exception: String\n # Id to identify the store in case there are multiple stores\n instanceId: String\n # Timestamp when the report was added\n added: String\n # Id to identify the application (from apps table)\n appId: ID\n}\n\n# Explore GraphQL query schema\ntype Query {\n # List all reports\n reports: [Report]\n # Get a report by ID\n report(\n # Report ID\n id: ID!\n ): Report\n}\n\nschema {\n query: Query\n #mutation: Mutation\n}\n" }, { "path": "packages/redux-devtools-cli/src/bin/injectServer.ts", "content": "import fs from 'fs';\nimport path from 'path';\nimport semver from 'semver';\nimport type { Options } from '../options.js';\n\nconst name = '@redux-devtools/cli';\nconst startFlag = '/* ' + name + ' start */';\nconst endFlag = '/* ' + name + ' end */';\nconst serverFlags: { [moduleName: string]: { [version: string]: string } } = {\n 'react-native': {\n '0.0.1': ' _server(argv, config, resolve, reject);',\n '0.31.0':\n \" runServer(args, config, () => console.log('\\\\nReact packager ready.\\\\n'));\",\n '0.44.0-rc.0': ' runServer(args, config, startedCallback, readyCallback);',\n '0.46.0-rc.0':\n ' runServer(runServerArgs, configT, startedCallback, readyCallback);',\n '0.57.0': ' runServer(args, configT);',\n },\n 'react-native-desktop': {\n '0.0.1': ' _server(argv, config, resolve, reject);',\n },\n};\n\nfunction getModuleVersion(modulePath: string): string {\n return JSON.parse(\n fs.readFileSync(path.join(modulePath, 'package.json'), 'utf-8'),\n ).version;\n}\n\nfunction getServerFlag(moduleName: string, version: string): string {\n const flags = serverFlags[moduleName || 'react-native'];\n const versions = Object.keys(flags);\n let flag;\n for (let i = 0; i < versions.length; i++) {\n if (semver.gte(version, versions[i])) {\n flag = flags[versions[i]];\n }\n }\n return flag as string;\n}\n\nexport const dir = 'local-cli/server';\nexport const file = 'server.js';\nexport const fullPath = path.join(dir, file);\n\nexport function inject(\n modulePath: string,\n options: Options,\n moduleName: string,\n) {\n const filePath = path.join(modulePath, fullPath);\n if (!fs.existsSync(filePath)) return false;\n\n const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));\n const code = [\n startFlag,\n ' require(\"' + name + '\")(' + JSON.stringify(options) + ')',\n ' .then(_remotedev =>',\n ' _remotedev.ready.then(() => {',\n ' if (!_remotedev.portAlreadyUsed) console.log(\"-\".repeat(80));',\n ' ' + serverFlag,\n ' })',\n ' );',\n endFlag,\n ].join('\\n');\n\n const serverCode = fs.readFileSync(filePath, 'utf-8');\n let start = serverCode.indexOf(startFlag); // already injected ?\n let end = serverCode.indexOf(endFlag) + endFlag.length;\n if (start === -1) {\n start = serverCode.indexOf(serverFlag);\n end = start + serverFlag.length;\n }\n fs.writeFileSync(\n filePath,\n serverCode.substr(0, start) +\n code +\n serverCode.substr(end, serverCode.length),\n );\n return true;\n}\n\nexport function revert(\n modulePath: string,\n options: Options,\n moduleName: string,\n) {\n const filePath = path.join(modulePath, fullPath);\n if (!fs.existsSync(filePath)) return false;\n\n const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));\n const serverCode = fs.readFileSync(filePath, 'utf-8');\n const start = serverCode.indexOf(startFlag); // already injected ?\n const end = serverCode.indexOf(endFlag) + endFlag.length;\n if (start !== -1) {\n fs.writeFileSync(\n filePath,\n serverCode.substr(0, start) +\n serverFlag +\n serverCode.substr(end, serverCode.length),\n );\n }\n return true;\n}\n" }, { "path": "packages/redux-devtools-cli/src/bin/openApp.ts", "content": "import open from 'open';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nimport { createRequire } from 'module';\nimport spawn from 'cross-spawn';\nimport type { Options } from '../options.js';\n\nconst require = createRequire(import.meta.url);\n\nexport default async function openApp(app: true | string, options: Options) {\n if (app === true || app === 'electron') {\n try {\n const port = options.port ? `--port=${options.port}` : '';\n const host = options.host ? `--host=${options.host}` : '';\n const protocol = options.protocol ? `--protocol=${options.protocol}` : '';\n\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n spawn(require('electron') as string, [\n path.join(\n path.dirname(fileURLToPath(import.meta.url)),\n '..',\n '..',\n 'app',\n ),\n port,\n host,\n protocol,\n ]);\n } catch (error) {\n /* eslint-disable no-console */\n if ((error as Error).message === \"Cannot find module 'electron'\") {\n // TODO: Move electron to dev-dependences to make our package installation faster when not needed.\n console.log(\n ' \\x1b[1;31m[Warn]\\x1b[0m Electron module not installed.\\n',\n );\n /*\n We will use \"npm\" to install Electron via \"npm install -D\".\n Do you want to install 'electron' (yes/no): yes\n Installing 'electron' (running 'npm install -D webpack-cli')...\n */\n } else {\n console.log(error);\n }\n /* eslint-enable no-console */\n }\n return;\n }\n\n await open(\n `${options.protocol}://${options.host ?? 'localhost'}:${options.port}/`,\n app !== 'browser' ? { app: { name: app } } : undefined,\n );\n}\n" }, { "path": "packages/redux-devtools-cli/src/bin/redux-devtools.ts", "content": "#! /usr/bin/env node\nimport fs from 'fs';\nimport path from 'path';\nimport parseArgs from 'minimist';\nimport chalk from 'chalk';\nimport * as injectServer from './injectServer.js';\nimport getOptions from '../options.js';\nimport server from '../index.js';\nimport openApp from './openApp.js';\n\nconst argv = parseArgs(process.argv.slice(2));\n\nconst options = getOptions(argv);\n\nfunction readFile(filePath: string) {\n return fs.readFileSync(path.resolve(process.cwd(), filePath), 'utf-8');\n}\n\nif (argv.protocol === 'https') {\n argv.key = argv.key ? readFile(argv.key as string) : null;\n argv.cert = argv.cert ? readFile(argv.cert as string) : null;\n}\n\nfunction log(pass: boolean, msg: string) {\n const prefix = pass ? chalk.green.bgBlack('PASS') : chalk.red.bgBlack('FAIL');\n const color = pass ? chalk.blue : chalk.red;\n console.log(prefix, color(msg)); // eslint-disable-line no-console\n}\n\nfunction getModuleName(type: string) {\n switch (type) {\n case 'macos':\n return 'react-native-macos';\n // react-native-macos is renamed from react-native-desktop\n case 'desktop':\n return 'react-native-desktop';\n case 'reactnative':\n default:\n return 'react-native';\n }\n}\n\nfunction getModulePath(moduleName: string) {\n return path.join(process.cwd(), 'node_modules', moduleName);\n}\n\nfunction getModule(type: string) {\n let moduleName = getModuleName(type);\n let modulePath = getModulePath(moduleName);\n if (type === 'desktop' && !fs.existsSync(modulePath)) {\n moduleName = getModuleName('macos');\n modulePath = getModulePath(moduleName);\n }\n return {\n name: moduleName,\n path: modulePath,\n };\n}\n\nfunction injectRN(type: string, msg: string) {\n const module = getModule(type);\n const fn = type === 'revert' ? injectServer.revert : injectServer.inject;\n const pass = fn(module.path, options, module.name);\n log(\n pass,\n msg +\n (pass\n ? '.'\n : ', the file `' +\n path.join(module.name, injectServer.fullPath) +\n '` not found.'),\n );\n\n process.exit(pass ? 0 : 1);\n}\n\nif (argv.revert) {\n injectRN(\n argv.revert as string,\n 'Revert injection of ReduxDevTools server from React Native local server',\n );\n}\nif (argv.injectserver) {\n injectRN(\n argv.injectserver as string,\n 'Inject ReduxDevTools server into React Native local server',\n );\n}\n\nconst response = await server(argv);\nif (argv.open && argv.open !== 'false') {\n await response.ready;\n await openApp(argv.open as string, options);\n}\n" }, { "path": "packages/redux-devtools-cli/src/db/connector.ts", "content": "import path from 'path';\nimport { fileURLToPath } from 'url';\nimport knex from 'knex';\nimport type { Knex } from 'knex';\nimport { AGServer } from 'socketcluster-server';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\ntype KnexFunction = (\n config: Knex.Config | string,\n) => Knex;\n\nexport default function connector(options: AGServer.AGServerOptions) {\n const dbOptions = options.dbOptions as Knex.Config;\n dbOptions.useNullAsDefault = true;\n if (!(dbOptions as any).migrate) {\n return (knex as unknown as KnexFunction)(dbOptions);\n }\n\n dbOptions.migrations = {\n directory: path.join(\n path.dirname(fileURLToPath(import.meta.url)),\n 'migrations',\n ),\n };\n dbOptions.seeds = {\n directory: path.join(path.dirname(fileURLToPath(import.meta.url)), 'seeds'),\n };\n const knexInstance = (knex as unknown as KnexFunction)(dbOptions);\n\n /* eslint-disable no-console */\n knexInstance.migrate\n .latest({ loadExtensions: ['.js'] })\n .then(function () {\n return knexInstance.seed.run({ loadExtensions: ['.js'] });\n })\n .then(function () {\n console.log(' \\x1b[0;32m[Done]\\x1b[0m Migrations are finished\\n');\n })\n .catch(function (error) {\n console.error(error);\n });\n /* eslint-enable no-console */\n\n return knexInstance;\n}\n" }, { "path": "packages/redux-devtools-cli/src/db/migrations/index.ts", "content": "import { Knex } from 'knex';\n\nexport function up(knex: Knex) {\n return Promise.all([\n knex.schema.createTable('remotedev_reports', function (table) {\n table.uuid('id').primary();\n table.string('type');\n table.string('title');\n table.string('description');\n table.string('action');\n table.text('payload', 'longtext');\n table.text('preloadedState', 'longtext');\n table.text('screenshot', 'longtext');\n table.string('userAgent');\n table.string('version');\n table.string('user');\n table.string('userId');\n table.string('instanceId');\n table.string('meta');\n table.string('exception');\n table.timestamp('added').defaultTo(knex.fn.now());\n table\n .uuid('appId')\n .references('id')\n .inTable('remotedev_apps')\n .onDelete('CASCADE')\n .onUpdate('CASCADE')\n .defaultTo('78626c31-e16b-4528-b8e5-f81301b627f4');\n }),\n knex.schema.createTable('remotedev_payloads', function (table) {\n table.uuid('id').primary();\n table.text('state');\n table.text('action');\n table.timestamp('added').defaultTo(knex.fn.now());\n table\n .uuid('reportId')\n .references('id')\n .inTable('remotedev_reports')\n .onDelete('CASCADE')\n .onUpdate('CASCADE');\n }),\n knex.schema.createTable('remotedev_apps', function (table) {\n table.uuid('id').primary();\n table.string('title');\n table.string('description');\n table.string('url');\n table.timestamps(false, true);\n }),\n knex.schema.createTable('remotedev_users', function (table) {\n table.uuid('id').primary();\n table.string('name');\n table.string('login');\n table.string('email');\n table.string('avatarUrl');\n table.string('profileUrl');\n table.string('oauthId');\n table.string('oauthType');\n table.string('token');\n table.timestamps(false, true);\n }),\n knex.schema.createTable('remotedev_users_apps', function (table) {\n table.boolean('readOnly').defaultTo(false);\n table.uuid('userId');\n table.uuid('appId');\n table.primary(['userId', 'appId']);\n table\n .foreign('userId')\n .references('id')\n .inTable('remotedev_users')\n .onDelete('CASCADE')\n .onUpdate('CASCADE');\n table\n .foreign('appId')\n .references('id')\n .inTable('remotedev_apps')\n .onDelete('CASCADE')\n .onUpdate('CASCADE');\n }),\n ]);\n}\n\nexport function down(knex: Knex) {\n return Promise.all([\n knex.schema.dropTable('remotedev_reports'),\n knex.schema.dropTable('remotedev_apps'),\n ]);\n}\n" }, { "path": "packages/redux-devtools-cli/src/db/seeds/index.ts", "content": "import { Knex } from 'knex';\n\nexport function seed(knex: Knex) {\n return Promise.all([knex('remotedev_apps').del()]).then(function () {\n return Promise.all([\n knex('remotedev_apps').insert({\n id: '78626c31-e16b-4528-b8e5-f81301b627f4',\n title: 'Default',\n }),\n ]);\n });\n}\n" }, { "path": "packages/redux-devtools-cli/src/index.ts", "content": "import express from 'express';\nimport http from 'http';\nimport getPort from 'get-port';\nimport socketClusterServer from 'socketcluster-server';\nimport getOptions from './options.js';\nimport routes from './routes.js';\nimport createStore from './store.js';\n\n// const LOG_LEVEL_NONE = 0;\n// const LOG_LEVEL_ERROR = 1;\nconst LOG_LEVEL_WARN = 2;\nconst LOG_LEVEL_INFO = 3;\n\nexport default async function (argv: { [arg: string]: any }): Promise<{\n portAlreadyUsed?: boolean;\n ready: Promise;\n}> {\n const options = Object.assign(getOptions(argv), {\n allowClientPublish: false,\n });\n const port = options.port;\n const logLevel =\n options.logLevel === undefined ? LOG_LEVEL_INFO : options.logLevel;\n // Check port already used\n const p = await getPort({ port });\n if (port !== p) {\n if (logLevel >= LOG_LEVEL_WARN) {\n console.log(`[ReduxDevTools] Server port ${port} is already used.`);\n }\n return {\n portAlreadyUsed: true,\n ready: Promise.resolve(),\n };\n }\n\n if (logLevel >= LOG_LEVEL_INFO) {\n console.log('[ReduxDevTools] Start server...');\n console.log('-'.repeat(80) + '\\n');\n }\n const httpServer = http.createServer();\n const agServer = socketClusterServer.attach(httpServer, options);\n\n const app = express();\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n httpServer.on('request', app);\n const store = createStore(options);\n app.use(routes(options, store, agServer));\n\n agServer.setMiddleware(\n agServer.MIDDLEWARE_INBOUND,\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n async (middlewareStream) => {\n for await (const action of middlewareStream) {\n if (action.type === action.TRANSMIT) {\n const channel = action.receiver;\n const data = action.data;\n if (\n channel.substring(0, 3) === 'sc-' ||\n channel === 'respond' ||\n channel === 'log'\n ) {\n void agServer.exchange.transmitPublish(channel, data);\n } else if (channel === 'log-noid') {\n void agServer.exchange.transmitPublish('log', {\n id: action.socket.id,\n data: data,\n });\n }\n } else if (action.type === action.SUBSCRIBE) {\n if (action.channel === 'report') {\n store\n .list()\n .then(function (data) {\n void agServer.exchange.transmitPublish('report', {\n type: 'list',\n data: data,\n });\n })\n .catch(function (error) {\n console.error(error);\n });\n }\n }\n action.allow();\n }\n },\n );\n\n void (async () => {\n for await (const { socket } of agServer.listener('connection')) {\n let channelToWatch: string, channelToEmit: string;\n void (async () => {\n for await (const request of socket.procedure('login')) {\n const credentials = request.data;\n if (credentials === 'master') {\n channelToWatch = 'respond';\n channelToEmit = 'log';\n } else {\n channelToWatch = 'log';\n channelToEmit = 'respond';\n }\n request.end(channelToWatch);\n }\n })();\n void (async () => {\n for await (const request of socket.procedure('getReport')) {\n const id = request.data as string;\n store\n .get(id)\n .then(function (data) {\n request.end(data);\n })\n .catch(function (error) {\n console.error(error);\n });\n }\n })();\n void (async () => {\n for await (const data of socket.listener('disconnect')) {\n const channel = agServer.exchange.channel('sc-' + socket.id);\n channel.unsubscribe();\n void agServer.exchange.transmitPublish(channelToEmit!, {\n id: socket.id,\n type: 'DISCONNECTED',\n });\n }\n })();\n }\n })();\n\n httpServer.listen(options.port);\n return {\n ready: (async () => {\n await agServer.listener('ready' as 'error').once();\n })(),\n };\n}\n" }, { "path": "packages/redux-devtools-cli/src/options.ts", "content": "import fs from 'fs';\n\ninterface ProtocolOptions {\n key: string | undefined;\n cert: string | undefined;\n passphrase: string | undefined;\n}\n\ninterface DbOptions {\n client: string;\n connection: {\n filename: string;\n };\n useNullAsDefault: boolean;\n debug: boolean;\n migrate: boolean;\n}\n\nexport interface Options {\n host: string | undefined;\n port: number;\n protocol: 'http' | 'https';\n protocolOptions: ProtocolOptions | undefined;\n dbOptions: DbOptions;\n maxRequestBody: string;\n logHTTPRequests?: boolean;\n logLevel: 0 | 1 | 3 | 2;\n wsEngine: string;\n}\n\nexport default function getOptions(argv: { [arg: string]: any }): Options {\n let dbOptions = argv.dbOptions;\n if (typeof dbOptions === 'string') {\n dbOptions = JSON.parse(fs.readFileSync(dbOptions, 'utf8'));\n } else if (typeof dbOptions === 'undefined') {\n dbOptions = JSON.parse(\n fs.readFileSync(\n new URL('../defaultDbOptions.json', import.meta.url),\n 'utf8',\n ),\n );\n }\n\n return {\n host:\n argv.hostname || process.env.npm_package_remotedev_hostname || undefined,\n port: Number(argv.port || process.env.npm_package_remotedev_port) || 8000,\n protocol:\n argv.protocol || process.env.npm_package_remotedev_protocol || 'http',\n protocolOptions: !(argv.protocol === 'https')\n ? undefined\n : {\n key: argv.key || process.env.npm_package_remotedev_key || undefined,\n cert:\n argv.cert || process.env.npm_package_remotedev_cert || undefined,\n passphrase:\n argv.passphrase ||\n process.env.npm_package_remotedev_passphrase ||\n undefined,\n },\n dbOptions: dbOptions,\n maxRequestBody: argv.passphrase || '16mb',\n logHTTPRequests: argv.logHTTPRequests,\n logLevel: argv.logLevel || 3,\n wsEngine:\n argv.wsEngine || process.env.npm_package_remotedev_wsengine || 'ws',\n };\n}\n" }, { "path": "packages/redux-devtools-cli/src/routes.ts", "content": "import path from 'path';\nimport { createRequire } from 'module';\nimport { fileURLToPath } from 'url';\nimport express from 'express';\nimport type { Router } from 'express';\nimport morgan from 'morgan';\nimport * as http from 'http';\nimport bodyParser from 'body-parser';\nimport cors from 'cors';\nimport { AGServer } from 'socketcluster-server';\nimport { ApolloServer } from '@apollo/server';\nimport { expressMiddleware } from '@as-integrations/express5';\nimport type { AddData, ReportBaseFields, Store } from './store.js';\nimport { resolvers, schema } from './api/schema.js';\n\nconst app = express.Router();\n\nconst require = createRequire(import.meta.url);\n\nfunction serveUmdModule(name: string) {\n app.use(\n express.static(\n path.dirname(require.resolve(name + '/package.json')) + '/umd',\n ),\n );\n}\n\ninterface Context {\n store?: Store;\n}\n\nfunction routes(\n options: AGServer.AGServerOptions,\n store: Store,\n scServer: AGServer,\n): Router {\n const limit = options.maxRequestBody;\n const logHTTPRequests = options.logHTTPRequests;\n\n if (logHTTPRequests) {\n if (typeof logHTTPRequests === 'object')\n app.use(\n morgan(\n 'combined',\n logHTTPRequests as morgan.Options<\n http.IncomingMessage,\n http.ServerResponse\n >,\n ),\n );\n else app.use(morgan('combined'));\n }\n\n const server = new ApolloServer({\n typeDefs: schema,\n resolvers,\n });\n server\n .start()\n .then(() => {\n app.use(\n '/graphql',\n cors(),\n bodyParser.json(),\n expressMiddleware(server, {\n context: () => Promise.resolve({ store }),\n }),\n );\n })\n .catch((error) => {\n console.error(error);\n });\n\n serveUmdModule('react');\n serveUmdModule('react-dom');\n serveUmdModule('@redux-devtools/app');\n\n app.get('/port.js', function (req, res) {\n res.send(`reduxDevToolsPort = ${options.port}`);\n });\n app.get('/{*splat}', function (req, res) {\n res.sendFile(\n path.join(\n path.dirname(fileURLToPath(import.meta.url)),\n '../app/index.html',\n ),\n );\n });\n\n app.use(cors({ methods: 'POST' }));\n app.use(bodyParser.json({ limit: limit }));\n app.use(bodyParser.urlencoded({ limit: limit, extended: false }));\n\n app.post('/', function (req, res) {\n if (!req.body) {\n res.status(404).end();\n return;\n }\n switch (req.body.op) {\n case 'get':\n store\n .get(req.body.id as string)\n .then(function (r) {\n res.send(r || {});\n })\n .catch(function (error) {\n console.error(error);\n res.sendStatus(500);\n });\n break;\n case 'list':\n store\n .list(req.body.query as string, req.body.fields as string[])\n .then(function (r) {\n res.send(r);\n })\n .catch(function (error) {\n console.error(error);\n res.sendStatus(500);\n });\n break;\n default:\n store\n .add(req.body as AddData)\n .then(function (r) {\n res.send({\n id: (r as ReportBaseFields).id,\n error: (r as { error: string }).error,\n });\n void scServer.exchange.transmitPublish('report', {\n type: 'add',\n data: r,\n });\n })\n .catch(function (error) {\n console.error(error);\n res.status(500).send({});\n });\n }\n });\n return app;\n}\n\nexport default routes;\n" }, { "path": "packages/redux-devtools-cli/src/store.ts", "content": "import { v4 as uuidV4 } from 'uuid';\nimport { pick } from 'lodash-es';\nimport { AGServer } from 'socketcluster-server';\nimport { Knex } from 'knex';\nimport connector from './db/connector.js';\n\nconst reports = 'remotedev_reports';\n// var payloads = 'remotedev_payloads';\nlet knex: Knex;\n\nconst baseFields = ['id', 'title', 'added'];\n\nfunction error(msg: string): Promise<{ error: string }> {\n return new Promise(function (resolve) {\n return resolve({ error: msg });\n });\n}\n\ntype ReportType = 'STATE' | 'ACTION' | 'STATES' | 'ACTIONS';\n\nexport interface Report {\n id: string;\n type: ReportType | null;\n title: string | null;\n description: string | null;\n action: string | null;\n payload: string;\n preloadedState: string | null;\n screenshot: string | null;\n userAgent: string | null;\n version: string | null;\n userId: string | null;\n user: string | null;\n meta: string | null;\n exception: string | null;\n instanceId: string | null;\n added: string | null;\n appId?: string | null;\n}\n\nexport interface ReportBaseFields {\n id: string;\n title: string | null;\n added: string | null;\n}\n\nfunction list(query?: string, fields?: string[]): Promise {\n const r = knex.select(fields || baseFields).from(reports);\n if (query) return r.where(query);\n return r;\n}\n\nfunction listAll(query?: string): Promise {\n const r = knex.select().from(reports);\n if (query) return r.where(query);\n return r;\n}\n\nfunction get(id: string): Promise {\n if (!id) return error('No id specified.');\n\n return knex(reports).where('id', id).first();\n}\n\nexport interface AddData {\n type: ReportType | null;\n title: string | null;\n description: string | null;\n action: string | null;\n payload: string;\n preloadedState: string | null;\n screenshot: string | null;\n version: string | null;\n userAgent: string | null;\n userId: string | null;\n user: { id: string } | string | null;\n instanceId: string | null;\n meta: string | null;\n exception?: Error;\n appId?: string | null;\n}\n\nfunction add(data: AddData): Promise {\n if (!data.type || !data.payload) {\n return error(\"Required parameters aren't specified.\");\n }\n if (data.type !== 'ACTIONS' && data.type !== 'STATE') {\n return error('Type ' + data.type + ' is not supported yet.');\n }\n\n const reportId = uuidV4();\n const report: Report = {\n id: reportId,\n type: data.type,\n title:\n data.title || (data.exception && data.exception.message) || data.action,\n description: data.description,\n action: data.action,\n payload: data.payload,\n preloadedState: data.preloadedState,\n screenshot: data.screenshot,\n version: data.version,\n userAgent: data.userAgent,\n user: data.user as string,\n userId:\n typeof data.user === 'object'\n ? (data.user as { id: string }).id\n : data.user,\n instanceId: data.instanceId,\n meta: data.meta,\n exception: composeException(data.exception),\n added: new Date().toISOString(),\n };\n if (data.appId) report.appId = data.appId; // TODO check if the id exists and we have access to link it\n /*\n var payload = {\n id: uuid.v4(),\n reportId: reportId,\n state: data.payload\n };\n */\n\n return knex\n .insert(report)\n .into(reports)\n .then(function () {\n return byBaseFields(report);\n });\n}\n\nfunction byBaseFields(data: Report): ReportBaseFields {\n return pick(data, baseFields) as ReportBaseFields;\n}\n\nexport interface Store {\n list: (query?: string, fields?: string[]) => Promise;\n listAll: (query?: string) => Promise;\n get: (id: string) => Promise;\n add: (data: AddData) => Promise;\n}\n\nfunction createStore(options: AGServer.AGServerOptions): Store {\n knex = connector(options);\n\n return {\n list: list,\n listAll: listAll,\n get: get,\n add: add,\n };\n}\n\nfunction composeException(exception: Error | undefined) {\n let message = '';\n\n if (exception) {\n message = 'Exception thrown: ';\n if (exception.message) message += exception.message;\n if (exception.stack) message += '\\n' + exception.stack;\n }\n return message;\n}\n\nexport default createStore;\n" }, { "path": "packages/redux-devtools-cli/test/integration.spec.ts", "content": "import { jest } from '@jest/globals';\nimport childProcess from 'child_process';\nimport request from 'supertest';\nimport socketClusterClient from 'socketcluster-client';\n\njest.setTimeout(10000);\n\ndescribe('Server', function () {\n let scServer: childProcess.ChildProcess;\n beforeAll(async function () {\n scServer = childProcess.fork(\n import.meta.dirname + '/../bin/redux-devtools.js',\n );\n await new Promise((resolve) => setTimeout(resolve, 5000));\n });\n\n afterAll(function () {\n if (scServer) {\n scServer.kill();\n }\n });\n\n describe('Express backend', function () {\n it('loads main page', function () {\n return new Promise((done) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n request('http://localhost:8000')\n .get('/')\n .expect('Content-Type', /text\\/html/)\n .expect(200)\n .then(function (res: { text: string }) {\n expect(res.text).toMatch(/Redux DevTools<\\/title>/);\n done();\n });\n });\n });\n\n it('resolves an inexistent url', function () {\n return new Promise((done) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n request('http://localhost:8000/jreerfr/123')\n .get('/')\n .expect('Content-Type', /text\\/html/)\n .expect(200, done);\n });\n });\n });\n\n describe('Realtime monitoring', function () {\n let socket: socketClusterClient.AGClientSocket,\n socket2: socketClusterClient.AGClientSocket,\n channel;\n beforeAll(function () {\n socket = socketClusterClient.create({\n hostname: 'localhost',\n port: 8000,\n });\n socket.connect();\n void (async () => {\n for await (const data of socket.listener('error')) {\n console.error('Socket1 error', data.error); // eslint-disable-line no-console\n }\n })();\n socket2 = socketClusterClient.create({\n hostname: 'localhost',\n port: 8000,\n });\n socket2.connect();\n void (async () => {\n for await (const data of socket2.listener('error')) {\n console.error('Socket2 error', data.error); // eslint-disable-line no-console\n }\n })();\n });\n\n afterAll(function () {\n socket.disconnect();\n socket2.disconnect();\n });\n\n it('should connect', async function () {\n const data = await socket.listener('connect').once();\n expect(data.id).toBeTruthy();\n });\n\n it('should login', async function () {\n try {\n const channelName = (await socket.invoke('login', 'master')) as string;\n expect(channelName).toBe('respond');\n channel = socket.subscribe(channelName);\n expect(channel.SUBSCRIBED).toBe('subscribed');\n } catch (error) {\n console.log(error);\n }\n });\n\n it('should send message', async function () {\n const data = {\n type: 'ACTION',\n payload: {\n todos: 'do some',\n },\n action: {\n timestamp: 1483349708506,\n action: {\n type: 'ADD_TODO',\n text: 'hggg',\n },\n },\n instanceId: 'tAmA7H5fclyWhvizAAAi',\n name: 'LoggerInstance',\n id: 'tAmA7H5fclyWhvizAAAi',\n };\n\n try {\n const channelName = (await socket.invoke('login', '')) as string;\n expect(channelName).toBe('log');\n const channel2 = socket2.subscribe(channelName);\n expect(channel2.SUBSCRIBED).toBe('subscribed');\n const message = await channel2.listener('subscribe').once();\n expect(message).toEqual(data);\n } catch (error) {\n console.log(error);\n }\n });\n });\n\n describe('REST backend', function () {\n let id: string;\n const report = {\n type: 'ACTIONS',\n title: 'Test report',\n description: 'Test body report',\n action: 'SOME_FINAL_ACTION',\n payload: '[{\"type\":\"ADD_TODO\",\"text\":\"hi\"},{\"type\":\"SOME_FINAL_ACTION\"}]',\n preloadedState:\n '{\"todos\":[{\"text\":\"Use Redux\",\"completed\":false,\"id\":0}]}',\n userAgent:\n 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) ' +\n 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36',\n };\n it('should add a report', async function () {\n const res = await request('http://localhost:8000')\n .post('/')\n .send(report)\n .set('Accept', 'application/json')\n .expect('Content-Type', /application\\/json/)\n .expect(200);\n id = res.body.id;\n expect(id).toBeTruthy();\n });\n\n it('should get the report', async function () {\n const res = await request('http://localhost:8000')\n .post('/')\n .send({\n op: 'get',\n id: id,\n })\n .set('Accept', 'application/json')\n .expect('Content-Type', /application\\/json/)\n .expect(200);\n expect(res.body).toMatchObject(report);\n });\n\n it('should list reports', async function () {\n const res = await request('http://localhost:8000')\n .post('/')\n .send({\n op: 'list',\n })\n .set('Accept', 'application/json')\n .expect('Content-Type', /application\\/json/)\n .expect(200);\n expect(res.body).toHaveLength(1);\n expect(res.body[0].id).toBe(id);\n expect(res.body[0].title).toBe('Test report');\n expect(res.body[0].added).toBeTruthy();\n });\n });\n\n describe('GraphQL backend', function () {\n it('should get the report', async function () {\n const res = await request('http://localhost:8000')\n .post('/graphql')\n .send({\n query: '{ reports { id, type, title } }',\n })\n .set('Accept', 'application/json')\n .expect('Content-Type', /application\\/json/)\n .expect(200);\n const reports = res.body.data.reports;\n expect(reports).toHaveLength(1);\n expect(reports[0].id).toBeTruthy();\n expect(reports[0].title).toBe('Test report');\n expect(reports[0].type).toBe('ACTIONS');\n });\n });\n});\n" }, { "path": "packages/redux-devtools-cli/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"module\": \"NodeNext\",\n \"moduleResolution\": \"NodeNext\",\n \"outDir\": \"dist\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-cli/tsconfig.test.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"types\": [\"jest\"]\n },\n \"include\": [\"src\", \"test\"]\n}\n" }, { "path": "packages/redux-devtools-dock-monitor/CHANGELOG.md", "content": "# Change Log\n\n## 5.0.0\n\n### Major Changes\n\n- 12849a4: Convert monitors to ESM\n\n### Patch Changes\n\n- Updated dependencies [804d6bd]\n - @redux-devtools/core@5.0.0\n\n## 4.1.1\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n\n## 4.1.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - react-dock@0.8.0\n - @redux-devtools/core@4.1.0\n\n## 4.0.1\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-dock@0.7.0\n\n## 4.0.0\n\n### Major Changes\n\n- 5cfe3e5: Update min required React version to 16.8.4\n\n### Patch Changes\n\n- Updated dependencies [decc035]\n - @redux-devtools/core@4.0.0\n\n## 3.1.0\n\n### Minor Changes\n\n- 6fc18ed7: Add new Redux version to peer dependencies\n\n### Patch Changes\n\n- 7f5bddbd: Widen peer dependencies\n\n## 3.0.2\n\n### Patch Changes\n\n- 65205f90: Replace Action<unknown> with Action<string>\n- Updated dependencies [65205f90]\n - @redux-devtools/core@3.13.2\n\n## 3.0.1\n\n### Patch Changes\n\n- a55ba302: Fix peer dependencies on @redux-devtools/core\n- Updated dependencies [a55ba302]\n - @redux-devtools/core@3.13.1\n\n## 3.0.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - react-dock@0.6.0\n - @redux-devtools/core@3.13.0\n\n## 2.1.1\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n\n## 2.0.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import DockMonitor from '@redux-devtools/dock-monitor';\n+ import { DockMonitor } from '@redux-devtools/dock-monitor';\n```\n\n## [1.4.0](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/dock-monitor@1.3.0...@redux-devtools/dock-monitor@1.4.0) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## 1.3.0 (2021-03-06)\n\n### Features\n\n- **redux-devtools:** convert counter example to TypeScript ([#616](https://github.com/reduxjs/redux-devtools/issues/616)) ([f1e3f4f](https://github.com/reduxjs/redux-devtools/commit/f1e3f4f8340dea288de5229006acf9dc1ef1cccf))\n- **redux-devtools-dock-monitor:** convert to TypeScript ([#609](https://github.com/reduxjs/redux-devtools/issues/609)) ([b4ec7f8](https://github.com/reduxjs/redux-devtools/commit/b4ec7f86fc165683bd1e8b5ffc3f0690f670642c))\n- **redux-devtools-serialize:** convert to TypeScript ([#621](https://github.com/reduxjs/redux-devtools/issues/621)) ([d586f19](https://github.com/reduxjs/redux-devtools/commit/d586f1955a3648883107f8c981ee17eeb4c013a3))\n\n## [1.2.0](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-dock-monitor@1.1.4...redux-devtools-dock-monitor@1.2.0) (2020-09-07)\n\n### Features\n\n- **redux-devtools:** convert counter example to TypeScript ([#616](https://github.com/reduxjs/redux-devtools/issues/616)) ([f1e3f4f](https://github.com/reduxjs/redux-devtools/commit/f1e3f4f8340dea288de5229006acf9dc1ef1cccf))\n- **redux-devtools-dock-monitor:** convert to TypeScript ([#609](https://github.com/reduxjs/redux-devtools/issues/609)) ([b4ec7f8](https://github.com/reduxjs/redux-devtools/commit/b4ec7f86fc165683bd1e8b5ffc3f0690f670642c))\n- **redux-devtools-serialize:** convert to TypeScript ([#621](https://github.com/reduxjs/redux-devtools/issues/621)) ([d586f19](https://github.com/reduxjs/redux-devtools/commit/d586f1955a3648883107f8c981ee17eeb4c013a3))\n\n## 1.1.4 (2020-08-14)\n\n**Note:** Version bump only for package redux-devtools-dock-monitor\n" }, { "path": "packages/redux-devtools-dock-monitor/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Dan Abramov\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.\n" }, { "path": "packages/redux-devtools-dock-monitor/README.md", "content": "# Redux DevTools Dock Monitor\n\nA resizable and movable dock for [Redux DevTools](https://github.com/reduxjs/redux-devtools). \nPowered by [React Dock](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-dock).\n\n![](http://i.imgur.com/QbNzNW4.gif)\n\n### Installation\n\n```\nyarn add @redux-devtools/dock-monitor\n```\n\n### Usage\n\nWrap any other Redux DevTools monitor in `DockMonitor` to make it dockable to different screen edges.\nFor example, you can use it together with [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor):\n\n##### `containers/DevTools.js`\n\n```js\nimport React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { LogMonitor } from '@redux-devtools/log-monitor';\nimport { SliderMonitor } from '@redux-devtools/slider-monitor';\nimport { DockMonitor } from '@redux-devtools/dock-monitor';\n\nexport default createDevTools(\n <DockMonitor\n toggleVisibilityKey=\"ctrl-h\"\n changePositionKey=\"ctrl-q\"\n changeMonitorKey=\"ctrl-m\"\n >\n <LogMonitor />\n <SliderMonitor />\n </DockMonitor>,\n);\n```\n\n[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)\n\n#### Multiple Monitors\n\nYou can put more than one monitor inside `<DockMonitor>`. There will still be a single dock, but you will be able to switch between different monitors by pressing a key specified as `changeMonitorKey` prop.\n\n### Props\n\n| Name | Description |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `children` | Any valid Redux DevTools monitor. Required. |\n| `toggleVisibilityKey` | A key or a key combination that toggles the dock visibility. Must be recognizable by [parse-key](https://github.com/thlorenz/parse-key) (for example, `'ctrl-h'`). Required. |\n| `changePositionKey` | A key or a key combination that toggles the dock position. Must be recognizable by [parse-key](https://github.com/thlorenz/parse-key) (for example, `'ctrl-w'`). Required. |\n| `changeMonitorKey` | A key or a key combination that switches the currently visible monitor. Must be recognizable by [parse-key](https://github.com/thlorenz/parse-key) (for example, `'ctrl-m'`). Required if you use more than one monitor. |\n| `fluid` | When `true`, the dock size is a fraction of the window size, fixed otherwise. Optional. By default set to `true`. |\n| `defaultSize` | Size of the dock. When `fluid` is `true`, a float (`0.5` means half the window size). When `fluid` is `false`, a width in pixels. Optional. By default set to `0.3` (3/10th of the window size). |\n| `defaultPosition` | Where the dock appears on the screen. Valid values: `'left'`, `'top'`, `'right'`, `'bottom'`. Optional. By default set to `'right'`. |\n| `defaultIsVisible` | Defines whether dock should be open by default. A value of `true` means that it's open when the page/app loads. |\n\nThe current size and the position are persisted between sessions with `persistState()` enhancer from Redux DevTools.\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools-dock-monitor/eslint.config.mjs", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n {\n ignores: ['lib'],\n },\n];\n" }, { "path": "packages/redux-devtools-dock-monitor/package.json", "content": "{\n \"name\": \"@redux-devtools/dock-monitor\",\n \"version\": \"5.0.0\",\n \"description\": \"A resizable and movable dock for Redux DevTools monitors\",\n \"keywords\": [\n \"redux\",\n \"devtools\",\n \"flux\",\n \"react\",\n \"hot reloading\",\n \"time travel\",\n \"live edit\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint\"\n },\n \"dependencies\": {\n \"parse-key\": \"^0.2.1\",\n \"react-dock\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@redux-devtools/core\": \"workspace:^\",\n \"@types/parse-key\": \"^0.2.2\",\n \"@types/react\": \"^19.2.14\",\n \"react\": \"^19.2.4\",\n \"redux\": \"^5.0.1\",\n \"rimraf\": \"^6.1.3\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@redux-devtools/core\": \"workspace:^\",\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"redux\": \"^3.4.0 || ^4.0.0 || ^5.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools-dock-monitor/src/DockMonitor.tsx", "content": "import React, { cloneElement, Children, Component } from 'react';\nimport { Dock } from 'react-dock';\nimport { Action, Dispatch } from 'redux';\nimport { LiftedState, Monitor } from '@redux-devtools/core';\nimport {\n toggleVisibility,\n changeMonitor,\n changePosition,\n changeSize,\n DockMonitorAction,\n} from './actions.js';\nimport reducer, { DockMonitorState } from './reducers.js';\nimport parseKey from 'parse-key';\n\ninterface KeyObject {\n name: string;\n ctrl: boolean;\n meta: boolean;\n shift: boolean;\n alt: boolean;\n sequence: string;\n}\n\ninterface ExternalProps<S, A extends Action<string>> {\n defaultPosition: 'left' | 'top' | 'right' | 'bottom';\n defaultIsVisible: boolean;\n defaultSize: number;\n toggleVisibilityKey: string;\n changePositionKey: string;\n changeMonitorKey?: string;\n fluid: boolean;\n\n dispatch: Dispatch<DockMonitorAction>;\n\n children:\n | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>\n | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>[];\n}\n\ninterface DefaultProps {\n defaultIsVisible: boolean;\n defaultPosition: 'left' | 'top' | 'right' | 'bottom';\n defaultSize: number;\n fluid: boolean;\n}\n\nexport interface DockMonitorProps<\n S,\n A extends Action<string>,\n> extends LiftedState<S, A, DockMonitorState> {\n defaultPosition: 'left' | 'top' | 'right' | 'bottom';\n defaultIsVisible: boolean;\n defaultSize: number;\n toggleVisibilityKey: string;\n changePositionKey: string;\n changeMonitorKey?: string;\n fluid: boolean;\n\n dispatch: Dispatch<DockMonitorAction>;\n\n children:\n | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>\n | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>[];\n}\n\nclass DockMonitor<S, A extends Action<string>> extends Component<\n DockMonitorProps<S, A>\n> {\n static update = reducer;\n\n static defaultProps: DefaultProps = {\n defaultIsVisible: true,\n defaultPosition: 'right',\n defaultSize: 0.3,\n fluid: true,\n };\n\n constructor(props: DockMonitorProps<S, A>) {\n super(props);\n\n const childrenCount = Children.count(props.children);\n if (childrenCount === 0) {\n // eslint-disable-next-line no-console\n console.error(\n '<DockMonitor> requires at least one monitor inside. ' +\n 'Why don’t you try <LogMonitor>? You can get it at ' +\n 'https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor.',\n );\n } else if (childrenCount > 1 && !props.changeMonitorKey) {\n // eslint-disable-next-line no-console\n console.error(\n 'You specified multiple monitors inside <DockMonitor> ' +\n 'but did not provide `changeMonitorKey` prop to change them. ' +\n 'Try specifying <DockMonitor changeMonitorKey=\"ctrl-m\" /> ' +\n 'and then press Ctrl-M.',\n );\n }\n }\n\n componentDidMount() {\n window.addEventListener('keydown', this.handleKeyDown);\n }\n\n componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeyDown);\n }\n\n matchesKey(key: KeyObject | undefined, event: KeyboardEvent) {\n if (!key) {\n return false;\n }\n\n const charCode = event.keyCode || event.which;\n const char = String.fromCharCode(charCode);\n return (\n key.name.toUpperCase() === char.toUpperCase() &&\n key.alt === event.altKey &&\n key.ctrl === event.ctrlKey &&\n key.meta === event.metaKey &&\n key.shift === event.shiftKey\n );\n }\n\n handleKeyDown = (e: KeyboardEvent) => {\n // Ignore regular keys when focused on a field\n // and no modifiers are active.\n if (\n !e.ctrlKey &&\n !e.metaKey &&\n !e.altKey &&\n ((e.target! as { tagName?: string }).tagName === 'INPUT' ||\n (e.target! as { tagName?: string }).tagName === 'SELECT' ||\n (e.target! as { tagName?: string }).tagName === 'TEXTAREA' ||\n (e.target! as { isContentEditable?: boolean }).isContentEditable)\n ) {\n return;\n }\n\n const visibilityKey = parseKey(this.props.toggleVisibilityKey);\n const positionKey = parseKey(this.props.changePositionKey);\n\n let monitorKey;\n if (this.props.changeMonitorKey) {\n monitorKey = parseKey(this.props.changeMonitorKey);\n }\n\n if (this.matchesKey(visibilityKey, e)) {\n e.preventDefault();\n this.props.dispatch(toggleVisibility());\n } else if (this.matchesKey(positionKey, e)) {\n e.preventDefault();\n this.props.dispatch(changePosition());\n } else if (this.matchesKey(monitorKey, e)) {\n e.preventDefault();\n this.props.dispatch(changeMonitor());\n }\n };\n\n handleSizeChange = (requestedSize: number) => {\n this.props.dispatch(changeSize(requestedSize));\n };\n\n renderChild(\n child: Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<string>>,\n index: number,\n otherProps: Omit<\n DockMonitorProps<S, A>,\n 'monitorState' | 'children' | 'fluid'\n >,\n ) {\n const { monitorState } = this.props;\n const { childMonitorIndex, childMonitorStates } = monitorState;\n\n if (index !== childMonitorIndex) {\n return null;\n }\n\n return cloneElement(child, {\n monitorState: childMonitorStates[index],\n ...otherProps,\n });\n }\n\n render() {\n const { monitorState, children, fluid, ...rest } = this.props;\n const { position, isVisible, size } = monitorState;\n\n return (\n <Dock\n position={position}\n isVisible={isVisible}\n size={size}\n fluid={fluid}\n onSizeChange={this.handleSizeChange}\n dimMode=\"none\"\n >\n {Children.map(children, (child, index) =>\n this.renderChild(child, index, rest),\n )}\n </Dock>\n );\n }\n}\n\nexport default DockMonitor as unknown as React.ComponentType<\n ExternalProps<unknown, Action<string>>\n> & {\n update(\n monitorProps: ExternalProps<unknown, Action<string>>,\n state: DockMonitorState | undefined,\n action: DockMonitorAction,\n ): DockMonitorState;\n defaultProps: DefaultProps;\n};\n" }, { "path": "packages/redux-devtools-dock-monitor/src/actions.ts", "content": "export const TOGGLE_VISIBILITY =\n '@@redux-devtools-log-monitor/TOGGLE_VISIBILITY';\ninterface ToggleVisibilityAction {\n type: typeof TOGGLE_VISIBILITY;\n}\nexport function toggleVisibility(): ToggleVisibilityAction {\n return { type: TOGGLE_VISIBILITY };\n}\n\nexport const CHANGE_POSITION = '@@redux-devtools-log-monitor/CHANGE_POSITION';\ninterface ChangePositionAction {\n type: typeof CHANGE_POSITION;\n}\nexport function changePosition(): ChangePositionAction {\n return { type: CHANGE_POSITION };\n}\n\nexport const CHANGE_SIZE = '@@redux-devtools-log-monitor/CHANGE_SIZE';\ninterface ChangeSizeAction {\n type: typeof CHANGE_SIZE;\n size: number;\n}\nexport function changeSize(size: number): ChangeSizeAction {\n return { type: CHANGE_SIZE, size: size };\n}\n\nexport const CHANGE_MONITOR = '@@redux-devtools-log-monitor/CHANGE_MONITOR';\ninterface ChangeMonitorAction {\n type: typeof CHANGE_MONITOR;\n}\nexport function changeMonitor(): ChangeMonitorAction {\n return { type: CHANGE_MONITOR };\n}\n\nexport type DockMonitorAction =\n | ToggleVisibilityAction\n | ChangePositionAction\n | ChangeSizeAction\n | ChangeMonitorAction;\n" }, { "path": "packages/redux-devtools-dock-monitor/src/constants.ts", "content": "export const POSITIONS = ['left', 'top', 'right', 'bottom'] as const;\n" }, { "path": "packages/redux-devtools-dock-monitor/src/index.ts", "content": "export { default as DockMonitor } from './DockMonitor.js';\n" }, { "path": "packages/redux-devtools-dock-monitor/src/reducers.ts", "content": "import { Children } from 'react';\nimport { Action } from 'redux';\nimport {\n CHANGE_MONITOR,\n CHANGE_POSITION,\n CHANGE_SIZE,\n DockMonitorAction,\n TOGGLE_VISIBILITY,\n} from './actions.js';\nimport { POSITIONS } from './constants.js';\nimport { DockMonitorProps } from './DockMonitor.js';\n\nexport interface DockMonitorState {\n position: 'left' | 'top' | 'right' | 'bottom';\n size: number;\n isVisible: boolean;\n childMonitorStates: unknown[];\n childMonitorIndex: number;\n}\n\nfunction position<S, A extends Action<string>>(\n props: DockMonitorProps<S, A>,\n state = props.defaultPosition,\n action: DockMonitorAction,\n) {\n return action.type === CHANGE_POSITION\n ? POSITIONS[(POSITIONS.indexOf(state) + 1) % POSITIONS.length]\n : state;\n}\n\nfunction size<S, A extends Action<string>>(\n props: DockMonitorProps<S, A>,\n state = props.defaultSize,\n action: DockMonitorAction,\n) {\n return action.type === CHANGE_SIZE ? action.size : state;\n}\n\nfunction isVisible<S, A extends Action<string>>(\n props: DockMonitorProps<S, A>,\n state = props.defaultIsVisible,\n action: DockMonitorAction,\n) {\n return action.type === TOGGLE_VISIBILITY ? !state : state;\n}\n\nfunction childMonitorStates<S, A extends Action<string>>(\n props: DockMonitorProps<S, A>,\n state: unknown[] = [],\n action: DockMonitorAction,\n) {\n return Children.map(props.children, (child, index) =>\n child.type.update(child.props, state[index], action),\n );\n}\n\nfunction childMonitorIndex<S, A extends Action<string>>(\n props: DockMonitorProps<S, A>,\n state = 0,\n action: DockMonitorAction,\n) {\n switch (action.type) {\n case CHANGE_MONITOR:\n return (state + 1) % Children.count(props.children);\n default:\n return state;\n }\n}\n\nexport default function reducer<S, A extends Action<string>>(\n props: DockMonitorProps<S, A>,\n state: Partial<DockMonitorState> = {},\n action: DockMonitorAction,\n): DockMonitorState {\n if (!state.childMonitorStates) {\n Children.forEach(props.children, (child, index) => {\n if (typeof child.type.update !== 'function') {\n // eslint-disable-next-line no-console\n console.error(\n `Child of <DockMonitor> with the index ${index} ` +\n `(${\n child.type.displayName ||\n child.type.name ||\n (child.type as unknown as string)\n }) ` +\n 'does not appear to be a valid Redux DevTools monitor.',\n );\n }\n });\n }\n\n return {\n position: position(props, state.position, action),\n isVisible: isVisible(props, state.isVisible, action),\n size: size(props, state.size, action),\n childMonitorIndex: childMonitorIndex(\n props,\n state.childMonitorIndex,\n action,\n ),\n childMonitorStates: childMonitorStates(\n props,\n state.childMonitorStates,\n action,\n ),\n };\n}\n" }, { "path": "packages/redux-devtools-dock-monitor/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-extension/CHANGELOG.md", "content": "# Change Log\n\n## 4.0.0\n\n### Major Changes\n\n- 6481386: Convert remaining packages to ESM\n\n## 3.3.0\n\n### Minor Changes\n\n- a3f86a42: Add Redux 5 to peerDependency range of extension package\n\n## 3.2.6\n\n### Patch Changes\n\n- 65205f90: Replace Action<unknown> with Action<string>\n\n## 3.2.5\n\n### Patch Changes\n\n- a0716740: Fix types for other exports from `@redux-devtools/extension`.\n\n## 3.2.4\n\n### Patch Changes\n\n- 07456db4: Propagate store enhancer generic type when using composeWithDevTools\n\n## 3.2.3\n\n### Patch Changes\n\n- 6cf1865f: Fix type for serialize option\n\n## 3.2.2\n\n### Patch Changes\n\n- 2ec10f0: v3.0.0 had an unintentional breaking change of changing the location of the secondary entrypoints. These secondary exports are now exported from the main entrypoint (https://github.com/reduxjs/redux-devtools/pull/1075) and should be imported like so:\n\n ```diff\n - import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/developmentOnly';\n - import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnly';\n - import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';\n + import {\n + composeWithDevToolsDevelopmentOnly,\n + devToolsEnhancerDevelopmentOnly,\n + composeWithDevToolsLogOnly,\n + devToolsEnhancerLogOnly,\n + composeWithDevToolsLogOnlyInProduction,\n + devToolsEnhancerLogOnlyInProduction,\n + } from '@redux-devtools/extension';\n ```\n\n## 3.2.1\n\n### Patch Changes\n\n- a25551f: Fix files included in publish\n\n## 3.0.0\n\n- **BREAKING** Rename `redux-devtools-extension` package to `@redux-devtools/extension` (https://github.com/reduxjs/redux-devtools/pull/948).\n- **BREAKING** The secondary exports are now exported from the main entrypoint (https://github.com/reduxjs/redux-devtools/pull/1075) (NOTE: this will only work in `@redux-devtools/extension@3.2.2` or later):\n\n```diff\n- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/developmentOnly';\n- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnly';\n- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';\n+ import {\n+ composeWithDevToolsDevelopmentOnly,\n+ devToolsEnhancerDevelopmentOnly,\n+ composeWithDevToolsLogOnly,\n+ devToolsEnhancerLogOnly,\n+ composeWithDevToolsLogOnlyInProduction,\n+ devToolsEnhancerLogOnlyInProduction,\n+ } from '@redux-devtools/extension';\n```\n\n- Deprecate `actionsBlacklist` and `actionsWhitelist` in favor of `actionsDenylist` and `actionsAllowlist` (https://github.com/reduxjs/redux-devtools/pull/851).\n\n## 2.13.9 (2021-03-06)\n\n**Note:** Version bump only for package redux-devtools-extension\n" }, { "path": "packages/redux-devtools-extension/README.md", "content": "# Redux DevTools Extension's helper\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\n## Usage\n\nInstall:\n\n```\nyarn add @redux-devtools/extension\n```\n\nand use like that:\n\n```js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from '@redux-devtools/extension';\n\nconst store = createStore(\n reducer,\n composeWithDevTools(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ),\n);\n```\n\nor if needed to apply [extension’s options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md):\n\n```js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from '@redux-devtools/extension';\n\nconst composeEnhancers = composeWithDevTools({\n // Specify here name, actionsDenylist, actionsCreators and other options\n});\nconst store = createStore(\n reducer,\n composeEnhancers(\n applyMiddleware(...middleware),\n // other store enhancers if any\n ),\n);\n```\n\nThere are just a [few lines of code](https://github.com/reduxjs/redux-devtools/blob/main/packages/redux-devtools-extension/src/index.ts). If you don’t want to allow the extension in production, just use `composeWithDevToolsDevelopmentOnly` instead of `composeWithDevTools`.\n\n## License\n\nMIT\n" }, { "path": "packages/redux-devtools-extension/eslint.config.mjs", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTs from '../../eslint.ts.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n {\n ignores: ['lib'],\n },\n];\n" }, { "path": "packages/redux-devtools-extension/package.json", "content": "{\n \"name\": \"@redux-devtools/extension\",\n \"version\": \"4.0.0\",\n \"description\": \"Wrappers for Redux DevTools Extension.\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-extension\",\n \"license\": \"MIT\",\n \"author\": \"Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": \"./lib/index.js\",\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint\"\n },\n \"devDependencies\": {\n \"redux\": \"^5.0.1\",\n \"rimraf\": \"^6.1.3\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"redux\": \"^3.1.0 || ^4.0.0 || ^5.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools-extension/src/developmentOnly.ts", "content": "import { compose } from 'redux';\nimport type { StoreEnhancer } from 'redux';\nimport type {\n Config,\n EnhancerOptions,\n InferComposedStoreExt,\n ReduxDevtoolsExtensionCompose,\n} from './index.js';\n\ndeclare const process: {\n env: {\n NODE_ENV: string;\n };\n};\n\nfunction extensionComposeStub(\n config: Config,\n): <StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n) => StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nfunction extensionComposeStub<StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n): StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nfunction extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {\n if (funcs.length === 0) return undefined;\n if (typeof funcs[0] === 'object') return compose;\n return compose(...(funcs as StoreEnhancer[]));\n}\n\nexport const composeWithDevTools: ReduxDevtoolsExtensionCompose =\n process.env.NODE_ENV !== 'production' &&\n typeof window !== 'undefined' &&\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n : extensionComposeStub;\n\nexport const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =\n process.env.NODE_ENV !== 'production' &&\n typeof window !== 'undefined' &&\n window.__REDUX_DEVTOOLS_EXTENSION__\n ? window.__REDUX_DEVTOOLS_EXTENSION__\n : function () {\n return function (noop) {\n return noop;\n };\n };\n" }, { "path": "packages/redux-devtools-extension/src/index.ts", "content": "import { compose } from 'redux';\nimport type { Action, ActionCreator, StoreEnhancer } from 'redux';\n\nexport interface EnhancerOptions {\n /**\n * the instance name to be showed on the monitor page. Default value is `document.title`.\n * If not specified and there's no document title, it will consist of `tabId` and `instanceId`.\n */\n name?: string;\n /**\n * action creators functions to be available in the Dispatcher.\n */\n actionCreators?: ActionCreator<any>[] | { [key: string]: ActionCreator<any> };\n /**\n * if more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once.\n * It is the joint between performance and speed. When set to `0`, all actions will be sent instantly.\n * Set it to a higher value when experiencing perf issues (also `maxAge` to a lower value).\n *\n * @default 500 ms.\n */\n latency?: number;\n /**\n * (> 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.\n *\n * @default 50\n */\n maxAge?: number;\n /**\n * Customizes how actions and state are serialized and deserialized. Can be a boolean or object. If given a boolean, the behavior is the same as if you\n * were to pass an object and specify `options` as a boolean. Giving an object allows fine-grained customization using the `replacer` and `reviver`\n * functions.\n */\n serialize?:\n | boolean\n | {\n /**\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, error objects, symbols, maps, sets and functions.\n * - object, which contains `date`, `regex`, `undefined`, `error`, `symbol`, `map`, `set` and `function` keys.\n * For each of them you can indicate if to include (by setting as `true`).\n * For `function` key you can also specify a custom function which handles serialization.\n * See [`jsan`](https://github.com/kolodny/jsan) for more details.\n */\n options?:\n | undefined\n | boolean\n | {\n date?: true;\n regex?: true;\n undefined?: true;\n error?: true;\n symbol?: true;\n map?: true;\n set?: true;\n function?: true | ((fn: (...args: any[]) => any) => string);\n };\n /**\n * [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 * In addition, you can specify a data type by adding a [`__serializedType__`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/helpers/index.js#L4)\n * key. So you can deserialize it back while importing or persisting data.\n * 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 */\n replacer?: (key: string, value: unknown) => any;\n /**\n * [JSON `reviver` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter)\n * used for parsing the imported actions and states. See [`remotedev-serialize`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/immutable/serialize.js#L8-L41)\n * as an example on how to serialize special data types and get them back.\n */\n reviver?: (key: string, value: unknown) => any;\n /**\n * Automatically serialize/deserialize immutablejs via [remotedev-serialize](https://github.com/zalmoxisus/remotedev-serialize).\n * Just pass the Immutable library. It will support all ImmutableJS structures. You can even export them into a file and get them back.\n * The only exception is `Record` class, for which you should pass this in addition the references to your classes in `refs`.\n */\n immutable?: unknown;\n /**\n * ImmutableJS `Record` classes used to make possible restore its instances back when importing, persisting...\n */\n refs?: (new (data: any) => unknown)[];\n };\n /**\n * function which takes `action` object and id number as arguments, and should return `action` object back.\n */\n actionSanitizer?: <A extends Action>(action: A, id: number) => A;\n /**\n * function which takes `state` object and index as arguments, and should return `state` object back.\n */\n stateSanitizer?: <S>(state: S, index: number) => S;\n /**\n * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).\n * If `actionsWhitelist` specified, `actionsBlacklist` is ignored.\n * @deprecated Use actionsDenylist instead.\n */\n actionsBlacklist?: string | string[];\n /**\n * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).\n * If `actionsWhitelist` specified, `actionsBlacklist` is ignored.\n * @deprecated Use actionsAllowlist instead.\n */\n actionsWhitelist?: string | string[];\n /**\n * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).\n * If `actionsAllowlist` specified, `actionsDenylist` is ignored.\n */\n actionsDenylist?: string | string[];\n /**\n * *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).\n * If `actionsAllowlist` specified, `actionsDenylist` is ignored.\n */\n actionsAllowlist?: string | string[];\n /**\n * 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.\n * Use it as a more advanced version of `actionsDenylist`/`actionsAllowlist` parameters.\n */\n predicate?: <S, A extends Action>(state: S, action: A) => boolean;\n /**\n * if specified as `false`, it will not record the changes till clicking on `Start recording` button.\n * Available only for Redux enhancer, for others use `autoPause`.\n *\n * @default true\n */\n shouldRecordChanges?: boolean;\n /**\n * if specified, whenever clicking on `Pause recording` button and there are actions in the history log, will add this action type.\n * If not specified, will commit when paused. Available only for Redux enhancer.\n *\n * @default \"@@PAUSED\"\"\n */\n pauseActionType?: string;\n /**\n * auto pauses when the extension’s window is not opened, and so has zero impact on your app when not in use.\n * Not available for Redux enhancer (as it already does it but storing the data to be sent).\n *\n * @default false\n */\n autoPause?: boolean;\n /**\n * if specified as `true`, it will not allow any non-monitor actions to be dispatched till clicking on `Unlock changes` button.\n * Available only for Redux enhancer.\n *\n * @default false\n */\n shouldStartLocked?: boolean;\n /**\n * if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Available only for Redux enhancer.\n *\n * @default true\n */\n shouldHotReload?: boolean;\n /**\n * 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 * @default false\n */\n shouldCatchErrors?: boolean;\n /**\n * If you want to restrict the extension, specify the features you allow.\n * If not specified, all of the features are enabled. When set as an object, only those included as `true` will be allowed.\n * Note 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.\n * Otherwise, you'll get/set the data right from the monitor part.\n */\n features?: {\n /**\n * start/pause recording of dispatched actions\n */\n pause?: boolean;\n /**\n * lock/unlock dispatching actions and side effects\n */\n lock?: boolean;\n /**\n * persist states on page reloading\n */\n persist?: boolean;\n /**\n * export history of actions in a file\n */\n export?: boolean | 'custom';\n /**\n * import history of actions from a file\n */\n import?: boolean | 'custom';\n /**\n * jump back and forth (time travelling)\n */\n jump?: boolean;\n /**\n * skip (cancel) actions\n */\n skip?: boolean;\n /**\n * drag and drop actions in the history list\n */\n reorder?: boolean;\n /**\n * dispatch custom actions or action creators\n */\n dispatch?: boolean;\n /**\n * generate tests for the selected actions\n */\n test?: boolean;\n };\n /**\n * Set to true or a stacktrace-returning function to record call stack traces for dispatched actions.\n * Defaults to false.\n */\n trace?: boolean | (<A extends Action>(action: A) => string);\n /**\n * The maximum number of stack trace entries to record per action. Defaults to 10.\n */\n traceLimit?: number;\n}\n\nexport interface Config extends EnhancerOptions {\n type?: string;\n}\n\ninterface ConnectResponse {\n init: (state: unknown) => void;\n send: (action: Action<string>, state: unknown) => void;\n}\n\ninterface ReduxDevtoolsExtension {\n (config?: Config): StoreEnhancer;\n connect: (preConfig: Config) => ConnectResponse;\n}\n\nexport type InferComposedStoreExt<StoreEnhancers> = StoreEnhancers extends [\n infer HeadStoreEnhancer,\n ...infer RestStoreEnhancers,\n]\n ? HeadStoreEnhancer extends StoreEnhancer<infer StoreExt>\n ? StoreExt & InferComposedStoreExt<RestStoreEnhancers>\n : never\n : // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n {};\n\nexport interface ReduxDevtoolsExtensionCompose {\n (\n config: Config,\n ): <StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n ) => StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\n <StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n ): StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\n}\n\ndeclare global {\n interface Window {\n __REDUX_DEVTOOLS_EXTENSION__?: ReduxDevtoolsExtension;\n __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: ReduxDevtoolsExtensionCompose;\n }\n}\n\nfunction extensionComposeStub(\n config: Config,\n): <StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n) => StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nfunction extensionComposeStub<StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n): StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nfunction extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {\n if (funcs.length === 0) return undefined;\n if (typeof funcs[0] === 'object') return compose;\n return compose(...(funcs as StoreEnhancer[]));\n}\n\nexport const composeWithDevTools: ReduxDevtoolsExtensionCompose =\n typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n : extensionComposeStub;\n\nexport const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =\n typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__\n ? window.__REDUX_DEVTOOLS_EXTENSION__\n : function () {\n return function (noop) {\n return noop;\n };\n };\n\nexport {\n composeWithDevTools as composeWithDevToolsDevelopmentOnly,\n devToolsEnhancer as devToolsEnhancerDevelopmentOnly,\n} from './developmentOnly.js';\nexport {\n composeWithDevTools as composeWithDevToolsLogOnly,\n devToolsEnhancer as devToolsEnhancerLogOnly,\n} from './logOnly.js';\nexport {\n composeWithDevTools as composeWithDevToolsLogOnlyInProduction,\n devToolsEnhancer as devToolsEnhancerLogOnlyInProduction,\n} from './logOnlyInProduction.js';\n" }, { "path": "packages/redux-devtools-extension/src/logOnly.ts", "content": "import { compose } from 'redux';\nimport type { Action, Dispatch, Reducer, StoreEnhancer } from 'redux';\nimport type {\n Config,\n EnhancerOptions,\n InferComposedStoreExt,\n} from './index.js';\n\nfunction enhancer(options?: EnhancerOptions): StoreEnhancer {\n const config: Config = options || {};\n config.features = { pause: true, export: true, test: true };\n config.type = 'redux';\n if (config.autoPause === undefined) config.autoPause = true;\n if (config.latency === undefined) config.latency = 500;\n\n return function (createStore) {\n return function <S, A extends Action<string>, PreloadedState>(\n reducer: Reducer<S, A, PreloadedState>,\n preloadedState?: PreloadedState | undefined,\n ) {\n const store = createStore(reducer, preloadedState);\n const origDispatch = store.dispatch;\n\n const devTools = window.__REDUX_DEVTOOLS_EXTENSION__!.connect(config);\n devTools.init(store.getState());\n\n const dispatch: Dispatch<A> = function (action) {\n const r = origDispatch(action);\n devTools.send(action, store.getState());\n return r;\n };\n\n return Object.assign(store, { dispatch: dispatch });\n };\n };\n}\n\nfunction composeWithEnhancer(config?: EnhancerOptions) {\n return function (...funcs: StoreEnhancer[]) {\n return compose(compose(...funcs), enhancer(config));\n };\n}\n\nexport function composeWithDevTools(\n config: Config,\n): <StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n) => StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nexport function composeWithDevTools<\n StoreEnhancers extends readonly StoreEnhancer[],\n>(\n ...funcs: StoreEnhancers\n): StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nexport function composeWithDevTools(...funcs: [Config] | StoreEnhancer[]) {\n if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {\n if (funcs.length === 0) return enhancer();\n if (typeof funcs[0] === 'object') return composeWithEnhancer(funcs[0]);\n return composeWithEnhancer()(...(funcs as StoreEnhancer[]));\n }\n\n if (funcs.length === 0) return undefined;\n if (typeof funcs[0] === 'object') return compose;\n return compose(...(funcs as StoreEnhancer[]));\n}\n\nexport const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =\n typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__\n ? enhancer\n : function () {\n return function (noop) {\n return noop;\n };\n };\n" }, { "path": "packages/redux-devtools-extension/src/logOnlyInProduction.ts", "content": "import { compose } from 'redux';\nimport type { StoreEnhancer } from 'redux';\nimport * as logOnly from './logOnly.js';\nimport type {\n Config,\n EnhancerOptions,\n InferComposedStoreExt,\n ReduxDevtoolsExtensionCompose,\n} from './index.js';\n\ndeclare const process: {\n env: {\n NODE_ENV: string;\n };\n};\n\nfunction extensionComposeStub(\n config: Config,\n): <StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n) => StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nfunction extensionComposeStub<StoreEnhancers extends readonly StoreEnhancer[]>(\n ...funcs: StoreEnhancers\n): StoreEnhancer<InferComposedStoreExt<StoreEnhancers>>;\nfunction extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {\n if (funcs.length === 0) return undefined;\n if (typeof funcs[0] === 'object') return compose;\n return compose(...(funcs as StoreEnhancer[]));\n}\n\nexport const composeWithDevTools: ReduxDevtoolsExtensionCompose =\n process.env.NODE_ENV === 'production'\n ? logOnly.composeWithDevTools\n : typeof window !== 'undefined' &&\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n : extensionComposeStub;\n\nexport const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =\n process.env.NODE_ENV === 'production'\n ? logOnly.devToolsEnhancer\n : typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__\n ? window.__REDUX_DEVTOOLS_EXTENSION__\n : function () {\n return function (noop) {\n return noop;\n };\n };\n" }, { "path": "packages/redux-devtools-extension/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\"\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/CHANGELOG.md", "content": "# Change Log\n\n## 7.0.0\n\n### Major Changes\n\n- 12849a4: Convert monitors to ESM\n\n### Patch Changes\n\n- Updated dependencies [804d6bd]\n - @redux-devtools/core@5.0.0\n\n## 6.1.2\n\n### Patch Changes\n\n- 20883e5: fix(deps): update all non-major dependencies\n\n## 6.1.1\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n\n## 6.1.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - react-json-tree@0.20.0\n - @redux-devtools/core@4.1.0\n\n## 6.0.1\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-base16-styling@0.10.0\n - react-json-tree@0.19.0\n\n## 6.0.0\n\n### Major Changes\n\n- 5cfe3e5: Update min required React version to 16.8.4\n\n### Patch Changes\n\n- Updated dependencies [decc035]\n - @redux-devtools/core@4.0.0\n\n## 5.0.1\n\n### Patch Changes\n\n- 3205269: Add explicit return types\n\n## 5.0.0\n\n### Major Changes\n\n- 158ba2c: Replace jss with Emotion in inspector-monitor. `@emotion/react` is now a required peer dependency.\n\n## 4.1.0\n\n### Minor Changes\n\n- 6fc18ed7: Add new Redux version to peer dependencies\n\n### Patch Changes\n\n- 7f5bddbd: Widen peer dependencies\n\n## 4.0.1\n\n### Patch Changes\n\n- 65205f90: Replace Action<unknown> with Action<string>\n- Updated dependencies [65205f90]\n - @redux-devtools/core@3.13.2\n\n## 4.0.0\n\n### Major Changes\n\n- 57751ff9: Add react-dom peerDependency and bump react peerDependency to `^16.8.0 || ^17.0.0 || ^18.0.0`\n\n## 3.1.1\n\n### Patch Changes\n\n- fe32709c: Update jsondiffpatch to fix bundling issues.\n\n## 3.1.0\n\n### Minor Changes\n\n- d54adb76: Option to sort State Tree keys alphabetically\n Option to disable collapsing of object keys\n\n### Patch Changes\n\n- 14a79573: Replace react-dragula with dnd-kit\n- bb9bd907: Move @types/redux-devtools-themes to dependencies\n\n## 3.0.2\n\n### Patch Changes\n\n- Updated dependencies [81926f32]\n - react-json-tree@0.18.0\n\n## 3.0.1\n\n### Patch Changes\n\n- a55ba302: Fix peer dependencies on @redux-devtools/core\n- Updated dependencies [a55ba302]\n - @redux-devtools/core@3.13.1\n\n## 3.0.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - react-json-tree@0.17.0\n - @redux-devtools/core@3.13.0\n\n## 2.1.2\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n\n## 2.1.1\n\n### Patch Changes\n\n- 55cc37e: Fix filter to show state-controlled search value\n\n## 2.0.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import Inspector from '@redux-devtools/inspector-monitor';\n+ import { InspectorMonitor } from '@redux-devtools/inspector-monitor';\n```\n\n## [1.0.0](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/inspector-monitor@0.15.0...@redux-devtools/inspector-monitor@1.0.0) (2021-06-11)\n\n### Bug Fixes\n\n- **inspector:** fix z-index of tabs ([#723](https://github.com/reduxjs/redux-devtools/issues/723)) ([e747783](https://github.com/reduxjs/redux-devtools/commit/e7477833f05ab0ff8f947a48d97eb3ed87ccb70b))\n- **inspector:** move immutable back to dependencies ([#725](https://github.com/reduxjs/redux-devtools/issues/725)) ([fcd73ab](https://github.com/reduxjs/redux-devtools/commit/fcd73ab043062bd3c191fd814f3d912bea6fc675))\n\n## [0.15.0](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/inspector-monitor@0.14.1...@redux-devtools/inspector-monitor@0.15.0) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## 0.14.1 (2021-03-06)\n\n**Note:** Version bump only for package @redux-devtools/inspector-monitor\n\n## [0.14.0](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-inspector@0.13.1...redux-devtools-inspector@0.14.0) (2020-09-07)\n\n### Features\n\n- **redux-devtools-inspector:** convert to TypeScript ([#623](https://github.com/reduxjs/redux-devtools/issues/623)) ([c7b0c7a](https://github.com/reduxjs/redux-devtools/commit/c7b0c7aa6e09f46a36b382ae3ec8e38bd48aeb28))\n\n## [0.13.1](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-inspector@0.13.0...redux-devtools-inspector@0.13.1) (2020-08-14)\n\n**Note:** Version bump only for package redux-devtools-inspector\n" }, { "path": "packages/redux-devtools-inspector-monitor/LICENSE.md", "content": "MIT License\n\nCopyright (c) 2015 Alexander Kuznetsov\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.\n" }, { "path": "packages/redux-devtools-inspector-monitor/README.md", "content": "# redux-devtools-inspector-monitor\n\n[![npm version](https://badge.fury.io/js/redux-devtools-inspector.svg)](https://badge.fury.io/js/redux-devtools-inspector)\n\nA state monitor for [Redux DevTools](https://github.com/reduxjs/redux-devtools) that provides a convenient way to inspect \"real world\" app states that could be complicated and deeply nested. Created by [@alexkuz](https://github.com/alexkuz) and merged from [`alexkuz/redux-devtools-inspector`](https://github.com/alexkuz/redux-devtools-inspector) into [`reduxjs/redux-devtools` monorepo](https://github.com/reduxjs/redux-devtools).\n\n![](https://raw.githubusercontent.com/alexkuz/redux-devtools-inspector/master/demo.gif)\n\n### Installation\n\n```\nyarn add @redux-devtools/inspector-monitor\n```\n\n### Usage\n\nYou can use `Inspector` as the only monitor in your app:\n\n##### `containers/DevTools.js`\n\n```js\nimport React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { InspectorMonitor } from '@redux-devtools/inspector-monitor';\n\nexport default createDevTools(<InspectorMonitor />);\n```\n\nThen you can render `<DevTools>` to any place inside app or even into a separate popup window.\n\nAlternative, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable. \nConsult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.\n\n[Read how to start using Redux DevTools.](https://github.com/gaearon/redux-devtools)\n\n### Features\n\nThe inspector displays a list of actions and a preview panel which shows the state after the selected action and a diff with the previous state. If no actions are selected, the last state is shown.\n\nYou may pin a certain part of the state to only track its changes.\n\n### Props\n\n| Name | Type | Description |\n| -------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `theme` | Object or string | Contains either [base16](https://github.com/chriskempson/base16) theme name or object, that can be `base16` colors map or object containing classnames or styles. |\n| `invertTheme` | Boolean | Inverts theme color luminance, making light theme out of dark theme and vice versa. |\n| `supportImmutable` | Boolean | Better `Immutable` rendering in `Diff` (can affect performance if state has huge objects/arrays). `false` by default. |\n| `tabs` | Array or function | Overrides list of tabs (see below) |\n| `diffObjectHash` | Function | Optional callback for better array handling in diffs (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch/blob/master/docs/arrays.md)) |\n| `diffPropertyFilter` | Function | Optional callback for ignoring particular props in diff (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch#options)) |\n\nIf `tabs` is a function, it receives a list of default tabs and should return updated list, for example:\n\n```\ndefaultTabs => [...defaultTabs, { name: 'My Tab', component: MyTab }]\n```\n\nIf `tabs` is an array, only provided tabs are rendered.\n\n`component` is provided with `action` and other props, see [`ActionPreview.jsx`](src/ActionPreview.jsx#L42) for reference.\n\nUsage example: [`redux-devtools-inspector-monitor-test-tab`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor-test-tab#containersdevtoolsjs).\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/CHANGELOG.md", "content": "# inspector-demo\n\n## 0.1.14\n\n### Patch Changes\n\n- Updated dependencies [12849a4]\n- Updated dependencies [804d6bd]\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/inspector-monitor@7.0.0\n - @redux-devtools/core@5.0.0\n\n## 0.1.13\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n - @redux-devtools/dock-monitor@4.1.1\n - @redux-devtools/inspector-monitor@6.1.1\n\n## 0.1.12\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/inspector-monitor@7.0.0\n - @redux-devtools/core@4.1.0\n\n## 0.1.11\n\n### Patch Changes\n\n- Updated dependencies [bbb1a40]\n - react-base16-styling@0.10.0\n - @redux-devtools/inspector-monitor@6.0.1\n - @redux-devtools/dock-monitor@4.0.1\n\n## 0.1.10\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n- Updated dependencies [decc035]\n - @redux-devtools/dock-monitor@4.0.0\n - @redux-devtools/inspector-monitor@6.0.0\n - @redux-devtools/core@4.0.0\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies [158ba2c]\n - @redux-devtools/inspector-monitor@5.0.0\n\n## 0.1.8\n\n### Patch Changes\n\n- Updated dependencies [57751ff9]\n - @redux-devtools/inspector-monitor@4.0.0\n\n## 0.1.7\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - @redux-devtools/dock-monitor@3.0.0\n - @redux-devtools/inspector-monitor@3.0.0\n - @redux-devtools/core@3.13.0\n\n## 0.1.6\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n - @redux-devtools/dock-monitor@2.1.1\n - @redux-devtools/inspector-monitor@2.1.2\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/eslint.config.mjs", "content": "import eslintJs from '../../../eslint.js.config.base.mjs';\nimport eslintTs from '../../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTs(\n import.meta.dirname,\n ['webpack.config.ts'],\n ['./tsconfig.webpack.json'],\n ),\n {\n ignores: ['dist'],\n },\n];\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/index.html", "content": "<!doctype html>\n<html>\n <head>\n <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\" />\n <title><%= htmlWebpackPlugin.options.package.name %>\n \"\n />\n \n \n \n \n \"\n >\n
    \n \n\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/package.json", "content": "{\n \"private\": true,\n \"name\": \"inspector-demo\",\n \"version\": \"0.1.14\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack serve --open\",\n \"build\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@redux-devtools/core\": \"workspace:^\",\n \"@redux-devtools/dock-monitor\": \"workspace:^\",\n \"@redux-devtools/inspector-monitor\": \"workspace:^\",\n \"immutable\": \"^5.1.5\",\n \"lodash.shuffle\": \"^4.2.0\",\n \"react\": \"^19.2.4\",\n \"react-base16-styling\": \"workspace:^\",\n \"react-bootstrap\": \"^2.10.10\",\n \"react-dom\": \"^19.2.4\",\n \"react-redux\": \"^9.2.0\",\n \"react-router-dom\": \"^7.13.1\",\n \"redux\": \"^5.0.1\",\n \"redux-logger\": \"^3.0.6\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.29.0\",\n \"@babel/preset-env\": \"^7.29.0\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@types/lodash.shuffle\": \"^4.2.9\",\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@types/redux-logger\": \"^3.0.13\",\n \"@types/webpack-env\": \"^1.18.8\",\n \"babel-loader\": \"^10.1.1\",\n \"cross-env\": \"^10.1.0\",\n \"fork-ts-checker-webpack-plugin\": \"^9.1.0\",\n \"html-webpack-plugin\": \"^5.6.6\",\n \"ts-node\": \"^10.9.2\",\n \"typescript\": \"~5.9.3\",\n \"webpack\": \"^5.105.4\",\n \"webpack-cli\": \"^7.0.0\",\n \"webpack-dev-server\": \"^5.2.3\"\n }\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx", "content": "import React, { CSSProperties, useRef } from 'react';\nimport { connect } from 'react-redux';\nimport pkg from '@redux-devtools/inspector-monitor/package.json';\nimport Button from 'react-bootstrap/Button';\nimport FormGroup from 'react-bootstrap/FormGroup';\nimport FormControl from 'react-bootstrap/FormControl';\nimport FormLabel from 'react-bootstrap/FormLabel';\nimport Form from 'react-bootstrap/Form';\nimport Col from 'react-bootstrap/Col';\nimport InputGroup from 'react-bootstrap/InputGroup';\nimport Row from 'react-bootstrap/Row';\nimport { base16Themes } from 'react-base16-styling';\nimport { inspectorThemes } from '@redux-devtools/inspector-monitor';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport getOptions, { Options } from './getOptions';\nimport {\n AddFunctionAction,\n AddHugeObjectAction,\n AddImmutableMapAction,\n AddIteratorAction,\n AddNativeMapAction,\n AddRecursiveAction,\n AddSymbolAction,\n ChangeImmutableNestedAction,\n ChangeNestedAction,\n DemoAppState,\n HugePayloadAction,\n IncrementAction,\n PopAction,\n PushAction,\n PushHugeArrayAction,\n ReplaceAction,\n ShuffleArrayAction,\n TimeoutUpdateAction,\n ToggleTimeoutUpdateAction,\n} from './reducers';\n\nconst styles: {\n wrapper: CSSProperties;\n header: CSSProperties;\n content: CSSProperties;\n buttons: CSSProperties;\n muted: CSSProperties;\n button: CSSProperties;\n links: CSSProperties;\n link: CSSProperties;\n input: CSSProperties;\n} = {\n wrapper: {\n height: '100vh',\n width: '80%',\n margin: '0 auto',\n paddingTop: '1px',\n },\n header: {},\n content: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '50%',\n },\n buttons: {\n display: 'flex',\n width: '40rem',\n justifyContent: 'center',\n flexWrap: 'wrap',\n },\n muted: {\n color: '#CCCCCC',\n },\n button: {\n margin: '0.5rem',\n },\n links: {\n textAlign: 'center',\n },\n link: {\n margin: '0 0.5rem',\n cursor: 'pointer',\n display: 'block',\n },\n input: {\n display: 'inline-block',\n textAlign: 'left',\n width: '30rem',\n },\n};\n\nconst themeOptions = [\n ...Object.keys(inspectorThemes).map((value) => ({\n value,\n label: inspectorThemes[value as keyof typeof inspectorThemes].scheme,\n })),\n null,\n ...Object.keys(base16Themes)\n .map((value) => ({\n value,\n label: base16Themes[value as keyof typeof base16Themes].scheme,\n }))\n .filter((opt) => opt.label),\n];\n\nconst ROOT =\n process.env.NODE_ENV === 'production'\n ? '/redux-devtools-inspector-monitor/'\n : '/';\n\nfunction buildUrl(options: Options) {\n return (\n `${ROOT}?` +\n [\n options.useExtension ? 'ext' : '',\n options.supportImmutable ? 'immutable' : '',\n options.theme ? 'theme=' + options.theme : '',\n options.dark ? 'dark' : '',\n ]\n .filter((s) => s)\n .join('&')\n );\n}\n\ninterface Props extends Omit<\n DemoAppState,\n 'addFunction' | 'addSymbol' | 'shuffleArray'\n> {\n toggleTimeoutUpdate: (timeoutUpdateEnabled: boolean) => void;\n timeoutUpdate: () => void;\n increment: () => void;\n push: () => void;\n pop: () => void;\n replace: () => void;\n changeNested: () => void;\n pushHugeArray: () => void;\n addIterator: () => void;\n addHugeObject: () => void;\n addRecursive: () => void;\n addNativeMap: () => void;\n addImmutableMap: () => void;\n changeImmutableNested: () => void;\n hugePayload: () => void;\n addFunction: () => void;\n addSymbol: () => void;\n shuffleArray: () => void;\n}\n\nfunction DemoApp(props: Props) {\n const timeout = useRef(undefined);\n const location = useLocation();\n const navigate = useNavigate();\n\n const toggleExtension = () => {\n const options = getOptions(location);\n\n window.location.href = buildUrl({\n ...options,\n useExtension: !options.useExtension,\n });\n };\n\n const toggleImmutableSupport = async () => {\n const options = getOptions(location);\n\n await navigate(\n buildUrl({ ...options, supportImmutable: !options.supportImmutable }),\n );\n };\n\n const toggleTheme = async () => {\n const options = getOptions(location);\n\n await navigate(buildUrl({ ...options, dark: !options.dark }));\n };\n\n const setTheme = async (options: Options, theme: string) => {\n await navigate(buildUrl({ ...options, theme }));\n };\n\n const toggleTimeoutUpdate = () => {\n const enabled = !props.timeoutUpdateEnabled;\n props.toggleTimeoutUpdate(enabled);\n\n if (enabled) {\n timeout.current = window.setInterval(props.timeoutUpdate, 1000);\n } else {\n clearTimeout(timeout.current);\n }\n };\n\n const options = getOptions(location);\n\n return (\n
    \n

    \n {pkg.name || Package Name}\n

    \n
    \n {pkg.description || (\n Package Description\n )}\n
    \n
    \n
    \n
    \n \n \n Theme:\n \n \n \n \n setTheme(options, event.currentTarget.value)\n }\n >\n {themeOptions.map((theme) => (\n \n ))}\n \n \n {options.dark ? 'Light theme' : 'Dark theme'}\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\nexport default connect((state: DemoAppState) => state, {\n toggleTimeoutUpdate: (\n timeoutUpdateEnabled: boolean,\n ): ToggleTimeoutUpdateAction => ({\n type: 'TOGGLE_TIMEOUT_UPDATE',\n timeoutUpdateEnabled,\n }),\n timeoutUpdate: (): TimeoutUpdateAction => ({ type: 'TIMEOUT_UPDATE' }),\n increment: (): IncrementAction => ({ type: 'INCREMENT' }),\n push: (): PushAction => ({ type: 'PUSH' }),\n pop: (): PopAction => ({ type: 'POP' }),\n replace: (): ReplaceAction => ({ type: 'REPLACE' }),\n changeNested: (): ChangeNestedAction => ({ type: 'CHANGE_NESTED' }),\n pushHugeArray: (): PushHugeArrayAction => ({ type: 'PUSH_HUGE_ARRAY' }),\n addIterator: (): AddIteratorAction => ({ type: 'ADD_ITERATOR' }),\n addHugeObject: (): AddHugeObjectAction => ({ type: 'ADD_HUGE_OBJECT' }),\n addRecursive: (): AddRecursiveAction => ({ type: 'ADD_RECURSIVE' }),\n addNativeMap: (): AddNativeMapAction => ({ type: 'ADD_NATIVE_MAP' }),\n addImmutableMap: (): AddImmutableMapAction => ({ type: 'ADD_IMMUTABLE_MAP' }),\n changeImmutableNested: (): ChangeImmutableNestedAction => ({\n type: 'CHANGE_IMMUTABLE_NESTED',\n }),\n hugePayload: (): HugePayloadAction => ({\n type: 'HUGE_PAYLOAD',\n payload: Array.from({ length: 10000 }).map((_, i) => i),\n }),\n addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),\n addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),\n shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),\n})(DemoApp);\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx", "content": "import React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { DockMonitor } from '@redux-devtools/dock-monitor';\nimport { InspectorMonitor } from '@redux-devtools/inspector-monitor';\nimport type { Base16ThemeName } from '@redux-devtools/inspector-monitor';\nimport { useLocation } from 'react-router-dom';\nimport getOptions from './getOptions';\n\nconst CustomComponent = () => (\n \n
    Custom Tab Content
    \n
    \n);\n\nexport const getDevTools = (location: { search: string }) =>\n createDevTools(\n \n [\n {\n name: 'Custom Tab',\n component: CustomComponent,\n },\n ...defaultTabs,\n ]}\n />\n ,\n );\n\nexport function ConnectedDevTools() {\n const location = useLocation();\n const DevTools = getDevTools(location);\n // eslint-disable-next-line react-hooks/static-components\n return ;\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts", "content": "export interface Options {\n useExtension: boolean;\n supportImmutable: boolean;\n theme: string;\n dark: boolean;\n}\n\nexport default function getOptions(location: { search: string }) {\n return {\n useExtension: location.search.includes('ext'),\n supportImmutable: location.search.includes('immutable'),\n theme: getTheme(location),\n dark: location.search.includes('dark'),\n };\n}\n\nfunction getTheme(location: { search: string }) {\n const match = /theme=([^&]+)/.exec(location.search);\n return match ? match[1] : 'inspector';\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/src/index.tsx", "content": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Provider } from 'react-redux';\nimport {\n createStore,\n applyMiddleware,\n compose,\n StoreEnhancerStoreCreator,\n StoreEnhancer,\n} from 'redux';\nimport logger from 'redux-logger';\nimport { BrowserRouter, Route, Routes } from 'react-router-dom';\nimport { persistState } from '@redux-devtools/core';\nimport DemoApp from './DemoApp';\nimport { rootReducer } from './reducers';\nimport getOptions from './getOptions';\nimport { ConnectedDevTools, getDevTools } from './DevTools';\n\nfunction getDebugSessionKey() {\n const matches = /[?&]debug_session=([^&#]+)\\b/.exec(window.location.href);\n return matches && matches.length > 0 ? matches[1] : null;\n}\n\nconst ROOT =\n process.env.NODE_ENV === 'production'\n ? '/redux-devtools-inspector-monitor/'\n : '/';\n\nconst DevTools = getDevTools(window.location);\n\nconst useDevtoolsExtension =\n !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown })\n .__REDUX_DEVTOOLS_EXTENSION__ && getOptions(window.location).useExtension;\n\nconst enhancer: StoreEnhancer = compose(\n applyMiddleware(logger),\n (next: StoreEnhancerStoreCreator) => {\n const instrument = useDevtoolsExtension\n ? (\n window as unknown as {\n __REDUX_DEVTOOLS_EXTENSION__(): StoreEnhancer;\n }\n ).__REDUX_DEVTOOLS_EXTENSION__()\n : DevTools.instrument();\n return instrument(next);\n },\n persistState(getDebugSessionKey()),\n) as any;\n\nconst store = createStore(rootReducer, enhancer);\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render(\n \n \n \n } />\n \n {!useDevtoolsExtension && }\n \n ,\n);\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/src/reducers.ts", "content": "import {\n fromJS,\n Map as ImmutableMap,\n List,\n Set as ImmutableSet,\n Stack,\n Seq,\n} from 'immutable';\nimport shuffle from 'lodash.shuffle';\nimport { combineReducers, Reducer } from 'redux';\n\ntype Nested = { long: { nested: { path: { to: { a: string } } }[] } };\n\nconst NESTED = {\n long: {\n nested: [\n {\n path: {\n to: {\n a: 'key',\n },\n },\n },\n ],\n },\n};\n\nconst IMMUTABLE_NESTED = fromJS(NESTED) as ImmutableMap;\n\nconst IMMUTABLE_MAP = ImmutableMap({\n map: ImmutableMap({ a: 1, b: 2, c: 3 }),\n list: List(['a', 'b', 'c']),\n set: ImmutableSet(['a', 'b', 'c']),\n stack: Stack(['a', 'b', 'c']),\n seq: Seq([1, 2, 3, 4, 5, 6, 7, 8]),\n});\n\ntype MapValue =\n | Map<{ first: boolean } | string, number>\n | WeakMap<{ first: boolean } | { second: number }, number>\n | Set<{ first: boolean } | string>\n | WeakSet<{ first: boolean } | { second: number }>;\n\nconst NATIVE_MAP = new window.Map([\n [\n 'map',\n new window.Map<{ first: boolean } | string, number>([\n [{ first: true }, 1],\n ['second', 2],\n ]),\n ],\n [\n 'weakMap',\n new window.WeakMap<{ first: boolean } | { second: number }, number>([\n [{ first: true }, 1],\n [{ second: 1 }, 2],\n ]),\n ],\n ['set', new window.Set([{ first: true }, 'second'])],\n ['weakSet', new window.WeakSet([{ first: true }, { second: 1 }])],\n]);\n\nconst HUGE_ARRAY = Array.from({ length: 5000 }).map((_, key) => ({\n str: `key ${key}`,\n}));\n\nconst HUGE_OBJECT = Array.from({ length: 5000 }).reduce(\n (o: { [key: string]: string }, _, key) => (\n (o[`key ${key}`] = `item ${key}`),\n o\n ),\n {},\n);\n\nconst FUNC = function (a: number, b: number, c: number) {\n return a + b + c;\n};\n\nconst RECURSIVE: { obj?: unknown } = {};\nRECURSIVE.obj = RECURSIVE;\n\nfunction createIterator() {\n const iterable: { [Symbol.iterator](): IterableIterator } = {\n [Symbol.iterator]: function* iterator() {\n for (let i = 0; i < 333; i++) {\n yield `item ${i}`;\n }\n },\n };\n\n return iterable;\n}\n\nconst DEFAULT_SHUFFLE_ARRAY = [0, 1, null, { id: 1 }, { id: 2 }, 'string'];\n\nexport interface ToggleTimeoutUpdateAction {\n type: 'TOGGLE_TIMEOUT_UPDATE';\n timeoutUpdateEnabled: boolean;\n}\nexport interface TimeoutUpdateAction {\n type: 'TIMEOUT_UPDATE';\n}\nexport interface IncrementAction {\n type: 'INCREMENT';\n}\nexport interface PushAction {\n type: 'PUSH';\n}\nexport interface PopAction {\n type: 'POP';\n}\nexport interface ReplaceAction {\n type: 'REPLACE';\n}\nexport interface ChangeNestedAction {\n type: 'CHANGE_NESTED';\n}\nexport interface PushHugeArrayAction {\n type: 'PUSH_HUGE_ARRAY';\n}\nexport interface AddIteratorAction {\n type: 'ADD_ITERATOR';\n}\nexport interface AddHugeObjectAction {\n type: 'ADD_HUGE_OBJECT';\n}\nexport interface AddRecursiveAction {\n type: 'ADD_RECURSIVE';\n}\nexport interface AddNativeMapAction {\n type: 'ADD_NATIVE_MAP';\n}\nexport interface AddImmutableMapAction {\n type: 'ADD_IMMUTABLE_MAP';\n}\nexport interface ChangeImmutableNestedAction {\n type: 'CHANGE_IMMUTABLE_NESTED';\n}\nexport interface HugePayloadAction {\n type: 'HUGE_PAYLOAD';\n payload: number[];\n}\nexport interface AddFunctionAction {\n type: 'ADD_FUNCTION';\n}\nexport interface AddSymbolAction {\n type: 'ADD_SYMBOL';\n}\nexport interface ShuffleArrayAction {\n type: 'SHUFFLE_ARRAY';\n}\ntype DemoAppAction =\n | ToggleTimeoutUpdateAction\n | TimeoutUpdateAction\n | IncrementAction\n | PushAction\n | PopAction\n | ReplaceAction\n | ChangeNestedAction\n | PushHugeArrayAction\n | AddIteratorAction\n | AddHugeObjectAction\n | AddRecursiveAction\n | AddNativeMapAction\n | AddImmutableMapAction\n | ChangeImmutableNestedAction\n | HugePayloadAction\n | AddFunctionAction\n | AddSymbolAction\n | ShuffleArrayAction;\n\nexport interface DemoAppState {\n timeoutUpdateEnabled: boolean;\n store: number;\n undefined: { val: undefined };\n null: null;\n func: () => void;\n array: number[];\n hugeArrays: { str: string }[];\n hugeObjects: { [key: string]: string }[];\n iterators: { [Symbol.iterator](): IterableIterator }[];\n nested: Nested;\n recursive: { obj?: unknown }[];\n immutables: Immutable.Map[];\n maps: Map[];\n immutableNested: Immutable.Map;\n addFunction: { f: (a: number, b: number, c: number) => number } | null;\n addSymbol: { s: symbol; error: Error } | null;\n shuffleArray: unknown[];\n}\n\nexport const rootReducer: Reducer =\n combineReducers({\n timeoutUpdateEnabled: (state = false, action: DemoAppAction) =>\n action.type === 'TOGGLE_TIMEOUT_UPDATE'\n ? action.timeoutUpdateEnabled\n : state,\n store: (state = 0, action: DemoAppAction) =>\n action.type === 'INCREMENT' ? state + 1 : state,\n undefined: (state = { val: undefined }) => state,\n null: (state = null) => state,\n func: (\n state = () => {\n // noop\n },\n ) => state,\n array: (state = [], action: DemoAppAction) =>\n action.type === 'PUSH'\n ? [...state, Math.random()]\n : action.type === 'POP'\n ? state.slice(0, state.length - 1)\n : action.type === 'REPLACE'\n ? [Math.random(), ...state.slice(1)]\n : state,\n hugeArrays: (state = [], action: DemoAppAction) =>\n action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,\n hugeObjects: (state = [], action: DemoAppAction) =>\n action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,\n iterators: (state = [], action: DemoAppAction) =>\n action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,\n nested: (state = NESTED, action: DemoAppAction) =>\n action.type === 'CHANGE_NESTED'\n ? {\n ...state,\n long: {\n nested: [\n {\n path: {\n to: {\n a: state.long.nested[0].path.to.a + '!',\n },\n },\n },\n ],\n },\n }\n : state,\n recursive: (state: { obj?: unknown }[] = [], action: DemoAppAction) =>\n action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,\n immutables: (\n state: Immutable.Map[] = [],\n action: DemoAppAction,\n ) =>\n action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,\n maps: (state: Map[] = [], action: DemoAppAction) =>\n action.type === 'ADD_NATIVE_MAP' ? [...state, NATIVE_MAP] : state,\n immutableNested: (state = IMMUTABLE_NESTED, action: DemoAppAction) =>\n action.type === 'CHANGE_IMMUTABLE_NESTED'\n ? state.updateIn(\n ['long', 'nested', 0, 'path', 'to', 'a'],\n (str: unknown) => (str as string) + '!',\n )\n : state,\n addFunction: (state = null, action: DemoAppAction) =>\n action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,\n addSymbol: (state = null, action: DemoAppAction) =>\n action.type === 'ADD_SYMBOL'\n ? { s: window.Symbol('symbol'), error: new Error('TEST') }\n : state,\n shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action: DemoAppAction) =>\n action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,\n }) as any;\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.react.base.json\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true,\n \"types\": [\"webpack-env\"]\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/tsconfig.webpack.json", "content": "{\n \"extends\": \"../../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true,\n \"types\": [\"node\", \"webpack-dev-server\"]\n },\n \"include\": [\"webpack.config.ts\"]\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/demo/webpack.config.ts", "content": "import * as path from 'path';\nimport * as webpack from 'webpack';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';\nimport pkg from '@redux-devtools/inspector-monitor/package.json';\n\nconst config: webpack.Configuration = {\n mode: 'development',\n entry: './src/index.tsx',\n devtool: 'eval-source-map',\n devServer: {\n static: './dist',\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: './index.html',\n package: pkg,\n }),\n new ForkTsCheckerWebpackPlugin(),\n ],\n output: {\n filename: 'bundle.js',\n path: path.join(__dirname, 'dist'),\n clean: true,\n },\n module: {\n rules: [\n {\n test: /\\.(js|ts)x?$/,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: [\n ['@babel/preset-env', { targets: 'defaults' }],\n '@babel/preset-react',\n '@babel/preset-typescript',\n ],\n },\n },\n },\n ],\n },\n resolve: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n};\n\nexport default config;\n" }, { "path": "packages/redux-devtools-inspector-monitor/eslint.config.mjs", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n {\n ignores: ['demo', 'lib'],\n },\n {\n files: ['**/*.ts', '**/*.tsx'],\n rules: {\n 'react/no-unknown-property': ['error', { ignore: ['css'] }],\n },\n },\n];\n" }, { "path": "packages/redux-devtools-inspector-monitor/package.json", "content": "{\n \"name\": \"@redux-devtools/inspector-monitor\",\n \"version\": \"7.0.0\",\n \"description\": \"Redux DevTools Diff Monitor\",\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Alexander (http://kuzya.org/)\",\n \"contributors\": [\n \"Mihail Diordiev (https://github.com/zalmoxisus)\"\n ],\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": {\n \".\": \"./lib/index.js\",\n \"./package.json\": \"./package.json\"\n },\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint\"\n },\n \"dependencies\": {\n \"@dnd-kit/core\": \"^6.3.1\",\n \"@dnd-kit/modifiers\": \"^9.0.0\",\n \"@dnd-kit/sortable\": \"^10.0.0\",\n \"@dnd-kit/utilities\": \"^3.2.2\",\n \"@types/lodash\": \"^4.17.24\",\n \"dateformat\": \"^5.0.3\",\n \"hex-rgba\": \"^1.0.2\",\n \"immutable\": \"^5.1.5\",\n \"javascript-stringify\": \"^2.1.0\",\n \"jsondiffpatch\": \"^0.7.3\",\n \"lodash.debounce\": \"^4.0.8\",\n \"react-base16-styling\": \"workspace:^\",\n \"react-json-tree\": \"workspace:^\"\n },\n \"devDependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@redux-devtools/core\": \"workspace:^\",\n \"@types/dateformat\": \"^5.0.3\",\n \"@types/hex-rgba\": \"^1.0.3\",\n \"@types/lodash.debounce\": \"^4.0.9\",\n \"@types/react\": \"^19.2.14\",\n \"react\": \"^19.2.4\",\n \"redux\": \"^5.0.1\",\n \"rimraf\": \"^6.1.3\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@redux-devtools/core\": \"workspace:^\",\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"redux\": \"^3.4.0 || ^4.0.0 || ^5.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/ActionList.tsx", "content": "import React, { ReactNode, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Action } from 'redux';\nimport { PerformAction } from '@redux-devtools/core';\nimport {\n closestCenter,\n DndContext,\n DragEndEvent,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport type { JSX } from '@emotion/react/jsx-runtime';\nimport ActionListRow from './ActionListRow.js';\nimport ActionListHeader from './ActionListHeader.js';\n\nfunction getTimestamps>(\n actions: { [actionId: number]: PerformAction },\n actionIds: number[],\n actionId: number,\n) {\n const idx = actionIds.indexOf(actionId);\n const prevActionId = actionIds[idx - 1];\n\n return {\n current: actions[actionId].timestamp,\n previous: idx ? actions[prevActionId].timestamp : 0,\n };\n}\n\nfunction scrollToBottom(node: HTMLDivElement) {\n node.scrollTop = node.scrollHeight;\n}\n\ninterface Props> {\n actions: { [actionId: number]: PerformAction };\n actionIds: number[];\n isWideLayout: boolean;\n searchValue: string | undefined;\n selectedActionId: number | null;\n startActionId: number | null;\n skippedActionIds: number[];\n draggableActions: boolean;\n hideMainButtons: boolean | undefined;\n hideActionButtons: boolean | undefined;\n onSearch: (value: string) => void;\n onSelect: (e: React.MouseEvent, actionId: number) => void;\n onToggleAction: (actionId: number) => void;\n onJumpToState: (actionId: number) => void;\n onCommit: () => void;\n onSweep: () => void;\n onReorderAction: (actionId: number, beforeActionId: number) => void;\n currentActionId: number;\n lastActionId: number;\n}\n\nexport default function ActionList>({\n actions,\n actionIds,\n isWideLayout,\n onToggleAction,\n skippedActionIds,\n selectedActionId,\n startActionId,\n onSelect,\n onSearch,\n searchValue,\n currentActionId,\n hideMainButtons,\n hideActionButtons,\n onCommit,\n onSweep,\n onJumpToState,\n lastActionId,\n onReorderAction,\n}: Props): JSX.Element {\n const nodeRef = useRef(null);\n const prevLastActionId = useRef(undefined);\n\n useLayoutEffect(() => {\n if (nodeRef.current && prevLastActionId.current !== lastActionId) {\n const { scrollTop, offsetHeight, scrollHeight } = nodeRef.current;\n if (Math.abs(scrollHeight - (scrollTop + offsetHeight)) < 50) {\n scrollToBottom(nodeRef.current);\n }\n }\n\n prevLastActionId.current = lastActionId;\n }, [lastActionId]);\n\n const setNodeRef = useCallback((node: HTMLDivElement | null) => {\n if (node && !nodeRef.current) {\n scrollToBottom(node);\n }\n\n nodeRef.current = node;\n }, []);\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n distance: 8,\n },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n const handleDragEnd = useCallback(\n ({ active, over }: DragEndEvent) => {\n if (over && active.id !== over.id) {\n const activeIndex = actionIds.indexOf(active.id as number);\n const overIndex = actionIds.indexOf(over.id as number);\n\n const beforeActionId =\n overIndex < activeIndex\n ? (over.id as number)\n : overIndex < actionIds.length - 1\n ? actionIds[overIndex + 1]\n : actionIds.length;\n\n onReorderAction(active.id as number, beforeActionId);\n }\n },\n [actionIds, onReorderAction],\n );\n\n const lowerSearchValue = searchValue && searchValue.toLowerCase();\n const filteredActionIds = searchValue\n ? actionIds.filter((id) =>\n actions[id].action.type\n .toLowerCase()\n .includes(lowerSearchValue as string),\n )\n : actionIds;\n\n return (\n ({\n flexBasis: '40%',\n flexShrink: 0,\n overflowX: 'hidden',\n overflowY: 'auto',\n borderBottomWidth: '3px',\n borderBottomStyle: 'double',\n display: 'flex',\n flexDirection: 'column',\n\n backgroundColor: theme.BACKGROUND_COLOR,\n borderColor: theme.LIST_BORDER_COLOR,\n }),\n isWideLayout && {\n flexBasis: '40%',\n borderBottom: 'none',\n borderRightWidth: '3px',\n borderRightStyle: 'double',\n },\n ]}\n >\n 0}\n hasStagedActions={actionIds.length > 1}\n searchValue={searchValue}\n />\n \n \n \n {filteredActionIds.map((actionId) => (\n \n = startActionId &&\n actionId <= (selectedActionId as number)) ||\n actionId === selectedActionId\n }\n isInFuture={\n actionIds.indexOf(actionId) >\n actionIds.indexOf(currentActionId)\n }\n onSelect={(e: React.MouseEvent) =>\n onSelect(e, actionId)\n }\n timestamps={getTimestamps(actions, actionIds, actionId)}\n action={actions[actionId].action}\n onToggleClick={() => onToggleAction(actionId)}\n onJumpClick={() => onJumpToState(actionId)}\n onCommitClick={() => onCommit()}\n hideActionButtons={hideActionButtons}\n isSkipped={skippedActionIds.includes(actionId)}\n />\n \n ))}\n \n \n
    \n
    \n );\n}\n\ninterface SortableItemProps {\n readonly children: ReactNode;\n readonly actionId: number;\n}\n\nfunction SortableItem({ children, actionId }: SortableItemProps) {\n const { attributes, listeners, setNodeRef, transform, transition } =\n useSortable({ id: actionId });\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n };\n\n return (\n
    \n {children}\n
    \n );\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx", "content": "import React, { FunctionComponent } from 'react';\nimport RightSlider from './RightSlider.js';\nimport {\n selectorButtonCss,\n selectorButtonSmallCss,\n} from './utils/selectorButtonStyles.js';\n\nconst getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>\n [hasSkippedActions && 'Sweep', 'Commit'].filter(\n (a): a is 'Sweep' | 'Commit' => !!a,\n );\n\ninterface Props {\n onSearch: (value: string) => void;\n onCommit: () => void;\n onSweep: () => void;\n hideMainButtons: boolean | undefined;\n hasSkippedActions: boolean;\n hasStagedActions: boolean;\n searchValue: string | undefined;\n}\n\nconst ActionListHeader: FunctionComponent = ({\n onSearch,\n hasSkippedActions,\n hasStagedActions,\n onCommit,\n onSweep,\n hideMainButtons,\n searchValue,\n}) => (\n ({\n display: 'flex',\n flex: '0 0 auto',\n alignItems: 'center',\n borderBottomWidth: '1px',\n borderBottomStyle: 'solid',\n\n borderColor: theme.LIST_BORDER_COLOR,\n })}\n >\n ({\n outline: 'none',\n border: 'none',\n width: '100%',\n padding: '5px 10px',\n fontSize: '1em',\n fontFamily: 'monaco, Consolas, \"Lucida Console\", monospace',\n\n backgroundColor: theme.BACKGROUND_COLOR,\n color: theme.TEXT_COLOR,\n\n '&::-webkit-input-placeholder': {\n color: theme.TEXT_PLACEHOLDER_COLOR,\n },\n\n '&::-moz-placeholder': {\n color: theme.TEXT_PLACEHOLDER_COLOR,\n },\n })}\n onChange={(e) => onSearch(e.target.value)}\n placeholder=\"filter...\"\n value={searchValue}\n />\n {!hideMainButtons && (\n
    \n \n
    \n {getActiveButtons(hasSkippedActions).map((btn) => (\n \n ({\n Commit: onCommit,\n Sweep: onSweep,\n })[btn]()\n }\n css={[selectorButtonCss, selectorButtonSmallCss]}\n >\n {btn}\n
    \n ))}\n
    \n \n \n )}\n \n);\n\nexport default ActionListHeader;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx", "content": "import React, { MouseEvent, MouseEventHandler, PureComponent } from 'react';\nimport dateformat from 'dateformat';\nimport type { DebouncedFunc } from 'lodash';\nimport debounce from 'lodash.debounce';\nimport { Action } from 'redux';\nimport type { Interpolation, Theme } from '@emotion/react';\nimport type { JSX } from '@emotion/react/jsx-runtime';\nimport RightSlider from './RightSlider.js';\nimport {\n selectorButtonCss,\n selectorButtonSelectedCss,\n selectorButtonSmallCss,\n} from './utils/selectorButtonStyles.js';\n\nconst BUTTON_SKIP = 'Skip';\nconst BUTTON_JUMP = 'Jump';\n\ntype Button = typeof BUTTON_SKIP | typeof BUTTON_JUMP;\n\nconst actionListItemTimeCss: Interpolation = (theme) => ({\n display: 'inline',\n padding: '4px 6px',\n borderRadius: '3px',\n fontSize: '0.8em',\n lineHeight: '1em',\n flexShrink: 0,\n\n backgroundColor: theme.ACTION_TIME_BACK_COLOR,\n color: theme.ACTION_TIME_COLOR,\n});\n\ninterface Props    > {\n actionId: number;\n isInitAction: boolean;\n isSelected: boolean;\n isInFuture: boolean;\n onSelect: MouseEventHandler;\n timestamps: { current: number; previous: number };\n action: A;\n onToggleClick: () => void;\n onJumpClick: () => void;\n onCommitClick: () => void;\n hideActionButtons: boolean | undefined;\n isSkipped: boolean;\n}\n\ninterface State {\n hover: boolean;\n}\n\nexport default class ActionListRow<\n A extends Action,\n> extends PureComponent, State> {\n state: State = { hover: false };\n\n render(): JSX.Element {\n const {\n isSelected,\n action,\n actionId,\n isInitAction,\n onSelect,\n timestamps,\n isSkipped,\n isInFuture,\n hideActionButtons,\n } = this.props;\n const { hover } = this.state;\n const timeDelta = timestamps.current - timestamps.previous;\n const showButtons = (hover && !isInitAction) || isSkipped;\n\n const isButtonSelected = (btn: Button) => btn === BUTTON_SKIP && isSkipped;\n\n let actionType = action.type;\n if (typeof actionType === 'undefined') actionType = '';\n else if (actionType === null) actionType = '';\n else actionType = actionType.toString() || '';\n\n return (\n \n }\n onMouseLeave={\n (!hideActionButtons &&\n this.handleMouseLeave) as MouseEventHandler\n }\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseEnter}\n data-id={actionId}\n css={[\n (theme) => ({\n borderBottomWidth: '1px',\n borderBottomStyle: 'solid',\n display: 'flex',\n justifyContent: 'space-between',\n padding: '5px 10px',\n cursor: 'pointer',\n userSelect: 'none',\n\n borderBottomColor: theme.BORDER_COLOR,\n }),\n isSelected &&\n ((theme) => ({\n backgroundColor: theme.SELECTED_BACKGROUND_COLOR,\n })),\n isSkipped &&\n ((theme) => ({\n backgroundColor: theme.SKIPPED_BACKGROUND_COLOR,\n })),\n isInFuture && { opacity: '0.6' },\n ]}\n >\n \n {actionType}\n \n {hideActionButtons ? (\n \n
    \n {timeDelta === 0\n ? '+00:00:00'\n : dateformat(\n timeDelta,\n timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L',\n )}\n
    \n     \n ) : (\n
    \n \n
    \n {timeDelta === 0\n ? '+00:00:00'\n : dateformat(\n timeDelta,\n timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L',\n )}\n
    \n     \n \n
    \n {([BUTTON_JUMP, BUTTON_SKIP] as const).map(\n (btn) =>\n (!isInitAction || btn !== BUTTON_SKIP) && (\n this.handleButtonClick(btn, e)}\n css={[\n selectorButtonCss,\n isButtonSelected(btn) && selectorButtonSelectedCss,\n selectorButtonSmallCss,\n ]}\n data-isselectorbutton={true}\n >\n {btn}\n
    \n ),\n )}\n
    \n \n \n )}\n \n );\n }\n\n handleButtonClick(btn: Button, e: MouseEvent) {\n e.stopPropagation();\n\n switch (btn) {\n case BUTTON_SKIP:\n this.props.onToggleClick();\n break;\n case BUTTON_JUMP:\n this.props.onJumpClick();\n break;\n }\n }\n\n handleMouseEnter = (e: MouseEvent) => {\n if (this.state.hover) return;\n this.handleMouseLeave.cancel();\n this.handleMouseEnterDebounced(e.buttons);\n };\n\n handleMouseEnterDebounced: DebouncedFunc<(buttons: number) => void> =\n debounce((buttons) => {\n if (buttons) return;\n this.setState({ hover: true });\n }, 150);\n\n handleMouseLeave: DebouncedFunc<() => void> = debounce(() => {\n this.handleMouseEnterDebounced.cancel();\n if (this.state.hover) this.setState({ hover: false });\n }, 100);\n\n handleMouseDown = (e: MouseEvent) => {\n if ((e.target as HTMLElement).dataset.isselectorbutton) return;\n this.handleMouseLeave();\n };\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx", "content": "import React, { Component } from 'react';\nimport type { Base16Theme } from 'react-base16-styling';\nimport { Action } from 'redux';\nimport type { LabelRenderer } from 'react-json-tree';\nimport { PerformAction } from '@redux-devtools/core';\nimport type { Delta } from 'jsondiffpatch';\nimport type { JSX } from '@emotion/react/jsx-runtime';\nimport { DEFAULT_STATE, DevtoolsInspectorState } from './redux.js';\nimport ActionPreviewHeader from './ActionPreviewHeader.js';\nimport DiffTab from './tabs/DiffTab.js';\nimport StateTab from './tabs/StateTab.js';\nimport ActionTab from './tabs/ActionTab.js';\n\nexport interface TabComponentProps> {\n labelRenderer: LabelRenderer;\n computedStates: { state: S; error?: string }[];\n actions: { [actionId: number]: PerformAction     };\n selectedActionId: number | null;\n startActionId: number | null;\n base16Theme: Base16Theme;\n invertTheme: boolean;\n isWideLayout: boolean;\n sortStateTreeAlphabetically: boolean;\n disableStateTreeCollection: boolean;\n dataTypeKey: string | symbol | undefined;\n delta: Delta | null | undefined | false;\n action: A;\n nextState: S;\n monitorState: DevtoolsInspectorState;\n updateMonitorState: (monitorState: Partial) => void;\n}\n\nexport interface Tab> {\n name: string;\n component: React.ComponentType>;\n}\n\nconst DEFAULT_TABS = [\n {\n name: 'Action',\n component: ActionTab,\n },\n {\n name: 'Diff',\n component: DiffTab,\n },\n {\n name: 'State',\n component: StateTab,\n },\n];\n\ninterface Props> {\n base16Theme: Base16Theme;\n invertTheme: boolean;\n isWideLayout: boolean;\n tabs: Tab[] | ((tabs: Tab[]) => Tab[]);\n tabName: string;\n delta: Delta | null | undefined | false;\n error: string | undefined;\n nextState: S;\n computedStates: { state: S; error?: string }[];\n action: A;\n actions: { [actionId: number]: PerformAction };\n selectedActionId: number | null;\n startActionId: number | null;\n dataTypeKey: string | symbol | undefined;\n monitorState: DevtoolsInspectorState;\n updateMonitorState: (monitorState: Partial) => void;\n onInspectPath: (path: (string | number)[]) => void;\n inspectedPath: (string | number)[];\n onSelectTab: (tabName: string) => void;\n sortStateTreeAlphabetically: boolean;\n disableStateTreeCollection: boolean;\n}\n\nclass ActionPreview> extends Component<\n Props\n> {\n static defaultProps = {\n tabName: DEFAULT_STATE.tabName,\n };\n\n render(): JSX.Element {\n const {\n delta,\n error,\n nextState,\n onInspectPath,\n inspectedPath,\n tabName,\n isWideLayout,\n onSelectTab,\n action,\n actions,\n selectedActionId,\n startActionId,\n computedStates,\n base16Theme,\n invertTheme,\n tabs,\n dataTypeKey,\n monitorState,\n updateMonitorState,\n sortStateTreeAlphabetically,\n disableStateTreeCollection,\n } = this.props;\n\n const renderedTabs: Tab[] =\n typeof tabs === 'function'\n ? tabs(DEFAULT_TABS as Tab[])\n : tabs\n ? tabs\n : (DEFAULT_TABS as Tab[]);\n\n const { component: TabComponent } =\n renderedTabs.find((tab) => tab.name === tabName) ||\n renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName)!;\n\n return (\n ({\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n overflowY: 'hidden',\n\n '& pre': {\n border: 'inherit',\n borderRadius: '3px',\n lineHeight: 'inherit',\n color: 'inherit',\n },\n\n backgroundColor: theme.BACKGROUND_COLOR,\n })}\n >\n >[]}\n {...{ inspectedPath, onInspectPath, tabName, onSelectTab }}\n />\n {!error && (\n
    \n \n
    \n )}\n {error && (\n ({\n padding: '10px',\n marginLeft: '14px',\n fontWeight: 'bold',\n\n color: theme.ERROR_COLOR,\n })}\n >\n {error}\n \n )}\n \n );\n }\n\n labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => {\n const { onInspectPath, inspectedPath } = this.props;\n\n return (\n \n {key}\n ({\n fontSize: '0.7em',\n paddingLeft: '5px',\n cursor: 'pointer',\n '&:hover': {\n textDecoration: 'underline',\n },\n\n color: theme.PIN_COLOR,\n })}\n onClick={() =>\n onInspectPath([\n ...inspectedPath.slice(0, inspectedPath.length - 1),\n ...[key, ...rest].reverse(),\n ])\n }\n >\n {'(pin)'}\n \n {!expanded && ': '}\n \n );\n };\n}\n\nexport default ActionPreview;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx", "content": "import React, { FunctionComponent } from 'react';\nimport { Action } from 'redux';\nimport { css } from '@emotion/react';\nimport type { Interpolation, Theme } from '@emotion/react';\nimport { Tab } from './ActionPreview.js';\nimport {\n selectorButtonCss,\n selectorButtonSelectedCss,\n} from './utils/selectorButtonStyles.js';\n\nconst inspectedPathKeyCss = css({\n '&:not(:last-child):after': {\n content: '\" > \"',\n },\n});\n\nconst inspectedPathKeyLinkCss: Interpolation = (theme) => ({\n cursor: 'pointer',\n color: theme.LINK_COLOR,\n '&:hover': {\n textDecoration: 'underline',\n color: theme.LINK_HOVER_COLOR,\n },\n});\n\ninterface Props> {\n tabs: Tab[];\n inspectedPath: (string | number)[];\n onInspectPath: (path: (string | number)[]) => void;\n tabName: string;\n onSelectTab: (tabName: string) => void;\n}\n\nconst ActionPreviewHeader: FunctionComponent<\n Props>\n> = ({ inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (\n ({\n flex: '0 0 30px',\n padding: '5px 10px',\n alignItems: 'center',\n borderBottomWidth: '1px',\n borderBottomStyle: 'solid',\n\n backgroundColor: theme.HEADER_BACKGROUND_COLOR,\n borderBottomColor: theme.HEADER_BORDER_COLOR,\n })}\n >\n
    \n {tabs.map((tab) => (\n onSelectTab(tab.name)}\n key={tab.name}\n css={[\n selectorButtonCss,\n tab.name === tabName && selectorButtonSelectedCss,\n ]}\n >\n {tab.name}\n
    \n ))}\n \n
    \n {inspectedPath.length ? (\n \n onInspectPath([])} css={inspectedPathKeyLinkCss}>\n {tabName}\n \n \n ) : (\n tabName\n )}\n {inspectedPath.map((key, idx) =>\n idx === inspectedPath.length - 1 ? (\n {key}\n ) : (\n \n onInspectPath(inspectedPath.slice(0, idx + 1))}\n css={inspectedPathKeyLinkCss}\n >\n {key}\n \n \n ),\n )}\n
    \n \n);\n\nexport default ActionPreviewHeader;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx", "content": "import React, { PureComponent } from 'react';\nimport type { Base16Theme } from 'react-base16-styling';\nimport {\n ActionCreators,\n LiftedAction,\n LiftedState,\n} from '@redux-devtools/core';\nimport { Action, Dispatch } from 'redux';\nimport type { Delta, DiffContext } from 'jsondiffpatch';\nimport {\n createInspectorMonitorThemeFromBase16Theme,\n resolveBase16Theme,\n} from './utils/themes.js';\nimport type { Base16ThemeName } from './utils/themes.js';\nimport ActionList from './ActionList.js';\nimport ActionPreview, { Tab } from './ActionPreview.js';\nimport getInspectedState from './utils/getInspectedState.js';\nimport createDiffPatcher from './createDiffPatcher.js';\nimport {\n DevtoolsInspectorAction,\n DevtoolsInspectorState,\n reducer,\n updateMonitorState,\n} from './redux.js';\nimport { ThemeProvider } from '@emotion/react';\n\nconst {\n commit,\n sweep,\n toggleAction,\n jumpToAction,\n jumpToState,\n reorderAction,\n} = ActionCreators;\n\nfunction getLastActionId>(\n props: DevtoolsInspectorProps,\n) {\n return props.stagedActionIds[props.stagedActionIds.length - 1];\n}\n\nfunction getCurrentActionId>(\n props: DevtoolsInspectorProps,\n monitorState: DevtoolsInspectorState,\n) {\n return monitorState.selectedActionId === null\n ? props.stagedActionIds[props.currentStateIndex]\n : monitorState.selectedActionId;\n}\n\nfunction getFromState(\n actionIndex: number,\n stagedActionIds: number[],\n computedStates: { state: S; error?: string }[],\n monitorState: DevtoolsInspectorState,\n) {\n const { startActionId } = monitorState;\n if (startActionId === null) {\n return actionIndex > 0 ? computedStates[actionIndex - 1] : null;\n }\n let fromStateIdx = stagedActionIds.indexOf(startActionId - 1);\n if (fromStateIdx === -1) fromStateIdx = 0;\n return computedStates[fromStateIdx];\n}\n\nfunction createIntermediateState>(\n props: DevtoolsInspectorProps,\n monitorState: DevtoolsInspectorState,\n) {\n const {\n supportImmutable,\n computedStates,\n stagedActionIds,\n actionsById: actions,\n diffObjectHash,\n diffPropertyFilter,\n } = props;\n const { inspectedStatePath, inspectedActionPath } = monitorState;\n const currentActionId = getCurrentActionId(props, monitorState);\n const currentAction =\n actions[currentActionId] && actions[currentActionId].action;\n\n const actionIndex = stagedActionIds.indexOf(currentActionId);\n const fromState = getFromState(\n actionIndex,\n stagedActionIds,\n computedStates,\n monitorState,\n );\n const toState = computedStates[actionIndex];\n const error = toState && toState.error;\n\n const fromInspectedState =\n !error &&\n fromState &&\n getInspectedState(fromState.state, inspectedStatePath, supportImmutable);\n const toInspectedState =\n !error &&\n toState &&\n getInspectedState(toState.state, inspectedStatePath, supportImmutable);\n const delta =\n !error &&\n fromState &&\n toState &&\n createDiffPatcher(diffObjectHash, diffPropertyFilter).diff(\n fromInspectedState,\n toInspectedState,\n );\n\n return {\n delta,\n nextState:\n toState && getInspectedState(toState.state, inspectedStatePath, false),\n action: getInspectedState(currentAction, inspectedActionPath, false),\n error,\n };\n}\n\nexport interface ExternalProps> {\n dispatch: Dispatch<\n DevtoolsInspectorAction | LiftedAction\n >;\n preserveScrollTop?: boolean;\n draggableActions: boolean;\n select: (state: S) => unknown;\n theme: Base16ThemeName | Base16Theme;\n supportImmutable: boolean;\n diffObjectHash?: (item: unknown, index: number) => string;\n diffPropertyFilter?: (name: string, context: DiffContext) => boolean;\n hideMainButtons?: boolean;\n hideActionButtons?: boolean;\n invertTheme: boolean;\n sortStateTreeAlphabetically: boolean;\n disableStateTreeCollection: boolean;\n dataTypeKey?: string | symbol;\n tabs: Tab[] | ((tabs: Tab[]) => Tab[]);\n}\n\ninterface DefaultProps {\n select: (state: unknown) => unknown;\n supportImmutable: boolean;\n draggableActions: boolean;\n theme: Base16ThemeName;\n invertTheme: boolean;\n}\n\nexport interface DevtoolsInspectorProps<\n S,\n A extends Action,\n> extends LiftedState {\n dispatch: Dispatch<\n DevtoolsInspectorAction | LiftedAction\n >;\n preserveScrollTop?: boolean;\n draggableActions: boolean;\n select: (state: S) => unknown;\n theme: Base16ThemeName | Base16Theme;\n supportImmutable: boolean;\n diffObjectHash?: (item: unknown, index: number | undefined) => string;\n diffPropertyFilter?: (name: string, context: DiffContext) => boolean;\n hideMainButtons?: boolean;\n hideActionButtons?: boolean;\n sortStateTreeAlphabetically: boolean;\n disableStateTreeCollection: boolean;\n invertTheme: boolean;\n dataTypeKey?: string | symbol;\n tabs: Tab[] | ((tabs: Tab[]) => Tab[]);\n}\n\ninterface State> {\n delta: Delta | null | undefined | false;\n nextState: S;\n action: A;\n error: string | undefined;\n isWideLayout: boolean;\n}\n\nclass DevtoolsInspector> extends PureComponent<\n DevtoolsInspectorProps,\n State\n> {\n state: State = {\n ...createIntermediateState(this.props, this.props.monitorState),\n isWideLayout: false,\n };\n\n static update = reducer;\n\n static defaultProps = {\n select: (state: unknown) => state,\n supportImmutable: false,\n draggableActions: true,\n theme: 'inspector',\n invertTheme: true,\n };\n\n updateSizeTimeout?: number;\n inspectorRef?: HTMLDivElement | null;\n\n componentDidMount() {\n this.updateSizeMode();\n this.updateSizeTimeout = window.setInterval(\n this.updateSizeMode.bind(this),\n 150,\n );\n }\n\n componentWillUnmount() {\n clearTimeout(this.updateSizeTimeout);\n }\n\n updateMonitorState = (monitorState: Partial) => {\n this.props.dispatch(updateMonitorState(monitorState));\n };\n\n updateSizeMode() {\n const isWideLayout = this.inspectorRef!.offsetWidth > 500;\n\n if (isWideLayout !== this.state.isWideLayout) {\n this.setState({ isWideLayout });\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: DevtoolsInspectorProps) {\n const nextMonitorState = nextProps.monitorState;\n const monitorState = this.props.monitorState;\n\n if (\n getCurrentActionId(this.props, monitorState) !==\n getCurrentActionId(nextProps, nextMonitorState) ||\n monitorState.startActionId !== nextMonitorState.startActionId ||\n monitorState.inspectedStatePath !== nextMonitorState.inspectedStatePath ||\n monitorState.inspectedActionPath !==\n nextMonitorState.inspectedActionPath ||\n this.props.computedStates !== nextProps.computedStates ||\n this.props.stagedActionIds !== nextProps.stagedActionIds\n ) {\n this.setState(createIntermediateState(nextProps, nextMonitorState));\n }\n }\n\n inspectorCreateRef: React.RefCallback = (node) => {\n this.inspectorRef = node;\n };\n\n render() {\n const {\n stagedActionIds: actionIds,\n actionsById: actions,\n computedStates,\n draggableActions,\n tabs,\n theme,\n invertTheme,\n skippedActionIds,\n currentStateIndex,\n monitorState,\n dataTypeKey,\n hideMainButtons,\n hideActionButtons,\n sortStateTreeAlphabetically,\n disableStateTreeCollection,\n } = this.props;\n const { selectedActionId, startActionId, searchValue, tabName } =\n monitorState;\n const inspectedPathType =\n tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';\n const { isWideLayout, action, nextState, delta, error } = this.state;\n\n const base16Theme = resolveBase16Theme(theme)!;\n const inspectorMonitorTheme = createInspectorMonitorThemeFromBase16Theme(\n base16Theme,\n invertTheme,\n );\n return (\n \n ({\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n fontFamily: 'monaco, Consolas, \"Lucida Console\", monospace',\n fontSize: '12px',\n WebkitFontSmoothing: 'antialiased',\n lineHeight: '1.5em',\n\n backgroundColor: theme.BACKGROUND_COLOR,\n color: theme.TEXT_COLOR,\n }),\n isWideLayout && { flexDirection: 'row' },\n ]}\n >\n \n \n this.handleInspectPath(inspectedPathType, path)\n }\n inspectedPath={monitorState[inspectedPathType]}\n onSelectTab={this.handleSelectTab}\n />\n \n \n );\n }\n\n handleToggleAction = (actionId: number) => {\n this.props.dispatch(toggleAction(actionId));\n };\n\n handleJumpToState = (actionId: number) => {\n if (jumpToAction) {\n this.props.dispatch(jumpToAction(actionId));\n } else {\n // Fallback for redux-devtools-instrument < 1.5\n const index = this.props.stagedActionIds.indexOf(actionId);\n if (index !== -1) this.props.dispatch(jumpToState(index));\n }\n };\n\n handleReorderAction = (actionId: number, beforeActionId: number) => {\n if (reorderAction)\n this.props.dispatch(reorderAction(actionId, beforeActionId));\n };\n\n handleCommit = () => {\n this.props.dispatch(commit());\n };\n\n handleSweep = () => {\n this.props.dispatch(sweep());\n };\n\n handleSearch = (val: string) => {\n this.updateMonitorState({ searchValue: val });\n };\n\n handleSelectAction = (\n e: React.MouseEvent,\n actionId: number,\n ) => {\n const { monitorState } = this.props;\n let startActionId;\n let selectedActionId;\n\n if (e.shiftKey && monitorState.selectedActionId !== null) {\n if (monitorState.startActionId !== null) {\n if (actionId >= monitorState.startActionId) {\n startActionId = Math.min(\n monitorState.startActionId,\n monitorState.selectedActionId,\n );\n selectedActionId = actionId;\n } else {\n selectedActionId = Math.max(\n monitorState.startActionId,\n monitorState.selectedActionId,\n );\n startActionId = actionId;\n }\n } else {\n startActionId = Math.min(actionId, monitorState.selectedActionId);\n selectedActionId = Math.max(actionId, monitorState.selectedActionId);\n }\n } else {\n startActionId = null;\n if (\n actionId === monitorState.selectedActionId ||\n monitorState.startActionId !== null\n ) {\n selectedActionId = null;\n } else {\n selectedActionId = actionId;\n }\n }\n\n this.updateMonitorState({ startActionId, selectedActionId });\n };\n\n handleInspectPath = (\n pathType: 'inspectedActionPath' | 'inspectedStatePath',\n path: (string | number)[],\n ) => {\n this.updateMonitorState({ [pathType]: path });\n };\n\n handleSelectTab = (tabName: string) => {\n this.updateMonitorState({ tabName });\n };\n}\n\nexport default DevtoolsInspector as unknown as React.ComponentType<\n ExternalProps>\n> & {\n update(\n monitorProps: ExternalProps>,\n state: DevtoolsInspectorState | undefined,\n action: DevtoolsInspectorAction,\n ): DevtoolsInspectorState;\n defaultProps: DefaultProps;\n};\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/RightSlider.tsx", "content": "import React, { FunctionComponent } from 'react';\n\ninterface Props {\n shown?: boolean;\n children: React.ReactNode;\n rotate?: boolean;\n}\n\nconst RightSlider: FunctionComponent = ({ shown, children, rotate }) => (\n \n {children}\n \n);\n\nexport default RightSlider;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/createDiffPatcher.ts", "content": "import { DiffPatcher } from 'jsondiffpatch';\nimport type { DiffContext } from 'jsondiffpatch';\n\nconst defaultObjectHash = (obj: object, idx: number | undefined) => {\n const o = obj as Record;\n return (\n (o === null && '$$null') ||\n (o && (o.id || o.id === 0) && `$$id:${JSON.stringify(o.id)}`) ||\n (o && (o._id || o._id === 0) && `$$_id:${JSON.stringify(o._id)}`) ||\n `$$index:${idx}`\n );\n};\n\nconst defaultPropertyFilter = (name: string, context: DiffContext) =>\n typeof (context.left as Record)[name] !== 'function' &&\n typeof (context.right as Record)[name] !== 'function';\n\nconst defaultDiffPatcher = new DiffPatcher({\n arrays: { detectMove: false } as {\n detectMove: boolean;\n includeValueOnMove: boolean;\n },\n objectHash: defaultObjectHash,\n propertyFilter: defaultPropertyFilter,\n});\n\nexport default function createDiffPatcher(\n objectHash:\n | ((item: unknown, index: number | undefined) => string)\n | undefined,\n propertyFilter: ((name: string, context: DiffContext) => boolean) | undefined,\n) {\n if (!objectHash && !propertyFilter) {\n return defaultDiffPatcher;\n }\n\n return new DiffPatcher({\n arrays: { detectMove: false } as {\n detectMove: boolean;\n includeValueOnMove: boolean;\n },\n objectHash: objectHash || defaultObjectHash,\n propertyFilter: propertyFilter || defaultPropertyFilter,\n });\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/index.ts", "content": "export type { LabelRenderer } from 'react-json-tree';\nexport {\n default as InspectorMonitor,\n type ExternalProps as DevtoolsInspectorProps,\n} from './DevtoolsInspector.js';\nexport type { Tab, TabComponentProps } from './ActionPreview.js';\nexport type {\n DevtoolsInspectorAction,\n DevtoolsInspectorState,\n} from './redux.js';\nexport type { Base16ThemeName } from './utils/themes.js';\nexport * as inspectorThemes from './themes/index.js';\nexport { default as ActionTab } from './tabs/ActionTab.js';\nexport { default as DiffTab } from './tabs/DiffTab.js';\nexport { default as StateTab } from './tabs/StateTab.js';\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/redux.ts", "content": "import { Action } from 'redux';\nimport { DevtoolsInspectorProps } from './DevtoolsInspector.js';\n\nconst UPDATE_MONITOR_STATE =\n '@@redux-devtools-inspector-monitor/UPDATE_MONITOR_STATE';\n\nexport interface UpdateMonitorStateAction {\n type: typeof UPDATE_MONITOR_STATE;\n monitorState: Partial;\n}\nexport function updateMonitorState(\n monitorState: Partial,\n): UpdateMonitorStateAction {\n return { type: UPDATE_MONITOR_STATE, monitorState };\n}\n\nexport type DevtoolsInspectorAction = UpdateMonitorStateAction;\n\nexport interface DevtoolsInspectorState {\n selectedActionId: number | null;\n startActionId: number | null;\n inspectedActionPath: (string | number)[];\n inspectedStatePath: (string | number)[];\n tabName: string;\n searchValue?: string;\n}\n\nexport const DEFAULT_STATE: DevtoolsInspectorState = {\n selectedActionId: null,\n startActionId: null,\n inspectedActionPath: [],\n inspectedStatePath: [],\n tabName: 'Diff',\n};\n\nfunction reduceUpdateState(\n state: DevtoolsInspectorState,\n action: DevtoolsInspectorAction,\n) {\n return action.type === UPDATE_MONITOR_STATE\n ? {\n ...state,\n ...action.monitorState,\n }\n : state;\n}\n\nexport function reducer>(\n props: DevtoolsInspectorProps,\n state = DEFAULT_STATE,\n action: DevtoolsInspectorAction,\n) {\n return {\n ...reduceUpdateState(state, action),\n };\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/tabs/ActionTab.tsx", "content": "import React, { FunctionComponent } from 'react';\nimport { JSONTree } from 'react-json-tree';\nimport { Action } from 'redux';\nimport getItemString from './getItemString.js';\nimport getJsonTreeTheme from './getJsonTreeTheme.js';\nimport { TabComponentProps } from '../ActionPreview.js';\n\nconst ActionTab: FunctionComponent<\n TabComponentProps>\n> = ({\n action,\n base16Theme,\n invertTheme,\n labelRenderer,\n dataTypeKey,\n isWideLayout,\n}) => (\n \n getItemString(type, data, dataTypeKey, isWideLayout)\n }\n invertTheme={invertTheme}\n hideRoot\n />\n);\n\nexport default ActionTab;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/tabs/DiffTab.tsx", "content": "import React, { FunctionComponent } from 'react';\nimport JSONDiff from './JSONDiff.js';\nimport { TabComponentProps } from '../ActionPreview.js';\nimport { Action } from 'redux';\n\nconst DiffTab: FunctionComponent<\n TabComponentProps>\n> = ({\n delta,\n base16Theme,\n invertTheme,\n labelRenderer,\n isWideLayout,\n dataTypeKey,\n}) => (\n \n);\n\nexport default DiffTab;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx", "content": "import React, { Component } from 'react';\nimport { JSONTree } from 'react-json-tree';\nimport type { LabelRenderer, ShouldExpandNodeInitially } from 'react-json-tree';\nimport { stringify } from 'javascript-stringify';\nimport type { Delta } from 'jsondiffpatch';\nimport type { Base16Theme } from 'react-base16-styling';\nimport { css } from '@emotion/react';\nimport type { Interpolation, Theme } from '@emotion/react';\nimport type { JSX } from '@emotion/react/jsx-runtime';\nimport getItemString from './getItemString.js';\nimport getJsonTreeTheme from './getJsonTreeTheme.js';\n\nfunction stringifyAndShrink(val: any, isWideLayout?: boolean) {\n if (val === null) {\n return 'null';\n }\n\n const str = stringify(val);\n if (typeof str === 'undefined') {\n return 'undefined';\n }\n\n if (isWideLayout)\n return str.length > 42 ? str.substr(0, 30) + '…' + str.substr(-10) : str;\n return str.length > 22 ? `${str.substr(0, 15)}…${str.substr(-5)}` : str;\n}\n\nconst expandFirstLevel: ShouldExpandNodeInitially = (keyName, data, level) =>\n level <= 1;\n\nfunction prepareDelta(value: any) {\n if (value && value._t === 'a') {\n const res: { [key: string]: any } = {};\n for (const key in value) {\n if (key !== '_t') {\n if (key[0] === '_' && !value[key.substr(1)]) {\n res[key.substr(1)] = value[key];\n } else if (value['_' + key]) {\n res[key] = [value['_' + key][0], value[key][0]];\n } else if (!value['_' + key] && key[0] !== '_') {\n res[key] = value[key];\n }\n }\n }\n return res;\n }\n\n return value;\n}\n\nconst diffCss: Interpolation = (theme) => ({\n padding: '2px 3px',\n borderRadius: '3px',\n position: 'relative',\n\n color: theme.TEXT_COLOR,\n});\n\nconst diffWrapCss = css({ position: 'relative', zIndex: 1 });\n\ninterface Props {\n delta: Delta | null | undefined | false;\n base16Theme: Base16Theme;\n invertTheme: boolean;\n labelRenderer: LabelRenderer;\n isWideLayout: boolean;\n dataTypeKey: string | symbol | undefined;\n}\n\ninterface State {\n data: any;\n}\n\nexport default class JSONDiff extends Component {\n state: State = { data: {} };\n\n componentDidMount() {\n this.updateData();\n }\n\n componentDidUpdate(prevProps: Props) {\n if (prevProps.delta !== this.props.delta) {\n this.updateData();\n }\n }\n\n updateData() {\n // this magically fixes weird React error, where it can't find a node in tree\n // if we set `delta` as JSONTree data right away\n // https://github.com/alexkuz/redux-devtools-inspector/issues/17\n\n this.setState({ data: this.props.delta });\n }\n\n render(): JSX.Element {\n const { base16Theme, ...props } = this.props;\n\n if (!this.state.data) {\n return (\n ({\n padding: '10px',\n color: theme.TEXT_PLACEHOLDER_COLOR,\n })}\n >\n (states are equal)\n \n );\n }\n\n return (\n \n );\n }\n\n getItemString = (type: string, data: any) =>\n getItemString(\n type,\n data,\n this.props.dataTypeKey,\n this.props.isWideLayout,\n true,\n );\n\n valueRenderer = (raw: any, value: any) => {\n const { isWideLayout } = this.props;\n\n if (Array.isArray(value)) {\n switch (value.length) {\n case 1:\n return (\n \n ({ backgroundColor: theme.DIFF_ADD_COLOR }),\n ]}\n >\n {stringifyAndShrink(value[0], isWideLayout)}\n \n \n );\n case 2:\n return (\n \n ({\n textDecoration: 'line-through',\n backgroundColor: theme.DIFF_REMOVE_COLOR,\n }),\n ]}\n >\n {stringifyAndShrink(value[0], isWideLayout)}\n \n ({ color: theme.DIFF_ARROW_COLOR })]}\n >\n {' => '}\n \n ({ backgroundColor: theme.DIFF_ADD_COLOR }),\n ]}\n >\n {stringifyAndShrink(value[1], isWideLayout)}\n \n \n );\n case 3:\n return (\n \n ({\n textDecoration: 'line-through',\n backgroundColor: theme.DIFF_REMOVE_COLOR,\n }),\n ]}\n >\n {stringifyAndShrink(value[0])}\n \n \n );\n }\n }\n\n return raw;\n };\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/tabs/StateTab.tsx", "content": "import React from 'react';\nimport { JSONTree } from 'react-json-tree';\nimport { Action } from 'redux';\nimport getItemString from './getItemString.js';\nimport getJsonTreeTheme from './getJsonTreeTheme.js';\nimport { TabComponentProps } from '../ActionPreview.js';\n\nconst StateTab: React.FunctionComponent<\n TabComponentProps>\n> = ({\n nextState,\n base16Theme,\n invertTheme,\n labelRenderer,\n dataTypeKey,\n isWideLayout,\n sortStateTreeAlphabetically,\n disableStateTreeCollection,\n}) => (\n \n getItemString(type, data, dataTypeKey, isWideLayout)\n }\n invertTheme={invertTheme}\n hideRoot\n sortObjectKeys={sortStateTreeAlphabetically}\n {...(disableStateTreeCollection ? { collectionLimit: 0 } : {})}\n />\n);\n\nexport default StateTab;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx", "content": "import React from 'react';\nimport { isCollection, isIndexed, isKeyed } from 'immutable';\nimport type { JSX } from '@emotion/react/jsx-runtime';\nimport isIterable from '../utils/isIterable.js';\n\nconst IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';\n\nfunction isImmutable(value: any) {\n return isKeyed(value) || isIndexed(value) || isCollection(value);\n}\n\nfunction getShortTypeString(val: any, diff: boolean | undefined) {\n if (diff && Array.isArray(val)) {\n val = val[val.length === 2 ? 1 : 0];\n }\n\n if (isIterable(val) && !isImmutable(val)) {\n return '(…)';\n } else if (Array.isArray(val)) {\n return val.length > 0 ? '[…]' : '[]';\n } else if (val === null) {\n return 'null';\n } else if (val === undefined) {\n return 'undef';\n } else if (typeof val === 'object') {\n return Object.keys(val as object).length > 0 ? '{…}' : '{}';\n } else if (typeof val === 'function') {\n return 'fn';\n } else if (typeof val === 'string') {\n return `\"${val.substr(0, 10) + (val.length > 10 ? '…' : '')}\"`;\n } else if (typeof val === 'symbol') {\n return 'symbol';\n } else {\n return val;\n }\n}\n\nfunction getText(\n type: string,\n data: any,\n isWideLayout: boolean,\n isDiff: boolean | undefined,\n) {\n if (type === 'Object') {\n const keys = Object.keys(data as object);\n if (!isWideLayout) return keys.length ? '{…}' : '{}';\n\n const str = keys\n .slice(0, 3)\n .map(\n (key) => `${key}: ${getShortTypeString(data[key], isDiff) as string}`,\n )\n .concat(keys.length > 3 ? ['…'] : [])\n .join(', ');\n\n return `{ ${str} }`;\n } else if (type === 'Array') {\n if (!isWideLayout) return data.length ? '[…]' : '[]';\n\n const str = data\n .slice(0, 4)\n .map((val: any) => getShortTypeString(val, isDiff))\n .concat(data.length > 4 ? ['…'] : [])\n .join(', ');\n\n return `[${str as string}]`;\n } else {\n return type;\n }\n}\n\nconst getItemString = (\n type: string,\n data: any,\n dataTypeKey: string | symbol | undefined,\n isWideLayout: boolean,\n isDiff?: boolean,\n): JSX.Element => (\n ({ color: theme.ITEM_HINT_COLOR })}>\n {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}\n {dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ''}\n {getText(type, data, isWideLayout, isDiff)}\n \n);\n\nexport default getItemString;\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/tabs/getJsonTreeTheme.ts", "content": "import type { Base16Theme, StylingConfig } from 'react-base16-styling';\n\nexport default function getJsonTreeTheme(\n base16Theme: Base16Theme,\n): StylingConfig {\n return {\n extend: base16Theme,\n nestedNode: ({ style }, keyPath, nodeType, expanded) => ({\n style: {\n ...style,\n whiteSpace: expanded ? 'inherit' : 'nowrap',\n },\n }),\n nestedNodeItemString: ({ style }, keyPath, nodeType, expanded) => ({\n style: {\n ...style,\n display: expanded ? 'none' : 'inline',\n },\n }),\n };\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/themes/index.ts", "content": "export { default as inspector } from './inspector.js';\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/themes/inspector.ts", "content": "export default {\n scheme: 'inspector',\n author: 'Alexander Kuznetsov (alexkuz@gmail.com)',\n base00: '#181818',\n base01: '#282828',\n base02: '#383838',\n base03: '#585858',\n base04: '#b8b8b8',\n base05: '#d8d8d8',\n base06: '#e8e8e8',\n base07: '#FFFFFF',\n base08: '#E92F28',\n base09: '#dc9656',\n base0A: '#f7ca88',\n base0B: '#65AD00',\n base0C: '#86c1b9',\n base0D: '#347BD9',\n base0E: '#EC31C0',\n base0F: '#a16946',\n};\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/utils/getInspectedState.ts", "content": "import { fromJS, isAssociative, Map } from 'immutable';\nimport isIterable from './isIterable.js';\n\nfunction iterateToKey(obj: any, key: string | number) {\n // maybe there's a better way, dunno\n let idx = 0;\n for (const entry of obj) {\n if (Array.isArray(entry)) {\n if (entry[0] === (key as string)) return entry[1];\n } else {\n if (idx > (key as number)) return;\n if (idx === (key as number)) return entry;\n }\n idx++;\n }\n}\n\nexport default function getInspectedState(\n state: S,\n path: (string | number)[],\n convertImmutable: boolean,\n): S {\n state =\n path && path.length\n ? ({\n [path[path.length - 1]]: path.reduce((s: any, key) => {\n if (!s) {\n return s;\n }\n\n if (isAssociative(s)) {\n return s.get(key as number);\n } else if (isIterable(s)) {\n return iterateToKey(s, key);\n }\n\n return s[key];\n }, state),\n } as S)\n : state;\n\n if (convertImmutable) {\n try {\n state = (fromJS(state) as Map).toJS() as unknown as S;\n } catch (e) {} // eslint-disable-line no-empty\n }\n\n return state;\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/utils/isIterable.ts", "content": "export default function isIterable(obj: any) {\n return (\n obj !== null &&\n typeof obj === 'object' &&\n !Array.isArray(obj) &&\n typeof obj[window.Symbol.iterator] === 'function'\n );\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/utils/selectorButtonStyles.ts", "content": "import { css } from '@emotion/react';\nimport type { Interpolation, Theme } from '@emotion/react';\n\nexport const selectorButtonCss: Interpolation = (theme) => ({\n cursor: 'pointer',\n position: 'relative',\n padding: '5px 10px',\n borderStyle: 'solid',\n borderWidth: '1px',\n borderLeftWidth: 0,\n\n '&:first-of-type': {\n borderLeftWidth: '1px',\n borderTopLeftRadius: '3px',\n borderBottomLeftRadius: '3px',\n },\n\n '&:last-of-type': {\n borderTopRightRadius: '3px',\n borderBottomRightRadius: '3px',\n },\n\n backgroundColor: theme.TAB_BACK_COLOR,\n\n '&:hover': {\n backgroundColor: theme.TAB_BACK_HOVER_COLOR,\n },\n\n borderColor: theme.TAB_BORDER_COLOR,\n});\n\nexport const selectorButtonSmallCss = css({\n padding: '0px 8px',\n fontSize: '0.8em',\n});\n\nexport const selectorButtonSelectedCss: Interpolation = (theme) => ({\n backgroundColor: theme.TAB_BACK_SELECTED_COLOR,\n});\n" }, { "path": "packages/redux-devtools-inspector-monitor/src/utils/themes.ts", "content": "import rgba from 'hex-rgba';\nimport type { Base16Theme } from 'react-base16-styling';\nimport { base16Themes as reduxThemes } from 'react-base16-styling';\nimport * as inspectorThemes from '../themes/index.js';\nimport { getBase16Theme, invertBase16Theme } from 'react-base16-styling';\n\nconst base16Themes = { ...reduxThemes, ...inspectorThemes };\nexport type Base16ThemeName = keyof typeof base16Themes;\n\nexport function resolveBase16Theme(theme: Base16ThemeName | Base16Theme) {\n return getBase16Theme(theme, base16Themes);\n}\n\n/**\n * @internal\n */\ndeclare module '@emotion/react' {\n export interface Theme {\n TEXT_COLOR: string;\n TEXT_PLACEHOLDER_COLOR: string;\n BACKGROUND_COLOR: string;\n SELECTED_BACKGROUND_COLOR: string;\n SKIPPED_BACKGROUND_COLOR: string;\n HEADER_BACKGROUND_COLOR: string;\n HEADER_BORDER_COLOR: string;\n BORDER_COLOR: string;\n LIST_BORDER_COLOR: string;\n ACTION_TIME_BACK_COLOR: string;\n ACTION_TIME_COLOR: string;\n PIN_COLOR: string;\n ITEM_HINT_COLOR: string;\n TAB_BACK_SELECTED_COLOR: string;\n TAB_BACK_COLOR: string;\n TAB_BACK_HOVER_COLOR: string;\n TAB_BORDER_COLOR: string;\n DIFF_ADD_COLOR: string;\n DIFF_REMOVE_COLOR: string;\n DIFF_ARROW_COLOR: string;\n LINK_COLOR: string;\n LINK_HOVER_COLOR: string;\n ERROR_COLOR: string;\n }\n}\n\nconst colorMap = (theme: Base16Theme) => ({\n TEXT_COLOR: theme.base06,\n TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),\n BACKGROUND_COLOR: theme.base00,\n SELECTED_BACKGROUND_COLOR: rgba(theme.base03, 20),\n SKIPPED_BACKGROUND_COLOR: rgba(theme.base03, 10),\n HEADER_BACKGROUND_COLOR: rgba(theme.base03, 30),\n HEADER_BORDER_COLOR: rgba(theme.base03, 20),\n BORDER_COLOR: rgba(theme.base03, 50),\n LIST_BORDER_COLOR: rgba(theme.base03, 50),\n ACTION_TIME_BACK_COLOR: rgba(theme.base03, 20),\n ACTION_TIME_COLOR: theme.base04,\n PIN_COLOR: theme.base04,\n ITEM_HINT_COLOR: rgba(theme.base0F, 90),\n TAB_BACK_SELECTED_COLOR: rgba(theme.base03, 20),\n TAB_BACK_COLOR: rgba(theme.base00, 70),\n TAB_BACK_HOVER_COLOR: rgba(theme.base03, 40),\n TAB_BORDER_COLOR: rgba(theme.base03, 50),\n DIFF_ADD_COLOR: rgba(theme.base0B, 40),\n DIFF_REMOVE_COLOR: rgba(theme.base08, 40),\n DIFF_ARROW_COLOR: theme.base0E,\n LINK_COLOR: rgba(theme.base0E, 90),\n LINK_HOVER_COLOR: theme.base0E,\n ERROR_COLOR: theme.base08,\n});\n\nexport function createInspectorMonitorThemeFromBase16Theme(\n base16Theme: Base16Theme,\n invertTheme: boolean,\n) {\n const finalBase16Theme = invertTheme\n ? invertBase16Theme(base16Theme)\n : base16Theme;\n return colorMap(finalBase16Theme);\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.esm.react.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"lib\",\n \"resolveJsonModule\": true,\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"@emotion/react\",\n \"stripInternal\": true\n },\n \"include\": [\"src\"]\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/CHANGELOG.md", "content": "# Change Log\n\n## 6.0.0\n\n### Major Changes\n\n- 12849a4: Convert monitors to ESM\n\n### Patch Changes\n\n- Updated dependencies [d61d31a]\n- Updated dependencies [804e729]\n- Updated dependencies [12849a4]\n - @redux-devtools/ui@3.0.0\n - @redux-devtools/inspector-monitor@7.0.0\n\n## 5.0.0\n\n### Major Changes\n\n- 6163276: Replace styled-components with Emotion\n\n### Patch Changes\n\n- Updated dependencies [6163276]\n- Updated dependencies [20883e5]\n - @redux-devtools/ui@2.0.0\n - @redux-devtools/inspector-monitor@6.1.2\n\n## 4.1.1\n\n### Patch Changes\n\n- @redux-devtools/inspector-monitor@6.1.1\n\n## 4.1.0\n\n### Minor Changes\n\n- 6830118: Add React 19 to peer deps\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/inspector-monitor@7.0.0\n - @redux-devtools/ui@1.4.0\n\n## 4.0.0\n\n### Major Changes\n\n- 5cfe3e5: Update min required React version to 16.8.4\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n - @redux-devtools/inspector-monitor@6.0.0\n\n## 3.0.0\n\n### Major Changes\n\n- 158ba2c: Replace jss with Emotion in inspector-monitor. `@emotion/react` is now a required peer dependency.\n\n### Patch Changes\n\n- Updated dependencies [158ba2c]\n - @redux-devtools/inspector-monitor@5.0.0\n\n## 2.1.0\n\n### Minor Changes\n\n- 6fc18ed7: Add new Redux version to peer dependencies\n\n### Patch Changes\n\n- 7f5bddbd: Widen peer dependencies\n- Updated dependencies [7f5bddbd]\n - @redux-devtools/ui@1.3.1\n\n## 2.0.1\n\n### Patch Changes\n\n- 65205f90: Replace Action with Action\n- Updated dependencies [65205f90]\n - @redux-devtools/inspector-monitor@4.0.1\n\n## 2.0.0\n\n### Major Changes\n\n- 57751ff9: Add react-dom peerDependency and bump react peerDependency to `^16.8.0 || ^17.0.0 || ^18.0.0`\n\n### Patch Changes\n\n- Updated dependencies [57751ff9]\n - @redux-devtools/inspector-monitor@4.0.0\n\n## 1.0.1\n\n### Patch Changes\n\n- Updated dependencies [14a79573]\n- Updated dependencies [d54adb76]\n- Updated dependencies [bb9bd907]\n - @redux-devtools/inspector-monitor@3.1.0\n\n## 1.0.0\n\n### Minor Changes\n\n- 8a7eae4: Add React 18 to peerDependencies range\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - @redux-devtools/inspector-monitor@3.0.0\n - @redux-devtools/ui@1.3.0\n\n## 0.8.6\n\n### Patch Changes\n\n- @redux-devtools/inspector-monitor@2.1.2\n\n## 0.8.0\n\n- Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997) and switches the default export to a named export in order to ensure that the CommonJS output and the ESM output are [interchangeable](https://rollupjs.org/guide/en/#outputexports):\n\n```diff\n- import TestGenerator from '@redux-devtools/inspector-monitor-test-tab';\n- import mochaTemplate from '@redux-devtools/inspector-monitor-test-tab/lib/redux/mocha';\n+ import { TestTab, reduxMochaTemplate } from '@redux-devtools/inspector-monitor-test-tab';\n```\n\n## [0.7.2](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/inspector-monitor-test-tab@0.7.1...@redux-devtools/inspector-monitor-test-tab@0.7.2) (2021-06-11)\n\n### Bug Fixes\n\n- **app:** fix dependency version of inspector ([#732](https://github.com/reduxjs/redux-devtools/issues/732)) ([30c6971](https://github.com/reduxjs/redux-devtools/commit/30c6971d379c53ec1343a20240b73705751f7445))\n\n## [0.7.1](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/inspector-monitor-test-tab@0.7.0...@redux-devtools/inspector-monitor-test-tab@0.7.1) (2021-06-11)\n\n### Bug Fixes\n\n- fix peer dependencies on inpsector monitor ([#730](https://github.com/reduxjs/redux-devtools/issues/730)) ([0291f5c](https://github.com/reduxjs/redux-devtools/commit/0291f5c95e4340a3b5e30a3efe76a1a1a2bb7f5e))\n- fix Select types and usages ([#724](https://github.com/reduxjs/redux-devtools/issues/724)) ([07e409d](https://github.com/reduxjs/redux-devtools/commit/07e409de6a1c3d362929d854542df0c1d74ce18e))\n\n## [0.7.0](https://github.com/reduxjs/redux-devtools/compare/@redux-devtools/inspector-monitor-test-tab@0.6.3...@redux-devtools/inspector-monitor-test-tab@0.7.0) (2021-03-06)\n\n### Features\n\n- update peer dependencies to allow react@^17 ([#703](https://github.com/reduxjs/redux-devtools/issues/703)) ([2aaa9c1](https://github.com/reduxjs/redux-devtools/commit/2aaa9c10a383e3a7ab20b3ab14639781fd7bb2eb))\n\n## 0.6.3 (2021-03-06)\n\n**Note:** Version bump only for package @redux-devtools/inspector-monitor-test-tab\n\n## [0.6.2](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-test-generator@0.6.1...redux-devtools-test-generator@0.6.2) (2020-09-07)\n\n**Note:** Version bump only for package redux-devtools-test-generator\n\n## [0.6.1](https://github.com/reduxjs/redux-devtools/compare/redux-devtools-test-generator@0.6.0...redux-devtools-test-generator@0.6.1) (2020-08-14)\n\n**Note:** Version bump only for package redux-devtools-test-generator\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2016 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.\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/README.md", "content": "# Redux DevTools Test Generator\n\n### Installation\n\n```\nyarn add @redux-devtools/inspector-monitor-test-tab\n```\n\n### Usage\n\nIf you use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev), it's already there, and no additional actions required.\n\nWith [`redux-devtools`](https://github.com/reduxjs/redux-devtools) and [`redux-devtools-inspector-monitor`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector-monitor):\n\n##### `containers/DevTools.js`\n\n```js\nimport React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { InspectorMonitor } from '@redux-devtools/inspector-monitor';\nimport { TestTab, reduxMochaTemplate } from '@redux-devtools/inspector-monitor-test-tab'; // If using default tests.\n\nconst testComponent = (props) => (\n \n);\n\nexport default createDevTools(\n [...defaultTabs, { name: 'Test', component: testComponent }]\n />\n);\n```\n\nInstead of `mochaTemplate.expect` and `mochaTemplate.wrap` you can use your function templates.\n\nIf `useCodemirror` specified, include `codemirror/lib/codemirror.css` style and optionally themes from `codemirror/theme/`.\n\n### Props\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `assertion` | String template or function with an object argument containing `action`, `prevState`, `curState` keys, which returns a string representing the assertion (see the [function](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-inspector-monitor-test-tab/src/redux/mocha/index.ts#L8-L9) or [template](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-inspector-monitor-test-tab/src/redux/mocha/template.ts#L5)). |\n| [`wrap`] | Optional string template or function which gets `assertions` argument and returns a string (see the example [function](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-inspector-monitor-test-tab/src/redux/mocha/index.ts#L11-L13) or [template](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-inspector-monitor-test-tab/src/redux/mocha/template.ts#L7-L8)). |\n| [`useCodemirror`] | Boolean. If specified will use codemirror styles. |\n| [`theme`] | String. Name of [the codemirror theme](https://codemirror.net/demo/theme.html). |\n\n### License\n\nMIT\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/CHANGELOG.md", "content": "# test-demo\n\n## 0.1.19\n\n### Patch Changes\n\n- Updated dependencies [d61d31a]\n- Updated dependencies [804e729]\n- Updated dependencies [12849a4]\n- Updated dependencies [804d6bd]\n - @redux-devtools/ui@3.0.0\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/inspector-monitor@7.0.0\n - @redux-devtools/inspector-monitor-test-tab@6.0.0\n - @redux-devtools/core@5.0.0\n\n## 0.1.18\n\n### Patch Changes\n\n- Updated dependencies [6163276]\n- Updated dependencies [20883e5]\n - @redux-devtools/inspector-monitor-test-tab@5.0.0\n - @redux-devtools/ui@2.0.0\n - @redux-devtools/inspector-monitor@6.1.2\n\n## 0.1.17\n\n### Patch Changes\n\n- Updated dependencies [91f21b2]\n - @redux-devtools/core@4.1.1\n - @redux-devtools/dock-monitor@4.1.1\n - @redux-devtools/inspector-monitor@6.1.1\n - @redux-devtools/inspector-monitor-test-tab@4.1.1\n\n## 0.1.16\n\n### Patch Changes\n\n- Updated dependencies [6830118]\n - @redux-devtools/dock-monitor@5.0.0\n - @redux-devtools/inspector-monitor-test-tab@5.0.0\n - @redux-devtools/inspector-monitor@7.0.0\n - @redux-devtools/ui@1.4.0\n - @redux-devtools/core@4.1.0\n\n## 0.1.15\n\n### Patch Changes\n\n- Updated dependencies [5cfe3e5]\n- Updated dependencies [decc035]\n - @redux-devtools/dock-monitor@4.0.0\n - @redux-devtools/inspector-monitor-test-tab@4.0.0\n - @redux-devtools/inspector-monitor@6.0.0\n - @redux-devtools/core@4.0.0\n\n## 0.1.14\n\n### Patch Changes\n\n- Updated dependencies [158ba2c]\n - @redux-devtools/inspector-monitor-test-tab@3.0.0\n - @redux-devtools/inspector-monitor@5.0.0\n\n## 0.1.13\n\n### Patch Changes\n\n- 65205f90: Replace Action with Action\n- Updated dependencies [65205f90]\n - @redux-devtools/dock-monitor@3.0.2\n - @redux-devtools/inspector-monitor-test-tab@2.0.1\n - @redux-devtools/inspector-monitor@4.0.1\n - @redux-devtools/core@3.13.2\n\n## 0.1.12\n\n### Patch Changes\n\n- Updated dependencies [57751ff9]\n - @redux-devtools/inspector-monitor-test-tab@2.0.0\n - @redux-devtools/inspector-monitor@4.0.0\n\n## 0.1.11\n\n### Patch Changes\n\n- Updated dependencies [14a79573]\n- Updated dependencies [d54adb76]\n- Updated dependencies [bb9bd907]\n - @redux-devtools/inspector-monitor@3.1.0\n - @redux-devtools/inspector-monitor-test-tab@2.0.0\n\n## 0.1.10\n\n### Patch Changes\n\n- Updated dependencies [8a7eae4]\n - @redux-devtools/dock-monitor@3.0.0\n - @redux-devtools/inspector-monitor-test-tab@1.0.0\n - @redux-devtools/inspector-monitor@3.0.0\n - @redux-devtools/ui@1.3.0\n - @redux-devtools/core@3.13.0\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies [4891bf6]\n - @redux-devtools/core@3.12.0\n - @redux-devtools/dock-monitor@2.1.1\n - @redux-devtools/inspector-monitor@2.1.2\n - @redux-devtools/inspector-monitor-test-tab@0.8.6\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/eslint.config.mjs", "content": "import eslintJs from '../../../eslint.js.config.base.mjs';\nimport eslintTs from '../../../eslint.ts.react.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTs(import.meta.dirname),\n ...eslintTs(\n import.meta.dirname,\n ['webpack.config.ts'],\n ['./tsconfig.webpack.json'],\n ),\n {\n ignores: ['dist'],\n },\n];\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/index.html", "content": "\n\n \n \n <%= htmlWebpackPlugin.options.package.name %>\n \"\n />\n \n \n \n
    \n \n\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/package.json", "content": "{\n \"private\": true,\n \"name\": \"test-demo\",\n \"version\": \"0.1.19\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack serve --open\",\n \"build\": \"cross-env TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@redux-devtools/core\": \"workspace:^\",\n \"@redux-devtools/dock-monitor\": \"workspace:^\",\n \"@redux-devtools/inspector-monitor\": \"workspace:^\",\n \"@redux-devtools/inspector-monitor-test-tab\": \"workspace:^\",\n \"@redux-devtools/ui\": \"workspace:^\",\n \"immutable\": \"^5.1.5\",\n \"lodash.shuffle\": \"^4.2.0\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"react-is\": \"^19.2.4\",\n \"react-redux\": \"^9.2.0\",\n \"react-router-dom\": \"^7.13.1\",\n \"redux\": \"^5.0.1\",\n \"redux-logger\": \"^3.0.6\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.29.0\",\n \"@babel/preset-env\": \"^7.29.0\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@types/lodash.shuffle\": \"^4.2.9\",\n \"@types/node\": \"^24.12.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@types/redux-logger\": \"^3.0.13\",\n \"@types/webpack-env\": \"^1.18.8\",\n \"babel-loader\": \"^10.1.1\",\n \"cross-env\": \"^10.1.0\",\n \"css-loader\": \"^7.1.4\",\n \"fork-ts-checker-webpack-plugin\": \"^9.1.0\",\n \"html-webpack-plugin\": \"^5.6.6\",\n \"style-loader\": \"^4.0.0\",\n \"ts-node\": \"^10.9.2\",\n \"typescript\": \"~5.9.3\",\n \"webpack\": \"^5.105.4\",\n \"webpack-cli\": \"^7.0.0\",\n \"webpack-dev-server\": \"^5.2.3\"\n }\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx", "content": "import React, { CSSProperties, useRef } from 'react';\nimport { connect } from 'react-redux';\nimport { Button, Toolbar, Spacer } from '@redux-devtools/ui';\nimport pkg from '@redux-devtools/inspector-monitor-test-tab/package.json';\nimport { useLocation } from 'react-router-dom';\nimport getOptions from './getOptions';\nimport { DemoAppState } from './reducers';\nimport {\n AddFunctionAction,\n AddHugeObjectAction,\n AddImmutableMapAction,\n AddIteratorAction,\n AddRecursiveAction,\n AddSymbolAction,\n ChangeImmutableNestedAction,\n ChangeNestedAction,\n HugePayloadAction,\n IncrementAction,\n PopAction,\n PushAction,\n PushHugeArrayAction,\n ReplaceAction,\n ShuffleArrayAction,\n TimeoutUpdateAction,\n ToggleTimeoutUpdateAction,\n} from './reducers';\n\nconst styles: {\n wrapper: CSSProperties;\n muted: CSSProperties;\n link: CSSProperties;\n} = {\n wrapper: {\n height: '100vh',\n width: '450px',\n margin: 'auto',\n textAlign: 'center',\n },\n muted: {\n color: '#CCCCCC',\n },\n link: {\n margin: '0 0.5rem',\n cursor: 'pointer',\n display: 'block',\n },\n};\n\nconst ROOT = '/'; // process.env.NODE_ENV === 'production' ? '/' : '/';\n\ninterface Props extends Omit<\n DemoAppState,\n 'addFunction' | 'addSymbol' | 'shuffleArray'\n> {\n toggleTimeoutUpdate: (timeoutUpdateEnabled: boolean) => void;\n timeoutUpdate: () => void;\n increment: () => void;\n push: () => void;\n pop: () => void;\n replace: () => void;\n changeNested: () => void;\n pushHugeArray: () => void;\n addIterator: () => void;\n addHugeObject: () => void;\n addRecursive: () => void;\n addImmutableMap: () => void;\n changeImmutableNested: () => void;\n hugePayload: () => void;\n addFunction: () => void;\n addSymbol: () => void;\n shuffleArray: () => void;\n}\n\nfunction DemoApp(props: Props) {\n const timeout = useRef(undefined);\n const location = useLocation();\n\n const options = getOptions(location);\n\n const toggleTimeoutUpdate = () => {\n const enabled = !props.timeoutUpdateEnabled;\n props.toggleTimeoutUpdate(enabled);\n\n if (enabled) {\n timeout.current = window.setInterval(props.timeoutUpdate, 1000);\n } else {\n clearTimeout(timeout.current);\n }\n };\n\n return (\n
    \n

    {pkg.name || Package Name}

    \n
    \n {pkg.description || (\n Package Description\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 \n \n \n \n \n
    \n {options.useExtension ? (\n \n Disable browser extension\n \n ) : (\n \n Use browser extension\n \n )}\n
    \n
    \n );\n}\n\nexport default connect((state: DemoAppState) => state, {\n toggleTimeoutUpdate: (\n timeoutUpdateEnabled: boolean,\n ): ToggleTimeoutUpdateAction => ({\n type: 'TOGGLE_TIMEOUT_UPDATE',\n timeoutUpdateEnabled,\n }),\n timeoutUpdate: (): TimeoutUpdateAction => ({ type: 'TIMEOUT_UPDATE' }),\n increment: (): IncrementAction => ({ type: 'INCREMENT' }),\n push: (): PushAction => ({ type: 'PUSH' }),\n pop: (): PopAction => ({ type: 'POP' }),\n replace: (): ReplaceAction => ({ type: 'REPLACE' }),\n changeNested: (): ChangeNestedAction => ({ type: 'CHANGE_NESTED' }),\n pushHugeArray: (): PushHugeArrayAction => ({ type: 'PUSH_HUGE_ARRAY' }),\n addIterator: (): AddIteratorAction => ({ type: 'ADD_ITERATOR' }),\n addHugeObject: (): AddHugeObjectAction => ({ type: 'ADD_HUGE_OBJECT' }),\n addRecursive: (): AddRecursiveAction => ({ type: 'ADD_RECURSIVE' }),\n addImmutableMap: (): AddImmutableMapAction => ({ type: 'ADD_IMMUTABLE_MAP' }),\n changeImmutableNested: (): ChangeImmutableNestedAction => ({\n type: 'CHANGE_IMMUTABLE_NESTED',\n }),\n hugePayload: (): HugePayloadAction => ({\n type: 'HUGE_PAYLOAD',\n payload: Array.from({ length: 10000 }).map((_, i) => i),\n }),\n addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),\n addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),\n shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),\n})(DemoApp);\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx", "content": "import React from 'react';\nimport { createDevTools } from '@redux-devtools/core';\nimport { InspectorMonitor, Tab } from '@redux-devtools/inspector-monitor';\nimport type { Base16ThemeName } from '@redux-devtools/inspector-monitor';\nimport { DockMonitor } from '@redux-devtools/dock-monitor';\nimport { useLocation } from 'react-router-dom';\nimport getOptions from './getOptions';\nimport { TestTab } from '@redux-devtools/inspector-monitor-test-tab';\nimport { Action } from 'redux';\n\nexport const getDevTools = (location: { search: string }) =>\n createDevTools(\n \n \n [\n {\n name: 'Test',\n component: TestTab,\n },\n ...defaultTabs,\n ] as Tab>[]\n }\n />\n ,\n );\n\nexport function ConnectedDevTools() {\n const location = useLocation();\n const DevTools = getDevTools(location);\n // eslint-disable-next-line react-hooks/static-components\n return ;\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/src/getOptions.ts", "content": "export interface Options {\n useExtension: boolean;\n supportImmutable: boolean;\n theme: string;\n dark: boolean;\n}\n\nexport default function getOptions(location: { search: string }) {\n return {\n useExtension: location.search.includes('ext'),\n supportImmutable: location.search.includes('immutable'),\n theme: getTheme(location),\n dark: location.search.includes('dark'),\n };\n}\n\nfunction getTheme(location: { search: string }) {\n const match = /theme=([^&]+)/.exec(location.search);\n return match ? match[1] : 'inspector';\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx", "content": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Container } from '@redux-devtools/ui';\nimport { Provider } from 'react-redux';\nimport {\n createStore,\n applyMiddleware,\n compose,\n StoreEnhancer,\n StoreEnhancerStoreCreator,\n} from 'redux';\nimport logger from 'redux-logger';\nimport { BrowserRouter, Route, Routes } from 'react-router-dom';\nimport { persistState } from '@redux-devtools/core';\nimport DemoApp from './DemoApp';\nimport { rootReducer } from './reducers';\nimport getOptions from './getOptions';\nimport { ConnectedDevTools, getDevTools } from './DevTools';\n\nfunction getDebugSessionKey() {\n const matches = /[?&]debug_session=([^&#]+)\\b/.exec(window.location.href);\n return matches && matches.length > 0 ? matches[1] : null;\n}\n\nconst ROOT =\n process.env.NODE_ENV === 'production'\n ? '/redux-devtools-inspector-monitor-test-tab/'\n : '/';\n\nconst DevTools = getDevTools(window.location);\n\nconst useDevtoolsExtension =\n !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) &&\n getOptions(window.location).useExtension;\n\nconst enhancer: StoreEnhancer = compose(\n applyMiddleware(logger),\n ((next) => {\n const instrument = useDevtoolsExtension\n ? (\n window as unknown as {\n __REDUX_DEVTOOLS_EXTENSION__(): StoreEnhancer;\n }\n ).__REDUX_DEVTOOLS_EXTENSION__()\n : DevTools.instrument();\n return instrument(next);\n }) as StoreEnhancer,\n persistState(getDebugSessionKey()),\n) as any;\n\nconst store = createStore(rootReducer, enhancer);\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render(\n \n \n \n \n } />\n \n {!useDevtoolsExtension && }\n \n \n ,\n);\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/src/reducers.ts", "content": "import {\n fromJS,\n Map as ImmutableMap,\n List,\n Set as ImmutableSet,\n Stack,\n Seq,\n} from 'immutable';\nimport shuffle from 'lodash.shuffle';\nimport { combineReducers, Reducer } from 'redux';\n\ntype Nested = { long: { nested: { path: { to: { a: string } } }[] } };\n\nconst NESTED = {\n long: {\n nested: [\n {\n path: {\n to: {\n a: 'key',\n },\n },\n },\n ],\n },\n};\n\nconst IMMUTABLE_NESTED = fromJS(NESTED) as ImmutableMap;\n\nconst IMMUTABLE_MAP = ImmutableMap({\n map: ImmutableMap({ a: 1, b: 2, c: 3 }),\n list: List(['a', 'b', 'c']),\n set: ImmutableSet(['a', 'b', 'c']),\n stack: Stack(['a', 'b', 'c']),\n seq: Seq([1, 2, 3, 4, 5, 6, 7, 8]),\n});\n\nconst HUGE_ARRAY = Array.from({ length: 5000 }).map((_, key) => ({\n str: `key ${key}`,\n}));\n\nconst HUGE_OBJECT = Array.from({ length: 5000 }).reduce(\n (o: { [key: string]: string }, _, key) => (\n (o[`key ${key}`] = `item ${key}`),\n o\n ),\n {},\n);\n\nconst FUNC = function (a: number, b: number, c: number) {\n return a + b + c;\n};\n\nconst RECURSIVE: { obj?: unknown } = {};\nRECURSIVE.obj = RECURSIVE;\n\nfunction createIterator() {\n const iterable: { [Symbol.iterator](): IterableIterator } = {\n [Symbol.iterator]: function* iterator() {\n for (let i = 0; i < 333; i++) {\n yield `item ${i}`;\n }\n },\n };\n\n return iterable;\n}\n\nconst DEFAULT_SHUFFLE_ARRAY = [0, 1, null, { id: 1 }, { id: 2 }, 'string'];\n\nexport interface ToggleTimeoutUpdateAction {\n type: 'TOGGLE_TIMEOUT_UPDATE';\n timeoutUpdateEnabled: boolean;\n}\nexport interface TimeoutUpdateAction {\n type: 'TIMEOUT_UPDATE';\n}\nexport interface IncrementAction {\n type: 'INCREMENT';\n}\nexport interface PushAction {\n type: 'PUSH';\n}\nexport interface PopAction {\n type: 'POP';\n}\nexport interface ReplaceAction {\n type: 'REPLACE';\n}\nexport interface ChangeNestedAction {\n type: 'CHANGE_NESTED';\n}\nexport interface PushHugeArrayAction {\n type: 'PUSH_HUGE_ARRAY';\n}\nexport interface AddIteratorAction {\n type: 'ADD_ITERATOR';\n}\nexport interface AddHugeObjectAction {\n type: 'ADD_HUGE_OBJECT';\n}\nexport interface AddRecursiveAction {\n type: 'ADD_RECURSIVE';\n}\nexport interface AddImmutableMapAction {\n type: 'ADD_IMMUTABLE_MAP';\n}\nexport interface ChangeImmutableNestedAction {\n type: 'CHANGE_IMMUTABLE_NESTED';\n}\nexport interface HugePayloadAction {\n type: 'HUGE_PAYLOAD';\n payload: number[];\n}\nexport interface AddFunctionAction {\n type: 'ADD_FUNCTION';\n}\nexport interface AddSymbolAction {\n type: 'ADD_SYMBOL';\n}\nexport interface ShuffleArrayAction {\n type: 'SHUFFLE_ARRAY';\n}\ntype DemoAppAction =\n | ToggleTimeoutUpdateAction\n | TimeoutUpdateAction\n | IncrementAction\n | PushAction\n | PopAction\n | ReplaceAction\n | ChangeNestedAction\n | PushHugeArrayAction\n | AddIteratorAction\n | AddHugeObjectAction\n | AddRecursiveAction\n | AddImmutableMapAction\n | ChangeImmutableNestedAction\n | HugePayloadAction\n | AddFunctionAction\n | AddSymbolAction\n | ShuffleArrayAction;\n\nexport interface DemoAppState {\n timeoutUpdateEnabled: boolean;\n store: number;\n undefined: { val: undefined };\n null: null;\n func: () => void;\n array: number[];\n hugeArrays: { str: string }[];\n hugeObjects: { [key: string]: string }[];\n iterators: { [Symbol.iterator](): IterableIterator }[];\n nested: Nested;\n recursive: { obj?: unknown }[];\n immutables: Immutable.Map[];\n immutableNested: Immutable.Map;\n addFunction: { f: (a: number, b: number, c: number) => number } | null;\n addSymbol: { s: symbol; error: Error } | null;\n shuffleArray: unknown[];\n}\n\nexport const rootReducer: Reducer =\n combineReducers({\n timeoutUpdateEnabled: (state = false, action: DemoAppAction) =>\n action.type === 'TOGGLE_TIMEOUT_UPDATE'\n ? action.timeoutUpdateEnabled\n : state,\n store: (state = 0, action: DemoAppAction) =>\n action.type === 'INCREMENT' ? state + 1 : state,\n undefined: (state = { val: undefined }) => state,\n null: (state = null) => state,\n func: (\n state = () => {\n // noop\n },\n ) => state,\n array: (state = [], action: DemoAppAction) =>\n action.type === 'PUSH'\n ? [...state, Math.random()]\n : action.type === 'POP'\n ? state.slice(0, state.length - 1)\n : action.type === 'REPLACE'\n ? [Math.random(), ...state.slice(1)]\n : state,\n hugeArrays: (state = [], action: DemoAppAction) =>\n action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,\n hugeObjects: (state = [], action: DemoAppAction) =>\n action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,\n iterators: (state = [], action: DemoAppAction) =>\n action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,\n nested: (state = NESTED, action: DemoAppAction) =>\n action.type === 'CHANGE_NESTED'\n ? {\n ...state,\n long: {\n nested: [\n {\n path: {\n to: {\n a: state.long.nested[0].path.to.a + '!',\n },\n },\n },\n ],\n },\n }\n : state,\n recursive: (state = [], action: DemoAppAction) =>\n action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,\n immutables: (state = [], action: DemoAppAction) =>\n action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,\n immutableNested: (state = IMMUTABLE_NESTED, action: DemoAppAction) =>\n action.type === 'CHANGE_IMMUTABLE_NESTED'\n ? state.updateIn(\n ['long', 'nested', 0, 'path', 'to', 'a'],\n (str: unknown) => (str as string) + '!',\n )\n : state,\n addFunction: (state = null, action: DemoAppAction) =>\n action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,\n addSymbol: (state = null, action: DemoAppAction) =>\n action.type === 'ADD_SYMBOL'\n ? { s: window.Symbol('symbol'), error: new Error('TEST') }\n : state,\n shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action: DemoAppAction) =>\n action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,\n }) as any;\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.react.base.json\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true,\n \"types\": [\"webpack-env\"]\n },\n \"include\": [\"../src\", \"src\"]\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/tsconfig.webpack.json", "content": "{\n \"extends\": \"../../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"resolveJsonModule\": true,\n \"types\": [\"node\", \"webpack-dev-server\"]\n },\n \"include\": [\"webpack.config.ts\"]\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/demo/webpack.config.ts", "content": "import * as path from 'path';\nimport * as webpack from 'webpack';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';\nimport pkg from '@redux-devtools/inspector-monitor-test-tab/package.json';\n\nconst config: webpack.Configuration = {\n mode: 'development',\n entry: './src/index.tsx',\n devtool: 'eval-source-map',\n devServer: {\n static: './dist',\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: './index.html',\n package: pkg,\n }),\n new ForkTsCheckerWebpackPlugin(),\n ],\n output: {\n filename: 'bundle.js',\n path: path.join(__dirname, 'dist'),\n clean: true,\n },\n module: {\n rules: [\n {\n test: /\\.(js|ts)x?$/,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: [\n ['@babel/preset-env', { targets: 'defaults' }],\n '@babel/preset-react',\n '@babel/preset-typescript',\n ],\n },\n },\n },\n {\n test: /\\.css$/i,\n use: ['style-loader', 'css-loader'],\n },\n ],\n },\n resolve: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n};\n\nexport default config;\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/eslint.config.mjs", "content": "import eslintJs from '../../eslint.js.config.base.mjs';\nimport eslintTsReact from '../../eslint.ts.react.config.base.mjs';\nimport eslintTsReactJest from '../../eslint.ts.react.jest.config.base.mjs';\n\nexport default [\n ...eslintJs,\n ...eslintTsReact(import.meta.dirname),\n ...eslintTsReactJest(import.meta.dirname),\n {\n ignores: ['demo', 'jest.config.ts', 'lib'],\n },\n];\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/jest.config.ts", "content": "import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest';\n\nconst presetConfig = createDefaultEsmPreset({\n tsconfig: 'tsconfig.test.json',\n});\n\nconst jestConfig: JestConfigWithTsJest = {\n ...presetConfig,\n testEnvironment: 'jsdom',\n moduleNameMapper: {\n '^(\\\\.{1,2}/.*)\\\\.js$': '$1',\n '\\\\.css$': '/test/__mocks__/styleMock.ts',\n },\n};\n\nexport default jestConfig;\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/package.json", "content": "{\n \"name\": \"@redux-devtools/inspector-monitor-test-tab\",\n \"version\": \"6.0.0\",\n \"description\": \"Generate tests for redux devtools.\",\n \"keywords\": [\n \"redux\",\n \"devtools\",\n \"test\",\n \"flux\",\n \"react\",\n \"hot reloading\",\n \"time travel\",\n \"live edit\"\n ],\n \"homepage\": \"https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor-test-tab\",\n \"bugs\": {\n \"url\": \"https://github.com/reduxjs/redux-devtools/issues\"\n },\n \"license\": \"MIT\",\n \"author\": \"Mihail Diordiev (https://github.com/zalmoxisus)\",\n \"files\": [\n \"lib\",\n \"src\"\n ],\n \"exports\": {\n \".\": \"./lib/index.js\",\n \"./package.json\": \"./package.json\"\n },\n \"type\": \"module\",\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/reduxjs/redux-devtools.git\"\n },\n \"scripts\": {\n \"build\": \"tsc\",\n \"clean\": \"rimraf lib\",\n \"test\": \"node --experimental-vm-modules node_modules/jest/bin/jest.js\",\n \"lint\": \"eslint .\",\n \"type-check\": \"tsc --noEmit\",\n \"prepack\": \"pnpm run clean && pnpm run build\",\n \"prepublish\": \"pnpm run type-check && pnpm run lint && pnpm run test\"\n },\n \"dependencies\": {\n \"@redux-devtools/ui\": \"workspace:^\",\n \"es6template\": \"^1.0.5\",\n \"javascript-stringify\": \"^2.1.0\",\n \"jsan\": \"^3.1.14\",\n \"object-path\": \"^0.11.8\",\n \"react-icons\": \"^5.6.0\",\n \"simple-diff\": \"^1.7.3\"\n },\n \"devDependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@redux-devtools/core\": \"workspace:^\",\n \"@redux-devtools/inspector-monitor\": \"workspace:^\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/react\": \"^16.3.2\",\n \"@types/es6template\": \"^1.0.5\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/jsan\": \"^3.1.5\",\n \"@types/object-path\": \"^0.11.4\",\n \"@types/react\": \"^19.2.14\",\n \"jest\": \"^30.3.0\",\n \"jest-environment-jsdom\": \"^30.3.0\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"redux\": \"^5.0.1\",\n \"rimraf\": \"^6.1.3\",\n \"ts-jest\": \"^29.4.6\",\n \"typescript\": \"~5.9.3\"\n },\n \"peerDependencies\": {\n \"@emotion/react\": \"^11.14.0\",\n \"@emotion/styled\": \"^11.14.1\",\n \"@redux-devtools/inspector-monitor\": \"workspace:^\",\n \"@types/react\": \"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"redux\": \"^3.4.0 || ^4.0.0 || ^5.0.0\"\n }\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/TestGenerator.tsx", "content": "import React, { PureComponent, Component, ReactNode } from 'react';\nimport { stringify } from 'javascript-stringify';\nimport objectPath from 'object-path';\nimport jsan from 'jsan';\nimport diff, { DiffEvent } from 'simple-diff';\nimport es6template from 'es6template';\nimport { Editor } from '@redux-devtools/ui';\nimport { TabComponentProps } from '@redux-devtools/inspector-monitor';\nimport { Action } from 'redux';\nimport { AssertionLocals, DispatcherLocals, WrapLocals } from './types.js';\n\nexport const fromPath = (path: (string | number)[]) =>\n path.map((a) => (typeof a === 'string' ? `.${a}` : `[${a}]`)).join('');\n\nfunction getState(\n s: { state: S; error?: string } | undefined,\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n defaultValue?: {},\n) {\n if (!s) return defaultValue;\n return JSON.parse(jsan.stringify(s.state));\n}\n\nexport function compare(\n s1: { state: S; error?: string } | undefined,\n s2: { state: S; error?: string },\n cb: (value: { path: string; curState: number | string | undefined }) => void,\n // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n defaultValue?: {},\n) {\n const paths: string[] = []; // Already processed\n function generate(\n event: DiffEvent | { type: 'move-item'; newPath: (string | number)[] },\n ) {\n let curState: number | string | undefined;\n let path = fromPath(event.newPath);\n\n if (event.type === 'remove-item' || event.type === 'move-item') {\n if (paths.length && paths.includes(path)) return;\n paths.push(path);\n const v = objectPath.get(s2.state as unknown as object, event.newPath);\n curState = v.length;\n path += '.length';\n } else if (event.type === 'add-item') {\n generate({ type: 'move-item', newPath: event.newPath });\n path += `[${event.newIndex!}]`;\n curState = stringify(event.newValue);\n } else {\n curState = stringify(event.newValue);\n }\n\n // console.log(`expect(store${path}).toEqual(${curState});`);\n cb({ path, curState });\n }\n\n diff(\n getState(s1, defaultValue),\n getState(s2, defaultValue) /* , { idProp: '*' } */,\n ).forEach(generate);\n}\n\ninterface Props> extends Omit<\n TabComponentProps,\n 'monitorState' | 'updateMonitorState'\n> {\n name?: string;\n isVanilla?: boolean;\n wrap?: string | ((locals: WrapLocals) => string);\n dispatcher?: string | ((locals: DispatcherLocals) => string);\n assertion?: string | ((locals: AssertionLocals) => string);\n useCodemirror: boolean;\n indentation?: number;\n header?: ReactNode;\n}\n\nexport default class TestGenerator<\n S,\n A extends Action,\n> extends (PureComponent || Component)> {\n getMethod(action: A) {\n let type = action.type;\n if (type[0] === '┗') type = type.substr(1).trim();\n const args = (action as unknown as { arguments: unknown[] }).arguments\n ? (action as unknown as { arguments: unknown[] }).arguments\n .map((arg) => stringify(arg))\n .join(',')\n : '';\n return `${type}(${args})`;\n }\n\n getAction(action: A) {\n if (action.type === '@@INIT') return '{}';\n return stringify(action);\n }\n\n generateTest() {\n const {\n computedStates,\n actions,\n selectedActionId,\n startActionId,\n isVanilla,\n name,\n } = this.props;\n\n if (!actions || !computedStates || computedStates.length < 1) return '';\n\n let { wrap, assertion, dispatcher, indentation } = this.props;\n if (typeof assertion === 'string')\n assertion = es6template.compile(assertion);\n if (typeof wrap === 'string') {\n const ident = /\\n.+\\$\\{assertions}/.exec(wrap);\n if (ident) indentation = ident[0].length - 13;\n wrap = es6template.compile(wrap);\n }\n if (typeof dispatcher === 'string')\n dispatcher = es6template.compile(dispatcher);\n\n let space = '';\n if (indentation) space = Array(indentation).join(' ');\n\n let r = '';\n let isFirst = true;\n let i;\n if (startActionId !== null) i = startActionId;\n else if (selectedActionId !== null) i = selectedActionId;\n else i = computedStates.length - 1;\n const startIdx = i > 0 ? i : 1;\n\n const addAssertions = ({\n path,\n curState,\n }: {\n path: string;\n curState: number | string | undefined;\n }) => {\n r += `${space}${(assertion as (locals: AssertionLocals) => string)({\n path,\n curState,\n })}\\n`;\n };\n\n while (actions[i]) {\n if (\n !isVanilla ||\n /* eslint-disable-next-line no-useless-escape */\n /^┗?\\s?[a-zA-Z0-9_@.\\[\\]-]+?$/.test(actions[i].action.type)\n ) {\n if (isFirst) isFirst = false;\n else r += space;\n if (!isVanilla || actions[i].action.type[0] !== '@') {\n r +=\n (dispatcher as (locals: DispatcherLocals) => string)({\n action: !isVanilla\n ? this.getAction(actions[i].action)\n : this.getMethod(actions[i].action),\n prevState:\n i > 0 ? stringify(computedStates[i - 1].state) : undefined,\n }) + '\\n';\n }\n if (!isVanilla) {\n addAssertions({\n path: '',\n curState: stringify(computedStates[i].state),\n });\n } else {\n compare(\n computedStates[i - 1],\n computedStates[i],\n addAssertions,\n isVanilla && {},\n );\n }\n }\n i++;\n if (i > selectedActionId!) break;\n }\n\n r = r.trim();\n if (wrap) {\n if (!isVanilla) r = wrap({ name, assertions: r });\n else {\n r = wrap({\n name: /^[a-zA-Z0-9_-]+?$/.test(name as string) ? name : 'Store',\n actionName:\n (selectedActionId === null || selectedActionId > 0) &&\n actions[startIdx]\n ? actions[startIdx].action.type.replace(/[^a-zA-Z0-9_-]+/, '')\n : 'should return the initial state',\n initialState: stringify(computedStates[startIdx - 1].state),\n assertions: r,\n });\n }\n }\n return r;\n }\n\n render() {\n const code = this.generateTest();\n\n if (!this.props.useCodemirror) {\n return (\n \n );\n }\n\n return ;\n }\n\n static defaultProps = {\n useCodemirror: true,\n selectedActionId: null,\n startActionId: null,\n };\n}\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx", "content": "import React, { Component } from 'react';\nimport {\n Toolbar,\n Container,\n Button,\n Select,\n Notification,\n Dialog,\n} from '@redux-devtools/ui';\nimport { MdAdd } from 'react-icons/md';\nimport { MdEdit } from 'react-icons/md';\nimport { Action } from 'redux';\nimport {\n DevtoolsInspectorState,\n TabComponentProps,\n} from '@redux-devtools/inspector-monitor';\nimport { formSchema, uiSchema, defaultFormData } from './templateForm.js';\nimport TestGenerator from './TestGenerator.js';\nimport jestTemplate from './redux/jest/template.js';\nimport mochaTemplate from './redux/mocha/template.js';\nimport tapeTemplate from './redux/tape/template.js';\nimport avaTemplate from './redux/ava/template.js';\nimport { Template } from './types.js';\n\nexport const getDefaultTemplates = (/* lib */): Template[] =>\n /*\n if (lib === 'redux') {\n return [mochaTemplate, tapeTemplate, avaTemplate];\n }\n return [mochaVTemplate, tapeVTemplate, avaVTemplate];\n */\n [jestTemplate, mochaTemplate, tapeTemplate, avaTemplate];\n\ninterface TestGeneratorMonitorState {\n hideTip?: boolean;\n selected?: number;\n templates?: Template[];\n}\n\ninterface State {\n dialogStatus: 'Add' | 'Edit' | null;\n}\n\nexport class TestTab> extends Component<\n TabComponentProps,\n State\n> {\n state: State = { dialogStatus: null };\n\n getPersistedState = (): TestGeneratorMonitorState =>\n (this.props.monitorState as { testGenerator?: TestGeneratorMonitorState })\n .testGenerator || {};\n\n handleSelectTemplate = (selectedTemplate: Template | null | undefined) => {\n const { templates = getDefaultTemplates() } = this.getPersistedState();\n this.updateState({ selected: templates.indexOf(selectedTemplate!) });\n };\n\n handleCloseTip = () => {\n this.updateState({ hideTip: true });\n };\n\n handleCloseDialog = () => {\n this.setState({ dialogStatus: null });\n };\n\n handleSubmit = ({ formData: template }: { formData?: Template }) => {\n const { templates = getDefaultTemplates(), selected = 0 } =\n this.getPersistedState();\n if (this.state.dialogStatus === 'Add') {\n this.updateState({\n selected: templates.length,\n templates: [...templates, template!],\n });\n } else {\n const editedTemplates = [...templates];\n editedTemplates[selected] = template!;\n this.updateState({\n templates: editedTemplates,\n });\n }\n this.handleCloseDialog();\n };\n\n handleRemove = () => {\n const { templates = getDefaultTemplates(), selected = 0 } =\n this.getPersistedState();\n this.updateState({\n selected: 0,\n templates:\n templates.length === 1\n ? undefined\n : [...templates.slice(0, selected), ...templates.slice(selected + 1)],\n });\n this.handleCloseDialog();\n };\n\n addTemplate = () => {\n this.setState({ dialogStatus: 'Add' });\n };\n\n editTemplate = () => {\n this.setState({ dialogStatus: 'Edit' });\n };\n\n updateState = (newState: TestGeneratorMonitorState) => {\n this.props.updateMonitorState({\n testGenerator: {\n ...(\n this.props.monitorState as {\n testGenerator?: TestGeneratorMonitorState;\n }\n ).testGenerator,\n ...newState,\n },\n } as Partial);\n };\n\n render() {\n const { monitorState, updateMonitorState, ...rest } = this.props; // eslint-disable-line no-unused-vars, max-len\n const { dialogStatus } = this.state;\n const persistedState = this.getPersistedState();\n const { selected = 0, templates = getDefaultTemplates() } = persistedState;\n const template = templates[selected];\n const { name, assertion, dispatcher, wrap } = template;\n\n return (\n \n \n
    \n template.name!}\n getOptionLabel={(template: Template) => template.name!}\n value={templates.find((template) => template.name === name)}\n onChange={this.handleSelectTemplate}\n />\n
    \n \n \n     \n {!assertion ? (\n No template for tests specified.\n ) : (\n \n isVanilla={false}\n assertion={assertion}\n dispatcher={dispatcher}\n wrap={wrap}\n {...rest}\n />\n )}\n {!persistedState.hideTip &&\n assertion &&\n rest.startActionId === null && (\n \n Hold SHIFT key to select more actions.\n \n )}\n {dialogStatus && (\n \n open\n title={`${dialogStatus} test template`}\n onDismiss={this.handleCloseDialog}\n onSubmit={this.handleSubmit}\n actions={[\n ,\n ,\n ]}\n submitText={dialogStatus}\n schema={formSchema}\n uiSchema={uiSchema}\n formData={dialogStatus === 'Edit' ? template : defaultFormData}\n />\n )}\n     \n );\n }\n}\n\nexport { default as reduxAvaTemplate } from './redux/ava/index.js';\nexport { default as reduxJestTemplate } from './redux/jest/index.js';\nexport { default as reduxMochaTemplate } from './redux/mocha/index.js';\nexport { default as reduxTapeTemplate } from './redux/tape/index.js';\nexport { default as vanillaAvaTemplate } from './vanilla/ava/index.js';\nexport { default as vanillaJestTemplate } from './vanilla/jest/index.js';\nexport { default as vanillaMochaTemplate } from './vanilla/mocha/index.js';\nexport { default as vanillaTapeTemplate } from './vanilla/tape/index.js';\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/ava/index.ts", "content": "import { AssertionLocals, DispatcherLocals, WrapLocals } from '../../types.js';\n\nexport const name = 'Ava template';\n\nexport const dispatcher = ({ action, prevState }: DispatcherLocals) =>\n `state = reducers(${prevState!}, ${action!});`;\n\nexport const assertion = ({ curState }: AssertionLocals) =>\n `t.deepEqual(state, ${curState!});`;\n\nexport const wrap = ({ assertions }: WrapLocals) =>\n `import test from 'ava';\nimport reducers from '../../reducers';\n\ntest('reducers', (t) => {\n let state;\n ${assertions}\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/ava/template.ts", "content": "export const name = 'Ava template';\n\nexport const dispatcher = 'state = reducers(${prevState}, ${action});';\n\nexport const assertion = 't.deepEqual(state, ${curState});';\n\nexport const wrap = `import test from 'ava';\nimport reducers from '../../reducers';\n\ntest('reducers', (t) => {\n let state;\n \\${assertions}\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/jest/index.ts", "content": "import { AssertionLocals, DispatcherLocals, WrapLocals } from '../../types.js';\n\nexport const name = 'Jest template';\n\nexport const dispatcher = ({ action, prevState }: DispatcherLocals) =>\n `state = reducers(${prevState!}, ${action!});`;\n\nexport const assertion = ({ curState }: AssertionLocals) =>\n `expect(state).toEqual(${curState!});`;\n\nexport const wrap = ({ assertions }: WrapLocals) =>\n `import reducers from '../../reducers';\n\ntest('reducers', () => {\n let state;\n ${assertions}\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/jest/template.ts", "content": "export const name = 'Jest template';\n\nexport const dispatcher = 'state = reducers(${prevState}, ${action});';\n\nexport const assertion = 'expect(state).toEqual(${curState});';\n\nexport const wrap = `import reducers from '../../reducers';\n\ntest('reducers', () => {\n let state;\n \\${assertions}\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/mocha/index.ts", "content": "import { AssertionLocals, DispatcherLocals, WrapLocals } from '../../types.js';\n\nexport const name = 'Mocha template';\n\nexport const dispatcher = ({ action, prevState }: DispatcherLocals) =>\n `state = reducers(${prevState!}, ${action!});`;\n\nexport const assertion = ({ curState }: AssertionLocals) =>\n `expect(state).toEqual(${curState!});`;\n\nexport const wrap = ({ assertions }: WrapLocals) =>\n `import expect from 'expect';\nimport reducers from '../../reducers';\n\ndescribe('reducers', () => {\n it('should handle actions', () => {\n let state;\n ${assertions}\n });\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/mocha/template.ts", "content": "export const name = 'Mocha template';\n\nexport const dispatcher = 'state = reducers(${prevState}, ${action});';\n\nexport const assertion = 'expect(state).toEqual(${curState});';\n\nexport const wrap = `import expect from 'expect';\nimport reducers from '../../reducers';\n\ndescribe('reducers', () => {\n it('should handle actions', () => {\n let state;\n \\${assertions}\n });\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/tape/index.ts", "content": "import { AssertionLocals, DispatcherLocals, WrapLocals } from '../../types.js';\n\nexport const name = 'Tape template';\n\nexport const dispatcher = ({ action, prevState }: DispatcherLocals) =>\n `state = reducers(${prevState!}, ${action!});`;\n\nexport const assertion = ({ curState }: AssertionLocals) =>\n `t.deepEqual(state, ${curState!});`;\n\nexport const wrap = ({ assertions }: WrapLocals) =>\n `import test from 'tape';\nimport reducers from '../../reducers';\n\ntest('reducers', (t) => {\n let state;\n ${assertions}\n t.end();\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/redux/tape/template.ts", "content": "export const name = 'Tape template';\n\nexport const dispatcher = 'state = reducers(${prevState}, ${action});';\n\nexport const assertion = 't.deepEqual(state, ${curState});';\n\nexport const wrap = `import test from 'tape';\nimport reducers from '../../reducers';\n\ntest('reducers', (t) => {\n let state;\n \\${assertions}\n t.end();\n});\n`;\n\nexport default { name, assertion, dispatcher, wrap };\n" }, { "path": "packages/redux-devtools-inspector-monitor-test-tab/src/templateForm.ts", "content": "import { Template } from './types.js';\n\nexport const formSchema = {\n type: 'object' as const,\n required: ['name'],\n properties: {\n name: {\n type: 'string' as const,\n title: 'Template name',\n },\n dispatcher: {\n type: 'string' as const,\n title: 'Dispatcher: ({ action, prevState }) => (`