feat: beautify bootstrap cli

examples/plugin/wpackio.server.js

@@ -15,9 +15,6 @@ module.exports = {
 	// UI passed directly to browsersync
 	ui: {
 		port: 3001,
-		weinre: {
-			port: 8888,
-		},
 	},
 	// Whether to show the "BrowserSync Connected"
 	notify: false,

examples/theme/.browserslistrc

@@ -0,0 +1 @@
+> 0.25%, not dead

examples/theme/package.json

@@ -10,9 +10,11 @@
     "node-sass": "^4.9.3"
   },
   "scripts": {
-    "bootstrap": "wpackio-scripts init",
+    "bootstrap": "wpackio-scripts bootstrap",
     "exbuild": "wpackio-scripts build",
-    "exstart": "wpackio-scripts start"
+    "exstart": "wpackio-scripts start",
+    "build": "wpackio-scripts build",
+    "start": "wpackio-scripts start"
   },
   "dependencies": {
     "@wpackio/scripts": "^0.0.2"

examples/theme/wpackio.server.js

@@ -19,9 +19,6 @@ module.exports = {
 	// UI passed directly to browsersync
 	ui: {
 		port: 3001,
-		weinre: {
-			port: 8787,
-		},
 	},
 	// Whether to show the "BrowserSync Connected"
 	notify: false,

packages/babel-preset-base/README.md

@@ -61,7 +61,7 @@ and you are good to go.
 You can also put it under `browserslist` directive under `package.json` file.
 
 We recommend `.browserslistrc` because it is shared across many tools. If you bootstrap
-your project using `npx @wpackio/scripts init`, then it will be created automatically.
+your project using `npx @wpackio/scripts bootstrap`, then it will be created automatically.
 
 ### Options
 

packages/scripts/src/bin/bootstrap.ts

@@ -1,12 +1,20 @@
 import chalk from 'chalk';
 import execa from 'execa';
 import logSymbols from 'log-symbols';
+import ora from 'ora';
 import path from 'path';
 import PrettyError from 'pretty-error';
 
 import { ProgramOptions } from '.';
 import { Bootstrap } from '../scripts/Bootstrap';
-import { bulletSymbol, endBootstrapInfo, isYarn, resolveCWD } from './utils';
+import {
+	bulletSymbol,
+	endBootstrapInfo,
+	isYarn,
+	resolveCWD,
+	watchEllipsis,
+	wpackLogoSmall,
+} from './utils';
 
 export async function bootstrap(
 	options: ProgramOptions | undefined,
@@ -15,12 +23,7 @@ export async function bootstrap(
 	// For error handling
 	const pe = new PrettyError();
 	const cwd = resolveCWD(options);
-	const relCwd = path.relative(process.cwd(), cwd);
-	console.log(
-		`${logSymbols.success} startup: ${chalk.cyan(
-			relCwd === '' ? '.' : relCwd
-		)}`
-	);
+	console.log(`📦 bootstraping ${wpackLogoSmall} into your project`);
 	try {
 		const initiator = new Bootstrap(cwd, version);
 
@@ -29,59 +32,79 @@ export async function bootstrap(
 
 			if (done.configured === 'project') {
 				console.log(
-					`${logSymbols.success} project bootstrap complete!`
+					`${
+						logSymbols.success
+					} ${wpackLogoSmall} bootstrap complete!`
+				);
+				console.log(
+					`📝 project config created at ${chalk.yellow(
+						'./wpackio.project.js'
+					)}`
 				);
 			} else {
 				console.log(
 					`${logSymbols.success} server configuration complete!`
 				);
 			}
 
+			console.log(
+				`📡 server config created at ${chalk.yellow(
+					'./wpackio.server.js'
+				)}`
+			);
+
 			// Install all dependencies from `done` if any
 			const command = isYarn() ? 'yarn' : 'npm';
 			const add = isYarn() ? 'add' : 'i';
 			const devParam = isYarn() ? '--dev' : '-D';
+			const spinner = ora({ spinner: 'dots3' });
 
 			if (done.deps && done.deps.dependencies.length) {
-				console.log(`🗳️ installing project dependencies\n`);
 				console.log(
-					`    ${bulletSymbol} ${chalk.green(
-						done.deps.dependencies.join(', ')
-					)}`
+					`${logSymbols.info} need to install following dependencies`
 				);
-				console.log(`⏲️ this may take a while!\n`);
-				const dep = execa(command, [add, ...done.deps.dependencies]);
-				dep.stdout.pipe(process.stdout);
-				await dep;
 				console.log(
-					`${logSymbols.success} done installing project dependencies`
+					`    ${bulletSymbol} ${chalk.yellow(
+						done.deps.dependencies.join(', ')
+					)}\n`
 				);
+				spinner.start(
+					`installing dependencies${watchEllipsis} may take a while`
+				);
+				await execa(command, [add, ...done.deps.dependencies]);
+				spinner.succeed('done installing dependencies');
 			}
 			if (done.deps && done.deps.devDependencies.length) {
-				console.log(`🗳️ installing project dev dependencies\n`);
+				console.log(
+					`️${
+						logSymbols.info
+					} need to install following dev dependencies\n`
+				);
 				console.log(
 					`    ${bulletSymbol} ${chalk.green(
 						done.deps.devDependencies.join(', ')
-					)}`
+					)}\n`
+				);
+				spinner.start(
+					`installing dev dependencies${watchEllipsis} may take a while`
 				);
-				console.log(`⏲️ this may take a while!\n`);
-				const dep = execa(command, [
+				await execa(command, [
 					add,
 					...done.deps.devDependencies,
 					devParam,
 				]);
-				dep.stdout.pipe(process.stdout);
-				await dep;
-				console.log(
-					`${
-						logSymbols.success
-					} done installing project dev dependencies`
-				);
+
+				spinner.succeed('done installing dependencies');
 			}
 		} catch (e) {
 			console.log(
 				`${logSymbols.error} configuration files are already present.`
 			);
+			console.log(
+				`${
+					logSymbols.info
+				} change the file code if you wish to modify the tooling.`
+			);
 		}
 
 		// Log how to access and start, develop, build etc.

packages/scripts/src/bin/index.ts

@@ -99,7 +99,7 @@ program
 
 // Init the project
 program
-	.command('init')
+	.command('bootstrap')
 	.description('create project and/or server configuration files.')
 	.option('-c, --context', contextHelp)
 	.action((options: ProgramOptions | undefined) => {

packages/scripts/src/bin/utils.ts

@@ -91,15 +91,15 @@ You can now view it in your browser.
 			? chalk.blue.underline(uiUrl)
 			: chalk.red('N/A')
 	}.
-    ${bulletSymbol} ${chalk.bold('Force Compile:')} press ${chalk.cyan('r')}.
-    ${bulletSymbol} ${chalk.bold('Stop Server:')} press ${chalk.cyan(
+    ${bulletSymbol} ${chalk.bold('Force Compile:')} press ${chalk.yellow('r')}.
+    ${bulletSymbol} ${chalk.bold('Stop Server:')} press ${chalk.yellow(
 		'Ctrl'
-	)} + ${chalk.cyan('c')}.
+	)} + ${chalk.yellow('c')}.
     ${bulletSymbol} ${chalk.bold('Enqueue Assets:')} visit ${wpackLink}.
 
 No files are written on disk during ${chalk.cyan('development')} mode.
 
-To create production build, run ${chalk.cyan(
+To create production build, run ${chalk.yellow(
 		isYarn() ? 'yarn build' : 'npm run build'
 	)}.`;
 	console.log(
@@ -119,7 +119,7 @@ export function endServeInfo(): void {
 		'stopped'
 	)}.
 
-    ${bulletSymbol} To create production build, run ${chalk.cyan(
+    ${bulletSymbol} To create production build, run ${chalk.yellow(
 		isYarn() ? 'yarn build' : 'npm run build'
 	)}.
     ${bulletSymbol} For more info, visit: ${wpackLink}.
@@ -171,32 +171,29 @@ export function endBootstrapInfo(): void {
 		'successfully'
 	)} integrated within your project.
 
-If this is your first run edit your ${chalk.bold.magenta(
-		'wpackio.project.js'
-	)} file and put entrypoints.
-You will find examples within the file itself.
+If this is your first run edit your ${chalk.bold.magenta('wpackio.project.js')}
+file and put entrypoints. You will find examples within the file itself.
 
-You should keep ${chalk.bold.yellow(
-		'wpackio.server.js'
-	)} outside your VCS tracking
-as it will most likely differ for different users.
+You should keep ${chalk.bold.yellow('wpackio.server.js')} outside your VCS
+tracking as it will most likely differ for different users.
 
 You can run ${chalk.dim('bootstrap')} command again and it will just
-create the ${chalk.bold.yellow('wpackio.server.js')} file.
+create the ${chalk.bold.yellow('wpackio.server.js')} file if not present.
 
     ${bulletSymbol} Start Development: ${chalk.yellow(
 		isYarn() ? 'yarn start' : 'npm start'
 	)}.
-    ${bulletSymbol} Start Development: ${chalk.yellow(
+    ${bulletSymbol} Production Build: ${chalk.yellow(
 		isYarn() ? 'yarn build' : 'npm run build'
 	)}.
     ${bulletSymbol} Create local server config: ${chalk.yellow(
 		isYarn() ? 'yarn bootstrap' : 'npm run bootstrap'
 	)}.
-	${bulletSymbol} For more info, visit: ${wpackLink}.
+    ${bulletSymbol} For more info, visit: ${wpackLink}.
 
 To enqueue the assets within your plugin or theme, make sure you have
-the ${chalk.yellow('wpackio\\enqueue')} from packagist.org/composer.
+the ${chalk.yellow('wpackio/enqueue')} from packagist.org/composer
+and follow the intructions from documentation.
 
 To spread the ${chalk.red(figures.heart)} please tweet.`;
 

packages/scripts/src/config/server.config.default.ts

@@ -31,9 +31,6 @@ export const serverConfigDefault: ServerConfig = {
 	// UI passed directly to browsersync
 	ui: {
 		port: 3001,
-		weinre: {
-			port: 8080,
-		},
 	},
 	// Whether to show the "BrowserSync Connected"
 	notify: false,

packages/scripts/src/scripts/Bootstrap.ts

@@ -105,6 +105,7 @@ export class Bootstrap {
 			const projectContext = await this.initProjectConfig();
 			const serverContext = await this.initServerConfig();
 			const deps = this.configureScripts(projectContext);
+			this.initBrowserList();
 			return Promise.resolve(
 				new InitResolve('project', serverContext, projectContext, deps)
 			);
@@ -245,6 +246,17 @@ export class Bootstrap {
 		});
 	}
 
+	/**
+	 * Create a default production ready (90%+ global coverage)
+	 * browserlistrc file for your project.
+	 */
+	private initBrowserList(): void {
+		fs.writeFileSync(
+			path.resolve(this.cwd, '.browserslistrc'),
+			'> 0.25%, not dead'
+		);
+	}
+
 	/**
 	 * Configure package.json file and figure which dependencies to install.
 	 */

packages/scripts/templates/wpackio.server.js.hbs

@@ -19,9 +19,6 @@ module.exports = {
 	// UI passed directly to browsersync
 	ui: {
 		port: 3001,
-		weinre: {
-			port: 8787,
-		},
 	},
 	// Whether to show the "BrowserSync Connected"
 	notify: false,