👍🏼 improve(patch): prevent duplicate dashboard renders (#2422)

This actually sidesteps up an upstream issue with ink by rendering each compilation using the `Static` component. Better ensures only one render per compilation in multi-compiler builds where the total rows rendered exceeds stdout rows. Simplifies some of the unit tests using `matchInlineSnapshot` ## Type of change **PATCH: backwards compatible change**
roots · Aug 24, 2023 · 189de01 · 189de01
1 parent 82c92ec
commit 189de01
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 164 deletions.
diff --git a/sources/@roots/bud-dashboard/src/application.tsx b/sources/@roots/bud-dashboard/src/application.tsx
@@ -10,10 +10,12 @@ import Server from '@roots/bud-dashboard/views/server'
 import {
   Box,
   type PropsWithChildren,
+  Static,
   Text,
   useApp,
   useInput,
   useState,
+  useStdout,
 } from '@roots/bud-support/ink'
 
 export interface Props {
@@ -57,6 +59,8 @@ export const Application = ({
   publicProxyUrl,
   status,
 }: Props) => {
+  const {stdout}  = useStdout()
+
   if (error) return <Error error={error} />
 
   compilations = Array.isArray(compilations)
@@ -72,37 +76,43 @@ export const Application = ({
   }
 
   return (
-    <Box flexDirection="column" gap={1} marginY={1}>
-      {compilations?.map((compilation, id) => {
-        if (isolated > 0 && id + 1 !== isolated) return null
-
-        return (
-          <Box flexDirection="column" gap={1} key={id}>
-            <Compilation
-              basedir={basedir}
-              compact={compact}
-              compilation={compilation}
-              debug={debug}
-              displayAssets={displayAssets}
-              displayEntrypoints={displayEntrypoints}
-              id={id + 1}
-              total={compilations?.length}
+    <Static items={[0]}>
+      {(item, id) => (
+        <Box key={`app-${id}`} width={stdout.columns - 2}>
+          <Box flexDirection="column" gap={1}>
+            {compilations?.map((compilation, id) => {
+              if (isolated > 0 && id + 1 !== isolated) return null
+
+              return (
+                <Box flexDirection="column" gap={1} key={id}>
+                  <Compilation
+                    basedir={basedir}
+                    compact={compact}
+                    compilation={compilation}
+                    debug={debug}
+                    displayAssets={displayAssets}
+                    displayEntrypoints={displayEntrypoints}
+                    id={id + 1}
+                    total={compilations?.length}
+                  />
+                  <Debug compilation={compilation} debug={debug} />
+                </Box>
+              )
+            })}
+
+            <Server
+              devUrl={devUrl}
+              displayServerInfo={displayServerInfo}
+              mode={mode}
+              proxy={proxy}
+              proxyUrl={proxyUrl}
+              publicDevUrl={publicDevUrl}
+              publicProxyUrl={publicProxyUrl}
             />
-            <Debug compilation={compilation} debug={debug} />
           </Box>
-        )
-      })}
-
-      <Server
-        devUrl={devUrl}
-        displayServerInfo={displayServerInfo}
-        mode={mode}
-        proxy={proxy}
-        proxyUrl={proxyUrl}
-        publicDevUrl={publicDevUrl}
-        publicProxyUrl={publicProxyUrl}
-      />
-    </Box>
+        </Box>
+      )}
+    </Static>
   )
 }