Ecosystem

Below are some optional packages that work alongside pluv.

@pluv/addon-indexeddb

Use IndexedDB to persist room storage so that when the page is reloaded, the room will load from IndexedDB on the browser. This enables offline editing.

Installation

npm install @pluv/addon-indexeddb

Usage

// Using @pluv/client

import { addonIndexedDB } from "@pluv/addon-indexeddb";
import { createClient } from "@pluv/client";
import { type io } from "../server/io";

const client = createClient<typeof io>();

const room = client.createRoom("my-room", {
    // ... other configs here,
    // ...
    addons: [addonIndexedDB({ enabled: true })],
    // Alternatively
    addons: [addonIndexedDB({ enabled: (room) => room.id === "my-room" })],
});

// Using @pluv/react

import { addonIndexedDB } from "@pluv/addon-indexeddb";
import { createBundle, createClient } from "@pluv/react";

const client = createClient<typeof io>();

const { useRoom } = createBundle(client, {
    // ... other configs here,
    // ...
    addons: [addonIndexedDB({ enabled: true })],
        // Alternatively
    addons: [addonIndexedDB({ enabled: (room) => room.id === "my-room" })],
});