feat: typescript

addon/.eslintrc.js

@@ -2,17 +2,18 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
       legacyDecorators: true,
     },
   },
-  plugins: ['ember'],
+  plugins: ['@typescript-eslint', 'ember'],
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:ember/recommended',
     'plugin:prettier/recommended',
   ],

addon/babel.config.json

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

addon/package.json

@@ -40,8 +40,21 @@
     "@babel/core": "^7.16.12",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.16.7",
+    "@babel/plugin-transform-typescript": "^7.19.3",
+    "@babel/preset-typescript": "^7.18.6",
     "@embroider/addon-dev": "^1.0.0",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@types/ember__application": "^4.0.0",
+    "@types/ember__debug": "^4.0.0",
+    "@types/ember__destroyable": "^4.0.0",
+    "@types/ember__helper": "^4.0.0",
+    "@types/ember__object": "^4.0.2",
+    "@types/ember__owner": "^4.0.0",
+    "@types/ember__routing": "^4.0.11",
+    "@types/ember__runloop": "^4.0.1",
+    "@types/ember__test-helpers": "^2.0.0",
+    "@types/ember-cli-fastboot": "^2.2.2",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
     "babel-eslint": "^10.1.0",
     "ember-template-lint": "^3.6.0",
     "eslint": "^7.32.0",
@@ -51,7 +64,10 @@
     "eslint-plugin-prettier": "^3.4.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
-    "rollup": "^2.67.0"
+    "rollup": "^2.67.0",
+    "rollup-plugin-ts": "^3.0.2",
+    "tslib": "^2.4.0",
+    "typescript": "~4.8.0"
   },
   "engines": {
     "node": "14.* || 16.* || >= 18"
@@ -62,8 +78,8 @@
     "type": "addon",
     "version": 2,
     "app-js": {
-      "./helpers/page-title.js": "./dist/_app_/helpers/page-title.js",
-      "./services/page-title.js": "./dist/_app_/services/page-title.js"
+      "./helpers/page-title.ts": "./dist/_app_/helpers/page-title.ts",
+      "./services/page-title.ts": "./dist/_app_/services/page-title.ts"
     }
   },
   "homepage": "https://ember-cli.github.io/ember-page-title",

addon/rollup.config.js

@@ -1,4 +1,4 @@
-import babel from '@rollup/plugin-babel';
+import ts from 'rollup-plugin-ts';
 import { Addon } from '@embroider/addon-dev/rollup';
 
 const addon = new Addon({
@@ -15,21 +15,38 @@ export default {
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
     addon.publicEntrypoints([
-      'helpers/**/*.js',
-      'services/**/*.js',
-      'test-support/index.js',
+      'helpers/**/*.ts',
+      'services/**/*.ts',
+      'test-support/index.ts',
     ]),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but
     // not everything in publicEntrypoints necessarily needs to go here.
-    addon.appReexports(['helpers/**/*.js', 'services/**/*.js']),
+    addon.appReexports(['helpers/**/*.ts', 'services/**/*.ts']),
 
     // This babel config should *not* apply presets or compile away ES modules.
     // It exists only to provide development niceties for you, like automatic
     // template colocation.
-    babel({
-      babelHelpers: 'bundled',
+    // See `babel.config.json` for the actual Babel configuration!
+    ts({
+      // can be changed to swc or other transpilers later
+      // but we need the ember plugins converted first
+      // (template compilation and co-location)
+      transpiler: 'babel',
+      browserslist: ['last 2 firefox versions', 'last 2 chrome versions'],
+      tsconfig: {
+        fileName: 'tsconfig.json',
+        hook: (config) => ({
+          ...config,
+          declaration: true,
+          declarationMap: true,
+          // See: https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#beta-delta
+          // Allows us to use `exports` to define types per export
+          // However, we can't use that feature until the minimum supported TS is 4.7+
+          declarationDir: './dist',
+        }),
+      },
     }),
 
     // Follow the V2 Addon rules about dependencies. Your code can import from
@@ -38,11 +55,11 @@ export default {
     addon.dependencies(),
 
     // Ensure that standalone .hbs files are properly integrated as Javascript.
-    addon.hbs(),
+    // 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']),
+    // addon.keepAssets(['**/*.css']),
 
     // Remove leftover build artifacts when starting a new build.
     addon.clean(),

addon/src/helpers/page-title.js → addon/src/helpers/page-title.ts

@@ -1,6 +1,12 @@
 import { inject as service } from '@ember/service';
 import Helper from '@ember/component/helper';
 import { guidFor } from '@ember/object/internals';
+import PageTitleService, { PageTitleToken } from '../services/page-title';
+
+export type PageTitleHelperOptions = Pick<
+  PageTitleToken,
+  'prepend' | 'front' | 'replace' | 'separator'
+>;
 
 /**
   `{{page-title}}` helper used to set the title of the current route context.
@@ -10,26 +16,28 @@ import { guidFor } from '@ember/object/internals';
  */
 export default class PageTitle extends Helper {
   @service('page-title')
-  tokens;
+  declare tokens: PageTitleService;
 
-  get tokenId() {
+  get tokenId(): string {
     return guidFor(this);
   }
 
   constructor() {
+    // eslint-disable-next-line prefer-rest-params
     super(...arguments);
     this.tokens.push({ id: this.tokenId });
   }
 
-  compute(params, _hash) {
-    let hash = {
+  compute(params: string[], _hash: PageTitleHelperOptions) {
+    const hash: PageTitleToken = {
       ..._hash,
       id: this.tokenId,
       title: params.join(''),
     };
 
     this.tokens.push(hash);
     this.tokens.scheduleTitleUpdate();
+
     return '';
   }