feat: add setter hook

Author: load28

.github/workflows/publish.yml

@@ -37,8 +37,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '18'
-          registry-url: 'https://npm.pkg.github.com'
-          scope: '@context-query'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -75,27 +73,18 @@ jobs:
           echo "Updated version to ${{ github.event.inputs.version }}"
       
       - name: Build package
-        run: |
-          cd packages/${{ github.event.inputs.package }}
-          pnpm run build
+        run: pnpm build --filter=@context-query/${{ github.event.inputs.package }}
 
-      - name: Configure npm authentication
-        run: |
-          echo "@context-query:registry=https://npm.pkg.github.com" >> ~/.npmrc
-          echo "//npm.pkg.github.com/:_authToken=${{ secrets.PACKAGE_KEY }}" >> ~/.npmrc
-      
-      - name: Publish to GitHub Packages
+      - name: Publish to npm Registry
         run: |
           cd packages/${{ github.event.inputs.package }}
           if [[ "${{ github.event.inputs.prerelease }}" == "true" ]]; then
-            npm publish --tag prerelease
+            npm publish --tag prerelease --registry=https://registry.npmjs.org --//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
             echo "Published as prerelease with tag 'prerelease'"
           else
-            npm publish
+            npm publish --registry=https://registry.npmjs.org --//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
             echo "Published as latest"
           fi
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.PACKAGE_KEY }}
       
       - name: Commit version change
         if: github.event.inputs.prerelease == 'false'
@@ -125,7 +114,7 @@ jobs:
           body: |
             ## @context-query/${{ github.event.inputs.package }} v${{ github.event.inputs.version }}
             
-            Published to GitHub Packages.
+            Published to npm registry.
             
             ### Installation
             ```bash

packages/playground/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@context-query/react": "0.2.1",
+    "@context-query/react": "0.3.1-beta.1",
     "@radix-ui/react-slot": "^1.1.2",
     "@tailwindcss/vite": "^4.0.13",
     "class-variance-authority": "^0.7.1",

packages/playground/src/ContextQueryImplementation.tsx

@@ -2,14 +2,14 @@ import { useEffect } from "react";
 import { Button } from "./components/ui/button";
 import {
   CounterQueryProvider,
-  setCounterState,
-  updateCounterState,
   useCounterQuery,
+  useCounterSetter,
 } from "./CounterContextQueryProvider";
 import { cqLogger } from "./LoggerInstance";
 
 function CQCounter3() {
-  const [{ count3 }, setState] = useCounterQuery(["count3"]);
+  const [{ count3 }] = useCounterQuery(["count3"]);
+  const setState = useCounterSetter();
 
   useEffect(() => {
     cqLogger.log(`Counter3 컴포넌트 렌더링 - ${count3}`);
@@ -24,7 +24,7 @@ function CQCounter3() {
   };
 
   const reset = () => {
-    setState({ count3: 0 });
+    setState((prev) => ({ ...prev, count3: 0 }));
   };
 
   return (
@@ -51,22 +51,27 @@ function CQCounter3() {
 }
 
 function CQCounter2() {
-  const [{ count2 }, setState] = useCounterQuery(["count2"]);
+  const [{ count2 }] = useCounterQuery(["count2"]);
+  const setState = useCounterSetter();
 
   useEffect(() => {
     cqLogger.log(`Counter2 컴포넌트 렌더링 - ${count2}`);
   });
 
   const increment = () => {
-    setState((prev) => ({ ...prev, count2: prev.count2 + 1 }));
+    setState((prev) => ({ 
+      ...prev, 
+      count2: prev.count2 + 1,
+      count3: prev.count3 + 1
+    }));
   };
 
   const decrement = () => {
     setState((prev) => ({ ...prev, count2: prev.count2 - 1 }));
   };
 
   const reset = () => {
-    setState({ count2: 0 });
+    setState((prev) => ({ ...prev, count2: 0 }));
   };
 
   return (
@@ -95,22 +100,39 @@ function CQCounter2() {
 }
 
 const CQCounter1 = () => {
-  const [state, setState] = useCounterQuery(["count1", "count2"]);
+  // count1만 구독하여 리렌더링 대상으로 설정
+  const [{ count1 }] = useCounterQuery(["count1"]);
+  
+  // 전체 상태 업데이트용 setter
+  const setState = useCounterSetter();
 
   useEffect(() => {
-    cqLogger.log(`Counter1 컴포넌트 렌더링 - ${state.count1} ${state.count2}`);
+    cqLogger.log(`Counter1 컴포넌트 렌더링 - ${count1}`);
   });
 
   const increment = () => {
-    setState((prev) => ({ count1: prev.count1 + 1, count2: prev.count2 + 1 }));
+    // 전체 상태를 한번에 업데이트
+    setState((prev) => ({
+      count1: prev.count1 + 1,
+      count2: prev.count2 + 1,
+      count3: prev.count3 + 1
+    }));
   };
 
   const decrement = () => {
-    setState((prev) => ({ count1: prev.count1 - 1, count2: prev.count2 - 1 }));
+    setState((prev) => ({
+      count1: prev.count1 - 1,
+      count2: prev.count2 - 1,
+      count3: prev.count3 - 1
+    }));
   };
 
   const reset = () => {
-    setState({ count1: 0, count2: 0 });
+    setState({
+      count1: 0,
+      count2: 0,
+      count3: 0
+    });
   };
 
   return (
@@ -120,7 +142,7 @@ const CQCounter1 = () => {
           <h2 className="text-lg font-semibold">카운터 1</h2>
           <div className="flex items-center justify-between gap-4">
             <span className="text-2xl font-bold text-blue-600">
-              {state.count1},{state.count2}
+              {count1}
             </span>
             <div className="flex gap-2">
               <Button size="sm" variant="outline" onClick={decrement}>
@@ -141,35 +163,9 @@ const CQCounter1 = () => {
 };
 
 export function ContextQueryImplementation() {
-  const incrementCount1 = () => {
-    setCounterState("count1", (prev) => prev + 1);
-  };
-
-  const incrementCount2 = () => {
-    setCounterState("count2", (prev) => prev + 1);
-  };
-
-  const incrementCount3 = () => {
-    setCounterState("count3", (prev) => prev + 1);
-  };
-
-  const incrementAllCounts = () => {
-    updateCounterState((state) => ({
-      count1: state.count1 + 1,
-      count2: state.count2 + 1,
-      count3: state.count3 + 1,
-    }));
-  };
-
   return (
     <div>
-      <div className="flex justify-center space-x-4 mt-4 mb-4">
-        <Button onClick={incrementCount1}>count1 증가</Button>
-        <Button onClick={incrementCount2}>count2 증가</Button>
-        <Button onClick={incrementCount3}>count3 증가</Button>
-        <Button onClick={incrementAllCounts}>전체 증가</Button>
-      </div>
-      <CounterQueryProvider>
+      <CounterQueryProvider initialState={{ count1: 0, count2: 0, count3: 0 }}>
         <div className="rounded-lg bg-card text-card-foreground shadow-sm p-4">
           <h2 className="text-xl font-bold mb-2">Context Query 버전</h2>
           <p className="text-muted-foreground mb-4">
@@ -180,91 +176,9 @@ export function ContextQueryImplementation() {
             <CQCounter1 />
             <CQCounter2 />
             <CQCounter3 />
-            <AllStateSub />
           </div>
-
-          <BatchCounterControls />
         </div>
       </CounterQueryProvider>
     </div>
   );
 }
-
-// 새로운 컴포넌트 추가: 일괄 처리 컨트롤
-function BatchCounterControls() {
-  useEffect(() => {
-    cqLogger.log("BatchCounterControls 컴포넌트 렌더링");
-  });
-
-  const incrementAll = () => {
-    updateCounterState((state) => ({
-      count1: state.count1 + 1,
-      count2: state.count2 + 1,
-      count3: state.count3 + 1,
-    }));
-  };
-
-  const decrementAll = () => {
-    updateCounterState((state) => ({
-      count1: state.count1 - 1,
-      count2: state.count2 - 1,
-      count3: state.count3 - 1,
-    }));
-  };
-
-  const resetAll = () => {
-    updateCounterState(() => ({
-      count1: 0,
-      count2: 0,
-      count3: 0,
-    }));
-  };
-
-  const multiplyAll = () => {
-    updateCounterState((state) => ({
-      count1: state.count1 * 2,
-      count2: state.count2 * 2,
-      count3: state.count3 * 2,
-    }));
-  };
-
-  return (
-    <div className="rounded-lg bg-card text-card-foreground shadow-sm mt-6 p-4 border-2 border-dashed border-purple-300">
-      <h2 className="text-lg font-semibold mb-3">일괄 처리 컨트롤</h2>
-      <p className="text-sm text-muted-foreground mb-4">
-        모든 카운터를 한 번에 업데이트합니다
-      </p>
-      <div className="flex gap-2 flex-wrap">
-        <Button onClick={incrementAll} variant="default">
-          모두 증가
-        </Button>
-        <Button onClick={decrementAll} variant="outline">
-          모두 감소
-        </Button>
-        <Button onClick={resetAll} variant="secondary">
-          모두 초기화
-        </Button>
-        <Button onClick={multiplyAll} variant="destructive">
-          모두 2배
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function AllStateSub() {
-  const [state] = useCounterQuery();
-
-  useEffect(() => {
-    cqLogger.log("AllStateSub 컴포넌트 렌더링");
-  });
-
-  return (
-    <div>
-      <h2>AllStateSub</h2>
-      <p>{state.count1}</p>
-      <p>{state.count2}</p>
-      <p>{state.count3}</p>
-    </div>
-  );
-}

packages/playground/src/CounterContextQueryProvider.tsx

@@ -1,8 +1,7 @@
 import { createContextQuery } from "@context-query/react";
 
 export const {
-  Provider: CounterQueryProvider,
+  ContextQueryProvider: CounterQueryProvider,
   useContextQuery: useCounterQuery,
-  updateState: updateCounterState,
-  setState: setCounterState,
-} = createContextQuery({ count1: 0, count2: 0, count3: 0 });
+  useContextSetter: useCounterSetter,
+} = createContextQuery();

packages/playground/src/ReactContextImplementation.tsx

@@ -4,6 +4,7 @@ import { rcLogger } from "./LoggerInstance";
 import {
   ReactCounterProvider,
   useReactCounterState,
+  useReactCounterFullState,
 } from "./ReactContextProvider";
 
 function RCCounter3() {
@@ -50,13 +51,18 @@ function RCCounter3() {
 
 function RCCounter2() {
   const [state, setState] = useReactCounterState("count2");
+  const [, , setFullState] = useReactCounterFullState();
 
   useEffect(() => {
     rcLogger.log(`Counter2 컴포넌트 렌더링 - ${state}`);
   });
 
   const increment = () => {
-    setState(state + 1);
+    setFullState((prev) => ({
+      ...prev,
+      count2: prev.count2 + 1,
+      count3: prev.count3 + 1
+    }));
   };
 
   const decrement = () => {
@@ -94,21 +100,34 @@ function RCCounter2() {
 
 function RCCounter1() {
   const [state, setState] = useReactCounterState("count1");
+  const [, , setFullState] = useReactCounterFullState();
 
   useEffect(() => {
     rcLogger.log(`Counter1 컴포넌트 렌더링 - ${state}`);
   });
 
   const increment = () => {
-    setState(state + 1);
+    setFullState((prev) => ({
+      count1: prev.count1 + 1,
+      count2: prev.count2 + 1,
+      count3: prev.count3 + 1
+    }));
   };
 
   const decrement = () => {
-    setState(state - 1);
+    setFullState((prev) => ({
+      count1: prev.count1 - 1,
+      count2: prev.count2 - 1,
+      count3: prev.count3 - 1
+    }));
   };
 
   const reset = () => {
-    setState(0);
+    setFullState(() => ({
+      count1: 0,
+      count2: 0,
+      count3: 0
+    }));
   };
 
   return (