Add Angular integration (#4139)

# Description of Changes

- Add Angular integration
- Add Angular quickstart chat template

# API and ABI breaking changes

None.

# Expected complexity level and risk

2

# Testing

Ran the template

---------

Co-authored-by: Tien Pham <tien@clockworklabs.io>
Co-authored-by: clockwork-labs-bot <clockwork-labs-bot@users.noreply.github.com>

Author: 3 people

crates/bindings-typescript/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

crates/bindings-typescript/package.json

@@ -89,6 +89,12 @@
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.cjs",
       "default": "./dist/svelte/index.mjs"
+    },
+    "./angular": {
+      "types": "./dist/angular/index.d.ts",
+      "import": "./dist/angular/index.mjs",
+      "require": "./dist/angular/index.cjs",
+      "default": "./dist/angular/index.mjs"
     }
   },
   "size-limit": [
@@ -183,7 +189,8 @@
     "react": "^18.0.0 || ^19.0.0-0 || ^19.0.0",
     "svelte": "^4.0.0 || ^5.0.0",
     "undici": "^6.19.2",
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "@angular/core": ">=17.0.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-query": {
@@ -200,6 +207,9 @@
     },
     "vue": {
       "optional": true
+    },
+    "@angular/core": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -224,6 +234,8 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.18.2",
     "vite": "^7.1.5",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@angular/core": "^21.1.0",
+    "@angular/compiler": "^21.1.0"
   }
 }

crates/bindings-typescript/src/angular/connection_state.ts

@@ -0,0 +1,19 @@
+import { InjectionToken, type WritableSignal } from '@angular/core';
+import type { ConnectionId } from '../lib/connection_id';
+import type { Identity } from '../lib/identity';
+import type { DbConnectionImpl } from '../sdk/db_connection_impl';
+
+export interface ConnectionState {
+  isActive: boolean;
+  identity?: Identity;
+  token?: string;
+  connectionId: ConnectionId;
+  connectionError?: Error;
+  getConnection<
+    DbConnection extends DbConnectionImpl<any>,
+  >(): DbConnection | null;
+}
+
+export const SPACETIMEDB_CONNECTION = new InjectionToken<
+  WritableSignal<ConnectionState>
+>('SpacetimeDB Connection State');

crates/bindings-typescript/src/angular/index.ts

@@ -0,0 +1,3 @@
+export type { ConnectionState } from './connection_state.ts';
+export * from './injectors/index.ts';
+export * from './providers/index.ts';

crates/bindings-typescript/src/angular/injectors/index.ts

@@ -0,0 +1,4 @@
+export { injectSpacetimeDB } from './inject-spacetimedb.ts';
+export { injectTable, type TableRows } from './inject-table.ts';
+export { injectSpacetimeDBConnected } from './inject-spacetimedb-connected.ts';
+export { injectReducer } from './inject-reducer.ts';

crates/bindings-typescript/src/angular/injectors/inject-reducer.ts

@@ -0,0 +1,62 @@
+import { assertInInjectionContext, inject, effect } from '@angular/core';
+import { SPACETIMEDB_CONNECTION } from '../connection_state';
+import type { ParamsType } from '../../sdk';
+import type { UntypedReducerDef } from '../../sdk/reducers';
+
+export function injectReducer<ReducerDef extends UntypedReducerDef>(
+  reducerDef: ReducerDef
+): (...params: ParamsType<ReducerDef>) => void {
+  assertInInjectionContext(injectReducer);
+
+  const connState = inject(SPACETIMEDB_CONNECTION);
+  const queue: ParamsType<ReducerDef>[] = [];
+  const reducerName = reducerDef.accessorName;
+
+  // flush queued calls when connection becomes active
+  effect((onCleanup: (fn: () => void) => void) => {
+    const state = connState();
+    if (!state.isActive) {
+      return;
+    }
+
+    const connection = state.getConnection();
+    if (!connection) {
+      return;
+    }
+
+    const callReducer = (connection.reducers as any)[reducerName] as (
+      ...p: ParamsType<ReducerDef>
+    ) => void;
+
+    if (queue.length) {
+      const pending = queue.splice(0);
+      for (const params of pending) {
+        callReducer(...params);
+      }
+    }
+
+    onCleanup(() => {
+      queue.splice(0);
+    });
+  });
+
+  return (...params: ParamsType<ReducerDef>) => {
+    const state = connState();
+    if (!state.isActive) {
+      queue.push(params);
+      return;
+    }
+
+    const connection = state.getConnection();
+    if (!connection) {
+      queue.push(params);
+      return;
+    }
+
+    const callReducer = (connection.reducers as any)[reducerName] as (
+      ...p: ParamsType<ReducerDef>
+    ) => void;
+
+    return callReducer(...params);
+  };
+}

crates/bindings-typescript/src/angular/injectors/inject-spacetimedb-connected.ts

@@ -0,0 +1,13 @@
+import {
+  assertInInjectionContext,
+  inject,
+  computed,
+  type Signal,
+} from '@angular/core';
+import { SPACETIMEDB_CONNECTION } from '../connection_state';
+
+export function injectSpacetimeDBConnected(): Signal<boolean> {
+  assertInInjectionContext(injectSpacetimeDBConnected);
+  const state = inject(SPACETIMEDB_CONNECTION);
+  return computed(() => state().isActive);
+}

crates/bindings-typescript/src/angular/injectors/inject-spacetimedb.ts

@@ -0,0 +1,10 @@
+import { assertInInjectionContext, inject, type Signal } from '@angular/core';
+import {
+  SPACETIMEDB_CONNECTION,
+  type ConnectionState,
+} from '../connection_state';
+
+export function injectSpacetimeDB(): Signal<ConnectionState> {
+  assertInInjectionContext(injectSpacetimeDB);
+  return inject(SPACETIMEDB_CONNECTION).asReadonly();
+}