From 7ae485b035e0da9ca2895a988f99b2c8aa099a2f Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 26 Oct 2020 02:43:20 -0400 Subject: [PATCH] chore(extension): move npm package (#657) * Start adding extension * prettier --- packages/redux-devtools-extension/README.md | 50 +++++ .../developmentOnly.d.ts | 1 + .../developmentOnly.js | 26 +++ packages/redux-devtools-extension/index.d.ts | 174 ++++++++++++++++++ packages/redux-devtools-extension/index.js | 22 +++ .../redux-devtools-extension/logOnly.d.ts | 1 + packages/redux-devtools-extension/logOnly.js | 60 ++++++ .../logOnlyInProduction.d.ts | 1 + .../logOnlyInProduction.js | 28 +++ .../redux-devtools-extension/package.json | 16 ++ .../redux-devtools-extension/utils/assign.js | 24 +++ 11 files changed, 403 insertions(+) create mode 100644 packages/redux-devtools-extension/README.md create mode 100644 packages/redux-devtools-extension/developmentOnly.d.ts create mode 100644 packages/redux-devtools-extension/developmentOnly.js create mode 100644 packages/redux-devtools-extension/index.d.ts create mode 100644 packages/redux-devtools-extension/index.js create mode 100644 packages/redux-devtools-extension/logOnly.d.ts create mode 100644 packages/redux-devtools-extension/logOnly.js create mode 100644 packages/redux-devtools-extension/logOnlyInProduction.d.ts create mode 100644 packages/redux-devtools-extension/logOnlyInProduction.js create mode 100644 packages/redux-devtools-extension/package.json create mode 100644 packages/redux-devtools-extension/utils/assign.js diff --git a/packages/redux-devtools-extension/README.md b/packages/redux-devtools-extension/README.md new file mode 100644 index 00000000..fdc90a1a --- /dev/null +++ b/packages/redux-devtools-extension/README.md @@ -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 diff --git a/packages/redux-devtools-extension/developmentOnly.d.ts b/packages/redux-devtools-extension/developmentOnly.d.ts new file mode 100644 index 00000000..e45b4859 --- /dev/null +++ b/packages/redux-devtools-extension/developmentOnly.d.ts @@ -0,0 +1 @@ +export * from 'redux-devtools-extension'; diff --git a/packages/redux-devtools-extension/developmentOnly.js b/packages/redux-devtools-extension/developmentOnly.js new file mode 100644 index 00000000..0294f1f9 --- /dev/null +++ b/packages/redux-devtools-extension/developmentOnly.js @@ -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; + }; + }; diff --git a/packages/redux-devtools-extension/index.d.ts b/packages/redux-devtools-extension/index.d.ts new file mode 100644 index 00000000..f2e43cb5 --- /dev/null +++ b/packages/redux-devtools-extension/index.d.ts @@ -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[] | { [key: string]: ActionCreator }; + /** + * 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?: (action: A, id: number) => A; + /** + * function which takes `state` object and index as arguments, and should return `state` object back. + */ + stateSanitizer?: (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?: (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 | ((action: A) => string); + /** + * The maximum number of stack trace entries to record per action. Defaults to 10. + */ + traceLimit?: number; +} + +export function composeWithDevTools( + ...funcs: Array> +): StoreEnhancer; +export function composeWithDevTools(options: EnhancerOptions): typeof compose; +export function devToolsEnhancer(options: EnhancerOptions): StoreEnhancer; diff --git a/packages/redux-devtools-extension/index.js b/packages/redux-devtools-extension/index.js new file mode 100644 index 00000000..02fca412 --- /dev/null +++ b/packages/redux-devtools-extension/index.js @@ -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; + }; + }; diff --git a/packages/redux-devtools-extension/logOnly.d.ts b/packages/redux-devtools-extension/logOnly.d.ts new file mode 100644 index 00000000..e45b4859 --- /dev/null +++ b/packages/redux-devtools-extension/logOnly.d.ts @@ -0,0 +1 @@ +export * from 'redux-devtools-extension'; diff --git a/packages/redux-devtools-extension/logOnly.js b/packages/redux-devtools-extension/logOnly.js new file mode 100644 index 00000000..8aa4237b --- /dev/null +++ b/packages/redux-devtools-extension/logOnly.js @@ -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; + }; + }; diff --git a/packages/redux-devtools-extension/logOnlyInProduction.d.ts b/packages/redux-devtools-extension/logOnlyInProduction.d.ts new file mode 100644 index 00000000..e45b4859 --- /dev/null +++ b/packages/redux-devtools-extension/logOnlyInProduction.d.ts @@ -0,0 +1 @@ +export * from 'redux-devtools-extension'; diff --git a/packages/redux-devtools-extension/logOnlyInProduction.js b/packages/redux-devtools-extension/logOnlyInProduction.js new file mode 100644 index 00000000..3c18b389 --- /dev/null +++ b/packages/redux-devtools-extension/logOnlyInProduction.js @@ -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; + }; + }; diff --git a/packages/redux-devtools-extension/package.json b/packages/redux-devtools-extension/package.json new file mode 100644 index 00000000..17f92c3e --- /dev/null +++ b/packages/redux-devtools-extension/package.json @@ -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 (https://github.com/zalmoxisus)", + "license": "MIT", + "peerDependencies": { + "redux": "^3.1.0 || ^4.0.0" + } +} diff --git a/packages/redux-devtools-extension/utils/assign.js b/packages/redux-devtools-extension/utils/assign.js new file mode 100644 index 00000000..75b70438 --- /dev/null +++ b/packages/redux-devtools-extension/utils/assign.js @@ -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;