Fix: TypeScript Type Portability Issues

.github/workflows/tests.yml

@@ -99,6 +99,60 @@ jobs:
           TEST_DIST: true
         run: yarn test
 
+      - name: Run type tests with `moduleResolution Bundler`
+        run: rm -rf dist && yarn tsc -p . --moduleResolution Bundler --module ESNext --noEmit false --declaration --emitDeclarationOnly --outDir dist --target ESNext && rm -rf dist
+
+  test-type-portability:
+    name: Test Type Portability with TypeScript ${{ matrix.ts }} and Node.js ${{ matrix.node }}
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['20.x']
+        ts: ['5.0', '5.1', '5.2', '5.3', '5.4', '5.5', 'next']
+        example:
+          [
+            { name: 'bundler', moduleResolution: 'Bundler' },
+            { name: 'nodenext-cjs', moduleResolution: 'NodeNext' },
+            { name: 'nodenext-esm', moduleResolution: 'NodeNext' },
+          ]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Install deps
+        run: yarn install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: packages/toolkit
+
+      - name: Install build artifact
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} add $(pwd)/package.tgz
+
+      - name: Install TypeScript ${{ matrix.ts }}
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} add -D typescript@${{ matrix.ts }}
+
+      - name: Test type portability with `moduleResolution ${{ matrix.example.moduleResolution }}`
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} run test
+
+      - name: Test type portability with `moduleResolution Node10`
+        run: yarn workspace @examples-type-portability/${{ matrix.example.name }} run test --module CommonJS --moduleResolution Node10 --preserveSymLinks --verbatimModuleSyntax false
+
+      - name: Test type portability with `moduleResolution Node10` and `type module` in `package.json`
+        if: matrix.example.name == 'nodenext-esm' || matrix.example.name == 'bundler'
+        run: |
+          npm --workspace=@examples-type-portability/${{ matrix.example.name }} pkg set type=module
+          yarn workspace @examples-type-portability/${{ matrix.example.name }} run test --module ESNext --moduleResolution Node10 --preserveSymLinks --verbatimModuleSyntax false
+
   test-types:
     name: Test Types with TypeScript ${{ matrix.ts }}
 

.yarn/patches/console-testing-library-npm-0.6.1-4d9957d402.patch

@@ -1,11 +1,38 @@
+diff --git a/package.json b/package.json
+index b924e066ecfdb30917b9c1056b360834da357698..15e155bd84f9d16537ffe36f9a87debcb0ec3591 100644
+--- a/package.json
++++ b/package.json
+@@ -8,12 +8,15 @@
+   "type": "module",
+   "main": "dist/index.js",
+   "typings": "index.d.ts",
++  "types": "index.d.ts",
+   "exports": {
+     ".": {
++      "types": "./index.d.ts",
+       "require": "./dist/index.js",
+       "default": "./src/index.js"
+     },
+     "./pure": {
++      "types": "./pure.d.ts",
+       "require": "./dist/pure.js",
+       "default": "./src/pure.js"
+     }
+diff --git a/pure.d.ts b/pure.d.ts
+index b13bb4eb87d0b316bb51bd6094b2353c6fc8527d..ee01cc9bd3233f5e67b050d48e22202b495a4a0a 100644
+--- a/pure.d.ts
++++ b/pure.d.ts
+@@ -1 +1 @@
+-export * from './';
++export * from './index.js';
 diff --git a/src/index.js b/src/index.js
 index 90ff7fa3d7d4fa62dbbf638958ae4e28abd089a8..28434687b5163b7472e86bdb11bed69e0868e660 100644
 --- a/src/index.js
 +++ b/src/index.js
 @@ -1,4 +1,4 @@
 -import { mockConsole, createConsole } from './pure';
 +import { mockConsole, createConsole } from './pure.js';
- 
+
  // Keep an instance of the original console and export it
  const originalConsole = global.console;
 diff --git a/src/pure.js b/src/pure.js
@@ -15,7 +42,7 @@ index b00ea2abbaea833e336676aa46e7ced2d59d6d88..42b83ed83fa16cf2234571500fe09868
 @@ -228,10 +228,11 @@ export function restore() {
    global.console = global.originalConsole;
  }
- 
+
 +/*
  if (typeof expect === 'function' && typeof expect.extend === 'function') {
    expect.extend({
@@ -24,13 +51,13 @@ index b00ea2abbaea833e336676aa46e7ced2d59d6d88..42b83ed83fa16cf2234571500fe09868
 +      // Workaround for custom inline snapshot matchers
        const error = new Error();
        const stacks = error.stack.split('\n');
- 
+
 @@ -245,7 +246,6 @@ if (typeof expect === 'function' && typeof expect.extend === 'function') {
        error.stack = stacks.join('\n');
- 
+
        const context = Object.assign(this, { error });
 -      /* -------------------------------------------------------------- */
- 
+
        const testingConsoleInstance =
          (received && received.testingConsole) || received;
 @@ -270,3 +270,4 @@ if (typeof expect === 'function' && typeof expect.extend === 'function') {

examples/type-portability/bundler/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@examples-type-portability/bundler",
+  "private": true,
+  "version": "1.0.0",
+  "description": "testing type portability for moduleResolution Bundler",
+  "keywords": [],
+  "main": "src/index.tsx",
+  "dependencies": {
+    "@reduxjs/toolkit": "workspace:^",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.25.1",
+    "react-scripts": "5.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off"
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "yarn clean && tsc -p tsconfig.json"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

examples/type-portability/bundler/src/App.tsx

@@ -0,0 +1,36 @@
+import { Link, Route, Routes } from 'react-router-dom'
+import { Lazy } from './features/bundleSplitting'
+import { CounterList } from './features/counter/CounterList'
+import { PollingToggles } from './features/polling/PollingToggles'
+import { PostsManager } from './features/posts/PostsManager'
+import { TimeList } from './features/time/TimeList'
+
+export function App() {
+  return (
+    <div className="App">
+      <div className="row">
+        <div className="column column1">
+          <span>
+            <Link to="/">Times</Link> | <Link to="/posts">Posts</Link> |{' '}
+            <Link to="/counters">Counter</Link> |{' '}
+            <Link to="/bundleSplitting">Bundle Splitting</Link>
+          </span>
+        </div>
+        <div className="column column1">
+          <PollingToggles />
+        </div>
+      </div>
+      <div />
+      <div>
+        <Routes>
+          <Route path="/" element={<TimeList />} />
+          <Route path="/counters" element={<CounterList />} />
+          <Route path="/posts/*" element={<PostsManager />} />
+          <Route path="/bundleSplitting" element={<Lazy />} />
+        </Routes>
+      </div>
+    </div>
+  )
+}
+
+export default App

examples/type-portability/bundler/src/app/customModule.ts

@@ -0,0 +1,51 @@
+import type {
+  Api,
+  BaseQueryFn,
+  CoreModule,
+  EndpointDefinitions,
+  Module,
+} from '@reduxjs/toolkit/query'
+import { buildCreateApi, coreModule } from '@reduxjs/toolkit/query'
+
+export const customModuleName = Symbol('customModule')
+export type CustomModule = typeof customModuleName
+
+// If we remove this, We should get a TypeScript error.
+declare module '@reduxjs/toolkit/query' {
+  export interface ApiModules<
+    BaseQuery extends BaseQueryFn,
+    Definitions extends EndpointDefinitions,
+    ReducerPath extends string,
+    TagTypes extends string,
+  > {
+    [customModuleName]: {
+      endpoints: {
+        [K in keyof Definitions]: {
+          myEndpointProperty: string
+        }
+      }
+    }
+  }
+}
+
+export const myModule = (): Module<CustomModule> => ({
+  name: customModuleName,
+  init(api, options, context) {
+    // initialize stuff here if you need to
+
+    return {
+      injectEndpoint(endpoint, definition) {
+        const anyApi = api as any as Api<
+          any,
+          Record<string, any>,
+          string,
+          string,
+          CustomModule | CoreModule
+        >
+        anyApi.endpoints[endpoint].myEndpointProperty = 'test'
+      },
+    }
+  },
+})
+
+export const myCreateApi = buildCreateApi(coreModule(), myModule())

examples/type-portability/bundler/src/app/dynamicMiddleware.ts

@@ -0,0 +1,10 @@
+import { createDynamicMiddleware } from '@reduxjs/toolkit'
+
+export const dynamicMiddleware = createDynamicMiddleware()
+
+export const { addMiddleware, instanceId, middleware, withMiddleware } =
+  dynamicMiddleware
+
+export const { withTypes, match, type } = withMiddleware
+
+export const { withTypes: _withTypes } = addMiddleware

examples/type-portability/bundler/src/app/dynamicReactMiddleware.ts

@@ -0,0 +1,19 @@
+import { createDynamicMiddleware } from '@reduxjs/toolkit/react'
+import { listenerMiddleware } from './listenerMiddleware'
+
+export const dynamicReactMiddleware = createDynamicMiddleware()
+
+export const {
+  addMiddleware,
+  createDispatchWithMiddlewareHook,
+  createDispatchWithMiddlewareHookFactory,
+  instanceId,
+  middleware,
+  withMiddleware,
+} = dynamicReactMiddleware
+
+export const { withTypes } = addMiddleware
+
+export const useDispatchWithMiddleware = createDispatchWithMiddlewareHook(
+  listenerMiddleware.middleware,
+)

examples/type-portability/bundler/src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { useDispatch, useSelector, useStore } from 'react-redux'
+import type { AppDispatch, AppStore, RootState } from './store'
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppStore = useStore.withTypes<AppStore>()

examples/type-portability/bundler/src/app/listenerMiddleware.ts

@@ -0,0 +1,10 @@
+import { createListenerMiddleware } from '@reduxjs/toolkit'
+
+export const listenerMiddleware = createListenerMiddleware()
+
+export const { clearListeners, middleware, startListening, stopListening } =
+  listenerMiddleware
+
+export const { withTypes } = startListening
+
+export const { withTypes: _withTypes } = stopListening