From 71fd2d0a4858c0472effce591e1b09b12b147736 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Wed, 12 Mar 2025 21:24:36 +0000
Subject: [PATCH 1/4] renamed JS/TS to GJS/GTS

---
 app/components/{api-index-filter.js => api-index-filter.gjs}      | 0
 app/components/{api-index.js => api-index.gjs}                    | 0
 .../{class-field-description.js => class-field-description.gjs}   | 0
 app/components/{import-example.js => import-example.gjs}          | 0
 app/components/{search-input.js => search-input.gjs}              | 0
 app/components/search-input/{dropdown.js => dropdown.gjs}         | 0
 app/components/{table-of-contents.js => table-of-contents.gjs}    | 0
 .../{api-index-filter-test.js => api-index-filter-test.gjs}       | 0
 .../components/{api-index-test.js => api-index-test.gjs}          | 0
 ...field-description-test.js => class-field-description-test.gjs} | 0
 .../{import-example-test.js => import-example-test.gjs}           | 0
 .../{loading-spinner-test.js => loading-spinner-test.gjs}         | 0
 .../components/{search-input-test.js => search-input-test.gjs}    | 0
 .../{table-of-contents-test.js => table-of-contents-test.gjs}     | 0
 .../helpers/{better-get-test.js => better-get-test.gjs}           | 0
 .../{function-heading-id-test.js => function-heading-id-test.gjs} | 0
 .../integration/helpers/{is-latest-test.js => is-latest-test.gjs} | 0
 .../helpers/{version-lt-test.js => version-lt-test.gjs}           | 0
 18 files changed, 0 insertions(+), 0 deletions(-)
 rename app/components/{api-index-filter.js => api-index-filter.gjs} (100%)
 rename app/components/{api-index.js => api-index.gjs} (100%)
 rename app/components/{class-field-description.js => class-field-description.gjs} (100%)
 rename app/components/{import-example.js => import-example.gjs} (100%)
 rename app/components/{search-input.js => search-input.gjs} (100%)
 rename app/components/search-input/{dropdown.js => dropdown.gjs} (100%)
 rename app/components/{table-of-contents.js => table-of-contents.gjs} (100%)
 rename tests/integration/components/{api-index-filter-test.js => api-index-filter-test.gjs} (100%)
 rename tests/integration/components/{api-index-test.js => api-index-test.gjs} (100%)
 rename tests/integration/components/{class-field-description-test.js => class-field-description-test.gjs} (100%)
 rename tests/integration/components/{import-example-test.js => import-example-test.gjs} (100%)
 rename tests/integration/components/{loading-spinner-test.js => loading-spinner-test.gjs} (100%)
 rename tests/integration/components/{search-input-test.js => search-input-test.gjs} (100%)
 rename tests/integration/components/{table-of-contents-test.js => table-of-contents-test.gjs} (100%)
 rename tests/integration/helpers/{better-get-test.js => better-get-test.gjs} (100%)
 rename tests/integration/helpers/{function-heading-id-test.js => function-heading-id-test.gjs} (100%)
 rename tests/integration/helpers/{is-latest-test.js => is-latest-test.gjs} (100%)
 rename tests/integration/helpers/{version-lt-test.js => version-lt-test.gjs} (100%)

diff --git a/app/components/api-index-filter.js b/app/components/api-index-filter.gjs
similarity index 100%
rename from app/components/api-index-filter.js
rename to app/components/api-index-filter.gjs
diff --git a/app/components/api-index.js b/app/components/api-index.gjs
similarity index 100%
rename from app/components/api-index.js
rename to app/components/api-index.gjs
diff --git a/app/components/class-field-description.js b/app/components/class-field-description.gjs
similarity index 100%
rename from app/components/class-field-description.js
rename to app/components/class-field-description.gjs
diff --git a/app/components/import-example.js b/app/components/import-example.gjs
similarity index 100%
rename from app/components/import-example.js
rename to app/components/import-example.gjs
diff --git a/app/components/search-input.js b/app/components/search-input.gjs
similarity index 100%
rename from app/components/search-input.js
rename to app/components/search-input.gjs
diff --git a/app/components/search-input/dropdown.js b/app/components/search-input/dropdown.gjs
similarity index 100%
rename from app/components/search-input/dropdown.js
rename to app/components/search-input/dropdown.gjs
diff --git a/app/components/table-of-contents.js b/app/components/table-of-contents.gjs
similarity index 100%
rename from app/components/table-of-contents.js
rename to app/components/table-of-contents.gjs
diff --git a/tests/integration/components/api-index-filter-test.js b/tests/integration/components/api-index-filter-test.gjs
similarity index 100%
rename from tests/integration/components/api-index-filter-test.js
rename to tests/integration/components/api-index-filter-test.gjs
diff --git a/tests/integration/components/api-index-test.js b/tests/integration/components/api-index-test.gjs
similarity index 100%
rename from tests/integration/components/api-index-test.js
rename to tests/integration/components/api-index-test.gjs
diff --git a/tests/integration/components/class-field-description-test.js b/tests/integration/components/class-field-description-test.gjs
similarity index 100%
rename from tests/integration/components/class-field-description-test.js
rename to tests/integration/components/class-field-description-test.gjs
diff --git a/tests/integration/components/import-example-test.js b/tests/integration/components/import-example-test.gjs
similarity index 100%
rename from tests/integration/components/import-example-test.js
rename to tests/integration/components/import-example-test.gjs
diff --git a/tests/integration/components/loading-spinner-test.js b/tests/integration/components/loading-spinner-test.gjs
similarity index 100%
rename from tests/integration/components/loading-spinner-test.js
rename to tests/integration/components/loading-spinner-test.gjs
diff --git a/tests/integration/components/search-input-test.js b/tests/integration/components/search-input-test.gjs
similarity index 100%
rename from tests/integration/components/search-input-test.js
rename to tests/integration/components/search-input-test.gjs
diff --git a/tests/integration/components/table-of-contents-test.js b/tests/integration/components/table-of-contents-test.gjs
similarity index 100%
rename from tests/integration/components/table-of-contents-test.js
rename to tests/integration/components/table-of-contents-test.gjs
diff --git a/tests/integration/helpers/better-get-test.js b/tests/integration/helpers/better-get-test.gjs
similarity index 100%
rename from tests/integration/helpers/better-get-test.js
rename to tests/integration/helpers/better-get-test.gjs
diff --git a/tests/integration/helpers/function-heading-id-test.js b/tests/integration/helpers/function-heading-id-test.gjs
similarity index 100%
rename from tests/integration/helpers/function-heading-id-test.js
rename to tests/integration/helpers/function-heading-id-test.gjs
diff --git a/tests/integration/helpers/is-latest-test.js b/tests/integration/helpers/is-latest-test.gjs
similarity index 100%
rename from tests/integration/helpers/is-latest-test.js
rename to tests/integration/helpers/is-latest-test.gjs
diff --git a/tests/integration/helpers/version-lt-test.js b/tests/integration/helpers/version-lt-test.gjs
similarity index 100%
rename from tests/integration/helpers/version-lt-test.js
rename to tests/integration/helpers/version-lt-test.gjs

From d3253bd7db41d614a80109437dfa6dc2b62d5fb9 Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Wed, 12 Mar 2025 21:24:36 +0000
Subject: [PATCH 2/4] renamed HBS to GJS/GTS

---
 app/components/{api-index-filter.hbs => api-index-filter.gjs}     | 0
 app/components/{api-index.hbs => api-index.gjs}                   | 0
 .../{class-field-description.hbs => class-field-description.gjs}  | 0
 .../{ember-data-landing-page.hbs => ember-data-landing-page.gjs}  | 0
 app/components/{ember-landing-page.hbs => ember-landing-page.gjs} | 0
 app/components/{import-example.hbs => import-example.gjs}         | 0
 app/components/{loading-spinner.hbs => loading-spinner.gjs}       | 0
 app/components/{search-input.hbs => search-input.gjs}             | 0
 .../search-input/{dropdown-header.hbs => dropdown-header.gjs}     | 0
 app/components/search-input/{dropdown.hbs => dropdown.gjs}        | 0
 app/components/{table-of-contents.hbs => table-of-contents.gjs}   | 0
 app/templates/{application.hbs => application.gjs}                | 0
 app/templates/{class-index.hbs => class-index.gjs}                | 0
 app/templates/{class.hbs => class.gjs}                            | 0
 app/templates/{data-class.hbs => data-class.gjs}                  | 0
 app/templates/{data-module.hbs => data-module.gjs}                | 0
 app/templates/{ember-cli.hbs => ember-cli.gjs}                    | 0
 app/templates/{error.hbs => error.gjs}                            | 0
 app/templates/{events.hbs => events.gjs}                          | 0
 app/templates/{head.hbs => head.gjs}                              | 0
 app/templates/{loading.hbs => loading.gjs}                        | 0
 app/templates/{methods.hbs => methods.gjs}                        | 0
 app/templates/{project-version.hbs => project-version.gjs}        | 0
 app/templates/project-version/classes/{class.hbs => class.gjs}    | 0
 .../project-version/functions/{function.hbs => function.gjs}      | 0
 app/templates/project-version/{index.hbs => index.gjs}            | 0
 app/templates/project-version/modules/{module.hbs => module.gjs}  | 0
 app/templates/{properties.hbs => properties.gjs}                  | 0
 28 files changed, 0 insertions(+), 0 deletions(-)
 rename app/components/{api-index-filter.hbs => api-index-filter.gjs} (100%)
 rename app/components/{api-index.hbs => api-index.gjs} (100%)
 rename app/components/{class-field-description.hbs => class-field-description.gjs} (100%)
 rename app/components/{ember-data-landing-page.hbs => ember-data-landing-page.gjs} (100%)
 rename app/components/{ember-landing-page.hbs => ember-landing-page.gjs} (100%)
 rename app/components/{import-example.hbs => import-example.gjs} (100%)
 rename app/components/{loading-spinner.hbs => loading-spinner.gjs} (100%)
 rename app/components/{search-input.hbs => search-input.gjs} (100%)
 rename app/components/search-input/{dropdown-header.hbs => dropdown-header.gjs} (100%)
 rename app/components/search-input/{dropdown.hbs => dropdown.gjs} (100%)
 rename app/components/{table-of-contents.hbs => table-of-contents.gjs} (100%)
 rename app/templates/{application.hbs => application.gjs} (100%)
 rename app/templates/{class-index.hbs => class-index.gjs} (100%)
 rename app/templates/{class.hbs => class.gjs} (100%)
 rename app/templates/{data-class.hbs => data-class.gjs} (100%)
 rename app/templates/{data-module.hbs => data-module.gjs} (100%)
 rename app/templates/{ember-cli.hbs => ember-cli.gjs} (100%)
 rename app/templates/{error.hbs => error.gjs} (100%)
 rename app/templates/{events.hbs => events.gjs} (100%)
 rename app/templates/{head.hbs => head.gjs} (100%)
 rename app/templates/{loading.hbs => loading.gjs} (100%)
 rename app/templates/{methods.hbs => methods.gjs} (100%)
 rename app/templates/{project-version.hbs => project-version.gjs} (100%)
 rename app/templates/project-version/classes/{class.hbs => class.gjs} (100%)
 rename app/templates/project-version/functions/{function.hbs => function.gjs} (100%)
 rename app/templates/project-version/{index.hbs => index.gjs} (100%)
 rename app/templates/project-version/modules/{module.hbs => module.gjs} (100%)
 rename app/templates/{properties.hbs => properties.gjs} (100%)

diff --git a/app/components/api-index-filter.hbs b/app/components/api-index-filter.gjs
similarity index 100%
rename from app/components/api-index-filter.hbs
rename to app/components/api-index-filter.gjs
diff --git a/app/components/api-index.hbs b/app/components/api-index.gjs
similarity index 100%
rename from app/components/api-index.hbs
rename to app/components/api-index.gjs
diff --git a/app/components/class-field-description.hbs b/app/components/class-field-description.gjs
similarity index 100%
rename from app/components/class-field-description.hbs
rename to app/components/class-field-description.gjs
diff --git a/app/components/ember-data-landing-page.hbs b/app/components/ember-data-landing-page.gjs
similarity index 100%
rename from app/components/ember-data-landing-page.hbs
rename to app/components/ember-data-landing-page.gjs
diff --git a/app/components/ember-landing-page.hbs b/app/components/ember-landing-page.gjs
similarity index 100%
rename from app/components/ember-landing-page.hbs
rename to app/components/ember-landing-page.gjs
diff --git a/app/components/import-example.hbs b/app/components/import-example.gjs
similarity index 100%
rename from app/components/import-example.hbs
rename to app/components/import-example.gjs
diff --git a/app/components/loading-spinner.hbs b/app/components/loading-spinner.gjs
similarity index 100%
rename from app/components/loading-spinner.hbs
rename to app/components/loading-spinner.gjs
diff --git a/app/components/search-input.hbs b/app/components/search-input.gjs
similarity index 100%
rename from app/components/search-input.hbs
rename to app/components/search-input.gjs
diff --git a/app/components/search-input/dropdown-header.hbs b/app/components/search-input/dropdown-header.gjs
similarity index 100%
rename from app/components/search-input/dropdown-header.hbs
rename to app/components/search-input/dropdown-header.gjs
diff --git a/app/components/search-input/dropdown.hbs b/app/components/search-input/dropdown.gjs
similarity index 100%
rename from app/components/search-input/dropdown.hbs
rename to app/components/search-input/dropdown.gjs
diff --git a/app/components/table-of-contents.hbs b/app/components/table-of-contents.gjs
similarity index 100%
rename from app/components/table-of-contents.hbs
rename to app/components/table-of-contents.gjs
diff --git a/app/templates/application.hbs b/app/templates/application.gjs
similarity index 100%
rename from app/templates/application.hbs
rename to app/templates/application.gjs
diff --git a/app/templates/class-index.hbs b/app/templates/class-index.gjs
similarity index 100%
rename from app/templates/class-index.hbs
rename to app/templates/class-index.gjs
diff --git a/app/templates/class.hbs b/app/templates/class.gjs
similarity index 100%
rename from app/templates/class.hbs
rename to app/templates/class.gjs
diff --git a/app/templates/data-class.hbs b/app/templates/data-class.gjs
similarity index 100%
rename from app/templates/data-class.hbs
rename to app/templates/data-class.gjs
diff --git a/app/templates/data-module.hbs b/app/templates/data-module.gjs
similarity index 100%
rename from app/templates/data-module.hbs
rename to app/templates/data-module.gjs
diff --git a/app/templates/ember-cli.hbs b/app/templates/ember-cli.gjs
similarity index 100%
rename from app/templates/ember-cli.hbs
rename to app/templates/ember-cli.gjs
diff --git a/app/templates/error.hbs b/app/templates/error.gjs
similarity index 100%
rename from app/templates/error.hbs
rename to app/templates/error.gjs
diff --git a/app/templates/events.hbs b/app/templates/events.gjs
similarity index 100%
rename from app/templates/events.hbs
rename to app/templates/events.gjs
diff --git a/app/templates/head.hbs b/app/templates/head.gjs
similarity index 100%
rename from app/templates/head.hbs
rename to app/templates/head.gjs
diff --git a/app/templates/loading.hbs b/app/templates/loading.gjs
similarity index 100%
rename from app/templates/loading.hbs
rename to app/templates/loading.gjs
diff --git a/app/templates/methods.hbs b/app/templates/methods.gjs
similarity index 100%
rename from app/templates/methods.hbs
rename to app/templates/methods.gjs
diff --git a/app/templates/project-version.hbs b/app/templates/project-version.gjs
similarity index 100%
rename from app/templates/project-version.hbs
rename to app/templates/project-version.gjs
diff --git a/app/templates/project-version/classes/class.hbs b/app/templates/project-version/classes/class.gjs
similarity index 100%
rename from app/templates/project-version/classes/class.hbs
rename to app/templates/project-version/classes/class.gjs
diff --git a/app/templates/project-version/functions/function.hbs b/app/templates/project-version/functions/function.gjs
similarity index 100%
rename from app/templates/project-version/functions/function.hbs
rename to app/templates/project-version/functions/function.gjs
diff --git a/app/templates/project-version/index.hbs b/app/templates/project-version/index.gjs
similarity index 100%
rename from app/templates/project-version/index.hbs
rename to app/templates/project-version/index.gjs
diff --git a/app/templates/project-version/modules/module.hbs b/app/templates/project-version/modules/module.gjs
similarity index 100%
rename from app/templates/project-version/modules/module.hbs
rename to app/templates/project-version/modules/module.gjs
diff --git a/app/templates/properties.hbs b/app/templates/properties.gjs
similarity index 100%
rename from app/templates/properties.hbs
rename to app/templates/properties.gjs

From 5a494a97687a5b1e663d6a2eb82d80f1b6d0e62b Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Wed, 12 Mar 2025 21:24:37 +0000
Subject: [PATCH 3/4] applied codemod

---
 app/components/api-index-filter.gjs           |   7 +-
 app/components/api-index.gjs                  |  11 +-
 app/components/class-field-description.gjs    | 114 ++++++-----
 app/components/ember-data-landing-page.gjs    |   5 +-
 app/components/ember-landing-page.gjs         |  29 +--
 app/components/import-example.gjs             |   5 +-
 app/components/loading-spinner.gjs            |  15 +-
 app/components/search-input.gjs               |  51 ++---
 .../search-input/dropdown-header.gjs          |  13 +-
 app/components/search-input/dropdown.gjs      |  78 ++++----
 app/components/table-of-contents.gjs          |  58 +++---
 app/templates/application.gjs                 |  13 +-
 app/templates/class-index.gjs                 |  18 +-
 app/templates/class.gjs                       |   5 +-
 app/templates/data-class.gjs                  |   5 +-
 app/templates/data-module.gjs                 |   5 +-
 app/templates/ember-cli.gjs                   |  12 +-
 app/templates/error.gjs                       |   8 +-
 app/templates/events.gjs                      |  11 +-
 app/templates/head.gjs                        |  20 +-
 app/templates/loading.gjs                     |   5 +-
 app/templates/methods.gjs                     |  13 +-
 app/templates/project-version.gjs             |  37 ++--
 .../project-version/classes/class.gjs         |  71 +++----
 .../project-version/functions/function.gjs    |   5 +-
 app/templates/project-version/index.gjs       |   7 +-
 .../project-version/modules/module.gjs        |  46 +++--
 app/templates/properties.gjs                  |  13 +-
 .../components/api-index-filter-test.gjs      | 181 +++++++-----------
 .../integration/components/api-index-test.gjs | 159 +++++----------
 .../class-field-description-test.gjs          |  31 ++-
 .../components/import-example-test.gjs        |   7 +-
 .../components/loading-spinner-test.gjs       |   8 +-
 .../components/search-input-test.gjs          |   6 +-
 .../components/table-of-contents-test.gjs     |  59 +++---
 tests/integration/helpers/better-get-test.gjs |  12 +-
 .../helpers/function-heading-id-test.gjs      |   7 +-
 tests/integration/helpers/is-latest-test.gjs  |  20 +-
 tests/integration/helpers/version-lt-test.gjs |  12 +-
 39 files changed, 550 insertions(+), 632 deletions(-)

diff --git a/app/components/api-index-filter.gjs b/app/components/api-index-filter.gjs
index ade29d9c7..f865daee4 100644
--- a/app/components/api-index-filter.gjs
+++ b/app/components/api-index-filter.gjs
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-computed-properties-in-native-classes */
+/* eslint-disable ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/require-tagless-components */
 import { classNames } from '@ember-decorators/component';
 import { computed } from '@ember/object';
 import Component from '@ember/component';
@@ -22,7 +22,8 @@ const filterDataComputedParams =
  * @extends Component<{ Args: Args, Blocks: Blocks }>
  */
 @classNames('api-index-filter')
-export default class ApiIndexFilter extends Component {
+export default class ApiIndexFilter extends Component {<template>{{yield this.filteredData}}
+</template>
   @computed('model.methods.[]', filterDataComputedParams)
   get filteredMethods() {
     return this.filterItems('methods');
@@ -117,5 +118,3 @@ export default class ApiIndexFilter extends Component {
     }
   }
 }
-
-{{yield this.filteredData}}
diff --git a/app/components/api-index.gjs b/app/components/api-index.gjs
index ef7535efd..c11294a11 100644
--- a/app/components/api-index.gjs
+++ b/app/components/api-index.gjs
@@ -20,7 +20,10 @@ import Component from '@glimmer/component';
 /**
  * @extends Component<{ Args: Args, Blocks: Blocks }>
  */
-export default class ApiIndex extends Component {
+import { hash } from "@ember/helper";
+export default class ApiIndex extends Component {<template><div>
+{{yield (hash sections=this.sections)}}
+</div></template>
   get sections() {
     return [
       {
@@ -47,9 +50,3 @@ export default class ApiIndex extends Component {
     ];
   }
 }
-
-<div>
-{{yield (hash
-  sections=this.sections)
-}}
-</div>
\ No newline at end of file
diff --git a/app/components/class-field-description.gjs b/app/components/class-field-description.gjs
index 717c64bee..1d89f8884 100644
--- a/app/components/class-field-description.gjs
+++ b/app/components/class-field-description.gjs
@@ -1,93 +1,82 @@
+/* eslint-disable prettier/prettier */
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { on } from "@ember/modifier";
+import { fn, array, concat } from "@ember/helper";
+import svgJar from "ember-svg-jar/helpers/svg-jar";
+import join from "ember-composable-helpers/helpers/join";
+import mapBy from "ember-composable-helpers/helpers/map-by";
+import { LinkTo } from "@ember/routing";
+import githubLink from "ember-api-docs/helpers/github-link";
+import and from "ember-truth-helpers/helpers/and";
+import eq from "ember-api-docs/helpers/eq";
+import ImportExample from "ember-api-docs/components/import-example";
+import MarkdownToHtml from "ember-cli-showdown/components/markdown-to-html";
 
-export default class ClassFieldDescription extends Component {
-  @service
-  legacyModuleMappings;
-
-  get hasImportExample() {
-    return this.legacyModuleMappings.hasFunctionMapping(
-      this.args.field.name,
-      this.args.field.class
-    );
-  }
-
-  /**
-   * Callback for updating the anchor with the field name that was clicked by a user.
-   *
-   * @method updateAnchor
-   * @method fieldName String The name representing the field that was clicked.
-   */
-  @action
-  updateAnchor(fieldName) {
-    this.args.updateAnchor?.(fieldName);
-  }
-}
-
-<section class='{{@type}}'>
+export default class ClassFieldDescription extends Component {<template><section class="{{@type}}">
   {{!-- TODO: Fix this link for a11y --}}
-  <h3 class='class-field-description--link' data-anchor='{{@field.name}}' role='link' {{on 'click' (fn this.updateAnchor @field.name)}}>
-    <a class='anchor' {{!-- template-lint-disable link-href-attributes --}}>
-      {{svg-jar 'fa-link' class='class-field-description--link-hover' width='20px' height='20px'}}
+  <h3 class="class-field-description--link" data-anchor="{{@field.name}}" role="link" {{on "click" (fn this.updateAnchor @field.name)}}>
+    <a class="anchor" {{!-- template-lint-disable link-href-attributes --}}>
+      {{svgJar "fa-link" class="class-field-description--link-hover" width="20px" height="20px"}}
     </a>
-    <span class='{{@type}}-name'>{{@field.name}}</span>
+    <span class="{{@type}}-name">{{@field.name}}</span>
     {{#if @field.params}}
-      <span class='args'>
-        ({{join ', ' (map-by 'name' @field.params)}})
+      <span class="args">
+        ({{join ", " (mapBy "name" @field.params)}})
       </span>
     {{/if}}
     {{#if @field.return}}
-      <span class='return-type'>{{@field.return.type}}</span>
+      <span class="return-type">{{@field.return.type}}</span>
     {{/if}}
     {{#if @field.access}}
-      <span class='access'>{{@field.access}}</span>
+      <span class="access">{{@field.access}}</span>
     {{/if}}
     {{#if @field.deprecated}}
-      <span class='access'>deprecated</span>
+      <span class="access">deprecated</span>
     {{/if}}
   </h3>
   {{#if @model.module}}
-    <div class='attributes'>
-      <div class='attribute'>
-        <span class='attribute-label'>Module:</span>
-        <span class='attribute-value'><LinkTo @route='project-version.modules.module' @models={{array @model.projectVersion.compactVersion @model.module}}>{{@model.module}}</LinkTo></span>
+    <div class="attributes">
+      <div class="attribute">
+        <span class="attribute-label">Module:</span>
+        <span class="attribute-value"><LinkTo @route="project-version.modules.module" @models={{array @model.projectVersion.compactVersion @model.module}}>{{@model.module}}</LinkTo></span>
       </div>
     </div>
   {{/if}}
-  <p class='github-link' data-test-file={{@field.file}}>
+  <p class="github-link" data-test-file={{@field.file}}>
     {{#if @field.inherited}}
       Inherited from
-      <a href='{{github-link @model.project.id @model.projectVersion.version @field.file @field.line}}' target='_blank' rel='noopener noreferrer'>
+      <a href="{{githubLink @model.project.id @model.projectVersion.version @field.file @field.line}}" target="_blank" rel="noopener noreferrer">
         {{@field.inheritedFrom}} {{@field.file}}:{{@field.line}}
       </a>
     {{else}}
       Defined in
-      <a href='{{github-link @model.project.id @model.projectVersion.version @field.file @field.line}}' target='_blank' rel='noopener noreferrer'>
+      <a href="{{githubLink @model.project.id @model.projectVersion.version @field.file @field.line}}" target="_blank" rel="noopener noreferrer">
         {{@field.file}}:{{@field.line}}
       </a>
     {{/if}}
   </p>
   {{#if @field.since}}
-    <p class='field-since'>
+    <p class="field-since">
       Available since v{{@field.since}}
     </p>
   {{/if}}
-  {{#if (and (eq @field.static 1) (eq @field.itemtype 'method') this.hasImportExample)}}
-    <ImportExample @item={{concat '{ ' @field.name ' }'}} @package={{@field.class}}/>
+  {{#if (and (eq @field.static 1) (eq @field.itemtype "method") this.hasImportExample)}}
+    <ImportExample @item={{concat "{ " @field.name " }"}} @package={{@field.class}} />
   {{/if}}
-  <dl class='parameters'>
+  <dl class="parameters">
     {{#each @field.params as |param|}}
-      <div class='parameter'>
+      <div class="parameter">
         <dt>{{param.name}}</dt>
-        <dd class='parameter-type'>{{param.type}}</dd>
+        <dd class="parameter-type">{{param.type}}</dd>
         <dd><MarkdownToHtml @markdown={{param.description}} /></dd>
         {{#if param.props}}
-          <dl class='parameters'>
+          <dl class="parameters">
             {{#each param.props as |prop|}}
-              <div class='prop'>
+              <div class="prop">
                 <dt>{{prop.name}}</dt>
-                <dd class='parameter-type'>{{prop.type}}</dd>
+                <dd class="parameter-type">{{prop.type}}</dd>
                 <dd><MarkdownToHtml @markdown={{prop.description}} /></dd>
               </div>
             {{/each}}
@@ -96,12 +85,33 @@ export default class ClassFieldDescription extends Component {
       </div>
     {{/each}}
     {{#if @field.return}}
-      <div class='return'>
+      <div class="return">
         <dt>returns</dt>
-        <dd class='return-type'>{{@field.return.type}}</dd>
+        <dd class="return-type">{{@field.return.type}}</dd>
         <dd><MarkdownToHtml @markdown={{@field.return.description}} /></dd>
       </div>
     {{/if}}
   </dl>
   <MarkdownToHtml @markdown={{@field.description}} />
-</section>
\ No newline at end of file
+</section></template>
+  @service
+  legacyModuleMappings;
+
+  get hasImportExample() {
+    return this.legacyModuleMappings.hasFunctionMapping(
+      this.args.field.name,
+      this.args.field.class
+    );
+  }
+
+  /**
+   * Callback for updating the anchor with the field name that was clicked by a user.
+   *
+   * @method updateAnchor
+   * @method fieldName String The name representing the field that was clicked.
+   */
+  @action
+  updateAnchor(fieldName) {
+    this.args.updateAnchor?.(fieldName);
+  }
+}
diff --git a/app/components/ember-data-landing-page.gjs b/app/components/ember-data-landing-page.gjs
index 1bf245b34..1d7b31e2a 100644
--- a/app/components/ember-data-landing-page.gjs
+++ b/app/components/ember-data-landing-page.gjs
@@ -1,4 +1,5 @@
-<article class="chapter">
+import { LinkTo } from "@ember/routing";
+<template><article class="chapter">
   <h1>
     Ember Data API Documentation
   </h1>
@@ -53,4 +54,4 @@
       </h5>
     </li>
   </ul>
-</article>
\ No newline at end of file
+</article></template>
\ No newline at end of file
diff --git a/app/components/ember-landing-page.gjs b/app/components/ember-landing-page.gjs
index afa196959..ed49f7010 100644
--- a/app/components/ember-landing-page.gjs
+++ b/app/components/ember-landing-page.gjs
@@ -1,4 +1,6 @@
-<article class="chapter">
+import { LinkTo } from "@ember/routing";
+import { array, hash } from "@ember/helper";
+<template><article class="chapter">
   <h1>Ember API Documentation</h1>
   <p>
     To get started, choose a project (Ember or Ember Data) and a version
@@ -11,18 +13,18 @@
   </p>
   <h2>Commonly searched-for documentation</h2>
   <ul class="spec-method-list">
-    {{! template-lint-disable no-potential-path-strings }}
-    <li>Components - <LinkTo @route='project-version.classes.class' @model='Component'>Classic</LinkTo> or <LinkTo @route='project-version.modules.module' @model='@glimmer/component'>Glimmer</LinkTo>; a view that is completely isolated</li>
-    <li><LinkTo @route='project-version.functions.function' @models={{array '@glimmer/tracking' 'tracked'}}>Tracked</LinkTo> - make your templates responsive to property updates</li>
-    <li><LinkTo @route='project-version.classes.class' @model='ComputedProperty'>Computed Properties</LinkTo> - declare functions as properties</li>
-    {{! template-lint-disable no-potential-path-strings }}
-    <li><LinkTo @route='project-version.classes.class' @model='@ember/object/computed'>Computed Macros</LinkTo> - shorter ways of expressing certain types of computed properties</li>
-    <li><LinkTo @route='project-version.classes.class' @model='EmberArray'>EmberArray</LinkTo> - contains methods like <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberArray' 'forEach'}} @query={{hash anchor='forEach'}}>forEach</LinkTo> and <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberArray' 'mapBy'}} @query={{hash anchor='mapBy'}}>mapBy</LinkTo> that help you iterate over Ember Objects</li>
-    <li><LinkTo @route='project-version.classes.class' @model='EmberObject'>EmberObject</LinkTo> - the main base class for all Ember objects, including the <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberObject' 'get'}} @query={{hash anchor='get'}}>get</LinkTo> and <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberObject' 'set'}} @query={{hash anchor='set'}}>set</LinkTo> methods</li>
-    <li><LinkTo @route='project-version.classes.class' @model='Ember.Templates.helpers'>Ember.Templates.helpers</LinkTo> - built-in functions that can be used in templates, such as the <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Ember.Templates.helpers' 'each'}} @query={{hash anchor='each'}}>each</LinkTo>, <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Ember.Templates.helpers' 'on'}} @query={{hash anchor='on'}}>on</LinkTo> and <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Ember.Templates.helpers' 'fn'}} @query={{hash anchor='fn'}}>fn</LinkTo> helpers</li>
-    <li><LinkTo @route='project-version.classes.class' @model='Helper'>Helpers</LinkTo> - a way to define custom display functions that are used in templates</li>
-    <li><LinkTo @route='project-version.classes.class' @model='Route'>Route</LinkTo> - used to define individual routes, including the <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Route' 'model'}} @query={{hash anchor='model'}}>model</LinkTo> hook for loading data</li>
-    <li><LinkTo @route='project-version.classes.class' @model='Service'>Service</LinkTo> - an Ember object that lives for the duration of the application, and can be made available in different parts of your application</li>
+    {{!-- template-lint-disable no-potential-path-strings --}}
+    <li>Components - <LinkTo @route="project-version.classes.class" @model="Component">Classic</LinkTo> or <LinkTo @route="project-version.modules.module" @model="@glimmer/component">Glimmer</LinkTo>; a view that is completely isolated</li>
+    <li><LinkTo @route="project-version.functions.function" @models={{array "@glimmer/tracking" "tracked"}}>Tracked</LinkTo> - make your templates responsive to property updates</li>
+    <li><LinkTo @route="project-version.classes.class" @model="ComputedProperty">Computed Properties</LinkTo> - declare functions as properties</li>
+    {{!-- template-lint-disable no-potential-path-strings --}}
+    <li><LinkTo @route="project-version.classes.class" @model="@ember/object/computed">Computed Macros</LinkTo> - shorter ways of expressing certain types of computed properties</li>
+    <li><LinkTo @route="project-version.classes.class" @model="EmberArray">EmberArray</LinkTo> - contains methods like <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberArray" "forEach"}} @query={{hash anchor="forEach"}}>forEach</LinkTo> and <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberArray" "mapBy"}} @query={{hash anchor="mapBy"}}>mapBy</LinkTo> that help you iterate over Ember Objects</li>
+    <li><LinkTo @route="project-version.classes.class" @model="EmberObject">EmberObject</LinkTo> - the main base class for all Ember objects, including the <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberObject" "get"}} @query={{hash anchor="get"}}>get</LinkTo> and <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberObject" "set"}} @query={{hash anchor="set"}}>set</LinkTo> methods</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Ember.Templates.helpers">Ember.Templates.helpers</LinkTo> - built-in functions that can be used in templates, such as the <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Ember.Templates.helpers" "each"}} @query={{hash anchor="each"}}>each</LinkTo>, <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Ember.Templates.helpers" "on"}} @query={{hash anchor="on"}}>on</LinkTo> and <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Ember.Templates.helpers" "fn"}} @query={{hash anchor="fn"}}>fn</LinkTo> helpers</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Helper">Helpers</LinkTo> - a way to define custom display functions that are used in templates</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Route">Route</LinkTo> - used to define individual routes, including the <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Route" "model"}} @query={{hash anchor="model"}}>model</LinkTo> hook for loading data</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Service">Service</LinkTo> - an Ember object that lives for the duration of the application, and can be made available in different parts of your application</li>
   </ul>
   <h2>Useful links</h2>
   <ul>
@@ -38,3 +40,4 @@
     </li>
   </ul>
 </article>
+</template>
\ No newline at end of file
diff --git a/app/components/import-example.gjs b/app/components/import-example.gjs
index f9216da92..ae183e1a1 100644
--- a/app/components/import-example.gjs
+++ b/app/components/import-example.gjs
@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
+import MarkdownToHtml from "ember-cli-showdown/components/markdown-to-html";
 
-export default class ImportExample extends Component {
+export default class ImportExample extends Component {<template><MarkdownToHtml @markdown={{this.markdown}} /></template>
   get markdown() {
     let md = `\`\`\`js
 import ${this.args.item} from '${this.args.package}';
@@ -8,5 +9,3 @@ import ${this.args.item} from '${this.args.package}';
     return md;
   }
 }
-
-<MarkdownToHtml @markdown={{this.markdown}} />
\ No newline at end of file
diff --git a/app/components/loading-spinner.gjs b/app/components/loading-spinner.gjs
index f1b4445ec..b888a39a9 100644
--- a/app/components/loading-spinner.gjs
+++ b/app/components/loading-spinner.gjs
@@ -1,9 +1,10 @@
-<div class='loading-spinner'>
-  <div class='sk-folding-cube'>
-    <div class='sk-cube1 sk-cube'></div>
-    <div class='sk-cube2 sk-cube'></div>
-    <div class='sk-cube4 sk-cube'></div>
-    <div class='sk-cube3 sk-cube'></div>
+
+<template><div class="loading-spinner">
+  <div class="sk-folding-cube">
+    <div class="sk-cube1 sk-cube"></div>
+    <div class="sk-cube2 sk-cube"></div>
+    <div class="sk-cube4 sk-cube"></div>
+    <div class="sk-cube3 sk-cube"></div>
   </div>
   {{yield}}
-</div>
\ No newline at end of file
+</div></template>
\ No newline at end of file
diff --git a/app/components/search-input.gjs b/app/components/search-input.gjs
index ad6460205..c2147f374 100644
--- a/app/components/search-input.gjs
+++ b/app/components/search-input.gjs
@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-get */
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 import { get } from '@ember/object';
@@ -5,11 +6,24 @@ import { isPresent } from '@ember/utils';
 import { task, timeout } from 'ember-concurrency';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import perform from "ember-concurrency/helpers/perform";
+import EmberTether from "ember-tether/components/ember-tether";
+import Dropdown from "ember-api-docs/components/search-input/dropdown";
+import and from "ember-truth-helpers/helpers/and";
+import not from "ember-truth-helpers/helpers/not";
+import eq from "ember-api-docs/helpers/eq";
 
 const SEARCH_DEBOUNCE_PERIOD = 300;
 const SEARCH_CLOSE_PERIOD = 200;
 
-export default class SearchInput extends Component {
+export default class SearchInput extends Component {<template>{{!-- template-lint-disable no-action --}}
+<div class="search-input">
+  <input id="search-input" type="search" value={{this.value}} oninput={{perform this.search value="target.value"}} onfocus={{action "onfocus"}} onblur={{action "onblur"}} placeholder="Search" data-test-search-input />
+  {{!-- Search results dropdown --}}
+  <EmberTether @target="#search-input" @targetAttachment="bottom left" @attachment="top left" @constraints={{this._resultTetherConstraints}} @class="ds-dropdown-results">
+    <Dropdown @isVisible={{this._focused}} @results={{this.searchService.results}} @noResults={{if (and (and (not this.searchService.search.isRunning) this.queryIsPresent) (eq this.searchService.results.length 0)) true false}} />
+  </EmberTether>
+</div></template>
   @tracked query = '';
   @tracked _focused = false;
 
@@ -70,38 +84,3 @@ export default class SearchInput extends Component {
     this.closeMenu.perform();
   }
 }
-
-{{! template-lint-disable no-action }}
-<div class='search-input'>
-  <input
-    id='search-input'
-    type='search'
-    value={{this.value}}
-    oninput={{perform this.search value='target.value'}}
-    onfocus={{action 'onfocus'}}
-    onblur={{action 'onblur'}}
-    placeholder='Search'
-    data-test-search-input
-  />
-  {{! Search results dropdown }}
-  <EmberTether
-    @target='#search-input'
-    @targetAttachment='bottom left'
-    @attachment='top left'
-    @constraints={{this._resultTetherConstraints}}
-    @class='ds-dropdown-results'
-  >
-    <SearchInput::Dropdown
-      @isVisible={{this._focused}}
-      @results={{this.searchService.results}}
-      @noResults={{if
-        (and
-          (and (not this.searchService.search.isRunning) this.queryIsPresent)
-          (eq this.searchService.results.length 0)
-        )
-        true
-        false
-      }}
-    />
-  </EmberTether>
-</div>
\ No newline at end of file
diff --git a/app/components/search-input/dropdown-header.gjs b/app/components/search-input/dropdown-header.gjs
index 057816aaa..f01842efb 100644
--- a/app/components/search-input/dropdown-header.gjs
+++ b/app/components/search-input/dropdown-header.gjs
@@ -1,10 +1,11 @@
-<div class='ds-suggestion'>
-  <div class='algolia-docsearch-suggestion algolia-docsearch-suggestion__main'>
-    <div class='algolia-docsearch-suggestion--category-header'>
-      <span class='algolia-docsearch-suggestion--category-header-lvl0'>
+
+<template><div class="ds-suggestion">
+  <div class="algolia-docsearch-suggestion algolia-docsearch-suggestion__main">
+    <div class="algolia-docsearch-suggestion--category-header">
+      <span class="algolia-docsearch-suggestion--category-header-lvl0">
         {{yield}}
       </span>
     </div>
-    <div class='algolia-docsearch-suggestion--wrapper'></div>
+    <div class="algolia-docsearch-suggestion--wrapper"></div>
   </div>
-</div>
\ No newline at end of file
+</div></template>
\ No newline at end of file
diff --git a/app/components/search-input/dropdown.gjs b/app/components/search-input/dropdown.gjs
index 2719e6e53..17ec2e9fb 100644
--- a/app/components/search-input/dropdown.gjs
+++ b/app/components/search-input/dropdown.gjs
@@ -1,16 +1,48 @@
-import {
-  classNames,
-  attributeBindings,
-  tagName,
-} from '@ember-decorators/component';
+/* eslint-disable ember/no-classic-components, ember/no-get, ember/require-tagless-components, prettier/prettier */
+import { classNames, attributeBindings, tagName } from '@ember-decorators/component';
 import { get } from '@ember/object';
 import Component from '@ember/component';
 import { A } from '@ember/array';
+import DropdownHeader from "ember-api-docs/components/search-input/dropdown-header";
+import DropdownResult from "ember-api-docs/components/search-input/dropdown-result";
 
 @tagName('span')
 @classNames('ds-dropdown-menu', 'ds-with-1')
 @attributeBindings('role')
-export default class Dropdown extends Component {
+export default class Dropdown extends Component {<template><span class="ds-suggestions">
+  {{#if this.noResults}}
+    <DropdownHeader>
+      No results found
+    </DropdownHeader>
+    <div class="algolia-docsearch-suggestion">
+      <div class="algolia-docsearch-suggestion--noresults">
+        <p>Try searching the <a href="https://www.emberjs.com/deprecations/" target="_deprecations">deprecations guide</a>.</p>
+      </div>
+    </div>
+
+  {{else}}
+    {{!-- Level 0 hierarchy --}}
+    {{#each-in this._groupedResults as |lvl0section _lvl0results|}}
+      {{!-- Dropdown header --}}
+
+      <DropdownHeader>
+        {{lvl0section}}
+      </DropdownHeader>
+
+      {{!-- Level 1 hierarchy --}}
+      {{#each-in _lvl0results as |lvl1section _lvl1results|}}
+        {{!-- Each result will be shown here --}}
+        {{#each _lvl1results as |result index|}}
+          <DropdownResult @result={{result}} @groupName={{lvl1section}} @groupPosition={{index}} />
+        {{/each}}
+
+      {{/each-in}}
+    {{/each-in}}
+  {{/if}}
+</span>
+
+{{yield}}
+</template>
   // Public API
   role = 'listbox';
 
@@ -74,37 +106,3 @@ export default class Dropdown extends Component {
     }, {});
   }
 }
-
-<span class="ds-suggestions">
-  {{#if this.noResults}}
-    <SearchInput::DropdownHeader>
-      No results found
-    </SearchInput::DropdownHeader>
-    <div class="algolia-docsearch-suggestion">
-      <div class="algolia-docsearch-suggestion--noresults">
-        <p>Try searching the <a href="https://www.emberjs.com/deprecations/" target="_deprecations">deprecations guide</a>.</p>
-      </div>
-    </div>
-
-  {{else}}
-    {{!-- Level 0 hierarchy --}}
-    {{#each-in this._groupedResults as |lvl0section _lvl0results|}}
-      {{!-- Dropdown header --}}
-
-      <SearchInput::DropdownHeader>
-        {{lvl0section}}
-      </SearchInput::DropdownHeader>
-
-      {{!-- Level 1 hierarchy --}}
-      {{#each-in _lvl0results as |lvl1section _lvl1results|}}
-        {{!-- Each result will be shown here --}}
-        {{#each _lvl1results as |result index|}}
-          <SearchInput::DropdownResult @result={{result}} @groupName={{lvl1section}} @groupPosition={{index}} />
-        {{/each}}
-
-      {{/each-in}}
-    {{/each-in}}
-  {{/if}}
-</span>
-
-{{yield}}
diff --git a/app/components/table-of-contents.gjs b/app/components/table-of-contents.gjs
index fbad15ce6..738b48a89 100644
--- a/app/components/table-of-contents.gjs
+++ b/app/components/table-of-contents.gjs
@@ -1,23 +1,19 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import { on } from "@ember/modifier";
+import { fn, array } from "@ember/helper";
+import notEq from "ember-truth-helpers/helpers/not-eq";
+import { LinkTo } from "@ember/routing";
 
-export default class TableOfContents extends Component {
-  @action
-  toggle(type) {
-    const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
-    tableElement.classList.toggle('selected');
-  }
-}
-
-<ol class='toc-level-0'>
-  <li class='toc-level-0'>
-    <a {{on 'click' (fn this.toggle 'modules')}} href='#' data-test-toc-title='packages'>Packages</a>
-    <ol class='toc-level-1 modules selected'>
+export default class TableOfContents extends Component {<template><ol class="toc-level-0">
+  <li class="toc-level-0">
+    <a {{on "click" (fn this.toggle "modules")}} href="#" data-test-toc-title="packages">Packages</a>
+    <ol class="toc-level-1 modules selected">
       {{#each @moduleIDs as |moduleID|}}
 
-        {{#if (not-eq moduleID '@ember/object/computed')}}
-          <li class='toc-level-1' data-test-module={{moduleID}}>
-            <LinkTo @route='project-version.modules.module' @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
+        {{#if (notEq moduleID "@ember/object/computed")}}
+          <li class="toc-level-1" data-test-module={{moduleID}}>
+            <LinkTo @route="project-version.modules.module" @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
           </li>
         {{/if}}
 
@@ -26,30 +22,36 @@ export default class TableOfContents extends Component {
   </li>
 
   {{#if @isShowingNamespaces}}
-    <li class='toc-level-0'>
-      <a {{on 'click' (fn this.toggle 'namespaces')}} href='#' data-test-toc-title='namespaces'>Namespaces</a>
-      <ol class='toc-level-1 namespaces selected'>
+    <li class="toc-level-0">
+      <a {{on "click" (fn this.toggle "namespaces")}} href="#" data-test-toc-title="namespaces">Namespaces</a>
+      <ol class="toc-level-1 namespaces selected">
         {{#each @namespaceIDs as |namespaceID|}}
-          <li class='toc-level-1' data-test-namespace={{namespaceID}}>
-            <LinkTo @route='project-version.namespaces.namespace' @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
+          <li class="toc-level-1" data-test-namespace={{namespaceID}}>
+            <LinkTo @route="project-version.namespaces.namespace" @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
           </li>
         {{/each}}
       </ol>
     </li>
   {{/if}}
 
-  <li class='toc-level-0'>
-    <a {{on 'click' (fn this.toggle 'classes')}} href='#' data-test-toc-title='classes'>Classes</a>
-    <ol class='toc-level-1 classes selected'>
+  <li class="toc-level-0">
+    <a {{on "click" (fn this.toggle "classes")}} href="#" data-test-toc-title="classes">Classes</a>
+    <ol class="toc-level-1 classes selected">
       {{#each @classesIDs as |classID|}}
-        <li class='toc-level-1' data-test-class={{classID}}>
-          <LinkTo @route='project-version.classes.class' @models={{array @version classID}}>{{classID}}</LinkTo>
+        <li class="toc-level-1" data-test-class={{classID}}>
+          <LinkTo @route="project-version.classes.class" @models={{array @version classID}}>{{classID}}</LinkTo>
         </li>
       {{/each}}
     </ol>
   </li>
 </ol>
-<label class='toc-private-toggle'>
-  <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
+<label class="toc-private-toggle">
+  <input type="checkbox" checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class="private-deprecated-toggle" />
   Show Private / Deprecated
-</label>
\ No newline at end of file
+</label></template>
+  @action
+  toggle(type) {
+    const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
+    tableElement.classList.toggle('selected');
+  }
+}
diff --git a/app/templates/application.gjs b/app/templates/application.gjs
index d5e419ae7..eb8609ae5 100644
--- a/app/templates/application.gjs
+++ b/app/templates/application.gjs
@@ -1,5 +1,12 @@
-<EsHeader>
-  <EsNavbar @links={{this.links}}>
+import RouteTemplate from 'ember-route-template'
+import EsHeader from "ember-styleguide/components/es-header";
+import EsNavbar from "ember-styleguide/components/es-navbar";
+import SearchInput from "ember-api-docs/components/search-input";
+import EsFooter from "ember-styleguide/components/es-footer";
+import HeadLayout from "ember-cli-head/components/head-layout";
+import BasicDropdownWormhole from "ember-basic-dropdown/components/basic-dropdown-wormhole";
+export default RouteTemplate(<template><EsHeader>
+  <EsNavbar @links={{@controller.links}}>
     <SearchInput />
   </EsNavbar>
 </EsHeader>
@@ -11,4 +18,4 @@
 {{!-- required by ember-cli-meta-tags --}}
 <HeadLayout />
 
-<BasicDropdownWormhole />
\ No newline at end of file
+<BasicDropdownWormhole /></template>)
\ No newline at end of file
diff --git a/app/templates/class-index.gjs b/app/templates/class-index.gjs
index 57c63ab41..bf461d52b 100644
--- a/app/templates/class-index.gjs
+++ b/app/templates/class-index.gjs
@@ -1,4 +1,9 @@
-<ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
+import RouteTemplate from 'ember-route-template'
+import ApiIndexFilter from "ember-api-docs/components/api-index-filter";
+import ApiIndex from "ember-api-docs/components/api-index";
+import { LinkTo } from "@ember/routing";
+import { array, hash } from "@ember/helper";
+export default RouteTemplate(<template><ApiIndexFilter @model={{@controller.model}} @filterData={{@controller.filterData}} as |filteredModel|>
   <ApiIndex @itemData={{filteredModel}} @classNames="api__index__content" as |sectionData|>
     {{#each sectionData.sections as |section|}}
       <h3 class="api-index-section-title">{{section.title}}</h3>
@@ -6,15 +11,7 @@
         <ul class="{{section.class}}">
           {{#each section.items as |item|}}
             <li data-test-item={{item.name}}>
-              <LinkTo
-                @route="{{this.parentName}}{{section.routeSuffix}}"
-                @models={{array
-                  @model.project.id
-                  @model.projectVersion.compactVersion
-                  @model.name item.name
-                }}
-                @query={{hash anchor=item.name}}
-              >
+              <LinkTo @route="{{@controller.parentName}}{{section.routeSuffix}}" @models={{array @model.project.id @model.projectVersion.compactVersion @model.name item.name}} @query={{hash anchor=item.name}}>
                 {{item.name}}
               </LinkTo>
             </li>
@@ -26,3 +23,4 @@
     {{/each}}
   </ApiIndex>
 </ApiIndexFilter>
+</template>)
\ No newline at end of file
diff --git a/app/templates/class.gjs b/app/templates/class.gjs
index c24cd6895..efe42db24 100644
--- a/app/templates/class.gjs
+++ b/app/templates/class.gjs
@@ -1 +1,4 @@
-{{outlet}}
+import RouteTemplate from 'ember-route-template'
+
+export default RouteTemplate(<template>{{outlet}}
+</template>)
\ No newline at end of file
diff --git a/app/templates/data-class.gjs b/app/templates/data-class.gjs
index c24cd6895..efe42db24 100644
--- a/app/templates/data-class.gjs
+++ b/app/templates/data-class.gjs
@@ -1 +1,4 @@
-{{outlet}}
+import RouteTemplate from 'ember-route-template'
+
+export default RouteTemplate(<template>{{outlet}}
+</template>)
\ No newline at end of file
diff --git a/app/templates/data-module.gjs b/app/templates/data-module.gjs
index c24cd6895..efe42db24 100644
--- a/app/templates/data-module.gjs
+++ b/app/templates/data-module.gjs
@@ -1 +1,4 @@
-{{outlet}}
+import RouteTemplate from 'ember-route-template'
+
+export default RouteTemplate(<template>{{outlet}}
+</template>)
\ No newline at end of file
diff --git a/app/templates/ember-cli.gjs b/app/templates/ember-cli.gjs
index 8d2d34743..5b47019a6 100644
--- a/app/templates/ember-cli.gjs
+++ b/app/templates/ember-cli.gjs
@@ -1,4 +1,7 @@
-{{! template-lint-disable no-inline-styles }}
+import RouteTemplate from 'ember-route-template'
+import { LinkTo } from "@ember/routing";
+import eq from "ember-api-docs/helpers/eq";
+export default RouteTemplate(<template>{{!-- template-lint-disable no-inline-styles --}}
 {{!-- Template is copied from project-version.hbs --}}
 <aside class="sidebar">
   <ol class="toc-level-0">
@@ -8,9 +11,9 @@
     <li class="toc-level-0">
       Projects
       <ol class="toc-level-1 selected" style="display: block;">
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
+        <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq @controller.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
+        <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq @controller.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
+        <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq @controller.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
       </ol>
     </li>
   </ol>
@@ -21,3 +24,4 @@
     <p>Ember CLI API documentation is available on <a href="https://ember-cli.com/api">ember-cli.com/api</a>.</p>
   </article>
 </section>
+</template>)
\ No newline at end of file
diff --git a/app/templates/error.gjs b/app/templates/error.gjs
index 0a9f9d3fd..a61db58a0 100644
--- a/app/templates/error.gjs
+++ b/app/templates/error.gjs
@@ -1,5 +1,8 @@
-<article class="whoops">
-  {{#if (eq this.model.status 404)}}
+import RouteTemplate from 'ember-route-template'
+import eq from "ember-api-docs/helpers/eq";
+import { LinkTo } from "@ember/routing";
+export default RouteTemplate(<template><article class="whoops">
+  {{#if (eq @controller.model.status 404)}}
     <h2 class="whoops__title">Ack! 404 friend, you're in the wrong place</h2>
     <div class="whoops__message">
       <p>
@@ -13,3 +16,4 @@
     </h2>
   {{/if}}
 </article>
+</template>)
\ No newline at end of file
diff --git a/app/templates/events.gjs b/app/templates/events.gjs
index 0b6dd1739..b7fea891f 100644
--- a/app/templates/events.gjs
+++ b/app/templates/events.gjs
@@ -1,6 +1,11 @@
-<EmberAnchor @a={{this.anchor}} />
-<ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
+import RouteTemplate from 'ember-route-template'
+import EmberAnchor from "ember-api-docs/components/ember-anchor";
+import ApiIndexFilter from "ember-api-docs/components/api-index-filter";
+import ClassFieldDescription from "ember-api-docs/components/class-field-description";
+export default RouteTemplate(<template><EmberAnchor @a={{@controller.anchor}} />
+<ApiIndexFilter @model={{@controller.model}} @filterData={{@controller.filterData}} as |filteredModel|>
   {{#each filteredModel.events as |event|}}
-    <ClassFieldDescription @type="event" @field={{event}} @model={{this.model}} />
+    <ClassFieldDescription @type="event" @field={{event}} @model={{@controller.model}} />
   {{/each}}
 </ApiIndexFilter>
+</template>)
\ No newline at end of file
diff --git a/app/templates/head.gjs b/app/templates/head.gjs
index b67e03fa9..58c71b45d 100644
--- a/app/templates/head.gjs
+++ b/app/templates/head.gjs
@@ -1,12 +1,14 @@
-<title>{{this.model.title}}</title>
+import RouteTemplate from 'ember-route-template'
 
-<link rel="dns-prefetch" href="{{this.model.cdnDomain}}">
-<meta property="og:title" content={{this.model.title}}>
+export default RouteTemplate(<template><title>{{@controller.model.title}}</title>
 
-{{#if this.model.description}}
-  <meta name="description" content={{this.model.description}}>
-  <meta property="og:description" content={{this.model.description}}>
+<link rel="dns-prefetch" href="{{@controller.model.cdnDomain}}">
+<meta property="og:title" content={{@controller.model.title}}>
+
+{{#if @controller.model.description}}
+  <meta name="description" content={{@controller.model.description}}>
+  <meta property="og:description" content={{@controller.model.description}}>
 {{/if}}
-{{#unless this.model.isRelease}}
-  <link rel="canonical" href={{this.model.canonicalUrl}}>
-{{/unless}}
\ No newline at end of file
+{{#unless @controller.model.isRelease}}
+  <link rel="canonical" href={{@controller.model.canonicalUrl}}>
+{{/unless}}</template>)
\ No newline at end of file
diff --git a/app/templates/loading.gjs b/app/templates/loading.gjs
index efb8b4ff5..a3a4e3850 100644
--- a/app/templates/loading.gjs
+++ b/app/templates/loading.gjs
@@ -1 +1,4 @@
-<LoadingSpinner />
+import RouteTemplate from 'ember-route-template'
+import LoadingSpinner from "ember-api-docs/components/loading-spinner";
+export default RouteTemplate(<template><LoadingSpinner />
+</template>)
\ No newline at end of file
diff --git a/app/templates/methods.gjs b/app/templates/methods.gjs
index 1d1e03838..2557ee243 100644
--- a/app/templates/methods.gjs
+++ b/app/templates/methods.gjs
@@ -1,7 +1,12 @@
-{{! template-lint-disable no-action }}
-<EmberAnchor @a={{this.anchor}} />
-<ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
+import RouteTemplate from 'ember-route-template'
+import EmberAnchor from "ember-api-docs/components/ember-anchor";
+import ApiIndexFilter from "ember-api-docs/components/api-index-filter";
+import ClassFieldDescription from "ember-api-docs/components/class-field-description";
+export default RouteTemplate(<template>{{!-- template-lint-disable no-action --}}
+<EmberAnchor @a={{@controller.anchor}} />
+<ApiIndexFilter @model={{@controller.model}} @filterData={{@controller.filterData}} as |filteredModel|>
   {{#each filteredModel.methods as |method|}}
-    <ClassFieldDescription @type="method" @field={{method}} @model={{this.model}} @updateAnchor={{action this.updateAnchor}} />
+    <ClassFieldDescription @type="method" @field={{method}} @model={{@controller.model}} @updateAnchor={{action @controller.updateAnchor}} />
   {{/each}}
 </ApiIndexFilter>
+</template>)
\ No newline at end of file
diff --git a/app/templates/project-version.gjs b/app/templates/project-version.gjs
index b4ac9e8a3..815c62ee4 100644
--- a/app/templates/project-version.gjs
+++ b/app/templates/project-version.gjs
@@ -1,4 +1,11 @@
-{{! template-lint-disable no-inline-styles }}
+import RouteTemplate from 'ember-route-template'
+import { LinkTo } from "@ember/routing";
+import eq from "ember-api-docs/helpers/eq";
+import PowerSelect from "ember-power-select/components/power-select";
+import routeAction from "ember-route-action-helper/helpers/route-action";
+import TableOfContents from "ember-api-docs/components/table-of-contents";
+import versionLt from "ember-api-docs/helpers/version-lt";
+export default RouteTemplate(<template>{{!-- template-lint-disable no-inline-styles no-route-action --}}
 <aside class="sidebar">
   <ol class="toc-level-0">
     <li class="toc-level-0" data-test-home>
@@ -7,38 +14,22 @@
     <li class="toc-level-0">
       Projects
       <ol class="toc-level-1 selected" style="display: block;">
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
+        <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq @controller.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
+        <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq @controller.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
+        <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq @controller.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
       </ol>
     </li>
   </ol>
 
   <div class="select-container">
-    <PowerSelect
-      @onChange={{route-action "updateProject" this.activeProject}}
-      @options={{this.projectVersions}}
-      @selected={{this.selectedProjectVersion}}
-      @ariaLabel="Select a version"
-      @required={{true}}
-      @searchField="compactVersion"
-      @searchEnabled={{true}}
-      as |ver|
-    >
+    <PowerSelect @onChange={{routeAction "updateProject" @controller.activeProject}} @options={{@controller.projectVersions}} @selected={{@controller.selectedProjectVersion}} @ariaLabel="Select a version" @required={{true}} @searchField="compactVersion" @searchEnabled={{true}} as |ver|>
       {{ver.compactVersion}}
     </PowerSelect>
   </div>
 
-  <TableOfContents
-    @version={{this.urlVersion}}
-    @classesIDs={{this.shownClassesIDs}}
-    @moduleIDs={{this.shownModuleIDs}}
-    @namespaceIDs={{this.shownNamespaceIDs}}
-    @showPrivateClasses={{this.showPrivateClasses}}
-    @togglePrivateClasses={{this.togglePrivateClasses}}
-    @isShowingNamespaces={{version-lt this.selectedProjectVersion.compactVersion "2.16"}}
-  />
+  <TableOfContents @version={{@controller.urlVersion}} @classesIDs={{@controller.shownClassesIDs}} @moduleIDs={{@controller.shownModuleIDs}} @namespaceIDs={{@controller.shownNamespaceIDs}} @showPrivateClasses={{@controller.showPrivateClasses}} @togglePrivateClasses={{@controller.togglePrivateClasses}} @isShowingNamespaces={{versionLt @controller.selectedProjectVersion.compactVersion "2.16"}} />
 </aside>
 <section class="content">
   {{outlet}}
 </section>
+</template>)
\ No newline at end of file
diff --git a/app/templates/project-version/classes/class.gjs b/app/templates/project-version/classes/class.gjs
index 85cacb66c..97913e601 100644
--- a/app/templates/project-version/classes/class.gjs
+++ b/app/templates/project-version/classes/class.gjs
@@ -1,7 +1,20 @@
-{{! template-lint-disable no-action }}
+import RouteTemplate from 'ember-route-template'
+import and from "ember-truth-helpers/helpers/and";
+import isLatest from "ember-api-docs/helpers/is-latest";
+import githubLink from "ember-api-docs/helpers/github-link";
+import svgJar from "ember-svg-jar/helpers/svg-jar";
+import { LinkTo } from "@ember/routing";
+import { array, concat, hash } from "@ember/helper";
+import notEq from "ember-truth-helpers/helpers/not-eq";
+import not from "ember-truth-helpers/helpers/not";
+import eq from "ember-api-docs/helpers/eq";
+import ImportExample from "ember-api-docs/components/import-example";
+import MarkdownToHtml from "ember-cli-showdown/components/markdown-to-html";
+import or from "ember-truth-helpers/helpers/or";
+export default RouteTemplate(<template>{{!-- template-lint-disable no-action --}}
 <article class="chapter">
-  {{#if (and @model.project.id @model.file @model.line (is-latest version=@model.projectVersion.version allVersions=this.allVersions))}}
-    <a data-tooltip="Edit on Github" class="heading__link__edit" href="{{github-link @model.project.id @model.projectVersion.version @model.file @model.line isEdit=true}}" target="_blank" rel="noopener noreferrer">{{svg-jar "fa-pencil"}}</a>
+  {{#if (and @model.project.id @model.file @model.line (isLatest version=@model.projectVersion.version allVersions=@controller.allVersions))}}
+    <a data-tooltip="Edit on Github" class="heading__link__edit" href="{{githubLink @model.project.id @model.projectVersion.version @model.file @model.line isEdit=true}}" target="_blank" rel="noopener noreferrer">{{svgJar "fa-pencil"}}</a>
   {{/if}}
   <h1 class="module-name">Class {{@model.name}}</h1>
   {{#if @model.access}}<span class="access">{{@model.access}}</span>{{/if}}
@@ -11,11 +24,7 @@
       <div class="attribute">
         <span class="attribute-label">Extends:</span>
         <span class="attribute-value">
-          <LinkTo
-            @route="project-version.classes.class"
-            @models={{array @model.extendedClassProjectName @model.projectVersion.compactVersion @model.extendedClassShortName}}
-            data-test-extends-link
-          >
+          <LinkTo @route="project-version.classes.class" @models={{array @model.extendedClassProjectName @model.projectVersion.compactVersion @model.extendedClassShortName}} data-test-extends-link>
             {{@model.extends}}
           </LinkTo>
         </span>
@@ -26,7 +35,7 @@
         <span class="attribute-label">Uses:</span>
         <span class="attribute-value">
           {{#each @model.usesObjects as |parentClass idx|}}
-            {{#if (not-eq idx 0)}}<span class="comma">,</span>{{/if}}
+            {{#if (notEq idx 0)}}<span class="comma">,</span>{{/if}}
             <LinkTo @route="project-version.classes.class" @models={{array parentClass.projectId @model.projectVersion.compactVersion parentClass.shortName}} data-test-uses-link>{{parentClass.name}}</LinkTo>
           {{/each}}
         </span>
@@ -36,7 +45,7 @@
       <div class="attribute">
         <span class="attribute-label">Defined in:</span>
         <span class="attribute-value">
-          <a href="{{github-link @model.project.id @model.projectVersion.version @model.file @model.line}}" target="_blank" rel="noopener noreferrer">{{@model.file}}:{{@model.line}}</a>
+          <a href="{{githubLink @model.project.id @model.projectVersion.version @model.file @model.line}}" target="_blank" rel="noopener noreferrer">{{@model.file}}:{{@model.line}}</a>
         </span>
       </div>
     {{/if}}
@@ -44,10 +53,7 @@
       <div class="attribute">
         <span class="attribute-label">Module:</span>
         <span class="attribute-value">
-          <LinkTo
-            @route="project-version.modules.module"
-            @models={{array @model.projectVersion.compactVersion @model.module}}
-          >
+          <LinkTo @route="project-version.modules.module" @models={{array @model.projectVersion.compactVersion @model.module}}>
             {{@model.module}}
           </LinkTo>
         </span>
@@ -60,29 +66,29 @@
       </div>
     {{/if}}
   </div>
-  {{#if (and (not (eq this.static 1)) this.hasImportExample)}}
-    <ImportExample @item={{@model.name}} @package={{this.module}} />
+  {{#if (and (not (eq @controller.static 1)) @controller.hasImportExample)}}
+    <ImportExample @item={{@model.name}} @package={{@controller.module}} />
   {{/if}}
   <p class="description"><MarkdownToHtml @markdown={{@model.description}} /></p>
 
   {{#if (or @model.methods @model.properties @model.events)}}
     <div class="tabbed-layout">
       <nav class="tabbed-layout__menu">
-        <LinkTo @route={{concat this.parentName ".index" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".index"}} data-test-tab="index">
+        <LinkTo @route={{concat @controller.parentName ".index"}} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat @controller.parentName ".index"}} data-test-tab="index">
           <span>Index</span>
         </LinkTo>
         {{#if @model.methods}}
-          <LinkTo @route={{concat this.parentName ".methods" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".methods"}} data-test-tab="methods">
+          <LinkTo @route={{concat @controller.parentName ".methods"}} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat @controller.parentName ".methods"}} data-test-tab="methods">
             <span>Methods</span>
           </LinkTo>
         {{/if}}
         {{#if @model.properties}}
-          <LinkTo @route={{concat this.parentName ".properties" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".properties"}} data-test-tab="properties">
+          <LinkTo @route={{concat @controller.parentName ".properties"}} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat @controller.parentName ".properties"}} data-test-tab="properties">
             <span>Properties</span>
           </LinkTo>
         {{/if}}
         {{#if @model.events}}
-          <LinkTo @route={{concat this.parentName ".events" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".events"}} data-test-tab="events">
+          <LinkTo @route={{concat @controller.parentName ".events"}} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat @controller.parentName ".events"}} data-test-tab="events">
             <span>Events</span>
           </LinkTo>
         {{/if}}
@@ -90,35 +96,19 @@
       <section>
         Show:
         <label class="access-checkbox">
-          <input id="inherited-toggle"
-                 data-test-checkbox="inherited"
-                 type="checkbox"
-                 checked={{this.filterData.showInherited}}
-                 onchange={{action "updateFilter" "showInherited"}}>
+          <input id="inherited-toggle" data-test-checkbox="inherited" type="checkbox" checked={{@controller.filterData.showInherited}} onchange={{action "updateFilter" "showInherited"}}>
           Inherited
         </label>
         <label class="access-checkbox">
-          <input id="protected-toggle"
-                 data-test-checkbox="protected"
-                 type="checkbox"
-                 checked={{this.filterData.showProtected}}
-                 onchange={{action "updateFilter" "showProtected"}}>
+          <input id="protected-toggle" data-test-checkbox="protected" type="checkbox" checked={{@controller.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
           Protected
         </label>
         <label class="access-checkbox">
-          <input id="private-toggle"
-                 data-test-checkbox="private"
-                 type="checkbox"
-                 checked={{this.filterData.showPrivate}}
-                 onchange={{action "updateFilter" "showPrivate"}}>
+          <input id="private-toggle" data-test-checkbox="private" type="checkbox" checked={{@controller.filterData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
           Private
         </label>
         <label class="access-checkbox">
-          <input id="deprecated-toggle"
-                 data-test-checkbox="deprecated"
-                 type="checkbox"
-                 checked={{this.filterData.showDeprecated}}
-                 onchange={{action "updateFilter" "showDeprecated"}}>
+          <input id="deprecated-toggle" data-test-checkbox="deprecated" type="checkbox" checked={{@controller.filterData.showDeprecated}} onchange={{action "updateFilter" "showDeprecated"}}>
           Deprecated
         </label>
       </section>
@@ -128,3 +118,4 @@
   {{/if}}
 
 </article>
+</template>)
\ No newline at end of file
diff --git a/app/templates/project-version/functions/function.gjs b/app/templates/project-version/functions/function.gjs
index 51acaf4da..34fcda672 100644
--- a/app/templates/project-version/functions/function.gjs
+++ b/app/templates/project-version/functions/function.gjs
@@ -1,2 +1,5 @@
-<h1 class="module-name">Function</h1>
+import RouteTemplate from 'ember-route-template'
+import ClassFieldDescription from "ember-api-docs/components/class-field-description";
+export default RouteTemplate(<template><h1 class="module-name">Function</h1>
 <ClassFieldDescription @type="method" @field={{@model.fn}} @model={{@model.fnModule}} />
+</template>)
\ No newline at end of file
diff --git a/app/templates/project-version/index.gjs b/app/templates/project-version/index.gjs
index af49c7180..f63db5221 100644
--- a/app/templates/project-version/index.gjs
+++ b/app/templates/project-version/index.gjs
@@ -1,5 +1,10 @@
-{{#if (eq @model.id "ember-data")}}
+import RouteTemplate from 'ember-route-template'
+import eq from "ember-api-docs/helpers/eq";
+import EmberDataLandingPage from "ember-api-docs/components/ember-data-landing-page";
+import EmberLandingPage from "ember-api-docs/components/ember-landing-page";
+export default RouteTemplate(<template>{{#if (eq @model.id "ember-data")}}
   <EmberDataLandingPage />
 {{else}}
   <EmberLandingPage />
 {{/if}}
+</template>)
\ No newline at end of file
diff --git a/app/templates/project-version/modules/module.gjs b/app/templates/project-version/modules/module.gjs
index 314f9e4a5..55c66ec92 100644
--- a/app/templates/project-version/modules/module.gjs
+++ b/app/templates/project-version/modules/module.gjs
@@ -1,30 +1,41 @@
+import RouteTemplate from 'ember-route-template'
+import eq from "ember-api-docs/helpers/eq";
+import { LinkTo } from "@ember/routing";
+import { array } from "@ember/helper";
+import MarkdownToHtml from "ember-cli-showdown/components/markdown-to-html";
+import not from "ember-truth-helpers/helpers/not";
+import and from "ember-truth-helpers/helpers/and";
+import gt from "ember-truth-helpers/helpers/gt";
+import functionHeadingId from "ember-api-docs/helpers/function-heading-id";
+import betterGet from "ember-api-docs/helpers/better-get";
+export default RouteTemplate(<template>{{!-- template-lint-disable no-invalid-link-text --}}
 <article class="chapter">
-  {{#if (eq this.model.name 'ember-data-overview')}}
+  {{#if (eq @controller.model.name "ember-data-overview")}}
     <h1 class="module-name">EmberData Overview</h1>
   {{else}}
-    <h1 class="module-name">Package {{this.model.name}}</h1>
+    <h1 class="module-name">Package {{@controller.model.name}}</h1>
   {{/if}}
-  {{#if this.model.access}}<span class="access">{{this.model.access}}</span>{{/if}}
+  {{#if @controller.model.access}}<span class="access">{{@controller.model.access}}</span>{{/if}}
 
   <p class="attributes">
-    {{#if this.model.parent}}
+    {{#if @controller.model.parent}}
       <div class="attribute">
         <span class="attribute-label">Parent:</span>
-        <span class="attribute-value"><LinkTo @route="project-version.modules.module" @models={{array this.model.projectVersion.compactVersion this.model.parent}}>{{this.model.parent}}</LinkTo></span>
+        <span class="attribute-value"><LinkTo @route="project-version.modules.module" @models={{array @controller.model.projectVersion.compactVersion @controller.model.parent}}>{{@controller.model.parent}}</LinkTo></span>
       </div>
     {{/if}}
   </p>
 
-  <p class="description"><MarkdownToHtml @markdown={{this.model.description}} /></p>
+  <p class="description"><MarkdownToHtml @markdown={{@controller.model.description}} /></p>
 
-  {{#if this.submodules}}
+  {{#if @controller.submodules}}
     <section>
       <h2 id="submodules" class="anchorable-toc">
         <a href="#submodules" class="toc-anchor"></a>
         Submodules
       </h2>
       <ul class="spec-method-list">
-        {{#each this.submodules as |module|}}
+        {{#each @controller.submodules as |module|}}
           <li>
             <LinkTo @route="project-version.modules.module" @model={{module}}>
               {{module}}
@@ -35,15 +46,15 @@
     </section>
   {{/if}}
 
-  {{#if this.classesAndNamespaces}}
+  {{#if @controller.classesAndNamespaces}}
     <section>
       <h2 id="classes" class="anchorable-toc">
         <a href="#classes" class="toc-anchor"></a>
         Classes
       </h2>
       <ul class="spec-property-list">
-        {{#each this.classesAndNamespaces as |klass|}}
-          {{#if (not (and (eq this.model.name "ember-data") (eq klass "Ember")))}}
+        {{#each @controller.classesAndNamespaces as |klass|}}
+          {{#if (not (and (eq @controller.model.name "ember-data") (eq klass "Ember")))}}
             <li>
               <LinkTo @route="project-version.classes.class" @model={{klass}}>
                 {{klass}}
@@ -55,21 +66,21 @@
     </section>
   {{/if}}
 
-  {{#if (and this.functionHeadings (gt this.functionHeadings.length 0)) }}
+  {{#if (and @controller.functionHeadings (gt @controller.functionHeadings.length 0))}}
 
     <h2 id="functions" class="anchorable-toc">
       <a href="#functions" class="toc-anchor"></a>
       Functions
     </h2>
-    {{#each this.functionHeadings as |funcHeading|}}
-      <h4 id="{{function-heading-id funcHeading}}" class="anchorable-toc">
-        <a href="#{{function-heading-id funcHeading}}" class="toc-anchor"></a>
+    {{#each @controller.functionHeadings as |funcHeading|}}
+      <h4 id="{{functionHeadingId funcHeading}}" class="anchorable-toc">
+        <a href="#{{functionHeadingId funcHeading}}" class="toc-anchor"></a>
         {{funcHeading}}
       </h4>
       <ul class="spec-method-list">
-        {{#each (better-get this.functions funcHeading) as |method|}}
+        {{#each (betterGet @controller.functions funcHeading) as |method|}}
           <li>
-            <LinkTo @route="project-version.functions.function" @models={{array this.model.project.id this.model.projectVersion.compactVersion funcHeading method.name}}>
+            <LinkTo @route="project-version.functions.function" @models={{array @controller.model.project.id @controller.model.projectVersion.compactVersion funcHeading method.name}}>
               {{method.name}}
             </LinkTo>
           </li>
@@ -81,3 +92,4 @@
   {{outlet}}
 
 </article>
+</template>)
\ No newline at end of file
diff --git a/app/templates/properties.gjs b/app/templates/properties.gjs
index aadb2ef45..6e2053eef 100644
--- a/app/templates/properties.gjs
+++ b/app/templates/properties.gjs
@@ -1,7 +1,12 @@
-{{! template-lint-disable no-action }}
-<EmberAnchor @a={{this.anchor}} />
-<ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
+import RouteTemplate from 'ember-route-template'
+import EmberAnchor from "ember-api-docs/components/ember-anchor";
+import ApiIndexFilter from "ember-api-docs/components/api-index-filter";
+import ClassFieldDescription from "ember-api-docs/components/class-field-description";
+export default RouteTemplate(<template>{{!-- template-lint-disable no-action --}}
+<EmberAnchor @a={{@controller.anchor}} />
+<ApiIndexFilter @model={{@controller.model}} @filterData={{@controller.filterData}} as |filteredModel|>
   {{#each filteredModel.properties as |property|}}
-    <ClassFieldDescription @type="property" @field={{property}} @model={{this.model}} @updateAnchor={{action "updateAnchor"}} />
+    <ClassFieldDescription @type="property" @field={{property}} @model={{@controller.model}} @updateAnchor={{action "updateAnchor"}} />
   {{/each}}
 </ApiIndexFilter>
+</template>)
\ No newline at end of file
diff --git a/tests/integration/components/api-index-filter-test.gjs b/tests/integration/components/api-index-filter-test.gjs
index bacae9407..f2547cd47 100644
--- a/tests/integration/components/api-index-filter-test.gjs
+++ b/tests/integration/components/api-index-filter-test.gjs
@@ -1,8 +1,9 @@
+/* eslint-disable prettier/prettier */
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, click, findAll } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import ApiIndexFilter from "ember-api-docs/components/api-index-filter";
 
 module('Integration | Component | api index filter', function (hooks) {
   setupRenderingTest(hooks);
@@ -71,7 +72,8 @@ module('Integration | Component | api index filter', function (hooks) {
     ],
   });
 
-  test('clicking inherited shows inherited methods', async function (assert) {
+  test('clicking inherited shows inherited methods', async function (assert) {const self = this;
+
     let filterData = EmberObject.create({
       showInherited: false,
       showProtected: false,
@@ -85,44 +87,32 @@ module('Integration | Component | api index filter', function (hooks) {
       filterData.set(field, !filterData.get(field));
     };
 
-    await render(hbs`
-      {{#api-index-filter model=this.model filterData=this.filterData as |myModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.model filterData=self.filterData as |myModel|}}
           <section>
             Show:
             <label class="access-checkbox">
-              <input id="inherited-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showInherited}}"
-                     onchange={{action "updateFilter" "showInherited"}}>
+              <input id="inherited-toggle" type="checkbox" checked="{{self.filterData.showInherited}}" onchange={{action "updateFilter" "showInherited"}}>
               Inherited
             </label>
             <label class="access-checkbox">
-              <input id=\"protected-toggle\"
-                     type=\"checkbox\"
-                     checked={{this.filterData.showProtected}}
-                     onchange={{action "updateFilter" \"showProtected\"}}>
+              <input id="protected-toggle" type="checkbox" checked={{self.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
               Protected
             </label>
             <label class="access-checkbox">
-              <input id=\"private-toggle\"
-                     type=\"checkbox\"
-                     checked={{this.sectionData.showPrivate}}
-                     onchange={{action \"updateFilter\" \"showPrivate\"}}>
+              <input id="private-toggle" type="checkbox" checked={{self.sectionData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
               Private
             </label>
             <label class="access-checkbox">
-              <input id=\"deprecated-toggle\"
-                     type=\"checkbox\"
-                     checked=\"{{this.sectionData.showDeprecated}}\"
-                     onchange={{action \"updateFilter\" \"showDeprecated\"}}>
+              <input id="deprecated-toggle" type="checkbox" checked={{self.sectionData.showDeprecated}} onchange={{action "updateFilter" "showDeprecated"}}>
             </label>
           </section>
           <h2>Methods</h2>
           {{#each myModel.methods as |method|}}
-            <p class=\"method-name\">{{method.name}}</p>
+            <p class="method-name">{{method.name}}</p>
           {{/each}}
-      {{/api-index-filter}}
-    `);
+      {{/ApiIndexFilter}}
+    </template>);
 
     await click('#inherited-toggle');
     assert
@@ -136,7 +126,8 @@ module('Integration | Component | api index filter', function (hooks) {
       .hasText('parentDoSomething', 'should display 1 inherited method');
   });
 
-  test('clicking private shows private methods', async function (assert) {
+  test('clicking private shows private methods', async function (assert) {const self = this;
+
     let filterData = EmberObject.create({
       showInherited: false,
       showProtected: false,
@@ -150,44 +141,32 @@ module('Integration | Component | api index filter', function (hooks) {
       filterData.set(field, !filterData.get(field));
     };
 
-    await render(hbs`
-      {{#api-index-filter model=this.model filterData=this.filterData updateFilter=(action "updateFilter") as |myModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.model filterData=self.filterData updateFilter=(action "updateFilter") as |myModel|}}
           <section>
             Show:
             <label class="access-checkbox">
-              <input id="inherited-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showInherited}}"
-                     onchange={{action "updateFilter" "showInherited"}}>
+              <input id="inherited-toggle" type="checkbox" checked="{{self.filterData.showInherited}}" onchange={{action "updateFilter" "showInherited"}}>
               Inherited
             </label>
             <label class="access-checkbox">
-              <input id=\"protected-toggle\"
-                     type=\"checkbox\"
-                     checked={{this.filterData.showProtected}}
-                     onchange={{action "updateFilter" \"showProtected\"}}>
+              <input id="protected-toggle" type="checkbox" checked={{self.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
               Protected
             </label>
             <label class="access-checkbox">
-              <input id="private-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showPrivate}}
-                     onchange={{action "updateFilter" "showPrivate"}}>
+              <input id="private-toggle" type="checkbox" checked={{self.filterData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
               Private
             </label>
             <label class="access-checkbox">
-              <input id=\"deprecated-toggle\"
-                     type=\"checkbox\"
-                     checked=\"{{this.sectionData.showDeprecated}}\"
-                     onchange={{action \"updateFilter\" \"showDeprecated\"}}>
+              <input id="deprecated-toggle" type="checkbox" checked={{self.sectionData.showDeprecated}} onchange={{action "updateFilter" "showDeprecated"}}>
             </label>
           </section>
           <h2>Methods</h2>
           {{#each myModel.methods as |method|}}
-            <p class=\"method-name\">{{method.name}}</p>
+            <p class="method-name">{{method.name}}</p>
           {{/each}}
-      {{/api-index-filter}}
-    `);
+      {{/ApiIndexFilter}}
+    </template>);
 
     await click('#private-toggle');
     assert
@@ -201,7 +180,8 @@ module('Integration | Component | api index filter', function (hooks) {
       .hasText('doSomethingPrivate', 'should display 1 private method');
   });
 
-  test('clicking private and inherited shows both methods', async function (assert) {
+  test('clicking private and inherited shows both methods', async function (assert) {const self = this;
+
     let filterData = EmberObject.create({
       showInherited: false,
       showProtected: false,
@@ -215,44 +195,32 @@ module('Integration | Component | api index filter', function (hooks) {
       filterData.set(field, value);
     };
 
-    await render(hbs`
-      {{#api-index-filter model=this.model filterData=this.filterData as |myModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.model filterData=self.filterData as |myModel|}}
           <section>
             Show:
             <label class="access-checkbox">
-              <input id="inherited-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showInherited}}"
-                     onchange={{action "updateFilter" "showInherited"}}>
+              <input id="inherited-toggle" type="checkbox" checked="{{self.filterData.showInherited}}" onchange={{action "updateFilter" "showInherited"}}>
               Inherited
             </label>
             <label class="access-checkbox">
-              <input id=\"protected-toggle\"
-                     type=\"checkbox\"
-                     checked={{this.filterData.showProtected}}
-                     onchange={{action "updateFilter" \"showProtected\"}}>
+              <input id="protected-toggle" type="checkbox" checked={{self.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
               Protected
             </label>
             <label class="access-checkbox">
-              <input id="private-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showPrivate}}
-                     onchange={{action "updateFilter" "showPrivate"}}>
+              <input id="private-toggle" type="checkbox" checked={{self.filterData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
               Private
             </label>
             <label class="access-checkbox">
-              <input id=\"deprecated-toggle\"
-                     type=\"checkbox\"
-                     checked=\"{{this.sectionData.showDeprecated}}\"
-                     onchange={{action \"updateFilter\" \"showDeprecated\"}}>
+              <input id="deprecated-toggle" type="checkbox" checked={{self.sectionData.showDeprecated}} onchange={{action "updateFilter" "showDeprecated"}}>
             </label>
           </section>
           <h2>Methods</h2>
           {{#each myModel.methods as |method|}}
-            <p class=\"method-name\">{{method.name}}</p>
+            <p class="method-name">{{method.name}}</p>
           {{/each}}
-      {{/api-index-filter}}
-    `);
+      {{/ApiIndexFilter}}
+    </template>);
 
     await click('#private-toggle');
     await click('#inherited-toggle');
@@ -270,7 +238,8 @@ module('Integration | Component | api index filter', function (hooks) {
       .hasText('parentDoSomething', 'should display 1 inherited method');
   });
 
-  test('clicking all toggles shows all methods', async function (assert) {
+  test('clicking all toggles shows all methods', async function (assert) {const self = this;
+
     let filterData = EmberObject.create({
       showInherited: false,
       showProtected: false,
@@ -284,44 +253,32 @@ module('Integration | Component | api index filter', function (hooks) {
       filterData.set(field, !filterData.get(field));
     };
 
-    await render(hbs`
-      {{#api-index-filter model=this.model filterData=this.filterData as |myModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.model filterData=self.filterData as |myModel|}}
           <section>
             Show:
             <label class="access-checkbox">
-              <input id="inherited-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showInherited}}"
-                     onchange={{action "updateFilter" "showInherited"}}>
+              <input id="inherited-toggle" type="checkbox" checked="{{self.filterData.showInherited}}" onchange={{action "updateFilter" "showInherited"}}>
               Inherited
             </label>
             <label class="access-checkbox">
-              <input id="protected-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showProtected}}
-                     onchange={{action "updateFilter" "showProtected"}}>
+              <input id="protected-toggle" type="checkbox" checked={{self.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
               Protected
             </label>
             <label class="access-checkbox">
-              <input id="private-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showPrivate}}
-                     onchange={{action "updateFilter" "showPrivate"}}>
+              <input id="private-toggle" type="checkbox" checked={{self.filterData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
               Private
             </label>
             <label class="access-checkbox">
-              <input id="deprecated-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showDeprecated}}"
-                     onchange={{action "updateFilter" "showDeprecated"}}>
+              <input id="deprecated-toggle" type="checkbox" checked="{{self.filterData.showDeprecated}}" onchange={{action "updateFilter" "showDeprecated"}}>
             </label>
           </section>
           <h2>Methods</h2>
           {{#each myModel.methods as |method|}}
-            <p class=\"method-name\">{{method.name}}</p>
+            <p class="method-name">{{method.name}}</p>
           {{/each}}
-      {{/api-index-filter}}
-    `);
+      {{/ApiIndexFilter}}
+    </template>);
 
     await click('#private-toggle');
     await click('#inherited-toggle');
@@ -347,7 +304,8 @@ module('Integration | Component | api index filter', function (hooks) {
       .hasText('parentDoSomething', 'should display 1 inherited method');
   });
 
-  test('clicking all toggles off should only show public', async function (assert) {
+  test('clicking all toggles off should only show public', async function (assert) {const self = this;
+
     let filterData = EmberObject.create({
       showInherited: true,
       showProtected: true,
@@ -361,44 +319,32 @@ module('Integration | Component | api index filter', function (hooks) {
       filterData.set(field, !filterData.get(field));
     };
 
-    await render(hbs`
-      {{#api-index-filter model=this.model filterData=this.filterData as |myModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.model filterData=self.filterData as |myModel|}}
           <section>
             Show:
             <label class="access-checkbox">
-              <input id="inherited-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showInherited}}"
-                     onchange={{action "updateFilter" "showInherited"}}>
+              <input id="inherited-toggle" type="checkbox" checked="{{self.filterData.showInherited}}" onchange={{action "updateFilter" "showInherited"}}>
               Inherited
             </label>
             <label class="access-checkbox">
-              <input id="protected-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showProtected}}
-                     onchange={{action "updateFilter" "showProtected"}}>
+              <input id="protected-toggle" type="checkbox" checked={{self.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
               Protected
             </label>
             <label class="access-checkbox">
-              <input id="private-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showPrivate}}
-                     onchange={{action "updateFilter" "showPrivate"}}>
+              <input id="private-toggle" type="checkbox" checked={{self.filterData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
               Private
             </label>
             <label class="access-checkbox">
-              <input id="deprecated-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showDeprecated}}"
-                     onchange={{action "updateFilter" "showDeprecated"}}>
+              <input id="deprecated-toggle" type="checkbox" checked="{{self.filterData.showDeprecated}}" onchange={{action "updateFilter" "showDeprecated"}}>
             </label>
           </section>
           <h2>Methods</h2>
           {{#each myModel.methods as |method|}}
-            <p class=\"method-name\">{{method.name}}</p>
+            <p class="method-name">{{method.name}}</p>
           {{/each}}
-      {{/api-index-filter}}
-    `);
+      {{/ApiIndexFilter}}
+    </template>);
 
     assert
       .dom('.method-name')
@@ -432,7 +378,8 @@ module('Integration | Component | api index filter', function (hooks) {
       .hasText('doSomething', 'should display 1 public method');
   });
 
-  test('should show only local method implementation when duplicates', async function (assert) {
+  test('should show only local method implementation when duplicates', async function (assert) {const self = this;
+
     let filterData = EmberObject.create({
       showInherited: true,
       showProtected: false,
@@ -443,14 +390,14 @@ module('Integration | Component | api index filter', function (hooks) {
     this.set('model', model);
     this.set('filterData', filterData);
 
-    await render(hbs`
-      {{#api-index-filter model=this.model filterData=this.filterData as |myModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.model filterData=self.filterData as |myModel|}}
           <h2>Methods</h2>
           {{#each myModel.methods as |method|}}
-            <p class=\"method-name\">{{method.name}}</p>
+            <p class="method-name">{{method.name}}</p>
           {{/each}}
-      {{/api-index-filter}}
-    `);
+      {{/ApiIndexFilter}}
+    </template>);
     assert
       .dom('.method-name')
       .exists(
diff --git a/tests/integration/components/api-index-test.gjs b/tests/integration/components/api-index-test.gjs
index e862ca666..5f9bc9763 100644
--- a/tests/integration/components/api-index-test.gjs
+++ b/tests/integration/components/api-index-test.gjs
@@ -2,7 +2,10 @@ import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, click, findAll } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import ApiIndex from "ember-api-docs/components/api-index";
+import { LinkTo } from "@ember/routing";
+import { array, hash } from "@ember/helper";
+import ApiIndexFilter from "ember-api-docs/components/api-index-filter";
 
 module('Integration | Component | api index', function (hooks) {
   setupRenderingTest(hooks);
@@ -13,7 +16,8 @@ module('Integration | Component | api index', function (hooks) {
       this.actions[actionName].apply(this, args);
   });
 
-  test('should display api index', async function (assert) {
+  test('should display api index', async function (assert) {const self = this;
+
     let model = EmberObject.create({
       project: {
         id: 'lolwut',
@@ -44,24 +48,15 @@ module('Integration | Component | api index', function (hooks) {
     this.set('myModel', model);
 
     // Template block usage:
-    await render(hbs`
-        {{#api-index itemData=this.myModel as |sectionData|}}
+    await render(<template>
+        {{#ApiIndex itemData=self.myModel as |sectionData|}}
           {{#each sectionData.sections as |section|}}
-            <h2 class=\"api-index-section-title\">{{section.title}}</h2>
+            <h2 class="api-index-section-title">{{section.title}}</h2>
             {{#if section.items}}
-              <ul class=\"{{section.class}}\">
+              <ul class={{section.class}}>
                 {{#each section.items as |item|}}
                   <li>
-                    <LinkTo
-                      @route=\"item.route\"
-                      @models={{array
-                        sectionData.projectId
-                        sectionData.projectVersion
-                        sectionData.name
-                        item.name
-                      }}
-                      @query={{hash anchor=item.name}}
-                    >
+                    <LinkTo @route={{item.route}} @models={{array sectionData.projectId sectionData.projectVersion sectionData.name item.name}} @query={{hash anchor=item.name}}>
                       {{item.name}}
                     </LinkTo>
                   </li>
@@ -71,8 +66,8 @@ module('Integration | Component | api index', function (hooks) {
                 No documented items
             {{/if}}
           {{/each}}
-        {{/api-index}}
-    `);
+        {{/ApiIndex}}
+    </template>);
     assert
       .dom('.api-index-section-title')
       .exists({ count: 3 }, 'should show 3 sections');
@@ -96,7 +91,8 @@ module('Integration | Component | api index', function (hooks) {
       .hasText('didSomething', 'should display 1 event');
   });
 
-  test('should display text when no methods', async function (assert) {
+  test('should display text when no methods', async function (assert) {const self = this;
+
     let model = EmberObject.create({
       project: {
         id: 'lolwut',
@@ -122,24 +118,15 @@ module('Integration | Component | api index', function (hooks) {
     this.set('myModel', model);
 
     // Template block usage:
-    await render(hbs`
-        {{#api-index itemData=this.myModel as |sectionData|}}
+    await render(<template>
+        {{#ApiIndex itemData=self.myModel as |sectionData|}}
           {{#each sectionData.sections as |section|}}
-            <h2 class=\"api-index-section-title\">{{section.title}}</h2>
+            <h2 class="api-index-section-title">{{section.title}}</h2>
             {{#if section.items}}
-              <ul class=\"{{section.class}}\">
+              <ul class={{section.class}}>
                 {{#each section.items as |item|}}
                   <li>
-                    <LinkTo
-                      @route=\"item.route\"
-                      @models={{array
-                        sectionData.projectId
-                        sectionData.projectVersion
-                        sectionData.name
-                        item.name
-                      }}
-                      @query={{hash anchor=item.name}}
-                    >
+                    <LinkTo @route={{item.route}} @models={{array sectionData.projectId sectionData.projectVersion sectionData.name item.name}} @query={{hash anchor=item.name}}>
                       {{item.name}}
                     </LinkTo>
                   </li>
@@ -149,8 +136,8 @@ module('Integration | Component | api index', function (hooks) {
                 <p class="{{section.class}}">No documented items</p>
             {{/if}}
           {{/each}}
-        {{/api-index}}
-    `);
+        {{/ApiIndex}}
+    </template>);
     assert
       .dom('.api-index-section-title')
       .exists({ count: 3 }, 'should show 3 sections');
@@ -174,7 +161,8 @@ module('Integration | Component | api index', function (hooks) {
       .hasText('didSomething', 'should display 1 event');
   });
 
-  test('should display api index with filter', async function (assert) {
+  test('should display api index with filter', async function (assert) {const self = this;
+
     let model = EmberObject.create({
       project: {
         id: 'lolwut',
@@ -236,56 +224,35 @@ module('Integration | Component | api index', function (hooks) {
     };
 
     // Template block usage:
-    await render(hbs`
-      {{#api-index-filter model=this.myModel filterData=this.filterData as |filteredModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.myModel filterData=self.filterData as |filteredModel|}}
           <section>
             Show:
             <label class="access-checkbox">
-              <input id="inherited-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showInherited}}"
-                     onchange={{action "updateFilter" "showInherited"}}>
+              <input id="inherited-toggle" type="checkbox" checked="{{self.filterData.showInherited}}" onchange={{action "updateFilter" "showInherited"}}>
               Inherited
             </label>
             <label class="access-checkbox">
-              <input id=\"protected-toggle\"
-                     type=\"checkbox\"
-                     checked={{this.filterData.showProtected}}
-                     onchange={{action "updateFilter" \"showProtected\"}}>
+              <input id="protected-toggle" type="checkbox" checked={{self.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
               Protected
             </label>
             <label class="access-checkbox">
-              <input id="private-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showPrivate}}
-                     onchange={{action "updateFilter" "showPrivate"}}>
+              <input id="private-toggle" type="checkbox" checked={{self.filterData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
               Private
             </label>
             <label class="access-checkbox">
-              <input id=\"deprecated-toggle\"
-                     type=\"checkbox\"
-                     checked=\"{{this.filterData.showDeprecated}}\"
-                     onchange={{action \"updateFilter\" \"showDeprecated\"}}>
+              <input id="deprecated-toggle" type="checkbox" checked={{self.filterData.showDeprecated}} onchange={{action "updateFilter" "showDeprecated"}}>
             </label>
           </section>
 
-        {{#api-index itemData=filteredModel as |sectionData|}}
+        {{#ApiIndex itemData=filteredModel as |sectionData|}}
           {{#each sectionData.sections as |section|}}
-            <h2 class=\"api-index-section-title\">{{section.title}}</h2>
+            <h2 class="api-index-section-title">{{section.title}}</h2>
             {{#if section.items}}
-              <ul class=\"{{section.class}}\">
+              <ul class={{section.class}}>
                 {{#each section.items as |item|}}
                   <li>
-                    <LinkTo
-                      @route=\"item.route\"
-                      @models={{array
-                        sectionData.projectId
-                        sectionData.projectVersion
-                        sectionData.name
-                        item.name
-                      }}
-                      @query={{hash anchor=item.name}}
-                    >
+                    <LinkTo @route={{item.route}} @models={{array sectionData.projectId sectionData.projectVersion sectionData.name item.name}} @query={{hash anchor=item.name}}>
                       {{item.name}}
                     </LinkTo>
                   </li>
@@ -295,9 +262,9 @@ module('Integration | Component | api index', function (hooks) {
                 No documented items
             {{/if}}
           {{/each}}
-        {{/api-index}}
-      {{/api-index-filter}}
-    `);
+        {{/ApiIndex}}
+      {{/ApiIndexFilter}}
+    </template>);
     assert
       .dom('.api-index-section-title')
       .exists({ count: 3 }, 'should show 3 sections');
@@ -321,7 +288,8 @@ module('Integration | Component | api index', function (hooks) {
       .hasText('didSomething', 'should display 1 event');
   });
 
-  test('should display inherited method when show inherited toggled on', async function (assert) {
+  test('should display inherited method when show inherited toggled on', async function (assert) {const self = this;
+
     let model = EmberObject.create({
       project: {
         id: 'lolwut',
@@ -382,57 +350,36 @@ module('Integration | Component | api index', function (hooks) {
       filterData.set(field, !filterData.get(field));
     };
 
-    await render(hbs`
-      {{#api-index-filter model=this.myModel filterData=this.filterData as |filteredModel|}}
+    await render(<template>
+      {{#ApiIndexFilter model=self.myModel filterData=self.filterData as |filteredModel|}}
           <section>
             Show:
             <label class="access-checkbox">
-              <input id="inherited-toggle"
-                     type="checkbox"
-                     checked="{{this.filterData.showInherited}}"
-                     onchange={{action "updateFilter" "showInherited"}}>
+              <input id="inherited-toggle" type="checkbox" checked="{{self.filterData.showInherited}}" onchange={{action "updateFilter" "showInherited"}}>
               Inherited
             </label>
             <label class="access-checkbox">
-              <input id=\"protected-toggle\"
-                     type=\"checkbox\"
-                     checked={{this.filterData.showProtected}}
-                     onchange={{action "updateFilter" \"showProtected\"}}>
+              <input id="protected-toggle" type="checkbox" checked={{self.filterData.showProtected}} onchange={{action "updateFilter" "showProtected"}}>
               Protected
             </label>
             <label class="access-checkbox">
-              <input id="private-toggle"
-                     type="checkbox"
-                     checked={{this.filterData.showPrivate}}
-                     onchange={{action "updateFilter" "showPrivate"}}>
+              <input id="private-toggle" type="checkbox" checked={{self.filterData.showPrivate}} onchange={{action "updateFilter" "showPrivate"}}>
               Private
             </label>
-            {{! TODO: investigate this 'checked=': it looks wrong!}}
+            {{!-- TODO: investigate this 'checked=': it looks wrong!--}}
             <label class="access-checkbox">
-              <input id=\"deprecated-toggle\"
-                     type=\"checkbox\"
-                     checked=\"{{this.sectionData.showDeprecated}}\"
-                     onchange={{action \"updateFilter\" \"showDeprecated\"}}>
+              <input id="deprecated-toggle" type="checkbox" checked={{self.sectionData.showDeprecated}} onchange={{action "updateFilter" "showDeprecated"}}>
             </label>
           </section>
 
-        {{#api-index itemData=filteredModel as |sectionData|}}
+        {{#ApiIndex itemData=filteredModel as |sectionData|}}
           {{#each sectionData.sections as |section|}}
-            <h2 class=\"api-index-section-title\">{{section.title}}</h2>
+            <h2 class="api-index-section-title">{{section.title}}</h2>
             {{#if section.items}}
-              <ul class=\"{{section.class}}\">
+              <ul class={{section.class}}>
                 {{#each section.items as |item|}}
                   <li>
-                    <LinkTo
-                      @route=\"item.route\"
-                      @models={{array
-                        sectionData.projectId
-                        sectionData.projectVersion
-                        sectionData.name
-                        item.name
-                      }}
-                      query={{hash anchor=item.name}}
-                    >
+                    <LinkTo @route={{item.route}} @models={{array sectionData.projectId sectionData.projectVersion sectionData.name item.name}} query={{hash anchor=item.name}}>
                       {{item.name}}
                     </LinkTo>
                   </li>
@@ -442,9 +389,9 @@ module('Integration | Component | api index', function (hooks) {
                 No documented items
             {{/if}}
           {{/each}}
-        {{/api-index}}
-      {{/api-index-filter}}
-    `);
+        {{/ApiIndex}}
+      {{/ApiIndexFilter}}
+    </template>);
     assert
       .dom('.api-index-section-title')
       .exists({ count: 3 }, 'should show 3 sections');
diff --git a/tests/integration/components/class-field-description-test.gjs b/tests/integration/components/class-field-description-test.gjs
index 7bb0a9277..f8856ae35 100644
--- a/tests/integration/components/class-field-description-test.gjs
+++ b/tests/integration/components/class-field-description-test.gjs
@@ -1,19 +1,15 @@
+/* eslint-disable prettier/prettier */
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import {
-  render,
-  click,
-  findAll,
-  find,
-  triggerEvent,
-} from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { render, click, findAll, find, triggerEvent } from '@ember/test-helpers';
+import ClassFieldDescription from "ember-api-docs/components/class-field-description";
 
 module('Integration | Component | class field description', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function (assert) {
+  test('it renders', async function (assert) {const self = this;
+
     this.set('type', 'method');
     this.set(
       'field',
@@ -27,7 +23,7 @@ module('Integration | Component | class field description', function (hooks) {
     );
 
     await render(
-      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
+      <template><ClassFieldDescription @type={{self.type}} @field={{self.field}} /></template>
     );
 
     assert.dom('.method-name').hasText('concat');
@@ -36,7 +32,8 @@ module('Integration | Component | class field description', function (hooks) {
     assert.dom(findAll('.args')[0]).hasText('(param1, param2, param3)');
   });
 
-  test('On hover -- the link icon shows up', async function (assert) {
+  test('On hover -- the link icon shows up', async function (assert) {const self = this;
+
     this.set('type', 'method');
     this.set(
       'field',
@@ -50,7 +47,7 @@ module('Integration | Component | class field description', function (hooks) {
     );
 
     await render(
-      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
+      <template><ClassFieldDescription @type={{self.type}} @field={{self.field}} /></template>
     );
 
     await triggerEvent('.class-field-description--link', 'mouseenter');
@@ -59,7 +56,8 @@ module('Integration | Component | class field description', function (hooks) {
       .exists('The link icon appears when hovering on the method text');
   });
 
-  test('it calls the provided action on link-click with the field name as an arg', async function (assert) {
+  test('it calls the provided action on link-click with the field name as an arg', async function (assert) {const self = this;
+
     assert.expect(3);
     this.set('updateAnchor', (name) => {
       assert.equal(
@@ -78,7 +76,7 @@ module('Integration | Component | class field description', function (hooks) {
     );
 
     await render(
-      hbs`<ClassFieldDescription @field={{this.field}} @updateAnchor={{this.updateAnchor}}/>`
+      <template><ClassFieldDescription @field={{self.field}} @updateAnchor={{self.updateAnchor}} /></template>
     );
 
     await click('.class-field-description--link');
@@ -86,7 +84,8 @@ module('Integration | Component | class field description', function (hooks) {
     assert.verifySteps(['updateAnchorAction']);
   });
 
-  test('parameter props are displayed', async function (assert) {
+  test('parameter props are displayed', async function (assert) {const self = this;
+
     this.set('type', 'method');
     this.set(
       'field',
@@ -104,7 +103,7 @@ module('Integration | Component | class field description', function (hooks) {
     );
 
     await render(
-      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
+      <template><ClassFieldDescription @type={{self.type}} @field={{self.field}} /></template>
     );
 
     assert.dom(find('.prop:nth-child(1) dt')).hasText('prop1');
diff --git a/tests/integration/components/import-example-test.gjs b/tests/integration/components/import-example-test.gjs
index 3e0813391..2015220d7 100644
--- a/tests/integration/components/import-example-test.gjs
+++ b/tests/integration/components/import-example-test.gjs
@@ -1,21 +1,22 @@
+/* eslint-disable prettier/prettier */
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import ImportExample from "ember-api-docs/components/import-example";
 
 module('Integration | Component | import example', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders a class import example', async function (assert) {
     await render(
-      hbs`<ImportExample @item='Application' @package='@ember/application'/>`
+      <template><ImportExample @item="Application" @package="@ember/application" /></template>
     );
     assert.dom('*').hasText("import Application from '@ember/application';");
   });
 
   test('it renders a function import example', async function (assert) {
     await render(
-      hbs`<ImportExample @item='{ uniqBy }' @package='@ember/object/computed'/>`
+      <template><ImportExample @item="{ uniqBy }" @package="@ember/object/computed" /></template>
     );
     assert.dom('*').hasText("import { uniqBy } from '@ember/object/computed';");
   });
diff --git a/tests/integration/components/loading-spinner-test.gjs b/tests/integration/components/loading-spinner-test.gjs
index 00edc93b1..9d714a767 100644
--- a/tests/integration/components/loading-spinner-test.gjs
+++ b/tests/integration/components/loading-spinner-test.gjs
@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import LoadingSpinner from "ember-api-docs/components/loading-spinner";
 
 module('Integration | Component | loading spinner', function (hooks) {
   setupRenderingTest(hooks);
@@ -10,16 +10,16 @@ module('Integration | Component | loading spinner', function (hooks) {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.on('myAction', function(val) { ... });
 
-    await render(hbs`<LoadingSpinner/>`);
+    await render(<template><LoadingSpinner /></template>);
 
     assert.dom('*').hasText('');
 
     // Template block usage:
-    await render(hbs`
+    await render(<template>
       <LoadingSpinner>
         template block text
       </LoadingSpinner>
-    `);
+    </template>);
 
     assert.dom('*').hasText('template block text');
   });
diff --git a/tests/integration/components/search-input-test.gjs b/tests/integration/components/search-input-test.gjs
index 1a012fb54..41c795852 100644
--- a/tests/integration/components/search-input-test.gjs
+++ b/tests/integration/components/search-input-test.gjs
@@ -1,8 +1,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { fillIn, render, waitFor } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { set } from '@ember/object';
+import SearchInput from "ember-api-docs/components/search-input";
 
 module('Integration | Component | search input', function (hooks) {
   setupRenderingTest(hooks);
@@ -155,7 +155,7 @@ module('Integration | Component | search input', function (hooks) {
       ];
     });
 
-    await render(hbs`<SearchInput/>`);
+    await render(<template><SearchInput /></template>);
 
     await fillIn('#search-input', 'model');
 
@@ -171,7 +171,7 @@ module('Integration | Component | search input', function (hooks) {
       return [];
     });
 
-    await render(hbs`<SearchInput/>`);
+    await render(<template><SearchInput /></template>);
 
     await fillIn('#search-input', 'model');
 
diff --git a/tests/integration/components/table-of-contents-test.gjs b/tests/integration/components/table-of-contents-test.gjs
index 9b8e80027..e6e84c9f2 100644
--- a/tests/integration/components/table-of-contents-test.gjs
+++ b/tests/integration/components/table-of-contents-test.gjs
@@ -1,7 +1,8 @@
+/* eslint-disable prettier/prettier */
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, findAll, click } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import TableOfContents from "ember-api-docs/components/table-of-contents";
 
 const TIMEOUT_FOR_ANIMATION = 600;
 const CLASSES = ['Descriptor', 'Ember'];
@@ -10,19 +11,15 @@ const MODULES = ['@ember/application', '@ember/array'];
 module('Integration | Component | table of contents', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function (assert) {
+  test('it renders', async function (assert) {const self = this;
+
     // Set any properties with this.set('myProperty', 'value');
     this.set('emberVersion', '2.4.3');
     this.set('classesIDs', CLASSES);
 
-    await render(hbs`
-      <TableOfContents
-        @showPrivateClasses={{true}}
-        @version={{this.emberVersion}}
-        @classesIDs={{this.classesIDs}}
-        @isShowingNamespaces={{true}}
-      />
-    `);
+    await render(<template>
+      <TableOfContents @showPrivateClasses={{true}} @version={{self.emberVersion}} @classesIDs={{self.classesIDs}} @isShowingNamespaces={{true}} />
+    </template>);
 
     const contentTitle = document.querySelector(
       '[data-test-toc-title="classes"]'
@@ -37,19 +34,15 @@ module('Integration | Component | table of contents', function (hooks) {
     assert.dom(findAll(`${contentReference} li`)[1]).hasText(CLASSES[1]);
   });
 
-  test('Starts with underlying content visible', async function (assert) {
+  test('Starts with underlying content visible', async function (assert) {const self = this;
+
     // Set any properties with this.set('myProperty', 'value');
     this.set('emberVersion', '2.4.3');
     this.set('moduleIDs', MODULES);
 
-    await render(hbs`
-      <TableOfContents
-        @showPrivateClasses={{true}}
-        @version={{this.emberVersion}}
-        @moduleIDs={{this.moduleIDs}}
-        @isShowingNamespaces={{true}}
-      />
-    `);
+    await render(<template>
+      <TableOfContents @showPrivateClasses={{true}} @version={{self.emberVersion}} @moduleIDs={{self.moduleIDs}} @isShowingNamespaces={{true}} />
+    </template>);
 
     const contentReference = '.toc-level-1';
     const content = document.querySelector(contentReference);
@@ -67,19 +60,15 @@ module('Integration | Component | table of contents', function (hooks) {
     assert.dom(findAll(`${contentReference} li`)[1]).hasText(MODULES[1]);
   });
 
-  test('Underlying content hides once clicked', async function (assert) {
+  test('Underlying content hides once clicked', async function (assert) {const self = this;
+
     // Set any properties with this.set('myProperty', 'value');
     this.set('emberVersion', '2.4.3');
     this.set('moduleIDs', MODULES);
 
-    await render(hbs`
-      <TableOfContents
-        @showPrivateClasses={{true}}
-        @version={{this.emberVersion}}
-        @moduleIDs={{this.moduleIDs}}
-        @isShowingNamespaces={{true}}
-      />
-    `);
+    await render(<template>
+      <TableOfContents @showPrivateClasses={{true}} @version={{self.emberVersion}} @moduleIDs={{self.moduleIDs}} @isShowingNamespaces={{true}} />
+    </template>);
 
     const contentTitle = document.querySelector(
       '[data-test-toc-title="packages"]'
@@ -101,19 +90,15 @@ module('Integration | Component | table of contents', function (hooks) {
     }, TIMEOUT_FOR_ANIMATION);
   });
 
-  test('Underlying content should be visible after 2 clicks', async function (assert) {
+  test('Underlying content should be visible after 2 clicks', async function (assert) {const self = this;
+
     // Set any properties with this.set('myProperty', 'value');
     this.set('emberVersion', '2.4.3');
     this.set('moduleIDs', MODULES);
 
-    await render(hbs`
-      <TableOfContents
-        @showPrivateClasses={{true}}
-        @version={{this.emberVersion}}
-        @moduleIDs={{this.moduleIDs}}
-        @isShowingNamespaces={{true}}
-      />
-    `);
+    await render(<template>
+      <TableOfContents @showPrivateClasses={{true}} @version={{self.emberVersion}} @moduleIDs={{self.moduleIDs}} @isShowingNamespaces={{true}} />
+    </template>);
 
     const titleButton = document.querySelector(
       '[data-test-toc-title="packages"]'
diff --git a/tests/integration/helpers/better-get-test.gjs b/tests/integration/helpers/better-get-test.gjs
index 6140bfdc9..00d15c462 100644
--- a/tests/integration/helpers/better-get-test.gjs
+++ b/tests/integration/helpers/better-get-test.gjs
@@ -1,31 +1,33 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import betterGet from "ember-api-docs/helpers/better-get";
 
 module('helper:better-get', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('should get dot separated', async function (assert) {
+  test('should get dot separated', async function (assert) {const self = this;
+
     let obj = {
       'Ember.Object': 'hello',
     };
     this.set('dataStructure', obj);
     this.set('key', 'Ember.Object');
 
-    await render(hbs`{{better-get dataStructure key}}`);
+    await render(<template>{{betterGet self.dataStructure self.key}}</template>);
 
     assert.dom(this.element).hasText('hello');
   });
 
-  test('should get rfc 176 module', async function (assert) {
+  test('should get rfc 176 module', async function (assert) {const self = this;
+
     let obj = {
       '@ember/object': 'hello',
     };
     this.set('dataStructure', obj);
     this.set('key', '@ember/object');
 
-    await render(hbs`{{better-get dataStructure key}}`);
+    await render(<template>{{betterGet self.dataStructure self.key}}</template>);
 
     assert.dom(this.element).hasText('hello');
   });
diff --git a/tests/integration/helpers/function-heading-id-test.gjs b/tests/integration/helpers/function-heading-id-test.gjs
index afe4403c0..343f56e53 100644
--- a/tests/integration/helpers/function-heading-id-test.gjs
+++ b/tests/integration/helpers/function-heading-id-test.gjs
@@ -1,15 +1,16 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import functionHeadingId from "ember-api-docs/helpers/function-heading-id";
 
 module('helper:function-heading-id', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('should transform nested package to id', async function (assert) {
+  test('should transform nested package to id', async function (assert) {const self = this;
+
     this.set('inputValue', '@ember/object/computed');
 
-    await render(hbs`{{function-heading-id inputValue}}`);
+    await render(<template>{{functionHeadingId self.inputValue}}</template>);
 
     assert.dom(this.element).hasText('functions-computed');
   });
diff --git a/tests/integration/helpers/is-latest-test.gjs b/tests/integration/helpers/is-latest-test.gjs
index 35d18488e..095ef9358 100644
--- a/tests/integration/helpers/is-latest-test.gjs
+++ b/tests/integration/helpers/is-latest-test.gjs
@@ -1,35 +1,37 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { A } from '@ember/array';
+import isLatest from "ember-api-docs/helpers/is-latest";
 
 const versions = A(['ember-1.13.0', 'ember-3.5.0', 'ember-2.1.10']);
 
 module('helper:is-latest', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('should resolve true if latest release', async function (assert) {
+  test('should resolve true if latest release', async function (assert) {const self = this;
+
     this.set('version', '3.5.0');
     this.set('allVersions', versions);
 
-    await render(hbs`
-  {{#if (is-latest version=this.version allVersions=this.allVersions)}}
+    await render(<template>
+  {{#if (isLatest version=self.version allVersions=self.allVersions)}}
     Hello World
   {{/if}}
-  `);
+  </template>);
 
     assert.dom(this.element).hasText('Hello World');
   });
 
-  test('should resolve false if not latest', async function (assert) {
+  test('should resolve false if not latest', async function (assert) {const self = this;
+
     this.set('version', '3.1.0');
     this.set('allVersions', versions);
-    await render(hbs`
-  {{#if (is-latest version=this.version allVersions=this.allVersions)}}
+    await render(<template>
+  {{#if (isLatest version=self.version allVersions=self.allVersions)}}
     Hello World
   {{/if}}
-  `);
+  </template>);
     assert.notEqual(this.element.textContent.trim(), 'Hello World');
   });
 });
diff --git a/tests/integration/helpers/version-lt-test.gjs b/tests/integration/helpers/version-lt-test.gjs
index 297671b2e..23b56856f 100644
--- a/tests/integration/helpers/version-lt-test.gjs
+++ b/tests/integration/helpers/version-lt-test.gjs
@@ -1,33 +1,33 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import versionLt from "ember-api-docs/helpers/version-lt";
 
 module('helper:version-lt', function (hooks) {
   setupRenderingTest(hooks);
 
   test('should calculate major version diffs', async function (assert) {
-    await render(hbs`{{version-lt '2.10' '3.0' 'ember'}}`);
+    await render(<template>{{versionLt "2.10" "3.0" "ember"}}</template>);
     assert.dom(this.element).hasText('true');
   });
 
   test('should calculate minor version diffs', async function (assert) {
-    await render(hbs`{{version-lt '2.15' '2.16' 'ember'}}`);
+    await render(<template>{{versionLt "2.15" "2.16" "ember"}}</template>);
     assert.dom(this.element).hasText('true');
   });
 
   test('should fail if major greater', async function (assert) {
-    await render(hbs`{{version-lt '3.0' '2.16' 'ember'}}`);
+    await render(<template>{{versionLt "3.0" "2.16" "ember"}}</template>);
     assert.dom(this.element).hasText('false');
   });
 
   test('should fail if minor greater', async function (assert) {
-    await render(hbs`{{version-lt '2.17' '2.16' 'ember'}}`);
+    await render(<template>{{versionLt "2.17" "2.16" "ember"}}</template>);
     assert.dom(this.element).hasText('false');
   });
 
   test('should fail if equal', async function (assert) {
-    await render(hbs`{{version-lt '2.16' '2.16' 'ember'}}`);
+    await render(<template>{{versionLt "2.16" "2.16" "ember"}}</template>);
     assert.dom(this.element).hasText('false');
   });
 });

From 9edb7858011dcac523c6bffe25bfb905332f170c Mon Sep 17 00:00:00 2001
From: Chris Manson <chris@manson.ie>
Date: Wed, 12 Mar 2025 21:24:37 +0000
Subject: [PATCH 4/4] add codemod to ignore-revs

---
 .git-blame-ignore-revs | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .git-blame-ignore-revs

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 000000000..1991fd3de
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1 @@
+5a494a97687a5b1e663d6a2eb82d80f1b6d0e62b