@tmbr/bundler 1.0.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/cli.js +12 -4
  2. package/error.js +107 -0
  3. package/package.json +4 -3
package/cli.js CHANGED
@@ -6,10 +6,12 @@ const styles = require('esbuild-sass-plugin').sassPlugin;
6
6
  const qrcode = require('qrcode-terminal');
7
7
  const chalk = require('chalk');
8
8
  const bs = require('browser-sync').create();
9
+ const renderError = require('./error');
9
10
 
10
11
  const cwd = process.cwd();
11
12
  const package = require(`${cwd}/package.json`);
12
13
  const command = process.argv[2];
14
+ let error;
13
15
 
14
16
  if (!['build', 'watch'].includes(command)) {
15
17
  console.log(`Invalid command: ${chalk.red(command)}\n`);
@@ -32,9 +34,8 @@ const errors = (options = {}) => ({
32
34
  name: 'errors',
33
35
  setup(build) {
34
36
  build.onEnd(result => {
35
- if (result.errors.length) {
36
- console.log(result.errors)
37
- }
37
+ error = result.errors[0];
38
+ error && bs.reload();
38
39
  });
39
40
  },
40
41
  });
@@ -102,8 +103,15 @@ if (command === 'watch') {
102
103
  '**/*.php'
103
104
  ];
104
105
 
106
+ const middleware = (proxyRes, req, res) => {
107
+ error && res.end(renderError(error));
108
+ };
109
+
105
110
  const options = {
106
- proxy: `${package.name}.test`,
111
+ proxy: {
112
+ target: `${package.name}.test`,
113
+ proxyRes: [middleware]
114
+ },
107
115
  host: 'localhost',
108
116
  open: false,
109
117
  notify: false,
package/error.js ADDED
@@ -0,0 +1,107 @@
1
+ const fs = require('fs');
2
+ const encode = require('html-entities').encode;
3
+
4
+ module.exports = error => {
5
+
6
+ const { file, line, column } = error.location;
7
+
8
+ const lines = fs.readFileSync(file, 'UTF-8').split(/\r?\n/);
9
+ const index = line - 1;
10
+ const inset = String((lines[index + 2] && line + 2) || (lines[index + 1] && line + 1) || line).split('').length;
11
+
12
+ const print = offset => (
13
+ `<span class="c-gray">${String(line + offset).padStart(2 + inset, ' ')} | </span>` + encode(lines[index + offset])
14
+ );
15
+
16
+ const space = length => {
17
+ return ' '.repeat(length);
18
+ };
19
+
20
+ const output = [
21
+ (index - 2) >= 0 && print(-2),
22
+ (index - 1) >= 0 && print(-1),
23
+ `<span class="c-red fw-700">&gt;</span><span class="c-gray"> ${line} | </span>${encode(lines[index])}`,
24
+ ` <span class="c-gray">${space(2 + inset)}| </span>${space(column ? column - 1 : 0)}<span class="c-red fw-700">^</span>`,
25
+ (index + 1) <= lines.length - 1 && print(1),
26
+ (index + 2) <= lines.length - 1 && print(2),
27
+ ].filter(Boolean).join('\n');
28
+
29
+ return /* html */`
30
+ <!DOCTYPE html>
31
+ <html>
32
+ <head>
33
+
34
+ <meta charset="UTF-8">
35
+ <meta content="width=device-width, initial-scale=1.0" name="viewport">
36
+
37
+ <title>Build Error: ${file}</title>
38
+
39
+ <style>
40
+
41
+ * {
42
+ margin: 0;
43
+ padding: 0;
44
+ box-sizing: border-box;
45
+ }
46
+
47
+ .c-red { color: #ff5555; }
48
+ .c-cyan { color: #88ddff; }
49
+ .c-gray { color: #666666; }
50
+ .fw-700 { font-weight: 700; }
51
+
52
+ ::selection {
53
+ background-color: rgba(95, 126, 151, 0.48);
54
+ }
55
+
56
+ html {
57
+ font: 1rem / 1.5 sans-serif;
58
+ color: #FFF;
59
+ background-color: #151515;
60
+ }
61
+ main {
62
+ max-width: 1280px;
63
+ margin: 3em auto;
64
+ padding: 1rem;
65
+ }
66
+ h1 {
67
+ font-size: 1.5rem;
68
+ line-height: 1.5;
69
+ margin-bottom: 0.25em;
70
+ }
71
+
72
+ .terminal {
73
+ color: #CCC;
74
+ border-radius: 0.25rem;
75
+ }
76
+ .terminal pre {
77
+ font-family: Menlo, Monaco, monospace;
78
+ overflow: scroll;
79
+ }
80
+ .terminal > * {
81
+ padding: 1rem 0;
82
+ }
83
+
84
+ </style>
85
+
86
+ </head>
87
+ <body>
88
+
89
+ <main>
90
+
91
+ <h1>Build Error</h1>
92
+
93
+ <div class="terminal">
94
+
95
+ <pre>
96
+ <span class="c-cyan">${file}</span><span class="c-gray">:</span>${line}<span class="c-gray">:</span>${column}
97
+ <span class="c-red fw-700">${error.text}</span>
98
+
99
+ ${output}
100
+ </pre>
101
+
102
+ </div>
103
+
104
+ </main>
105
+
106
+ </body>
107
+ </html>`};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tmbr/bundler",
3
3
  "author": "TMBR (https://wearetmbr.com/)",
4
- "version": "1.0.1",
4
+ "version": "1.2.1",
5
5
  "license": "MIT",
6
6
  "repository": "https://github.com/TMBR/tmbr-bundler",
7
7
  "description": "WordPress development toolkit built on esbuild and browser-sync",
@@ -11,8 +11,9 @@
11
11
  "dependencies": {
12
12
  "browser-sync": "^2.27.5",
13
13
  "chalk": "^4.1.2",
14
- "esbuild": "^0.13.12",
15
- "esbuild-sass-plugin": "^1.5.2",
14
+ "esbuild": "^0.14.47",
15
+ "esbuild-sass-plugin": "^2.2.6",
16
+ "html-entities": "^2.3.2",
16
17
  "qrcode-terminal": "^0.12.0"
17
18
  }
18
19
  }