fix: init and use store with react store api

Author: nayounsang

.changeset/rotten-bottles-worry.md

@@ -0,0 +1,5 @@
+---
+"@msw-dev-tool/react": patch
+---
+
+use `useHandlerStore` api from core package

packages/react/package.json

@@ -41,8 +41,8 @@
   "peerDependencies": {
     "@msw-dev-tool/core": "workspace:*",
     "msw": "^2.7.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",
@@ -51,8 +51,8 @@
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.3",
     "@tailwindcss/postcss": "^4.1.4",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
     "eslint": "^9.24.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.0.0",

packages/react/src/ui/DevToolContent/HandlerTable/BehaviorSelect.tsx

@@ -2,7 +2,7 @@ import { Row } from "@tanstack/react-table";
 import React from "react";
 import {
   FlattenHandler,
-  handlerStore,
+  useHandlerStore,
   HttpHandlerBehavior,
 } from "@msw-dev-tool/core";
 import { Select } from "../../Components/Select";
@@ -14,7 +14,8 @@ const options = Object.values(HttpHandlerBehavior).map((behavior) => ({
 
 export const BehaviorSelect = ({ row }: { row: Row<FlattenHandler> }) => {
   const id = row.original.id;
-  const { setHandlerBehavior, getHandlerBehavior } = handlerStore();
+  const setHandlerBehavior = useHandlerStore((state)=>state.setHandlerBehavior);
+  const getHandlerBehavior = useHandlerStore((state)=>state.getHandlerBehavior);
 
   return (
     <Select

packages/react/src/ui/DevToolContent/ToolButtonGroup/HandlerForm.tsx

@@ -9,7 +9,7 @@ import { getOptions } from "./util";
 import {
   handlerSchema,
   HandlerSchema,
-  handlerStore,
+  useHandlerStore,
   HttpMethod,
   StringHttpStatusCode,
   MimeType,
@@ -28,7 +28,7 @@ const statusOptions = getOptions(StringHttpStatusCode);
 const mimeTypeOptions = getOptions(MimeType);
 
 export const HandlerForm = ({ onClose }: HandlerFormProps) => {
-  const { addTempHandler } = handlerStore();
+  const addTempHandler = useHandlerStore((state)=>state.addTempHandler);
 
   const {
     register,

packages/react/src/ui/DevToolContent/ToolButtonGroup/index.tsx

@@ -12,13 +12,13 @@ import {
 import { HandlerForm } from "./HandlerForm";
 import { CloseButton } from "../../Components/CloseButton";
 import { usePortalContainer } from "../../PortalContainerProvider";
-import { handlerStore } from "@msw-dev-tool/core";
+import { useHandlerStore } from "@msw-dev-tool/core";
 import { Flex } from "../../Components/Flex";
 import { Button } from "../../Components/Button";
 import { DialogOverlay } from "../../Components/DialogOverlay";
 
 export const ToolButtonGroup = () => {
-  const { resetMSWDevTool } = handlerStore();
+  const resetMSWDevTool = useHandlerStore((state)=>state.resetMSWDevTool);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const container = usePortalContainer();

packages/react/src/ui/DevToolContent/hook/useFlattenHandlersTable.tsx

@@ -6,7 +6,7 @@ import {
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
 import { BehaviorSelect } from "../HandlerTable/BehaviorSelect";
-import { FlattenHandler, handlerStore } from "@msw-dev-tool/core";
+import { FlattenHandler, useHandlerStore } from "@msw-dev-tool/core";
 import { DebugIcon } from "../../Components/DebugIcon";
 import { usePortalContainer } from "../../PortalContainerProvider";
 import {
@@ -22,11 +22,16 @@ import { Button } from "../../Components/Button";
 import { HandlerDebugger } from "../HandlerDebugger";
 import { Flex } from "../../Components/Flex";
 import { CloseButton } from "../../Components/CloseButton";
+import { TrashIcon } from "@radix-ui/react-icons";
+
+const columnHelper = createColumnHelper<FlattenHandler>();
+
 
 export const useFlattenHandlersTable = () => {
-  const { flattenHandlers } = handlerStore();
+  const flattenHandlers = useHandlerStore((state)=>state.flattenHandlers);
+  const removeTempHandler = useHandlerStore((state)=>state.removeTempHandler);
+  const container = usePortalContainer();
 
-  const columnHelper = createColumnHelper<FlattenHandler>();
   const columns: ColumnDef<FlattenHandler, any>[] = useMemo(() => {
     return [
       columnHelper.accessor("path", {
@@ -66,7 +71,6 @@ export const useFlattenHandlersTable = () => {
       columnHelper.display({
         header: "Debug",
         cell: ({ row }) => {
-          const container = usePortalContainer();
 
           return (
             <Dialog>
@@ -93,8 +97,33 @@ export const useFlattenHandlersTable = () => {
           );
         },
       }),
+      columnHelper.display({
+        header: "Delete",
+        cell: ({ row }) => {
+          const isTemp = row.original.type === "temp";
+          return (
+            <Button
+              variant="ghost"
+              color="danger"
+              onClick={() => {
+                removeTempHandler(row.original.id);
+              }}
+              disabled={!isTemp}
+              title={
+                isTemp
+                  ? "Delete this handler"
+                  : "Handlers generated from codebase cannot be deleted"
+              }
+              className={isTemp ? "text-red-500" : "text-gray-300 cursor-not-allowed"}
+            >
+              <TrashIcon />
+            </Button>
+          );
+        },
+        id: "delete",
+      }),
     ];
-  }, [flattenHandlers]);
+  }, [flattenHandlers, removeTempHandler]);
 
   const table = useReactTable({
     columns,