Error location annotations don't line up when _hs source uses tabs for indentation

Open
#640 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript
Domain
compilers

Research direction

Start at createParserContext in src/_hyperscript.js and reproduce the annotation output with tab-indented, mixed-indentation, and space-indented _hs source. Trace how the marker offset is calculated and verify that the resulting ^^ markers align with the reported source location in each case.

Written by the indexing model from the issue text.

Description

hyperscript's error annotations (the ^^ markers) do not line up with the printed source when it uses tab characters as indentation:

Image Image

When spaces are used in the source, the marker lines up correctly:

Image Image

This issue is because, when the annotation creator (createParserContext) is figuring out where to place the marker, it counts tab characters as a single character. If, on the first example, the tab characters are replaces with single spaces, the marker lines up correctly:

Image

To solve this, either:

  • Around createParserContext's call to String.repeat, tabs would be specially-cased for the offset to count as some number of characters (4, 8, ...) rather than just one.
  • Or, the whitespace before the true start of a line could be copied, where the marker offset will only counted from the "real" start of the line (iow, where the indentation ends), and afterwards the saved whitespace is prepended to the " ".repeat(offset), something like
diff --git a/tmp/1 b/tmp/2
index c054964..a688d74 100644
--- a/tmp/1
+++ b/tmp/2
@@ -4,7 +4,8 @@
             var lines = source.split("\n");
             var line = currentToken && currentToken.line ? currentToken.line - 1 : lines.length - 1;
             var contextLine = lines[line];
+            var leadingWhitespace = contextLine.match(/^\s+/)[0];
             var offset = /** @type {number} */ (
                 currentToken && currentToken.line ? currentToken.column : contextLine.length - 1);
-            return contextLine + "\n" + " ".repeat(offset) + "^^\n\n";
+            return contextLine + "\n" + leadingWhitespace + " ".repeat(offset - leadingWhitespace.length) + "^^\n\n";
         }

This is of course a bit hacky and doesn't take into account things like tabs in the middle of a line (which solution no.1 would do correctly, and only that among other edge cases I'm not smart enough to think of), but it works fine!

Image Image

Even with mixed indentation!

Image Image

Using:

  • _hyperscript 0.9.14, (originally from unpkg)
  • Firefox 141.0.3
  • Debian 13 Linux 6.12.38+deb13-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.12.38-1 (2025-07-16) x86_64 GNU/Linux
Dominant language
JavaScript
Stars
3.8k
Forks
171
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from bigskysoftware/_hyperscript

All issues in bigskysoftware/_hyperscript

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.