SPA Tests

.github/frameworks.json

@@ -30,7 +30,7 @@
       "package": "app-astro",
       "buildScript": "build",
       "buildOutputDir": "dist",
-      "measurements": [{ "type": "ssr" }]
+      "measurements": [{ "type": "ssr" }, { "type": "spa" }]
     }
   },
   {
@@ -74,7 +74,7 @@
       "package": "app-next-js",
       "buildScript": "build",
       "buildOutputDir": ".next",
-      "measurements": [{ "type": "ssr" }]
+      "measurements": [{ "type": "ssr" }, { "type": "spa" }]
     }
   },
   {
@@ -96,7 +96,7 @@
       "package": "app-nuxt",
       "buildScript": "build",
       "buildOutputDir": ".output",
-      "measurements": [{ "type": "ssr" }]
+      "measurements": [{ "type": "ssr" }, { "type": "spa" }]
     }
   },
   {
@@ -118,7 +118,7 @@
       "package": "app-react-router",
       "buildScript": "build",
       "buildOutputDir": "build",
-      "measurements": [{ "type": "ssr" }]
+      "measurements": [{ "type": "ssr" }, { "type": "spa" }]
     }
   },
   {
@@ -140,7 +140,7 @@
       "package": "app-solid-start",
       "buildScript": "build",
       "buildOutputDir": ".output",
-      "measurements": [{ "type": "ssr" }]
+      "measurements": [{ "type": "ssr" }, { "type": "spa" }]
     }
   },
   {
@@ -162,7 +162,7 @@
       "package": "app-sveltekit",
       "buildScript": "build",
       "buildOutputDir": "build",
-      "measurements": [{ "type": "ssr" }]
+      "measurements": [{ "type": "ssr" }, { "type": "spa" }]
     }
   },
   {
@@ -184,7 +184,7 @@
       "package": "app-tanstack-start-react",
       "buildScript": "build",
       "buildOutputDir": ".output",
-      "measurements": [{ "type": "ssr" }]
+      "measurements": [{ "type": "ssr" }, { "type": "spa" }]
     }
   }
 ]

.github/workflows/generate-stats.yml

@@ -26,6 +26,7 @@ jobs:
       build-matrix: ${{ steps.set-matrix.outputs.build }}
       ssr-matrix: ${{ steps.set-matrix.outputs.ssr }}
       deps-matrix: ${{ steps.set-matrix.outputs.deps }}
+      spa-matrix: ${{ steps.set-matrix.outputs.spa }}
     steps:
       - name: Checkout code
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
@@ -38,6 +39,7 @@ jobs:
           echo "build=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.starter) | select(.starter.measurements | map(.type) | contains(["build"])) | {name, displayName, package: .starter.package, buildScript: .starter.buildScript, buildOutputDir: .starter.buildOutputDir, measurements: .starter.measurements}]')" >> $GITHUB_OUTPUT
           echo "ssr=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.app) | select(.app.measurements | map(.type) | contains(["ssr"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
           echo "deps=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.starter) | select(.starter.measurements | map(.type) | contains(["dependencies"])) | {name, displayName, package: .starter.package}]')" >> $GITHUB_OUTPUT
+          echo "spa=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.app) | select(.app.measurements | map(.type) | contains(["spa"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
 
   measure:
     needs: setup
@@ -47,6 +49,7 @@ jobs:
       build-matrix: ${{ needs.setup.outputs.build-matrix }}
       ssr-matrix: ${{ needs.setup.outputs.ssr-matrix }}
       deps-matrix: ${{ needs.setup.outputs.deps-matrix }}
+      spa-matrix: ${{ needs.setup.outputs.spa-matrix }}
 
   generate-stats:
     needs: [setup, measure]

.github/workflows/measure-framework.yml

@@ -20,6 +20,11 @@ on:
         type: string
         required: false
         default: '[]'
+      spa-matrix:
+        description: 'JSON array of frameworks to measure SPA paint and interaction performance'
+        type: string
+        required: false
+        default: '[]'
 
 jobs:
   measure-install:
@@ -187,3 +192,54 @@ jobs:
           path: packages/${{ matrix.framework.package }}/e18e-stats.json
           retention-days: 1
           if-no-files-found: error
+
+  measure-spa:
+    if: inputs.spa-matrix != '[]'
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.49.0-noble
+      options: --ipc=host
+    strategy:
+      fail-fast: false
+      matrix:
+        framework: ${{ fromJson(inputs.spa-matrix) }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install workspace dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install package dependencies
+        working-directory: ./packages/${{ matrix.framework.package }}
+        run: pnpm install --frozen-lockfile --ignore-workspace
+
+      - name: Build app
+        working-directory: ./packages/${{ matrix.framework.package }}
+        run: pnpm build
+        env:
+          BUILD_MODE: spa
+
+      - name: Run SPA benchmark
+        run: pnpm --filter @framework-tracker/stats-generator run:spa ${{ matrix.framework.package }}
+        env:
+          PLAYWRIGHT_BROWSERS_PATH: /ms-playwright
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+          RUNNER_LABEL: ubuntu-latest
+
+      - name: Upload SPA stats
+        uses: actions/upload-artifact@v4
+        with:
+          name: spa-stats-${{ matrix.framework.name }}
+          path: packages/${{ matrix.framework.package }}/spa-stats.json
+          retention-days: 1
+          if-no-files-found: error

Dockerfile

@@ -21,3 +21,10 @@ CMD [ "node", "src/lcp/index.ts" ]
 # LCP Stats
 FROM cwv-stats-base AS cwv-stats-lcp
 CMD [ "node", "src/lcp/index.ts" ]
+
+FROM mcr.microsoft.com/playwright:v1.49.0-noble AS spa-benchmark
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm
+ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

package.json

@@ -21,6 +21,7 @@
     "type-check:all": "pnpm type-check && for pkg in packages/starter-* packages/app-*; do (cd \"$pkg\" && pnpm run --if-present type-check); done",
     "install:all": "for pkg in packages/starter-* packages/app-*; do (cd \"$pkg\" && pnpm install --ignore-workspace); done",
     "install:all:frozen": "for pkg in packages/starter-* packages/app-*; do (cd \"$pkg\" && pnpm install --frozen-lockfile --ignore-workspace); done",
+    "build:apps": "for pkg in packages/app-*; do echo \"Building $pkg...\" && (cd \"$pkg\" && pnpm build) || exit 1; done",
     "check:all": "pnpm install:all && pnpm format:check && pnpm lint:all && pnpm type-check:all",
     "check:all:ci": "pnpm install:all:frozen && pnpm format:check && pnpm lint:all && pnpm type-check:all"
   },

packages/app-astro/astro.config.mjs

@@ -1,9 +1,11 @@
 import { defineConfig } from 'astro/config'
 import node from '@astrojs/node'
+import react from '@astrojs/react'
 
 export default defineConfig({
   output: 'server',
   adapter: node({
     mode: 'middleware',
   }),
+  integrations: [react()],
 })

packages/app-astro/package.json

@@ -10,11 +10,15 @@
     "astro": "astro",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "type-check": "astro check"
+    "type-check": "astro check",
+    "serve": "node serve.mjs"
   },
   "dependencies": {
     "@astrojs/node": "9.5.2",
-    "astro": "5.16.15"
+    "@astrojs/react": "4.3.0",
+    "astro": "5.16.15",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",