chore: update tsconfig files and change platform to ESM (#49)

apps/demo-game/package.json

@@ -46,8 +46,6 @@
     "@graphql-codegen/typescript": "4.0.1",
     "@graphql-codegen/typescript-operations": "4.0.1",
     "@graphql-codegen/typescript-resolvers": "4.0.1",
-    "@tsconfig/node18": "18.2.4",
-    "@tsconfig/recommended": "1.0.2",
     "@types/node": "^20.14.9",
     "@types/ramda": "^0.28.25",
     "@types/react": "^18.3.3",

apps/demo-game/src/components/RootLayout.tsx

@@ -1,4 +1,4 @@
-import { sourceSansPro } from '@lib/fonts'
+import { sourceSansPro } from '~/lib/fonts'
 
 import type { PropsWithChildren } from 'react'
 

apps/demo-game/src/pages/admin/games/[id].tsx

@@ -11,7 +11,7 @@ import { Formik } from 'formik'
 import { useRouter } from 'next/router'
 import { twMerge } from 'tailwind-merge'
 
-import PlayerCompact from '@components/PlayerCompact'
+import PlayerCompact from '~/components/PlayerCompact'
 
 import { useMutation, useQuery } from '@apollo/client'
 import {

apps/demo-game/tsconfig.json

@@ -1,31 +1,35 @@
 {
-  "extends": "@tsconfig/node18/tsconfig.json",
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
   "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
     "noEmit": true,
     "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
     "resolveJsonModule": true,
+    "isolatedModules": true,
     "jsx": "preserve",
+    "rootDir": ".",
     "baseUrl": ".",
     "paths": {
-      "@components/*": [
-        "src/components/*"
-      ],
-      "@graphql/*": [
-        "src/graphql/*"
-      ],
-      "@lib/*": [
-        "src/lib/*"
+      "~/*": [
+        "./src/*"
       ]
-    },
-    "isolatedModules": true
-  }
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/platform/global.d.ts

@@ -0,0 +1 @@
+declare var window: Window & typeof globalThis

packages/platform/package.json

@@ -14,10 +14,11 @@
     "winston": "3.9.0"
   },
   "devDependencies": {
-    "@tsconfig/node18": "18.2.4",
-    "@tsconfig/recommended": "1.0.2",
     "@types/jest": "^29.2.2",
+    "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20.14.9",
+    "@types/ramda": "^0.28.25",
+    "@types/react": "^18.2.0",
     "cross-env": "7.0.3",
     "fs-extra": "11.1.1",
     "jest": "29.6.4",

packages/platform/src/index.ts

@@ -1,6 +1,6 @@
-export { default as log } from './lib/logger'
-export * as AccountService from './services/AccountService'
-export * as EventService from './services/EventService'
-export * as GameService from './services/GameService'
-export * as PlayService from './services/PlayService'
-export * from './types'
+export { default as log } from './lib/logger.js'
+export * as AccountService from './services/AccountService.js'
+export * as EventService from './services/EventService.js'
+export * as GameService from './services/GameService.js'
+export * as PlayService from './services/PlayService.js'
+export * from './types.js'

packages/platform/src/lib/SSELink.ts

@@ -17,7 +17,7 @@ class SSELink extends ApolloLink {
     this.client = createClient(options)
   }
 
-  public request(operation: Operation): Observable<FetchResult> {
+  public override request(operation: Operation): Observable<FetchResult> {
     return new Observable((sink) => {
       return this.client.subscribe<FetchResult>(
         { ...operation, query: print(operation.query) },

packages/platform/src/lib/apollo.ts

@@ -4,7 +4,7 @@ import { getMainDefinition } from '@apollo/client/utilities'
 import assert from 'node:assert'
 import { useMemo } from 'react'
 
-import SSELink from './SSELink'
+import SSELink from './SSELink.js'
 
 let apolloClient
 

packages/platform/src/lib/util.ts

@@ -26,7 +26,11 @@ export function diceRoll(seeds: number[] = []) {
   return integer(1, 6)(rng)
 }
 
-export function computeScenarioOutcome(trend: number, gap: number, diceRoll: number) {
+export function computeScenarioOutcome(
+  trend: number,
+  gap: number,
+  diceRoll: number
+) {
   return trend + (diceRoll - 7) * gap
 }
 

packages/platform/src/nexus.ts

@@ -17,9 +17,9 @@ export const Event = objectType({
   },
 })
 
-export * from './types/Game'
-export * from './types/LearningElement'
-export * from './types/Mutation'
-export * from './types/Player'
-export * from './types/Query'
-export * from './types/Subscription'
+export * from './types/Game.js'
+export * from './types/LearningElement.js'
+export * from './types/Mutation.js'
+export * from './types/Player.js'
+export * from './types/Query.js'
+export * from './types/Subscription.js'

packages/platform/src/services/AccountService.ts

@@ -2,7 +2,7 @@ import type { PrismaClient } from '@prisma/client'
 import JWT from 'jsonwebtoken'
 import { strict as assert } from 'node:assert'
 import { destroyCookie, setCookie } from 'nookies'
-import { CtxWithPrisma, UserRole } from '../types'
+import { CtxWithPrisma, UserRole } from '../types.js'
 
 interface CreateLoginTokenArgs {
   sub: string

packages/platform/src/services/EventService.ts

@@ -1,6 +1,6 @@
 import * as DB from '@prisma/client'
-import { pubSub } from '../lib/pubsub'
-import { BaseUserNotificationType as UserNotificationType } from '../types'
+import { pubSub } from '../lib/pubsub.js'
+import { BaseUserNotificationType as UserNotificationType } from '../types.js'
 
 export async function receiveEvents({ events, ctx, prisma }) {
   if (!Array.isArray(events)) return

packages/platform/src/services/GameService.ts

@@ -3,9 +3,9 @@ import { PrismaClient } from '@prisma/client'
 import { nanoid } from 'nanoid'
 import { none, repeat } from 'ramda'
 import * as yup from 'yup'
-import log from '../lib/logger'
-import { CtxWithFacts, CtxWithFactsAndSchema, CtxWithPrisma } from '../types'
-import * as EventService from './EventService'
+import log from '../lib/logger.js'
+import { CtxWithFacts, CtxWithFactsAndSchema, CtxWithPrisma } from '../types.js'
+import * as EventService from './EventService.js'
 
 type Context = CtxWithPrisma<PrismaClient>
 
@@ -87,7 +87,7 @@ export async function addGamePeriod<TFacts>(
 
   if (!game) return null
 
-  const index = game.periods[0]?.index + 1 || 0
+  const index = (game.periods[0]?.index ?? -1) + 1
 
   // TODO(JJ): Why do we provide validatedFacts twice?
   // - remove periodFacts from payload for initialize?
@@ -193,7 +193,7 @@ export async function addPeriodSegment<TFacts>(
 
   if (!period) return null
 
-  const index = period.segments[0]?.index + 1 || 0
+  const index = (period.segments[0]?.index ?? -1) + 1
 
   const { resultFacts: initializedFacts } = services.Segment.initialize(
     validatedFacts,
@@ -353,7 +353,7 @@ export async function activateNextPeriod(
           players: game.players,
           activePeriodIx: currentPeriodIx,
           gameId: game.id,
-          periodFacts: game.periods?.[0].facts,
+          periodFacts: game.periods?.[0]?.facts,
         },
         ctx,
         { services }
@@ -624,7 +624,7 @@ export async function activateNextPeriod(
 
       const { results, extras } = computePeriodStartResults(
         {
-          results: game.activePeriod.previousPeriod[0].results,
+          results: game.activePeriod.previousPeriod[0]?.results,
           players: game.players,
           activePeriodIx: currentPeriodIx,
           gameId: game.id,

packages/platform/src/services/PlayService.ts

@@ -3,8 +3,8 @@ import {
   CtxWithPrisma,
   LearningElementState,
   BaseUserNotificationType as UserNotificationType,
-} from '../types'
-import * as EventService from './EventService'
+} from '../types.js'
+import * as EventService from './EventService.js'
 
 type Context = CtxWithPrisma<DB.PrismaClient>
 

packages/platform/src/types/Game.ts

@@ -1,9 +1,9 @@
 import * as DB from '@prisma/client'
 
 import { enumType, objectType } from 'nexus'
-import { LearningElement } from './LearningElement'
-import { Player, PlayerAction, PlayerResult } from './Player'
-import { StoryElement } from './StoryElement'
+import { LearningElement } from './LearningElement.js'
+import { Player, PlayerAction, PlayerResult } from './Player.js'
+import { StoryElement } from './StoryElement.js'
 
 export const GameStatus = enumType({
   name: 'GameStatus',

packages/platform/src/types/LearningElement.ts

@@ -1,5 +1,5 @@
 import { objectType } from 'nexus'
-import { Player } from './Player'
+import { Player } from './Player.js'
 
 export const LearningAnswerOption = objectType({
   name: 'LearningAnswerOption',

packages/platform/src/types/Mutation.ts

@@ -9,13 +9,13 @@ import {
   objectType,
   stringArg,
 } from 'nexus'
-import * as AccountService from '../services/AccountService'
-import * as GameService from '../services/GameService'
+import * as AccountService from '../services/AccountService.js'
+import * as GameService from '../services/GameService.js'
 
-import * as PlayService from '../services/PlayService'
-import { Game, Period, PeriodSegment } from './Game'
-import { LearningElementAttempt } from './LearningElement'
-import { Player, PlayerDecision, PlayerResult } from './Player'
+import * as PlayService from '../services/PlayService.js'
+import { Game, Period, PeriodSegment } from './Game.js'
+import { LearningElementAttempt } from './LearningElement.js'
+import { Player, PlayerDecision, PlayerResult } from './Player.js'
 
 const defaultServices = {}
 const defaultSchemas = {}

packages/platform/src/types/Player.ts

@@ -1,10 +1,10 @@
 import * as DB from '@prisma/client'
 
 import { enumType, objectType } from 'nexus'
-import { AchievementInstance } from './Achievement'
-import { Game, Period, PeriodSegment } from './Game'
-import { LearningElement } from './LearningElement'
-import { StoryElement } from './StoryElement'
+import { AchievementInstance } from './Achievement.js'
+import { Game, Period, PeriodSegment } from './Game.js'
+import { LearningElement } from './LearningElement.js'
+import { StoryElement } from './StoryElement.js'
 
 export const PlayerDecisionType = enumType({
   name: 'PlayerDecisionType',

packages/platform/src/types/Query.ts

@@ -1,9 +1,9 @@
 import { idArg, intArg, nonNull, objectType } from 'nexus'
-import * as GameService from '../services/GameService'
-import * as PlayService from '../services/PlayService'
-import { Game } from './Game'
-import { LearningElement, LearningElementState } from './LearningElement'
-import { Player, PlayerResult, PlayerState } from './Player'
+import * as GameService from '../services/GameService.js'
+import * as PlayService from '../services/PlayService.js'
+import { Game } from './Game.js'
+import { LearningElement, LearningElementState } from './LearningElement.js'
+import { Player, PlayerResult, PlayerState } from './Player.js'
 
 export function generateBaseQueries() {
   return objectType({

packages/platform/src/types/Subscription.ts

@@ -1,6 +1,6 @@
 import { subscriptionType } from 'nexus'
-import { pubSub } from '../lib/pubsub'
-import { Event } from '../nexus'
+import { pubSub } from '../lib/pubsub.js'
+import { Event } from '../nexus.js'
 
 export function generateBaseSubscriptions() {
   return subscriptionType({

packages/platform/tsconfig.json

@@ -1,11 +1,39 @@
 {
-  "extends": "@tsconfig/node18/tsconfig.json",
-  "include": ["src"],
+  "include": [
+    "./**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+  ],
   "compilerOptions": {
-    "lib": ["es2022", "dom"],
-    "noImplicitAny": false,
-    "strictNullChecks": true,
-    "moduleResolution": "node",
-    "module": "CommonJS"
+    "baseUrl": ".",
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": false,
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    /* If transpiling with TypeScript: */
+    "module": "NodeNext",
+    "outDir": "dist",
+    "sourceMap": true,
+    /* AND if you're building for a library: */
+    "declaration": true,
+    /* AND if you're building for a library in a monorepo: */
+    "composite": false,
+    "declarationMap": true,
+    /* If your code doesn't run in the DOM: */
+    "lib": [
+      "es2022"
+    ],
+    "noImplicitAny": false
   }
 }

packages/ui/src/components/Button.tsx

@@ -1,4 +1,4 @@
-import { cn } from '~/lib/utils'
+import { cn } from '~/lib/utils.js'
 
 function Button({ className }: { className?: string }) {
   return (