- TypeScript 96.1%
- JavaScript 3.9%
Reviewed-on: #10 Reviewed-by: hpk <hpk@noreply.codeberg.org> Reviewed-by: ndh <ndh@noreply.codeberg.org> |
||
|---|---|---|
| doc | ||
| src | ||
| tests | ||
| .gitignore | ||
| .prettierignore | ||
| CHANGELOG.md | ||
| eslint.config.js | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
| vitest.config.ts | ||
y-webxdc
Webxdc provider for Yjs
The WebxdcProvider turns apps using yjs
into production-ready webxdc apps.
Webxdc apps can be shared in a chat with messengers
like Delta Chat and Cheogram,
sharing all application state with chat members via yjs.
WebxdcProvider supports:
-
immediate receiving of yjs changes from chat peers
-
autosaving: saving yjs changes periodically to chat peers
-
manual saving: call
provider.syncToChatPeers()for causing immediate saving (it's fine to mix manual and autosaving). -
setting of document, summary and chat-message info which is the metadata shown in a chat (see below screenshots).
-
reliably saving any pending yjs changes when the app window closes, on all webxdc-supporting platforms.
-
resending entire state to force consistency over unreliable messanger delivery (
resendAllUpdates).
Setup
Install
npm i y-webxdc
Client code
import * as Y from "yjs";
import { WebxdcProvider } from "y-webxdc";
// provided by messengers or webxdc-dev tool
// see https://docs.webxdc.org/spec.html
const webxdc = window.webxdc;
const ydoc = new Y.Doc();
const yarray = ydoc.get("array", Y.Array);
const provider = new WebxdcProvider({
webxdc,
ydoc,
autosaveInterval: 10 * 1000,
getEditInfo: () => {
const document = "webxdc yjs provider";
const summary = `Last edit: ${webxdc.selfName}`;
const startinfo = `${webxdc.selfName} editing ${document}`;
return { document, summary, startinfo };
},
resendAllUpdates: false,
});
See the following example for the meaning of document, summary and startinfo
as returned by the getEditInfo callback passed into the provider.
Example
The webxdc editor uses y-webxdc
to implement a collaborative editor.
Development
This project is written in TypeScript and uses pnpm. Install dependencies with:
pnpm install
Test
Run the test suite (vitest):
pnpm test
Build
Compile src/ to dist/ (JavaScript plus type declarations):
pnpm build
Type check
Check types without emitting any output:
pnpm typecheck
Code Style
Linting with eslint and formatting with
prettier:
pnpm lint
pnpm lint:fix
pnpm format
pnpm lint:fix applies eslint fixes; pnpm format reformats with prettier.
Check everything
pnpm check runs the formatting check, the type checker, the linter and the
tests together:
pnpm check