@t3ams/react 0.1.4

package/dist/react.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement, ReactNode } from "react";
+import { GameStateUpdate, T3amsConfig, T3amsJson, T3amsSnapshot, T3amsTurn } from "@t3ams/sdk";
+
+//#region src/react.d.ts
+interface T3amsHook<TData extends T3amsJson = T3amsJson> extends T3amsSnapshot {
+  setState(status: GameStateUpdate, detail?: string): void;
+  setTurn(turn: T3amsTurn | null): void;
+  send(data: TData): void;
+  reportResult(summary: string): void;
+  exit(): void;
+  retry(): void;
+}
+/** Reactive view of the t3ams session plus imperative controls. Reads the singleton store; connection is driven by `T3amsProvider`. */
+declare function useT3ams<TData extends T3amsJson = T3amsJson>(): T3amsHook<TData>;
+/** Subscribe to inbound peer messages for the lifetime of the live session. No-op until connected. */
+declare function useT3amsMessages<TData extends T3amsJson = T3amsJson>(handler: (from: string, data: TData) => void): void;
+interface T3amsProviderProps {
+  readonly config: T3amsConfig;
+  readonly children: ReactNode;
+  readonly connecting?: ReactNode;
+  readonly error?: (message: string, retry: () => void) => ReactNode;
+}
+/** Entry point: configures and connects the session on mount, then renders children (or the connecting/error fallbacks). Passthrough outside t3ams. */
+declare function T3amsProvider(props: T3amsProviderProps): ReactElement;
+//#endregion
+export { T3amsHook, T3amsProvider, T3amsProviderProps, useT3ams, useT3amsMessages };
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","names":[],"sources":["../src/react.ts"],"mappings":";;;;UA2BiB,SAAA,eAAwB,SAAA,GAAY,SAAA,UAAmB,aAAA;EACtE,QAAA,CAAS,MAAA,EAAQ,eAAA,EAAiB,MAAA;EAClC,OAAA,CAAQ,IAAA,EAAM,SAAA;EACd,IAAA,CAAK,IAAA,EAAM,KAAA;EACX,YAAA,CAAa,OAAA;EACb,IAAA;EACA,KAAA;AAAA;;iBAIc,QAAA,eAAuB,SAAA,GAAY,SAAA,CAAA,CAAA,GAAc,SAAA,CAAU,KAAA;;iBAc3D,gBAAA,eAA+B,SAAA,GAAY,SAAA,CAAA,CACzD,OAAA,GAAU,IAAA,UAAc,IAAA,EAAM,KAAA;AAAA,UAcf,kBAAA;EAAA,SACN,MAAA,EAAQ,WAAA;EAAA,SACR,QAAA,EAAU,SAAA;EAAA,SACV,UAAA,GAAa,SAAA;EAAA,SACb,KAAA,IAAS,OAAA,UAAiB,KAAA,iBAAsB,SAAA;AAAA;;iBAI3C,aAAA,CAAc,KAAA,EAAO,kBAAA,GAAqB,YAAA"}

package/dist/react.js

@@ -0,0 +1,44 @@
+import { Fragment, createElement, useEffect, useRef, useSyncExternalStore } from "react";
+import { configureT3ams, ensureT3amsConnection, getT3amsSession, getT3amsSnapshot, retryT3amsConnection, subscribeT3ams, t3amsExit, t3amsReportResult, t3amsSend, t3amsSetState, t3amsSetTurn } from "@t3ams/sdk";
+
+//#region src/react.ts
+/** Reactive view of the t3ams session plus imperative controls. Reads the singleton store; connection is driven by `T3amsProvider`. */
+function useT3ams() {
+	return {
+		...useSyncExternalStore(subscribeT3ams, getT3amsSnapshot, getT3amsSnapshot),
+		setState: t3amsSetState,
+		setTurn: t3amsSetTurn,
+		send: t3amsSend,
+		reportResult: t3amsReportResult,
+		exit: t3amsExit,
+		retry: retryT3amsConnection
+	};
+}
+/** Subscribe to inbound peer messages for the lifetime of the live session. No-op until connected. */
+function useT3amsMessages(handler) {
+	const snapshot = useSyncExternalStore(subscribeT3ams, getT3amsSnapshot, getT3amsSnapshot);
+	const handlerRef = useRef(handler);
+	handlerRef.current = handler;
+	useEffect(() => {
+		const session = getT3amsSession();
+		if (session === null) return;
+		return session.onMessage((from, data) => {
+			handlerRef.current(from, data);
+		});
+	}, [snapshot.session]);
+}
+/** Entry point: configures and connects the session on mount, then renders children (or the connecting/error fallbacks). Passthrough outside t3ams. */
+function T3amsProvider(props) {
+	useEffect(() => {
+		configureT3ams(props.config);
+		ensureT3amsConnection();
+	}, []);
+	const { status, error } = useT3ams();
+	if (status === "connecting") return createElement(Fragment, null, props.connecting ?? null);
+	if (status === "error") return createElement(Fragment, null, props.error ? props.error(error ?? "", retryT3amsConnection) : null);
+	return createElement(Fragment, null, props.children);
+}
+
+//#endregion
+export { T3amsProvider, useT3ams, useT3amsMessages };
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":[],"sources":["../src/react.ts"],"sourcesContent":["import {\n  createElement,\n  Fragment,\n  useEffect,\n  useRef,\n  useSyncExternalStore,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport type { GameStateUpdate, T3amsJson, T3amsTurn } from \"@t3ams/sdk\";\nimport {\n  configureT3ams,\n  ensureT3amsConnection,\n  getT3amsSession,\n  getT3amsSnapshot,\n  retryT3amsConnection,\n  subscribeT3ams,\n  t3amsExit,\n  t3amsReportResult,\n  t3amsSend,\n  t3amsSetState,\n  t3amsSetTurn,\n  type T3amsConfig,\n  type T3amsSnapshot,\n} from \"@t3ams/sdk\";\n\nexport interface T3amsHook<TData extends T3amsJson = T3amsJson> extends T3amsSnapshot {\n  setState(status: GameStateUpdate, detail?: string): void;\n  setTurn(turn: T3amsTurn | null): void;\n  send(data: TData): void;\n  reportResult(summary: string): void;\n  exit(): void;\n  retry(): void;\n}\n\n/** Reactive view of the t3ams session plus imperative controls. Reads the singleton store; connection is driven by `T3amsProvider`. */\nexport function useT3ams<TData extends T3amsJson = T3amsJson>(): T3amsHook<TData> {\n  const snapshot = useSyncExternalStore(subscribeT3ams, getT3amsSnapshot, getT3amsSnapshot);\n  return {\n    ...snapshot,\n    setState: t3amsSetState,\n    setTurn: t3amsSetTurn,\n    send: t3amsSend,\n    reportResult: t3amsReportResult,\n    exit: t3amsExit,\n    retry: retryT3amsConnection,\n  };\n}\n\n/** Subscribe to inbound peer messages for the lifetime of the live session. No-op until connected. */\nexport function useT3amsMessages<TData extends T3amsJson = T3amsJson>(\n  handler: (from: string, data: TData) => void,\n): void {\n  const snapshot = useSyncExternalStore(subscribeT3ams, getT3amsSnapshot, getT3amsSnapshot);\n  const handlerRef = useRef(handler);\n  handlerRef.current = handler;\n  useEffect(() => {\n    const session = getT3amsSession();\n    if (session === null) return;\n    return session.onMessage((from, data) => {\n      handlerRef.current(from, data as TData);\n    });\n  }, [snapshot.session]);\n}\n\nexport interface T3amsProviderProps {\n  readonly config: T3amsConfig;\n  readonly children: ReactNode;\n  readonly connecting?: ReactNode;\n  readonly error?: (message: string, retry: () => void) => ReactNode;\n}\n\n/** Entry point: configures and connects the session on mount, then renders children (or the connecting/error fallbacks). Passthrough outside t3ams. */\nexport function T3amsProvider(props: T3amsProviderProps): ReactElement {\n  useEffect(() => {\n    configureT3ams(props.config);\n    ensureT3amsConnection();\n  }, []);\n  const { status, error } = useT3ams();\n  if (status === \"connecting\") return createElement(Fragment, null, props.connecting ?? null);\n  if (status === \"error\") {\n    return createElement(Fragment, null, props.error ? props.error(error ?? \"\", retryT3amsConnection) : null);\n  }\n  return createElement(Fragment, null, props.children);\n}\n"],"mappings":";;;;;AAqCA,SAAgB,WAAkE;AAEhF,QAAO;EACL,GAFe,qBAAqB,gBAAgB,kBAAkB,iBAAiB;EAGvF,UAAU;EACV,SAAS;EACT,MAAM;EACN,cAAc;EACd,MAAM;EACN,OAAO;EACR;;;AAIH,SAAgB,iBACd,SACM;CACN,MAAM,WAAW,qBAAqB,gBAAgB,kBAAkB,iBAAiB;CACzF,MAAM,aAAa,OAAO,QAAQ;AAClC,YAAW,UAAU;AACrB,iBAAgB;EACd,MAAM,UAAU,iBAAiB;AACjC,MAAI,YAAY,KAAM;AACtB,SAAO,QAAQ,WAAW,MAAM,SAAS;AACvC,cAAW,QAAQ,MAAM,KAAc;IACvC;IACD,CAAC,SAAS,QAAQ,CAAC;;;AAWxB,SAAgB,cAAc,OAAyC;AACrE,iBAAgB;AACd,iBAAe,MAAM,OAAO;AAC5B,yBAAuB;IACtB,EAAE,CAAC;CACN,MAAM,EAAE,QAAQ,UAAU,UAAU;AACpC,KAAI,WAAW,aAAc,QAAO,cAAc,UAAU,MAAM,MAAM,cAAc,KAAK;AAC3F,KAAI,WAAW,QACb,QAAO,cAAc,UAAU,MAAM,MAAM,QAAQ,MAAM,MAAM,SAAS,IAAI,qBAAqB,GAAG,KAAK;AAE3G,QAAO,cAAc,UAAU,MAAM,MAAM,SAAS"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@t3ams/react",
+  "version": "0.1.4",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    }
+  },
+  "main": "./dist/react.js",
+  "types": "./dist/react.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/paritytech/t3ams-games-sdk",
+    "directory": "packages/typescript/react"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@t3ams/sdk": "0.1.4"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsdown": "^0.20.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}