Woo type errors, deprecations!

addon/babel.config.json

@@ -1,7 +1,12 @@
 {
   "plugins": [
+    ["@babel/plugin-transform-typescript", { 
+       "allExtensions": true, 
+       "onlyRemoveTypeImports": true, 
+       "allowDeclareFields": true 
+    }],
     "@embroider/addon-dev/template-colocation-plugin",
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-proposal-class-properties"
   ]
-}
+}

addon/package.json

@@ -23,15 +23,20 @@
   ],
   "repository": "https://github.com/ember-cli/ember-page-title",
   "scripts": {
-    "build": "rollup --config",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
-    "lint:hbs:fix": "ember-template-lint . --fix",
+    "build": "concurrently 'npm:build:*'",
+    "build:js": "rollup --config",
+    "build:types": "glint --declaration",
+    "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
+    "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
+    "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
+    "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js:fix": "eslint . --fix",
-    "start": "rollup --config --watch",
-    "prepublishOnly": "rollup --config"
+    "lint:types": "glint",
+    "start": "concurrently 'npm:start:*'",
+    "start:js": "rollup --config --watch --no-watch.clearScreen",
+    "start:types": "glint --declaration --watch",
+    "prepack": "rollup --config"
   },
   "dependencies": {
     "@embroider/addon-shim": "^1.8.6"
@@ -44,8 +49,15 @@
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.16.7",
     "@embroider/addon-dev": "^4.1.1",
+    "@glint/core": "^1.2.1",
+    "@glint/environment-ember-loose": "^1.2.1",
+    "@glint/environment-ember-template-imports": "^1.2.1",
+    "@glint/template": "^1.2.1",
     "@rollup/plugin-babel": "^5.3.0",
+    "@tsconfig/ember": "^3.0.3",
     "babel-eslint": "^10.1.0",
+    "concurrently": "^8.2.2",
+    "ember-source": "^5.5.0",
     "ember-template-lint": "^3.6.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -54,7 +66,8 @@
     "eslint-plugin-prettier": "^3.4.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
-    "rollup": "^2.67.0"
+    "rollup": "^2.67.0",
+    "typescript": "^5.3.3"
   },
   "engines": {
     "node": "16.* || >= 18"

addon/rollup.config.js

@@ -1,4 +1,4 @@
-import babel from '@rollup/plugin-babel';
+import { babel } from '@rollup/plugin-babel';
 import { Addon } from '@embroider/addon-dev/rollup';
 
 const addon = new Addon({
@@ -30,6 +30,7 @@ export default {
     // It exists only to provide development niceties for you, like automatic
     // template colocation.
     babel({
+      extensions: ['.js', '.gjs', '.ts', '.gts'],
       babelHelpers: 'bundled',
     }),
 
@@ -38,13 +39,6 @@ export default {
     // package names.
     addon.dependencies(),
 
-    // Ensure that standalone .hbs files are properly integrated as Javascript.
-    addon.hbs(),
-
-    // addons are allowed to contain imports of .css files, which we want rollup
-    // to leave alone and keep in the published output.
-    addon.keepAssets(['**/*.css']),
-
     // Remove leftover build artifacts when starting a new build.
     addon.clean(),
   ],

addon/src/helpers/page-title.ts

@@ -2,17 +2,18 @@ import { inject as service } from '@ember/service';
 import Helper from '@ember/component/helper';
 import { guidFor } from '@ember/object/internals';
 
+import type PageTitleService from '../services/page-title.ts';
+
 /**
   `{{page-title}}` helper used to set the title of the current route context.
 
   @public
   @method page-title
  */
 export default class PageTitle extends Helper {
-  @service('page-title')
-  tokens;
+  @service('page-title') declare tokens: PageTitleService;
 
-  get tokenId() {
+  get tokenId(): string {
     return guidFor(this);
   }
 

addon/src/services/page-title.ts

@@ -3,25 +3,24 @@ import { scheduleOnce } from '@ember/runloop';
 import Service, { inject as service } from '@ember/service';
 import { isEmpty } from '@ember/utils';
 import { assert } from '@ember/debug';
+import type RouterService from '@ember/routing/router-service';
 
 let isFastBoot = typeof FastBoot !== 'undefined';
 
 const RouterEvent = {
   ROUTE_DID_CHANGE: 'routeDidChange',
-};
+} as const;
 
 /**
   @class page-title
   @extends Ember.Service
  */
 export default class PageTitleService extends Service {
-  @service('router')
-  router;
+  @service('router') declare router: RouterService;
 
   // in fastboot context "document" is instance of
   // ember-fastboot/simple-dom document
-  @service('-document')
-  document;
+  @service('-document') declare document: Document;
 
   tokens = [];
 

addon/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": [
+    "src/**/*",
+    "unpublished-development-types/**/*"
+  ],
+  "glint": {
+    "environment": ["ember-loose", "ember-template-imports"]
+  },
+  "compilerOptions": {
+    "allowJs": true,
+    "declarationDir": "declarations",
+
+    /**
+      https://www.typescriptlang.org/tsconfig#rootDir
+      "Default: The longest common path of all non-declaration input files."
+
+      Because we want our declarations' structure to match our rollup output,
+      we need this "rootDir" to match the "srcDir" in the rollup.config.mjs.
+
+      This way, we can have simpler `package.json#exports` that matches
+      imports to files on disk
+    */
+    "rootDir": "./src",
+
+    /**
+      https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax
+
+      We don't want to include types dependencies in our compiled output, so tell TypeScript
+      to enforce using `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+
+    /**
+      https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions
+
+      We want our tooling to know how to resolve our custom files so the appropriate plugins
+      can do the proper transformations on those files.
+    */
+    "allowImportingTsExtensions": true
+  }
+}

addon/unpublished-development-types/index.d.ts

@@ -0,0 +1,18 @@
+// Add any types here that you need for local development only.
+// These will *not* be published as part of your addon, so be careful that your published code does not rely on them!
+import 'ember-source/types';
+
+import '@glint/environment-ember-loose';
+
+declare module '@glint/environment-ember-loose/registry' {
+  // Remove this once entries have been added! 👇
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export default interface Registry {
+    // Add any registry entries from other addons here that your addon itself uses (in non-strict mode templates)
+    // See https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons
+  }
+}
+
+declare global {
+  const FastBoot: unknown;
+}

package.json

@@ -5,8 +5,9 @@
     "url": "[email protected]:ember-cli/ember-page-title.git"
   },
   "scripts": {
+    "build": "pnpm --filter 'ember-page-title' build",
     "lint": "pnpm --filter '*' lint",
-    "prepare": "cd addon && pnpm build"
+    "test": "pnpm --filter '*' test"
   },
   "devDependencies": {
     "@release-it-plugins/lerna-changelog": "^6.0.0",