extra /react entrypoint

examples/react/src/app/services/counter.ts

@@ -1,4 +1,4 @@
-import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';
+import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query/react';
 
 interface CountResponse {
   count: number;

examples/react/src/app/services/posts.ts

@@ -1,4 +1,4 @@
-import { createApi, fetchBaseQuery, retry } from '@rtk-incubator/rtk-query';
+import { createApi, fetchBaseQuery, retry } from '@rtk-incubator/rtk-query/react';
 import { RootState } from '../store';
 
 export interface Post {

examples/react/src/app/services/split/index.ts

@@ -1,4 +1,4 @@
-import { createApi, fetchBaseQuery, ApiWithInjectedEndpoints } from '@rtk-incubator/rtk-query';
+import { createApi, fetchBaseQuery, ApiWithInjectedEndpoints } from '@rtk-incubator/rtk-query/react';
 
 export interface Post {
   id: number;

examples/react/src/app/services/times.ts

@@ -1,4 +1,4 @@
-import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';
+import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query/react';
 
 interface TimeResponse {
   time: string;

examples/react/src/app/store.ts

@@ -6,7 +6,7 @@ import { timeApi } from './services/times';
 import polling from '../features/polling/pollingSlice';
 import { splitApi } from './services/split';
 import auth from '../features/auth/authSlice';
-import { setupListeners } from '@rtk-incubator/rtk-query';
+import { setupListeners } from '@rtk-incubator/rtk-query/react';
 
 export const createStore = (options?: ConfigureStoreOptions['preloadedState'] | undefined) =>
   configureStore({

examples/svelte/package.json

@@ -11,7 +11,6 @@
         "@rollup/plugin-commonjs": "^14.0.0",
         "@rollup/plugin-node-resolve": "^8.0.0",
         "@rollup/plugin-typescript": "^6.0.0",
-        "@rtk-incubator/rtk-query": "https://pkg.csb.dev/rtk-incubator/rtk-query/commit/fcea624c/@rtk-incubator/rtk-query",
         "@tsconfig/svelte": "^1.0.0",
         "msw": "^0.21.3",
         "rollup": "^2.3.4",
@@ -26,6 +25,7 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
+        "@rtk-incubator/rtk-query": "https://pkg.csb.dev/rtk-incubator/rtk-query/commit/fcea624c/@rtk-incubator/rtk-query",
         "@reduxjs/toolkit": "^1.5.0",
         "sirv-cli": "^1.0.0"
     }

examples/svelte/src/services/counter.ts

@@ -1,4 +1,4 @@
-import { createBaseApi, fetchBaseQuery, retry } from '@rtk-incubator/rtk-query';
+import { createApi, fetchBaseQuery, retry } from '@rtk-incubator/rtk-query';
 
 interface CountResponse {
     count: number;
@@ -11,7 +11,7 @@ const baseQuery = retry(
 );
 
 // We use createBaseApi here as it is only the core and does not include any React-related code (such as hooks)
-export const counterApi = createBaseApi({
+export const counterApi = createApi({
     reducerPath: 'counterApi',
     baseQuery,
     entityTypes: ['Counter'],

package.json

@@ -8,20 +8,21 @@
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
-  "types": "dist/ts/index.d.ts",
+  "types": "dist/esm/ts/index.d.ts",
   "typesVersions": {
     ">=4.1": {
       "dist": [
-        "dist/ts-4.1/index.d.ts"
+        "dist/esm/ts-4.1/index.d.ts"
       ],
-      "dist/ts/*": [
-        "dist/ts-4.1/*"
+      "dist/esm/ts/*": [
+        "dist/esm/ts-4.1/*"
       ]
     }
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "react"
   ],
   "publishConfig": {
     "access": "public"
@@ -31,7 +32,7 @@
   },
   "scripts": {
     "start": "tsdx watch",
-    "build": "rollup -c && node post-build.js",
+    "build": "rm -r dist; rollup -c && node post-build.js",
     "test": "tsdx test",
     "lint": "tsdx lint",
     "prepare": "yarn build",
@@ -67,15 +68,20 @@
       "limit": "15 KB"
     },
     {
-      "name": "createBaseApi + setupListeners",
-      "path": "dist/esm/index.js",
-      "import": "{ createBaseApi, setupListeners }"
+      "name": "ESM full (React)",
+      "path": "dist/esm/react.js",
+      "limit": "15 KB"
     },
     {
       "name": "createApi + setupListeners",
       "path": "dist/esm/index.js",
       "import": "{ createApi, setupListeners }"
     },
+    {
+      "name": "createApi (React) + setupListeners",
+      "path": "dist/esm/react.js",
+      "import": "{ createApi, setupListeners }"
+    },
     {
       "name": "fetchBaseQuery",
       "path": "dist/esm/index.js",
@@ -88,13 +94,18 @@
     },
     {
       "name": "ApiProvider",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/react.js",
       "import": "{ ApiProvider }"
     },
     {
       "name": "CJS minfied",
       "path": "dist/index.cjs.production.min.js",
       "limit": "25 KB"
+    },
+    {
+      "name": "CJS React minfied",
+      "path": "dist/react.cjs.production.min.js",
+      "limit": "25 KB"
     }
   ],
   "dependencies": {

post-build.js

@@ -1,19 +1,19 @@
 const fs = require('fs');
 const { cp, rm } = require('shelljs');
 
-if (fs.existsSync('dist/ts-4.1')) {
-  rm('-r', 'dist/ts-4.1');
+if (fs.existsSync('dist/esm/ts-4.1')) {
+  rm('-r', 'dist/esm/ts-4.1');
 }
 
-cp('-r', 'dist/ts/', 'dist/ts-4.1');
+cp('-r', 'dist/esm/ts/', 'dist/esm/ts-4.1');
 
 const stubTs41Types = `
 import { EndpointDefinitions } from './endpointDefinitions';
 export declare type TS41Hooks<Definitions extends EndpointDefinitions> = unknown;
 export {};
 `;
 
-fs.writeFileSync('dist/ts/ts41Types.d.ts', stubTs41Types);
+fs.writeFileSync('dist/esm/ts/ts41Types.d.ts', stubTs41Types);
 
 fs.writeFileSync(
   'dist/index.js',
@@ -27,3 +27,16 @@ if (process.env.NODE_ENV === 'production') {
 }
 `
 );
+
+fs.writeFileSync(
+  'dist/react.js',
+  `
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./react.cjs.production.min.js')
+} else {
+  module.exports = require('./react.cjs.development.js')
+}
+`
+);

prepare-examples.sh

@@ -5,8 +5,8 @@ for example in examples/*; do (
     yarn install
     mkdir -p node_modules/@rtk-incubator/rtk-query
     rm -r node_modules/@rtk-incubator/rtk-query/{dist,package.json}
-    ln -sv ../../../../../{dist,package.json} node_modules/@rtk-incubator/rtk-query
+    ln -sv ../../../../../{dist,react,package.json} node_modules/@rtk-incubator/rtk-query
     rm -r node_modules/react node_modules/react-redux
-    ln -sv ../../../../../node_modules/react node_modules/react
-    ln -sv ../../../../../node_modules/react-redux node_modules/react-redux
+    ln -sv ../../../node_modules/react node_modules/react
+    ln -sv ../../../node_modules/react-redux node_modules/react-redux
 ) done

react/package.json

@@ -0,0 +1,17 @@
+{
+  "main": "../dist/react.js",
+  "module": "../dist/esm/react.js",
+  "types": "./rtk-query__react.d.ts",
+  "typesVersions": {
+    ">=4.1": {
+      "rtk-query__react.d.ts": [
+        "../dist/esm/ts-4.1/react.d.ts"
+      ]
+    },
+    "<4.1": {
+      "rtk-query__react.d.ts": [
+        "../dist/esm/ts/react.d.ts"
+      ]
+    }
+  }
+}

rollup.config.js

@@ -5,10 +5,11 @@ import replace from '@rollup/plugin-replace';
 
 /** @type {import("rollup").RollupOptions} */
 const defaultConfig = {
-  input: 'src/index.ts',
+  input: ['src/index.ts', 'src/react.ts'],
   external: [/@babel\/runtime/, /@reduxjs\/toolkit/, /react$/, /react-redux/, /immer/, /tslib/],
   treeshake: {
     propertyReadSideEffects: false,
+    moduleSideEffects: false,
   },
 };
 
@@ -39,7 +40,7 @@ const configs = [
       },
     ],
     plugins: [
-      typescript(defaultTsConfig),
+      typescript({ ...defaultTsConfig, declarationDir: 'dist/esm/ts', declaration: true, declarationMap: true }),
       babel({
         exclude: 'node_modules/**',
         extensions: ['.js', '.ts'],
@@ -59,37 +60,38 @@ const configs = [
     ],
   },
   // CJS:
-  ...withMinify((minified) => ({
-    ...defaultConfig,
-    output: [
-      {
-        dir: 'dist',
-        format: 'cjs',
-        sourcemap: true,
-        entryFileNames: minified ? '[name].cjs.production.min.js' : '[name].cjs.development.js',
-      },
-    ],
-    plugins: [
-      typescript(
-        minified
-          ? defaultTsConfig
-          : { ...defaultTsConfig, declarationDir: 'dist/ts', declaration: true, declarationMap: true }
-      ),
-      replace({
-        values: {
-          'process.env.NODE_ENV': JSON.stringify(minified ? 'production' : 'development'),
-        },
-      }),
-      babel({
-        exclude: 'node_modules/**',
-        extensions: ['.js', '.ts'],
-        babelHelpers: 'runtime',
-        presets: [['@babel/preset-env', { targets: { node: true, browsers: ['defaults'] } }]],
-        plugins: [['@babel/plugin-transform-runtime', { useESModules: false }]],
-      }),
-      ...(minified ? [terser({ ...defaultTerserOptions, toplevel: true })] : []),
-    ],
-  })),
+  ...[].concat(
+    ...defaultConfig.input.map((input) =>
+      withMinify((minified) => ({
+        ...defaultConfig,
+        input,
+        output: [
+          {
+            dir: 'dist',
+            format: 'cjs',
+            sourcemap: true,
+            entryFileNames: minified ? '[name].cjs.production.min.js' : '[name].cjs.development.js',
+          },
+        ],
+        plugins: [
+          typescript(defaultTsConfig),
+          replace({
+            values: {
+              'process.env.NODE_ENV': JSON.stringify(minified ? 'production' : 'development'),
+            },
+          }),
+          babel({
+            exclude: 'node_modules/**',
+            extensions: ['.js', '.ts'],
+            babelHelpers: 'runtime',
+            presets: [['@babel/preset-env', { targets: { node: true, browsers: ['defaults'] } }]],
+            plugins: [['@babel/plugin-transform-runtime', { useESModules: false }]],
+          }),
+          ...(minified ? [terser({ ...defaultTerserOptions, toplevel: true })] : []),
+        ],
+      }))
+    )
+  ),
 ];
 
 function withMinify(build) {

src/fetchBaseQuery.ts

@@ -1,7 +1,7 @@
 import { joinUrls } from './utils';
 import { isPlainObject } from '@reduxjs/toolkit';
-import { BaseQueryFn } from './baseQueryTypes';
-import { MaybePromise, Override } from './tsHelpers';
+import type { BaseQueryFn } from './baseQueryTypes';
+import type { MaybePromise, Override } from './tsHelpers';
 
 export type ResponseHandler = 'json' | 'text' | ((response: Response) => Promise<any>);
 

src/index.ts

@@ -1,4 +1,3 @@
-export { ApiProvider } from './react-hooks/ApiProvider';
 export { QueryStatus } from './core/apiState';
 export type { Api, ApiWithInjectedEndpoints, Module, ApiModules } from './apiTypes';
 export type { BaseQueryEnhancer, BaseQueryFn } from './baseQueryTypes';
@@ -15,5 +14,4 @@ export { setupListeners } from './core/setupListeners';
 export type { CreateApi, CreateApiOptions } from './createApi';
 export { buildCreateApi } from './createApi';
 
-export { createApi as createBaseApi, coreModule } from './core';
-export { createApi, reactHooksModule } from './react-hooks';
+export { createApi, coreModule } from './core';

src/react-hooks/buildHooks.ts

@@ -18,11 +18,12 @@ import {
 } from '../endpointDefinitions';
 import { QueryResultSelectorResult, skipSelector } from '../core/buildSelectors';
 import { QueryActionCreatorResult, MutationActionCreatorResult } from '../core/buildInitiate';
-import { shallowEqual, useShallowStableValue } from '../utils';
+import { shallowEqual } from '../utils';
 import { Api } from '../apiTypes';
 import { Id, NoInfer, Override } from '../tsHelpers';
 import { ApiEndpointMutation, ApiEndpointQuery, CoreModule } from '../core/module';
 import { ReactHooksModuleOptions } from './module';
+import { useShallowStableValue } from './useShallowStableValue';
 
 export interface QueryHooks<Definition extends QueryDefinition<any, any, any, any, any>> {
   useQuery: UseQuery<Definition>;

src/react-hooks/module.ts

@@ -42,11 +42,14 @@ declare module '../apiTypes' {
   }
 }
 
+/** @ts-ignore */
+type RR = typeof import('react-redux');
+
 export interface ReactHooksModuleOptions {
-  batch?: typeof import('react-redux').batch;
-  useDispatch?: typeof import('react-redux').useDispatch;
-  useSelector?: typeof import('react-redux').useSelector;
-  useStore?: typeof import('react-redux').useStore;
+  batch?: RR['batch'];
+  useDispatch?: RR['useDispatch'];
+  useSelector?: RR['useSelector'];
+  useStore?: RR['useStore'];
 }
 
 export const reactHooksModule = ({

src/utils/useShallowStableValue.ts → src/react-hooks/useShallowStableValue.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { shallowEqual } from './shallowEqual';
+import { shallowEqual } from '../utils';
 
 export function useShallowStableValue<T>(value: T) {
   const cache = useRef(value);

src/react.ts

@@ -0,0 +1,3 @@
+export * from './.';
+export { ApiProvider } from './react-hooks/ApiProvider';
+export { createApi, reactHooksModule } from './react-hooks';

src/utils/index.ts

@@ -3,7 +3,6 @@ export * from './isValidUrl';
 export * from './joinUrls';
 export * from './flatten';
 export * from './shallowEqual';
-export * from './useShallowStableValue';
 export * from './capitalize';
 export * from './isOnline';
 export * from './isDocumentVisible';

test/apiProvider.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createApi, ApiProvider } from '@rtk-incubator/rtk-query';
+import { createApi, ApiProvider } from '@rtk-incubator/rtk-query/react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { waitMs } from './helpers';
 

test/buildHooks.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createApi, fetchBaseQuery, QueryStatus } from '@rtk-incubator/rtk-query';
+import { createApi, fetchBaseQuery, QueryStatus } from '@rtk-incubator/rtk-query/react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { setupApiStore, waitMs } from './helpers';