fix(tsx): improve sourcemaps on Windows (#601)

Co-authored-by: Nate Moore <[email protected]>

Author: natemoo-re

.changeset/rude-cherries-turn.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fix TSX sourcemaps on Windows

internal/printer/printer.go

@@ -68,10 +68,6 @@ func (p *printer) printTextWithSourcemap(text string, l loc.Loc) {
 	lastPos := -1
 	for pos, c := range text {
 		diff := pos - lastPos
-		if c == '\r' {
-			start += diff
-			continue
-		}
 		p.addSourceMapping(loc.Loc{Start: start})
 		p.print(string(c))
 		start += diff

internal/sourcemap/sourcemap.go

@@ -209,7 +209,6 @@ func (offset *LineColumnOffset) AdvanceBytes(bytes []byte) {
 		case '\r', '\n', '\u2028', '\u2029':
 			// Handle Windows-specific "\r\n" newlines
 			if c == '\r' && len(bytes) > 0 && bytes[0] == '\n' {
-				columns++
 				continue
 			}
 
@@ -235,7 +234,6 @@ func (offset *LineColumnOffset) AdvanceString(text string) {
 		case '\r', '\n', '\u2028', '\u2029':
 			// Handle Windows-specific "\r\n" newlines
 			if c == '\r' && i+1 < len(text) && text[i+1] == '\n' {
-				columns++
 				continue
 			}
 
@@ -505,7 +503,6 @@ func GenerateLineOffsetTables(contents string, approximateLineCount int) []LineO
 		case '\r', '\n', '\u2028', '\u2029':
 			// Handle Windows-specific "\r\n" newlines
 			if c == '\r' && i+1 < len(contents) && contents[i+1] == '\n' {
-				column++
 				continue
 			}
 

packages/compiler/test/tsx-sourcemaps/template-windows.ts

@@ -0,0 +1,123 @@
+import { test } from 'uvu';
+import * as assert from 'uvu/assert';
+import { testSourcemap } from '../utils';
+
+test('template expression basic', async () => {
+  const input = `<div>{\r\nnonexistent\r\n}</div>`;
+
+  const output = await testSourcemap(input, 'nonexistent');
+  assert.equal(output, {
+    source: 'index.astro',
+    line: 2,
+    column: 1,
+    name: null,
+  });
+});
+
+test('template expression has dot', async () => {
+  const input = `<div>{\nconsole.log(hey)\n}</div>`;
+  const output = await testSourcemap(input, 'log');
+  assert.equal(output, {
+    source: 'index.astro',
+    line: 2,
+    column: 9,
+    name: null,
+  });
+});
+
+test('template expression has dot', async () => {
+  const input = `<div>{\r\nconsole.log(hey)\r\n}</div>`;
+  const output = await testSourcemap(input, 'log');
+  assert.equal(output, {
+    source: 'index.astro',
+    line: 2,
+    column: 9,
+    name: null,
+  });
+});
+
+test('template expression with addition', async () => {
+  const input = `{"hello" + \nhey}`;
+  const output = await testSourcemap(input, 'hey');
+  assert.equal(output, {
+    source: 'index.astro',
+    line: 2,
+    column: 1,
+    name: null,
+  });
+});
+
+test('template expression with addition', async () => {
+  const input = `{"hello" + \r\nhey}`;
+  const output = await testSourcemap(input, 'hey');
+  assert.equal(output, {
+    source: 'index.astro',
+    line: 2,
+    column: 1,
+    name: null,
+  });
+});
+
+test('html attribute', async () => {
+  const input = `<svg\nvalue="foo" color="#000"></svg>`;
+  const output = await testSourcemap(input, 'color');
+  assert.equal(output, {
+    source: 'index.astro',
+    name: null,
+    line: 2,
+    column: 12,
+  });
+});
+
+test('html attribute', async () => {
+  const input = `<svg\r\nvalue="foo" color="#000"></svg>`;
+  const output = await testSourcemap(input, 'color');
+  assert.equal(output, {
+    source: 'index.astro',
+    name: null,
+    line: 2,
+    column: 12,
+  });
+});
+
+test('complex template expression', async () => {
+  const input = `{[].map(ITEM => {\r\nv = "what";\r\nreturn <div>{ITEMS}</div>\r\n})}`;
+  const item = await testSourcemap(input, 'ITEM');
+  const items = await testSourcemap(input, 'ITEMS');
+  assert.equal(item, {
+    source: 'index.astro',
+    name: null,
+    line: 1,
+    column: 8,
+  });
+  assert.equal(items, {
+    source: 'index.astro',
+    name: null,
+    line: 3,
+    column: 14,
+  });
+});
+
+test('attributes', async () => {
+  const input = `<div\r\na="b" className="hello" />`;
+  const className = await testSourcemap(input, 'className');
+  assert.equal(className, {
+    source: 'index.astro',
+    name: null,
+    line: 2,
+    column: 6,
+  });
+});
+
+test('special attributes', async () => {
+  const input = `<div\r\na="b" @on.click="fn" />`;
+  const onClick = await testSourcemap(input, '@on.click');
+  assert.equal(onClick, {
+    source: 'index.astro',
+    name: null,
+    line: 2,
+    column: 6,
+  });
+});
+
+test.run();