reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-09-21 03:19:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Convert npm extension package to TypeScript (#948)

Browse Source 
* stash

* stash
This commit is contained in:
Nathan Bierema 2021-11-06 10:38:27 -04:00 committed by GitHub
parent 0651b764df
commit a8883f287d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 318 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
extension/src/app/api/index.ts
View File

@ -8,11 +8,7 @@ import importState from './importState';
import generateId from './generateInstanceId';
import { Config } from '../../browser/extension/inject/pageScript';
import { Action } from 'redux';
import {
EnhancedStore,
LiftedState,
PerformAction,
} from '@redux-devtools/instrument';
import { LiftedState, PerformAction } from '@redux-devtools/instrument';
import { LibConfig } from '@redux-devtools/app/lib/actions';
import {
ContentScriptToPageScriptMessage,
@ -527,7 +523,7 @@ export function disconnect() {
export interface ConnectResponse {
init: <S, A extends Action<unknown>>(
state: S,
liftedData: LiftedState<S, A, unknown>
liftedData?: LiftedState<S, A, unknown>
) => void;
subscribe: <S, A extends Action<unknown>>(
listener: (message: ListenerMessage<S, A>) => void
@ -650,7 +646,7 @@ export function connect(preConfig: Config): ConnectResponse {
const init = <S, A extends Action<unknown>>(
state: S,
liftedData: LiftedState<S, A, unknown>
liftedData?: LiftedState<S, A, unknown>
) => {
const message: InitMessage<S, A> = {
type: 'INIT',

29
extension/src/browser/extension/inject/pageScript.ts
View File

@ -585,30 +585,41 @@ const preEnhancer =
const extensionCompose =
(config: Config) =>
(...funcs: StoreEnhancer[]) => {
return (...args: any[]) => {
(...funcs: StoreEnhancer[]): StoreEnhancer => {
return (...args) => {
const instanceId = generateId(config.instanceId);
return [preEnhancer(instanceId), ...funcs].reduceRight(
(composed, f) => f(composed),
(__REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId }) as any)(
...args
)
__REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId })(...args)
);
};
};
interface ReduxDevtoolsExtensionCompose {
(config: Config): (...funcs: StoreEnhancer[]) => StoreEnhancer;
(...funcs: StoreEnhancer[]): StoreEnhancer;
}
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: unknown;
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: ReduxDevtoolsExtensionCompose;
}
}
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = (...funcs: any[]) => {
function reduxDevtoolsExtensionCompose(
config: Config
): (...funcs: StoreEnhancer[]) => StoreEnhancer;
function reduxDevtoolsExtensionCompose(
...funcs: StoreEnhancer[]
): StoreEnhancer;
function reduxDevtoolsExtensionCompose(...funcs: [Config] | StoreEnhancer[]) {
if (funcs.length === 0) {
return __REDUX_DEVTOOLS_EXTENSION__();
}
if (funcs.length === 1 && typeof funcs[0] === 'object') {
return extensionCompose(funcs[0]);
}
return extensionCompose({})(...funcs);
};
return extensionCompose({})(...(funcs as StoreEnhancer[]));
}
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = reduxDevtoolsExtensionCompose;

3
packages/redux-devtools-extension/.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

1
packages/redux-devtools-extension/.eslintignore Normal file
View File

@ -0,0 +1 @@
lib

7
packages/redux-devtools-extension/.eslintrc.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
extends: '../../eslintrc.ts.base.json',
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
};

10
packages/redux-devtools-extension/README.md
View File

@ -7,14 +7,14 @@
Install:
```
npm install --save redux-devtools-extension
yarn add @redux-devtools/extension
```
and use like that:
```js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { composeWithDevTools } from '@redux-devtools/extension';
const store = createStore(
reducer,
@ -25,11 +25,11 @@ const store = createStore(
);
```
or if needed to apply [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig):
or if needed to apply [extension’s options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md):
```js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { composeWithDevTools } from '@redux-devtools/extension';
const composeEnhancers = composeWithDevTools({
// Specify here name, actionsDenylist, actionsCreators and other options
@ -43,7 +43,7 @@ const store = createStore(
);
```
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’.
There’re just [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 ‘@redux-devtools/extension/lib/developmentOnly’ instead of ‘@redux-devtools/extension’.
## License

1
packages/redux-devtools-extension/developmentOnly.d.ts vendored
View File

@ -1 +0,0 @@
export * from 'redux-devtools-extension';

26
packages/redux-devtools-extension/developmentOnly.js
View File

@ -1,26 +0,0 @@
'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;
};
};

22
packages/redux-devtools-extension/index.js
View File

@ -1,22 +0,0 @@
'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
View File

@ -1 +0,0 @@
export * from 'redux-devtools-extension';

60
packages/redux-devtools-extension/logOnly.js
View File

@ -1,60 +0,0 @@
'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
View File

@ -1 +0,0 @@
export * from 'redux-devtools-extension';

28
packages/redux-devtools-extension/logOnlyInProduction.js
View File

@ -1,28 +0,0 @@
'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;
};
};

36
packages/redux-devtools-extension/package.json
View File

@ -1,15 +1,39 @@
{
"name": "redux-devtools-extension",
"name": "@redux-devtools/extension",
"version": "2.13.9",
"description": "Wrappers for Redux DevTools Extension.",
"main": "index.js",
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-extension",
"license": "MIT",
"author": "Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/zalmoxisus/redux-devtools-extension"
"url": "https://github.com/reduxjs/redux-devtools"
},
"scripts": {
"build": "yarn run build:types && yarn run build:js",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "babel src --out-dir lib --extensions \".ts\" --source-maps inline",
"clean": "rimraf lib",
"lint": "eslint . --ext .ts",
"type-check": "tsc --noEmit",
"prepack": "yarn run clean && yarn run build",
"prepublish": "yarn run type-check && yarn run lint"
},
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@typescript-eslint/eslint-plugin": "^5.2.0",
"@typescript-eslint/parser": "^5.2.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"redux": "^4.1.2",
"rimraf": "^3.0.2",
"typescript": "~4.4.4"
},
"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"
}

36
packages/redux-devtools-extension/src/developmentOnly.ts Normal file
View File

@ -0,0 +1,36 @@
import { compose, StoreEnhancer } from 'redux';
import { Config, EnhancerOptions } from './index';
declare const process: {
env: {
NODE_ENV: string;
};
};
function extensionComposeStub(
config: Config
): (...funcs: StoreEnhancer[]) => StoreEnhancer;
function extensionComposeStub(...funcs: StoreEnhancer[]): StoreEnhancer;
function extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {
if (funcs.length === 0) return undefined;
if (typeof funcs[0] === 'object') return compose;
return compose(...(funcs as StoreEnhancer[]));
}
export const composeWithDevTools =
process.env.NODE_ENV !== 'production' &&
typeof window !== 'undefined' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: extensionComposeStub;
export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
process.env.NODE_ENV !== 'production' &&
typeof window !== 'undefined' &&
window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__
: function () {
return function (noop) {
return noop;
};
};

57
packages/redux-devtools-extension/index.d.ts → packages/redux-devtools-extension/src/index.ts
View File

@ -1,4 +1,4 @@
import { Action, ActionCreator, StoreEnhancer, compose } from 'redux';
import { Action, ActionCreator, compose, StoreEnhancer } from 'redux';
export interface EnhancerOptions {
/**
@ -43,6 +43,7 @@ export interface EnhancerOptions {
symbol?: boolean;
map?: boolean;
set?: boolean;
// eslint-disable-next-line @typescript-eslint/ban-types
function?: boolean | Function;
};
/**
@ -179,8 +180,52 @@ export interface EnhancerOptions {
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>;
export interface Config extends EnhancerOptions {
type?: string;
}
interface ConnectResponse {
init: (state: unknown) => void;
send: (action: Action<unknown>, state: unknown) => void;
}
interface ReduxDevtoolsExtension {
(config?: Config): StoreEnhancer;
connect: (preConfig: Config) => ConnectResponse;
}
export interface ReduxDevtoolsExtensionCompose {
(config: Config): (...funcs: StoreEnhancer[]) => StoreEnhancer;
(...funcs: StoreEnhancer[]): StoreEnhancer;
}
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION__?: ReduxDevtoolsExtension;
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: ReduxDevtoolsExtensionCompose;
}
}
function extensionComposeStub(
config: Config
): (...funcs: StoreEnhancer[]) => StoreEnhancer;
function extensionComposeStub(...funcs: StoreEnhancer[]): StoreEnhancer;
function extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {
if (funcs.length === 0) return undefined;
if (typeof funcs[0] === 'object') return compose;
return compose(...(funcs as StoreEnhancer[]));
}
export const composeWithDevTools: ReduxDevtoolsExtensionCompose =
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: extensionComposeStub;
export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__
: function () {
return function (noop) {
return noop;
};
};

71
packages/redux-devtools-extension/src/logOnly.ts Normal file
View File

@ -0,0 +1,71 @@
import assign from './utils/assign';
import {
Action,
compose,
Dispatch,
PreloadedState,
Reducer,
StoreEnhancer,
} from 'redux';
import { Config, EnhancerOptions } from './index';
function enhancer(options?: EnhancerOptions): StoreEnhancer {
const config: Config = options || {};
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 <S, A extends Action<unknown>>(
reducer: Reducer<S, A>,
preloadedState: PreloadedState<S> | undefined
) {
const store = createStore(reducer, preloadedState);
const origDispatch = store.dispatch;
const devTools = window.__REDUX_DEVTOOLS_EXTENSION__!.connect(config);
devTools.init(store.getState());
const dispatch: Dispatch<A> = function (action) {
const 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?: EnhancerOptions) {
return function (...funcs: StoreEnhancer[]) {
return compose(compose(...funcs), enhancer(config));
};
}
export function composeWithDevTools(
config: Config
): (...funcs: StoreEnhancer[]) => StoreEnhancer;
export function composeWithDevTools(...funcs: StoreEnhancer[]): StoreEnhancer;
export function composeWithDevTools(...funcs: [Config] | StoreEnhancer[]) {
if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
if (funcs.length === 0) return enhancer();
if (typeof funcs[0] === 'object') return composeWithEnhancer(funcs[0]);
return composeWithEnhancer()(...(funcs as StoreEnhancer[]));
}
if (funcs.length === 0) return undefined;
if (typeof funcs[0] === 'object') return compose;
return compose(...(funcs as StoreEnhancer[]));
}
export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
? enhancer
: function () {
return function (noop) {
return noop;
};
};

38
packages/redux-devtools-extension/src/logOnlyInProduction.ts Normal file
View File

@ -0,0 +1,38 @@
import { compose, StoreEnhancer } from 'redux';
import * as logOnly from './logOnly';
import { Config, EnhancerOptions } from './index';
declare const process: {
env: {
NODE_ENV: string;
};
};
function extensionComposeStub(
config: Config
): (...funcs: StoreEnhancer[]) => StoreEnhancer;
function extensionComposeStub(...funcs: StoreEnhancer[]): StoreEnhancer;
function extensionComposeStub(...funcs: [Config] | StoreEnhancer[]) {
if (funcs.length === 0) return undefined;
if (typeof funcs[0] === 'object') return compose;
return compose(...(funcs as StoreEnhancer[]));
}
export const composeWithDevTools =
process.env.NODE_ENV === 'production'
? logOnly.composeWithDevTools
: typeof window !== 'undefined' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: extensionComposeStub;
export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer =
process.env.NODE_ENV === 'production'
? logOnly.devToolsEnhancer
: typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__
: function () {
return function (noop) {
return noop;
};
};

26
packages/redux-devtools-extension/src/utils/assign.ts Normal file
View File

@ -0,0 +1,26 @@
const objectKeys =
Object.keys ||
function (obj) {
const keys = [];
for (const key in obj) {
if ({}.hasOwnProperty.call(obj, key)) keys.push(key);
}
return keys;
};
export default function assign<T, K extends keyof T>(
obj: T,
newKey: K,
newValue: T[K]
): T {
const keys = objectKeys(obj);
const copy: T = {} as T;
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i];
copy[key as keyof T] = obj[key as keyof T];
}
copy[newKey] = newValue;
return copy;
}

7
packages/redux-devtools-extension/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "lib"
},
"include": ["src"]
}

24
packages/redux-devtools-extension/utils/assign.js
View File

@ -1,24 +0,0 @@
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;

28
yarn.lock
View File

@ -4780,6 +4780,26 @@ __metadata:
languageName: unknown
linkType: soft
"@redux-devtools/extension@workspace:packages/redux-devtools-extension":
version: 0.0.0-use.local
resolution: "@redux-devtools/extension@workspace:packages/redux-devtools-extension"
dependencies:
"@babel/cli": ^7.16.0
"@babel/core": ^7.16.0
"@babel/preset-env": ^7.16.0
"@babel/preset-typescript": ^7.16.0
"@typescript-eslint/eslint-plugin": ^5.2.0
"@typescript-eslint/parser": ^5.2.0
eslint: ^7.32.0
eslint-config-prettier: ^8.3.0
redux: ^4.1.2
rimraf: ^3.0.2
typescript: ~4.4.4
peerDependencies:
redux: ^3.1.0 || ^4.0.0
languageName: unknown
linkType: soft
"@redux-devtools/inspector-monitor-test-tab@^0.7.2, @redux-devtools/inspector-monitor-test-tab@workspace:packages/redux-devtools-inspector-monitor-test-tab":
version: 0.0.0-use.local
resolution: "@redux-devtools/inspector-monitor-test-tab@workspace:packages/redux-devtools-inspector-monitor-test-tab"
@ -24596,14 +24616,6 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
"redux-devtools-extension@workspace:packages/redux-devtools-extension":
version: 0.0.0-use.local
resolution: "redux-devtools-extension@workspace:packages/redux-devtools-extension"
peerDependencies:
redux: ^3.1.0 || ^4.0.0
languageName: unknown
linkType: soft
"redux-devtools-themes@npm:^1.0.0":
version: 1.0.0
resolution: "redux-devtools-themes@npm:1.0.0"