Turn on typechecking for text component template in showcase

.github/workflows/ci-components.yml

@@ -42,18 +42,18 @@ jobs:
           cache-dependency-path: yarn.lock
       - name: Install Dependencies
         run: yarn install --immutable
-      - name: Lint Showcase
-        run: yarn run lint
-        working-directory: showcase
-      - name: Lint Components
-        run: yarn run lint
-        working-directory: packages/components
       - name: Build Icons
         run: yarn build
         working-directory: packages/ember-flight-icons
       - name: Build Components
         run: yarn build
         working-directory: packages/components
+      - name: Lint Showcase
+        run: yarn run lint
+        working-directory: showcase
+      - name: Lint Components
+        run: yarn run lint
+        working-directory: packages/components
       - name: Run Tests
         run: yarn run test:ember:percy
         working-directory: showcase

showcase/app/controllers/components.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { scheduleOnce } from '@ember/runloop';
+import RouterService from '@ember/routing/router-service';
+import type Owner from '@ember/owner';
+
+function replaceMockStates() {
+  document.querySelectorAll('[mock-state-value]').forEach((element) => {
+    let targets;
+    let mockStateSelector = element.attributes.getNamedItem(
+      'mock-state-selector'
+    );
+    if (mockStateSelector) {
+      targets = element.querySelectorAll(mockStateSelector.value);
+    } else {
+      targets = [element];
+    }
+    const states =
+      element.attributes.getNamedItem('mock-state-value')?.value.split('+') ||
+      [];
+    const classes = states.map((state) => `mock-${state.trim()}`);
+    targets.forEach((target) => {
+      target.classList.add(...classes);
+    });
+  });
+}
+export default class ComponentsController extends Controller {
+  @service declare readonly router: RouterService;
+
+  constructor(owner: Owner | undefined) {
+    super(owner);
+    this.router.on('routeDidChange', this.routeDidChange);
+  }
+
+  routeDidChange() {
+    scheduleOnce('afterRender', replaceMockStates);
+  }
+
+  willDestroy() {
+    this.router.off('routeDidChange', this.routeDidChange);
+  }
+}

showcase/app/templates/components/text.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

showcase/package.json

@@ -74,7 +74,7 @@
     "ember-concurrency": "^3.1.1",
     "ember-deep-tracked": "^2.0.0",
     "ember-load-initializers": "^2.1.2",
-    "ember-page-title": "^8.0.0",
+    "ember-page-title": "^8.2.3",
     "ember-power-select": "^7.1.2",
     "ember-qunit": "^8.0.1",
     "ember-resolver": "^11.0.1",

showcase/types/global.d.ts

@@ -2,6 +2,8 @@ import '@glint/environment-ember-loose';
 import 'ember-source/types';
 import Component from '@ember/component';
 
+import type PageTitle from 'ember-page-title/template-registry';
+
 export interface ShwTxtSignature {
   Args: {
     tag?: string;
@@ -117,7 +119,10 @@ export default interface EmberStyleModifierRegistry {
 }
 
 declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry extends EmberStyleModifierRegistry, HdsComponentsRegistry {
+  export default interface Registry
+    extends EmberStyleModifierRegistry,
+      HdsComponentsRegistry,
+      PageTitle {
     'Shw::Text': typeof ShwTxt;
     'Shw::Text::H1': typeof ShwTxt;
     'Shw::Text::H2': typeof ShwTxt;

yarn.lock

@@ -12523,6 +12523,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ember-page-title@npm:^8.2.3":
+  version: 8.2.3
+  resolution: "ember-page-title@npm:8.2.3"
+  dependencies:
+    "@embroider/addon-shim": "npm:^1.8.7"
+    "@simple-dom/document": "npm:^1.4.0"
+  peerDependencies:
+    ember-source: ">= 3.28.0"
+  checksum: 2cceab289fce8ff4d6424ece57d2635edf98ecda6575311e325ef4669b83a76e4e39affe4d3b1e9512f39000aa3133383656b8a740b1532ec57e23e8102849b4
+  languageName: node
+  linkType: hard
+
 "ember-power-select@npm:^7.1.2":
   version: 7.2.0
   resolution: "ember-power-select@npm:7.2.0"
@@ -23491,7 +23503,7 @@ __metadata:
     ember-concurrency: "npm:^3.1.1"
     ember-deep-tracked: "npm:^2.0.0"
     ember-load-initializers: "npm:^2.1.2"
-    ember-page-title: "npm:^8.0.0"
+    ember-page-title: "npm:^8.2.3"
     ember-power-select: "npm:^7.1.2"
     ember-qunit: "npm:^8.0.1"
     ember-resolver: "npm:^11.0.1"