feat: improve errors

Author: evilebottnawi

src/HtmlSourceError.js

@@ -0,0 +1,56 @@
+function getIndices(value) {
+  const result = [];
+  let index = value.indexOf('\n');
+
+  while (index !== -1) {
+    result.push(index + 1);
+    index = value.indexOf('\n', index + 1);
+  }
+
+  result.push(value.length + 1);
+
+  return result;
+}
+
+function offsetToPosition(source, offset) {
+  let index = -1;
+  const indices = getIndices(source);
+  const { length } = indices;
+
+  if (offset < 0) {
+    return {};
+  }
+
+  // eslint-disable-next-line no-plusplus
+  while (++index < length) {
+    if (indices[index] > offset) {
+      return {
+        line: index + 1,
+        column: offset - (indices[index - 1] || 0) + 1,
+        offset,
+      };
+    }
+  }
+
+  return {};
+}
+
+export default class HtmlSourceError extends Error {
+  constructor(error, startIndex, endIndex, source) {
+    super(error);
+
+    this.name = 'HtmlSourceError';
+    this.message = `${this.name}: ${this.message}`;
+    this.startIndex = startIndex;
+    this.endIndex = endIndex;
+    this.source = source;
+
+    const startPosition = offsetToPosition(source, this.startIndex);
+    const endPosition = offsetToPosition(source, this.endIndex);
+
+    this.message += ` (From line ${startPosition.line}, column ${startPosition.column}; to line ${endPosition.line}, column ${endPosition.column})`;
+
+    // We don't need stack
+    this.stack = false;
+  }
+}

src/Warning.js

@@ -2,7 +2,6 @@ import { getOptions } from 'loader-utils';
 import validateOptions from 'schema-utils';
 
 import { sourcePlugin, minimizerPlugin } from './plugins';
-import Warning from './Warning';
 
 import {
   pluginRunner,
@@ -40,37 +39,32 @@ export default function htmlLoader(content) {
     plugins.push(minimizerPlugin({ minimize }));
   }
 
-  const { html, messages, warnings, errors } = pluginRunner(plugins).process(
-    content
-  );
-
-  for (const warning of warnings) {
-    this.emitWarning(new Warning(warning));
-  }
-
-  for (const error of errors) {
-    this.emitError(new Error(error));
-  }
+  const { html, messages } = pluginRunner(plugins).process(content);
 
+  const errors = [];
   const importedMessages = [];
   const replaceableMessages = [];
   const exportedMessages = [];
 
   for (const message of messages) {
     // eslint-disable-next-line default-case
     switch (message.type) {
+      case 'error':
+        errors.push(message.value);
+        break;
       case 'import':
         importedMessages.push(message.value);
         break;
       case 'replacer':
         replaceableMessages.push(message.value);
         break;
-      case 'exports':
-        exportedMessages.push(message.value);
-        break;
     }
   }
 
+  for (const error of errors) {
+    this.emitError(error instanceof Error ? error : new Error(error));
+  }
+
   const codeOptions = { ...options, loaderContext: this };
   const importCode = getImportCode(html, importedMessages, codeOptions);
   const moduleCode = getModuleCode(html, replaceableMessages, codeOptions);

src/index.js

@@ -23,7 +23,7 @@ export default (options) =>
       // eslint-disable-next-line no-param-reassign
       html = minify(html, minimizeOptions);
     } catch (error) {
-      result.errors.push(error);
+      result.messages.push({ type: 'error', value: error });
     }
 
     return html;

src/plugins/minimizer-plugin.js

@@ -3,6 +3,7 @@ import { parse } from 'url';
 import { Parser } from 'htmlparser2';
 import { isUrlRequest, urlToRequest } from 'loader-utils';
 
+import HtmlSourceError from '../HtmlSourceError';
 import { getFilter } from '../utils';
 
 function isASCIIWhitespace(character) {
@@ -448,8 +449,6 @@ export default (options) =>
               unquoted,
             } = this.attributesMeta[attribute];
 
-            // TODO use code frame for errors
-
             if (
               !onOpenTagFilter.test(`:${attribute}`) &&
               !onOpenTagFilter.test(`${tag}:${attribute}`)
@@ -478,11 +477,15 @@ export default (options) =>
               try {
                 sourceSet = parseSrcset(value);
               } catch (error) {
-                result.errors.push(
-                  new Error(
-                    `Bad value for attribute "${attribute}" on element "${tag}": ${error.message}`
-                  )
-                );
+                result.messages.push({
+                  type: 'error',
+                  value: new HtmlSourceError(
+                    `Bad value for attribute "${attribute}" on element "${tag}": ${error.message}`,
+                    parser.startIndex,
+                    parser.endIndex,
+                    html
+                  ),
+                });
 
                 return;
               }
@@ -507,11 +510,15 @@ export default (options) =>
             try {
               source = parseSrc(value);
             } catch (error) {
-              result.errors.push(
-                new Error(
-                  `Bad value for attribute "${attribute}" on element "${tag}": ${error.message}`
-                )
-              );
+              result.messages.push({
+                type: 'error',
+                value: new HtmlSourceError(
+                  `Bad value for attribute "${attribute}" on element "${tag}": ${error.message}`,
+                  parser.startIndex,
+                  parser.endIndex,
+                  html
+                ),
+              });
 
               return;
             }
@@ -527,9 +534,11 @@ export default (options) =>
 
           this.attributesMeta = {};
         },
-        /* istanbul ignore next */
         onerror(error) {
-          result.errors.push(error);
+          result.messages.push({
+            type: 'error',
+            value: error,
+          });
         },
       },
       {

src/plugins/source-plugin.js

@@ -5,7 +5,7 @@ const GET_SOURCE_FROM_IMPORT_NAME = '___HTML_LOADER_GET_SOURCE_FROM_IMPORT___';
 export function pluginRunner(plugins) {
   return {
     process: (content) => {
-      const result = { messages: [], warnings: [], errors: [] };
+      const result = { messages: [] };
 
       for (const plugin of plugins) {
         // eslint-disable-next-line no-param-reassign