From 5bdb53e04267c04d26386690eb063def44c297eb Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Thu, 30 Nov 2023 14:10:32 -0500
Subject: [PATCH 1/4] Use `content-tag` to parse `<template>` instead of
 `ember-template-imports`.

Resolves: #609
Resolves: #706
Resolves: #694
---
 .vscode/launch.json                           |   3 +-
 package.json                                  |   1 +
 .../diagnostic-augmentation.test.ts           |  97 ++++++++++++++
 packages/core/src/common/transform-manager.ts |  18 ++-
 .../create-transform-diagnostic.ts            |   4 +-
 .../core/src/transform/diagnostics/index.ts   |   5 +-
 .../src/transform/template/rewrite-module.ts  | 119 +++++++++++++++++-
 .../transform/template/transformed-module.ts  |   1 +
 .../-private/environment/preprocess.ts        |  88 +++++++++----
 .../globals/index.d.ts                        |   3 +-
 .../package.json                              |   3 +-
 yarn.lock                                     |   7 +-
 12 files changed, 309 insertions(+), 40 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 63e46f36b..c67ba5dd4 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,7 +5,8 @@
       "name": "Debug Extension (Glint + TS)",
       "type": "extensionHost",
       "request": "launch",
-      "preLaunchTask": "npm: build",
+      // this errors. Run `yarn build` before launching this task
+      // "preLaunchTask": "npm: build",
       "autoAttachChildProcesses": true,
       "runtimeExecutable": "${execPath}",
       "outFiles": [
diff --git a/package.json b/package.json
index 9ad983289..f0b7e85c1 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   ],
   "scripts": {
     "lint": "yarn lint:scripts && yarn lint:formatting",
+    "lint:fix": "yarn lint:scripts --fix && yarn prettier --write .",
     "lint:scripts": "yarn eslint --max-warnings 0 --cache .",
     "lint:formatting": "yarn prettier --check .",
     "test": "yarn workspaces run test",
diff --git a/packages/core/__tests__/language-server/diagnostic-augmentation.test.ts b/packages/core/__tests__/language-server/diagnostic-augmentation.test.ts
index c093023c8..b5ef5963c 100644
--- a/packages/core/__tests__/language-server/diagnostic-augmentation.test.ts
+++ b/packages/core/__tests__/language-server/diagnostic-augmentation.test.ts
@@ -13,6 +13,103 @@ describe('Language Server: Diagnostic Augmentation', () => {
     await project.destroy();
   });
 
+  test('There is a content-tag parse error (for a template-only component)', async () => {
+    project.setGlintConfig({ environment: ['ember-loose', 'ember-template-imports'] });
+    project.write({
+      'index.gts': stripIndent`
+        function expectsTwoArgs(a: string, b: number) {
+          console.log(a, b);
+        }
+
+        <template>
+          {{expectsTwoArgs "one"}}
+      `,
+    });
+
+    let server = project.startLanguageServer();
+    let diagnostics = server.getDiagnostics(project.fileURI('index.gts'));
+
+    expect(diagnostics).toMatchInlineSnapshot(`
+      [
+        {
+          "code": 0,
+          "message": "Unexpected eof
+
+       5 │ <template>
+       6 │   {{expectsTwoArgs \\"one\\"}}
+         ╰────",
+          "range": {
+            "end": {
+              "character": 7,
+              "line": 4,
+            },
+            "start": {
+              "character": 6,
+              "line": 4,
+            },
+          },
+          "severity": 1,
+          "source": "glint",
+          "tags": [],
+        },
+      ]
+    `);
+  });
+
+  test('There is a content-tag parse error (for a class component)', async () => {
+    project.setGlintConfig({ environment: ['ember-loose', 'ember-template-imports'] });
+    project.write({
+      'index.gts': stripIndent`
+        import Component from '@glimmer/component';
+
+        export interface AppSignature {
+          Blocks: {
+            expectsTwoParams: [a: string, b: number];
+            expectsAtLeastOneParam: [a: string, ...rest: Array<string>];
+          }
+        }
+
+        function expectsTwoArgs(a: string, b: number) {
+          console.log(a, b);
+        }
+
+        export default class App extends Component<AppSignature> {
+          <template>
+            {{expectsTwoArgs "one"}}
+        }
+      `,
+    });
+
+    let server = project.startLanguageServer();
+    let diagnostics = server.getDiagnostics(project.fileURI('index.gts'));
+
+    expect(diagnostics).toMatchInlineSnapshot(`
+      [
+        {
+          "code": 0,
+          "message": "Unexpected token \`<lexing error: Error { error: (Span { lo: BytePos(382), hi: BytePos(382), ctxt: #0 }, Eof) }>\`. Expected content tag
+
+       16 │     {{expectsTwoArgs \\"one\\"}}
+       17 │ }
+          ╰────",
+          "range": {
+            "end": {
+              "character": 14,
+              "line": 15,
+            },
+            "start": {
+              "character": 13,
+              "line": 15,
+            },
+          },
+          "severity": 1,
+          "source": "glint",
+          "tags": [],
+        },
+      ]
+    `);
+  });
+
   test('expected argument count', async () => {
     project.setGlintConfig({ environment: ['ember-loose', 'ember-template-imports'] });
     project.write({
diff --git a/packages/core/src/common/transform-manager.ts b/packages/core/src/common/transform-manager.ts
index fd849f0e3..1ee6b5c82 100644
--- a/packages/core/src/common/transform-manager.ts
+++ b/packages/core/src/common/transform-manager.ts
@@ -85,6 +85,16 @@ export default class TransformManager {
       );
     }
 
+    // When we have syntax errors we get _too many errors_
+    // if we have an issue with <template> tranformation, we should
+    // make the user fix their syntax before revealing all the other errors.
+    let contentTagErrors = allDiagnostics.filter(
+      (diagnostic) => (diagnostic as Diagnostic).isContentTagError
+    );
+    if (contentTagErrors.length) {
+      return this.ts.sortAndDeduplicateDiagnostics(contentTagErrors);
+    }
+
     return this.ts.sortAndDeduplicateDiagnostics(allDiagnostics);
   }
 
@@ -450,7 +460,13 @@ export default class TransformManager {
 
   private buildTransformDiagnostics(transformedModule: TransformedModule): Array<Diagnostic> {
     return transformedModule.errors.map((error) =>
-      createTransformDiagnostic(this.ts, error.source, error.message, error.location)
+      createTransformDiagnostic(
+        this.ts,
+        error.source,
+        error.message,
+        error.location,
+        error.isContentTagError
+      )
     );
   }
 }
diff --git a/packages/core/src/transform/diagnostics/create-transform-diagnostic.ts b/packages/core/src/transform/diagnostics/create-transform-diagnostic.ts
index 3b6e41b99..7f6bd1f06 100644
--- a/packages/core/src/transform/diagnostics/create-transform-diagnostic.ts
+++ b/packages/core/src/transform/diagnostics/create-transform-diagnostic.ts
@@ -6,9 +6,11 @@ export function createTransformDiagnostic(
   ts: TSLib,
   source: SourceFile,
   message: string,
-  location: Range
+  location: Range,
+  isContentTagError = false
 ): Diagnostic {
   return {
+    isContentTagError,
     isGlintTransformDiagnostic: true,
     category: ts.DiagnosticCategory.Error,
     code: 0,
diff --git a/packages/core/src/transform/diagnostics/index.ts b/packages/core/src/transform/diagnostics/index.ts
index 562b25da7..2f1ccfe9a 100644
--- a/packages/core/src/transform/diagnostics/index.ts
+++ b/packages/core/src/transform/diagnostics/index.ts
@@ -1,6 +1,9 @@
 import type * as ts from 'typescript';
 
-export type Diagnostic = ts.Diagnostic & { isGlintTransformDiagnostic?: boolean };
+export type Diagnostic = ts.Diagnostic & {
+  isGlintTransformDiagnostic?: boolean;
+  isContentTagError?: boolean;
+};
 
 export { rewriteDiagnostic } from './rewrite-diagnostic.js';
 export { createTransformDiagnostic } from './create-transform-diagnostic.js';
diff --git a/packages/core/src/transform/template/rewrite-module.ts b/packages/core/src/transform/template/rewrite-module.ts
index 7ae8a9662..d932eb790 100644
--- a/packages/core/src/transform/template/rewrite-module.ts
+++ b/packages/core/src/transform/template/rewrite-module.ts
@@ -71,7 +71,39 @@ function calculateCorrelatedSpans(
   let errors: Array<TransformError> = [];
   let partialSpans: Array<PartialCorrelatedSpan> = [];
 
-  let { ast, emitMetadata } = parseScript(ts, script, environment);
+  let { ast, emitMetadata, error } = parseScript(ts, script, environment);
+
+  if (error) {
+    if (typeof error === 'string') {
+      errors.push({
+        message: error,
+        location: { start: 0, end: script.contents.length - 1 },
+        source: script,
+      });
+    } else if ('isContentTagError' in error && error.isContentTagError) {
+      // these lines exclude the line with the error, because
+      // adding the column offset will get us on to the line with the error
+      let lines = script.contents.split('\n').slice(0, error.line);
+      let start = lines.reduce((sum, line) => sum + line.length, 0) + error.column - 1;
+      let end = start + 1;
+
+      errors.push({
+        isContentTagError: true,
+        // we have to show the "help" because content-tag has different line numbers
+        // than we are able to discern ourselves.
+        message: error.message + '\n\n' + error.help,
+        source: script,
+        location: {
+          start,
+          end,
+        },
+      });
+    }
+
+    // We've hit a parsing error, so we need to immediately return as the parsed
+    // document must be correct before we can continue.
+    return { errors, directives, partialSpans };
+  }
 
   ts.transform(ast, [
     (context) =>
@@ -103,9 +135,22 @@ function calculateCorrelatedSpans(
   return { errors, directives, partialSpans };
 }
 
+type ParseError =
+  | string
+  | {
+      isContentTagError: true;
+      message: string;
+      line: number;
+      column: number;
+      file: string;
+      help: string;
+      raw: string;
+    };
+
 type ParseResult = {
   ast: ts.SourceFile;
   emitMetadata: WeakMap<ts.Node, GlintEmitMetadata>;
+  error?: ParseError;
 };
 
 function parseScript(ts: TSLib, script: SourceFile, environment: GlintEnvironment): ParseResult {
@@ -116,15 +161,37 @@ function parseScript(ts: TSLib, script: SourceFile, environment: GlintEnvironmen
     void emitMetadata.set(node, Object.assign(emitMetadata.get(node) ?? {}, data));
 
   let { preprocess, transform } = environment.getConfigForExtension(extension) ?? {};
-  let preprocessed = preprocess?.(contents, filename) ?? { contents };
+
+  let original: {
+    contents: string;
+    data?: {
+      // SAFETY: type exists elsewhere (the environments)
+      templateLocations: any[];
+    };
+  } = { contents, data: { templateLocations: [] } };
+
+  let preprocessed = original;
+  let error: ParseError | undefined;
+
+  try {
+    preprocessed = preprocess?.(contents, filename) ?? original;
+  } catch (e) {
+    error = parseError(e, filename);
+  }
+
   let ast = ts.createSourceFile(
     filename,
+    // contents will be transformed and placeholder'd content
+    // or, in the event of a parse error, the original content
+    // in which case, TS will report a ton of errors about some goofy syntax.
+    // We'll want to ignore all of that and only display our parsing error from content-tag.
     preprocessed.contents,
     ts.ScriptTarget.Latest,
     true // setParentNodes
   );
 
-  if (transform) {
+  // Only transform if we don't have a parse error
+  if (!error && transform) {
     let { transformed } = ts.transform(ast, [
       (context) => transform!(preprocessed.data, { ts, context, setEmitMetadata }),
     ]);
@@ -133,7 +200,51 @@ function parseScript(ts: TSLib, script: SourceFile, environment: GlintEnvironmen
     ast = transformed[0];
   }
 
-  return { ast, emitMetadata };
+  return { ast, emitMetadata, error };
+}
+
+function parseError(e: unknown, filename: string): ParseError {
+  if (typeof e === 'object' && e !== null) {
+    // Parse Errors from the rust parser
+    if ('source_code' in e) {
+      // We remove the blank links in the error because swc
+      // pads errors with a leading and trailing blank line.
+      // the error is typically meant for the terminal, so making it
+      // stand out a bit more is a good, but that's more a presentation
+      // concern than just pure error information (which is what we need).
+      // @ts-expect-error object / property narrowing isn't available until TS 5.1
+      let lines = e.source_code.split('\n').filter(Boolean);
+      // Example:
+      // '  × Unexpected eof'
+      // '   ╭─[/home/nullvoxpopuli/Development/OpenSource/glint/test-packages/ts-template-imports-app/src/index.gts:6:1]'
+      // ' 6 │ '
+      // ' 7 │ export const X = <tem'
+      // '   ╰────'
+      let raw = lines.join('\n');
+      let message = lines[0].replace('×', '').trim();
+      let info = lines[1];
+      // a filename may have numbers in it, so we want to remove the filename
+      // before regex searching for numbers at the end of this line
+      let strippedInfo = info.replace(filename, '');
+      let matches = [...strippedInfo.matchAll(/\d+/g)];
+      let line = parseInt(matches[0][0], 10);
+      let column = parseInt(matches[1][0], 10);
+      // The help omits the original file name, because TS will provide that.
+      let help = lines.slice(2).join('\n');
+
+      return {
+        isContentTagError: true,
+        raw,
+        message,
+        line,
+        column,
+        file: filename,
+        help,
+      };
+    }
+  }
+
+  return `${e}`;
 }
 
 /**
diff --git a/packages/core/src/transform/template/transformed-module.ts b/packages/core/src/transform/template/transformed-module.ts
index 0f13b599f..9f3997276 100644
--- a/packages/core/src/transform/template/transformed-module.ts
+++ b/packages/core/src/transform/template/transformed-module.ts
@@ -32,6 +32,7 @@ export type Directive = {
 };
 
 export type TransformError = {
+  isContentTagError?: boolean;
   message: string;
   location: Range;
   source: SourceFile;
diff --git a/packages/environment-ember-template-imports/-private/environment/preprocess.ts b/packages/environment-ember-template-imports/-private/environment/preprocess.ts
index 4ebb76d53..7b20ef309 100644
--- a/packages/environment-ember-template-imports/-private/environment/preprocess.ts
+++ b/packages/environment-ember-template-imports/-private/environment/preprocess.ts
@@ -1,54 +1,88 @@
 import { GlintExtensionPreprocess } from '@glint/core/config-types';
-import { parseTemplates } from 'ember-template-imports';
 import { GLOBAL_TAG, PreprocessData, TemplateLocation } from './common';
 
 const TEMPLATE_START = `[${GLOBAL_TAG}\``;
 const TEMPLATE_END = '`]';
 
+// content-tag 1.2.2+ (including v2+):
+//   The current file is a CommonJS module whose imports will produce 'require' calls;
+//   however, the referenced file is an ECMAScript module and cannot be imported with 'require'.
+//   Consider writing a dynamic 'import("content-tag")' call instead.
+//   To convert this file to an ECMAScript module, change its file extension to '.mts',
+//   or add the field `"type": "module"` to 'glint/packages/environment-ember-template-imports/package.json'.ts(1479)
+//
+// ...Except,
+//    > the referenced file is an ECMAScript module
+//
+//    package.json#exports does refer to a cjs file if required, so TS should be resolving the `require`
+//    entries not the `import` entries.
+//
+//    https://github.com/embroider-build/content-tag/blob/v1.2.2-content-tag/package.json#L13-L21
+//
+// @ts-expect-error see above
+import { Preprocessor } from 'content-tag';
+const p = new Preprocessor();
+
 export const preprocess: GlintExtensionPreprocess<PreprocessData> = (source, path) => {
-  let templates = parseTemplates(source, path, { templateTag: 'template' }).filter(
-    (match) => match.type === 'template-tag'
-  );
+  // NOTE: https://github.com/embroider-build/content-tag/issues/45
+  //       All indicies are byte-index, not char-index.
+  let templates = p.parse(source, { filename: path });
 
   let templateLocations: Array<TemplateLocation> = [];
   let segments: Array<string> = [];
-  let sourceOffset = 0;
-  let delta = 0;
-
-  for (let template of templates) {
-    let { start, end } = template;
-    let startTagLength = template.start[0].length;
-    let endTagLength = template.end[0].length;
-    let startTagOffset = start.index ?? -1;
-    let endTagOffset = end.index ?? -1;
+  let sourceOffsetBytes = 0;
+  let deltaBytes = 0;
 
-    if (startTagOffset === -1 || endTagOffset === -1) continue;
+  // @ts-expect-error TS couldn't find @types/node, which are specified
+  // in the root package.json
+  let sourceBuffer = Buffer.from(source);
 
-    let transformedStart = startTagOffset - delta;
+  for (let template of templates) {
+    let startTagLengthBytes = template.startRange.end - template.startRange.start;
+    let endTagLengthBytes = template.endRange.end - template.endRange.start;
+    let startTagOffsetBytes = template.startRange.start;
+    let endTagOffsetBytes = template.endRange.start;
+    let transformedStartBytes = startTagOffsetBytes - deltaBytes;
 
-    segments.push(source.slice(sourceOffset, startTagOffset));
+    /**
+     * TODO: we want content-tag to manage all this for us, as managing indicies
+     *       can be error-prone.
+     *
+     * SEE: https://github.com/embroider-build/content-tag/issues/39#issuecomment-1832443310
+     */
+    let prefixingSegment = sourceBuffer.slice(sourceOffsetBytes, startTagOffsetBytes);
+    segments.push(prefixingSegment.toString());
     segments.push(TEMPLATE_START);
-    delta += startTagLength - TEMPLATE_START.length;
 
-    let transformedEnd = endTagOffset - delta + TEMPLATE_END.length;
+    // For TEMPLATE_START & TEMPLATE_END, characters === bytes
+    deltaBytes += startTagLengthBytes - TEMPLATE_START.length;
+
+    let transformedEnd = endTagOffsetBytes - deltaBytes + TEMPLATE_END.length;
 
-    segments.push(source.slice(startTagOffset + startTagLength, endTagOffset));
+    let templateContentSegment = sourceBuffer.slice(
+      startTagOffsetBytes + startTagLengthBytes,
+      endTagOffsetBytes
+    );
+    segments.push(templateContentSegment.toString());
     segments.push(TEMPLATE_END);
-    delta += endTagLength - TEMPLATE_END.length;
+    deltaBytes += endTagLengthBytes - TEMPLATE_END.length;
 
-    sourceOffset = endTagOffset + endTagLength;
+    sourceOffsetBytes = endTagOffsetBytes + endTagLengthBytes;
 
+    // TODO: is there a way to convert bytes to chars?
+    //       I think maybe all of this code needs to live in content-tag,
+    //       and give us the option to generate this sort of structure
     templateLocations.push({
-      startTagOffset,
-      endTagOffset,
-      startTagLength,
-      endTagLength,
-      transformedStart,
+      startTagOffset: startTagOffsetBytes,
+      endTagOffset: endTagOffsetBytes,
+      startTagLength: startTagLengthBytes,
+      endTagLength: endTagLengthBytes,
+      transformedStart: transformedStartBytes,
       transformedEnd,
     });
   }
 
-  segments.push(source.slice(sourceOffset));
+  segments.push(sourceBuffer.slice(sourceOffsetBytes).toString());
 
   return {
     contents: segments.join(''),
diff --git a/packages/environment-ember-template-imports/globals/index.d.ts b/packages/environment-ember-template-imports/globals/index.d.ts
index cbaadbaa1..11422cac1 100644
--- a/packages/environment-ember-template-imports/globals/index.d.ts
+++ b/packages/environment-ember-template-imports/globals/index.d.ts
@@ -1,4 +1,3 @@
-
 export default interface Globals {
   // used to hang any macros off of that are provided by config.additionalGlobals
-}
\ No newline at end of file
+}
diff --git a/packages/environment-ember-template-imports/package.json b/packages/environment-ember-template-imports/package.json
index 5561f9fd2..4de8ec3b5 100644
--- a/packages/environment-ember-template-imports/package.json
+++ b/packages/environment-ember-template-imports/package.json
@@ -27,7 +27,7 @@
     "globals/index.d.ts"
   ],
   "dependencies": {
-    "ember-template-imports": "^3.0.0"
+    "content-tag": "^2.0.1"
   },
   "peerDependencies": {
     "@glint/environment-ember-loose": "^1.3.0",
@@ -57,7 +57,6 @@
     "@types/ember__helper": "^4.0.1",
     "@types/ember__modifier": "^4.0.3",
     "@types/ember__routing": "^4.0.12",
-    "ember-template-imports": "^3.0.0",
     "vitest": "^0.22.0"
   },
   "publishConfig": {
diff --git a/yarn.lock b/yarn.lock
index 51efff95e..b51b332de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5235,6 +5235,11 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
+content-tag@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/content-tag/-/content-tag-2.0.1.tgz#0b908ed97e13df60b019039713ab63f1b73f2b22"
+  integrity sha512-jxsETSDs5NbNwyiDuIp672fUMhUyu8Qxc5MOBOJOcgW/fQESI6o5K1LBDrnEE7Bh810a685lWEZHTF4jQYGEEw==
+
 content-type@~1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
@@ -6545,7 +6550,7 @@ ember-template-imports@^1.1.1:
     ember-cli-version-checker "^5.1.2"
     validate-peer-dependencies "^1.1.0"
 
-ember-template-imports@^3.0.0, ember-template-imports@^3.4.0:
+ember-template-imports@^3.4.0:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/ember-template-imports/-/ember-template-imports-3.4.2.tgz#6cf7de7d4b8348a0fddf3aaec4947aa1211289e6"
   integrity sha512-OS8TUVG2kQYYwP3netunLVfeijPoOKIs1SvPQRTNOQX4Pu8xGGBEZmrv0U1YTnQn12Eg+p6w/0UdGbUnITjyzw==

From ad98cbee17731f3cebfd9d447bbe39d64cbb036d Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:50:45 -0400
Subject: [PATCH 2/4] Fix the ability to control-click references to hop to a
 project's tsconfig.json

---
 tsconfig.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index cf8ec082e..df0e55c35 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,14 @@
 {
   "references": [
-    { "path": "packages/core" },
-    { "path": "packages/environment-ember-loose" },
-    { "path": "packages/environment-ember-template-imports" },
-    { "path": "packages/environment-glimmerx" },
-    { "path": "packages/template" },
-    { "path": "packages/type-test" },
-    { "path": "packages/vscode" },
-    { "path": "packages/scripts" },
-    { "path": "test-packages/test-utils" }
+    { "path": "./packages/core" },
+    { "path": "./packages/environment-ember-loose" },
+    { "path": "./packages/environment-ember-template-imports" },
+    { "path": "./packages/environment-glimmerx" },
+    { "path": "./packages/template" },
+    { "path": "./packages/type-test" },
+    { "path": "./packages/vscode" },
+    { "path": "./packages/scripts" },
+    { "path": "./test-packages/test-utils" }
   ],
   "files": []
 }

From 24d0f8a8fa978ab1264867cff947be75a06834e8 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:54:48 -0400
Subject: [PATCH 3/4] Add @types/node to the available types for local dev

---
 packages/environment-ember-template-imports/package.json | 1 +
 tsconfig.compileroptions.json                            | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/environment-ember-template-imports/package.json b/packages/environment-ember-template-imports/package.json
index 4de8ec3b5..f06c54ce8 100644
--- a/packages/environment-ember-template-imports/package.json
+++ b/packages/environment-ember-template-imports/package.json
@@ -52,6 +52,7 @@
     }
   },
   "devDependencies": {
+    "@types/node": "^18.11.5",
     "@types/ember": "^4.0.0",
     "@types/ember__component": "^4.0.10",
     "@types/ember__helper": "^4.0.1",
diff --git a/tsconfig.compileroptions.json b/tsconfig.compileroptions.json
index 085a3add8..0f6ba878a 100644
--- a/tsconfig.compileroptions.json
+++ b/tsconfig.compileroptions.json
@@ -11,6 +11,6 @@
     "composite": true,
     "declaration": true,
     "sourceMap": true,
-    "types": []
+    "types": ["@types/node"]
   }
 }

From 8223b1a9b83595c13c4687dbe2fef561911eaf9b Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:55:16 -0400
Subject: [PATCH 4/4] Fix byte-offset vs char offset mismatch

---
 .../-private/environment/preprocess.ts        | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/environment-ember-template-imports/-private/environment/preprocess.ts b/packages/environment-ember-template-imports/-private/environment/preprocess.ts
index 7b20ef309..cae1553f4 100644
--- a/packages/environment-ember-template-imports/-private/environment/preprocess.ts
+++ b/packages/environment-ember-template-imports/-private/environment/preprocess.ts
@@ -33,9 +33,7 @@ export const preprocess: GlintExtensionPreprocess<PreprocessData> = (source, pat
   let sourceOffsetBytes = 0;
   let deltaBytes = 0;
 
-  // @ts-expect-error TS couldn't find @types/node, which are specified
-  // in the root package.json
-  let sourceBuffer = Buffer.from(source);
+  let sourceBuffer = getBuffer(source);
 
   for (let template of templates) {
     let startTagLengthBytes = template.startRange.end - template.startRange.start;
@@ -69,16 +67,13 @@ export const preprocess: GlintExtensionPreprocess<PreprocessData> = (source, pat
 
     sourceOffsetBytes = endTagOffsetBytes + endTagLengthBytes;
 
-    // TODO: is there a way to convert bytes to chars?
-    //       I think maybe all of this code needs to live in content-tag,
-    //       and give us the option to generate this sort of structure
     templateLocations.push({
-      startTagOffset: startTagOffsetBytes,
-      endTagOffset: endTagOffsetBytes,
-      startTagLength: startTagLengthBytes,
-      endTagLength: endTagLengthBytes,
-      transformedStart: transformedStartBytes,
-      transformedEnd,
+      startTagOffset: byteToCharIndex(source, startTagOffsetBytes),
+      endTagOffset: byteToCharIndex(source, endTagOffsetBytes),
+      startTagLength: byteToCharIndex(source, startTagLengthBytes),
+      endTagLength: byteToCharIndex(source, endTagLengthBytes),
+      transformedStart: byteToCharIndex(source, transformedStartBytes),
+      transformedEnd: byteToCharIndex(source, transformedEnd),
     });
   }
 
@@ -91,3 +86,19 @@ export const preprocess: GlintExtensionPreprocess<PreprocessData> = (source, pat
     },
   };
 };
+
+function byteToCharIndex(str: string, byteOffset: number): number {
+  const buf = getBuffer(str);
+  return buf.slice(0, byteOffset).toString().length;
+}
+
+const BufferMap = new Map();
+
+function getBuffer(str: string): Buffer {
+  let buf = BufferMap.get(str);
+  if (!buf) {
+    buf = Buffer.from(str);
+    BufferMap.set(str, buf);
+  }
+  return buf;
+}