feat: play ground (#50)

* feat: play ground

* fix: ignore msw/browser in server env of build process

* fix: vercel deploy error because of root dir and pnpm local workspaces

* fix: update lock

Author: nayounsang

packages/docs/app/docs/playground/_components/DevToolTrigger.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { MSWDevTool } from "msw-dev-tool";
+import { Button } from "nextra/components";
+import "msw-dev-tool/msw-dev-tool.css";
+import { Terminal } from "lucide-react";
+
+export const DevToolTrigger = () => {
+  return (
+    <div className="w-full py-4 flex justify-center items-center">
+      <MSWDevTool
+        trigger={
+          <Button className="px-4 py-2 rounded-lg bg-gradient-to-r from-orange-500 to-amber-600 text-white font-medium shadow-md hover:shadow-xl hover:bg-gradient-to-r hover:from-orange-400 hover:to-amber-500 transition-all duration-200 border border-orange-500/30 hover:border-orange-400/70 flex items-center gap-2">
+            <Terminal />
+            Open msw-dev-tool
+          </Button>
+        }
+      />
+    </div>
+  );
+};

packages/docs/app/docs/playground/page.mdx

@@ -0,0 +1,18 @@
+---
+description: msw-dev-tool playground
+---
+
+import { DevToolTrigger } from "./_components/DevToolTrigger";
+
+# Playground
+
+> Use `msw-dev-tool` in playground 🚀
+
+<DevToolTrigger />
+
+## Example Apis
+
+🚧 **Coming Soon** 🚧
+
+I'm currently preparing API examples. Please check back later!
+A variety of useful API examples with use cases will be added here soon.

packages/docs/mock/browser.ts

@@ -0,0 +1,3 @@
+import { setupDevToolWorker } from "msw-dev-tool";
+
+export const worker = setupDevToolWorker();

packages/docs/next.config.ts

@@ -6,7 +6,17 @@ const withNextra = nextra({
 });
 
 const nextConfig: NextConfig = withNextra({
-  /* config options here */
+  /**
+   * This is required for the docs to use msw-dev-tool in production.
+   * The build works in a node environment, but msw/browser should be used strictly in a browser environment.
+   * However, build checks all browser packages that are statically imported.
+   */
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      config.resolve.alias["msw/browser"] = false;
+    }
+    return config;
+  },
 });
 
 export default nextConfig;

packages/docs/package.json

@@ -13,7 +13,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.479.0",
     "msw": "^2.7.0",
-    "msw-dev-tool": "workspace:*",
+    "msw-dev-tool": "latest",
     "next": "15.2.1",
     "nextra": "^4.2.16",
     "nextra-theme-docs": "^4.2.16",

packages/msw-dev-tool/src/lib/handlerStore.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { SetupWorker } from "msw/browser";
 import { create } from "zustand";
 import { FlattenHandler, Handler, HttpHandlerBehavior } from "./type";

packages/msw-dev-tool/src/ui/MSWDevTool.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React, { ReactNode } from "react";
 import { Flex } from "@radix-ui/themes";
 import { Drawer } from "vaul";