Create Bundle

pluv.io ships @pluv/react to leverage @pluv/client in a type-safe and React.js way.

Create a PluvIO instance

First, create a PluvIO instance from the @pluv/io package in your backend codebase.

// backend/io.ts

import { yjs } from "@pluv/crdt-yjs";
import { createIO } from "@pluv/io";
import { platformNode } from "@pluv/platform-node";

export const io = createIO(
    platformNode({
        /**
         * @optional
         * @description This is required if you intend to use storage. Specify crdt to use for storage
         */
        crdt: yjs,
    })
);

const server = io.server();

// Export the ioServer type, so that this can be type-imported on the frontend
export type AppPluvIO = typeof ioServer;

Create a Pluv React bundle

Then, import your PluvIO type to the frontend, and create your type-safe React.js bundle using @pluv/react.

// frontend/io.ts

import { createClient, infer } from "@pluv/client";
import { yjs } from "@pluv/crdt-yjs";
import { createBundle } from "@pluv/react";
import { z } from "zod";
// import your PluvIO instance from your backend codebase
import { type AppPluvIO } from "backend/io";

const types = infer((i) => ({ io: i<typeof ioServer> }));
const client = clientClient({
    types,
    authEndpoint: () => "{{your auth endpoint}}",
    wsEndpoint: () => "{{your ws endpoint}}",
    // Optional: Specify which CRDT you are using, as well as the initial storage
    initialStorage: yjs.doc(() => ({})),
});

export const {
    // components
    PluvProvider,
    PluvRoomProvider,

    // utils
    event,

    // hooks
    useBroadcast,
    useClient,
    useConnection,
    useEvent,
    useMyPresence,
    useMyself,
    useOther,
    useOthers,
    useRoom,
    useStorage,
} = createBundle(client);

Create Bundle

Create a PluvIO instance

Create a Pluv React bundle

Next Steps