feat: fine-tune spinners and dim

Author: swashata

examples/plugin/src/app/index.css

@@ -3,6 +3,6 @@ body {
 }
 
 .site-title a {
-	color: cyan !important;
-	background-color: white !important;
+	color: slategray !important;
+	background-color: cornsilk !important;
 }

packages/scripts/package.json

@@ -30,6 +30,7 @@
     "@types/log-symbols": "^2.0.0",
     "@types/node": "^10.11.3",
     "@types/ora": "^1.3.4",
+    "@types/update-notifier": "^2.2.0",
     "@types/webpack": "^4.4.13",
     "@types/webpack-assets-manifest": "^3.0.0",
     "@types/webpack-dev-middleware": "^2.0.2",
@@ -60,6 +61,7 @@
     "slugify": "^1.3.1",
     "style-loader": "^0.23.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
+    "update-notifier": "^2.5.0",
     "webpack": "^4.20.2",
     "webpack-assets-manifest": "^3.1.0",
     "webpack-dev-middleware": "^3.4.0",

packages/scripts/src/bin/build.ts

@@ -3,8 +3,8 @@ import logSymbols from 'log-symbols';
 import ora from 'ora';
 import path from 'path';
 import PrettyError from 'pretty-error';
+import { getProjectAndServerConfig } from '../config/getProjectAndServerConfig';
 import { Build } from '../scripts/Build';
-import { getProjectAndServerConfig } from './getProjectAndServerConfig';
 import { ProgramOptions } from './index';
 import {
 	endBuildInfo,

packages/scripts/src/bin/index.ts

@@ -3,6 +3,7 @@ import chalk from 'chalk';
 import program from 'commander';
 import path from 'path';
 import clearConsole from 'react-dev-utils/clearConsole';
+import updateNotifier from 'update-notifier';
 import { build } from './build';
 import { serve } from './serve';
 import { contextHelp, printIntro } from './utils';
@@ -16,9 +17,13 @@ export interface ProgramOptions {
 let isValidCommand = false;
 
 /* tslint:disable:no-require-imports no-var-requires non-literal-require */
-const pkg = require(path.resolve(__dirname, '../../package.json')) as {
-	version: string;
-};
+const pkg = require(path.resolve(
+	__dirname,
+	'../../package.json'
+)) as updateNotifier.Package;
+
+// Notify for updates
+updateNotifier({ pkg }).notify();
 
 // Declare version and stuff
 program

packages/scripts/src/bin/serve.ts

@@ -4,8 +4,8 @@ import ora from 'ora';
 import path from 'path';
 import PrettyError from 'pretty-error';
 import clearConsole from 'react-dev-utils/clearConsole';
+import { getProjectAndServerConfig } from '../config/getProjectAndServerConfig';
 import { Server } from '../scripts/Server';
-import { getProjectAndServerConfig } from './getProjectAndServerConfig';
 import { ProgramOptions } from './index';
 import {
 	endServeInfo,
@@ -82,7 +82,7 @@ export function serve(options: ProgramOptions | undefined): void {
 				spinner.start('compiling...');
 				spinner.stopAndPersist({
 					symbol: logSymbols.success,
-					text: 'compiled successfully',
+					text: chalk.dim('compiled successfully'),
 				});
 				console.log(
 					`${watchSymbol} watching for changes${watchEllipsis}`
@@ -91,7 +91,9 @@ export function serve(options: ProgramOptions | undefined): void {
 			onError: msg => {
 				spinner.stop();
 				clearConsole();
-				console.error(`${logSymbols.error} Failed to compile.\n`);
+				console.error(
+					`${logSymbols.error} ${chalk.dim('failed to compile')}\n`
+				);
 				msg.errors.forEach(e => console.log(e));
 				console.log(
 					`${watchSymbol} watching for changes${watchEllipsis}`
@@ -100,7 +102,11 @@ export function serve(options: ProgramOptions | undefined): void {
 			onWarn: msg => {
 				spinner.stop();
 				clearConsole();
-				console.log(`${logSymbols.warning} Compiled with warnings..\n`);
+				console.log(
+					`${logSymbols.warning} ${chalk.dim(
+						'compiled with warnings...'
+					)}\n`
+				);
 				msg.warnings.forEach(e => console.log(e));
 				console.log(
 					`${watchSymbol} watching for changes${watchEllipsis}`
@@ -111,7 +117,7 @@ export function serve(options: ProgramOptions | undefined): void {
 				clearConsole();
 				serverInfo(server.getServerUrl());
 				console.log(
-					`${logSymbols.success} ${chalk.dim('server started')}`
+					`${logSymbols.success} ${chalk.dim('server started!')}`
 				);
 				console.log(
 					`${watchSymbol} watching for changes${watchEllipsis}`

packages/scripts/src/bin/utils.ts

@@ -16,7 +16,7 @@ export const wpackLogo = gradient.instagram.multiline(
 	})
 );
 
-export const watchSymbol = chalk.yellow(figures.circleDouble);
+export const watchSymbol = '👀';
 export const watchEllipsis = chalk.dim(figures.ellipsis);
 
 export const bulletSymbol = chalk.magenta(figures.pointer);

packages/scripts/src/bin/getProjectAndServerConfig.ts renamed to packages/scripts/src/config/getProjectAndServerConfig.ts

@@ -1,6 +1,6 @@
 import path from 'path';
-import { ProjectConfig } from '../config/project.config.default';
-import { ServerConfig } from '../config/server.config.default';
+import { ProjectConfig } from './project.config.default';
+import { ServerConfig } from './server.config.default';
 // tslint:disable: non-literal-require
 export function getProjectAndServerConfig(
 	cwd: string,