refactor: migrate test-app package to TypeScript

.github/workflows/lint.yml

@@ -48,9 +48,11 @@ jobs:
         with:
           node-version: 16.x
           args: "--frozen-lockfile"
-      - name: Update TS version
+      - name: Update TS version on addon package
         run: pnpm add -D ${{ matrix.typescript-scenario }}
         working-directory: ember-phone-input
+      - name: Update TS version on test-app package
+        run: pnpm add -D ${{ matrix.typescript-scenario }}
+        working-directory: test-app
       - name: Type checking
         run: pnpm lint:types
-        working-directory: ember-phone-input

README.md

@@ -23,6 +23,7 @@ ember install ember-phone-input
 - Ember CLI v2.13 or above
 - ember-auto-import v2 or above (ember-phone-input@6 is compatible with previous
   versions of ember-auto-import)
+- TypeScript v5.0 or above
 
 ## Contributing
 

ember-phone-input/rollup.config.mjs

@@ -21,7 +21,8 @@ export default {
     addon.publicEntrypoints([
       'components/**/*.js',
       'services/**/*.js',
-      'instance-initializers/**/*.js'
+      'instance-initializers/**/*.js',
+      'template-registry.js'
     ]),
 
     // These are the modules that should get reexported into the traditional

ember-phone-input/src/components/phone-input.ts

@@ -9,7 +9,7 @@ import type PhoneInputService from '../services/phone-input';
 import 'intl-tel-input/build/css/intlTelInput.css';
 import '../styles/styles.css';
 
-interface MetaData {
+export interface MetaData {
   extension: string;
   selectedCountryData: intlTelInput.CountryData;
   isValidNumber: boolean;

ember-phone-input/src/template-registry.ts

@@ -0,0 +1,5 @@
+import type PhoneInput from './components/phone-input';
+
+export default interface Registry {
+  PhoneInput: typeof PhoneInput;
+}

package.json

@@ -12,6 +12,7 @@
     "build": "pnpm --filter ember-phone-input build",
     "lint": "pnpm --filter '*' lint",
     "lint:fix": "pnpm --filter '*' lint:fix",
+    "lint:types": "pnpm --filter '*' lint:types",
     "prepare": "pnpm build",
     "start": "concurrently 'npm:start:*' --restart-after 5000 --prefix-colors cyan,white,yellow",
     "start:addon": "pnpm --filter ember-phone-input start",

test-app/app/app.js → test-app/app/app.ts

@@ -1,7 +1,7 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from './config/environment';
+import config from 'test-app/config/environment';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

test-app/config/ember-try.js

@@ -3,6 +3,12 @@
 const getChannelURL = require('ember-source-channel-url');
 const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
 
+// Needed for ember-source < 4.8, when preview types were first shipped
+const emberTypesPackages = {
+  '@types/ember__application': '^4.0.8',
+  '@types/ember__routing': '^4.0.17'
+};
+
 module.exports = async function () {
   return {
     usePnpm: true,
@@ -11,15 +17,17 @@ module.exports = async function () {
         name: 'ember-lts-3.28',
         npm: {
           devDependencies: {
-            'ember-source': '~3.28.0'
+            'ember-source': '~3.28.0',
+            ...emberTypesPackages
           }
         }
       },
       {
         name: 'ember-lts-4.4',
         npm: {
           devDependencies: {
-            'ember-source': '~4.4.0'
+            'ember-source': '~4.4.0',
+            ...emberTypesPackages
           }
         }
       },
@@ -58,7 +66,8 @@ module.exports = async function () {
         },
         npm: {
           devDependencies: {
-            'ember-source': '~3.28.0'
+            'ember-source': '~3.28.0',
+            ...emberTypesPackages
           },
           ember: {
             edition: 'classic'

test-app/package.json

@@ -18,6 +18,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:types": "glint",
     "start": "ember serve",
     "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test",

test-app/tests/helpers/index.js → test-app/tests/helpers/index.ts

@@ -1,3 +1,4 @@
+import type { SetupTestOptions } from 'ember-qunit';
 import {
   setupApplicationTest as upstreamSetupApplicationTest,
   setupRenderingTest as upstreamSetupRenderingTest,
@@ -8,7 +9,10 @@ import {
 // test setup functions. This way, you can easily extend the setup that is
 // needed per test type.
 
-function setupApplicationTest(hooks, options) {
+function setupApplicationTest(
+  hooks: NestedHooks,
+  options: SetupTestOptions
+): void {
   upstreamSetupApplicationTest(hooks, options);
 
   // Additional setup for application tests can be done here.
@@ -27,13 +31,16 @@ function setupApplicationTest(hooks, options) {
   // setupMirage(hooks); // ember-cli-mirage
 }
 
-function setupRenderingTest(hooks, options) {
+function setupRenderingTest(
+  hooks: NestedHooks,
+  options: SetupTestOptions
+): void {
   upstreamSetupRenderingTest(hooks, options);
 
   // Additional setup for rendering tests can be done here.
 }
 
-function setupTest(hooks, options) {
+function setupTest(hooks: NestedHooks, options: SetupTestOptions): void {
   upstreamSetupTest(hooks, options);
 
   // Additional setup for unit tests can be done here.