npm package: @ifulxploit/sync-crdt
Description: Developer-friendly CRDT synchronization library for collaborative applications
Author: IfulXploit
Latest version: 0.0.0-development

# @ifulxploit/sync-crdt

A developer-friendly CRDT synchronization library for building collaborative applications with real-time sync capabilities.

## Features

- 🤝 **Real-time Collaboration**: Sync data across multiple clients in real-time
- 💾 **Offline Support**: Built-in IndexedDB persistence for offline usage
- 🔐 **Authentication Ready**: Support for JWT tokens for secure connections
- 🏷️ **TypeScript Ready**: Full type definitions included
- 📦 **Multi-Format**: ESM, CJS, and UMD builds available
- ⚛️ **React Hooks**: First-class support for React applications

## Installation

```bash
npm install @ifulxploit/sync-crdt yjs
```

## Quick Start

```javascript
import { SyncDoc } from '@ifulxploit/sync-crdt';

// Create a new SyncDoc instance
const doc = new SyncDoc({
  serverUrl: 'wss://your-sync-server.com',
  room: 'your-room-id',
  persistence: true,
  token: 'your-auth-token' // optional
});

// Get a shared map
const users = doc.getMap('users');
users.set('user1', { name: 'John Doe', online: true });

// Listen for changes
doc.on('update', (event) => {
  console.log('Data updated:', event.detail.data);
});

// Clean up when done
doc.destroy();
```

## React Integration

```javascript
import { useSharedMap } from '@ifulxploit/sync-crdt/react';

function UserList({ syncDoc }) {
  const [users, setUser, deleteUser] = useSharedMap(syncDoc, 'users');
  
  return (
    <div>
      {Array.from(users.keys()).map(key => (
        <div key={key}>
          {users.get(key).name}
          <button onClick={() => deleteUser(key)}>Remove</button>
        </div>
      ))}
    </div>
  );
}
```

## API Reference

### SyncDoc

The main class for managing collaborative documents.

#### Constructor
```typescript
new SyncDoc(options: SyncDocOptions)
```

#### Options
- `serverUrl: string` - WebSocket server URL
- `room: string` - Room identifier for collaboration
- `persistence?: boolean` - Enable IndexedDB persistence (default: false)
- `token?: string` - Authentication token (optional)

#### Methods
- `getMap(name: string): Y.Map` - Get a shared map
- `getArray(name: string): Y.Array` - Get a shared array
- `getText(name: string): Y.Text` - Get shared text
- `on(event: string, listener: Function): void` - Add event listener
- `off(event: string, listener: Function): void` - Remove event listener
- `destroy(): void` - Clean up resources

## Server Setup

For the WebSocket provider, you need a Yjs-compatible server. You can use:

1. **y-websocket-server**: Simple Node.js server
2. **Y-Sweet**: Managed service with additional features
3. **Liveblocks**: Commercial solution with Yjs support

Example using y-websocket-server:

```bash
npm install y-websocket-server
HOST=localhost PORT=1234 npx y-websocket-server
```

## CDN Usage

You can also use the library directly from CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/@ifulxploit/sync-crdt@latest/dist/index.umd.js"></script>
<script>
  const { SyncDoc } = window.SyncCRDT;
  
  const doc = new SyncDoc({
    serverUrl: 'wss://your-server.com',
    room: 'my-room'
  });
</script>
```

## License

MIT