Does anyone have any examples of using something like tether for charm sync

import type { SerializeablePayload } from "@rbxts/charm-payload-converter"
import { MessageEmitter } from "@rbxts/tether"
import type { replicatedAtoms } from "./state"

export const messaging = MessageEmitter.create<MessageData>()
export const message = { sync: { dispatch: 0, start: 1 } } as const

type MessageData = {
    [message.sync.dispatch]: SerializeablePayload<typeof replicatedAtoms>
    [message.sync.start]: void
}

import type { SerializeablePayload } from "@rbxts/charm-payload-converter"
import { MessageEmitter } from "@rbxts/tether"
import type { replicatedAtoms } from "./state"

export const messaging = MessageEmitter.create<MessageData>()
export const message = { sync: { dispatch: 0, start: 1 } } as const

type MessageData = {
    [message.sync.dispatch]: SerializeablePayload<typeof replicatedAtoms>
    [message.sync.start]: void
}

import { atom } from "@rbxts/charm"
import type { String, u8 } from "@rbxts/serio"

type Data = { readonly array: String<u8>[] }
export const setPatch: Data = { array: ["string", "serio", "type", "testing"] }

export const atomState = atom<Data>()
export const replicatedAtoms = { replicatedAtom: atomState }

import { atom } from "@rbxts/charm"
import type { String, u8 } from "@rbxts/serio"

type Data = { readonly array: String<u8>[] }
export const setPatch: Data = { array: ["string", "serio", "type", "testing"] }

export const atomState = atom<Data>()
export const replicatedAtoms = { replicatedAtom: atomState }

import { type OnStart, Service } from "@flamework/core"
import { toSerializeablePayload } from "@rbxts/charm-payload-converter"
import CharmSync from "@rbxts/charm-sync"
import { message, messaging } from "shared/network"
import { replicatedAtoms } from "shared/state"

@Service()
export class SyncService implements OnStart {
    private readonly syncer = CharmSync.server({
        atoms: replicatedAtoms,
        autoSerialize: false,
    })

    public onStart() {
        this.handleSyncer()
    }

    private handleSyncer() {
        this.syncer.connect((player, payload) => {
            const serializeable = toSerializeablePayload(payload)
            messaging.client.emit(player, message.sync.dispatch, serializeable)
        })

        messaging.server.on(message.sync.start, this.syncer.hydrate)
    }
}

import { type OnStart, Service } from "@flamework/core"
import { toSerializeablePayload } from "@rbxts/charm-payload-converter"
import CharmSync from "@rbxts/charm-sync"
import { message, messaging } from "shared/network"
import { replicatedAtoms } from "shared/state"

@Service()
export class SyncService implements OnStart {
    private readonly syncer = CharmSync.server({
        atoms: replicatedAtoms,
        autoSerialize: false,
    })

    public onStart() {
        this.handleSyncer()
    }

    private handleSyncer() {
        this.syncer.connect((player, payload) => {
            const serializeable = toSerializeablePayload(payload)
            messaging.client.emit(player, message.sync.dispatch, serializeable)
        })

        messaging.server.on(message.sync.start, this.syncer.hydrate)
    }
}

import { Controller, type OnStart } from "@flamework/core"
import { fromSerializeablePayload } from "@rbxts/charm-payload-converter"
import CharmSync from "@rbxts/charm-sync"
import { message, messaging } from "shared/network"
import { replicatedAtoms } from "shared/state"

@Controller()
export class SyncController implements OnStart {
    private readonly syncer = CharmSync.client({ atoms: replicatedAtoms })

    public async onStart() {
        this.handleSyncer()
    }

    private handleSyncer() {
        messaging.client.on(message.sync.dispatch, (data) => {
            const hydration = fromSerializeablePayload(data)
            this.syncer.sync(hydration)
        })
        messaging.server.emit(message.sync.start)
    }
}

import { Controller, type OnStart } from "@flamework/core"
import { fromSerializeablePayload } from "@rbxts/charm-payload-converter"
import CharmSync from "@rbxts/charm-sync"
import { message, messaging } from "shared/network"
import { replicatedAtoms } from "shared/state"

@Controller()
export class SyncController implements OnStart {
    private readonly syncer = CharmSync.client({ atoms: replicatedAtoms })

    public async onStart() {
        this.handleSyncer()
    }

    private handleSyncer() {
        messaging.client.on(message.sync.dispatch, (data) => {
            const hydration = fromSerializeablePayload(data)
            this.syncer.sync(hydration)
        })
        messaging.server.emit(message.sync.start)
    }
}