🚀 api-sync

Welcome to api-sync! Real-time state sync across clients and server the simplest way possible. Perfect for multiplayer games and chat apps. It's like magic, but real! 🎩✨

⚠️ Under development; Not ready for production and subject to change.

New to Robo.js?

➞ 📚 Robo.js Documentation: Getting started

➞ 🚀 Robo.js Community: Join Discord server

Installation

To add this plugin to your Robo.js project:

npx robo add api-sync-robojs

Note: You will also need to install the @robojs/server (v1.6.1 or greater)

Usage 🎨

Server

// src/events/_start.ts
import { SyncServer, Api, SyncState } from 'api-sync/server.js'

const myApi = {
	hello() {
		console.log('Hello from', this.id) // connection id
	},
	counter: new SyncState<number>()
} satisfies Api

export type MyApi = typeof myApi

export default async () => {
	SyncServer.defineApi(myApi)
}

Client

setup client api provider

// src/app/App.tsx
import { Activity } from './Activity'
import './App.css'
import { createApiClient } from 'api-sync/client.js'
import type { MyApi } from '../events/_start.js'
const { ApiContextProvider, useApi } = createApiClient<MyApi>()
export { useApi }

export default function App() {
	return (
		<DiscordContextProvider>
			<ApiContextProvider>
				<Activity />
			</ApiContextProvider>
		</DiscordContextProvider>
	)
}

use api

// src/app/Activity.tsx
import { useApi } from '.App'

export default function Activity() {
	const api = useApi()
	const counter = api.counter.$.useSync()

	useEffect(() => {
		api.hello()
	}, [])
}