@vibecodetown/mcp-server 2.1.0

package/build/tools/react_perf/rules/client.js

@@ -0,0 +1,186 @@
+// adapters/mcp-ts/src/tools/react_perf/rules/client.ts
+// Client Component Anti-patterns (use client, hydration, SSR)
+/**
+ * Client rules detect issues with Client Components including
+ * overuse of 'use client', hydration mismatches, and SSR problems.
+ */
+export const CLIENT_RULES = [
+    {
+        id: "client-use-client-overuse",
+        category: "client",
+        impact: "CRITICAL",
+        // Detects: 'use client' in files with only static content or simple props
+        pattern: /['"]use client['"][\s\S]*?export\s+(?:default\s+)?function\s+\w+\([^)]*\)\s*\{[\s\S]*?return\s*\(/,
+        antiPattern: /useState|useEffect|useReducer|useContext|onClick|onChange|onSubmit|addEventListener/,
+        message: "'use client' may be unnecessary - no client-side interactivity detected",
+        suggestion: "Remove 'use client' if component doesn't use hooks or event handlers",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `'use client'
+export function StaticCard({ title, description }) {
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{description}</p>
+    </div>
+  );
+}`,
+            good: `// No 'use client' needed for static components
+export function StaticCard({ title, description }) {
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{description}</p>
+    </div>
+  );
+}`
+        }
+    },
+    {
+        id: "client-no-children-prop",
+        category: "client",
+        impact: "LOW-MEDIUM",
+        // Detects: Client component that wraps content but doesn't use children
+        pattern: /['"]use client['"][\s\S]*?export\s+(?:default\s+)?function\s+\w+\([^)]*\)\s*\{[\s\S]*?<[A-Z]\w+/,
+        antiPattern: /children|{props\.children}|\{children\}/,
+        message: "Client Component wrapper may benefit from children prop pattern",
+        suggestion: "Use children prop to keep nested Server Components on server",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `'use client'
+export function AnimatedSection({ content }) {
+  const ref = useRef();
+  // Animation logic...
+  return <section ref={ref}>{content}</section>;
+}`,
+            good: `'use client'
+export function AnimatedSection({ children }) {
+  const ref = useRef();
+  // Animation logic...
+  return <section ref={ref}>{children}</section>;
+}
+
+// Usage: children stay as Server Components
+<AnimatedSection>
+  <ServerRenderedContent />
+</AnimatedSection>`
+        }
+    },
+    {
+        id: "client-window-check-missing",
+        category: "client",
+        impact: "CRITICAL",
+        // Detects: direct window/document access without typeof check
+        pattern: /(?:window\.|document\.)(?!addEventListener)(?:\w+)/,
+        antiPattern: /typeof\s+(?:window|document)\s*[!=]==?\s*['"]undefined['"]/,
+        message: "Direct window/document access may cause SSR errors",
+        suggestion: "Check typeof window !== 'undefined' or use useEffect for client-only code",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `function Component() {
+  const width = window.innerWidth;
+  return <div style={{ width }} />;
+}`,
+            good: `function Component() {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    setWidth(window.innerWidth);
+  }, []);
+
+  return <div style={{ width }} />;
+}`
+        }
+    },
+    {
+        id: "client-useeffect-data-fetch",
+        category: "client",
+        impact: "MEDIUM-HIGH",
+        // Detects: useEffect with fetch or data loading
+        pattern: /useEffect\s*\(\s*(?:async\s*)?\(\s*\)\s*=>\s*\{[\s\S]*?(?:fetch\(|axios\.|useSWR|useQuery)/,
+        message: "Data fetching in useEffect causes client-side waterfall",
+        suggestion: "Prefer Server Components for data fetching, or use React Query/SWR with suspense",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `'use client'
+function UserProfile({ id }) {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    fetch(\`/api/users/\${id}\`)
+      .then(res => res.json())
+      .then(setUser);
+  }, [id]);
+
+  return user ? <div>{user.name}</div> : <Loading />;
+}`,
+            good: `// Server Component (preferred)
+async function UserProfile({ id }) {
+  const user = await getUser(id);
+  return <div>{user.name}</div>;
+}
+
+// Or with React Query suspense
+const { data } = useSuspenseQuery({
+  queryKey: ['user', id],
+  queryFn: () => getUser(id)
+});`
+        }
+    },
+    {
+        id: "client-heavy-import",
+        category: "client",
+        impact: "MEDIUM-HIGH",
+        // Detects: large libraries imported in 'use client' files
+        pattern: /['"]use client['"][\s\S]*?import\s+.*from\s+['"](?:chart\.js|d3|three|@react-three|gsap|framer-motion|@dnd-kit)['"]/,
+        antiPattern: /dynamic\s*\(/,
+        message: "Heavy library imported in Client Component increases bundle size",
+        suggestion: "Use dynamic import with { ssr: false } for heavy client libraries",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `'use client'
+import { Chart } from 'chart.js';
+import { motion } from 'framer-motion';`,
+            good: `'use client'
+import dynamic from 'next/dynamic';
+
+const Chart = dynamic(
+  () => import('chart.js').then(mod => mod.Chart),
+  { ssr: false }
+);`
+        }
+    },
+    {
+        id: "client-state-url-sync",
+        category: "client",
+        impact: "LOW-MEDIUM",
+        // Detects: useState for filter/sort/pagination without URL sync
+        pattern: /const\s+\[\s*(?:filter|sort|page|query|search|tab)\w*\s*,/,
+        antiPattern: /useSearchParams|useRouter|router\.push|searchParams/,
+        message: "UI state may benefit from URL synchronization",
+        suggestion: "Consider syncing filter/sort/pagination state with URL for shareability",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `'use client'
+function ProductList() {
+  const [sortBy, setSortBy] = useState('price');
+  const [filterCategory, setFilterCategory] = useState('all');
+  // State lost on refresh, can't share URL
+}`,
+            good: `'use client'
+function ProductList() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const sortBy = searchParams.get('sort') || 'price';
+  const filterCategory = searchParams.get('category') || 'all';
+
+  const updateParams = (key, value) => {
+    const params = new URLSearchParams(searchParams);
+    params.set(key, value);
+    router.push(\`?\${params.toString()}\`);
+  };
+}`
+        }
+    }
+];

package/build/tools/react_perf/rules/index.js

@@ -0,0 +1,74 @@
+// adapters/mcp-ts/src/tools/react_perf/rules/index.ts
+// Rule Registry and Loader
+import { ASYNC_RULES } from "./async.js";
+import { BUNDLE_RULES } from "./bundle.js";
+import { SERVER_RULES } from "./server.js";
+import { RENDERING_RULES } from "./rendering.js";
+import { CLIENT_RULES } from "./client.js";
+import { RERENDER_RULES } from "./rerender.js";
+import { ADVANCED_RULES } from "./advanced.js";
+import { JS_RULES } from "./js.js";
+// ============================================================
+// Rule Registry
+// ============================================================
+/**
+ * All available rules organized by category
+ */
+export const RULE_REGISTRY = {
+    async: ASYNC_RULES,
+    bundle: BUNDLE_RULES,
+    server: SERVER_RULES,
+    rendering: RENDERING_RULES,
+    client: CLIENT_RULES,
+    rerender: RERENDER_RULES,
+    advanced: ADVANCED_RULES,
+    js: JS_RULES
+};
+// ============================================================
+// Rule Loader Functions
+// ============================================================
+/**
+ * Get all rules from all categories
+ */
+export function getAllRules() {
+    return Object.values(RULE_REGISTRY).flat();
+}
+/**
+ * Get rules for specific categories
+ */
+export function getRulesByCategories(categories) {
+    return categories.flatMap(cat => RULE_REGISTRY[cat] || []);
+}
+/**
+ * Get a specific rule by ID
+ */
+export function getRuleById(id) {
+    return getAllRules().find(r => r.id === id);
+}
+/**
+ * Get rule count by category
+ */
+export function getRuleCountByCategory() {
+    const counts = {};
+    for (const [cat, rules] of Object.entries(RULE_REGISTRY)) {
+        counts[cat] = rules.length;
+    }
+    return counts;
+}
+/**
+ * Get total rule count
+ */
+export function getTotalRuleCount() {
+    return getAllRules().length;
+}
+// ============================================================
+// Re-export Individual Rule Sets
+// ============================================================
+export { ASYNC_RULES } from "./async.js";
+export { BUNDLE_RULES } from "./bundle.js";
+export { SERVER_RULES } from "./server.js";
+export { RENDERING_RULES } from "./rendering.js";
+export { CLIENT_RULES } from "./client.js";
+export { RERENDER_RULES } from "./rerender.js";
+export { ADVANCED_RULES } from "./advanced.js";
+export { JS_RULES } from "./js.js";

package/build/tools/react_perf/rules/js.js

@@ -0,0 +1,148 @@
+// adapters/mcp-ts/src/tools/react_perf/rules/js.ts
+// General JavaScript Anti-patterns (Bundle, Safety, Performance)
+/**
+ * JS rules detect general JavaScript anti-patterns that affect
+ * bundle size, safety, and runtime performance.
+ */
+export const JS_RULES = [
+    {
+        id: "js-lodash-full-import",
+        category: "js",
+        impact: "CRITICAL",
+        // Detects: import _ from 'lodash' or import { x } from 'lodash'
+        pattern: /import\s+(?:_|\{[^}]+\})\s+from\s+['"]lodash['"]/,
+        antiPattern: /lodash\/|lodash-es/,
+        message: "Full lodash import adds ~70KB to bundle",
+        suggestion: "Use lodash-es or import from 'lodash/function'",
+        fileFilter: /\.(tsx?|jsx?|mjs)$/,
+        examples: {
+            bad: `import { debounce, throttle } from 'lodash';
+import _ from 'lodash';`,
+            good: `import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
+// Or use lodash-es for tree-shaking
+import { debounce } from 'lodash-es';`
+        }
+    },
+    {
+        id: "js-moment-usage",
+        category: "js",
+        impact: "MEDIUM-HIGH",
+        // Detects: import moment from 'moment'
+        pattern: /import\s+\w*\s*(?:,\s*\{[^}]*\})?\s*from\s+['"]moment['"]/,
+        message: "moment.js is 300KB+ with locales - consider alternatives",
+        suggestion: "Use date-fns (~10KB), dayjs (~2KB), or native Intl API",
+        fileFilter: /\.(tsx?|jsx?|mjs)$/,
+        examples: {
+            bad: `import moment from 'moment';
+const formatted = moment(date).format('YYYY-MM-DD');`,
+            good: `// date-fns (tree-shakeable)
+import { format } from 'date-fns';
+const formatted = format(date, 'yyyy-MM-dd');
+
+// dayjs (2KB)
+import dayjs from 'dayjs';
+const formatted = dayjs(date).format('YYYY-MM-DD');
+
+// Native (0KB)
+const formatted = new Intl.DateTimeFormat('en-CA').format(date);`
+        }
+    },
+    {
+        id: "js-async-loop",
+        category: "js",
+        impact: "CRITICAL",
+        // Detects: for/forEach with await inside
+        pattern: /(?:for\s*\(|\.forEach\s*\()[^)]*\)\s*(?:=>)?\s*\{?[^}]*await\s+/,
+        message: "await in loop causes sequential execution (N round trips)",
+        suggestion: "Use Promise.all() with map() for parallel execution",
+        fileFilter: /\.(tsx?|jsx?|mjs)$/,
+        examples: {
+            bad: `// Sequential: 10 items = 10 round trips
+for (const id of ids) {
+  const result = await fetchItem(id);
+  results.push(result);
+}
+
+// Same problem with forEach
+ids.forEach(async (id) => {
+  await processItem(id);
+});`,
+            good: `// Parallel: 10 items = 1 round trip (batched)
+const results = await Promise.all(
+  ids.map(id => fetchItem(id))
+);
+
+// With concurrency limit if needed
+import pLimit from 'p-limit';
+const limit = pLimit(5);
+const results = await Promise.all(
+  ids.map(id => limit(() => fetchItem(id)))
+);`
+        }
+    },
+    {
+        id: "js-console-log",
+        category: "js",
+        impact: "LOW-MEDIUM",
+        // Detects: console.log (but not console.error/warn)
+        pattern: /console\.log\s*\(/,
+        antiPattern: /\/\/.*console|\/\*[\s\S]*?console[\s\S]*?\*\/|debug|development/i,
+        message: "console.log may remain in production code",
+        suggestion: "Remove or replace with proper logging/debugging tools",
+        fileFilter: /\.(tsx?|jsx?|mjs)$/,
+        examples: {
+            bad: `function processData(data) {
+  console.log('data:', data); // Ships to production
+  return transform(data);
+}`,
+            good: `// Use environment check
+if (process.env.NODE_ENV === 'development') {
+  console.log('data:', data);
+}
+
+// Or use a logger that respects environment
+import { logger } from '@/lib/logger';
+logger.debug('data:', data);
+
+// Or remove entirely for production`
+        }
+    },
+    {
+        id: "js-json-parse-unsafe",
+        category: "js",
+        impact: "MEDIUM-HIGH",
+        // Detects: JSON.parse without try-catch
+        pattern: /(?:const|let|var)\s+\w+\s*=\s*JSON\.parse\s*\(/,
+        antiPattern: /try\s*\{|\.catch\(|safeJson|parseJSON/i,
+        message: "JSON.parse without error handling may crash on invalid input",
+        suggestion: "Wrap in try-catch or use safe parsing utility",
+        fileFilter: /\.(tsx?|jsx?|mjs)$/,
+        examples: {
+            bad: `function loadSettings() {
+  const stored = localStorage.getItem('settings');
+  const settings = JSON.parse(stored); // Crashes if null or invalid
+  return settings;
+}`,
+            good: `function loadSettings() {
+  const stored = localStorage.getItem('settings');
+  try {
+    return stored ? JSON.parse(stored) : defaultSettings;
+  } catch {
+    console.error('Invalid settings JSON');
+    return defaultSettings;
+  }
+}
+
+// Or create a utility
+function safeJsonParse<T>(str: string | null, fallback: T): T {
+  if (!str) return fallback;
+  try {
+    return JSON.parse(str);
+  } catch {
+    return fallback;
+  }
+}`
+        }
+    }
+];

package/build/tools/react_perf/rules/rendering.js

@@ -0,0 +1,166 @@
+// adapters/mcp-ts/src/tools/react_perf/rules/rendering.ts
+// Rendering Pattern Anti-patterns (Suspense, Streaming, Error Boundaries)
+/**
+ * Rendering rules detect patterns related to React's concurrent features,
+ * Suspense boundaries, and streaming rendering in Next.js.
+ */
+export const RENDERING_RULES = [
+    {
+        id: "rendering-suspense-boundary",
+        category: "rendering",
+        impact: "MEDIUM-HIGH",
+        // Detects: async component without Suspense wrapper nearby
+        pattern: /(?:async\s+function|async\s+\()\s*\w*\s*\([^)]*\)\s*(?::\s*[^{]+)?\s*\{[\s\S]*?(?:await|fetch\()/,
+        antiPattern: /Suspense|loading\.tsx/,
+        message: "Async Server Component may lack Suspense boundary",
+        suggestion: "Wrap async components with <Suspense fallback={...}> or add loading.tsx",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `async function UserProfile() {
+  const user = await getUser();
+  return <div>{user.name}</div>;
+}`,
+            good: `// In page.tsx
+<Suspense fallback={<UserSkeleton />}>
+  <UserProfile />
+</Suspense>
+
+// Or add loading.tsx in same folder`
+        }
+    },
+    {
+        id: "rendering-loading-ui",
+        category: "rendering",
+        impact: "LOW-MEDIUM",
+        // Detects: page.tsx with data fetching but no loading.tsx in hints
+        pattern: /export\s+(?:default\s+)?(?:async\s+)?function\s+(?:Page|default)[\s\S]*?(?:await|fetch\()/,
+        antiPattern: /loading\s*[=:]/,
+        message: "Page with data fetching may lack loading UI",
+        suggestion: "Create loading.tsx alongside page.tsx for automatic loading states",
+        fileFilter: /page\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `// app/users/page.tsx only
+export default async function Page() {
+  const users = await getUsers();
+  return <UserList users={users} />;
+}`,
+            good: `// app/users/loading.tsx
+export default function Loading() {
+  return <UserListSkeleton />;
+}
+
+// app/users/page.tsx
+export default async function Page() {
+  const users = await getUsers();
+  return <UserList users={users} />;
+}`
+        }
+    },
+    {
+        id: "rendering-streaming-disabled",
+        category: "rendering",
+        impact: "MEDIUM-HIGH",
+        // Detects: dynamic = 'force-static' or revalidate = 0 on pages with heavy data
+        pattern: /(?:export\s+const\s+dynamic\s*=\s*['"]force-static['"]|export\s+const\s+revalidate\s*=\s*0)[\s\S]*?(?:getMany|findAll|select\s*\*)/,
+        message: "Static rendering with heavy data fetching prevents streaming benefits",
+        suggestion: "Consider streaming with Suspense for large datasets",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `export const dynamic = 'force-static';
+
+async function Page() {
+  const allPosts = await db.posts.findAll(); // Could be slow
+}`,
+            good: `// Let Next.js stream the response
+async function Page() {
+  return (
+    <Suspense fallback={<PostsSkeleton />}>
+      <PostsList />
+    </Suspense>
+  );
+}`
+        }
+    },
+    {
+        id: "rendering-nested-suspense",
+        category: "rendering",
+        impact: "LOW-MEDIUM",
+        // Detects: multiple async components at same level without individual Suspense
+        pattern: /<(?:[A-Z]\w+)\s*\/?>[\s\S]{0,50}<(?:[A-Z]\w+)\s*\/?>[\s\S]{0,50}<(?:[A-Z]\w+)\s*\/?>/,
+        antiPattern: /Suspense/,
+        message: "Multiple components may benefit from nested Suspense boundaries",
+        suggestion: "Use nested Suspense to stream independent sections progressively",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `// All components load together
+<Page>
+  <Header />
+  <MainContent />
+  <Sidebar />
+</Page>`,
+            good: `// Independent loading states
+<Page>
+  <Header />
+  <Suspense fallback={<ContentSkeleton />}>
+    <MainContent />
+  </Suspense>
+  <Suspense fallback={<SidebarSkeleton />}>
+    <Sidebar />
+  </Suspense>
+</Page>`
+        }
+    },
+    {
+        id: "rendering-error-boundary",
+        category: "rendering",
+        impact: "MEDIUM-HIGH",
+        // Detects: async data fetching without error.tsx or ErrorBoundary
+        pattern: /(?:await\s+fetch|await\s+db\.|await\s+prisma\.)/,
+        antiPattern: /ErrorBoundary|error\.tsx|try\s*\{/,
+        message: "Data fetching may lack error boundary",
+        suggestion: "Add error.tsx or wrap with ErrorBoundary for graceful error handling",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `async function UserProfile() {
+  const user = await db.user.findUnique({ where: { id } });
+  return <div>{user.name}</div>;
+}`,
+            good: `// Add error.tsx in same folder
+'use client'
+export default function Error({ error, reset }) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}`
+        }
+    },
+    {
+        id: "rendering-sequential-fetch",
+        category: "rendering",
+        impact: "CRITICAL",
+        // Detects: multiple awaits for data fetching in sequence
+        pattern: /const\s+\w+\s*=\s*await\s+(?:fetch|db\.|prisma\.)[^;]+;\s*\n\s*const\s+\w+\s*=\s*await\s+(?:fetch|db\.|prisma\.)/,
+        message: "Sequential data fetching in Server Component causes waterfall",
+        suggestion: "Use Promise.all() for parallel fetching or split into separate components with Suspense",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `async function Dashboard() {
+  const user = await db.user.findUnique({ where: { id } });
+  const posts = await db.posts.findMany({ where: { userId: id } });
+  const analytics = await fetch('/api/analytics');
+}`,
+            good: `async function Dashboard() {
+  const [user, posts, analytics] = await Promise.all([
+    db.user.findUnique({ where: { id } }),
+    db.posts.findMany({ where: { userId: id } }),
+    fetch('/api/analytics')
+  ]);
+}
+
+// Or split with Suspense for progressive loading`
+        }
+    }
+];