Add secondary exports to extension package (#1075)

* Add secondary exports to extension package

* Update documentation

* Create dull-cats-end.md

.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';
+```

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.
 

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()
 

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: '...',

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)

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
 

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';