Merge branch 'master' into combineslices-example

Author: EskiMojo14

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

@@ -1,14 +1,20 @@
 name: size
-on: [pull_request]
+on:
+  pull_request:
+    branches:
+      - master
+permissions:
+  pull-requests: write
 jobs:
   size:
     runs-on: ubuntu-latest
     env:
       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`.
 

docs/rtk-query/api/created-api/hooks.mdx

@@ -251,6 +251,7 @@ type UseQuery = (
 
 type UseQueryOptions = {
   pollingInterval?: number
+  skipPollingIfUnfocused?: boolean
   refetchOnReconnect?: boolean
   refetchOnFocus?: boolean
   skip?: boolean
@@ -445,6 +446,7 @@ type UseQuerySubscriptionOptions = {
   skip?: boolean
   refetchOnMountOrArgChange?: boolean | number
   pollingInterval?: number
+  skipPollingIfUnfocused?: boolean
   refetchOnReconnect?: boolean
   refetchOnFocus?: boolean
 }
@@ -485,6 +487,7 @@ type UseLazyQuery = (
 
 type UseLazyQueryOptions = {
   pollingInterval?: number
+  skipPollingIfUnfocused?: boolean
   refetchOnReconnect?: boolean
   refetchOnFocus?: boolean
   selectFromResult?: (result: UseQueryStateDefaultResult) => any
@@ -555,6 +558,7 @@ type UseLazyQuerySubscription = (
 
 type UseLazyQuerySubscriptionOptions = {
   pollingInterval?: number
+  skipPollingIfUnfocused?: boolean
   refetchOnReconnect?: boolean
   refetchOnFocus?: boolean
 }

docs/rtk-query/usage/polling.mdx

@@ -14,14 +14,21 @@ description: 'RTK Query > Usage > Polling: re-fetching data on a timer'
 
 Polling gives you the ability to have a 'real-time' effect by causing a query to run at a specified interval. To enable polling for a query, pass a `pollingInterval` to the `useQuery` hook or action creator with an interval in milliseconds:
 
+:::tip
+Polling additionally has the ability to skip sending requests while the window is out of focus. To enable this behavior, pass `skipPollingIfUnfocused: true` to the `useQuery` hook or action creator.
+
+_Note: `skipPollingIfUnfocused` requires [`setupListeners`](../api/setupListeners.mdx) to have been called._
+:::
+
 ```tsx no-transpile title="src/Pokemon.tsx" no-transpile
 import * as React from 'react'
 import { useGetPokemonByNameQuery } from './services/pokemon'
 
 export const Pokemon = ({ name }: { name: string }) => {
-  // Automatically refetch every 3s
+  // Automatically refetch every 3s unless the window is out of focus
   const { data, status, error, refetch } = useGetPokemonByNameQuery(name, {
     pollingInterval: 3000,
+    skipPollingIfUnfocused: true,
   })
 
   return <div>{data}</div>

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 packages/toolkit/.size-limit.cjspackages/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.