Reference
Callbacks and Lifecycle
Understand Telva callback contracts for mount, change, persistence, assets, sessions, and export workflows.
Callbacks and Lifecycle
Callbacks are defined by TVCallbacks and attached to Telva props.
Lifecycle callbacks
| Callback | Signature | Trigger |
|---|---|---|
onMount | (app) => void | editor app instance created and mounted |
onChange | (app, reason?) => void | state changed |
onPatch | (app, patch, reason?) => void | state patch emitted |
onCommand | (app, command, reason?) => void | command-based mutation emitted |
onPersist | (app) => void | persistence boundary reached |
File/project callbacks
| Callback | Signature |
|---|---|
onNewProject | (app, openDialog, e?) => void |
onSaveProject | (app, e?) => void |
onSaveProjectAs | (app, e?) => void |
onOpenProject | (app, openDialog, e?) => void |
onOpenMedia | (app) => void |
useFileSystem() provides ready-made implementations for these flows.
Page/presence callbacks
| Callback | Signature |
|---|---|
onChangePage | (app, shapes, bindings, assets, addToHistory) => void |
onChangePresence | (app, user) => void |
These are the primary hooks for multiplayer synchronization layers.
Asset callbacks
| Callback | Signature | Expected return |
|---|---|---|
onAssetCreate | (app, file, id) => Promise<string | false> | final URL or cancellation |
onAssetUpload | (app, file, id) => Promise<string | false> | final URL or cancellation |
onAssetDelete | (app, assetId) => void | cleanup side effect |
Export/session callbacks
| Callback | Signature |
|---|---|
onExport | (app, info) => Promise<void> |
onSessionStart | (app, id) => void |
onSessionEnd | (app, id) => void |
Typical callback bundle
import * as React from 'react'
import { TVExport, Telva, TelvaApp } from 'telva'
export default function InstrumentedEditor() {
const onMount = React.useCallback((app: TelvaApp) => {
console.log('Mounted', app.currentPageId)
}, [])
const onChange = React.useCallback((app: TelvaApp, reason?: string) => {
console.log('Changed', reason, app.document.id)
}, [])
const onExport = React.useCallback(async (_app: TelvaApp, info: TVExport) => {
console.log('Exported', info.name, info.type, info.blob.size)
}, [])
return <Telva onMount={onMount} onChange={onChange} onExport={onExport} />
}