@signal-spec/react-client 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,30 @@
-# Temporary Holding Version
+# SignalSpec React Client
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Generate typed React hooks and DTOs from a SignalSpec JSON document:
+
+```sh
+signal-spec generate --input=./signal-spec.json --output=./src/generated --backend-uri=https://localhost:49363
+```
+
+During development, use `vp run generate` followed by the same flags.
+`--input` accepts a local JSON file, a tsconfig path alias such as `@/spec.json`,
+or an HTTP(S) URL. `--output` accepts a local folder or tsconfig alias.
+Paths resolve from the current working directory. Quote paths containing spaces.
+All three options are required; both `--flag=value` and `--flag value` work.
+
+Generated hooks automatically import `config.ts`, which initializes the shared
+Zustand connection store with the supplied backend URI. No provider is required.
+After importing generated hooks, applications can override the default:
+
+```ts
+import { useSignalRConnectionsStore } from "@signal-spec/react-client";
+
+useSignalRConnectionsStore.setState({ backendUri: "https://api.example.com" });
+```
+
+Overrides affect new connections. Existing connections keep their original URL.
+The URI is shared across generated clients in the same application.
+Generation overwrites matching files, retains stale files, and may leave partial
+output if TypeSynth reports an error. Generation failures return a nonzero exit code.
+
+Development: `vp install`, `vp check`, `vp test`, and `vp run build`.

package/bin/signal-spec.mjs

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+import { createRequire } from "node:module";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { mkdtemp, writeFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { spawn } from "node:child_process";
+
+const help = `Usage: signal-spec generate --input <json-or-url> --output <folder> --backend-uri <uri>
+
+Input and output paths resolve from the current directory, including tsconfig aliases.
+The backend URI becomes the generated default and can be overridden at runtime.
+Options accept --flag=value or --flag value. Use --help to show this message.`;
+
+try {
+  const args = process.argv.slice(2);
+  if (!args.length || args.includes("--help")) {
+    console.log(help);
+  } else {
+    if (args.shift() !== "generate") throw new Error('Expected command "generate".');
+    const flags = {};
+    while (args.length) {
+      const arg = args.shift();
+      const match = /^--(input|output|backend-uri)(?:=(.*))?$/.exec(arg);
+      if (!match) throw new Error(`Unknown argument: ${arg}`);
+      const [, key, inline] = match;
+      if (Object.hasOwn(flags, key)) throw new Error(`Duplicate option --${key}.`);
+      const value = inline ?? args.shift();
+      if (!value || value.startsWith("--")) throw new Error(`--${key} requires a value.`);
+      flags[key] = value;
+    }
+    for (const key of ["input", "output", "backend-uri"]) {
+      if (!flags[key]) throw new Error(`Missing required option --${key}.`);
+    }
+    const require = createRequire(import.meta.url);
+    const typesynth = resolve(dirname(require.resolve("typesynth/package.json")), "dist/bin/cli.js");
+    const sources = fileURLToPath(new URL("../src/generation/", import.meta.url));
+    let temporary;
+    try {
+      if (/^https?:\/\//i.test(flags.input)) {
+        const response = await fetch(flags.input);
+        if (!response.ok) throw new Error(`Failed to fetch spec: HTTP ${response.status}`);
+        const text = await response.text();
+        JSON.parse(text);
+        temporary = await mkdtemp(resolve(tmpdir(), "signal-spec-"));
+        flags.input = resolve(temporary, "spec.json");
+        await writeFile(flags.input, text);
+      }
+    const child = spawn(process.execPath, [typesynth, "generate", `--sources=${sources}`,
+      `--input=${flags.input}`, `--output=${flags.output}`], {
+      stdio: "inherit",
+      env: { ...process.env, SIGNAL_SPEC_BACKEND_URI: flags["backend-uri"] },
+    });
+    process.exitCode = await new Promise((done, reject) => {
+      child.on("error", reject);
+      child.on("exit", code => done(code ?? 1));
+    });
+    } finally {
+      if (temporary) await rm(temporary, { recursive: true, force: true });
+    }
+  }
+} catch (error) {
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exitCode = 1;
+}
+
+

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import * as SignalR from "@microsoft/signalr";
+import { HubConnection } from "@microsoft/signalr";
+//#region src/helpers/useSignalRConnections.d.ts
+interface SignalRConnectionData {
+  connection: SignalR.HubConnection;
+  componentsSubscribed: number;
+}
+export declare function isConnectionAlive(connectionState: SignalR.HubConnectionState | null | undefined): boolean | null | undefined;
+interface SignalRConnections {
+  createConnection: (hubName: string) => Promise<SignalRConnectionData>;
+  setupEventHandlers: <T>(hubName: string, handlers: Partial<T>, onConnected?: (connection: SignalR.HubConnection) => void) => Promise<void>;
+  deleteConnection: <T>(hubName: string, handlers: Partial<T>) => void;
+}
+interface SignalRConfiguration {
+  backendUri: string;
+  enableDebug?: boolean;
+}
+/** Configure SignalR before mounting consumers. Backend switching is not supported. */
+export declare function configureSignalR({ backendUri, enableDebug }: SignalRConfiguration): void;
+export declare function useSignalRConnections(): SignalRConnections;
+//#endregion
+//#region src/helpers/useStableHandlers.d.ts
+/**
+ * This is basically MUI's {@link useEventCallback} hook, but designed for objects
+ * containing handlers instead of a singular handler.
+ * @param handlers
+ */
+export declare function useStableHandlers<T extends Record<string, (...args: any[]) => any>>(handlers: T | undefined): T;
+//#endregion
+//#region src/helpers/safeInvokeHubMethod.d.ts
+/**
+ * Safely invokes the SignalR hub method, i.e. it will only throw in case of an actual error,
+ * and will return `Warning` object in case the connection hasn't yet been established or
+ * has been already closed.
+ */
+export declare function safeInvokeHubMethod(connection: HubConnection | null, methodName: string, ...args: any[]): Promise<any>;
+//#endregion
+export type { SignalRConfiguration, SignalRConnectionData, SignalRConnections };

package/dist/index.mjs

@@ -0,0 +1,117 @@
+import { create } from "zustand";
+import * as SignalR from "@microsoft/signalr";
+import { HubConnectionState } from "@microsoft/signalr";
+import { useLayoutEffect, useMemo, useRef } from "react";
+//#region src/helpers/useSignalRConnections.ts
+function isConnectionAlive(connectionState) {
+	return connectionState && connectionState !== SignalR.HubConnectionState.Disconnected && connectionState !== SignalR.HubConnectionState.Disconnecting;
+}
+const useSignalRConnectionsStore = create((set, get) => ({
+	backendUri: "",
+	EnableSignalRDebug: false,
+	connectionsStore: /* @__PURE__ */ new Map(),
+	async createConnection(hubName) {
+		let data = get().connectionsStore.get(hubName);
+		if (!data) {
+			const { backendUri, EnableSignalRDebug } = get();
+			data = {
+				connection: new SignalR.HubConnectionBuilder().withUrl(backendUri + "/hubs/" + hubName, { withCredentials: true }).configureLogging(EnableSignalRDebug ? SignalR.LogLevel.Information : SignalR.LogLevel.None).withAutomaticReconnect().build(),
+				componentsSubscribed: 0
+			};
+			const connectionsStore = new Map(get().connectionsStore);
+			connectionsStore.set(hubName, data);
+			set({ connectionsStore });
+		}
+		if (!isConnectionAlive(data.connection.state)) await data.connection.start().catch((error) => {
+			if (get().EnableSignalRDebug) console.error(error);
+		});
+		return data;
+	},
+	async setupEventHandlers(hubName, handlers, onConnected) {
+		let data = get().connectionsStore.get(hubName);
+		if (!data) data = await get().createConnection(hubName);
+		onConnected?.(data.connection);
+		for (const key of Object.keys(handlers)) {
+			const handler = handlers[key];
+			if (handler !== void 0) data.connection.on(key, handler);
+		}
+		data.componentsSubscribed++;
+		set({ connectionsStore: new Map(get().connectionsStore) });
+	},
+	deleteConnection(hubName, handlers) {
+		const data = get().connectionsStore.get(hubName);
+		if (!data) return;
+		for (const key of Object.keys(handlers)) {
+			const handler = handlers[key];
+			if (handler !== void 0) data.connection.off(key, handler);
+		}
+		data.componentsSubscribed--;
+		const connectionsStore = new Map(get().connectionsStore);
+		if (data.componentsSubscribed === 0) {
+			data.connection.stop().catch((error) => {
+				if (get().EnableSignalRDebug) console.error(error);
+			});
+			connectionsStore.delete(hubName);
+		}
+		set({ connectionsStore });
+	}
+}));
+/** Configure SignalR before mounting consumers. Backend switching is not supported. */
+function configureSignalR({ backendUri, enableDebug = false }) {
+	useSignalRConnectionsStore.setState({
+		backendUri,
+		EnableSignalRDebug: enableDebug
+	});
+}
+function useSignalRConnections() {
+	return {
+		createConnection: useSignalRConnectionsStore((state) => state.createConnection),
+		setupEventHandlers: useSignalRConnectionsStore((state) => state.setupEventHandlers),
+		deleteConnection: useSignalRConnectionsStore((state) => state.deleteConnection)
+	};
+}
+//#endregion
+//#region src/helpers/useStableHandlers.ts
+/**
+* This is basically MUI's {@link useEventCallback} hook, but designed for objects
+* containing handlers instead of a singular handler.
+* @param handlers
+*/
+function useStableHandlers(handlers) {
+	const ref = useRef(handlers);
+	useLayoutEffect(() => {
+		ref.current = handlers;
+	});
+	return useMemo(() => {
+		const result = {};
+		if (!handlers) return result;
+		for (const key of Object.keys(handlers)) result[key] = (...args) => {
+			return ref.current[key](...args);
+		};
+		return result;
+	}, []);
+}
+//#endregion
+//#region src/helpers/safeInvokeHubMethod.ts
+/**
+* Safely invokes the SignalR hub method, i.e. it will only throw in case of an actual error,
+* and will return `Warning` object in case the connection hasn't yet been established or
+* has been already closed.
+*/
+async function safeInvokeHubMethod(connection, methodName, ...args) {
+	if (connection?.state !== HubConnectionState.Connected) {
+		console.warn("[SignalSpec] Skipped invocation: not connected");
+		return;
+	}
+	try {
+		return await connection.invoke(methodName, ...args);
+	} catch (err) {
+		if (err instanceof Error && err.message.includes("underlying connection being closed")) {
+			console.warn("[SignalSpec] Skipped invocation: connection is being closed");
+			return;
+		}
+		throw err;
+	}
+}
+//#endregion
+export { configureSignalR, isConnectionAlive, safeInvokeHubMethod, useSignalRConnections, useStableHandlers };

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@signal-spec/react-client",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "A SignalR client generator for React based on the SignalSpec.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IvanKobtsev/SignalSpec.ReactClient.git"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "src/generation"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "typesynth": "0.1.1",
+    "zustand": "^5.0.16"
+  },
+  "peerDependencies": {
+    "@microsoft/signalr": "^10.0.11",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "typescript": "^7.0.2",
+    "vite-plus": "1.3.0"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "12.16.1",
+      "onFail": "download"
+    }
+  },
+  "bin": {
+    "signal-spec": "bin/signal-spec.mjs"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "generate": "node --use-system-ca ./bin/signal-spec.mjs generate --input=https://localhost:49363/api/signal-spec.json --output=./src/result --backend-uri=https://localhost:49363"
+  }
 }

package/src/generation/hbs-helpers.ts

@@ -0,0 +1,108 @@
+export enum SignalRMethodType {
+  Default = "default",
+  FrontendMethod = "frontendMethod",
+  BackendMethod = "backendMethod",
+}
+
+export type MethodParameter = {
+  name: string;
+  type: string;
+};
+
+export type SignalRClientMethod = {
+  name: string;
+  methodType: SignalRMethodType;
+  parameters: MethodParameter[];
+  returns: string;
+};
+
+/*
+ * Converts unknown types into records or void's
+ */
+function safeType(p: { type: string } | string | undefined) {
+  if (!p) return "void";
+  if (typeof p === "string") return p;
+  if (p.type === "object") return "Record<string, unknown>";
+  else return p.type;
+}
+
+/*
+ * For differentiating between interfaces and types
+ */
+function isInterface(name: unknown) {
+  return typeof name === "string" && name.startsWith("I");
+}
+
+/*
+ * For skipping frontend methods when generating invoker
+ */
+function isBackendMethod(method?: SignalRClientMethod) {
+  return (
+    method?.methodType === SignalRMethodType.BackendMethod ||
+    method?.methodType === SignalRMethodType.Default
+  );
+}
+
+/*
+ * For skipping backend when generating handling interface
+ */
+
+function isFrontendMethod(method?: SignalRClientMethod) {
+  return (
+    method?.methodType === SignalRMethodType.FrontendMethod ||
+    method?.methodType === SignalRMethodType.Default
+  );
+}
+
+/*
+ * For skipping entire event block if there's no frontend methods at all
+ */
+function hasAnyFrontendMethods(methods?: SignalRClientMethod[]) {
+  return (
+    methods &&
+    methods.some(
+      (method) =>
+        method.methodType === SignalRMethodType.FrontendMethod ||
+        method.methodType === SignalRMethodType.Default,
+    )
+  );
+}
+
+/*
+ * For skipping entire invoker block if there's no backend methods at all
+ */
+function hasAnyBackendMethods(methods?: SignalRClientMethod[]) {
+  return (
+    methods &&
+    methods.some(
+      (method) =>
+        method.methodType === SignalRMethodType.BackendMethod ||
+        method.methodType === SignalRMethodType.Default,
+    )
+  );
+}
+
+/*
+ * For comparing values in templates, e.g. for checking if return type is void or not
+ */
+function eq(a: unknown, b: unknown) {
+  return a === b;
+}
+
+/*
+ * Concatenates two strings
+ */
+function concat(a?: string, b?: string) {
+  return (a ?? "") + (b ?? "");
+}
+
+export default {
+  eq,
+  concat,
+  safeType,
+  isInterface,
+  isBackendMethod,
+  isFrontendMethod,
+  hasAnyFrontendMethods,
+  hasAnyBackendMethods,
+};

package/src/generation/main.ts

@@ -0,0 +1,20 @@
+import { type GeneratorScriptProps } from "typesynth";
+import { dtoImports, validateSpec } from "./spec.ts";
+
+export default async function main({ data, generate }: GeneratorScriptProps) {
+  validateSpec(data);
+  await generate(
+    "config",
+    { backendUriLiteral: JSON.stringify(process.env.SIGNAL_SPEC_BACKEND_URI ?? "") },
+    "./config.ts",
+  );
+  await generate("dtos", data, "./DTOs.ts");
+
+  for (const [name, hubData] of Object.entries(data["hubs"])) {
+    await generate(
+      "hubClient",
+      { ...hubData, clientName: name, dtoImports: dtoImports(hubData, data.dtos) },
+      `./hooks/use${hubData.hubName}.ts`,
+    );
+  }
+}

package/src/generation/spec.ts

@@ -0,0 +1,76 @@
+import { SignalRMethodType, type SignalRClientMethod } from "./hbs-helpers.ts";
+
+type Hub = { hubName: string; hubContract: { methods: SignalRClientMethod[] } };
+export type Spec = { hubs: Record<string, Hub>; dtos: Record<string, unknown> };
+
+function invalid(path: string, expected: string): never {
+  throw new Error(
+    `Invalid SignalSpec at ${path}: expected ${expected}. The JSON may have been generated by an incompatible SignalSpec version, or may not be a SignalSpec document.`,
+  );
+}
+
+function record(value: unknown, path: string): Record<string, unknown> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) invalid(path, "an object");
+  return value as Record<string, unknown>;
+}
+
+function text(value: unknown, path: string) {
+  if (typeof value !== "string" || !value.trim()) invalid(path, "a non-empty string");
+}
+
+function array(value: unknown, path: string): unknown[] {
+  if (!Array.isArray(value)) invalid(path, "an array");
+  return value;
+}
+
+function properties(value: unknown, path: string) {
+  for (const [index, entry] of array(value, path).entries()) {
+    const itemPath = `${path}[${index}]`;
+    const item = record(entry, itemPath);
+    text(item.name, `${itemPath}.name`);
+    text(item.type, `${itemPath}.type`);
+  }
+}
+
+export function validateSpec(value: unknown): asserts value is Spec {
+  const spec = record(value, "$");
+  const hubs = record(spec.hubs, "$.hubs");
+  const dtos = record(spec.dtos, "$.dtos");
+  for (const [name, value] of Object.entries(dtos)) {
+    const path = `$.dtos[${JSON.stringify(name)}]`;
+    properties(record(value, path).properties, `${path}.properties`);
+  }
+  for (const [name, value] of Object.entries(hubs)) {
+    const path = `$.hubs[${JSON.stringify(name)}]`;
+    const hub = record(value, path);
+    text(hub.hubName, `${path}.hubName`);
+    const contract = record(hub.hubContract, `${path}.hubContract`);
+    for (const [index, value] of array(contract.methods, `${path}.hubContract.methods`).entries()) {
+      const methodPath = `${path}.hubContract.methods[${index}]`;
+      const method = record(value, methodPath);
+      text(method.name, `${methodPath}.name`);
+      if (!Object.values(SignalRMethodType).includes(method.methodType as SignalRMethodType))
+        invalid(`${methodPath}.methodType`, "default, frontendMethod, or backendMethod");
+      if (method.parameters !== undefined)
+        properties(method.parameters, `${methodPath}.parameters`);
+      if (method.returns !== undefined && method.returns !== null)
+        text(method.returns, `${methodPath}.returns`);
+    }
+  }
+}
+
+export function dtoImports(hub: Hub, dtos: Spec["dtos"]): string[] {
+  const names = new Set(Object.keys(dtos));
+  const imports = new Set<string>();
+  for (const method of hub.hubContract.methods) {
+    for (const type of [
+      ...(method.parameters ?? []).map((parameter) => parameter.type),
+      method.returns ?? "",
+    ]) {
+      for (const identifier of type.match(/[A-Za-z_$][\w$]*/g) ?? []) {
+        if (names.has(identifier)) imports.add(identifier);
+      }
+    }
+  }
+  return [...imports].sort();
+}

package/src/generation/template.hbs

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import * as SignalR from '@microsoft/signalr';
+import { useSignalRConnections } from '@/services/signalR/SignalRConnectionsProvider.tsx';
+import { EnableSignalRDebugInformation } from '@/application/constants/env-variables.ts';
+import { useStableHandlers } from '@/helpers/useStableHandlers.ts';
+
+
+
+
+
+//--------------------------------------------------------------------------------------------------------------
+// Hubs
+//--------------------------------------------------------------------------------------------------------------
+
+
+
+//--------------------------------------------------------------------------------------------------------------
+// DTOs
+//--------------------------------------------------------------------------------------------------------------
+
+
+
+
+
+{{#each x-signal-r-client.hubs}}
+
+
+{{/each}}
+
+//--------------------------------------------------------------------------------------------------------------
+// Change tracking
+//--------------------------------------------------------------------------------------------------------------
+
+export enum DomainType {
+{{#each x-domain-types.types}}
+  {{this}} = '{{this}}',
+{{/each}}
+}
+
+{{#each x-domain-types.payloads}}
+  export interface {{@key}} {
+  {{#each properties}}
+    {{name}}: {{safeType this}},
+  {{/each}}
+  }
+{{/each}}
+
+export type DomainTypePayloadMap = {
+{{#each x-domain-types.types}}
+  {{#if (lookup ../x-domain-types.payloads (concat this "Payload"))}}
+      [DomainType.{{this}}]: {{this}}Payload;
+  {{/if}}
+{{/each}}
+};
+
+export const SIGNAL_R_CLIENT_CHECKSUM = "{{magic__checksum}}";

package/src/generation/templates/config.hbs

@@ -0,0 +1,14 @@
+import { configureSignalR } from "@signal-spec/react-client";
+
+//--------------------------------------------------------------------------------------------------------------
+// <auto-generated>
+//     This file is auto-generated by "SignalSpec.ReactClient" (@signal-spec/react-client).
+//     Do not modify this file manually.
+//     If you want to adjust it, copy the template "config.hbs" and supply your edited version of it.
+// </auto-generated>
+//--------------------------------------------------------------------------------------------------------------
+
+export const backendUri = {{{backendUriLiteral}}};
+export const EnableSignalRDebug = false;
+configureSignalR({ backendUri, enableDebug: EnableSignalRDebug });
+

package/src/generation/templates/dtos.hbs

@@ -0,0 +1,25 @@
+//--------------------------------------------------------------------------------------------------------------
+// <auto-generated>
+//     This file is auto-generated by "SignalSpec.ReactClient" (@signal-spec/react-client).
+//     Do not modify this file manually.
+//     If you want to adjust it, copy the template "dtos.hbs" and supply your edited version of it.
+// </auto-generated>
+//--------------------------------------------------------------------------------------------------------------
+
+{{#each dtos}}
+  {{#if (isInterface @key)}}
+    export interface {{@key}} {
+    {{#each properties}}
+      {{name}}: {{safeType this}},
+    {{/each}}
+    }
+
+  {{else}}
+    export type {{@key}} = {
+    {{#each properties}}
+      {{name}}: {{safeType this}},
+    {{/each}}
+    }
+
+  {{/if}}
+{{/each}}

package/src/generation/templates/hubClient.hbs

@@ -0,0 +1,110 @@
+import { backendUri } from "../config";
+import type { HubConnection } from "@microsoft/signalr";
+import { useState, useEffect } from "react";
+{{#if dtoImports}}
+import type { {{#each dtoImports}}{{this}}{{#unless @last}}, {{/unless}}{{/each}} } from "../DTOs";
+{{/if}}
+import { useStableHandlers, useSignalRConnections{{#if (hasAnyBackendMethods hubContract.methods)}}, safeInvokeHubMethod{{/if}} } from "@signal-spec/react-client";
+
+
+//--------------------------------------------------------------------------------------------------------------
+// <auto-generated>
+//     This file is auto-generated by "SignalSpec.ReactClient" (@signal-spec/react-client).
+//     Do not modify this file manually.
+//     If you want to adjust it, copy the template "hubClient.hbs" and supply your edited version of it.
+// </auto-generated>
+//--------------------------------------------------------------------------------------------------------------
+
+{{#if (hasAnyFrontendMethods hubContract.methods)}}
+interface {{clientName}}Frontend {
+{{#each hubContract.methods}}
+    {{#if (isFrontendMethod this)}}
+        {{name}}: (
+        {{#if parameters}}
+            {{#each parameters}}
+                {{name}}: {{safeType this}}{{#unless @last}}, {{/unless}}
+            {{/each}}
+        {{/if}}
+        ) => Promise<{{#if returns}}{{safeType returns}}{{else}}void{{/if}}>;
+    {{/if}}
+{{/each}}
+}
+{{/if}}
+
+{{#if (hasAnyBackendMethods hubContract.methods)}}
+interface {{clientName}}Backend {
+{{#each hubContract.methods}}
+    {{#if (isBackendMethod this)}}
+        {{name}}: (
+        {{#if parameters}}
+            {{#each parameters}}
+                {{name}}: {{safeType this}}{{#unless @last}}, {{/unless}}
+            {{/each}}
+        {{/if}}
+        ) => Promise<{{#if returns}}{{safeType returns}}{{else}}void{{/if}}>;
+    {{/if}}
+{{/each}}
+    }
+{{/if}}
+
+
+export function use{{hubName}}(
+{{#if (hasAnyFrontendMethods hubContract.methods)}}handlers: Partial<{{clientName}}Frontend> = {},{{/if}}
+    enabled: boolean = true,
+    ): { {{#if (hasAnyBackendMethods hubContract.methods)}}invoker: {{clientName}}Methods;{{/if}} connection: HubConnection | null; } {
+
+    const { setupEventHandlers, deleteConnection } = useSignalRConnections();
+    const [connection, setConnection] = useState<HubConnection | null>(
+    null,
+    );
+
+    const stableHandlers = useStableHandlers(handlers);
+    const onConnected = (connection: HubConnection) =>
+    setConnection(connection);
+
+    useEffect(() => {
+    if (!enabled) return;
+
+    setupEventHandlers('{{hubName}}', stableHandlers, onConnected);
+
+    return () => {
+    deleteConnection('{{hubName}}', stableHandlers);
+    };
+    }, [backendUri, enabled]);
+
+    {{#if (hasAnyBackendMethods hubContract.methods)}}
+        const invoker = {
+        {{#each hubContract.methods}}
+            {{#if (isBackendMethod this)}}
+                {{name}}: async (
+                {{#if parameters}}
+                    {{#each parameters}}
+                        {{name}}: {{safeType this}}{{#unless @last}}, {{/unless}}
+                    {{/each}}
+                {{/if}}
+                ) => {
+                {{#if returns}}
+                    return await safeInvokeHubMethod(connection,
+                    '{{name}}'
+                    {{#if parameters}}, {{/if}}
+                    {{#each parameters}}
+                        {{name}}{{#unless @last}}, {{/unless}}
+                    {{/each}}
+                    ) as {{safeType returns}};
+                {{else}}
+                    await safeInvokeHubMethod(connection,
+                    '{{name}}'
+                    {{#if parameters}}, {{/if}}
+                    {{#each parameters}}
+                        {{name}}{{#unless @last}}, {{/unless}}
+                    {{/each}}
+                    );
+                {{/if}}
+                }{{#unless @last}},{{/unless}}
+            {{/if}}
+        {{/each}}
+        };
+    {{/if}}
+
+    return { {{#if (hasAnyBackendMethods hubContract.methods)}}invoker,{{/if}} connection };
+}