Plebbit Svelte Stores

A Svelte adaptation of plebbit-react-hooks that provides reactive stores for building decentralized applications with Plebbit.

Features

• 🟢 Reactive Stores: Built with Svelte's reactive store system
• 📦 Local Storage: Persistent caching with IndexedDB via LocalForage
• 🔐 Account Management: Create and manage Plebbit accounts
• 🏠 Subplebbit Management: Create, edit, and manage subplebbits
• 💬 Comment System: Publish and manage comments/posts
• 🎯 TypeScript Support: Full TypeScript support with comprehensive types

Installation

npm install plebbit-svelte-stores
# or
pnpm add plebbit-svelte-stores
# or
yarn add plebbit-svelte-stores

Quick Start

import { accountsStore, subplebbitsStore, commentsStore } from 'plebbit-svelte-stores';

// Create an account
const account = await accountsStore.createAccount({ name: 'My Account' });

// Create a subplebbit
const subplebbit = await subplebbitsStore.createSubplebbit({
  title: 'My Community',
  description: 'A place for discussion'
}, account);

// Publish a comment
const comment = await accountsStore.publishComment({
  title: 'Hello World',
  content: 'This is my first post!',
  subplebbitAddress: subplebbit.address
});

Available Stores

accountsStore

Manages user accounts and authentication:

// Subscribe to accounts
$: accounts = $accountsStore.accounts;
$: activeAccount = $accountsStore.activeAccountId;

// Create account
await accountsStore.createAccount({ name: 'Username' });

// Publish content
await accountsStore.publishComment({
  title: 'Post Title',
  content: 'Post content',
  subplebbitAddress: 'community.eth'
});

// Vote on comments
await accountsStore.vote('comment-cid', 1); // upvote

subplebbitsStore

Manages subplebbits (communities):

// Subscribe to subplebbits
$: subplebbits = $subplebbitsStore.subplebbits;

// Add subplebbit to store
await subplebbitsStore.addSubplebbitToStore('community.eth', account);

// Create new subplebbit
const subplebbit = await subplebbitsStore.createSubplebbit({
  title: 'My Community',
  description: 'Community description'
}, account);

// Edit subplebbit
await subplebbitsStore.editSubplebbit('community.eth', {
  title: 'Updated Title'
}, account);

commentsStore

Manages comments and posts:

// Subscribe to comments
$: comments = $commentsStore.comments;

// Add comment to store
await commentsStore.addCommentToStore('comment-cid', account);

Demo Application

This repository includes a demo application that showcases creating a subplebbit about J.S. Bach's beautiful fugues and posting content about them.

Running the Demo

# Clone the repository
git clone [repository-url]
cd plebbit-svelte-stores

# Install dependencies
pnpm install

# Start development server
pnpm run dev

The demo demonstrates:

• Creating a Plebbit account
• Creating a subplebbit for Bach discussions
• Publishing 5 posts about Bach's most beautiful fugues
• Simulated captcha solving
• Listing all created posts

Bach Fugues Featured in Demo

1. The Art of Fugue, BWV 1080 - Contrapunctus 1
2. Well-Tempered Clavier Book I - Fugue in C minor, BWV 847
3. Fugue in G minor, BWV 578 'Little Fugue'
4. Mass in B minor - Kyrie Eleison Fugue
5. Musical Offering, BWV 1079 - Ricercar a 6

Architecture

The stores are built using Svelte's reactive store system and adapted from the React-based plebbit-react-hooks:

• Stores: Reactive state management using Svelte stores
• Persistence: Local caching with IndexedDB via LocalForage LRU
• Types: Comprehensive TypeScript definitions
• Utilities: Helper functions for data manipulation and logging

Real Network Integration

🎯 NEW: Full plebbit-cli integration is now available!

Quick Setup

# 1. Setup with auto-generated auth key
./setup-plebbit.sh

# 2. Start plebbit-cli (requires Docker)
docker-compose up plebbit-cli -d

# 3. Start development server
pnpm run dev

Connection Modes

• 🟢 plebbit-cli Mode: Real P2P network publishing via WebSocket
• 🟢 IPFS Mode: Direct IPFS node connection
• 🟡 Demo Mode: Mock data for offline development

The application automatically detects the best available connection method and displays the status in the UI.

Development Status

The current implementation provides:

• ✅ Store structure and interfaces
• ✅ Local state management with IndexedDB
• ✅ TypeScript support
• ✅ Demo UI and functionality
• ✅ Full plebbit-cli integration
• ✅ Real network publishing capabilities
• ✅ WebSocket connection with auth key support

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

MIT License - see LICENSE file for details.

Related Projects

• plebbit-js - Core Plebbit library
• plebbit-react-hooks - React hooks for Plebbit
• Plebbit - Decentralized Reddit alternative