Begin converting to TypeScript

Woo type errors, deprecations!

Add test-types project

Rename files

Upgrade and install updated lint config / dependencies

Add test script to test-types

Update more deps

Author: NullVoxPopuli

addon/.eslintrc.js addon/.eslintrc.cjsaddon/.eslintrc.js renamed to addon/.eslintrc.cjs

@@ -19,7 +19,10 @@ module.exports = {
     },
     // node files
     {
-      files: ['./*.cjs', './addon-main.js'],
+      files: [
+        './*.cjs',
+        './addon-main.js',
+      ],
       parserOptions: {
         sourceType: 'script',
       },

addon/.prettierrc.js addon/.prettierrc.cjsaddon/.prettierrc.js renamed to addon/.prettierrc.cjs

@@ -106,6 +106,23 @@ module('Acceptance | Register Page', function (hooks) {
 });
 ```
 
+### TypeScript and Glint
+
+If your project uses loose-mode templates, you can merge in the template registry interface provided by ember-page-title, 
+```ts
+// <your-app>/types/glint.d.ts
+import '@glint/environment-ember-loose';
+import '@glint/environment-ember-template-imports';
+
+import type PageTitle from 'ember-page-title/template-registry';
+
+declare module '@glint/environment-ember-loose/registry' {
+	export default interface Registry extends PageTitle {
+        /* your local loose-mode entries here */
+	}
+}
+```
+
 ### Upgrading notes for 5.x to 6.x
 
 - `ember-page-title` no longer requires the usage of `ember-cli-head`.

addon/.template-lintrc.js addon/.template-lintrc.cjsaddon/.template-lintrc.js renamed to addon/.template-lintrc.cjs

@@ -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/README.md

@@ -23,15 +23,18 @@
   ],
   "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:*'",
+    "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
+    "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "prepublishOnly": "rollup --config",
-    "start": "rollup --config --watch"
+    "start": "concurrently 'npm:start:*'",
+    "start:types": "glint --declaration --watch",
+    "start:js": "rollup --config --watch --no-watch.clearScreen",
+    "prepack": "rollup --config",
+    "lint:types": "glint",
+    "build:types": "glint --declaration",
+    "build:js": "rollup --config"
   },
   "dependencies": {
     "@embroider/addon-shim": "^1.8.7"
@@ -52,12 +55,20 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-ember": "^11.12.0",
-    "eslint-plugin-jsonc": "^2.11.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.1.1",
-    "rollup": "^4.9.1"
+    "rollup": "^4.9.1",
+    "typescript": "^5.3.3",
+    "eslint-plugin-jsonc": "^2.11.2",
+    "ember-source": "^5.5.0",
+    "concurrently": "^8.2.2",
+    "@tsconfig/ember": "^3.0.3",
+    "@glint/template": "^1.2.1",
+    "@glint/environment-ember-template-imports": "^1.2.1",
+    "@glint/environment-ember-loose": "^1.2.1",
+    "@glint/core": "^1.2.1"
   },
   "engines": {
     "node": "16.* || >= 18"
@@ -76,4 +87,4 @@
   "volta": {
     "extends": "../package.json"
   }
-}
+}

addon/babel.config.json

@@ -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/package.json

@@ -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/rollup.config.mjs

@@ -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 = [];