@rivetkit/react
Version:
React hooks and components for RivetKit client applications
1 lines • 4.54 kB
Source Map (JSON)
{"version":3,"sources":["../src/mod.ts"],"sourcesContent":["import {\n\ttype ActorOptions,\n\ttype AnyActorRegistry,\n\ttype CreateRivetKitOptions,\n\tcreateRivetKit as createVanillaRivetKit,\n} from \"@rivetkit/framework-base\";\nimport { useStore } from \"@tanstack/react-store\";\nimport { useEffect, useRef } from \"react\";\nimport {\n\ttype Client,\n\tcreateClient,\n\ttype ExtractActorsFromRegistry,\n} from \"rivetkit/client\";\n\nexport { ActorConnDisposed, createClient } from \"rivetkit/client\";\nexport type { ActorConnStatus } from \"@rivetkit/framework-base\";\n\nexport function createRivetKit<Registry extends AnyActorRegistry>(\n\tclientInput: Parameters<typeof createClient>[0],\n\topts: CreateRivetKitOptions<Registry> = {},\n) {\n\treturn createRivetKitWithClient<Registry>(\n\t\tcreateClient<Registry>(clientInput),\n\t\topts,\n\t);\n}\n\nexport function createRivetKitWithClient<Registry extends AnyActorRegistry>(\n\tclient: Client<Registry>,\n\topts: CreateRivetKitOptions<Registry> = {},\n) {\n\tconst { getOrCreateActor } = createVanillaRivetKit<\n\t\tRegistry,\n\t\tExtractActorsFromRegistry<Registry>\n\t>(client, opts);\n\n\t/**\n\t * Hook to connect to a actor and retrieve its state. Using this hook with the same options\n\t * will return the same actor instance. This simplifies passing around the actor state in your components.\n\t * It also provides a method to listen for events emitted by the actor.\n\t * @param opts - Options for the actor, including its name, key, and parameters.\n\t * @returns An object containing the actor's state and a method to listen for events.\n\t */\n\tfunction useActor<\n\t\tActorName extends keyof ExtractActorsFromRegistry<Registry>,\n\t>(opts: ActorOptions<Registry, ActorName>) {\n\t\t// getOrCreateActor syncs opts to store on every call\n\t\tconst { mount, state } = getOrCreateActor<ActorName>(opts);\n\n\t\tuseEffect(() => {\n\t\t\treturn mount();\n\t\t}, [mount]);\n\n\t\tconst actorState = useStore(state) || {};\n\n\t\t/**\n\t\t * Hook to listen for events emitted by the actor.\n\t\t * This hook allows you to subscribe to specific events emitted by the actor and execute a handler function\n\t\t * when the event occurs.\n\t\t * It uses the `useEffect` hook to set up the event listener when the actor connection is established.\n\t\t * It cleans up the listener when the component unmounts or when the actor connection changes.\n\t\t * @param eventName The name of the event to listen for.\n\t\t * @param handler The function to call when the event is emitted.\n\t\t */\n\t\tfunction useEvent(\n\t\t\teventName: string,\n\t\t\t// biome-ignore lint/suspicious/noExplicitAny: strong typing of handler is not supported yet\n\t\t\thandler: (...args: any[]) => void,\n\t\t) {\n\t\t\tconst ref = useRef(handler);\n\t\t\tconst actorState = useStore(state) || {};\n\n\t\t\tuseEffect(() => {\n\t\t\t\tref.current = handler;\n\t\t\t}, [handler]);\n\n\t\t\t// biome-ignore lint/correctness/useExhaustiveDependencies: it's okay to not include all dependencies here\n\t\t\tuseEffect(() => {\n\t\t\t\tif (!actorState?.connection) return;\n\n\t\t\t\tfunction eventHandler(...args: any[]) {\n\t\t\t\t\tref.current(...args);\n\t\t\t\t}\n\t\t\t\treturn actorState.connection.on(eventName, eventHandler);\n\t\t\t}, [\n\t\t\t\tactorState.connection,\n\t\t\t\tactorState.connStatus,\n\t\t\t\tactorState.hash,\n\t\t\t\teventName,\n\t\t\t]);\n\t\t}\n\n\t\treturn {\n\t\t\t...actorState,\n\t\t\tuseEvent,\n\t\t};\n\t}\n\n\treturn {\n\t\tuseActor,\n\t};\n}\n"],"mappings":";AAAA;AAAA,EAIC,kBAAkB;AAAA,OACZ;AACP,SAAS,gBAAgB;AACzB,SAAS,WAAW,cAAc;AAClC;AAAA,EAEC;AAAA,OAEM;AAEP,SAAS,mBAAmB,gBAAAA,qBAAoB;AAGzC,SAAS,eACf,aACA,OAAwC,CAAC,GACxC;AACD,SAAO;AAAA,IACN,aAAuB,WAAW;AAAA,IAClC;AAAA,EACD;AACD;AAEO,SAAS,yBACf,QACA,OAAwC,CAAC,GACxC;AACD,QAAM,EAAE,iBAAiB,IAAI,sBAG3B,QAAQ,IAAI;AASd,WAAS,SAEPC,OAAyC;AAE1C,UAAM,EAAE,OAAO,MAAM,IAAI,iBAA4BA,KAAI;AAEzD,cAAU,MAAM;AACf,aAAO,MAAM;AAAA,IACd,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,aAAa,SAAS,KAAK,KAAK,CAAC;AAWvC,aAAS,SACR,WAEA,SACC;AACD,YAAM,MAAM,OAAO,OAAO;AAC1B,YAAMC,cAAa,SAAS,KAAK,KAAK,CAAC;AAEvC,gBAAU,MAAM;AACf,YAAI,UAAU;AAAA,MACf,GAAG,CAAC,OAAO,CAAC;AAGZ,gBAAU,MAAM;AACf,YAAI,EAACA,eAAA,gBAAAA,YAAY,YAAY;AAE7B,iBAAS,gBAAgB,MAAa;AACrC,cAAI,QAAQ,GAAG,IAAI;AAAA,QACpB;AACA,eAAOA,YAAW,WAAW,GAAG,WAAW,YAAY;AAAA,MACxD,GAAG;AAAA,QACFA,YAAW;AAAA,QACXA,YAAW;AAAA,QACXA,YAAW;AAAA,QACX;AAAA,MACD,CAAC;AAAA,IACF;AAEA,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,EACD;AACD;","names":["createClient","opts","actorState"]}