feat(cli): improve cli output and logo

Remove figlet from dependency and use a hard-coded logo with tagline and version information. See #429
swashata · Apr 15, 2019 · e012ab6 · e012ab6
1 parent 9bc3252
commit e012ab6
Show file tree

Hide file tree

Showing 11 changed files with 2,856 additions and 1,570 deletions.
diff --git a/examples/plugin/package.json b/examples/plugin/package.json
@@ -8,28 +8,29 @@
   "private": true,
   "devDependencies": {
     "@wpackio/scripts": "file:../../packages/scripts",
-    "autoprefixer": "^9.1.5",
-    "cssnano": "^4.1.7",
-    "fork-ts-checker-webpack-plugin": "^0.4.15",
-    "node-sass": "^4.10.0",
-    "typescript": "^3.1.3"
+    "autoprefixer": "^9.5.1",
+    "cssnano": "^4.1.10",
+    "fork-ts-checker-webpack-plugin": "^1.0.2",
+    "node-sass": "^4.11.0",
+    "typescript": "^3.4.3"
   },
   "scripts": {
     "bootstrap": "wpackio-scripts bootstrap",
     "start": "wpackio-scripts start",
     "build": "wpackio-scripts build",
     "archive": "wpackio-scripts pack",
     "bootstrap:dev": "../../packages/scripts/lib/bin/index.js bootstrap",
+    "dev": "../../packages/scripts/lib/bin/index.js",
     "start:dev": "../../packages/scripts/lib/bin/index.js start",
     "build:dev": "../../packages/scripts/lib/bin/index.js build"
   },
   "dependencies": {
-    "@types/webpack-env": "^1.13.6",
+    "@types/webpack-env": "^1.13.9",
     "@wpackio/entrypoint": "file:../../packages/entrypoint",
-    "react": "^16.6.3",
-    "react-bootstrap": "^0.32.4",
-    "react-dom": "^16.6.3",
-    "react-hot-loader": "^4.3.11",
+    "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.8",
+    "react-dom": "^16.8.6",
+    "react-hot-loader": "^4.8.4",
     "uuid": "^3.3.2"
   }
 }
diff --git a/examples/plugin/yarn.lock b/examples/plugin/yarn.lock
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -25,7 +25,6 @@
 		"@types/archiver": "^2.1.3",
 		"@types/browser-sync": "^0.0.43",
 		"@types/execa": "^0.9.0",
-		"@types/figlet": "^1.2.0",
 		"@types/figures": "^2.0.0",
 		"@types/find-up": "^2.1.1",
 		"@types/gradient-string": "^1.1.0",
@@ -53,7 +52,6 @@
 		"del": "^4.1.0",
 		"dev-ip": "^1.0.1",
 		"execa": "^1.0.0",
-		"figlet": "^1.2.1",
 		"figures": "^2.0.0",
 		"file-loader": "^3.0.1",
 		"find-up": "^3.0.0",

diff --git a/packages/scripts/src/bin/build.ts b/packages/scripts/src/bin/build.ts
@@ -2,6 +2,7 @@ import chalk from 'chalk';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
 import path from 'path';
+import clearConsole from 'react-dev-utils/clearConsole';
 import { getProjectConfig } from '../config/getProjectAndServerConfig';
 import { Build } from '../scripts/Build';
 import { ProgramOptions } from './index';
@@ -58,6 +59,7 @@ export function build(options: ProgramOptions | undefined): void {
 				} else {
 					spinner.warn(`${wpackLogoSmall} build warnings.`);
 				}
+				clearConsole();
 				console.log(log);
 				endBuildInfo();
 				process.exit(0);

diff --git a/packages/scripts/src/bin/dev.ts b/packages/scripts/src/bin/dev.ts
@@ -9,6 +9,7 @@
 import program from 'commander';
 import process from 'process';
 import { Bootstrap } from '../scripts/Bootstrap';
+import { printIntro } from './utils';
 
 program
 	.command('bootstrap')
@@ -19,4 +20,11 @@ program
 		console.log(JSON.stringify(answer, null, 4));
 	});
 
+program
+	.command('intro')
+	.description('Check CLI intro')
+	.action(() => {
+		printIntro();
+	});
+
 program.parse(process.argv);
diff --git a/packages/scripts/src/bin/serve.ts b/packages/scripts/src/bin/serve.ts
@@ -16,6 +16,7 @@ import {
 	watchEllipsis,
 	watchSymbol,
 	wpackLogoSmall,
+	printIntro,
 } from './utils';
 
 /**
@@ -161,6 +162,8 @@ export function serve(options: ProgramOptions | undefined): void {
 			console.log('');
 			console.log(`${logSymbols.error} shutting down development server`);
 			server.stop();
+			clearConsole();
+			printIntro();
 			endServeInfo();
 			process.exit(0);
 		};

diff --git a/packages/scripts/src/bin/utils.ts b/packages/scripts/src/bin/utils.ts
@@ -2,7 +2,6 @@ import archiver from 'archiver';
 import boxen from 'boxen';
 import chalk from 'chalk';
 import { ProgressData } from 'cpy';
-import figlet from 'figlet';
 import figures from 'figures';
 import findUp from 'find-up';
 import gradient from 'gradient-string';
@@ -12,15 +11,20 @@ import PrettyError from 'pretty-error';
 import { WpackioError } from '../errors/WpackioError';
 import { ArchiveResolve } from '../scripts/Pack';
 
+const pkgPath = path.resolve(__dirname, '../../package.json');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const pkg = require(pkgPath);
+
 let isYarnCache: boolean | null = null;
 
-export const wpackLogo = gradient.instagram.multiline(
-	figlet.textSync('wpack.io', {
-		font: 'Big',
-		horizontalLayout: 'full',
-		verticalLayout: 'full',
-	})
-);
+export const wpackLogo = `${gradient.instagram(`__      __`)}
+${gradient.instagram(`\\ \\ /\\ / /`)} ${chalk.bold(
+	gradient.instagram('PACK.IO')
+)}
+${gradient.instagram(` \\ V  V /`)}  ${chalk.yellowBright(
+	'JavaScript'
+)} tool for ${chalk.blueBright('WordPress')}
+${gradient.instagram(`  \\_/\\_/`)}   ${chalk.bold.magenta(`v${pkg.version}`)}`;
 
 export const watchSymbol = '👀';
 export const watchEllipsis = chalk.dim(figures.ellipsis);
@@ -31,14 +35,7 @@ export const wpackLogoSmall = gradient.instagram('wpack.io');
 
 export const wpackLink = `${chalk.blue.underline('https://wpack.io')}`;
 
-export const wpackIntro = `\n${boxen(wpackLogo, {
-	borderStyle: 'round',
-	borderColor: 'magenta',
-	float: 'center',
-	align: 'center',
-	padding: 1,
-	dimBorder: true,
-})}\n`;
+export const wpackIntro = `${wpackLogo}\n`;
 
 export function isYarn(): boolean {
 	const cwd = process.cwd();
@@ -87,11 +84,10 @@ export function resolveCWD(
 
 export function serverInfo(url: string, uiUrl: string | boolean): void {
 	const msg = `${wpackLogoSmall} server is running ${chalk.redBright('hot')}.
-You can now view it in your browser.
 
-    ${bulletSymbol} ${chalk.bold(
-		'Network address:'
-	)} visit ${chalk.blue.underline(url)}.
+    ${bulletSymbol} ${chalk.bold('Network address:')} ${chalk.blue.underline(
+		url
+	)}.
     ${bulletSymbol} ${chalk.bold('BrowserSync UI:')} ${
 		typeof uiUrl === 'string'
 			? chalk.blue.underline(uiUrl)
@@ -104,7 +100,6 @@ You can now view it in your browser.
     ${bulletSymbol} ${chalk.bold('Enqueue Assets:')} visit ${wpackLink}.
 
 No files are written on disk during ${chalk.cyan('development')} mode.
-
 To create production build, run ${chalk.yellow(
 		isYarn() ? 'yarn build' : 'npm run build'
 	)}.`;
@@ -120,7 +115,6 @@ To create production build, run ${chalk.yellow(
 }
 
 export function endServeInfo(): void {
-	console.log('\n');
 	const msg = `${wpackLogoSmall} server has been ${chalk.redBright(
 		'stopped'
 	)}.
@@ -133,19 +127,19 @@ export function endServeInfo(): void {
 Thank you for using ${wpackLink}.
 To spread the ${chalk.red(figures.heart)} please tweet.`;
 
-	console.log(
-		boxen(msg, {
-			padding: 1,
-			borderColor: 'cyan',
-			align: 'left',
-			float: 'left',
-			borderStyle: 'round',
-		})
-	);
+	console.log(msg);
+	// console.log(
+	// 	boxen(msg, {
+	// 		padding: 1,
+	// 		borderColor: 'cyan',
+	// 		align: 'left',
+	// 		float: 'left',
+	// 		borderStyle: 'round',
+	// 	})
+	// );
 }
 
 export function endBuildInfo(): void {
-	console.log('\n');
 	const msg = `${wpackLogoSmall} production build was ${chalk.green(
 		'successful'
 	)}.
@@ -171,7 +165,6 @@ To spread the ${chalk.red(figures.heart)} please tweet.`;
 }
 
 export function endBootstrapInfo(): void {
-	console.log('\n');
 	const msg = `${wpackLogoSmall} was ${chalk.green(
 		'successfully'
 	)} integrated within your project.

diff --git a/packages/scripts/src/scripts/Build.ts b/packages/scripts/src/scripts/Build.ts
@@ -45,7 +45,7 @@ export class Build {
 							colors: true,
 							assets: true,
 							chunks: false,
-							entrypoints: true,
+							entrypoints: false,
 							hash: false,
 							version: false,
 							modules: false,

diff --git a/packages/scripts/tsconfig.json b/packages/scripts/tsconfig.json
@@ -2,7 +2,7 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"outDir": "./lib" /* Redirect output structure to the directory. */,
-		"rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
   },
   "exclude": [
     "__mocks__/**",

diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -61,6 +61,7 @@
 
 		/* Advanced Options */
     // "declarationDir": "lib"                /* Output directory for generated declaration files. */
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "resolveJsonModule": true
 	}
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1860,11 +1860,6 @@
     "@types/node" "*"
     "@types/range-parser" "*"
 
-"@types/figlet@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@types/figlet/-/figlet-1.2.0.tgz#2dab76da069dc8ce5dcab461f7f2788317fb01a8"
-  integrity sha512-TDZkNpYfkc3X8yv7w1QBziZmmxzNfGKX+YjeNkMpmSiNV0QOdNf9G5cEZB3FH1/oaqpSQEdxuDzURdju2L3lng==
-
 "@types/figures@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/figures/-/figures-2.0.0.tgz#e624a9ad71db49b9c8b9bbd59fe1ad04c443913c"
@@ -5661,11 +5656,6 @@ figgy-pudding@^3.1.0, figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
   integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
 
-figlet@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/figlet/-/figlet-1.2.1.tgz#48d35df9d9b10b1b3888302e6e57904a0b00509c"
-  integrity sha512-qc8gycfnnfOmfvPl7Fi3JeTbcvdmbZkckyUVGGAM02je7Ookvu+bBfKy1I4FKqTsQHCs3ARJ76ip/k98r+OQuQ==
-
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"