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

1npm install @pluv/addon-indexeddb

Usage

1// Using @pluv/client
2
3import { addonIndexedDB } from "@pluv/addon-indexeddb";
4import { createClient } from "@pluv/client";
5import { type io } from "../server/io";
6
7const client = createClient<typeof io>();
8
9const room = client.createRoom("my-room", {
10    // ... other configs here,
11    // ...
12    addons: [addonIndexedDB({ enabled: true })],
13    // Alternatively
14    addons: [addonIndexedDB({ enabled: (room) => room.id === "my-room" })],
15});
16
17// Using @pluv/react
18
19import { addonIndexedDB } from "@pluv/addon-indexeddb";
20import { createBundle, createClient } from "@pluv/react";
21
22const client = createClient<typeof io>();
23
24const { createRoomBundle } = createBundle(client);
25
26const { useRoom } = createRoomBundle({
27    // ... other configs here,
28    // ...
29    addons: [addonIndexedDB({ enabled: true })],
30        // Alternatively
31    addons: [addonIndexedDB({ enabled: (room) => room.id === "my-room" })],
32});