NpmGitHubDashboard

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,
    })
);

// Export the ioServer, so that this can be type-imported on the frontend
export const ioServer = io.server();

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 { yjs } from "@pluv/crdt-yjs";
import { createClient, infer } from "@pluv/client";
import { createBundle } from "@pluv/react";
import { z } from "zod";
// import your ioServer type from your backend codebase
import type { ioServer } from "./backend/io";

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

export const {
    // components
    PluvProvider,
    PluvRoomProvider,

    // utils
    event,

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

Next Steps