@dittolive/ditto
Version:
Ditto is a cross-platform SDK that allows apps to sync with and even without internet connectivity.
55 lines (48 loc) • 1.59 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>Please open the JS console and play around with Ditto!</p>
<pre>
// Initialize the Ditto module (loads WebAssembly, etc.):
await Ditto.init({ webAssemblyModule: '/web/ditto.wasm' })
// Create a Ditto context:
const identity = { type: 'offlinePlayground', appID: 'live.ditto.playground' }
const ditto = new Ditto.Ditto(identity, 'playground')
// Get hold of a collection:
const cars = ditto.store.collection('cars')
// Insert an entry:
const fordBlack = { _id: 'ford-black-123', model: "Ford", color: "black" }
await cars.upsert(fordBlack)
// Find an entry by ID:
const foundFordBlack = await cars.findByID('ford-black-123')
console.log(foundFordBlack)
// Remove an entry:
await cars.findByID('ford-black-123').remove()
</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 ditto = new Ditto(identity, 'playground'))
// ...
</pre>
<hr>
</body>
</html>