@broadcastingplatforms/react-hooks 0.0.0-dev.ca53abc

package/dist/index.d.mts

@@ -0,0 +1,69 @@
+import { SdkClient, RealtimeConnectionState } from '@broadcastingplatforms/sdk';
+import { ReactNode, ReactElement } from 'react';
+
+/**
+ * Props for {@link BPProvider}.
+ */
+interface BPProviderProps {
+    /**
+     * Configured SDK client instance.
+     */
+    client: SdkClient;
+    /**
+     * React children to render inside the provider.
+     */
+    children: ReactNode;
+}
+/**
+ * Provider component that stores the configured SDK client instance.
+ */
+declare const BPProvider: ({ client, children }: BPProviderProps) => ReactElement;
+/**
+ * Access the configured SDK client from context.
+ * @throws Error when the provider is missing.
+ */
+declare const useClient: () => SdkClient;
+/**
+ * Status values exposed by {@link useRealtime}.
+ */
+type RealtimeHookStatus = RealtimeConnectionState | "inactive";
+/**
+ * Options for {@link useRealtime}.
+ */
+interface UseRealtimeOptions<TEvent = unknown> {
+    /**
+     * Channel name to subscribe to.
+     */
+    channel: string;
+    /**
+     * Topic/event name to listen for.
+     */
+    topic: string;
+    /**
+     * Toggle subscription lifecycle.
+     */
+    enabled?: boolean;
+    /**
+     * Optional event callback invoked for each payload.
+     */
+    onEvent?: (payload: TEvent) => void;
+}
+/**
+ * Result payload from {@link useRealtime}.
+ */
+interface UseRealtimeResult<TEvent = unknown> {
+    /**
+     * Last event payload received.
+     */
+    lastEvent: TEvent | null;
+    /**
+     * Current realtime connection status.
+     */
+    status: RealtimeHookStatus;
+}
+/**
+ * Subscribe to a realtime channel topic with automatic cleanup.
+ */
+declare const useRealtime: <TEvent>(options: UseRealtimeOptions<TEvent>) => UseRealtimeResult<TEvent>;
+
+export { BPProvider, type BPProviderProps, type RealtimeHookStatus, type UseRealtimeOptions, type UseRealtimeResult, useClient, useRealtime };

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+import { SdkClient, RealtimeConnectionState } from '@broadcastingplatforms/sdk';
+import { ReactNode, ReactElement } from 'react';
+
+/**
+ * Props for {@link BPProvider}.
+ */
+interface BPProviderProps {
+    /**
+     * Configured SDK client instance.
+     */
+    client: SdkClient;
+    /**
+     * React children to render inside the provider.
+     */
+    children: ReactNode;
+}
+/**
+ * Provider component that stores the configured SDK client instance.
+ */
+declare const BPProvider: ({ client, children }: BPProviderProps) => ReactElement;
+/**
+ * Access the configured SDK client from context.
+ * @throws Error when the provider is missing.
+ */
+declare const useClient: () => SdkClient;
+/**
+ * Status values exposed by {@link useRealtime}.
+ */
+type RealtimeHookStatus = RealtimeConnectionState | "inactive";
+/**
+ * Options for {@link useRealtime}.
+ */
+interface UseRealtimeOptions<TEvent = unknown> {
+    /**
+     * Channel name to subscribe to.
+     */
+    channel: string;
+    /**
+     * Topic/event name to listen for.
+     */
+    topic: string;
+    /**
+     * Toggle subscription lifecycle.
+     */
+    enabled?: boolean;
+    /**
+     * Optional event callback invoked for each payload.
+     */
+    onEvent?: (payload: TEvent) => void;
+}
+/**
+ * Result payload from {@link useRealtime}.
+ */
+interface UseRealtimeResult<TEvent = unknown> {
+    /**
+     * Last event payload received.
+     */
+    lastEvent: TEvent | null;
+    /**
+     * Current realtime connection status.
+     */
+    status: RealtimeHookStatus;
+}
+/**
+ * Subscribe to a realtime channel topic with automatic cleanup.
+ */
+declare const useRealtime: <TEvent>(options: UseRealtimeOptions<TEvent>) => UseRealtimeResult<TEvent>;
+
+export { BPProvider, type BPProviderProps, type RealtimeHookStatus, type UseRealtimeOptions, type UseRealtimeResult, useClient, useRealtime };

package/dist/index.js

@@ -0,0 +1,95 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  BPProvider: () => BPProvider,
+  useClient: () => useClient,
+  useRealtime: () => useRealtime
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BPClientContext = (0, import_react.createContext)(null);
+var BPProvider = ({ client, children }) => {
+  const value = (0, import_react.useMemo)(() => client, [client]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BPClientContext.Provider, { value, children });
+};
+var useClient = () => {
+  const client = (0, import_react.useContext)(BPClientContext);
+  if (!client) {
+    throw new Error("BPProvider is missing. Wrap your component tree with <BPProvider />.");
+  }
+  return client;
+};
+var resolveRealtimeChannel = (client, channelName) => {
+  if (channelName.startsWith("private-")) {
+    return { channel: client.realtime.private(channelName), leaveName: channelName };
+  }
+  if (channelName.startsWith("presence-")) {
+    return { channel: client.realtime.join(channelName), leaveName: channelName };
+  }
+  return { channel: client.realtime.channel(channelName), leaveName: channelName };
+};
+var useRealtime = (options) => {
+  const { channel, topic, enabled = true, onEvent } = options;
+  const client = useClient();
+  const [lastEvent, setLastEvent] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)(
+    enabled ? "connecting" : "inactive"
+  );
+  const onEventRef = (0, import_react.useRef)(onEvent);
+  (0, import_react.useEffect)(() => {
+    onEventRef.current = onEvent;
+  }, [onEvent]);
+  (0, import_react.useEffect)(() => {
+    if (!enabled) {
+      setStatus("inactive");
+      return void 0;
+    }
+    setStatus("connecting");
+    setLastEvent(null);
+    const unsubscribeConnection = client.realtime.onConnectionStateChange(
+      (state) => setStatus(state)
+    );
+    const { channel: realtimeChannel, leaveName } = resolveRealtimeChannel(
+      client,
+      channel
+    );
+    const handler = (payload) => {
+      setLastEvent(payload);
+      onEventRef.current?.(payload);
+    };
+    realtimeChannel.listen(topic, handler);
+    return () => {
+      realtimeChannel.stopListening(topic, handler);
+      client.realtime.leave(leaveName);
+      unsubscribeConnection();
+    };
+  }, [channel, client, enabled, topic]);
+  return { lastEvent, status };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BPProvider,
+  useClient,
+  useRealtime
+});
+//# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -0,0 +1,75 @@
+// src/index.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var BPClientContext = createContext(null);
+var BPProvider = ({ client, children }) => {
+  const value = useMemo(() => client, [client]);
+  return /* @__PURE__ */ jsx(BPClientContext.Provider, { value, children });
+};
+var useClient = () => {
+  const client = useContext(BPClientContext);
+  if (!client) {
+    throw new Error("BPProvider is missing. Wrap your component tree with <BPProvider />.");
+  }
+  return client;
+};
+var resolveRealtimeChannel = (client, channelName) => {
+  if (channelName.startsWith("private-")) {
+    return { channel: client.realtime.private(channelName), leaveName: channelName };
+  }
+  if (channelName.startsWith("presence-")) {
+    return { channel: client.realtime.join(channelName), leaveName: channelName };
+  }
+  return { channel: client.realtime.channel(channelName), leaveName: channelName };
+};
+var useRealtime = (options) => {
+  const { channel, topic, enabled = true, onEvent } = options;
+  const client = useClient();
+  const [lastEvent, setLastEvent] = useState(null);
+  const [status, setStatus] = useState(
+    enabled ? "connecting" : "inactive"
+  );
+  const onEventRef = useRef(onEvent);
+  useEffect(() => {
+    onEventRef.current = onEvent;
+  }, [onEvent]);
+  useEffect(() => {
+    if (!enabled) {
+      setStatus("inactive");
+      return void 0;
+    }
+    setStatus("connecting");
+    setLastEvent(null);
+    const unsubscribeConnection = client.realtime.onConnectionStateChange(
+      (state) => setStatus(state)
+    );
+    const { channel: realtimeChannel, leaveName } = resolveRealtimeChannel(
+      client,
+      channel
+    );
+    const handler = (payload) => {
+      setLastEvent(payload);
+      onEventRef.current?.(payload);
+    };
+    realtimeChannel.listen(topic, handler);
+    return () => {
+      realtimeChannel.stopListening(topic, handler);
+      client.realtime.leave(leaveName);
+      unsubscribeConnection();
+    };
+  }, [channel, client, enabled, topic]);
+  return { lastEvent, status };
+};
+export {
+  BPProvider,
+  useClient,
+  useRealtime
+};
+//# sourceMappingURL=index.mjs.map

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@broadcastingplatforms/react-hooks",
+  "version": "0.0.0-dev.ca53abc",
+  "description": "React adapter for the Broadcasting Platform SDK",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/",
+    "!**/*.map"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "tsup": {
+    "entry": [
+      "src/index.tsx"
+    ],
+    "format": [
+      "esm",
+      "cjs"
+    ],
+    "dts": true,
+    "sourcemap": true,
+    "clean": true,
+    "splitting": false,
+    "target": "es2020"
+  },
+  "peerDependencies": {
+    "@broadcastingplatforms/sdk": "^0.1.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.30",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.0.2",
+    "tsx": "^4.19.2",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.4",
+    "vitest": "^2.1.8",
+    "@broadcastingplatforms/sdk": "0.0.0-dev.ca53abc"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "lint": "eslint -c ./eslint.config.mjs \"{src,tests,test-app}/**/*.{ts,tsx,js,jsx}\" --fix",
+    "test": "vitest run",
+    "test-app:dev": "vite --config test-app/vite.config.ts",
+    "test-app:build": "vite build --config test-app/vite.config.ts",
+    "test-app:preview": "vite preview --config test-app/vite.config.ts"
+  }
+}