feat: move store to provider

- 프로바이더 안에 스토어를 이동시키므로써 프로바디어를 재활용 가

Author: load28

packages/react/src/context.ts

@@ -1,9 +1,6 @@
 import type { ContextQueryStore, TStateImpl } from "@context-query/core";
 import { createContext } from "react";
 
-export const createContextQuery = <TState extends TStateImpl>() => {
-  const StoreContext = createContext<ContextQueryStore<TState> | null>(null);
-  return {
-    StoreContext,
-  };
+export const createStoreContext = <TState extends TStateImpl>() => {
+  return createContext<ContextQueryStore<TState> | null>(null);
 };

packages/react/src/hooks.ts

@@ -1,14 +1,12 @@
 import { TStateImpl } from "@context-query/core";
 import { useCallback, useContext, useEffect, useState } from "react";
-import { createContextQuery } from "./context";
+import { createStoreContext } from "./context";
 
 export function createUseContextQuery<TState extends TStateImpl>(
-  contexts: ReturnType<typeof createContextQuery<TState>>
+  contexts: ReturnType<typeof createStoreContext<TState>>
 ) {
-  const { StoreContext } = contexts;
-
   const useStore = () => {
-    const store = useContext(StoreContext);
+    const store = useContext(contexts);
 
     if (!store) {
       throw new Error(

packages/react/src/index.ts

@@ -1,42 +1,13 @@
-import { ContextQueryStore, TStateImpl } from "@context-query/core";
+import { TStateImpl } from "@context-query/core";
 import { createUseContextQuery } from "./hooks";
 import { createReactContextQuery } from "./provider";
 
-export function createContextQuery<TState extends TStateImpl>(
-  initialState: TState
-) {
-  const store = new ContextQueryStore<TState>(initialState);
-
-  const { Provider, contexts } = createReactContextQuery<TState>(store);
-  const useContextQuery = createUseContextQuery<TState>(contexts);
-
-  const updateState = (state: TState | ((prev: TState) => TState)) => {
-    if (typeof state === "function") {
-      const updateFn = state as (prev: TState) => TState;
-      const currentValue = store.getState();
-      store.updateState(updateFn(currentValue));
-    } else {
-      store.updateState(state);
-    }
-  };
-
-  const setState = <TKey extends keyof TState>(
-    key: TKey,
-    value: TState[TKey] | ((prev: TState[TKey]) => TState[TKey])
-  ) => {
-    if (typeof value === "function") {
-      const updateFn = value as (prev: TState[TKey]) => TState[TKey];
-      const currentValue = store.getStateByKey(key);
-      store.setState(key, updateFn(currentValue));
-    } else {
-      store.setState(key, value);
-    }
-  };
-
+export function createContextQuery<TState extends TStateImpl>() {
+  const { ContextQueryProvider, StoreContext } =
+    createReactContextQuery<TState>();
+  const useContextQuery = createUseContextQuery<TState>(StoreContext);
   return {
-    Provider,
+    ContextQueryProvider,
     useContextQuery,
-    updateState,
-    setState,
   };
 }

packages/react/src/provider.tsx

@@ -1,33 +1,25 @@
 import { ContextQueryStore, TStateImpl } from "@context-query/core";
-import { FC, PropsWithChildren } from "react";
-import { createContextQuery } from "./context";
+import { PropsWithChildren, useMemo } from "react";
+import { createStoreContext } from "./context";
 
-export type ProviderProps<TState extends TStateImpl> = PropsWithChildren;
-
-export const createContextQueryProvider = <TState extends TStateImpl>(
-  contexts: ReturnType<typeof createContextQuery<TState>>,
-  store: ContextQueryStore<TState>
-): FC<ProviderProps<TState>> => {
-  const { StoreContext } = contexts;
+export function createReactContextQuery<TState extends TStateImpl>() {
+  const StoreContext = createStoreContext<TState>();
+  const ContextQueryProvider = function ContextQueryProvider({
+    children,
+    initialState,
+  }: PropsWithChildren<TState>) {
+    const store = useMemo(
+      () => new ContextQueryStore<TState>(initialState),
+      [initialState]
+    );
 
-  return function ContextQueryProvider({ children }: ProviderProps<TState>) {
     return (
       <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
     );
   };
-};
-
-export function createReactContextQuery<TState extends TStateImpl>(
-  store: ContextQueryStore<TState>
-) {
-  const contexts = createContextQuery<TState>();
-  const ContextQueryProvider = createContextQueryProvider<TState>(
-    contexts,
-    store
-  );
 
   return {
-    Provider: ContextQueryProvider,
-    contexts,
+    ContextQueryProvider,
+    StoreContext,
   };
 }