feat: use contextBridge in favour of requiring nodeIntegration

examples/basic/src/main/index.ts

@@ -1,9 +1,10 @@
 import url from 'url'
 import { app, BrowserWindow } from 'electron'
-import { stateSyncEnhancer } from 'electron-redux'
+import { stateSyncEnhancer } from 'electron-redux/main'
 import { createStore } from 'redux'
 import { rootReducer } from '../store'
 
+const TESTING = process.env.SPECTRON === 'true'
 // ==================================================================
 // electron related boiler-plate to create window with singe renderer
 let mainWindow: BrowserWindow | null
@@ -13,7 +14,11 @@ async function createWindow() {
         width: 800,
         height: 600,
         webPreferences: {
-            nodeIntegration: true,
+            preload: `${__dirname}/preload.js`,
+            // PROD app should be running with contextIsolation: true for security reasons. Disabled only while running e2e tests
+            contextIsolation: !TESTING,
+            // ONLY TRUE FOR TESTING - SPECTRON needs node integration to be able to access the remote modules.
+            nodeIntegration: TESTING,
         },
     })
     await mainWindow.loadURL(

examples/basic/src/renderer/index.ts

@@ -2,7 +2,7 @@
 
 import { createStore } from 'redux'
 import { rootReducer } from '../store'
-import { stateSyncEnhancer } from 'electron-redux'
+import { stateSyncEnhancer } from 'electron-redux/renderer'
 import {
     decrementGlobalCounter,
     decrementLocalCounter,

examples/basic/src/renderer/preload.ts

@@ -0,0 +1,2 @@
+// Include me in your preload script!
+require('electron-redux/preload')

examples/basic/webpack.renderer.js

@@ -9,6 +9,7 @@ module.exports = {
     mode: 'production',
     entry: {
         renderer: './src/renderer/index.ts',
+        preload: './src/renderer/preload.ts',
     },
     target: 'electron-renderer',
     plugins: [

main/package.json

@@ -0,0 +1,6 @@
+{
+    "internal": true,
+    "main": "../lib/main.js",
+    "module": "../es/main.js",
+    "types": "../types/main.d.ts"
+}

package.json

@@ -10,13 +10,16 @@
     ],
     "license": "MIT",
     "private": false,
-    "main": "lib/electron-redux.js",
-    "module": "es/electron-redux.js",
+    "main": "lib/index.js",
+    "module": "es/index.js",
     "types": "types/index.d.ts",
     "files": [
         "lib",
         "es",
-        "types"
+        "types",
+        "main",
+        "renderer",
+        "preload"
     ],
     "scripts": {
         "clean": "rimraf lib es coverage types",
@@ -48,7 +51,6 @@
         "@babel/preset-env": "^7.11.5",
         "@babel/preset-typescript": "^7.10.4",
         "@rollup/plugin-commonjs": "^15.0.0",
-        "@rollup/plugin-node-resolve": "^9.0.0",
         "@types/jest": "^26.0.14",
         "@types/lodash.isplainobject": "^4.0.6",
         "@types/lodash.isstring": "^4.0.6",

preload/package.json

@@ -0,0 +1,6 @@
+{
+    "internal": true,
+    "main": "../lib/preload.js",
+    "module": "../es/preload.js",
+    "types": "../types/preload.d.ts"
+}

renderer/package.json

@@ -0,0 +1,6 @@
+{
+    "internal": true,
+    "main": "../lib/renderer.js",
+    "module": "../es/renderer.js",
+    "types": "../types/renderer.d.ts"
+}

rollup.config.js

@@ -1,4 +1,3 @@
-import nodeResolve from '@rollup/plugin-node-resolve'
 import babel from 'rollup-plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import typescript from 'rollup-plugin-typescript2'
@@ -7,38 +6,26 @@ import pkg from './package.json'
 
 const extensions = ['.ts']
 
-const basePlugins = [
-    commonjs(),
-    nodeResolve({
-        extensions,
-    }),
-    typescript({ useTsconfigDeclarationDir: true }),
-]
+const basePlugins = [commonjs(), typescript({ useTsconfigDeclarationDir: true })]
+
+const baseConfig = {
+    external: Object.keys(pkg.peerDependencies || {}),
+    plugins: [
+        ...basePlugins,
+        babel({
+            extensions,
+        }),
+    ],
+}
 
 export default [
     // CommonJS
     {
-        input: 'src/index.ts',
-        output: { file: 'lib/electron-redux.js', format: 'cjs', indent: false },
-        external: Object.keys(pkg.peerDependencies || {}),
-        plugins: [
-            ...basePlugins,
-            babel({
-                extensions,
-            }),
-        ],
-    },
-
-    // ES
-    {
-        input: 'src/index.ts',
-        output: { file: 'es/electron-redux.js', format: 'es', indent: false },
-        external: Object.keys(pkg.peerDependencies || {}),
-        plugins: [
-            ...basePlugins,
-            babel({
-                extensions,
-            }),
+        ...baseConfig,
+        input: ['src/index.ts', 'src/main.ts', 'src/renderer.ts', 'src/preload.ts'],
+        output: [
+            { dir: 'lib', format: 'cjs' },
+            { dir: 'es', format: 'es' },
         ],
     },
 ]

src/composeWithStateSync.ts

@@ -1,44 +1,51 @@
 /* eslint-disable @typescript-eslint/ban-types */
 
 import { StoreEnhancer } from 'redux'
-import { forwardAction } from './forwardAction'
+import { forwardAction, ProcessForwarder } from './utils/forwardAction'
 import { StateSyncOptions } from './options/StateSyncOptions'
-import { stateSyncEnhancer } from './stateSyncEnhancer'
+import { StateSyncEnhancer } from './utils/types'
 
-const forwardActionEnhancer = (options?: StateSyncOptions): StoreEnhancer => (createStore) => (
-    reducer,
-    preloadedState
-) => {
+const forwardActionEnhancer = (
+    processForwarder: ProcessForwarder,
+    options?: StateSyncOptions
+): StoreEnhancer => (createStore) => (reducer, preloadedState) => {
     const store = createStore(reducer, preloadedState)
 
-    return forwardAction(store, options)
+    return forwardAction(store, processForwarder, options)
 }
 
-const extensionCompose = (options: StateSyncOptions) => (
-    ...funcs: StoreEnhancer[]
-): StoreEnhancer => {
+const extensionCompose = (
+    stateSyncEnhancer: StateSyncEnhancer,
+    processForwarder: ProcessForwarder,
+    options: StateSyncOptions
+) => (...funcs: StoreEnhancer[]): StoreEnhancer => {
     return (createStore) => {
         return [
             stateSyncEnhancer({ ...options, preventActionReplay: true }),
             ...funcs,
-            forwardActionEnhancer(options),
+            forwardActionEnhancer(processForwarder, options),
         ].reduceRight((composed, f) => f(composed), createStore)
     }
 }
 
-export function composeWithStateSync(
-    options: StateSyncOptions
-): (...funcs: Function[]) => StoreEnhancer
-export function composeWithStateSync(...funcs: StoreEnhancer[]): StoreEnhancer
-export function composeWithStateSync(
-    firstFuncOrOpts: StoreEnhancer | StateSyncOptions,
-    ...funcs: StoreEnhancer[]
-): StoreEnhancer | ((...funcs: StoreEnhancer[]) => StoreEnhancer) {
-    if (arguments.length === 0) {
-        return stateSyncEnhancer()
-    }
-    if (arguments.length === 1 && typeof firstFuncOrOpts === 'object') {
-        return extensionCompose(firstFuncOrOpts)
+export function createComposer(
+    stateSyncEnhancer: StateSyncEnhancer,
+    processForwarder: ProcessForwarder
+) {
+    return function composeWithStateSync(
+        firstFuncOrOpts: StoreEnhancer | StateSyncOptions,
+        ...funcs: Array<StoreEnhancer>
+    ): StoreEnhancer {
+        if (arguments.length === 0) {
+            return stateSyncEnhancer({})
+        }
+        if (arguments.length === 1 && typeof firstFuncOrOpts === 'object') {
+            return extensionCompose(stateSyncEnhancer, processForwarder, firstFuncOrOpts)()
+        }
+        return extensionCompose(
+            stateSyncEnhancer,
+            processForwarder,
+            {}
+        )(firstFuncOrOpts as StoreEnhancer, ...funcs)
     }
-    return extensionCompose({})(firstFuncOrOpts as StoreEnhancer, ...funcs)
 }

src/index.ts

@@ -1,13 +1,3 @@
-import { mainStateSyncEnhancer } from './mainStateSyncEnhancer'
-import { stopForwarding } from './utils'
-import { rendererStateSyncEnhancer } from './rendererStateSyncEnhancer'
-import { stateSyncEnhancer } from './stateSyncEnhancer'
-import { composeWithStateSync } from './composeWithStateSync'
+import { stopForwarding } from './utils/actions'
 
-export {
-    mainStateSyncEnhancer,
-    rendererStateSyncEnhancer,
-    stopForwarding,
-    stateSyncEnhancer,
-    composeWithStateSync,
-}
+export { stopForwarding }

src/mainStateSyncEnhancer.ts → src/main.ts

@@ -1,18 +1,23 @@
 import { ipcMain, webContents } from 'electron'
 import { Action, StoreEnhancer } from 'redux'
 import { IPCEvents } from './constants'
-import { forwardAction } from './forwardAction'
+import { forwardAction } from './utils/forwardAction'
+import { forwardActionToRenderers } from './main/forwardActionToRenderers'
 import { MainStateSyncEnhancerOptions } from './options/MainStateSyncEnhancerOptions'
-import { stopForwarding } from './utils'
+import { preventDoubleInitialization, stopForwarding } from './utils'
+import { StateSyncOptions } from './options/StateSyncOptions'
+import { createComposer } from './composeWithStateSync'
 
 /**
  * Creates new instance of main process redux enhancer.
  * @param {MainStateSyncEnhancerOptions} options Additional enhancer options
  * @returns StoreEnhancer
  */
-export const mainStateSyncEnhancer = (
-    options: MainStateSyncEnhancerOptions = {}
-): StoreEnhancer<any> => (createStore) => {
+export const stateSyncEnhancer = (options: MainStateSyncEnhancerOptions = {}): StoreEnhancer => (
+    createStore
+) => {
+    preventDoubleInitialization()
+
     return (reducer, preloadedState) => {
         const store = createStore(reducer, preloadedState)
 
@@ -42,6 +47,13 @@ export const mainStateSyncEnhancer = (
             })
         })
 
-        return forwardAction(store, options)
+        return forwardAction(store, forwardActionToRenderers, options)
     }
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const composeWithStateSync = (
+    firstFuncOrOpts: StoreEnhancer | StateSyncOptions,
+    ...funcs: StoreEnhancer[]
+): StoreEnhancer =>
+    createComposer(stateSyncEnhancer, forwardActionToRenderers)(firstFuncOrOpts, ...funcs)

src/main/forwardActionToRenderers.ts

@@ -0,0 +1,17 @@
+import { webContents } from 'electron'
+import { IPCEvents } from 'src/constants'
+import { MainStateSyncEnhancerOptions } from 'src/options/MainStateSyncEnhancerOptions'
+import { validateAction } from 'src/utils'
+
+export const forwardActionToRenderers = <A>(
+    action: A,
+    options: MainStateSyncEnhancerOptions = {}
+): void => {
+    if (validateAction(action, options.denyList)) {
+        webContents.getAllWebContents().forEach((contents) => {
+            // Ignore chromium devtools
+            if (contents.getURL().startsWith('devtools://')) return
+            contents.send(IPCEvents.ACTION, action)
+        })
+    }
+}