@tmbr/bundler 0.1.3 → 1.1.0

package/cli.js

@@ -1,135 +1,134 @@
 #!/usr/bin/env node
-const webpack = require('webpack');
+const esbuild = require('esbuild');
 const path = require('path');
-const SourceMapDevToolPlugin = require('webpack').SourceMapDevToolPlugin;
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+const exec = require('child_process').execSync;
+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 cwd = process.cwd();
-const command = process.argv[2] || 'build';
 const package = require(`${cwd}/package.json`);
+const command = process.argv[2];
+let error;
 
-const config = {
-  entry: {
-    admin: path.resolve(cwd, 'src/admin'),
-    main: path.resolve(cwd, 'src'),
-  },
-  output: {
-    path: path.resolve(cwd, 'build'),
-    filename: '[name].js',
+if (!['build', 'watch'].includes(command)) {
+  console.log(`Invalid command: ${chalk.red(command)}\n`);
+  process.exit();
+}
+
+exec(`rm -rf ${cwd}/build/*`);
+
+const assets = (options = {}) => ({
+  name: 'assets',
+  setup(build) {
+    build.onResolve({filter: /..\/(fonts|images)\//}, args => ({
+      path: args.path,
+      external: true
+    }))
   },
-  resolve: {
-    alias: {'@': path.resolve(cwd, 'src')}
+});
+
+const errors = (options = {}) => ({
+  name: 'errors',
+  setup(build) {
+    build.onEnd(result => {
+      error = result.errors[0];
+      error && bs.reload();
+    });
   },
-  devtool: false,
-  module: {
-    rules: [{
-      test: /\.js$/,
-      exclude: /node_modules/,
-      use: {
-        loader: 'babel-loader',
-        options: {presets: [['@babel/preset-env', {targets: '> 0.5%, not IE 11, not dead'}]]}
-      }
-    }, {
-      test: /\.(css|scss)$/,
-      use: [
-        {loader: MiniCssExtractPlugin.loader, options: {publicPath: ''}},
-        {loader: 'css-loader'},
-        {loader: 'sass-loader'},
-      ]
-    }, {
-      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|json|mp3|mp4|ico)$/,
-      type: 'asset/resource',
-      generator: {emit: false, filename: '../[path][name][ext]?[hash]'}
-    }]
+});
+
+function entryPoints(suffix = '') {
+
+  if (!suffix.startsWith('.')) {
+    suffix = `.${suffix}`;
   }
+
+  const entries = Object.entries({
+    admin: path.resolve(cwd, './src/admin'),
+    main: path.resolve(cwd, './src'),
+  });
+
+  return entries.reduce((result, [name, path]) => {
+    result[`${name}${suffix}`] = path;
+    return result;
+  }, {});
+}
+
+const defaults = {
+  watch: command === 'watch',
+  outdir: path.resolve(cwd, 'build'),
+  bundle: true,
+  minify: true,
+  sourcemap: false,
+  logLevel: 'warning',
+  legalComments: 'none',
+  treeShaking: true,
+  target: 'es2019',
+  plugins: [
+    styles({sourceMap: true}),
+    assets(),
+  ],
 };
 
-const watchConfig = Object.assign({}, config, {
-  name: 'watch',
-  mode: 'development',
-  stats: {
-    all: false,
-    colors: true,
-    builtAt: true,
-    timings: true,
-    warnings: true,
-    errors: true,
-  },
+const watchConfig = Object.assign({}, defaults, {
+  entryPoints: entryPoints('dev'),
+  minify: false,
+  sourcemap: 'inline',
+  logLevel: 'silent',
   plugins: [
-    new SourceMapDevToolPlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].css'
-    }),
-    new BrowserSyncPlugin({
-      proxy: `${package.name}.test`,
-      host: 'localhost',
-      port: 5000,
-      open: false,
-      notify: false,
-      files: ['build/main.js', 'images/*', '**/*.php']
-    })
-  ]
+    ...defaults.plugins,
+    errors()
+  ],
 });
 
-const buildConfig = Object.assign({}, config, {
-  name: 'build',
-  mode: 'production',
-  output: {
-    path: path.resolve(cwd, 'build'),
-    filename: '[name].min.js',
-  },
-  stats: 'none',
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].min.css'
-    })
-  ]
+const buildConfig = Object.assign({}, defaults, {
+  entryPoints: entryPoints('min'),
 });
 
-function callback(err, stats) {
-  if (err) {
-    console.error(err.stack || err);
-    if (err.details) {
-      console.error(err.details);
-    }
-    return;
-  }
-  const info = stats.toJson();
-  if (stats.hasErrors()) {
-    console.error(info.errors);
-  }
-  if (stats.hasWarnings()) {
-    console.warn(info.warnings);
-  }
-  // Log result...
-}
+esbuild.build(watchConfig);
+esbuild.build(buildConfig);
 
-const compiler = webpack([
-  watchConfig,
-  buildConfig
-]);
-
-switch (command) {
-
-  case 'watch':
-    compiler.watch({
-      // https://webpack.js.org/configuration/watch/#watchoptions
-      aggregateTimeout: 300,
-      poll: undefined
-    }, callback);
-    break;
-
-  case 'build':
-    compiler.run((err, stats) => {
-      // https://webpack.js.org/api/node/#stats-object
-      // https://webpack.js.org/configuration/stats/
-      console.log(stats.toJson());
-      // callback(err, stats);
-      compiler.close();
-    });
-    break;
+if (command === 'watch') {
+
+  const watchedBuilds = Object.keys(watchConfig.entryPoints).map(name => (
+    `${watchConfig.outdir}/${name}.*`
+  ));
+
+  const files = [
+    ...watchedBuilds,
+    'images/*',
+    '**/*.php'
+  ];
+
+  const middleware = (proxyRes, req, res) => {
+    error && res.end(renderError(error));
+  };
+
+  const options = {
+    proxy: {
+      target: `${package.name}.test`,
+      proxyRes: [middleware]
+    },
+    host: 'localhost',
+    open: false,
+    notify: false,
+    logLevel: 'silent',
+    ui: false,
+    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');
 
-  default:
-    console.log(`Command "${command}" not found`);
+    external && qrcode.generate(external, {small: true}, console.log);
+    console.log(`Proxying: ${chalk.green(proxying)}`);
+    console.log(`External: ${chalk.cyan(external || 'offline')}`);
+  });
 }

package/error.js

@@ -0,0 +1,104 @@
+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 space = ' ';
+
+    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 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.repeat(2 + inset)}| </span>${space.repeat(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>`};

package/package.json

@@ -1,22 +1,19 @@
 {
   "name": "@tmbr/bundler",
   "author": "TMBR (https://wearetmbr.com/)",
-  "version": "0.1.3",
+  "version": "1.1.0",
   "license": "MIT",
   "repository": "https://github.com/TMBR/tmbr-bundler",
-  "description": "WordPress development toolkit built on webpack and browser-sync",
+  "description": "WordPress development toolkit built on esbuild and browser-sync",
   "bin": {
     "tmbr-bundler": "cli.js"
   },
   "dependencies": {
-    "@babel/core": "^7.12.17",
-    "@babel/preset-env": "^7.12.17",
-    "babel-loader": "^8.2.2",
-    "browser-sync-webpack-plugin": "^2.3.0",
-    "css-loader": "^5.0.2",
-    "mini-css-extract-plugin": "^1.3.8",
-    "sass": "^1.32.8",
-    "sass-loader": "^11.0.1",
-    "webpack": "^5.23.0"
+    "browser-sync": "^2.27.5",
+    "chalk": "^4.1.2",
+    "esbuild": "^0.13.12",
+    "esbuild-sass-plugin": "^1.5.2",
+    "html-entities": "^2.3.2",
+    "qrcode-terminal": "^0.12.0"
   }
 }