feat(): allow to config pass custom devtoolComposer for handling remo…

…te-dev-tools (#941)

.eslintrc.js

@@ -5,13 +5,12 @@ module.exports = {
 	},
 	extends: [
 		'airbnb-base',
+		'eslint:recommended',
 		'plugin:import/errors',
 		'plugin:import/warnings',
 		'plugin:import/typescript',
-		'eslint:recommended',
 		'plugin:@typescript-eslint/eslint-recommended',
 		'plugin:@typescript-eslint/recommended',
-		'prettier',
 		'plugin:prettier/recommended',
 	],
 	globals: {
@@ -23,7 +22,7 @@ module.exports = {
 		ecmaVersion: 2018,
 		sourceType: 'module',
 	},
-	plugins: ['@typescript-eslint'],
+	plugins: ['@typescript-eslint', 'prettier'],
 	rules: {
 		'no-restricted-syntax': 0,
 		'lines-between-class-members': [

.prettierrc.json

@@ -5,6 +5,5 @@
 	"tabWidth": 2,
 	"trailingComma": "es5",
 	"useTabs": true,
-	"bracketSpacing": true,
-	"jsxBracketSameLine": false
+	"bracketSpacing": true
 }

docs/api-reference/redux.md

@@ -37,30 +37,33 @@ Configuration for Redux can be build using the following properties:
 
 - [`devtoolOptions`] (_Redux.DevtoolOptions_): provides access to [React Devtools](https://github.com/facebook/react/tree/master/packages/react-devtools) options.
 
+- [`devtoolComposer`] (_remote-redux-devtools.composeWithDevTools_): (Added on 2.2.0) allows passing a custom composer to our middlewares for allowing custom remote devtools, you can read more [here](/docs/recipes/redux-devtools/#remote-redux-devtools).
+
 **Example**:
 
 ```js
-import { init } from "@rematch/core";
+import { init } from '@rematch/core'
 
 const store = init({
-  redux: {
-    initialState: { example: 12 },
-    reducers: {
-      someReducer(state, action) {
-        switch (action.type) {
-          default:
-            return state;
-        }
-      },
-    },
-    enhancers: [customEnhancer()],
-    middlewares: [customMiddleware()],
-    rootReducers: {
-      RESET: (state, action) => {},
-    },
-    combineReducers: customCombineReducers,
-    createStore: customCreateStore,
-    devtoolOptions: customDevtoolOptions,
-  },
-});
+	redux: {
+		initialState: { example: 12 },
+		reducers: {
+			someReducer(state, action) {
+				switch (action.type) {
+					default:
+						return state
+				}
+			},
+		},
+		enhancers: [customEnhancer()],
+		middlewares: [customMiddleware()],
+		rootReducers: {
+			RESET: (state, action) => {},
+		},
+		combineReducers: customCombineReducers,
+		createStore: customCreateStore,
+		devtoolOptions: customDevtoolOptions,
+		devtoolComposer: customDevtoolComposeFunction,
+	},
+})
 ```

docs/recipes/redux-devtools.md

@@ -1,78 +1,136 @@
 ---
 id: redux-devtools
 title: Redux Devtools
-sidebar_label: "Redux Devtools"
+sidebar_label: 'Redux Devtools'
 slug: /recipes/redux-devtools/
 ---
 
 Rematch works with [Redux Devtools](https://github.com/zalmoxisus/redux-devtools-extension) out of the box. No configuration required.
 
 ```ts twoslash
-import { init } from "@rematch/core";
-init(); // devtools up and running
+import { init } from '@rematch/core'
+init() // devtools up and running
 ```
 
 Its also possible to add redux devtools [configuration options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md).
 
 ```ts twoslash
-import { init } from "@rematch/core";
+import { init } from '@rematch/core'
 
 init({
   redux: {
     devtoolOptions: {
       actionSanitizer: (action) => action,
     },
   },
-});
+})
 ```
 
 To disable redux devtools, set `disabled` property to `true`:
 
 ```ts twoslash
-import { init } from "@rematch/core";
+import { init } from '@rematch/core'
 
 init({
   redux: {
     devtoolOptions: {
       disabled: true,
     },
   },
-});
+})
 ```
 
 ## Remote Redux-Devtools
 
-Remote-redux-devtools is not supported in rematch see this [issue](https://github.com/rematch/rematch/issues/419).
-You can use [react-native-debugger](https://github.com/jhen0409/react-native-debugger) which works out of the box with rematch.
+Remote-redux-devtools is supported in Rematch since 2.2.0.
+
+```ts twoslash
+import { init } from '@rematch/core'
+import { composeWithDevTools } from 'remote-redux-devtools'
+
+init({
+  redux: {
+    devtoolComposer: composeWithDevTools({
+      realtime: true,
+      port: 8000,
+    }),
+  },
+})
+```
+
+### Example
+
+To start a SocketCluster you can install:
+
+```bash npm2yarn
+npm install --save-dev @redux-devtools/cli
+```
+
+And add a script in your `package.json` to start the SocketCluster:
+
+```json
+{
+  "scripts": {
+    "start-socket": "redux-devtools --open=electron --hostname=localhost --port=8000"
+  }
+}
+```
+
+With this ready, you just need to run your application as usual and this script `npm run start-socket` or `yarn run start-socket`.
+
+You'll need to configure the `remote-redux-devtools` composer to match the SocketCluster configuration:
+
+```ts twoslash{8,9}
+import { init } from '@rematch/core'
+import { composeWithDevTools } from 'remote-redux-devtools'
+
+init({
+  redux: {
+    devtoolComposer: composeWithDevTools({
+      realtime: true,
+      hostname: 'localhost',
+      port: 8000,
+    }),
+  },
+})
+```
+
+After that you should see something like this in your Remote devtool:
+
+![Remote Devtools working with Rematch Example](/img/remote-devtools.png)
+
+## React Native Debugger
+
+You can use [react-native-debugger](https://github.com/jhen0409/react-native-debugger) which works out of the box with Rematch.
 
 ## Reactotron
 
 Setup Rematch to also work with [Reactotron devtools](https://github.com/infinitered/reactotron).
 
 ```ts twoslash title="Reactotron.config.js"
 // @noErrors
-import Reactotron from "reactotron-react-native";
-import { reactotronRedux } from "reactotron-redux";
+import Reactotron from 'reactotron-react-native'
+import { reactotronRedux } from 'reactotron-redux'
 
 export default Reactotron.configure({
-  name: "MyAwesomeApp",
+  name: 'MyAwesomeApp',
 })
   .use(reactotronRedux())
   // add other devtools here
-  .connect();
+  .connect()
 ```
 
 Overwrite `createStore` to complete the config.
 
 ```ts twoslash title="store.ts"
 // @noErrors
-import { init } from "@rematch/core";
-import Reactotron from "./Reactotron.config.js";
+import { init } from '@rematch/core'
+import Reactotron from './Reactotron.config.js'
 
 init({
   redux: {
     enhancers: [Reactotron.createEnhancer()],
     // If using typescript/flow, enhancers: [Reactotron.createEnhancer!()]
   },
-});
+})
 ```

package.json

@@ -78,7 +78,6 @@
   },
   "lint-staged": {
     "packages/**/*.{ts,tsx,jsx,js,json,md,mdx}": [
-      "yarn run prettier:check",
       "eslint"
     ]
   },

packages/core/src/reduxStore.ts

@@ -25,9 +25,12 @@ export default function createReduxStore<
 	const rootReducer = createRootReducer<RootState, TModels, TExtraModels>(bag)
 
 	const middlewares = Redux.applyMiddleware(...bag.reduxConfig.middlewares)
-	const enhancers = composeEnhancersWithDevtools(
-		bag.reduxConfig.devtoolOptions
-	)(...bag.reduxConfig.enhancers, middlewares)
+	const enhancers = bag.reduxConfig.devtoolComposer
+		? bag.reduxConfig.devtoolComposer(...bag.reduxConfig.enhancers, middlewares)
+		: composeEnhancersWithDevtools(bag.reduxConfig.devtoolOptions)(
+				...bag.reduxConfig.enhancers,
+				middlewares
+		  )
 
 	const createStore = bag.reduxConfig.createStore || Redux.createStore
 	const bagInitialState = bag.reduxConfig.initialState

packages/core/src/types.ts

@@ -268,7 +268,10 @@ export interface Config<
  * to gain full control over the way Redux is configured by Rematch and
  * override any defaults.
  */
-export interface InitConfigRedux<TRootState = any> {
+export interface InitConfigRedux<
+	TRootState = any,
+	DevtoolComposerGeneric = any
+> {
 	initialState?: TRootState
 	reducers?: ModelReducers<TRootState>
 	enhancers?: StoreEnhancer[]
@@ -281,6 +284,7 @@ export interface InitConfigRedux<TRootState = any> {
 		| undefined
 	createStore?: StoreCreator | undefined
 	devtoolOptions?: DevtoolOptions
+	devtoolComposer?: DevtoolComposerGeneric
 }
 
 /**

website/package.json

@@ -22,11 +22,11 @@
     "@mdx-js/react": "^1.6.22",
     "@octokit/rest": "^18.9.1",
     "clsx": "^1.1.1",
+    "docusaurus-preset-shiki-twoslash": "1.1.27",
     "npm-to-yarn": "^1.0.1",
     "postel": "^0.1.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "docusaurus-preset-shiki-twoslash": "1.1.27"
+    "react-dom": "^17.0.2"
   },
   "browserslist": {
     "production": [
@@ -46,6 +46,7 @@
     "@types/react": "^17.0.19",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
+    "@types/remote-redux-devtools": "^0.5.5",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "eslint": "^7.32.0",

yarn.lock

@@ -4364,6 +4364,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/remote-redux-devtools@^0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@types/remote-redux-devtools/-/remote-redux-devtools-0.5.5.tgz#cc48e4625817ab8688d92058d224b774870a7bff"
+  integrity sha512-Xuya1TegRPAe92+nnEeYpfufE/mtfN99+GH272edaoWohbMA+yP6r+wYqK4sq/fvmoUPtPHtwZR2Mkk+6uHeBQ==
+  dependencies:
+    redux "^4.0.0"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"