chore(build): move tsdx to esbuild (#957)

Co-authored-by: Mark Erikson <[email protected]>

Author: hardfist

.codesandbox/ci.json

@@ -3,5 +3,6 @@
     "vanilla",
     "vanilla-ts",
     "github/reduxjs/rtk-github-issues-example"
-  ]
+  ],
+  "node": "14"
 }

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['12.x']
+        node: ['14.x']
 
     steps:
       - name: Checkout repo
@@ -39,8 +39,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['12.x']
-        ts: ['3.5', '3.6', '3.7', '3.8', '3.9', '4.0', '4.1', 'next']
+        node: ['14.x']
+        ts: ['3.8', '3.9', '4.0', '4.1', 'next']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2

.prettierrc.json

@@ -1,4 +1,6 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "endOfLine": "auto"
 }
+ 

docs/tutorials/quick-start.md

@@ -51,7 +51,7 @@ Create a file named `src/app/store.js`. Import the `configureStore` API from Red
 import { configureStore } from '@reduxjs/toolkit'
 
 export default configureStore({
-  reducer: {}
+  reducer: {},
 })
 ```
 
@@ -94,23 +94,23 @@ import { createSlice } from '@reduxjs/toolkit'
 export const counterSlice = createSlice({
   name: 'counter',
   initialState: {
-    value: 0
+    value: 0,
   },
   reducers: {
-    increment: state => {
+    increment: (state) => {
       // Redux Toolkit allows us to write "mutating" logic in reducers. It
       // doesn't actually mutate the state because it uses the Immer library,
       // which detects changes to a "draft state" and produces a brand new
       // immutable state based off those changes
       state.value += 1
     },
-    decrement: state => {
+    decrement: (state) => {
       state.value -= 1
     },
     incrementByAmount: (state, action) => {
       state.value += action.payload
-    }
-  }
+    },
+  },
 })
 
 // Action creators are generated for each case reducer function
@@ -131,8 +131,8 @@ import counterReducer from '../features/counter/counterSlice'
 export default configureStore({
   reducer: {
     // highlight-next-line
-    counter: counterReducer
-  }
+    counter: counterReducer,
+  },
 })
 ```
 
@@ -147,7 +147,7 @@ import { decrement, increment } from './counterSlice'
 import styles from './Counter.module.css'
 
 export function Counter() {
-  const count = useSelector(state => state.counter.value)
+  const count = useSelector((state) => state.counter.value)
   const dispatch = useDispatch()
 
   return (

docs/tutorials/typescript.md

@@ -51,8 +51,8 @@ const store = configureStore({
   reducer: {
     posts: postsReducer,
     comments: commentsReducer,
-    users: usersReducer
-  }
+    users: usersReducer,
+  },
 })
 
 // highlight-start
@@ -105,7 +105,7 @@ interface CounterState {
 
 // Define the initial state using that type
 const initialState: CounterState = {
-  value: 0
+  value: 0,
 }
 // highlight-end
 
@@ -114,19 +114,19 @@ export const counterSlice = createSlice({
   // `createSlice` will infer the state type from the `initialState` argument
   initialState,
   reducers: {
-    increment: state => {
+    increment: (state) => {
       state.value += 1
     },
-    decrement: state => {
+    decrement: (state) => {
       state.value -= 1
     },
     // highlight-start
     // Use the PayloadAction type to declare the contents of `action.payload`
     incrementByAmount: (state, action: PayloadAction<number>) => {
       // highlight-end
       state.value += action.payload
-    }
-  }
+    },
+  },
 })
 
 export const { increment, decrement, incrementByAmount } = counterSlice.actions
@@ -144,7 +144,7 @@ In some cases, [TypeScript may unnecessarily tighten the type of the initial sta
 ```ts
 // Workaround: cast state instead of declaring variable type
 const initialState = {
-  value: 0
+  value: 0,
 } as CounterState
 ```
 
@@ -163,7 +163,7 @@ import { decrement, increment } from './counterSlice'
 export function Counter() {
   // highlight-start
   // The `state` arg is correctly typed as `RootState` already
-  const count = useAppSelector(state => state.counter.value)
+  const count = useAppSelector((state) => state.counter.value)
   const dispatch = useAppDispatch()
   // highlight-end
 

docs/usage/immer-reducers.md

@@ -40,9 +40,9 @@ We can do this by hand using JavaScript's array / object spread operators, as we
 const obj = {
   a: {
     // To safely update obj.a.c, we have to copy each piece
-    c: 3
+    c: 3,
   },
-  b: 2
+  b: 2,
 }
 
 const obj2 = {
@@ -53,8 +53,8 @@ const obj2 = {
     // copy obj.a
     ...obj.a,
     // overwrite c
-    c: 42
-  }
+    c: 42,
+  },
 }
 
 const arr = ['a', 'b']
@@ -107,7 +107,7 @@ So if we can't change the originals, how do we return an updated state?
 // ✅ This is safe, because we made a copy
 return {
   ...state,
-  value: 123
+  value: 123,
 }
 ```
 
@@ -129,10 +129,10 @@ function handwrittenReducer(state, action) {
         ...state.first.second,
         [action.someId]: {
           ...state.first.second[action.someId],
-          fourth: action.someValue
-        }
-      }
-    }
+          fourth: action.someValue,
+        },
+      },
+    },
   }
 }
 ```
@@ -153,15 +153,15 @@ import produce from 'immer'
 const baseState = [
   {
     todo: 'Learn typescript',
-    done: true
+    done: true,
   },
   {
     todo: 'Try immer',
-    done: false
-  }
+    done: false,
+  },
 ]
 
-const nextState = produce(baseState, draftState => {
+const nextState = produce(baseState, (draftState) => {
   // "mutate" the draft array
   draftState.push({ todo: 'Tweet about it' })
   // "mutate" the nested state
@@ -181,7 +181,7 @@ console.log(baseState[1] === nextState[1])
 Redux Toolkit's [`createReducer` API](../api/createReducer.mdx) uses Immer internally automatically. So, it's already safe to "mutate" state inside of any case reducer function that is passed to `createReducer`:
 
 ```js
-const todosReducer = createReducer([], builder => {
+const todosReducer = createReducer([], (builder) => {
   builder.addCase('todos/todoAdded', (state, action) => {
     // "mutate" the array by calling push()
     state.push(action.payload)
@@ -198,8 +198,8 @@ const todosSlice = createSlice({
   reducers: {
     todoAdded(state, action) {
       state.push(action.payload)
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -214,8 +214,8 @@ const todosSlice = createSlice({
   name: 'todos',
   initialState: [],
   reducers: {
-    todoAdded: addItemToArray
-  }
+    todoAdded: addItemToArray,
+  },
 })
 ```
 
@@ -285,8 +285,8 @@ const todosSlice = createSlice({
     // ✅ SAFE: curly braces make this a function body and no return
     fixedReducer2: (state, action) => {
       state.push(action.payload)
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -300,7 +300,7 @@ function objectCaseReducer1(state, action) {
     a,
     b,
     c,
-    d
+    d,
   }
 }
 
@@ -352,8 +352,8 @@ const todosSlice = createSlice({
     correctResetTodosReducer(state, action) {
       // ✅ CORRECT: returns a new value to replace the old one
       return initialState
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -377,8 +377,8 @@ const todosSlice = createSlice({
       console.log(state)
       // ✅ CORRECT: logs a plain JS copy of the current data
       console.log(current(state))
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -400,21 +400,21 @@ const todosSlice = createSlice({
   initialState: [],
   reducers: {
     brokenTodoToggled(state, action) {
-      const todo = state.find(todo => todo.id === action.payload)
+      const todo = state.find((todo) => todo.id === action.payload)
       if (todo) {
         // ❌ ERROR: Immer can't track updates to a primitive value!
         let { completed } = todo
         completed = !completed
       }
     },
     fixedTodoToggled(state, action) {
-      const todo = state.find(todo => todo.id === action.payload)
+      const todo = state.find((todo) => todo.id === action.payload)
       if (todo) {
         // ✅ CORRECT: This object is still wrapped in a Proxy, so we can "mutate" it
         todo.completed = !todo.completed
       }
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -442,8 +442,8 @@ const itemsSlice = createSlice({
       }
 
       state[id].push(item)
-    }
-  }
+    },
+  },
 })
 ```