[WIP] create JS codeblocks from TS code in the docs (reduxjs#707)

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

.gitignore

@@ -10,5 +10,6 @@ yarn.lock
 .idea/
 .vscode/
 temp/
+.tmp-projections
 
 .rts2*

docs/api/configureStore.md → docs/api/configureStore.mdx

@@ -14,7 +14,7 @@ to the store setup for a better development experience.
 
 `configureStore` accepts a single configuration object parameter, with the following options:
 
-```ts
+```ts no-transpile
 type ConfigureEnhancersCallback = (
   defaultEnhancers: StoreEnhancer[]
 ) => StoreEnhancer[]
@@ -92,7 +92,7 @@ and should return a middleware array. This lets you skip importing `getDefaultMi
 retain the types of the provided middleware when constructing the store.
 
 For more details on how the `middleware` parameter works and the list of middleware that are added by default, see the
-[`getDefaultMiddleware` docs page](./getDefaultMiddleware.md).
+[`getDefaultMiddleware` docs page](./getDefaultMiddleware.mdx).
 
 ### `devTools`
 
@@ -133,7 +133,13 @@ of `[offline, applyMiddleware, devToolsExtension]`.
 
 ### Basic Example
 
-```js
+```ts
+// file: reducers.ts noEmit
+import { Reducer } from '@reduxjs/toolkit'
+declare const rootReducer: Reducer<{}>
+export default rootReducer
+
+// file: store.ts
 import { configureStore } from '@reduxjs/toolkit'
 
 import rootReducer from './reducers'
@@ -144,8 +150,19 @@ const store = configureStore({ reducer: rootReducer })
 
 ### Full Example
 
-```js
-import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
+```ts
+// file: todos/todosReducer.ts noEmit
+import { Reducer } from '@reduxjs/toolkit'
+declare const reducer: Reducer<{}>
+export default reducer
+
+// file: visibility/visibilityReducer.ts noEmit
+import { Reducer } from '@reduxjs/toolkit'
+declare const reducer: Reducer<{}>
+export default reducer
+
+// file: store.ts
+import { configureStore } from '@reduxjs/toolkit'
 
 // We'll use redux-logger just as an example of adding another middleware
 import logger from 'redux-logger'
@@ -161,8 +178,6 @@ const reducer = {
   visibility: visibilityReducer
 }
 
-const middleware = [...getDefaultMiddleware(), logger]
-
 const preloadedState = {
   todos: [
     {
@@ -179,7 +194,7 @@ const preloadedState = {
 
 const store = configureStore({
   reducer,
-  middleware,
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(logger),
   devTools: process.env.NODE_ENV !== 'production',
   preloadedState,
   enhancers: [reduxBatch]

docs/api/createAction.md → docs/api/createAction.mdx

@@ -15,10 +15,10 @@ function createAction(type, prepareAction?)
 
 The usual way to define an action in Redux is to separately declare an _action type_ constant and an _action creator_ function for constructing actions of that type.
 
-```js
+```ts
 const INCREMENT = 'counter/increment'
 
-function increment(amount) {
+function increment(amount: number) {
   return {
     type: INCREMENT,
     payload: amount
@@ -31,8 +31,10 @@ const action = increment(3)
 
 The `createAction` helper combines these two declarations into one. It takes an action type and returns an action creator for that type. The action creator can be called either without arguments or with a `payload` to be attached to the action. Also, the action creator overrides [toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) so that the action type becomes its string representation.
 
-```js
-const increment = createAction('counter/increment')
+```ts
+import { createAction } from '@reduxjs/toolkit'
+
+const increment = createAction<number | undefined>('counter/increment')
 
 let action = increment()
 // { type: 'counter/increment' }
@@ -53,10 +55,10 @@ By default, the generated action creators accept a single argument, which become
 
 In many cases, you may want to write additional logic to customize the creation of the `payload` value, such as accepting multiple parameters for the action creator, generating a random ID, or getting the current timestamp. To do this, `createAction` accepts an optional second argument: a "prepare callback" that will be used to construct the payload value.
 
-```js
-import { nanoid } from '@reduxjs/toolkit'
+```ts
+import { createAction, nanoid } from '@reduxjs/toolkit'
 
-const addTodo = createAction('todos/add', function prepare(text) {
+const addTodo = createAction('todos/add', function prepare(text: string) {
   return {
     payload: {
       text,
@@ -85,20 +87,20 @@ If provided, all arguments from the action creator will be passed to the prepare
 
 ## Usage with createReducer()
 
-Because of their `toString()` override, action creators returned by `createAction()` can be used directly as keys for the case reducers passed to [createReducer()](createReducer.md).
+Because of their `toString()` override, action creators returned by `createAction()` can be used directly as keys for the case reducers passed to [createReducer()](createReducer.mdx).
 
-```js
-const increment = createAction('counter/increment')
-const decrement = createAction('counter/decrement')
+```ts
+import { createAction, createReducer } from '@reduxjs/toolkit'
 
-const counterReducer = createReducer(0, {
-  [increment]: (state, action) => state + action.payload,
-  [decrement]: (state, action) => state - action.payload
+const increment = createAction<number>('counter/increment')
+const decrement = createAction<number>('counter/decrement')
+
+const counterReducer = createReducer(0, builder => {
+  builder.addCase(increment, (state, action) => state + action.payload)
+  builder.addCase(decrement, (state, action) => state - action.payload)
 })
 ```
 
-This works because object keys that are not natively supported by JavaScript (like, in this case, functions) are implicitly converted to strings, and the action creators’ string representations happen to be the action types they produce.
-
 ## Non-String Action Types
 
 In principle, Redux lets you use any kind of value as an action type. Instead of strings, you could theoretically use numbers, [symbols](https://developer.mozilla.org/en-US/docs/Glossary/Symbol), or anything else ([although it's recommended that the value should at least be serializable](https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)).
@@ -117,7 +119,7 @@ increment.toString() === INCREMENT
 // false
 ```
 
-This means that, for instance, you cannot use a non-string-type action creator as a case reducer key for [createReducer()](createReducer.md).
+This means that, for instance, you cannot use a non-string-type action creator as a case reducer key for [createReducer()](createReducer.mdx).
 
 ```js
 const INCREMENT = Symbol('increment')
@@ -149,7 +151,9 @@ This `match` method is a [TypeScript type guard](https://www.typescriptlang.org/
 
 This behavior can be particularly useful when used in custom middlewares, where manual casts might be neccessary otherwise.
 
-```typescript
+```ts
+import { createAction, Action } from '@reduxjs/toolkit'
+
 const increment = createAction<number>('INCREMENT')
 
 function someFunction(action: Action) {
@@ -164,7 +168,11 @@ function someFunction(action: Action) {
 
 The `match` method can also be used as a filter method, which makes it powerful when used with redux-observable:
 
-```typescript
+```ts
+import { createAction, Action } from '@reduxjs/toolkit'
+import { Observable } from 'rxjs'
+import { map, filter } from 'rxjs/operators'
+
 const increment = createAction<number>('INCREMENT')
 
 export const epic = (actions$: Observable<Action>) =>