fix(betterer 🐛): improve reporter implementation (#775)

phenomnomnominal · Jun 20, 2021 · c723c6e · c723c6e
1 parent ed18d76
commit c723c6e
Show file tree

Hide file tree

Showing 23 changed files with 227 additions and 325 deletions.
diff --git a/packages/cli/src/init/init.tsx b/packages/cli/src/init/init.tsx
@@ -1,7 +1,7 @@
-import { BettererTasksLogger, BettererTasksState } from '@betterer/tasks';
+import { BettererTaskLogger, BettererTasksLogger, BettererTasksState } from '@betterer/tasks';
 import { workerRequire, WorkerModule } from '@phenomnomnominal/worker-require';
 import * as path from 'path';
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 const createTestFile = workerRequire<WorkerModule<typeof import('./create-test-file')>>('./create-test-file');
 const updatePackageJSON = workerRequire<WorkerModule<typeof import('./update-package-json')>>('./update-package-json');
@@ -13,27 +13,26 @@ export type InitProps = {
 };
 
 export const Init: FC<InitProps> = function Init({ cwd, config, ts }) {
+  const runCreateTestFile = useCallback(
+    async (logger) => {
+      await createTestFile.run(logger, path.resolve(cwd, config), ts);
+      createTestFile.destroy();
+    },
+    [createTestFile, cwd, config, ts]
+  );
+  const runUpdagePackageJSON = useCallback(
+    async (logger) => {
+      await updatePackageJSON.run(logger, cwd, ts);
+      updatePackageJSON.destroy();
+    },
+    [updatePackageJSON, cwd, config, ts]
+  );
+
   return (
-    <BettererTasksLogger
-      name="Initialising Betterer"
-      update={update}
-      tasks={[
-        {
-          name: 'Create test file',
-          run: async (logger) => {
-            await createTestFile.run(logger, path.resolve(cwd, config), ts);
-            createTestFile.destroy();
-          }
-        },
-        {
-          name: 'Update package.json',
-          run: async (logger) => {
-            await updatePackageJSON.run(logger, cwd, ts);
-            updatePackageJSON.destroy();
-          }
-        }
-      ]}
-    />
+    <BettererTasksLogger name="Initialising Betterer" update={update}>
+      <BettererTaskLogger name="Create test file" run={runCreateTestFile}></BettererTaskLogger>
+      <BettererTaskLogger name="Update package.json" run={runUpdagePackageJSON}></BettererTaskLogger>
+    </BettererTasksLogger>
   );
 };
 

diff --git a/packages/reporter/src/components/default/DefaultEnding.tsx b/packages/reporter/src/components/default/DefaultEnding.tsx
diff --git a/packages/reporter/src/components/default/DefaultReporter.tsx b/packages/reporter/src/components/default/DefaultReporter.tsx
@@ -2,8 +2,7 @@ import React, { FC, memo } from 'react';
 
 import { BettererContext, BettererRuns, BettererSummary } from '@betterer/betterer';
 
-import { DefaultEnding } from './DefaultEnding';
-import { DefaultRunning } from './DefaultRunning';
+import { Runs, RunSummary } from '../runs';
 
 export type DefaultReporterProps = {
   context: BettererContext;
@@ -14,11 +13,10 @@ export type DefaultReporterProps = {
 export const DefaultReporter: FC<DefaultReporterProps> = memo(function DefaultReporter(props: DefaultReporterProps) {
   const { context, runs, summary } = props;
 
-  if (runs && !summary) {
-    return <DefaultRunning runs={runs} />;
-  }
-  if (runs && summary) {
-    return <DefaultEnding context={context} runs={runs} summary={summary} />;
-  }
-  return null;
+  return (
+    <>
+      {runs && <Runs runs={runs} />}
+      {summary && <RunSummary context={context} summary={summary} />}
+    </>
+  );
 });
diff --git a/packages/reporter/src/components/default/DefaultRunning.tsx b/packages/reporter/src/components/default/DefaultRunning.tsx
diff --git a/packages/reporter/src/components/runs/Runs.tsx b/packages/reporter/src/components/runs/Runs.tsx
@@ -1,10 +1,10 @@
 import React, { FC, memo } from 'react';
 
 import { BettererRuns } from '@betterer/betterer';
-import { BettererTasksLogger, BettererTasksState } from '@betterer/tasks';
+import { BettererTaskLogger, BettererTasksLogger, BettererTasksState } from '@betterer/tasks';
 import { Box } from 'ink';
 
-import { getTasks } from './tasks';
+import { useTask } from './tasks';
 
 export type RunsProps = {
   runs: BettererRuns;
@@ -13,7 +13,11 @@ export type RunsProps = {
 export const Runs: FC<RunsProps> = memo(function Runs({ runs }) {
   return (
     <Box flexDirection="column" paddingBottom={1}>
-      <BettererTasksLogger name="Betterer" update={update} tasks={getTasks(runs)} exit={false} />
+      <BettererTasksLogger name="Betterer" update={update} exit={false}>
+        {runs.map((run) => (
+          <BettererTaskLogger key={run.name} name={run.name} run={useTask(run)}></BettererTaskLogger>
+        ))}
+      </BettererTasksLogger>
     </Box>
   );
 });

diff --git a/packages/reporter/src/components/runs/tasks.ts b/packages/reporter/src/components/runs/tasks.ts
@@ -1,7 +1,7 @@
-import { BettererRuns } from '@betterer/betterer';
+import { BettererRun } from '@betterer/betterer';
 import { BettererError } from '@betterer/errors';
 import { BettererLogger } from '@betterer/logger';
-import { BettererTasks } from '@betterer/tasks';
+import { BettererTaskRun, getTask } from '@betterer/tasks';
 
 import {
   testBetter,
@@ -18,55 +18,50 @@ import {
 import { quote } from '../../utils';
 import { getDelta } from './deltas';
 
-const TASK_RUNNER_CACHE = new Map<BettererRuns, BettererTasks>();
+export function useTask(run: BettererRun): BettererTaskRun {
+  const task = getTask(run.name);
+  return (
+    task ||
+    (async (logger: BettererLogger) => {
+      const name = quote(run.name);
+      await logger.progress(testRunning(name));
 
-export function getTasks(runs: BettererRuns): BettererTasks {
-  if (!TASK_RUNNER_CACHE.has(runs)) {
-    TASK_RUNNER_CACHE.set(
-      runs,
-      runs.map((run) => ({
-        name: run.name,
-        run: async (logger: BettererLogger) => {
-          const name = quote(run.name);
-          if (run.isExpired) {
-            await logger.warn(testExpired(name));
-          }
-          await logger.progress(testRunning(name));
+      await run.lifecycle;
+      const runSummary = run;
 
-          await run.lifecycle;
+      if (runSummary.isExpired) {
+        await logger.warn(testExpired(name));
+      }
 
-          const delta = getDelta(run);
+      const delta = getDelta(runSummary);
 
-          if (run.isComplete) {
-            return testComplete(name, run.isNew);
-          }
-          if (run.isBetter) {
-            return testBetter(name, delta);
-          }
-          if (run.isFailed) {
-            throw new BettererError(testFailed(name));
-          }
-          if (run.isNew) {
-            return testNew(name, delta);
-          }
-          if (run.isSkipped) {
-            return testSkipped(name, delta);
-          }
-          if (run.isSame) {
-            return testSame(name, delta);
-          }
-          if (run.isUpdated) {
-            await run.diff.log(logger);
-            return testUpdated(name, delta);
-          }
-          if (run.isWorse) {
-            await run.diff.log(logger);
-            throw new BettererError(testWorse(name, delta));
-          }
-          return;
-        }
-      }))
-    );
-  }
-  return TASK_RUNNER_CACHE.get(runs) as BettererTasks;
+      if (runSummary.isComplete) {
+        return testComplete(name, runSummary.isNew);
+      }
+      if (runSummary.isBetter) {
+        return testBetter(name, delta);
+      }
+      if (runSummary.isFailed) {
+        throw new BettererError(testFailed(name));
+      }
+      if (runSummary.isNew) {
+        return testNew(name, delta);
+      }
+      if (runSummary.isSkipped) {
+        return testSkipped(name, delta);
+      }
+      if (runSummary.isSame) {
+        return testSame(name, delta);
+      }
+      if (runSummary.isUpdated) {
+        await runSummary.diff.log(logger);
+        return testUpdated(name, delta);
+      }
+      if (runSummary.isWorse) {
+        await runSummary.diff.log(logger);
+        throw new BettererError(testWorse(name, delta));
+      }
+      return;
+    })
+  );
 }
diff --git a/...ter/src/components/watch/WatchRunning.tsx → ...orter/src/components/watch/WatchFiles.tsx b/...ter/src/components/watch/WatchRunning.tsx → ...orter/src/components/watch/WatchFiles.tsx
@@ -1,31 +1,28 @@
 import React, { FC, memo } from 'react';
 
-import { BettererContext, BettererFilePaths, BettererRuns } from '@betterer/betterer';
+import { BettererContext, BettererFilePaths } from '@betterer/betterer';
 import { Box, Text } from 'ink';
 
-import { filesChecking } from '../../messages';
+import { filesChecked, filesChecking } from '../../messages';
 import { Config, ConfigEditField } from '../config';
-import { Runs } from '../runs';
 
-import { WatchInstructions } from './WatchInstructions';
-
-export type WatchRunningProps = {
+export type WatchFilesProps = {
   context: BettererContext;
   editField: ConfigEditField;
   filePaths: BettererFilePaths;
-  runs: BettererRuns;
+  running: boolean;
 };
 
-export const WatchRunning: FC<WatchRunningProps> = memo(function WatchRunning(props) {
-  const { context, editField, filePaths, runs } = props;
+export const WatchFiles: FC<WatchFilesProps> = memo(function WatchFiles(props) {
+  const { context, editField, filePaths, running } = props;
 
   return (
     <>
       <Config context={context} editField={editField} />
       {filePaths.length ? (
         <>
           <Box paddingBottom={1}>
-            <Text>{filesChecking(filePaths.length)}</Text>
+            <Text>{running ? filesChecking(filePaths.length) : filesChecked(filePaths.length)}</Text>
           </Box>
           <Box flexDirection="column" paddingBottom={1}>
             {filePaths.map((filePath) => (
@@ -34,8 +31,6 @@ export const WatchRunning: FC<WatchRunningProps> = memo(function WatchRunning(pr
           </Box>
         </>
       ) : null}
-      <Runs runs={runs} />
-      <WatchInstructions />
     </>
   );
 });
diff --git a/packages/reporter/src/components/watch/WatchReporter.tsx b/packages/reporter/src/components/watch/WatchReporter.tsx
@@ -11,11 +11,12 @@ import { useApp, useInput, useStdin } from 'ink';
 
 import { BettererReporterApp } from '../../types';
 import { ConfigEditField } from '../config';
+import { Runs, RunSummary } from '../runs';
 
 import { WatchEnding } from './WatchEnding';
-import { WatchRunning } from './WatchRunning';
+import { WatchFiles } from './WatchFiles';
+import { WatchInstructions } from './WatchInstructions';
 import { WatchStarting } from './WatchStarting';
-import { WatchWatching } from './WatchWatching';
 
 export type WatchReporterProps = {
   context: BettererContext;
@@ -68,15 +69,19 @@ export const WatchReporter: FC<WatchReporterProps> = memo(function WatchReporter
 
   if (summaries) {
     return <WatchEnding />;
-  } else if (runs && summary) {
+  }
+  if (runs) {
+    const running = !summary;
     return (
-      <WatchWatching context={context} editField={editField} filePaths={filePaths} runs={runs} summary={summary} />
+      <>
+        <WatchFiles context={context} editField={editField} filePaths={filePaths} running={running} />
+        <Runs runs={runs} />
+        {summary && <RunSummary context={context} summary={summary} />}
+        <WatchInstructions />
+      </>
     );
-  } else if (runs) {
-    return <WatchRunning context={context} editField={editField} filePaths={filePaths} runs={runs} />;
-  } else {
-    return <WatchStarting context={context} editField={editField} />;
   }
+  return <WatchStarting context={context} editField={editField} />;
 });
 
 function quit(app: BettererReporterApp): void {

diff --git a/packages/reporter/src/components/watch/WatchStarting.tsx b/packages/reporter/src/components/watch/WatchStarting.tsx
@@ -15,7 +15,7 @@ export type WatchStartingProps = {
 export const WatchStarting: FC<WatchStartingProps> = memo(function WatchStarting(props) {
   const { context, editField } = props;
   return (
-    <Box flexDirection="column" paddingBottom={1}>
+    <Box flexDirection="column">
       <Config context={context} editField={editField} />
       <Box paddingBottom={1}>
         <Text>{watchStart()}</Text>

diff --git a/packages/reporter/src/components/watch/WatchWatching.tsx b/packages/reporter/src/components/watch/WatchWatching.tsx