mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-22 09:36:43 +03:00
chore(extension): move npm package (#657)
* Start adding extension * prettier
This commit is contained in:
parent
c91471a41d
commit
7ae485b035
50
packages/redux-devtools-extension/README.md
Normal file
50
packages/redux-devtools-extension/README.md
Normal file
|
@ -0,0 +1,50 @@
|
|||
# Redux DevTools Extension's helper
|
||||
|
||||
[![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)
|
||||
|
||||
## Usage
|
||||
|
||||
Install:
|
||||
|
||||
```
|
||||
npm install --save redux-devtools-extension
|
||||
```
|
||||
|
||||
and use like that:
|
||||
|
||||
```js
|
||||
import { createStore, applyMiddleware } from 'redux';
|
||||
import { composeWithDevTools } from 'redux-devtools-extension';
|
||||
|
||||
const store = createStore(
|
||||
reducer,
|
||||
composeWithDevTools(
|
||||
applyMiddleware(...middleware)
|
||||
// other store enhancers if any
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
or if needed to apply [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig):
|
||||
|
||||
```js
|
||||
import { createStore, applyMiddleware } from 'redux';
|
||||
import { composeWithDevTools } from 'redux-devtools-extension';
|
||||
|
||||
const composeEnhancers = composeWithDevTools({
|
||||
// Specify here name, actionsBlacklist, actionsCreators and other options
|
||||
});
|
||||
const store = createStore(
|
||||
reducer,
|
||||
composeEnhancers(
|
||||
applyMiddleware(...middleware)
|
||||
// other store enhancers if any
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
There’re just [few lines of code](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/index.js). If you don’t want to allow the extension in production, just use ‘redux-devtools-extension/developmentOnly’ instead of ‘redux-devtools-extension’.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
1
packages/redux-devtools-extension/developmentOnly.d.ts
vendored
Normal file
1
packages/redux-devtools-extension/developmentOnly.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
export * from 'redux-devtools-extension';
|
26
packages/redux-devtools-extension/developmentOnly.js
Normal file
26
packages/redux-devtools-extension/developmentOnly.js
Normal file
|
@ -0,0 +1,26 @@
|
|||
'use strict';
|
||||
|
||||
var compose = require('redux').compose;
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.composeWithDevTools =
|
||||
process.env.NODE_ENV !== 'production' &&
|
||||
typeof window !== 'undefined' &&
|
||||
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|
||||
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|
||||
: function () {
|
||||
if (arguments.length === 0) return undefined;
|
||||
if (typeof arguments[0] === 'object') return compose;
|
||||
return compose.apply(null, arguments);
|
||||
};
|
||||
|
||||
exports.devToolsEnhancer =
|
||||
process.env.NODE_ENV !== 'production' &&
|
||||
typeof window !== 'undefined' &&
|
||||
window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
? window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
: function () {
|
||||
return function (noop) {
|
||||
return noop;
|
||||
};
|
||||
};
|
174
packages/redux-devtools-extension/index.d.ts
vendored
Normal file
174
packages/redux-devtools-extension/index.d.ts
vendored
Normal file
|
@ -0,0 +1,174 @@
|
|||
import { Action, ActionCreator, StoreEnhancer, compose } from 'redux';
|
||||
|
||||
export interface EnhancerOptions {
|
||||
/**
|
||||
* the instance name to be showed 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`.
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* action creators functions to be available in the Dispatcher.
|
||||
*/
|
||||
actionCreators?: ActionCreator<any>[] | { [key: string]: ActionCreator<any> };
|
||||
/**
|
||||
* 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 500 ms.
|
||||
*/
|
||||
latency?: 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 50
|
||||
*/
|
||||
maxAge?: number;
|
||||
/**
|
||||
* - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
|
||||
* - `false` - will handle also circular references.
|
||||
* - `true` - will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.
|
||||
* - object, which contains `date`, `regex`, `undefined`, `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.
|
||||
*/
|
||||
serialize?:
|
||||
| boolean
|
||||
| {
|
||||
date?: boolean;
|
||||
regex?: boolean;
|
||||
undefined?: boolean;
|
||||
error?: boolean;
|
||||
symbol?: boolean;
|
||||
map?: boolean;
|
||||
set?: boolean;
|
||||
function?: boolean | Function;
|
||||
};
|
||||
/**
|
||||
* function which takes `action` object and id number as arguments, and should return `action` object back.
|
||||
*/
|
||||
actionSanitizer?: <A extends Action>(action: A, id: number) => A;
|
||||
/**
|
||||
* function which takes `state` object and index as arguments, and should return `state` object back.
|
||||
*/
|
||||
stateSanitizer?: <S>(state: S, index: number) => S;
|
||||
/**
|
||||
* *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
|
||||
* If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
|
||||
*/
|
||||
actionsBlacklist?: string | string[];
|
||||
/**
|
||||
* *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
|
||||
* If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
|
||||
*/
|
||||
actionsWhitelist?: string | string[];
|
||||
/**
|
||||
* called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor.
|
||||
* Use it as a more advanced version of `actionsBlacklist`/`actionsWhitelist` parameters.
|
||||
*/
|
||||
predicate?: <S, A extends Action>(state: S, action: A) => boolean;
|
||||
/**
|
||||
* if specified as `false`, it will not record the changes till clicking on `Start recording` button.
|
||||
* Available only for Redux enhancer, for others use `autoPause`.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
shouldRecordChanges?: boolean;
|
||||
/**
|
||||
* 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 "@@PAUSED""
|
||||
*/
|
||||
pauseActionType?: string;
|
||||
/**
|
||||
* 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 false
|
||||
*/
|
||||
autoPause?: 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 false
|
||||
*/
|
||||
shouldStartLocked?: boolean;
|
||||
/**
|
||||
* if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Available only for Redux enhancer.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
shouldHotReload?: 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.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
shouldCatchErrors?: boolean;
|
||||
/**
|
||||
* If you want to restrict the extension, specify the features you allow.
|
||||
* If not specified, all of the features are enabled. When set as an object, only those included as `true` will be allowed.
|
||||
* 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.
|
||||
* Otherwise, you'll get/set the data right from the monitor part.
|
||||
*/
|
||||
features?: {
|
||||
/**
|
||||
* start/pause recording of dispatched actions
|
||||
*/
|
||||
pause?: boolean;
|
||||
/**
|
||||
* lock/unlock dispatching actions and side effects
|
||||
*/
|
||||
lock?: boolean;
|
||||
/**
|
||||
* persist states on page reloading
|
||||
*/
|
||||
persist?: boolean;
|
||||
/**
|
||||
* export history of actions in a file
|
||||
*/
|
||||
export?: boolean | 'custom';
|
||||
/**
|
||||
* import history of actions from a file
|
||||
*/
|
||||
import?: boolean | 'custom';
|
||||
/**
|
||||
* jump back and forth (time travelling)
|
||||
*/
|
||||
jump?: boolean;
|
||||
/**
|
||||
* skip (cancel) actions
|
||||
*/
|
||||
skip?: boolean;
|
||||
/**
|
||||
* drag and drop actions in the history list
|
||||
*/
|
||||
reorder?: boolean;
|
||||
/**
|
||||
* dispatch custom actions or action creators
|
||||
*/
|
||||
dispatch?: boolean;
|
||||
/**
|
||||
* generate tests for the selected actions
|
||||
*/
|
||||
test?: boolean;
|
||||
};
|
||||
/**
|
||||
* Set to true or a stacktrace-returning function to record call stack traces for dispatched actions.
|
||||
* Defaults to false.
|
||||
*/
|
||||
trace?: boolean | (<A extends Action>(action: A) => string);
|
||||
/**
|
||||
* The maximum number of stack trace entries to record per action. Defaults to 10.
|
||||
*/
|
||||
traceLimit?: number;
|
||||
}
|
||||
|
||||
export function composeWithDevTools<StoreExt, StateExt>(
|
||||
...funcs: Array<StoreEnhancer<StoreExt>>
|
||||
): StoreEnhancer<StoreExt>;
|
||||
export function composeWithDevTools(options: EnhancerOptions): typeof compose;
|
||||
export function devToolsEnhancer(options: EnhancerOptions): StoreEnhancer<any>;
|
22
packages/redux-devtools-extension/index.js
Normal file
22
packages/redux-devtools-extension/index.js
Normal file
|
@ -0,0 +1,22 @@
|
|||
'use strict';
|
||||
|
||||
var compose = require('redux').compose;
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.composeWithDevTools =
|
||||
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|
||||
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|
||||
: function () {
|
||||
if (arguments.length === 0) return undefined;
|
||||
if (typeof arguments[0] === 'object') return compose;
|
||||
return compose.apply(null, arguments);
|
||||
};
|
||||
|
||||
exports.devToolsEnhancer =
|
||||
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
? window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
: function () {
|
||||
return function (noop) {
|
||||
return noop;
|
||||
};
|
||||
};
|
1
packages/redux-devtools-extension/logOnly.d.ts
vendored
Normal file
1
packages/redux-devtools-extension/logOnly.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
export * from 'redux-devtools-extension';
|
60
packages/redux-devtools-extension/logOnly.js
Normal file
60
packages/redux-devtools-extension/logOnly.js
Normal file
|
@ -0,0 +1,60 @@
|
|||
'use strict';
|
||||
|
||||
var assign = require('./utils/assign');
|
||||
var compose = require('redux').compose;
|
||||
|
||||
function enhancer() {
|
||||
var config = arguments[0] || {};
|
||||
config.features = { pause: true, export: true, test: true };
|
||||
config.type = 'redux';
|
||||
if (config.autoPause === undefined) config.autoPause = true;
|
||||
if (config.latency === undefined) config.latency = 500;
|
||||
|
||||
return function (createStore) {
|
||||
return function (reducer, preloadedState, enhancer) {
|
||||
var store = createStore(reducer, preloadedState, enhancer);
|
||||
var origDispatch = store.dispatch;
|
||||
|
||||
var devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(config);
|
||||
devTools.init(store.getState());
|
||||
|
||||
var dispatch = function (action) {
|
||||
var r = origDispatch(action);
|
||||
devTools.send(action, store.getState());
|
||||
return r;
|
||||
};
|
||||
|
||||
if (Object.assign) return Object.assign(store, { dispatch: dispatch });
|
||||
return assign(store, 'dispatch', dispatch);
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
function composeWithEnhancer(config) {
|
||||
return function () {
|
||||
return compose(compose.apply(null, arguments), enhancer(config));
|
||||
};
|
||||
}
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.composeWithDevTools = function () {
|
||||
if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
|
||||
if (arguments.length === 0) return enhancer();
|
||||
if (typeof arguments[0] === 'object')
|
||||
return composeWithEnhancer(arguments[0]);
|
||||
return composeWithEnhancer().apply(null, arguments);
|
||||
}
|
||||
|
||||
if (arguments.length === 0) return undefined;
|
||||
if (typeof arguments[0] === 'object') return compose;
|
||||
return compose.apply(null, arguments);
|
||||
};
|
||||
|
||||
exports.devToolsEnhancer =
|
||||
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
? enhancer
|
||||
: function () {
|
||||
return function (noop) {
|
||||
return noop;
|
||||
};
|
||||
};
|
1
packages/redux-devtools-extension/logOnlyInProduction.d.ts
vendored
Normal file
1
packages/redux-devtools-extension/logOnlyInProduction.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
export * from 'redux-devtools-extension';
|
28
packages/redux-devtools-extension/logOnlyInProduction.js
Normal file
28
packages/redux-devtools-extension/logOnlyInProduction.js
Normal file
|
@ -0,0 +1,28 @@
|
|||
'use strict';
|
||||
|
||||
var compose = require('redux').compose;
|
||||
var logOnly = require('./logOnly');
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.composeWithDevTools =
|
||||
process.env.NODE_ENV === 'production'
|
||||
? logOnly.composeWithDevTools
|
||||
: typeof window !== 'undefined' &&
|
||||
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|
||||
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|
||||
: function () {
|
||||
if (arguments.length === 0) return undefined;
|
||||
if (typeof arguments[0] === 'object') return compose;
|
||||
return compose.apply(null, arguments);
|
||||
};
|
||||
|
||||
exports.devToolsEnhancer =
|
||||
process.env.NODE_ENV === 'production'
|
||||
? logOnly.devToolsEnhancer
|
||||
: typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
? window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
: function () {
|
||||
return function (noop) {
|
||||
return noop;
|
||||
};
|
||||
};
|
16
packages/redux-devtools-extension/package.json
Normal file
16
packages/redux-devtools-extension/package.json
Normal file
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "redux-devtools-extension",
|
||||
"version": "2.13.8",
|
||||
"description": "Wrappers for Redux DevTools Extension.",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/zalmoxisus/redux-devtools-extension"
|
||||
},
|
||||
"homepage": "https://github.com/zalmoxisus/redux-devtools-extension",
|
||||
"author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"redux": "^3.1.0 || ^4.0.0"
|
||||
}
|
||||
}
|
24
packages/redux-devtools-extension/utils/assign.js
Normal file
24
packages/redux-devtools-extension/utils/assign.js
Normal file
|
@ -0,0 +1,24 @@
|
|||
var objectKeys =
|
||||
Object.keys ||
|
||||
function (obj) {
|
||||
var keys = [];
|
||||
for (var key in obj) {
|
||||
if ({}.hasOwnProperty.call(obj, key)) keys.push(key);
|
||||
}
|
||||
return keys;
|
||||
};
|
||||
|
||||
function assign(obj, newKey, newValue) {
|
||||
var keys = objectKeys(obj);
|
||||
var copy = {};
|
||||
|
||||
for (var i = 0, l = keys.length; i < l; i++) {
|
||||
var key = keys[i];
|
||||
copy[key] = obj[key];
|
||||
}
|
||||
|
||||
copy[newKey] = newValue;
|
||||
return copy;
|
||||
}
|
||||
|
||||
module.exports = assign;
|
Loading…
Reference in New Issue
Block a user