Turbopack: Log build progress in development like webpack does (#54806)

This adds logging to indicate build progress while using Turbopack in the same format that webpack uses. It uses the same store object and sets state to log messages like so:

```
- wait compiling /page (client and server)...
- event compiled client and server successfully in 1366 ms
```

Given:

- An app router page `/`, `compiling /page` is logged
- An app router page `/bar`, `compiling /bar/page` is logged
- An app router route `/api/bar`, `compiling /api/bar/route` is logged
- A page router page `/foo`, `compiling /foo` is logged
- A page router api route `/api/foo`, `compiling /api/foo` is logged


Closes WEB-1476

packages/next/src/server/lib/router-utils/setup-dev.ts

@@ -47,6 +47,7 @@ import { normalizePathSep } from '../../../shared/lib/page-path/normalize-path-s
 import { createClientRouterFilter } from '../../../lib/create-client-router-filter'
 import { absolutePathToPage } from '../../../shared/lib/page-path/absolute-path-to-page'
 import { generateInterceptionRoutesRewrites } from '../../../lib/generate-interception-routes-rewrites'
+import { OutputState, store as consoleStore } from '../../../build/output/store'
 
 import {
   APP_BUILD_MANIFEST,
@@ -336,6 +337,8 @@ async function startWatcher(opts: SetupOpts) {
       )
     }
 
+    const buildingReported = new Set<string>()
+
     async function changeSubscription(
       page: string,
       endpoint: Endpoint | undefined,
@@ -744,13 +747,13 @@ async function startWatcher(opts: SetupOpts) {
                 break
               }
 
+              case 'span-end':
               case 'client-error': // { errorCount, clientId }
               case 'client-warning': // { warningCount, clientId }
               case 'client-success': // { clientId }
               case 'server-component-reload-page': // { clientId }
               case 'client-reload-page': // { clientId }
               case 'client-full-reload': // { stackTrace, hadRuntimeError }
-              case 'span-end': // { startTime, endTime, spanName, attributes }
                 // TODO
                 break
 
@@ -772,9 +775,10 @@ async function startWatcher(opts: SetupOpts) {
                 break
 
               default:
-                // Might have been a Next.js message...
                 if (!parsedData.event) {
-                  throw new Error(`unrecognized Turbopack message "${data}"`)
+                  throw new Error(
+                    `unrecognized Turbopack HMR message "${data}"`
+                  )
                 }
             }
           })
@@ -861,6 +865,35 @@ async function startWatcher(opts: SetupOpts) {
           throw new PageNotFoundError(`route not found ${page}`)
         }
 
+        if (!buildingReported.has(page)) {
+          buildingReported.add(page)
+          let suffix
+          switch (route.type) {
+            case 'app-page':
+              suffix = 'page'
+              break
+            case 'app-route':
+              suffix = 'route'
+              break
+            case 'page':
+            case 'page-api':
+              suffix = ''
+              break
+            default:
+              throw new Error('Unexpected route type ' + route.type)
+          }
+
+          consoleStore.setState(
+            {
+              loading: true,
+              trigger: `${page}${
+                !page.endsWith('/') && suffix.length > 0 ? '/' : ''
+              }${suffix} (client and server)`,
+            } as OutputState,
+            true
+          )
+        }
+
         switch (route.type) {
           case 'page': {
             if (isApp) {
@@ -870,13 +903,15 @@ async function startWatcher(opts: SetupOpts) {
             }
 
             await processResult('_app', await globalEntries.app?.writeToDisk())
+
             await loadBuildManifest('_app')
             await loadPagesManifest('_app')
 
             await processResult(
               '_document',
               await globalEntries.document?.writeToDisk()
             )
+
             changeSubscription('_document', globalEntries?.document, () => {
               return { action: 'reloadPage' }
             })
@@ -886,7 +921,8 @@ async function startWatcher(opts: SetupOpts) {
               page,
               await route.htmlEndpoint.writeToDisk()
             )
-            changeSubscription(page, route.dataEndpoint, (pageName, change) => {
+
+            changeSubscription(page, route.htmlEndpoint, (pageName, change) => {
               switch (change) {
                 case ServerClientChangeType.Server:
                 case ServerClientChangeType.Both:
@@ -939,7 +975,8 @@ async function startWatcher(opts: SetupOpts) {
           }
           case 'app-page': {
             await processResult(page, await route.htmlEndpoint.writeToDisk())
-            changeSubscription(page, route.rscEndpoint, (_page, change) => {
+
+            changeSubscription(page, route.htmlEndpoint, (_page, change) => {
               switch (change) {
                 case ServerClientChangeType.Server:
                 case ServerClientChangeType.Both:
@@ -984,6 +1021,14 @@ async function startWatcher(opts: SetupOpts) {
             throw new Error(`unknown route type ${route.type} for ${page}`)
           }
         }
+
+        consoleStore.setState(
+          {
+            loading: false,
+            partial: 'client and server',
+          } as OutputState,
+          true
+        )
       },
     }