Merge branch 'master' into more-typed-wrappers

Author: EskiMojo14

.github/workflows/size.yml.bak renamed to .github/workflows/size.yml

@@ -7,8 +7,9 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - uses: actions/checkout@v2
-      - uses: andresz1/size-limit-action@v1
+      - uses: EskiMojo14/size-limit-action@v1
         with:
           directory: packages/toolkit
           github_token: ${{ secrets.GITHUB_TOKEN }}
           build_script: build-only
+          package_manager: yarn

.yarn/patches/size-limit-npm-11.0.1-05996e44e7.patch

@@ -0,0 +1,22 @@
+diff --git a/get-config.js b/get-config.js
+index 76ebaee5455b2a4bacb986784bd1b53ad89adeb7..1b092e645b258f4a6533ca88b7d36dbcde4eb6de 100644
+--- a/get-config.js
++++ b/get-config.js
+@@ -132,7 +132,7 @@ export default async function getConfig(plugins, process, args, pkg) {
+         } else if (!check.entry) {
+           if (pkg.packageJson.main) {
+             processed.files = [
+-              require.resolve(join(dirname(pkg.path), pkg.packageJson.main))
++              import.meta.resolve(join(dirname(pkg.path), pkg.packageJson.main))
+             ]
+           } else {
+             processed.files = [join(dirname(pkg.path), 'index.js')]
+@@ -177,7 +177,7 @@ export default async function getConfig(plugins, process, args, pkg) {
+       for (let i in check.import) {
+         if (peer.includes(i)) {
+           check.ignore = check.ignore.filter(j => j !== i)
+-          imports[require.resolve(i, config.cwd)] = check.import[i]
++          imports[import.meta.resolve(i, config.cwd)] = check.import[i]
+         } else {
+           imports[toAbsolute(i, config.cwd)] = check.import[i]
+         }

CONTRIBUTING.md

@@ -8,25 +8,59 @@ Before opening an issue, please search the [issue tracker](https://github.com/re
 
 Please ask any general and implementation specific questions on [Stack Overflow with a Redux Toolkit tag](http://stackoverflow.com/questions/tagged/redux-toolkit?sort=votes&pageSize=50) for support.
 
-## New Features
+We ask you to do this because StackOverflow has a much better job at keeping popular questions visible. Unfortunately good answers get lost and outdated on GitHub.
 
-Please open an issue with a proposal for a new feature or refactoring before starting on the work. We don't want you to waste your efforts on a pull request that we won't want to accept.
+If your question gets closed or you don't get a reply after a few days, consider opening a [discussion](https://github.com/reduxjs/redux-toolkit/discussions) or joining the [Reactiflux](https://discord.gg/reactiflux) discord server and asking in the #redux channel.
+
+### Help Us Help You
+
+On both websites, it is a good idea to structure your code and question in a way that is easy to read to help people to answer it. For example, we encourage you to use syntax highlighting, indentation, and split text in paragraphs.
+
+Please keep in mind that people spend their free time trying to help you. You can make it easier for them if you provide versions of the relevant libraries and a runnable small project reproducing your issue. You can put your code on [JSBin](https://jsbin.com) or, for bigger projects, on GitHub. Make sure all the necessary dependencies are declared in `package.json` so anyone can run `npm install && npm start` and reproduce your issue.
+
+## Ways You Can Contribute
+
+There are several ways you can contribute to the repository. Instead of developing a feature or fixing a bug, you can also contribute by updating or writing [documentation](https://github.com/reduxjs/redux-toolkit/tree/master/docs) for a specific feature or implementation if you know you are good with documentation. Alternatively, you can add [examples](https://github.com/reduxjs/redux-toolkit/tree/master/examples) of any 3rd party implementation like GraphQL or React (just an example) that would help users to understand and easily integrate Redux Toolkit with that specific framework and library.
 
 ## Getting started
 
 Visit the [Issue tracker](https://github.com/reduxjs/redux-toolkit/issues) to find a list of open issues that need attention.
 
+### Bugs and Improvements
+
+We use the [Issue tracker](https://github.com/reduxjs/redux-toolkit/issues) to keep track of bugs and improvements to Redux Toolkit itself, its examples, and the documentation. We encourage you to open issues to discuss improvements, architecture, theory, internal implementation, etc. If a topic has been discussed before, we will ask you to join the previous discussion.
+
+### New Features
+
+Please open an [issue](https://github.com/reduxjs/redux-toolkit/issues) with a proposal for a new feature or refactoring before starting on the work. We don't want you to waste your efforts on a pull request that we won't want to accept.
+
 ### Fork the repository
 
 Please use the GitHub UI to [fork this repository](https://github.com/reduxjs/redux-toolkit) (_read more about [Forking a repository](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo)_). Redux Toolkit has forked builds enabled in the CI, so you will see the build status of your fork's branch.
 
+![Fork Button](https://docs.github.com/assets/cb-40742/mw-1440/images/help/repository/fork-button.webp)
+
+Fork, then clone the repo:
+
+```sh
+git clone https://github.com/your-username/redux-toolkit.git
+```
+
 ### Install
 
 ```bash
 $ cd redux-toolkit
 $ yarn
 ```
 
+### Build
+
+You can build the packages with the following command:
+
+```
+yarn build
+```
+
 ### Tests
 
 You can run tests for all packages with:
@@ -41,14 +75,6 @@ To continuously watch and run tests, run the following:
 yarn test --watch
 ```
 
-### Build
-
-You can build the packages with the following command:
-
-```
-yarn build
-```
-
 ## Git workflow / Submitting Changes
 
 - Open a new issue in the [Issue tracker](https://github.com/reduxjs/redux-toolkit/issues).

docs/api/createSlice.mdx

@@ -240,7 +240,7 @@ create.preparedReducer(
 
 Creates an async thunk instead of an action creator.
 
-:::warning Setup
+:::caution Setup
 
 To avoid pulling `createAsyncThunk` into the bundle size of `createSlice` by default, some extra setup is required to use `create.asyncThunk`.
 

packages/rtk-query-codegen-openapi/package.json

@@ -39,6 +39,7 @@
     "@types/jest": "^27",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.12",
+    "@types/node-fetch": "^2.6.11",
     "@types/prettier": "^2.1.6",
     "@types/semver": "^7.3.9",
     "babel-jest": "^26.6.3",
@@ -49,6 +50,7 @@
     "husky": "^4.3.6",
     "jest": "^29",
     "msw": "^0.40.2",
+    "node-fetch": "^2.7.0",
     "openapi-types": "^9.1.0",
     "pretty-quick": "^3.1.0",
     "ts-jest": "^29",

packages/toolkit/.size-limit.js renamed to packages/toolkit/.size-limit.cjs

@@ -1,58 +1,84 @@
 const webpack = require('webpack')
 let { join } = require('path')
 
-const suffixes = ['cjs.production.min.js', 'esm.js']
+const esmSuffixes = ['modern.mjs', 'browser.mjs', 'legacy-esm.js']
+const cjsSuffixes = ['development.cjs', 'production.min.cjs']
 
-function withRtkPath(suffix) {
+function withRtkPath(suffix, cjs = false) {
+  /**
+   * @param {string} name
+   */
+  function alias(name) {
+    return `${cjs ? 'cjs/' : ''}${name}.${suffix}`
+  }
+  /**
+   * @param {webpack.Configuration} config
+   */
   return (config) => {
     config.plugins.push(
       new webpack.NormalModuleReplacementPlugin(
         /@reduxjs\/toolkit\/query\/react/,
-        join(__dirname, `query/react`),
+        join(__dirname, 'dist/query/react/rtk-query-react.modern.mjs'),
       ),
       new webpack.NormalModuleReplacementPlugin(
         /@reduxjs\/toolkit\/query/,
-        join(__dirname, `query`),
+        join(__dirname, 'dist/query/rtk-query.modern.mjs'),
+      ),
+      new webpack.NormalModuleReplacementPlugin(
+        /@reduxjs\/toolkit\/react/,
+        join(__dirname, 'dist/react/redux-toolkit-react.modern.mjs'),
       ),
       new webpack.NormalModuleReplacementPlugin(
         /@reduxjs\/toolkit/,
-        join(__dirname),
+        join(__dirname, 'dist/redux-toolkit.modern.mjs'),
       ),
       new webpack.NormalModuleReplacementPlugin(
-        /rtk-query-react.modern.js/,
+        /rtk-query-react.modern.mjs/,
         (r) => {
           const old = r.request
           r.request = r.request.replace(
-            /rtk-query-react.modern.js$/,
-            `rtk-query-react.${suffix}`,
+            /rtk-query-react.modern.mjs$/,
+            alias('rtk-query-react'),
           )
-          // console.log(old, '=>', r.request)
+          //console.log(old, '=>', r.request)
         },
       ),
-      new webpack.NormalModuleReplacementPlugin(/rtk-query.modern.js/, (r) => {
+      new webpack.NormalModuleReplacementPlugin(/rtk-query.modern.mjs/, (r) => {
         const old = r.request
         r.request = r.request.replace(
-          /rtk-query.modern.js$/,
-          `rtk-query.${suffix}`,
+          /rtk-query.modern.mjs$/,
+          alias('rtk-query'),
         )
-        // console.log(old, '=>', r.request)
+        //console.log(old, '=>', r.request)
       }),
       new webpack.NormalModuleReplacementPlugin(
-        /redux-toolkit.modern.js$/,
+        /redux-toolkit-react.modern.mjs$/,
+        (r) => {
+          const old = r.request
+          r.request = r.request.replace(
+            /redux-toolkit-react.modern.mjs$/,
+            alias('redux-toolkit-react'),
+          )
+          //console.log(old, '=>', r.request)
+        },
+      ),
+      new webpack.NormalModuleReplacementPlugin(
+        /redux-toolkit.modern.mjs$/,
         (r) => {
           const old = r.request
           r.request = r.request.replace(
-            /redux-toolkit.modern.js$/,
-            `redux-toolkit.${suffix}`,
+            /redux-toolkit.modern.mjs$/,
+            alias('redux-toolkit'),
           )
-          // console.log(old, '=>', r.request)
+          //console.log(old, '=>', r.request)
         },
       ),
     )
-    if (suffix === 'cjs.production.min.js') {
-      config.resolve.mainFields = ['main', 'module']
+
+    if (suffix === 'production.min.cjs') {
+      ;(config.resolve ??= {}).mainFields = ['main', 'module']
     }
-    config.optimization.nodeEnv = 'production'
+    ;(config.optimization ??= {}).nodeEnv = 'production'
     return config
   }
 }
@@ -66,42 +92,62 @@ const ignoreAll = [
   'redux-thunk',
 ]
 
-module.exports = [
+const entryPoints = [
   {
     name: `1. entry point: @reduxjs/toolkit`,
-    path: 'dist/redux-toolkit.modern.js',
+    path: 'dist/redux-toolkit.modern.mjs',
+  },
+  {
+    name: `1. entry point: @reduxjs/toolkit/react`,
+    path: 'dist/react/redux-toolkit-react.modern.mjs',
   },
   {
     name: `1. entry point: @reduxjs/toolkit/query`,
-    path: 'dist/query/rtk-query.modern.js',
+    path: 'dist/query/rtk-query.modern.mjs',
   },
   {
     name: `1. entry point: @reduxjs/toolkit/query/react`,
-    path: 'dist/query/react/rtk-query-react.modern.js',
+    path: 'dist/query/react/rtk-query-react.modern.mjs',
   },
   {
     name: `2. entry point: @reduxjs/toolkit (without dependencies)`,
-    path: 'dist/redux-toolkit.modern.js',
+    path: 'dist/redux-toolkit.modern.mjs',
+    ignore: ignoreAll,
+  },
+  {
+    name: `2. entry point: @reduxjs/toolkit/react (without dependencies)`,
+    path: 'dist/react/redux-toolkit-react.modern.mjs',
     ignore: ignoreAll,
   },
   {
     name: `2. entry point: @reduxjs/toolkit/query (without dependencies)`,
-    path: 'dist/query/rtk-query.modern.js',
+    path: 'dist/query/rtk-query.modern.mjs',
     ignore: ignoreAll,
   },
   {
     name: `2. entry point: @reduxjs/toolkit/query/react (without dependencies)`,
-    path: 'dist/query/react/rtk-query-react.modern.js',
+    path: 'dist/query/react/rtk-query-react.modern.mjs',
     ignore: ignoreAll,
   },
 ]
+
+module.exports = entryPoints
   .flatMap((e) =>
-    suffixes.map((suffix) => ({
+    esmSuffixes.map((suffix) => ({
       ...e,
       name: e.name + ` (${suffix})`,
       modifyWebpackConfig: withRtkPath(suffix),
     })),
   )
+  .concat(
+    entryPoints.flatMap((e) =>
+      cjsSuffixes.map((suffix) => ({
+        ...e,
+        name: e.name + ` (cjs, ${suffix})`,
+        modifyWebpackConfig: withRtkPath(suffix, true),
+      })),
+    ),
+  )
   .concat(
     ...[
       {
@@ -138,7 +184,7 @@ module.exports = [
       },
     ].map((e) => ({
       ...e,
-      name: e.name + ` (esm.js)`,
-      modifyWebpackConfig: withRtkPath('esm.js'),
+      name: e.name + ` (.modern.mjs)`,
+      modifyWebpackConfig: withRtkPath('modern.mjs'),
     })),
   )

packages/toolkit/README.md

@@ -104,3 +104,7 @@ RTK Query includes these APIs:
 - `setupListeners()`: A utility used to enable refetchOnMount and refetchOnReconnect behaviors.
 
 See the [**RTK Query Overview**](https://redux-toolkit.js.org/rtk-query/overview) page for more details on what RTK Query is, what problems it solves, and how to use it.
+
+## Contributing
+
+Please refer to our [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Redux Toolkit.

packages/toolkit/package.json

@@ -52,12 +52,14 @@
     "@arethetypeswrong/cli": "^0.13.5",
     "@microsoft/api-extractor": "^7.13.2",
     "@phryneas/ts-version": "^1.0.2",
-    "@size-limit/preset-small-lib": "^4.11.0",
+    "@size-limit/file": "^11.0.1",
+    "@size-limit/webpack": "^11.0.1",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.1.5",
     "@types/json-stringify-safe": "^5.0.0",
     "@types/nanoid": "^2.1.0",
     "@types/node": "^20.11.0",
+    "@types/node-fetch": "^2.6.11",
     "@types/query-string": "^6.3.0",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
@@ -81,11 +83,11 @@
     "jsdom": "^21.0.0",
     "json-stringify-safe": "^5.0.1",
     "msw": "^2.1.4",
-    "node-fetch": "^3.3.2",
+    "node-fetch": "^2.7.0",
     "prettier": "^3.2.4",
     "query-string": "^7.0.1",
     "rimraf": "^3.0.2",
-    "size-limit": "^4.11.0",
+    "size-limit": "^11.0.1",
     "tslib": "^1.10.0",
     "tsup": "^7.2.0",
     "tsx": "^3.12.2",
@@ -104,7 +106,8 @@
     "test": "vitest --run --typecheck",
     "test:watch": "vitest --watch",
     "type-tests": "yarn tsc -p tsconfig.test.json --noEmit",
-    "prepack": "yarn build"
+    "prepack": "yarn build",
+    "size": "size-limit"
   },
   "files": [
     "dist/",

packages/toolkit/src/query/tests/fetchBaseQuery.test.tsx

@@ -1003,7 +1003,7 @@ describe('fetchBaseQuery', () => {
 
       expect(result?.error).toEqual({
         status: 'TIMEOUT_ERROR',
-        error: 'AbortError: The operation was aborted.',
+        error: expect.stringMatching(/^AbortError:/),
       })
     })
   })
@@ -1121,7 +1121,7 @@ describe('timeout', () => {
 
     expect(result?.error).toEqual({
       status: 'TIMEOUT_ERROR',
-      error: 'AbortError: The operation was aborted.',
+      error: expect.stringMatching(/^AbortError:/),
     })
   })
 })

packages/toolkit/tsup.config.ts

@@ -214,7 +214,9 @@ export default defineConfig((options) => {
             } else if (generateTypedefs) {
               if (folder === '') {
                 // we need to delete the declaration file and replace it with the original source file
-                fs.rmSync(path.join(outputFolder, 'uncheckedindexed.d.ts'))
+                fs.rmSync(path.join(outputFolder, 'uncheckedindexed.d.ts'), {
+                  force: true,
+                })
 
                 fs.copyFileSync(
                   'src/uncheckedindexed.ts',