Paint earlier in dev command (#486)

FredKSchott · Jun 12, 2020 · a4111a4 · a4111a4
1 parent 352a363
commit a4111a4
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 58 deletions.
diff --git a/src/commands/dev.ts b/src/commands/dev.ts
@@ -200,6 +200,57 @@ export async function command(commandOptions: CommandOptions) {
   const messageBus = new EventEmitter();
   const mountedDirectories: [string, string][] = [];
 
+  onProcessExit(() => {
+    hmrEngine.disconnectAllClients();
+  });
+
+  console.log = (...args) => {
+    messageBus.emit('CONSOLE', {level: 'log', args});
+  };
+  console.warn = (...args) => {
+    messageBus.emit('CONSOLE', {level: 'warn', args});
+  };
+  console.error = (...args) => {
+    messageBus.emit('CONSOLE', {level: 'error', args});
+  };
+
+  // Start painting immediately, so we can surface errors & warnings to the
+  // user, and they can watch the server starting up. Search for ”SERVER_START”
+  // for the actual start event below.
+  paint(messageBus, config.scripts, undefined, {
+    addPackage: async (pkgName: string) => {
+      isLiveReloadPaused = true;
+      messageBus.emit('INSTALLING');
+      currentlyRunningCommand = execa(
+        isYarn(cwd) ? 'yarn' : 'npm',
+        isYarn(cwd) ? ['add', pkgName] : ['install', '--save', pkgName],
+        {
+          env: npmRunPath.env(),
+          extendEnv: true,
+          shell: true,
+          cwd,
+        },
+      );
+      currentlyRunningCommand.stdout.on('data', (data) => process.stdout.write(data));
+      currentlyRunningCommand.stderr.on('data', (data) => process.stderr.write(data));
+      await currentlyRunningCommand;
+      currentlyRunningCommand = installCommand(commandOptions);
+      await currentlyRunningCommand;
+      await updateLockfileHash(DEV_DEPENDENCIES_DIR);
+      await cacache.rm.all(BUILD_CACHE);
+      inMemoryBuildCache.clear();
+      currentlyRunningCommand = null;
+
+      dependencyImportMap = JSON.parse(
+        await fs
+          .readFile(dependencyImportMapLoc, {encoding: 'utf-8'})
+          .catch(() => `{"imports": {}}`),
+      );
+      messageBus.emit('INSTALL_COMPLETE');
+      isLiveReloadPaused = false;
+    },
+  });
+
   // Set the proper install options, in case an install is needed.
   commandOptions.config.installOptions.dest = DEV_DEPENDENCIES_DIR;
   commandOptions.config.installOptions.env.NODE_ENV = process.env.NODE_ENV || 'development';
@@ -877,63 +928,17 @@ export async function command(commandOptions: CommandOptions) {
     }
   }
 
-  onProcessExit(() => {
-    hmrEngine.disconnectAllClients();
-  });
-
-  console.log = (...args) => {
-    messageBus.emit('CONSOLE', {level: 'log', args});
-  };
-  console.warn = (...args) => {
-    messageBus.emit('CONSOLE', {level: 'warn', args});
-  };
-  console.error = (...args) => {
-    messageBus.emit('CONSOLE', {level: 'error', args});
-  };
-
+  // Announce server has started
   const ips = Object.values(os.networkInterfaces())
     .reduce((every: os.NetworkInterfaceInfo[], i) => [...every, ...(i || [])], [])
     .filter((i) => i.family === 'IPv4' && i.internal === false)
     .map((i) => i.address);
-
   const protocol = config.devOptions.secure ? 'https:' : 'http:';
-
-  paint(messageBus, config.scripts, undefined, {
+  messageBus.emit('SERVER_START', {
     protocol,
     port,
     ips,
     startTimeMs: Date.now() - serverStart,
-    addPackage: async (pkgName) => {
-      isLiveReloadPaused = true;
-      messageBus.emit('INSTALLING');
-      currentlyRunningCommand = execa(
-        isYarn(cwd) ? 'yarn' : 'npm',
-        isYarn(cwd) ? ['add', pkgName] : ['install', '--save', pkgName],
-        {
-          env: npmRunPath.env(),
-          extendEnv: true,
-          shell: true,
-          cwd,
-        },
-      );
-      currentlyRunningCommand.stdout.on('data', (data) => process.stdout.write(data));
-      currentlyRunningCommand.stderr.on('data', (data) => process.stderr.write(data));
-      await currentlyRunningCommand;
-      currentlyRunningCommand = installCommand(commandOptions);
-      await currentlyRunningCommand;
-      await updateLockfileHash(DEV_DEPENDENCIES_DIR);
-      await cacache.rm.all(BUILD_CACHE);
-      inMemoryBuildCache.clear();
-      currentlyRunningCommand = null;
-
-      dependencyImportMap = JSON.parse(
-        await fs
-          .readFile(dependencyImportMapLoc, {encoding: 'utf-8'})
-          .catch(() => `{"imports": {}}`),
-      );
-      messageBus.emit('INSTALL_COMPLETE');
-      isLiveReloadPaused = false;
-    },
   });
 
   // Open the user's browser

diff --git a/src/commands/paint.ts b/src/commands/paint.ts
@@ -73,14 +73,14 @@ export function paint(
   buildMode: {dest: string} | undefined,
   devMode:
     | {
-        protocol: string;
-        port: number;
-        ips: string[];
-        startTimeMs: number;
         addPackage: (pkgName: string) => void;
       }
     | undefined,
 ) {
+  let port: number;
+  let protocol = '';
+  let startTimeMs: number;
+  let ips: string[] = [];
   let consoleOutput = '';
   let installOutput = '';
   let isInstalling = false;
@@ -97,15 +97,25 @@ export function paint(
     process.stdout.write(`${chalk.bold('Snowpack')}\n\n`);
     // Dashboard
     if (devMode) {
-      process.stdout.write(
-        `  ${chalk.bold.cyan(`${devMode.protocol}//localhost:${devMode.port}`)}`,
-      );
-      for (const ip of devMode.ips) {
+      const isServerStarted = startTimeMs > 0 && port > 0 && protocol;
+      if (isServerStarted) {
+        process.stdout.write(`  ${chalk.bold.cyan(`${protocol}//localhost:${port}`)}`);
+        for (const ip of ips) {
+          process.stdout.write(
+            `${chalk.cyan(` > `)}${chalk.bold.cyan(`${protocol}//${ip}:${port}`)}`,
+          );
+        }
         process.stdout.write(
-          `${chalk.cyan(` > `)}${chalk.bold.cyan(`${devMode.protocol}//${ip}:${devMode.port}`)}`,
+          '\n' +
+            chalk.dim(
+              startTimeMs < 1000
+                ? `  Server started in ${startTimeMs}ms.\n\n`
+                : `  Server started.`, // Not to hide slow startup times, but likely there were extraneous factors (prompts, etc.) where the speed isn’t accurate
+            ),
         );
+      } else {
+        process.stdout.write(chalk.dim(`  Server starting…`) + '\n\n');
       }
-      process.stdout.write('\n' + chalk.dim(`  Server started in ${devMode.startTimeMs}ms.\n\n`));
     }
     if (buildMode) {
       process.stdout.write('  ' + chalk.bold.cyan(buildMode.dest));
@@ -276,6 +286,13 @@ export function paint(
     }
     repaint();
   });
+  bus.on('SERVER_START', (info) => {
+    startTimeMs = info.startTimeMs;
+    port = info.port;
+    protocol = info.protocol;
+    ips = info.ips;
+    repaint();
+  });
 
   if (devMode) {
     readline.emitKeypressEvents(process.stdin);