Improve preprocess

src/parse/preprocess.ts

@@ -1,10 +1,4 @@
-import {
-  getBuffer,
-  parse,
-  type Range,
-  replaceContents,
-  sliceByteRange,
-} from '../utils/content-tag.js';
+import { parse, type Range, sliceByteRange } from '../utils/content-tag.js';
 
 export interface Template {
   contentRange: Range;
@@ -17,8 +11,6 @@ export interface Template {
   };
 }
 
-const PLACEHOLDER = '~';
-
 /**
  * Replace the template with a parsable placeholder that takes up the same
  * range.
@@ -27,6 +19,9 @@ export function preprocessTemplateRange(
   template: Template,
   code: string,
 ): string {
+  const { start, end } = template.utf16Range;
+  const after = code.slice(end);
+
   let prefix: string;
   let suffix: string;
 
@@ -39,7 +34,7 @@ export function preprocessTemplateRange(
     prefix = '{/*';
     suffix = '*/}';
 
-    const nextToken = sliceByteRange(code, template.range.endByte).match(/\S+/);
+    const nextToken = after.match(/\S+/);
 
     if (nextToken && (nextToken[0] === 'as' || nextToken[0] === 'satisfies')) {
       // Replace with parenthesized ObjectExpression
@@ -48,18 +43,14 @@ export function preprocessTemplateRange(
     }
   }
 
-  // We need to replace forward slash with _something else_, because
-  // forward slash breaks the parsed templates.
-  const contents = template.contents.replaceAll('/', PLACEHOLDER);
+  const before = code.slice(0, start);
+  const spaces = code
+    .slice(start + prefix.length, end - suffix.length)
+    // Replace everything except `\n` with space, so the line and column remain correct
+    // Prettier normalized EOL to `\n`, so we don't need worry about `\r` and `\r\n`
+    .replaceAll(/[^\n]/g, ' ');
 
-  const templateLength = template.range.endByte - template.range.startByte;
-  const spaces =
-    templateLength - getBuffer(contents).length - prefix.length - suffix.length;
-
-  return replaceContents(code, {
-    contents: [prefix, contents, ' '.repeat(spaces), suffix].join(''),
-    range: template.range,
-  });
+  return before + prefix + spaces + suffix + after;
 }
 
 /** Pre-processes the template info, parsing the template content to Glimmer AST. */

src/utils/content-tag.ts

@@ -28,22 +28,6 @@ export function parse(
   return preprocessor.parse(file, options);
 }
 
-export function replaceContents(
-  file: string,
-  options: {
-    contents: string;
-    range: Range;
-  },
-): string {
-  const { contents, range } = options;
-
-  return [
-    sliceByteRange(file, 0, range.startByte),
-    contents,
-    sliceByteRange(file, range.endByte),
-  ].join('');
-}
-
 export function sliceByteRange(
   string_: string,
   indexStart: number,

tests/unit-tests/preprocess.test.ts

@@ -8,40 +8,40 @@ import {
 const TEST_CASES = [
   {
     code: '<template>hi</template>',
-    expected: [`{/*hi               */}`],
+    expected: [`{/*                 */}`],
   },
   {
     code: '<template>/* hi */</template>',
-    expected: [`{/*~* hi *~               */}`],
+    expected: [`{/*                       */}`],
   },
   {
     code: '<template><div>hi</div></template>',
-    expected: [`{/*<div>hi<~div>               */}`],
+    expected: [`{/*                            */}`],
   },
   {
     code: '<template>{{#if true}}hi{{/if}}</template>',
-    expected: [`{/*{{#if true}}hi{{~if}}               */}`],
+    expected: [`{/*                                    */}`],
   },
   {
-    code: '<template>////////////////</template>',
-    expected: [`{/*~~~~~~~~~~~~~~~~               */}`],
+    code: '<template>////////\n////////</template>',
+    expected: [`{/*               \n                */}`],
   },
   {
     code: '<template>💩</template>',
-    expected: [`{/*💩               */}`],
+    expected: [`{/*                 */}`],
   },
   {
     code: 'const a = <template>foo</template>; const b = <template>bar</template>;',
     expected: [
-      `const a = {/*foo               */}; const b = <template>bar</template>;`,
-      `const a = <template>foo</template>; const b = {/*bar               */};`,
+      `const a = {/*                  */}; const b = <template>bar</template>;`,
+      `const a = <template>foo</template>; const b = {/*                  */};`,
     ],
   },
   {
     code: `const a = <template>💩💩💩💩💩💩💩</template>; const b = <template>💩</template>`,
     expected: [
-      `const a = {/*💩💩💩💩💩💩💩               */}; const b = <template>💩</template>`,
-      `const a = <template>💩💩💩💩💩💩💩</template>; const b = {/*💩               */}`,
+      `const a = {/*                             */}; const b = <template>💩</template>`,
+      `const a = <template>💩💩💩💩💩💩💩</template>; const b = {/*                 */}`,
     ],
   },
 ];