pluv.io 3.0 - Rich Text Editors, Free Tier, New Docs and more

Introduction

• 🚀 Yjs Provider: Plug into collaborative editors using our official Yjs connection provider.

• ⚠️ Streamlined Subscriptions (Breaking): A more intuitive way to subscribe to PluvRoom data.

• ⚠️ Improved CRDT Initialization (Breaking): Simpler, native-like usage of Yjs and Loro.

• 🧠 Inferred CRDT Document Types: Stronger typing for your useDoc and getDoc usage.

• 🔧 Major Stability Fixes: Connection, storage, and sync bugs resolved.

• 📘 Revamped Documentation: Easier to navigate, easier to understand.

• 💸 Free Tier: Try the pluv.io network on our new free tier!

Yjs Provider

import { BlockNoteView } from "@blocknote/mantine";
import { useCreateBlockNote } from "@blocknote/react";
import { yjs } from "@pluv/crdt-yjs";
import { useMemo } from "react";
import { useRoom, useStorage } from "./pluv";

// ...
const room = useRoom();
const [, fragment] = useStorage();

const provider = useMemo(() => {
	return yjs.provider({
		room,
		// The presence field we choose to store
		// Yjs Awaneness data onto
		presenceField: "myAwareness",
	});
}, [room]);

// ... Later on
const editor = useCreateBlockNote({
	collaboration: {
		provider,
		fragment,
		user: { name: "John Doe", color: "#00FF00" },
	},
});

return <BlockNoteView editor={editor} />;

Streamlined Subscriptions (Breaking)

const room = client.createRoom("example-room");

// Before
room.subscribe("connection", (state) => {});
room.subscribe("my-presence", (myPresence) => {});
room.subscribe("myself", (myself) => {});
room.subscribe("others", (others) => {});
room.subscribe("storage-loaded", (storageLoaded) => {});
room.event.receiveMessage((event) => {});
room.storage.messages((messages) => {});
room.storageRoot((storage) => {});
room.other(("id_...", other) => {});

// After
room.subscribe.connection((state) => {});
room.subscribe.myPresence((myPresence) => {});
room.subscribe.myself((myself) => {});
room.subscribe.others((others) => {});
room.subscribe.storageLoaded((storageLoaded) => {});
room.subscribe.event.receiveMessage((event) => {});
room.subscribe.storage.messages((messages) => {});
room.subscribe.storageRoot((storage) => {});
room.subscribe.other(("id_...", other) => {});

Improved CRDT Initialization (Breaking)

1. Declaring top-level storage fields now require using a document builder exposed in the .doc function, while nested types remain unchanged.

import { yjs } from "@pluv/crdt-yjs";
import { Text as YText } from "yjs";

// Before
yjs.doc(() => ({
	groceries: yjs.array<string>([]),
	messages: yjs.array([
		yjs.text("hello world"),
	]),
}));

// After
yjs.doc((t) => ({
	// Top-level fields now use the `t` builder
	groceries: t.array<string>("groceries", []),
	messages: t.array("messages", [
		// Nested fields continue using the yjs utility
		yjs.text("hello world"),
	]),
}));

2. The yjs type-helpers return their native Yjs shared-types, and the loro type-helpers return their native Loro container-types.

import { yjs } from "@pluv/crdt-yjs";
import { Text as YText } from "yjs";
import { useStorage } from "./pluv";

const [messages, yArray] = useStorage("messages");

// This means that these are ultimately the same
yArray.push([yjs.text("hello world")]);
yArray.push([new YText("hello world")]);

Inferred CRDT Document Types

import { createClient } from "@pluv/client";
import { yjs } from "@pluv/crdt-yjs";
import { Doc as YDoc } from "yjs";

const io = createClient({
	// ...
	initialStorage: yjs.doc((t) => ({ /* ... */ }),
});

const room = io.createRoom("example-room");

const doc = room.getDoc().value;
//    ^? const doc: YDoc;

Major Stability Fixes

1. 🧵 Fixed a race condition during the first initialStorage sync, sometimes causing documents to not be able to properly sync.

2. 🗃️ Fixed race condition in @pluv/addon-indexeddb causing storage diffs to apply incorrectly between the browser’s IndexedDB and the server’s emitted sync state.

3. 💾 Fixed persistence issues in Cloudflare Durable Object-backed SQLite storage.

4. 🧱 Fixed shared object reference errors in @pluv/platform-cloudflare between multiple Durable Objects.

Revamped Documentation

• Better navigation

• Clearer examples

• More consistent terminology

Free Tier

• Quickstart: Next.js

• Quickstart: Cloudflare Workers

• Quickstart: Node.js