@dittolive/ditto
Version:
Ditto is a cross-platform SDK that allows apps to sync with and even without internet connectivity.
63 lines (57 loc) • 1.83 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Ditto Playground</title>
<link rel="icon" type="image/png" href="support/ditto-logo-96x96.png">
<script src="web/ditto.umd.js"></script>
<script>
// TODO: put your play script in here.
</script>
</head>
<body>
<h1>Ditto Playground</h1>
<p>Try the examples below in your browser console</p>
<pre>
// Initialize the Ditto module (loads WebAssembly, etc.):
await Ditto.init({ webAssemblyModule: '/web/ditto.wasm' })
// Create a Ditto context:
const config = new Ditto.DittoConfig('live.ditto.playground', { mode: 'smallPeersOnly' })
const ditto = await Ditto.Ditto.open(config)
// Insert an entry:
const fordBlack = { _id: 'ford-black-123', model: "Ford", color: "black" }
await ditto.store.execute(
'INSERT INTO cars DOCUMENTS (:doc) ON ID CONFLICT DO UPDATE',
{ doc: fordBlack }
)
// Find an entry by ID:
const result = await ditto.store.execute(
'SELECT * FROM cars WHERE _id = :id',
{ id: 'ford-black-123' }
)
console.log(result.items[0]?.value)
// Remove an entry:
await ditto.store.execute(
'DELETE FROM cars WHERE _id = :id',
{ id: 'ford-black-123' }
)
</pre>
<hr>
<p>
<b>NOTE</b>: not all browsers support <code>await</code> in the console.
If you try the above and get a syntax error, use promises directly
instead:
</p>
<pre>
// Init the Ditto module and wait for it to finish.
Ditto.init({ webAssemblyModule: '/web/ditto.wasm' }).then(() => {
console.log('Ditto module initialized successfully.')
})
const config = new Ditto.DittoConfig('live.ditto.playground', { mode: 'smallPeersOnly' })
Ditto.Ditto.open(config).then((ditto) => {
// ...
})
</pre>
<hr>
</body>
</html>