Updated tutorial for <template> tags

README.md

@@ -49,8 +49,8 @@ npx @codemod-utils/cli <your-codemod-name>
 1. [`ember-codemod-css-modules`](https://github.com/simplepractice/ember-codemod-css-modules)
 1. [`ember-codemod-ember-render-helpers-to-v1`](https://github.com/buschtoens/ember-render-helpers/tree/main/packages/ember-codemod-ember-render-helpers-to-v1)
 1. [`ember-codemod-pod-to-octane`](https://github.com/ijlee2/ember-codemod-pod-to-octane)
-1. [`ember-codemod-remove-global-styles`](https://github.com/ijlee2/embroider-css-modules/tree/main/packages/ember-codemod-remove-global-styles)
 1. [`ember-codemod-remove-ember-css-modules`](https://github.com/ijlee2/embroider-css-modules/tree/main/packages/ember-codemod-remove-ember-css-modules)
+1. [`ember-codemod-remove-global-styles`](https://github.com/ijlee2/embroider-css-modules/tree/main/packages/ember-codemod-remove-global-styles)
 1. [`ember-codemod-remove-inject-as-service`](https://github.com/ijlee2/ember-codemod-remove-inject-as-service)
 1. [`ember-codemod-rename-test-modules`](https://github.com/ijlee2/ember-codemod-rename-test-modules)
 1. [`ember-codemod-sort-invocations`](https://github.com/ijlee2/ember-codemod-sort-invocations)

tutorials/update-template-tags/03-tackle-gjs-gts.md

@@ -23,7 +23,7 @@ if (filePath.endsWith('.hbs')) {
 }
 ```
 
-Easy, no? Run `./update-test-fixtures.sh` once more to see that,
+Easy, no? Run `./update-test-fixtures.sh` once more to check whether
 
 - The remaining file (`app/components/my-component.gjs`) is updated.
 - Only the test selectors were removed.
@@ -113,7 +113,7 @@ if (filePath.endsWith('.hbs')) {
 }
 ```
 
-`templateTags` is an array of objects. We can run tests to understand what each `templateTag` looks like.
+`templateTags` is an array of objects. Run the tests again to see what `templateTag` contains.
 
 <details>
 
@@ -137,10 +137,38 @@ if (filePath.endsWith('.hbs')) {
     '      Increment by 1\n' +
     '    </button>\n' +
     '  </div>\n',
-  range: { startByte: 186, endByte: 388, startChar: 186, endChar: 388 },
-  startRange: { startByte: 186, endByte: 196, startChar: 186, endChar: 196 },
-  contentRange: { startByte: 196, endByte: 377, startChar: 196, endChar: 377 },
-  endRange: { startByte: 377, endByte: 388, startChar: 377, endChar: 388 }
+  range: {
+    startByte: 186,
+    endByte: 388,
+    startChar: 186,
+    endChar: 388,
+    startUtf16Codepoint: 186,
+    endUtf16Codepoint: 388
+  },
+  startRange: {
+    startByte: 186,
+    endByte: 196,
+    startChar: 186,
+    endChar: 196,
+    startUtf16Codepoint: 186,
+    endUtf16Codepoint: 196
+  },
+  contentRange: {
+    startByte: 196,
+    endByte: 377,
+    startChar: 196,
+    endChar: 377,
+    startUtf16Codepoint: 196,
+    endUtf16Codepoint: 377
+  },
+  endRange: {
+    startByte: 377,
+    endByte: 388,
+    startChar: 377,
+    endChar: 388,
+    startUtf16Codepoint: 377,
+    endUtf16Codepoint: 388
+  }
 }
 {
   type: 'expression',
@@ -153,10 +181,38 @@ if (filePath.endsWith('.hbs')) {
     '      </p>\n' +
     '    </div>\n' +
     '  ',
-  range: { startByte: 408, endByte: 584, startChar: 408, endChar: 584 },
-  startRange: { startByte: 408, endByte: 418, startChar: 408, endChar: 418 },
-  contentRange: { startByte: 418, endByte: 573, startChar: 418, endChar: 573 },
-  endRange: { startByte: 573, endByte: 584, startChar: 573, endChar: 584 }
+  range: {
+    startByte: 408,
+    endByte: 584,
+    startChar: 408,
+    endChar: 584,
+    startUtf16Codepoint: 408,
+    endUtf16Codepoint: 584
+  },
+  startRange: {
+    startByte: 408,
+    endByte: 418,
+    startChar: 408,
+    endChar: 418,
+    startUtf16Codepoint: 408,
+    endUtf16Codepoint: 418
+  },
+  contentRange: {
+    startByte: 418,
+    endByte: 573,
+    startChar: 418,
+    endChar: 573,
+    startUtf16Codepoint: 418,
+    endUtf16Codepoint: 573
+  },
+  endRange: {
+    startByte: 573,
+    endByte: 584,
+    startChar: 573,
+    endChar: 584,
+    startUtf16Codepoint: 573,
+    endUtf16Codepoint: 584
+  }
 }
 {
   type: 'class-member',
@@ -169,10 +225,38 @@ if (filePath.endsWith('.hbs')) {
     '        <Display @count={{this.count}} data-test-my-count />\n' +
     '      </div>\n' +
     '    ',
-  range: { startByte: 711, endByte: 918, startChar: 711, endChar: 918 },
-  startRange: { startByte: 711, endByte: 721, startChar: 711, endChar: 721 },
-  contentRange: { startByte: 721, endByte: 907, startChar: 721, endChar: 907 },
-  endRange: { startByte: 907, endByte: 918, startChar: 907, endChar: 918 }
+  range: {
+    startByte: 711,
+    endByte: 918,
+    startChar: 711,
+    endChar: 918,
+    startUtf16Codepoint: 711,
+    endUtf16Codepoint: 918
+  },
+  startRange: {
+    startByte: 711,
+    endByte: 721,
+    startChar: 711,
+    endChar: 721,
+    startUtf16Codepoint: 711,
+    endUtf16Codepoint: 721
+  },
+  contentRange: {
+    startByte: 721,
+    endByte: 907,
+    startChar: 721,
+    endChar: 907,
+    startUtf16Codepoint: 721,
+    endUtf16Codepoint: 907
+  },
+  endRange: {
+    startByte: 907,
+    endByte: 918,
+    startChar: 907,
+    endChar: 918,
+    startUtf16Codepoint: 907,
+    endUtf16Codepoint: 918
+  }
 }
 ```
 

tutorials/update-template-tags/04-conclusion.md

@@ -1,8 +1,8 @@
 # Conclusion
 
-Even when `content-tag` doesn't provide a way to update `*.{gjs,gts}` files, you can support these files thanks to `@codemod-utils/ast-template-tag`. The best part? You can reuse code.
+Though `content-tag` doesn't provide a way to update `*.{gjs,gts}` files, you can still support these files thanks to `@codemod-utils/ast-template-tag`. The best part? You can reuse code.
 
-As exercise, see if you can update the JavaScript part of a `*.{gjs,gts}` file.
+As exercise, try updating some JavaScript code in `*.{gjs,gts,js,ts}` files.
 
 ```ts
 import { updateJavaScript } from '@codemod-utils/ast-template-tag';
@@ -16,7 +16,7 @@ let file = readFileSync(join(projectRoot, filePath), 'utf8');
 file = updateJavaScript(file, transform);
 ```
 
-How would you tell `transform()` whether the file is in TypeScript (`*.gts`)?
+How would you tell `transform()` whether the file uses `<template>` tag and TypeScript?
 
 <details>
 
@@ -26,6 +26,7 @@ How would you tell `transform()` whether the file is in TypeScript (`*.gts`)?
 import { updateJavaScript } from '@codemod-utils/ast-template-tag';
 
 type Data = {
+  isTemplateTag: boolean;
   isTypeScript: boolean;
 };
 
@@ -36,7 +37,8 @@ function transform(file: string, data: Data): string {
 let file = readFileSync(join(projectRoot, filePath), 'utf8');
 
 const data = {
-  isTypeScript: filePath.endsWith('.gts'),
+  isTemplateTag: filePath.endsWith('.gjs') || filePath.endsWith('.gts'),
+  isTypeScript: filePath.endsWith('.gts') || filePath.endsWith('.ts'),
 };
 
 file = updateJavaScript(file, (code) => {