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