refactor: enforce new TS NodeJS ESM resolution and add explicit extensions

Enables the new Node 16 module resolution, inserts the `package.json`
files with `type: module` where needed. Also performs all changes needed
to satisfy the new module resolution. The new resolution ensures our
code is fully ESM compatible. Bundlers are fine without extensions
currently, but this may change and using the explicit extension is
guaranteeing proper ESM and allows us to benefit from TS intellisense.

Author: devversion

.circleci/config.yml

@@ -179,6 +179,11 @@ jobs:
           name: Check code by running linters
           command: yarn lint
 
+      # TODO(ESM): This can be removed when Bazel also uses the new `Node16/next` resolution.
+      - run:
+          name: Ensure TypeScript code passes type checking
+          command: yarn tsc -p tsconfig.json
+
   publish_snapshot_build:
     executor: docker-linux-executor
     steps:

apps/account-functions/index.ts

@@ -1,2 +1,2 @@
-export {beforeCreate} from './before-create';
-export {beforeSignIn} from './before-sign-in';
+export {beforeCreate} from './before-create.js';
+export {beforeSignIn} from './before-sign-in.js';

apps/functions/githubWebhook/index.ts

@@ -1,9 +1,9 @@
 import * as functions from 'firebase-functions';
 import * as admin from 'firebase-admin';
-import {handlePullRequestEvent} from './pull-request';
-import {handleStatusEvent} from './status';
+import {handlePullRequestEvent} from './pull-request.js';
+import {handleStatusEvent} from './status.js';
 import {LabelEvent, StatusEvent} from '@octokit/webhooks-types';
-import {handleLabelEvent} from './label';
+import {handleLabelEvent} from './label.js';
 
 admin.initializeApp({...functions.firebaseConfig()});
 

apps/functions/githubWebhook/label.ts

@@ -1,7 +1,11 @@
 import {LabelEvent} from '@octokit/webhooks-types';
 import {firestore} from 'firebase-admin';
 // TODO(josephperrott): Remove usage of FirestoreReference and fromFirestoreReference.
-import {Label, FirestoreReference, fromFirestoreReference} from '../../shared/models/server-models';
+import {
+  Label,
+  FirestoreReference,
+  fromFirestoreReference,
+} from '../../shared/models/server-models.js';
 
 export async function handleLabelEvent(event: LabelEvent) {
   const {getFirestoreRefForGithubModel, fromGithub} = Label.getGithubHelpers();

apps/functions/githubWebhook/pull-request.ts

@@ -5,7 +5,7 @@ import {
   PullRequest,
   FirestoreReference,
   fromFirestoreReference,
-} from '../../shared/models/server-models';
+} from '../../shared/models/server-models.js';
 
 export async function handlePullRequestEvent({pull_request}: PullRequestEvent) {
   const {getFirestoreRefForGithubModel, fromGithub} = PullRequest.getGithubHelpers();

apps/functions/githubWebhook/status.ts

@@ -5,7 +5,7 @@ import {
   Status,
   FirestoreReference,
   fromFirestoreReference,
-} from '../../shared/models/server-models';
+} from '../../shared/models/server-models.js';
 
 export async function handleStatusEvent(event: StatusEvent) {
   const {getFirestoreRefForGithubModel, fromGithub} = Status.getGithubHelpers();

apps/functions/index.ts

@@ -1 +1 @@
-export {githubWebhook} from './githubWebhook/index';
+export {githubWebhook} from './githubWebhook/index.js';

apps/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "module"
+}

apps/prs/src/app/app-routing.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
 const routes: Routes = [
-  {path: 'login', loadChildren: () => import('./login/login.module').then((m) => m.LoginModule)},
+  {path: 'login', loadChildren: () => import('./login/login.module.js').then((m) => m.LoginModule)},
 ];
 
 @NgModule({

apps/prs/src/app/app.component.spec.ts

@@ -1,6 +1,6 @@
 import {TestBed} from '@angular/core/testing';
 import {RouterTestingModule} from '@angular/router/testing';
-import {AppComponent} from './app.component';
+import {AppComponent} from './app.component.js';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';