@vibecodetown/mcp-server 2.1.0

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

@@ -0,0 +1,325 @@
+// adapters/mcp-ts/src/tools/react_perf/rules/advanced.ts
+// Advanced Next.js Patterns (Parallel Routes, PPR, Optimistic Updates)
+/**
+ * Advanced rules detect missed opportunities for Next.js advanced features
+ * like parallel routes, partial prerendering, and optimistic updates.
+ */
+export const ADVANCED_RULES = [
+    {
+        id: "advanced-parallel-routes",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: layout with multiple independent data-fetching sections
+        pattern: /export\s+(?:default\s+)?(?:async\s+)?function\s+Layout[\s\S]*?(?:await|fetch\()[\s\S]*?(?:await|fetch\()/,
+        antiPattern: /@\w+|parallel/i,
+        message: "Layout with multiple data sources may benefit from Parallel Routes",
+        suggestion: "Use @folder convention for independent loading states",
+        fileFilter: /layout\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `// app/dashboard/layout.tsx
+export default async function Layout({ children }) {
+  const user = await getUser();
+  const notifications = await getNotifications();
+  return (
+    <div>
+      <Sidebar user={user} />
+      <NotificationPanel data={notifications} />
+      {children}
+    </div>
+  );
+}`,
+            good: `// app/dashboard/layout.tsx
+export default function Layout({
+  children,
+  sidebar,    // @sidebar/page.tsx
+  notifications // @notifications/page.tsx
+}) {
+  return (
+    <div>
+      {sidebar}
+      {notifications}
+      {children}
+    </div>
+  );
+}`
+        }
+    },
+    {
+        id: "advanced-intercepting-routes",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: modal/dialog pattern without intercepting routes
+        pattern: /<(?:Modal|Dialog|Sheet|Drawer)[^>]*>[\s\S]*?<\/(?:Modal|Dialog|Sheet|Drawer)>/,
+        antiPattern: /\(\.\)|\.{2,}|intercepting/i,
+        message: "Modal pattern may benefit from Intercepting Routes",
+        suggestion: "Use (.) or (..) convention for URL-backed modals",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `// Basic modal loses URL context
+function PhotoGallery({ photos }) {
+  const [selectedPhoto, setSelectedPhoto] = useState(null);
+
+  return (
+    <>
+      {photos.map(p => (
+        <img onClick={() => setSelectedPhoto(p)} />
+      ))}
+      {selectedPhoto && (
+        <Modal onClose={() => setSelectedPhoto(null)}>
+          <PhotoDetail photo={selectedPhoto} />
+        </Modal>
+      )}
+    </>
+  );
+}`,
+            good: `// app/photos/(..)photo/[id]/page.tsx (intercepts)
+// Enables: shareable URL, back button works, soft navigation
+
+// app/photos/page.tsx
+function PhotoGallery({ photos }) {
+  return photos.map(p => (
+    <Link href={\`/photo/\${p.id}\`}>
+      <img src={p.thumbnail} />
+    </Link>
+  ));
+}`
+        }
+    },
+    {
+        id: "advanced-generatestaticparams",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: dynamic route page without generateStaticParams
+        pattern: /export\s+(?:default\s+)?(?:async\s+)?function\s+Page\s*\(\s*\{\s*params/,
+        antiPattern: /generateStaticParams|dynamic\s*=\s*['"]force-dynamic['"]/,
+        message: "Dynamic route may benefit from generateStaticParams",
+        suggestion: "Add generateStaticParams for static generation of known paths",
+        fileFilter: /\[.*\].*page\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `// app/blog/[slug]/page.tsx
+export default async function Page({ params }) {
+  const post = await getPost(params.slug);
+  return <Article post={post} />;
+}`,
+            good: `// app/blog/[slug]/page.tsx
+export async function generateStaticParams() {
+  const posts = await getAllPosts();
+  return posts.map(post => ({ slug: post.slug }));
+}
+
+export default async function Page({ params }) {
+  const post = await getPost(params.slug);
+  return <Article post={post} />;
+}`
+        }
+    },
+    {
+        id: "advanced-route-segment-config",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: page with specific caching needs without config
+        pattern: /export\s+(?:default\s+)?(?:async\s+)?function\s+Page[\s\S]*?(?:revalidate|cache|unstable_cache)/,
+        antiPattern: /export\s+const\s+(?:dynamic|revalidate|fetchCache|runtime)/,
+        message: "Page may benefit from Route Segment Config",
+        suggestion: "Add export const revalidate/dynamic/fetchCache for explicit caching control",
+        fileFilter: /page\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `export default async function Page() {
+  const data = await fetch(url, {
+    next: { revalidate: 3600 }
+  });
+}`,
+            good: `export const revalidate = 3600; // Applies to all fetches
+
+export default async function Page() {
+  const data = await fetch(url);
+}`
+        }
+    },
+    {
+        id: "advanced-metadata-missing",
+        category: "advanced",
+        impact: "MEDIUM-HIGH",
+        // Detects: page.tsx without metadata export
+        pattern: /export\s+(?:default\s+)?(?:async\s+)?function\s+(?:Page|default)/,
+        antiPattern: /export\s+(?:const|async\s+function)\s+(?:metadata|generateMetadata)/,
+        message: "Page lacks Metadata API for SEO optimization",
+        suggestion: "Add metadata export or generateMetadata function",
+        fileFilter: /page\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `export default function Page() {
+  return <div>My Page</div>;
+}`,
+            good: `export const metadata = {
+  title: 'My Page',
+  description: 'Page description for SEO'
+};
+
+export default function Page() {
+  return <div>My Page</div>;
+}
+
+// Or dynamic metadata
+export async function generateMetadata({ params }) {
+  const post = await getPost(params.slug);
+  return { title: post.title };
+}`
+        }
+    },
+    {
+        id: "advanced-use-optimistic",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: form with Server Action but no optimistic update
+        pattern: /action=\{(?:async\s*)?\([^)]*\)\s*=>|formAction|useFormState/,
+        antiPattern: /useOptimistic|optimistic/i,
+        message: "Form action may benefit from optimistic updates",
+        suggestion: "Use useOptimistic hook for instant UI feedback",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `function TodoList({ todos }) {
+  async function addTodo(formData) {
+    'use server';
+    await db.todos.create(formData);
+  }
+
+  return (
+    <form action={addTodo}>
+      <input name="title" />
+      <button>Add</button> {/* Waits for server response */}
+    </form>
+  );
+}`,
+            good: `function TodoList({ todos }) {
+  const [optimisticTodos, addOptimistic] = useOptimistic(
+    todos,
+    (state, newTodo) => [...state, { ...newTodo, pending: true }]
+  );
+
+  async function addTodo(formData) {
+    addOptimistic({ title: formData.get('title') });
+    await createTodoAction(formData);
+  }
+}`
+        }
+    },
+    {
+        id: "advanced-server-actions-inline",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: multiple inline 'use server' functions
+        pattern: /(?:async\s+function\s+\w+[^{]*\{[^}]*['"]use server['"]\s*;[\s\S]*?){2,}/,
+        message: "Multiple inline Server Actions may hurt maintainability",
+        suggestion: "Extract Server Actions to separate actions.ts file",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `export default function Page() {
+  async function createPost() {
+    'use server';
+    // action 1
+  }
+
+  async function deletePost() {
+    'use server';
+    // action 2
+  }
+
+  async function updatePost() {
+    'use server';
+    // action 3
+  }
+}`,
+            good: `// app/posts/actions.ts
+'use server'
+
+export async function createPost(formData) { ... }
+export async function deletePost(id) { ... }
+export async function updatePost(id, formData) { ... }
+
+// app/posts/page.tsx
+import { createPost, deletePost } from './actions';`
+        }
+    },
+    {
+        id: "advanced-partial-prerendering",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: page with mix of static and dynamic content
+        pattern: /(?:export\s+const\s+revalidate|cache:\s*['"]no-store['"])[\s\S]*?(?:<[A-Z]\w+|<div)/,
+        antiPattern: /Suspense|experimental_ppr/i,
+        message: "Page with mixed content may benefit from Partial Prerendering",
+        suggestion: "Enable PPR and wrap dynamic parts with Suspense",
+        fileFilter: /page\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `// Entire page is dynamic
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  const user = await getUser(); // Dynamic
+  return (
+    <div>
+      <StaticHeader /> {/* Could be prerendered */}
+      <UserProfile user={user} />
+      <StaticFooter /> {/* Could be prerendered */}
+    </div>
+  );
+}`,
+            good: `// next.config.js: experimental: { ppr: true }
+
+export default function Page() {
+  return (
+    <div>
+      <StaticHeader /> {/* Prerendered */}
+      <Suspense fallback={<ProfileSkeleton />}>
+        <UserProfile /> {/* Streams in */}
+      </Suspense>
+      <StaticFooter /> {/* Prerendered */}
+    </div>
+  );
+}`
+        }
+    },
+    {
+        id: "advanced-use-transition",
+        category: "advanced",
+        impact: "LOW-MEDIUM",
+        // Detects: heavy state update without useTransition
+        pattern: /set\w+\s*\(\s*(?:items|data|list|results|filtered|sorted)[\s\S]{0,50}(?:filter|map|sort)\s*\(/,
+        antiPattern: /useTransition|startTransition/,
+        message: "Heavy state update may block UI - consider useTransition",
+        suggestion: "Wrap non-urgent updates with startTransition for responsive UI",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `function SearchResults({ items }) {
+  const [query, setQuery] = useState('');
+  const [filteredItems, setFilteredItems] = useState(items);
+
+  function handleSearch(e) {
+    const q = e.target.value;
+    setQuery(q);
+    // Expensive filter blocks typing
+    setFilteredItems(items.filter(item =>
+      item.name.toLowerCase().includes(q.toLowerCase())
+    ));
+  }
+}`,
+            good: `function SearchResults({ items }) {
+  const [query, setQuery] = useState('');
+  const [filteredItems, setFilteredItems] = useState(items);
+  const [isPending, startTransition] = useTransition();
+
+  function handleSearch(e) {
+    const q = e.target.value;
+    setQuery(q); // Urgent: update input immediately
+
+    startTransition(() => {
+      // Non-urgent: can be interrupted
+      setFilteredItems(items.filter(item =>
+        item.name.toLowerCase().includes(q.toLowerCase())
+      ));
+    });
+  }
+}`
+        }
+    }
+];

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

@@ -0,0 +1,104 @@
+// adapters/mcp-ts/src/tools/react_perf/rules/async.ts
+// Async/Await Anti-patterns (Waterfall Detection)
+/**
+ * Async rules detect common async/await anti-patterns that cause
+ * waterfall requests and unnecessary wait times.
+ *
+ * Based on Vercel agent-skills react-best-practices
+ */
+export const ASYNC_RULES = [
+    {
+        id: "async-sequential-await",
+        category: "async",
+        impact: "CRITICAL",
+        // Detects: await foo(); await bar(); (sequential awaits on separate lines)
+        pattern: /await\s+\w+\([^)]*\)\s*;?\s*\n\s*(?:const\s+\w+\s*=\s*)?await\s+\w+\(/,
+        message: "Sequential await statements cause waterfall requests",
+        suggestion: "Use Promise.all() or Promise.allSettled() for parallel execution",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `const user = await getUser(id);
+const posts = await getPosts(userId);`,
+            good: `const [user, posts] = await Promise.all([
+  getUser(id),
+  getPosts(userId)
+]);`
+        }
+    },
+    {
+        id: "async-await-in-loop",
+        category: "async",
+        impact: "CRITICAL",
+        // Detects: for/while loops with await inside
+        pattern: /(?:for|while)\s*\([^)]*\)\s*\{[^}]*await\s+/,
+        message: "await inside loop causes N sequential requests",
+        suggestion: "Use Promise.all() with map() for parallel execution",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `for (const id of ids) {
+  const data = await fetch(id);
+}`,
+            good: `const results = await Promise.all(
+  ids.map(id => fetch(id))
+);`
+        }
+    },
+    {
+        id: "async-defer-await",
+        category: "async",
+        impact: "HIGH",
+        // Detects: await before conditional that might not need the result
+        pattern: /const\s+\w+\s*=\s*await\s+\w+\([^)]*\)[\s\S]{0,100}if\s*\([^)]*!\s*\w+/,
+        message: "await executed before conditional check may be unnecessary",
+        suggestion: "Move await inside the branch that actually needs the data",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `const user = await getUser();
+if (!needsUser) return;
+// use user`,
+            good: `if (!needsUser) return;
+const user = await getUser();
+// use user`
+        }
+    },
+    {
+        id: "async-no-parallel-fetch",
+        category: "async",
+        impact: "HIGH",
+        // Detects: multiple fetch calls without Promise.all
+        pattern: /fetch\([^)]+\)[\s\S]{0,50}fetch\([^)]+\)/,
+        antiPattern: /Promise\.all/,
+        message: "Multiple fetch calls may be running sequentially",
+        suggestion: "Consider Promise.all() if fetches are independent",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `const res1 = await fetch('/api/users');
+const res2 = await fetch('/api/posts');`,
+            good: `const [res1, res2] = await Promise.all([
+  fetch('/api/users'),
+  fetch('/api/posts')
+]);`
+        }
+    },
+    {
+        id: "async-use-effect-async",
+        category: "async",
+        impact: "MEDIUM-HIGH",
+        // Detects: async function directly in useEffect
+        pattern: /useEffect\s*\(\s*async\s*\(/,
+        message: "useEffect callback cannot be async directly",
+        suggestion: "Define async function inside useEffect and call it",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `useEffect(async () => {
+  const data = await fetchData();
+}, []);`,
+            good: `useEffect(() => {
+  const fetchAndSet = async () => {
+    const data = await fetchData();
+  };
+  fetchAndSet();
+}, []);`
+        }
+    }
+];

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

@@ -0,0 +1,101 @@
+// adapters/mcp-ts/src/tools/react_perf/rules/bundle.ts
+// Bundle Size Anti-patterns (Barrel Imports, Tree Shaking)
+/**
+ * Bundle rules detect import patterns that increase bundle size
+ * and hurt initial load performance.
+ *
+ * Based on Vercel agent-skills react-best-practices
+ */
+export const BUNDLE_RULES = [
+    {
+        id: "bundle-barrel-import",
+        category: "bundle",
+        impact: "CRITICAL",
+        // Detects: import { x } from '@/components' (barrel import from index)
+        pattern: /import\s+\{[^}]+\}\s+from\s+['"][^'"]*\/(?:components|utils|lib|hooks)['"](?!\/)$/m,
+        message: "Barrel import may include entire module tree in bundle",
+        suggestion: "Import directly from the specific file: import { X } from '@/components/X'",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `import { Button, Input } from '@/components';`,
+            good: `import { Button } from '@/components/Button';
+import { Input } from '@/components/Input';`
+        }
+    },
+    {
+        id: "bundle-lodash-full",
+        category: "bundle",
+        impact: "CRITICAL",
+        // Detects: import _ from 'lodash' or import { x } from 'lodash'
+        pattern: /import\s+(?:_|\{[^}]+\})\s+from\s+['"]lodash['"]/,
+        antiPattern: /lodash\//,
+        message: "Full lodash import adds ~70KB to bundle",
+        suggestion: "Use lodash-es or import specific functions: import debounce from 'lodash/debounce'",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `import { debounce, throttle } from 'lodash';`,
+            good: `import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';`
+        }
+    },
+    {
+        id: "bundle-moment",
+        category: "bundle",
+        impact: "HIGH",
+        // Detects: import moment from 'moment'
+        pattern: /import\s+\w+\s+from\s+['"]moment['"]/,
+        message: "moment.js is 300KB+ with locales",
+        suggestion: "Use date-fns or dayjs instead (much smaller bundle)",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `import moment from 'moment';`,
+            good: `import { format, parseISO } from 'date-fns';`
+        }
+    },
+    {
+        id: "bundle-no-dynamic-import",
+        category: "bundle",
+        impact: "MEDIUM-HIGH",
+        // Detects: large component imports that could be dynamic
+        pattern: /import\s+\w+\s+from\s+['"][^'"]*(?:Modal|Dialog|Chart|Editor|Map)['"]/,
+        antiPattern: /dynamic|lazy/,
+        message: "Large component imported statically",
+        suggestion: "Use dynamic import for components not needed on initial render",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `import ChartComponent from './ChartComponent';`,
+            good: `const ChartComponent = dynamic(() => import('./ChartComponent'), {
+  loading: () => <Loading />
+});`
+        }
+    },
+    {
+        id: "bundle-icon-library",
+        category: "bundle",
+        impact: "MEDIUM-HIGH",
+        // Detects: import * from icon libraries
+        pattern: /import\s+\*\s+as\s+\w+\s+from\s+['"](?:@heroicons|lucide-react|react-icons)['"]/,
+        message: "Importing entire icon library increases bundle size",
+        suggestion: "Import only specific icons: import { IconName } from 'library/category'",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `import * as Icons from 'lucide-react';`,
+            good: `import { Search, Menu } from 'lucide-react';`
+        }
+    },
+    {
+        id: "bundle-dev-dependency",
+        category: "bundle",
+        impact: "HIGH",
+        // Detects: imports that are typically dev-only
+        pattern: /import\s+.*from\s+['"](?:faker|@faker-js|msw|@testing-library)['"]/,
+        message: "Development dependency may be included in production bundle",
+        suggestion: "Ensure this import is only in test/mock files or use dynamic import with env check",
+        fileFilter: /\.(tsx?|jsx?)$/,
+        examples: {
+            bad: `import { faker } from '@faker-js/faker';`,
+            good: `// Only in *.test.ts or *.mock.ts files
+import { faker } from '@faker-js/faker';`
+        }
+    }
+];