@react-spa-scaffold/mcp 1.1.0 → 1.1.2

package/templates/src/main.tsx

@@ -7,6 +7,7 @@ import './index.css';
 import { ErrorBoundary } from '@/components/shared';
 import { Toaster } from '@/components/ui/sonner';
 import { MobileProvider } from '@/contexts/mobileContext';
+import { PerformanceProviderWrapper } from '@/contexts/performanceContext';
 import { QueryProvider } from '@/contexts/queryContext';
 import { i18n, initI18n } from '@/i18n';
 import { SENTRY_CONFIG } from '@/lib/config';
@@ -75,8 +76,10 @@ initI18n().then(() => {
           <BrowserRouter>
             <MobileProvider>
               <ErrorBoundary>
-                <App />
-                <Toaster />
+                <PerformanceProviderWrapper>
+                  <App />
+                  <Toaster />
+                </PerformanceProviderWrapper>
               </ErrorBoundary>
             </MobileProvider>
           </BrowserRouter>

package/templates/src/pages/Home.tsx

@@ -1,46 +1,51 @@
 import { Trans, useLingui } from '@lingui/react/macro';
+import { Profiler } from 'react';
 
 import { RegisterForm, SEO } from '@/components/shared';
+import { usePerformance } from '@/contexts/performanceContext';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 
 export function HomePage() {
   const { t } = useLingui();
+  const { onProfilerRender } = usePerformance();
 
   return (
-    <div className="container mx-auto max-w-lg px-4 py-8">
-      <SEO
-        title={t({ message: 'Home', comment: 'Home page title for SEO' })}
-        description={t({
-          message: 'Welcome to our modern React application',
-          comment: 'Home page meta description for SEO',
-        })}
-      />
+    <Profiler id="home-page" onRender={onProfilerRender}>
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <SEO
+          title={t({ message: 'Home', comment: 'Home page title for SEO' })}
+          description={t({
+            message: 'Welcome to our modern React application',
+            comment: 'Home page meta description for SEO',
+          })}
+        />
 
-      <div className="mb-8 text-center">
-        <h1 className="text-3xl font-bold">
-          <Trans comment="Main heading on the home page">Welcome to My App</Trans>
-        </h1>
-        <p className="text-muted-foreground mt-2">
-          <Trans comment="Instructions for developers on how to start customizing the app">
-            Get started by editing <code className="bg-muted rounded px-1">src/App.tsx</code>
-          </Trans>
-        </p>
-      </div>
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl font-bold">
+            <Trans comment="Main heading on the home page">Welcome to My App</Trans>
+          </h1>
+          <p className="text-muted-foreground mt-2">
+            <Trans comment="Instructions for developers on how to start customizing the app">
+              Get started by editing <code className="bg-muted rounded px-1">src/App.tsx</code>
+            </Trans>
+          </p>
+        </div>
 
-      {/* Form validation demo */}
-      <Card>
-        <CardHeader>
-          <CardTitle>
-            <Trans comment="Register form card title">Registration Form</Trans>
-          </CardTitle>
-          <CardDescription>
-            <Trans comment="Register form card description">React Hook Form + Zod validation demo</Trans>
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <RegisterForm />
-        </CardContent>
-      </Card>
-    </div>
+        {/* Form validation demo */}
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <Trans comment="Register form card title">Registration Form</Trans>
+            </CardTitle>
+            <CardDescription>
+              <Trans comment="Register form card description">React Hook Form + Zod validation demo</Trans>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RegisterForm />
+          </CardContent>
+        </Card>
+      </div>
+    </Profiler>
   );
 }

package/templates/src/test/providers.tsx

@@ -6,6 +6,7 @@ import { type ReactElement, type ReactNode } from 'react';
 import { MemoryRouter } from 'react-router';
 
 import { MobileProvider } from '@/contexts/mobileContext';
+import { PerformanceProviderWrapper } from '@/contexts/performanceContext';
 
 // Setup empty English catalog for tests
 i18n.loadAndActivate({ locale: 'en', messages: {} });
@@ -36,11 +37,14 @@ interface WrapperProps {
 function AllProviders({ children }: WrapperProps) {
   const queryClient = createTestQueryClient();
 
+  // Provider order matches main.tsx: Query > I18n > Router > Mobile > Performance
   return (
     <QueryClientProvider client={queryClient}>
       <I18nProvider i18n={i18n}>
         <MemoryRouter>
-          <MobileProvider>{children}</MobileProvider>
+          <MobileProvider>
+            <PerformanceProviderWrapper>{children}</PerformanceProviderWrapper>
+          </MobileProvider>
         </MemoryRouter>
       </I18nProvider>
     </QueryClientProvider>

package/templates/vitest.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: ['./src/test-setup.ts'],
-    include: ['src/**/*.test.{ts,tsx}', 'tests/**/*.test.{ts,tsx}'],
+    include: ['src/**/*.test.{ts,tsx}'],
     clearMocks: true,
     restoreMocks: true,
     coverage: {

package/templates/lighthouse-budget.json

@@ -1,17 +0,0 @@
-[
-  {
-    "path": "/*",
-    "resourceSizes": [
-      { "resourceType": "script", "budget": 500 },
-      { "resourceType": "stylesheet", "budget": 100 },
-      { "resourceType": "total", "budget": 1000 }
-    ],
-    "resourceCounts": [{ "resourceType": "third-party", "budget": 10 }],
-    "timings": [
-      { "metric": "first-contentful-paint", "budget": 2000 },
-      { "metric": "interactive", "budget": 5000 },
-      { "metric": "largest-contentful-paint", "budget": 3000 },
-      { "metric": "cumulative-layout-shift", "budget": 0.1 }
-    ]
-  }
-]

package/templates/lighthouserc.json

@@ -1,23 +0,0 @@
-{
-  "ci": {
-    "collect": {
-      "staticDistDir": "./dist",
-      "numberOfRuns": 3,
-      "settings": {
-        "preset": "desktop",
-        "budgetPath": "./lighthouse-budget.json"
-      }
-    },
-    "assert": {
-      "assertions": {
-        "categories:performance": ["warn", { "minScore": 0.9 }],
-        "categories:accessibility": ["warn", { "minScore": 0.9 }],
-        "categories:best-practices": ["warn", { "minScore": 0.9 }],
-        "categories:seo": ["warn", { "minScore": 0.9 }]
-      }
-    },
-    "upload": {
-      "target": "temporary-public-storage"
-    }
-  }
-}