@uppy/store-redux: refactor to ESM (#3745)

.eslintrc.js

@@ -220,6 +220,7 @@ module.exports = {
         'packages/@uppy/redux-dev-tools/src/**/*.js',
         'packages/@uppy/screen-capture/src/**/*.js',
         'packages/@uppy/status-bar/src/**/*.js',
+        'packages/@uppy/store-redux/src/**/*.js',
         'packages/@uppy/svelte/src/**/*.js',
         'packages/@uppy/svelte/rollup.config.js',
         'packages/@uppy/thumbnail-generator/src/**/*.js',

packages/@uppy/store-redux/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
+  "type": "module",
   "keywords": [
     "file uploader",
     "uppy",
@@ -23,6 +24,7 @@
     "nanoid": "^3.1.25"
   },
   "devDependencies": {
+    "@jest/globals": "^27.4.2",
     "redux": "4.0.5"
   }
 }

packages/@uppy/store-redux/src/index.js

@@ -1,11 +1,22 @@
-const { nanoid } = require('nanoid/non-secure')
+import { nanoid } from 'nanoid/non-secure'
+
+import packageJson from '../package.json'
 
 // Redux action name.
-const STATE_UPDATE = 'uppy/STATE_UPDATE'
+export const STATE_UPDATE = 'uppy/STATE_UPDATE'
 
 // Pluck Uppy state from the Redux store in the default location.
 const defaultSelector = (id) => (state) => state.uppy[id]
 
+function getPatch (prev, next) {
+  const nextKeys = Object.keys(next)
+  const patch = {}
+  nextKeys.forEach((k) => {
+    if (prev[k] !== next[k]) patch[k] = next[k]
+  })
+  return patch
+}
+
 /**
  * Redux store.
  *
@@ -15,8 +26,8 @@ const defaultSelector = (id) => (state) => state.uppy[id]
  * @param {Function} opts.selector - Function, `(state) => uppyState`, to pluck state from the Redux store.
  *    Defaults to retrieving `state.uppy[opts.id]`. Override if you placed Uppy state elsewhere in the Redux store.
  */
-class ReduxStore {
-  static VERSION = require('../package.json').version
+export class ReduxStore {
+  static VERSION = packageJson.version
 
   #id
 
@@ -63,16 +74,7 @@ class ReduxStore {
   }
 }
 
-function getPatch (prev, next) {
-  const nextKeys = Object.keys(next)
-  const patch = {}
-  nextKeys.forEach((k) => {
-    if (prev[k] !== next[k]) patch[k] = next[k]
-  })
-  return patch
-}
-
-function reducer (state = {}, action) {
+export function reducer (state = {}, action) {
   if (action.type === STATE_UPDATE) {
     const newState = { ...state[action.id], ...action.payload }
     return { ...state, [action.id]: newState }
@@ -80,15 +82,19 @@ function reducer (state = {}, action) {
   return state
 }
 
-function middleware () {
+export function middleware () {
   // Do nothing, at the moment.
   return () => (next) => (action) => {
     next(action)
   }
 }
 
-module.exports = ReduxStore
-module.exports.ReduxStore = ReduxStore
-module.exports.STATE_UPDATE = STATE_UPDATE
-module.exports.reducer = reducer
-module.exports.middleware = middleware
+export default ReduxStore
+
+// Backward compatibility: we want these to keep being available as static
+// properties of `ReduxStore` to avoid a breaking change.
+// TODO: remove these in the next semver-major.
+ReduxStore.ReduxStore = ReduxStore
+ReduxStore.STATE_UPDATE = STATE_UPDATE
+ReduxStore.reducer = reducer
+ReduxStore.middleware = middleware

packages/@uppy/store-redux/src/index.test.js

@@ -1,10 +1,11 @@
-const Redux = require('redux')
-const ReduxStore = require('./index')
+import { describe, expect, it } from '@jest/globals'
+import Redux from 'redux'
+import { ReduxStore, reducer } from './index.js'
 
 describe('ReduxStore', () => {
   function createStore (reducers = {}) {
-    const reducer = Redux.combineReducers({ ...reducers, uppy: ReduxStore.reducer })
-    return Redux.createStore(reducer)
+    const combinedReducers = Redux.combineReducers({ ...reducers, uppy: reducer })
+    return Redux.createStore(combinedReducers)
   }
 
   it('can be created with named or default import', () => {
@@ -55,12 +56,12 @@ describe('ReduxStore', () => {
   })
 
   it('fires `subscribe` if state is modified externally (eg redux devtools)', () => {
-    const reducer = Redux.combineReducers({ uppy: ReduxStore.reducer })
+    const combinedReducers = Redux.combineReducers({ uppy: reducer })
     const r = Redux.createStore((state, action) => {
       // Add a `SET` action that can change Uppy state without going through the Uppy reducer or action creator.
       // Emulates Redux Devtools.
       if (action.type === 'SET') return action.payload
-      return reducer(state, action)
+      return combinedReducers(state, action)
     })
 
     let expected = []
@@ -91,10 +92,10 @@ describe('ReduxStore', () => {
   })
 
   it('can mount in a custom state key', () => {
-    const reducer = Redux.combineReducers({
-      hello: ReduxStore.reducer,
+    const combinedReducers = Redux.combineReducers({
+      hello: reducer,
     })
-    const r = Redux.createStore(reducer)
+    const r = Redux.createStore(combinedReducers)
     const store = new ReduxStore({
       store: r,
       id: 'world',

yarn.lock

@@ -10120,6 +10120,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy/store-redux@workspace:packages/@uppy/store-redux"
   dependencies:
+    "@jest/globals": ^27.4.2
     nanoid: ^3.1.25
     redux: 4.0.5
   languageName: unknown