@tmbr/bundler 1.9.2 → 1.10.1

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

@@ -1,15 +1,18 @@
 #!/usr/bin/env node
-const esbuild = require('esbuild');
-const fs = require('fs');
-const path = require('path');
-const chalk = require('chalk');
-const server = require('browser-sync').create();
-const styles = require('esbuild-sass-plugin').sassPlugin;
-const silent = require('sass').Logger.silent;
+import esbuild from 'esbuild';
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import readline from 'readline';
+import { create } from 'browser-sync';
+import { execSync as exec } from 'child_process';
+import { sassPlugin as styles } from 'esbuild-sass-plugin';
+import * as sass from 'sass';
+
+const server = create();
 
 const cwd = process.cwd();
 const src = path.resolve(cwd, 'src');
-const package = require(`${cwd}/package.json`);
 const command = process.argv[2];
 
 if (!['build', 'watch'].includes(command)) {
@@ -29,13 +32,13 @@ const logger = (options = {}) => ({
     });
 
     context.onEnd(result => {
-      if (result.warnings.length || result.errors.length) return console.log('\007');
+      if (result.warnings.length || result.errors.length) return console.log('\\007');
 
       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()
     });
   }
@@ -54,7 +57,7 @@ const buildOptions = {
   treeShaking: true,
   legalComments: 'none',
   plugins: [
-    styles({sourceMap: false, logger: silent}),
+    styles({sourceMap: false, logger: sass.Logger.silent}),
     logger()
   ]
 };
@@ -70,7 +73,7 @@ const watchOptions = Object.assign({}, buildOptions, {
 });
 
 const serveOptions = {
-  proxy: `${package.name}.test`,
+  proxy: `${process.env.npm_package_name}.test`,
   files: ['assets/**', 'build/*', '**/*.php'],
   host: 'localhost',
   open: false,
@@ -81,15 +84,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 +127,13 @@ async function main() {
   server.init(serveOptions, () => {
     builder.watch();
     watcher.watch();
+    readline.emitKeypressEvents(process.stdin);
+
+    process.stdin.setRawMode(true);
+    process.stdin.on('keypress', (_, key) => {
+      if (!key) return;
+      shortcuts[key.sequence]?.[0]();
+    });
   });
 }
 
@@ -115,11 +143,11 @@ function extend(options, config) {
 }
 
 if (fs.existsSync(process.argv[3])) {
-  const test = require(`${cwd}/${process.argv[3]}`);
-  console.log(extend(watchOptions, test.watch));
-  console.log(extend(buildOptions, test.build));
-  console.log(extend(serveOptions, test.serve));
-  process.exit();
+  // const test = require(`${cwd}/${process.argv[3]}`);
+  // console.log(extend(watchOptions, test.watch));
+  // console.log(extend(buildOptions, test.build));
+  // console.log(extend(serveOptions, test.serve));
+  // process.exit();
 }
 
 main();

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@tmbr/bundler",
-  "version": "1.9.2",
+  "type": "module",
+  "version": "1.10.1",
   "repository": "github:TMBR/tmbr-bundler",
   "bin": {
     "bundler": "cli.js",
     "tmbr-bundler": "cli.js"
   },
   "dependencies": {
-    "browser-sync": "^2.28.3",
+    "browser-sync": "^2.29.3",
     "chalk": "^4.1.2",
-    "esbuild": "^0.17.11",
-    "esbuild-sass-plugin": "^2.6.0"
+    "esbuild": "^0.19.3",
+    "esbuild-sass-plugin": "^2.15.0"
   }
 }