diff --git a/.changeset/dull-cats-end.md b/.changeset/dull-cats-end.md new file mode 100644 index 00000000..05321f0c --- /dev/null +++ b/.changeset/dull-cats-end.md @@ -0,0 +1,19 @@ +--- +'@redux-devtools/extension': patch +--- + +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: + +```diff +- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/developmentOnly'; +- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnly'; +- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction'; ++ import { ++ composeWithDevToolsDevelopmentOnly, ++ devToolsEnhancerDevelopmentOnly, ++ composeWithDevToolsLogOnly, ++ devToolsEnhancerLogOnly, ++ composeWithDevToolsLogOnlyInProduction, ++ devToolsEnhancerLogOnlyInProduction, ++ } from '@redux-devtools/extension'; +``` diff --git a/extension/README.md b/extension/README.md index ba9fe3b8..5c8dc144 100644 --- a/extension/README.md +++ b/extension/README.md @@ -113,19 +113,19 @@ const store = createStore(reducer, enhancer); > [See the post for more details](https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83). -### 1.3 Use `redux-devtools-extension` package from npm +### 1.3 Use `@redux-devtools/extension` package from npm To make things easier, there's an npm package to install: ``` -npm install --save redux-devtools-extension +npm install --save @redux-devtools/extension ``` and to use like so: ```js import { createStore, applyMiddleware } from 'redux'; -import { composeWithDevTools } from 'redux-devtools-extension'; +import { composeWithDevTools } from '@redux-devtools/extension'; const store = createStore( reducer, @@ -140,7 +140,7 @@ To specify [extension’s options](https://github.com/zalmoxisus/redux-devtools- ```js import { createStore, applyMiddleware } from 'redux'; -import { composeWithDevTools } from 'redux-devtools-extension'; +import { composeWithDevTools } from '@redux-devtools/extension'; const composeEnhancers = composeWithDevTools({ // Specify name here, actionsDenylist, actionsCreators and other options if needed @@ -154,13 +154,13 @@ const store = createStore( ); ``` -> There’re just [few lines of code](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/index.js) added to your bundle. +> 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. In case you don't include other enhancers and middlewares, just use `devToolsEnhancer`: ```js import { createStore } from 'redux'; -import { devToolsEnhancer } from 'redux-devtools-extension'; +import { devToolsEnhancer } from '@redux-devtools/extension'; const store = createStore( reducer, @@ -173,15 +173,15 @@ const store = createStore( It'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). -If you want to restrict it there, use `redux-devtools-extension/logOnlyInProduction`: +If you want to restrict it there, use `composeWithDevToolsLogOnlyInProduction` or `devToolsEnhancerLogOnlyInProduction`: ```js import { createStore } from 'redux'; -import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction'; +import { devToolsEnhancerLogOnlyInProduction } from '@redux-devtools/extension'; const store = createStore( reducer, - /* preloadedState, */ devToolsEnhancer() + /* preloadedState, */ devToolsEnhancerLogOnlyInProduction() // options like actionSanitizer, stateSanitizer ); ``` @@ -190,9 +190,9 @@ or with middlewares and enhancers: ```js import { createStore, applyMiddleware } from 'redux'; -import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'; +import { composeWithDevToolsLogOnlyInProduction } from '@redux-devtools/extension'; -const composeEnhancers = composeWithDevTools({ +const composeEnhancers = composeWithDevToolsLogOnlyInProduction({ // options like actionSanitizer, stateSanitizer }); const store = createStore( @@ -206,9 +206,9 @@ const store = createStore( > 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) -If you're already checking `process.env.NODE_ENV` when creating the store, include `redux-devtools-extension/logOnly` for production environment. +If you're already checking `process.env.NODE_ENV` when creating the store, import `composeWithDevToolsLogOnly` or `devToolsEnhancerLogOnly` for production environment. -If you don’t want to allow the extension in production, just use `redux-devtools-extension/developmentOnly`. +If you don’t want to allow the extension in production, just use `composeWithDevToolsDevelopmentOnly` or `devToolsEnhancerDevelopmentOnly`. > See [the article](https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f) for more details. diff --git a/extension/docs/API/Methods.md b/extension/docs/API/Methods.md index 3d637601..946e4241 100644 --- a/extension/docs/API/Methods.md +++ b/extension/docs/API/Methods.md @@ -42,7 +42,7 @@ devTools.init({ value: 'initial state' }); devTools.send('change state', { value: 'state changed' }); ``` -See [redux enhancer's example](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/logOnly.js), [react example](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/examples/react-counter-messaging/components/Counter.js) and [blog post](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f) for more details. +See [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. ### disconnect() diff --git a/extension/docs/Recipes.md b/extension/docs/Recipes.md index ecae09e1..6a080243 100644 --- a/extension/docs/Recipes.md +++ b/extension/docs/Recipes.md @@ -2,7 +2,7 @@ ### Using in a typescript project -The 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`: +The 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`: ```js const store = createStore( @@ -15,7 +15,7 @@ const store = createStore( Note that you many need to set `no-any` to false in your `tslint.json` file. -Alternatively you can use typeguard in order to avoid +Alternatively you can use type-guard in order to avoid casting to any. ```typescript @@ -54,21 +54,21 @@ The extension is not sharing `store` object, so you should take care of that. ### Applying multiple times with different sets of options -We're [not allowing that from instrumentation part](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js#L676), because that would re-dispatch every app action in case we'd have many liftedStores, but there's [a helper for logging only](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/logOnly.js), which can be used it like so: +We'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: ```js import { createStore, compose } from 'redux'; -import { devToolsEnhancer } from 'redux-devtools-extension/logOnly'; +import { devToolsEnhancerLogOnly } from '@redux-devtools/extension'; const store = createStore( reducer, /* preloadedState, */ compose( - devToolsEnhancer({ + devToolsEnhancerLogOnly({ instaceID: 1, name: 'Denylisted', actionsDenylist: '...', }), - devToolsEnhancer({ + devToolsEnhancerLogOnly({ instaceID: 2, name: 'Allowlisted', actionsAllowlist: '...', diff --git a/packages/redux-devtools-extension/CHANGELOG.md b/packages/redux-devtools-extension/CHANGELOG.md index 97467a1a..61ba757d 100644 --- a/packages/redux-devtools-extension/CHANGELOG.md +++ b/packages/redux-devtools-extension/CHANGELOG.md @@ -9,6 +9,22 @@ ## 3.0.0 - **BREAKING** Rename `redux-devtools-extension` package to `@redux-devtools/extension` (https://github.com/reduxjs/redux-devtools/pull/948). +- **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): + +```diff +- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/developmentOnly'; +- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnly'; +- import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction'; ++ import { ++ composeWithDevToolsDevelopmentOnly, ++ devToolsEnhancerDevelopmentOnly, ++ composeWithDevToolsLogOnly, ++ devToolsEnhancerLogOnly, ++ composeWithDevToolsLogOnlyInProduction, ++ devToolsEnhancerLogOnlyInProduction, ++ } from '@redux-devtools/extension'; +``` + - Deprecate `actionsBlacklist` and `actionsWhitelist` in favor of `actionsDenylist` and `actionsAllowlist` (https://github.com/reduxjs/redux-devtools/pull/851). ## 2.13.9 (2021-03-06) diff --git a/packages/redux-devtools-extension/README.md b/packages/redux-devtools-extension/README.md index 090d64af..21c4d03c 100644 --- a/packages/redux-devtools-extension/README.md +++ b/packages/redux-devtools-extension/README.md @@ -43,7 +43,7 @@ const store = createStore( ); ``` -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’. +There 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`. ## License diff --git a/packages/redux-devtools-extension/src/index.ts b/packages/redux-devtools-extension/src/index.ts index 18eb4624..140909cf 100644 --- a/packages/redux-devtools-extension/src/index.ts +++ b/packages/redux-devtools-extension/src/index.ts @@ -229,3 +229,16 @@ export const devToolsEnhancer: (options?: EnhancerOptions) => StoreEnhancer = return noop; }; }; + +export { + composeWithDevTools as composeWithDevToolsDevelopmentOnly, + devToolsEnhancer as devToolsEnhancerDevelopmentOnly, +} from './developmentOnly'; +export { + composeWithDevTools as composeWithDevToolsLogOnly, + devToolsEnhancer as devToolsEnhancerLogOnly, +} from './logOnly'; +export { + composeWithDevTools as composeWithDevToolsLogOnlyInProduction, + devToolsEnhancer as devToolsEnhancerLogOnlyInProduction, +} from './logOnlyInProduction';