@tmbr/bundler 1.9.2 → 1.10.0

package/README.md

@@ -1,24 +1,30 @@
-# tmbr-bundler
+# TMBR Bundler
 
-A configurable JavaScript and CSS bundler built on [esbuild](https://esbuild.github.io) and [browser-sync](https://browsersync.io). Specifically developed for WordPress development where CI/CD is not available, allowing for concurrent development and production bundles.
+A configurable JavaScript and [SASS](https://sass-lang.com/documentation/) bundler built on [esbuild](https://esbuild.github.io) and [browser-sync](https://browsersync.io). Intended for WordPress development or projects where a CI/CD workflow is not available, allowing for concurrent development and production bundles.
 
 **Why [esbuild](https://esbuild.github.io)?**
 
-Compared to the mess of webpack loaders and dependencies, esbuild is faster, has better documentation and zero dependencies by default. It was created by Evan Wallace, who built this amazing [WebGL demo](https://madebyevan.com/webgl-water) ... and yeah, and co-founded [Figma](https://www.figma.com/)!
+Compared to the mess of webpack loaders and dependencies, esbuild is faster, has better documentation and zero dependencies by default. It was created by Evan Wallace, who built this amazing [WebGL demo](https://madebyevan.com/webgl-water) in 2011 ... oh yeah, and he also co-founded [Figma](https://www.figma.com/)!
 
-## Installation 
+## Installation
 
 ```bash
-npm install @tmbr/bundler --save-dev
+npm install --save-dev @tmbr/bundler
 ```
 
 ## Usage
-`@tmbr/bundler` has two commands - `build` and `watch` - that both create concurrent builds: 
+`@tmbr/bundler` has two commands - `build` and `watch` - that both create concurrent builds:
 - `build/main.dev.[css|js]` development version with sourcemaps
 - `build/main.min.[css|js]` minified production version
 
-### ``tmbr-bundler build``
-### ``tmbr-bundler watch``
+### ``bundler build``
+
+This command creates the build files noted above and displays KB sizes for the minified css and js build files.
+
+### ``bundler watch``
+
+This command will create initial build files noted above and start watching for changes. By default, it will look at the **name** field in your `package.json` file, append `.test` and proxy
+`http://example.test:3000` for auto-reloading.
 
 ## Configuration
 

package/cli.js

@@ -2,6 +2,7 @@
 const esbuild = require('esbuild');
 const fs = require('fs');
 const path = require('path');
+const exec = require('child_process').execSync;
 const chalk = require('chalk');
 const server = require('browser-sync').create();
 const styles = require('esbuild-sass-plugin').sassPlugin;
@@ -34,8 +35,8 @@ const logger = (options = {}) => ({
       const css = `${path}/${slug}.css`;
       const js = `${path}/${slug}.js`;
 
-      console.log(`${css} ${Math.round(fs.statSync(css).size / 1000)} KB`);
-      console.log(`${js} ${Math.round(fs.statSync(js).size / 1000)} KB`);
+      console.log(`  ${chalk.green('✓')} ${css} ${Math.round(fs.statSync(css).size / 1000)} KB`);
+      console.log(`  ${chalk.green('✓')} ${js} ${Math.round(fs.statSync(js).size / 1000)} KB`);
       console.log()
     });
   }
@@ -81,15 +82,33 @@ const serveOptions = {
 };
 
 server.info = function() {
-  const host = server.getOption('proxy').get('target');
-  const port = server.getOption('port');
-  const proxying = `${host}:${port}`;
-  const external = server.getOption('urls').get('external');
+  const proxying = this.url();
+  const external = this.getOption('urls').get('external');
 
   console.clear();
   console.log();
-  console.log(`Proxying: ${chalk.green(proxying)}`);
-  console.log(`External: ${chalk.cyan(external || 'offline')}\n`);
+  console.log(`  ➜ ${chalk.bold('Proxying')}: ${chalk.green(proxying)}`);
+  console.log(`  ➜ ${chalk.bold('External')}: ${chalk.cyan(external || 'offline')}\n`);
+  console.log(`  ${chalk.bold('Shortcuts')}`);
+
+  for (const [key, [_, tip]] of Object.entries(shortcuts)) {
+    tip && console.log(chalk.grey(`  press ${chalk.white.bold(key)} to ${tip}`));
+  }
+
+  console.log();
+};
+
+server.url = function() {
+  const host = this.getOption('proxy').get('target');
+  const port = this.getOption('port');
+  return `${host}:${port}`;
+};
+
+const shortcuts = {
+  o: [() => exec(`open ${server.url()}`), 'open in browser'],
+  r: [() => server.reload(), 'reload the page'],
+  q: [() => process.exit(), 'quit'],
+  '\x03': [() => process.exit()],
 };
 
 async function main() {
@@ -106,6 +125,14 @@ async function main() {
   server.init(serveOptions, () => {
     builder.watch();
     watcher.watch();
+
+    require('readline').emitKeypressEvents(process.stdin);
+
+    process.stdin.setRawMode(true);
+    process.stdin.on('keypress', (_, key) => {
+      if (!key) return;
+      shortcuts[key.sequence]?.[0]();
+    });
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmbr/bundler",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "repository": "github:TMBR/tmbr-bundler",
   "bin": {
     "bundler": "cli.js",