feat: initial client integrations

apps/client/project.json

@@ -24,8 +24,7 @@
           "format-util"
         ],
         "styles": ["apps/client/src/styles.css"],
-        "scripts": [],
-        "buildLibsFromSource": false
+        "scripts": []
       },
       "configurations": {
         "production": {

apps/client/src/app/app.component.ts

@@ -10,7 +10,7 @@ import { RouterModule } from '@angular/router';
 import { Dialog, DialogModule } from '@angular/cdk/dialog';
 import { NgIf } from '@angular/common';
 
-import { Scuti } from '@apex/scuti-renderer';
+// import { Scuti } from '@apex/scuti-renderer';
 
 @Component({
   selector: 'apex-root',
@@ -25,7 +25,8 @@ export class AppComponent implements OnInit {
   @ViewChild('init', { static: true })
   readonly initTemplateRef: TemplateRef<unknown>;
 
-  renderer: Scuti;
+  // renderer: Scuti;
+
   assetsLoaded = signal(false);
 
   constructor(private readonly dialog: Dialog) {}
@@ -34,15 +35,15 @@ export class AppComponent implements OnInit {
     const dialogRef = this.dialog.open(this.initTemplateRef, {
       hasBackdrop: true,
     });
-    this.renderer = new Scuti({
-      width: window.innerWidth,
-      height: window.innerHeight,
-      canvas: this.canvasElementRef.nativeElement,
-      resources: 'http://localhost:8083',
-      backgroundColor: 0x212225,
-      resizeTo: window,
-    });
-    await this.renderer.load();
+    // this.renderer = new Scuti({
+    //   width: window.innerWidth,
+    //   height: window.innerHeight,
+    //   canvas: this.canvasElementRef.nativeElement,
+    //   resources: 'http://localhost:8083',
+    //   backgroundColor: 0x212225,
+    //   resizeTo: window,
+    // });
+    // await this.renderer.load();
     this.assetsLoaded.set(true);
     dialogRef.close();
   }

apps/client/src/app/app.config.ts

@@ -2,13 +2,14 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { deserialize } from '@deepkit/type';
 
-import { ApexClientConfig } from '@apex/client';
+import { ApexClientConfig, importProvidersDynamicallyFrom } from '@apex/client';
 
 import { routes } from './routes';
 import { provideRpcClient } from './utils';
 import { GameController } from './game';
 import { MessengerController } from './messenger';
 import { RoomController } from './room';
+import { IntegrationsModule } from './integrations';
 
 export const clientConfig = deserialize<ApexClientConfig>(
   (window as any)['APEX_CLIENT_CONFIG'],
@@ -26,5 +27,8 @@ export const appConfig: ApplicationConfig = {
       provide: ApexClientConfig,
       useValue: clientConfig,
     },
+    importProvidersDynamicallyFrom(
+      new IntegrationsModule(clientConfig.integrations),
+    ),
   ],
 };

apps/client/src/app/integrations/index.ts

@@ -0,0 +1 @@
+export * from './integrations.module';

apps/client/src/app/integrations/integrations.module.ts

@@ -0,0 +1,14 @@
+import { DynamicNgModule, IntegrationsConfig } from '@apex/client';
+import { SupabaseModule } from '@apex/integrations/supabase/client';
+
+export class IntegrationsModule extends DynamicNgModule<IntegrationsModule> {
+  constructor(private readonly config: IntegrationsConfig) {
+    super();
+  }
+
+  process() {
+    if (this.config.supabase) {
+      this.addImport(SupabaseModule);
+    }
+  }
+}

apps/client/src/app/room/room.component.ts

@@ -1,18 +1,16 @@
-import { Component, DestroyRef, Inject, OnInit, signal } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { Dialog } from '@angular/cdk/dialog';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Observable } from 'rxjs';
 
 import { Room, RoomState } from '@apex/api/shared';
-import {
-  FloorMaterial as ScutiFloorMaterial,
-  Room as ScutiRoom,
-  WallMaterial as ScutiWallMaterial,
-} from '@apex/scuti-renderer';
-
 import { JoinRoomOptions } from '@apex/api/server';
 import { RoomChatMessageEvent } from '@apex/api/client';
+// import {
+//   FloorMaterial as ScutiFloorMaterial,
+//   Room as ScutiRoom,
+//   WallMaterial as ScutiWallMaterial,
+// } from '@apex/scuti-renderer';
 
 import { AppComponent } from '../app.component';
 import { RoomService } from './room.service';
@@ -26,7 +24,7 @@ import { RoomController } from './room.controller';
   templateUrl: './room.component.html',
 })
 export class RoomComponent implements OnInit {
-  scutiRoom?: ScutiRoom;
+  // scutiRoom?: ScutiRoom;
 
   constructor(
     private readonly app: AppComponent,
@@ -39,18 +37,18 @@ export class RoomComponent implements OnInit {
   ) {}
 
   private render(room: Room) {
-    this.scutiRoom = new ScutiRoom({
-      heightMap: room.map,
-      dragging: true,
-      centerCamera: true,
-      floorMaterial: new ScutiFloorMaterial(101),
-      floorThickness: 8,
-      wallMaterial: new ScutiWallMaterial(108),
-      wallThickness: 8,
-      wallHeight: -1,
-    });
-
-    this.app.renderer.add(this.scutiRoom);
+    // this.scutiRoom = new ScutiRoom({
+    //   heightMap: room.map,
+    //   dragging: true,
+    //   centerCamera: true,
+    //   floorMaterial: new ScutiFloorMaterial(101),
+    //   floorThickness: 8,
+    //   wallMaterial: new ScutiWallMaterial(108),
+    //   wallThickness: 8,
+    //   wallHeight: -1,
+    // });
+    //
+    // this.app.renderer.add(this.scutiRoom);
   }
 
   private async join(id: Room['id'], options?: JoinRoomOptions): Promise<Room> {
@@ -67,7 +65,9 @@ export class RoomComponent implements OnInit {
         if (!this.service.isOwner(this.user.me, room)) {
           // room.users.length === room.capacity
           if (room.state === RoomState.FULL) {
+            /* eslint-disable no-empty */
           } else if (room.state === RoomState.LOCKED) {
+            /* eslint-disable no-empty */
           } else if (room.state === RoomState.PASSWORD_PROTECTED) {
             const dialogRef = this.dialog.open(
               PasswordProtectedRoomDialogComponent,

apps/client/src/index.html

@@ -6,7 +6,7 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <script src=http://localhost:8080/config.js"></script>
+    <script src="http://localhost:8080/config.js"></script>
     <!--<link
       rel="stylesheet"
       rel="preload"

apps/client/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "target": "es2022",
     "useDefineForClassFields": false,
@@ -28,15 +29,10 @@
       "path": "./tsconfig.worker.json"
     }
   ],
-  "extends": "../../tsconfig.base.json",
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  },
-  "reflection": [
-    "src/**/*.controller.ts",
-    "src/**/*-dialog.component.ts"
-  ]
+  }
 }

apps/client/vite.config.ts

@@ -1,4 +1,4 @@
-import { join } from 'node:path';
+import { join } from 'path';
 import { defineConfig } from 'vite';
 import { deepkitType } from '@deepkit/vite';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';

libs/api/client/package.json

@@ -2,8 +2,7 @@
   "name": "@apex/api/client",
   "version": "0.0.1",
   "dependencies": {},
-  "type": "commonjs",
-  "main": "./index.cjs",
+  "type": "module",
   "module": "./index.js",
   "reflection": true
 }

libs/api/client/project.json

@@ -16,7 +16,7 @@
         "project": "{projectRoot}/package.json",
         "compiler": "tsc",
         "external": "all",
-        "format": ["cjs", "esm"]
+        "format": ["esm"]
       }
     },
     "lint": {

libs/api/server/package.json

@@ -2,8 +2,7 @@
   "name": "@apex/api/server",
   "version": "0.0.1",
   "dependencies": {},
-  "type": "commonjs",
-  "main": "./index.cjs",
+  "type": "module",
   "module": "./index.js",
   "reflection": true
 }

libs/api/server/project.json

@@ -16,7 +16,7 @@
         "project": "{projectRoot}/package.json",
         "compiler": "tsc",
         "external": "all",
-        "format": ["cjs", "esm"]
+        "format": ["esm"]
       }
     },
     "lint": {

libs/api/shared/package.json

@@ -2,8 +2,7 @@
   "name": "@apex/api/shared",
   "version": "0.0.1",
   "dependencies": {},
-  "type": "commonjs",
-  "main": "./index.cjs",
+  "type": "module",
   "module": "./index.js",
   "reflection": true
 }

libs/api/shared/project.json

@@ -15,7 +15,7 @@
         "project": "{projectRoot}/package.json",
         "compiler": "tsc",
         "external": "all",
-        "format": ["cjs", "esm"]
+        "format": ["esm"]
       }
     },
     "lint": {

libs/client/package.json

@@ -2,8 +2,7 @@
   "name": "@apex/client",
   "version": "0.0.1",
   "dependencies": {},
-  "type": "commonjs",
-  "main": "./index.cjs",
+  "type": "module",
   "module": "./index.js",
   "reflection": true
 }

libs/client/project.json

@@ -15,7 +15,7 @@
         "project": "{projectRoot}/package.json",
         "compiler": "tsc",
         "external": "all",
-        "format": ["cjs", "esm"]
+        "format": ["esm"]
       }
     },
     "lint": {

libs/client/src/index.ts

@@ -1,2 +1,5 @@
 /* eslint-disable import/no-internal-modules */
 export * from './lib/config';
+export * from './lib/auth';
+export * from './lib/utils';
+export * from './lib/dynamic-module';

libs/client/src/lib/auth.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from '@angular/core';
+import { ClassType } from '@deepkit/core';
+
+export const AUTH_DIALOG_COMPONENT = new InjectionToken<
+  ClassType<AuthDialogComponent>
+>('AUTH_DIALOG_COMPONENT');
+
+export interface AuthDialogComponent {}
+
+export abstract class AuthService {}

libs/client/src/lib/config.ts

@@ -1,7 +1,8 @@
-import { SupabaseConfig } from '@apex/integrations/supabase/client';
+// TODO: circular dependency
+// import { SupabaseConfig } from '@apex/integrations/supabase/client';
 
 export class IntegrationsConfig {
-  readonly supabase?: SupabaseConfig;
+  readonly supabase?: unknown; // SupabaseConfig
   readonly thirdweb?: unknown;
 }
 

libs/client/src/lib/dynamic-module.ts

@@ -0,0 +1,53 @@
+import {
+  EnvironmentProviders,
+  importProvidersFrom,
+  ModuleWithProviders,
+  Provider,
+} from '@angular/core';
+import { ClassType } from '@deepkit/core';
+
+import { setFactoryDef, setInjectorDef, setNgModuleDef } from './utils';
+
+export type NgModuleProvider = Provider | EnvironmentProviders;
+
+export function importProvidersDynamicallyFrom(
+  ...modules: readonly DynamicNgModule<unknown>[]
+): EnvironmentProviders {
+  return importProvidersFrom(...modules.map(module => module.configure()));
+}
+
+export abstract class DynamicNgModule<T> {
+  private readonly imports = new Set<ClassType>();
+  private readonly providers = new Set<NgModuleProvider>();
+
+  protected addProvider(provider: NgModuleProvider) {
+    this.providers.add(provider);
+  }
+
+  protected addImport(module: ClassType) {
+    this.imports.add(module);
+  }
+
+  protected abstract process(): void;
+
+  configure(): ModuleWithProviders<T> {
+    this.process();
+
+    setNgModuleDef(this.constructor, {
+      type: this.constructor,
+      imports: [...this.imports],
+    });
+
+    setInjectorDef(this.constructor, {
+      imports: [...this.imports],
+      providers: [...this.providers],
+    });
+
+    setFactoryDef(this.constructor, () => this);
+
+    return {
+      ngModule: this.constructor as ClassType<T>,
+      providers: [],
+    };
+  }
+}

libs/client/src/lib/utils.ts

@@ -0,0 +1,29 @@
+import {
+  ɵNG_INJ_DEF,
+  ɵNG_MOD_DEF,
+  ɵɵdefineInjector,
+  ɵɵdefineNgModule,
+} from '@angular/core';
+
+export const ɵNG_FAC_DEF = 'ɵfac' as const;
+
+export function setInjectorDef(
+  type: any,
+  def: Parameters<typeof ɵɵdefineInjector>[0],
+) {
+  type[ɵNG_INJ_DEF] = ɵɵdefineInjector(def);
+}
+
+export function setNgModuleDef(
+  type: any,
+  def: Parameters<typeof ɵɵdefineNgModule>[0],
+) {
+  type[ɵNG_MOD_DEF] = ɵɵdefineNgModule(def);
+}
+
+export function setFactoryDef(type: any, fac: () => any) {
+  Object.defineProperty(type, ɵNG_FAC_DEF, {
+    configurable: true,
+    get: () => fac,
+  });
+}