@tmbr/bundler 1.3.0 → 1.5.0

package/cli.js

@@ -6,13 +6,10 @@ const styles = require('esbuild-sass-plugin').sassPlugin;
 const qrcode = require('qrcode-terminal');
 const chalk = require('chalk');
 const bs = require('browser-sync').create();
-const renderError = require('./error');
-// const webfontsGenerator = require('webfonts-generator'); // OPTIONAL ICON FONT BUILDER UNCOMMENT TO USE
 
 const cwd = process.cwd();
 const package = require(`${cwd}/package.json`);
 const command = process.argv[2];
-let error;
 
 if (!['build', 'watch'].includes(command)) {
   console.log(`Invalid command: ${chalk.red(command)}\n`);
@@ -21,57 +18,18 @@ if (!['build', 'watch'].includes(command)) {
 
 exec(`rm -rf ${cwd}/build/*`);
 
-const assets = (options = {}) => ({
-  name: 'assets',
-  setup(build) {
-    build.onResolve({filter: /..\/(fonts|images)\//}, args => ({
-      path: args.path,
-      external: true
-    }))
-  },
-});
+function ok() {
+  command === 'watch' && console.clear();
 
-// OPTIONAL ICON FONT BUILDER. CREATE /ICONS FOLDER AND UNCOMMENT TO USE
-// ADD SVG FILES INTO FOLDER AND ADD TO FILES LIST BELOW
-// ADD TO INDEX.SCSS: @import "../fonts/tmbr-icons.css";
-// webfontsGenerator({
-//   files: [
-//     './icons/angle-left.svg',
-//   ],
-//   dest: './fonts/',
-//   fontName: 'tmbr-icons',
-//   templateOptions: {
-//     baseClass: 'icon',
-//     classPrefix: 'icon-'
-//   }, 
-//   types: ['woff2', 'woff', 'svg']
-//   }, function(error) {
-//   if (error) {
-//     console.log('Fail!', error);
-//   } else {
-//     console.log('Icon Font Built');
-//   }
-// });
+  const host = bs.getOption('proxy').get('target');
+  const port = bs.getOption('port');
+  const proxying = `${host}:${port}`;
+  const external = bs.getOption('urls').get('external');
 
-const errors = (options = {}) => ({
-  name: 'errors',
-  setup(build) {
-    build.onEnd(result => {
-      error = result.errors[0];
-      error && bs.reload();
-    });
-  },
-});
-
-const errors = (options = {}) => ({
-  name: 'errors',
-  setup(build) {
-    build.onEnd(result => {
-      error = result.errors[0];
-      error && bs.reload();
-    });
-  },
-});
+  external && qrcode.generate(external, {small: true}, console.log);
+  console.log(`Proxying: ${chalk.green(proxying)}`);
+  console.log(`External: ${chalk.cyan(external || 'offline')}\n`);
+}
 
 function entryPoints(suffix = '') {
 
@@ -90,6 +48,25 @@ function entryPoints(suffix = '') {
   }, {});
 }
 
+const assets = (options = {}) => ({
+  name: 'assets',
+  setup(build) {
+    build.onResolve({filter: /..\/(fonts|images)\//}, args => ({
+      path: args.path,
+      external: true
+    }))
+  },
+});
+
+const errors = (options = {}) => ({
+  name: 'errors',
+  setup(build) {
+    build.onEnd(({warnings, errors}) => {
+      (warnings.length || errors.length) ? console.log('\007') : ok();
+    });
+  },
+});
+
 const defaults = {
   watch: command === 'watch',
   outdir: path.resolve(cwd, 'build'),
@@ -121,8 +98,9 @@ const buildConfig = Object.assign({}, defaults, {
   entryPoints: entryPoints('min'),
 });
 
-esbuild.build(watchConfig);
-esbuild.build(buildConfig);
+const noop = fn => fn;
+esbuild.build(watchConfig).catch(noop);
+esbuild.build(buildConfig).catch(noop);
 
 if (command === 'watch') {
 
@@ -136,15 +114,8 @@ if (command === 'watch') {
     '**/*.php'
   ];
 
-  const middleware = (proxyRes, req, res) => {
-    error && res.end(renderError(error));
-  };
-
   const options = {
-    proxy: {
-      target: `${package.name}.test`,
-      proxyRes: [middleware]
-    },
+    proxy: `${package.name}.test`,
     host: 'localhost',
     open: false,
     notify: false,
@@ -153,15 +124,5 @@ if (command === 'watch') {
     files
   };
 
-  bs.init(options, () => {
-
-    const host = bs.getOption('proxy').get('target');
-    const port = bs.getOption('port');
-    const proxying = `${host}:${port}`;
-    const external = bs.getOption('urls').get('external');
-
-    external && qrcode.generate(external, {small: true}, console.log);
-    console.log(`Proxying: ${chalk.green(proxying)}`);
-    console.log(`External: ${chalk.cyan(external || 'offline')}`);
-  });
+  bs.init(options, ok);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tmbr/bundler",
   "author": "TMBR (https://wearetmbr.com/)",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "license": "MIT",
   "repository": "https://github.com/TMBR/tmbr-bundler",
   "description": "WordPress development toolkit built on esbuild and browser-sync",
@@ -9,12 +9,11 @@
     "tmbr-bundler": "cli.js"
   },
   "dependencies": {
-    "browser-sync": "^2.27.5",
+    "browser-sync": "^2.27.10",
     "chalk": "^4.1.2",
-    "esbuild": "^0.14.47",
-    "esbuild-sass-plugin": "^2.2.6",
-    "html-entities": "^2.3.2",
-    "qrcode-terminal": "^0.12.0",
-    "webfonts-generator": "^0.4.0"
+    "esbuild": "^0.15.5",
+    "esbuild-sass-plugin": "^2.3.2",
+    "html-entities": "^2.3.3",
+    "qrcode-terminal": "^0.12.0"
   }
 }

package/error.js

@@ -1,107 +0,0 @@
-const fs = require('fs');
-const encode = require('html-entities').encode;
-
-module.exports = error => {
-
-    const { file, line, column } = error.location;
-
-    const lines = fs.readFileSync(file, 'UTF-8').split(/\r?\n/);
-    const index = line - 1;
-    const inset = String((lines[index + 2] && line + 2) || (lines[index + 1] && line + 1) || line).split('').length;
-
-    const print = offset => (
-        `<span class="c-gray">${String(line + offset).padStart(2 + inset, ' ')} | </span>` + encode(lines[index + offset])
-    );
-
-    const space = length => {
-        return ' '.repeat(length);
-    };
-
-    const output = [
-        (index - 2) >= 0 && print(-2),
-        (index - 1) >= 0 && print(-1),
-        `<span class="c-red fw-700">&gt;</span><span class="c-gray"> ${line} | </span>${encode(lines[index])}`,
-        ` <span class="c-gray">${space(2 + inset)}| </span>${space(column ? column - 1 : 0)}<span class="c-red fw-700">^</span>`,
-        (index + 1) <= lines.length - 1 && print(1),
-        (index + 2) <= lines.length - 1 && print(2),
-    ].filter(Boolean).join('\n');
-
-    return /* html */`
-<!DOCTYPE html>
-<html>
-<head>
-
-    <meta charset="UTF-8">
-    <meta content="width=device-width, initial-scale=1.0" name="viewport">
-
-    <title>Build Error: ${file}</title>
-
-    <style>
-
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    .c-red    { color: #ff5555; }
-    .c-cyan   { color: #88ddff; }
-    .c-gray   { color: #666666; }
-    .fw-700   { font-weight: 700; }
-
-    ::selection {
-        background-color: rgba(95, 126, 151, 0.48);
-    }
-
-    html {
-        font: 1rem / 1.5 sans-serif;
-        color: #FFF;
-        background-color: #151515;
-    }
-    main {
-        max-width: 1280px;
-        margin: 3em auto;
-        padding: 1rem;
-    }
-    h1 {
-        font-size: 1.5rem;
-        line-height: 1.5;
-        margin-bottom: 0.25em;
-    }
-
-    .terminal {
-        color: #CCC;
-        border-radius: 0.25rem;
-    }
-    .terminal pre {
-        font-family: Menlo, Monaco, monospace;
-        overflow: scroll;
-    }
-    .terminal > * {
-        padding: 1rem 0;
-    }
-
-    </style>
-
-</head>
-<body>
-
-<main>
-
-    <h1>Build Error</h1>
-
-    <div class="terminal">
-
-<pre>
-<span class="c-cyan">${file}</span><span class="c-gray">:</span>${line}<span class="c-gray">:</span>${column}
-<span class="c-red fw-700">${error.text}</span>
-
-${output}
-</pre>
-
-    </div>
-
-</main>
-
-</body>
-</html>`};