@octanejs/redux-toolkit 0.1.0

package/src/query/react/constants.ts

@@ -0,0 +1,2 @@
+export const UNINITIALIZED_VALUE = Symbol();
+export type UninitializedValue = typeof UNINITIALIZED_VALUE;

package/src/query/react/index.ts

@@ -0,0 +1,38 @@
+import { buildCreateApi, coreModule } from '@reduxjs/toolkit/query';
+import { reactHooksModule, reactHooksModuleName } from './module';
+
+export * from '@reduxjs/toolkit/query';
+export { ApiProvider } from './ApiProvider.tsrx';
+
+const createApi = /* @__PURE__ */ buildCreateApi(coreModule(), reactHooksModule());
+
+export type {
+	TypedUseMutationResult,
+	TypedUseQueryHookResult,
+	TypedUseQueryStateResult,
+	TypedUseQuerySubscriptionResult,
+	TypedLazyQueryTrigger,
+	TypedUseLazyQuery,
+	TypedUseMutation,
+	TypedMutationTrigger,
+	TypedQueryStateSelector,
+	TypedUseQueryState,
+	TypedUseQuery,
+	TypedUseQuerySubscription,
+	TypedUseLazyQuerySubscription,
+	TypedUseQueryStateOptions,
+	TypedUseLazyQueryStateResult,
+	TypedUseInfiniteQuery,
+	TypedUseInfiniteQueryHookResult,
+	TypedUseInfiniteQueryStateResult,
+	TypedUseInfiniteQuerySubscriptionResult,
+	TypedUseInfiniteQueryStateOptions,
+	TypedInfiniteQueryStateSelector,
+	TypedUseInfiniteQuerySubscription,
+	TypedUseInfiniteQueryState,
+	TypedLazyInfiniteQueryTrigger,
+	TypedUseQuerySubscriptionOptions,
+	TypedUseMutationStateOptions,
+} from './buildHooks';
+export { UNINITIALIZED_VALUE } from './constants';
+export { createApi, reactHooksModule, reactHooksModuleName };

package/src/query/react/module.ts

@@ -0,0 +1,247 @@
+import type {
+	Api,
+	BaseQueryFn,
+	EndpointDefinitions,
+	InfiniteQueryDefinition,
+	Module,
+	MutationDefinition,
+	PrefetchOptions,
+	QueryArgFrom,
+	QueryDefinition,
+	QueryKeys,
+} from '@reduxjs/toolkit/query';
+import {
+	batch as rrBatch,
+	useDispatch as rrUseDispatch,
+	useSelector as rrUseSelector,
+	useStore as rrUseStore,
+} from '@octanejs/redux';
+import type { CreateSelectorFunction } from 'reselect';
+import { createSelector as _createSelector } from 'reselect';
+import type { Dispatch, Store, UnknownAction } from 'redux';
+import type { InfiniteQueryHooks, MutationHooks, QueryHooks } from './buildHooks';
+import { buildHooks } from './buildHooks';
+import type { HooksWithUniqueNames } from './namedHooks';
+
+const isQueryDefinition = (definition: { type?: string }) => definition.type === 'query';
+const isMutationDefinition = (definition: { type?: string }) => definition.type === 'mutation';
+const isInfiniteQueryDefinition = (definition: { type?: string }) =>
+	definition.type === 'infinitequery';
+const safeAssign = Object.assign;
+const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1);
+const countObjectKeys = (value: object) => Object.keys(value).length;
+
+export const reactHooksModuleName = /* @__PURE__ */ Symbol();
+export type ReactHooksModule = typeof reactHooksModuleName;
+
+declare module '@reduxjs/toolkit/query' {
+	export interface ApiModules<
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		BaseQuery extends BaseQueryFn,
+		Definitions extends EndpointDefinitions,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		ReducerPath extends string,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		TagTypes extends string,
+	> {
+		[reactHooksModuleName]: {
+			/**
+			 *  Endpoints based on the input endpoints provided to `createApi`, containing `select`, `hooks` and `action matchers`.
+			 */
+			endpoints: {
+				[K in keyof Definitions]: Definitions[K] extends QueryDefinition<any, any, any, any, any>
+					? QueryHooks<Definitions[K]>
+					: Definitions[K] extends MutationDefinition<any, any, any, any, any>
+						? MutationHooks<Definitions[K]>
+						: Definitions[K] extends InfiniteQueryDefinition<any, any, any, any, any>
+							? InfiniteQueryHooks<Definitions[K]>
+							: never;
+			};
+			/**
+			 * A hook that accepts a string endpoint name, and provides a callback that when called, pre-fetches the data for that endpoint.
+			 */
+			usePrefetch<EndpointName extends QueryKeys<Definitions>>(
+				endpointName: EndpointName,
+				options?: PrefetchOptions,
+			): (arg: QueryArgFrom<Definitions[EndpointName]>, options?: PrefetchOptions) => void;
+		} & HooksWithUniqueNames<Definitions>;
+	}
+}
+
+type UseDispatch = () => Dispatch<UnknownAction>;
+type UseSelector = <TState = unknown, Selected = unknown>(
+	selector: (state: TState) => Selected,
+	equalityFnOrOptions?: ((left: Selected, right: Selected) => boolean) | object,
+) => Selected;
+type UseStore = () => Store<any>;
+
+export interface ReactHooksModuleOptions {
+	/**
+	 * The hooks from `@octanejs/redux` to be used
+	 */
+	hooks?: {
+		/**
+		 * The version of the `useDispatch` hook to be used
+		 */
+		useDispatch: UseDispatch;
+		/**
+		 * The version of the `useSelector` hook to be used
+		 */
+		useSelector: UseSelector;
+		/**
+		 * The version of the `useStore` hook to be used
+		 */
+		useStore: UseStore;
+	};
+	/**
+	 * The version of the `batchedUpdates` function to be used
+	 */
+	batch?: (callback: () => void) => void;
+	/**
+	 * Enables performing asynchronous tasks immediately within a render.
+	 *
+	 * @example
+	 *
+	 * ```ts
+	 * import {
+	 *   buildCreateApi,
+	 *   coreModule,
+	 *   reactHooksModule
+	 * } from '@octanejs/redux-toolkit/query/react'
+	 *
+	 * const createApi = buildCreateApi(
+	 *   coreModule(),
+	 *   reactHooksModule({ unstable__sideEffectsInRender: true })
+	 * )
+	 * ```
+	 */
+	unstable__sideEffectsInRender?: boolean;
+	/**
+	 * A selector creator (usually from `reselect`, or matching the same signature)
+	 */
+	createSelector?: CreateSelectorFunction<any, any, any>;
+}
+
+/**
+ * Creates a module that generates Octane hooks from endpoints, for use with `buildCreateApi`.
+ *
+ *  @example
+ * ```ts
+ * const MyContext = createContext<ReactReduxContextValue | null>(null);
+ * const customCreateApi = buildCreateApi(
+ *   coreModule(),
+ *   reactHooksModule({
+ *     hooks: {
+ *       useDispatch: createDispatchHook(MyContext),
+ *       useSelector: createSelectorHook(MyContext),
+ *       useStore: createStoreHook(MyContext)
+ *     }
+ *   })
+ * );
+ * ```
+ *
+ * @returns A module for use with `buildCreateApi`
+ */
+export const reactHooksModule = ({
+	batch = rrBatch,
+	hooks = {
+		useDispatch: rrUseDispatch as UseDispatch,
+		useSelector: rrUseSelector as UseSelector,
+		useStore: rrUseStore as UseStore,
+	},
+	createSelector = _createSelector,
+	unstable__sideEffectsInRender = false,
+	...rest
+}: ReactHooksModuleOptions = {}): Module<ReactHooksModule> => {
+	if (process.env.NODE_ENV !== 'production') {
+		const hookNames = ['useDispatch', 'useSelector', 'useStore'] as const;
+		let warned = false;
+		for (const hookName of hookNames) {
+			// warn for old hook options
+			if (countObjectKeys(rest) > 0) {
+				if ((rest as Partial<typeof hooks>)[hookName]) {
+					if (!warned) {
+						console.warn(
+							'As of RTK 2.0, the hooks now need to be specified as one object, provided under a `hooks` key:' +
+								'\n`reactHooksModule({ hooks: { useDispatch, useSelector, useStore } })`',
+						);
+						warned = true;
+					}
+				}
+				// migrate
+				// @ts-ignore
+				hooks[hookName] = rest[hookName];
+			}
+			// then make sure we have them all
+			if (typeof hooks[hookName] !== 'function') {
+				throw new Error(
+					`When using custom hooks for context, all ${
+						hookNames.length
+					} hooks need to be provided: ${hookNames.join(
+						', ',
+					)}.\nHook ${hookName} was either not provided or not a function.`,
+				);
+			}
+		}
+	}
+
+	return {
+		name: reactHooksModuleName,
+		init(api, { serializeQueryArgs }, context) {
+			const anyApi = api as any as Api<any, Record<string, any>, any, any, ReactHooksModule>;
+			const { buildQueryHooks, buildInfiniteQueryHooks, buildMutationHook, usePrefetch } =
+				buildHooks({
+					api,
+					moduleOptions: {
+						batch,
+						hooks,
+						unstable__sideEffectsInRender,
+						createSelector,
+					},
+					serializeQueryArgs,
+					context,
+				});
+			safeAssign(anyApi, { usePrefetch });
+			safeAssign(context, { batch });
+
+			return {
+				injectEndpoint(endpointName, definition) {
+					if (isQueryDefinition(definition)) {
+						const {
+							useQuery,
+							useLazyQuery,
+							useLazyQuerySubscription,
+							useQueryState,
+							useQuerySubscription,
+						} = buildQueryHooks(endpointName);
+						safeAssign(anyApi.endpoints[endpointName], {
+							useQuery,
+							useLazyQuery,
+							useLazyQuerySubscription,
+							useQueryState,
+							useQuerySubscription,
+						});
+						(api as any)[`use${capitalize(endpointName)}Query`] = useQuery;
+						(api as any)[`useLazy${capitalize(endpointName)}Query`] = useLazyQuery;
+					}
+					if (isMutationDefinition(definition)) {
+						const useMutation = buildMutationHook(endpointName);
+						safeAssign(anyApi.endpoints[endpointName], {
+							useMutation,
+						});
+						(api as any)[`use${capitalize(endpointName)}Mutation`] = useMutation;
+					} else if (isInfiniteQueryDefinition(definition)) {
+						const { useInfiniteQuery, useInfiniteQuerySubscription, useInfiniteQueryState } =
+							buildInfiniteQueryHooks(endpointName);
+						safeAssign(anyApi.endpoints[endpointName], {
+							useInfiniteQuery,
+							useInfiniteQuerySubscription,
+							useInfiniteQueryState,
+						});
+						(api as any)[`use${capitalize(endpointName)}InfiniteQuery`] = useInfiniteQuery;
+					}
+				},
+			};
+		},
+	};
+};

package/src/query/react/namedHooks.ts

@@ -0,0 +1,48 @@
+import type {
+	DefinitionType,
+	EndpointDefinitions,
+	MutationDefinition,
+	QueryDefinition,
+	InfiniteQueryDefinition,
+} from '@reduxjs/toolkit/query';
+import type { UseInfiniteQuery, UseLazyQuery, UseMutation, UseQuery } from './buildHooks';
+
+type QueryHookNames<Definitions extends EndpointDefinitions> = {
+	[K in keyof Definitions as Definitions[K] extends {
+		type: DefinitionType.query;
+	}
+		? `use${Capitalize<K & string>}Query`
+		: never]: UseQuery<Extract<Definitions[K], QueryDefinition<any, any, any, any>>>;
+};
+
+type LazyQueryHookNames<Definitions extends EndpointDefinitions> = {
+	[K in keyof Definitions as Definitions[K] extends {
+		type: DefinitionType.query;
+	}
+		? `useLazy${Capitalize<K & string>}Query`
+		: never]: UseLazyQuery<Extract<Definitions[K], QueryDefinition<any, any, any, any>>>;
+};
+
+type InfiniteQueryHookNames<Definitions extends EndpointDefinitions> = {
+	[K in keyof Definitions as Definitions[K] extends {
+		type: DefinitionType.infinitequery;
+	}
+		? `use${Capitalize<K & string>}InfiniteQuery`
+		: never]: UseInfiniteQuery<
+		Extract<Definitions[K], InfiniteQueryDefinition<any, any, any, any, any>>
+	>;
+};
+
+type MutationHookNames<Definitions extends EndpointDefinitions> = {
+	[K in keyof Definitions as Definitions[K] extends {
+		type: DefinitionType.mutation;
+	}
+		? `use${Capitalize<K & string>}Mutation`
+		: never]: UseMutation<Extract<Definitions[K], MutationDefinition<any, any, any, any>>>;
+};
+
+export type HooksWithUniqueNames<Definitions extends EndpointDefinitions> =
+	QueryHookNames<Definitions> &
+		LazyQueryHookNames<Definitions> &
+		InfiniteQueryHookNames<Definitions> &
+		MutationHookNames<Definitions>;

package/src/query/react/useSerializedStableValue.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef, useMemo } from 'octane';
+import { copyWithStructuralSharing } from '@reduxjs/toolkit/query';
+
+export function useStableQueryArgs<T>(queryArgs: T) {
+	const cache = useRef(queryArgs);
+	const copy = useMemo(() => copyWithStructuralSharing(cache.current, queryArgs), [queryArgs]);
+	useEffect(() => {
+		if (cache.current !== copy) {
+			cache.current = copy;
+		}
+	}, [copy]);
+
+	return copy;
+}

package/src/query/react/useShallowStableValue.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'octane';
+import { shallowEqual } from '@octanejs/redux';
+
+export function useShallowStableValue<T>(value: T) {
+	const cache = useRef(value);
+	useEffect(() => {
+		if (!shallowEqual(cache.current, value)) {
+			cache.current = value;
+		}
+	}, [value]);
+
+	return shallowEqual(cache.current, value) ? cache.current : value;
+}

package/src/react/index.ts

@@ -0,0 +1,5 @@
+// Compatibility counterpart of `@reduxjs/toolkit/react`: the root Toolkit
+// surface plus the dynamic-middleware helper bound to @octanejs/redux.
+export * from '@reduxjs/toolkit';
+export { createDynamicMiddleware } from '../dynamicMiddleware/react';
+export type { CreateDispatchWithMiddlewareHook } from '../dynamicMiddleware/react';