0b3e83be52
This PR: - adds a `snapshot` prop to the <Tldraw> component. It does basically the same thing as calling `loadSnapshot` after creating the store, but happens before the editor actually loads. - adds a largeish example (including a JSON snapshot) to the examples We have some very complex ways of juggling serialized data between multiplayer, file formats, and the snapshot APIs. I'd like to see these simplified, or at least for our documentation to reflect a narrow subset of all the options available. The most common questions seem to be: Q: How do I serialize data? A: Via the `Editor.getSnapshot()` method Q: How do I restore serialized data? A: Via the `Editor.loadSnapshot()` method OR via the `<Tldraw>` component's `snapshot` prop The store has an `initialData` constructor prop, however this is quite complex as the store also requires a schema class instance with which to migrate the data. In our components (<Tldraw> and <TldrawEditor>) we were also accepting `initialData`, however we weren't accepting a schema, and either way I think it's unrealistic to also expect users to create schemas themselves and pass those in. AFAIK the `initialData` prop is only used in the file loading, which is a good example of how complex it looks like to create a schema and migrate data outside of the components. ### Change Type - [x] `minor` — New feature
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import test from '@playwright/test'
|
|
|
|
test.describe('Routes', () => {
|
|
test('end-to-end', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/end-to-end')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('basic', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/develop')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('api', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/api')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('hide-ui', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/custom-config')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('custom-config', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/custom-config')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('custom-ui', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/custom-ui')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('exploded', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/exploded')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('scroll', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/scroll')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('multiple', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/multiple')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('error-boundary', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/error-boundary')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('user-presence', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/user-presence')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('ui-events', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/ui-events')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('store-events', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/store-events')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('persistence', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/persistence')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
|
|
test('snapshots', async ({ page }) => {
|
|
await page.goto('http://localhost:5420/snapshots')
|
|
await page.waitForSelector('.tl-canvas')
|
|
})
|
|
})
|