tldraw/packages/sync-core/src/lib/protocol.ts

90 lines
2 KiB
TypeScript
Raw Normal View History

import { SerializedSchema, UnknownRecord } from '@tldraw/store'
import { NetworkDiff, ObjectDiff, RecordOpType } from './diff'
/** @public */
const TLSYNC_PROTOCOL_VERSION = 6
export function getTlsyncProtocolVersion() {
return TLSYNC_PROTOCOL_VERSION
}
/** @public */
export const TLIncompatibilityReason = {
ClientTooOld: 'clientTooOld',
ServerTooOld: 'serverTooOld',
InvalidRecord: 'invalidRecord',
InvalidOperation: 'invalidOperation',
Readonly / room creation omnibus (#3192) Reworks how the readonly urls work. Till now we just used a simple function that would scramble the slugs. Now we use a proper key value mapping between regular and readonly slugs: - We use two KV stores. One is for going from a slug to a readonly slug and the other one for going the other way around. They are populated at the same time. - We separate preview KV stores (dev, preview, staging) from production one. I've already created these on Cloudflare. [My understanding is ](https://developers.cloudflare.com/kv/reference/data-security/#encryption-at-rest)that ids [can be public](https://community.cloudflare.com/t/is-it-safe-to-keep-kv-ids-in-a-public-git-repo/517387/4) since we can only access KV from our worker. Happy to move them to env variables though. - [x] Disable creating new rooms when tldraw is embedded inside iframes on other websites (we check the referrer and if it's not the same as the iframe's origin we don't allow it) - [x] Fork a project when inside an iframe now opens the forked project on tldraw.com and not inside iframe. - [x] We allow embeding of iframes, but we now track the where they are used via the referrer. We send this to Vercel analytics. - [x] Improved UX of the share menu to make it less confusing. Toggle is gone. - [x] `/new` and `/r` routes not redirect to `/`. - [x] This introduces a new `/ro` route for readonly rooms. Legacy rooms still live on `/v`. - [x] Brought back `dotcom-shared` project to share code between BE and FE. Mostly types. - [x] Prevent creating of rooms by entering `/r/non-existing-slug`. - [x] Handle getting a readonly slug for old rooms. Added a comment about it [here](https://github.com/tldraw/tldraw/pull/3192/files#diff-c0954b3dc71bb7097c39656441175f3238ed60cf5cee64077c06e21da82182cbR17-R18). - [x] We no longer expose editor on the window object for readonly rooms. Prevents the users disabling readonly rooms manually. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [ ] `sdk` — Changes the tldraw SDK - [x] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [x] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Make sure old readonly rooms still work. 2. Creating a readonly link from an existing room should still use `/v` path. 3. Newly created rooms should use `/ro` path for readonly rooms. Make sure these work as well. 4. `/r` room was disabled and redirects to `/` 5. `/new` should still work when not inside iframes. - [x] Unit Tests - [ ] End to end tests ### Release Notes 1. This adds new functionality for readonly rooms: - We have a new route `/ro` for newly created readonly rooms. These rooms no longer use the scrambling logic to create readonly slugs. Instead we now use KV storage from cloudflare to track the mapping for slugs -> readonly slug and readonly slug -> slug. - The old route `/v` is preserved, so that the old room still work as they did before. - For old rooms we will keep on generating the old readonly slugs, but for new rooms we'll start using the new logic. 2. We no longer prevent embedding of tldraw inside iframes. 3. We do prevent generating new rooms from inside the iframes though. `/r`, `/new`, `/r/non-existing-id` should not allow creation of new rooms inside iframes. Only `/new` still works when not inside iframes. 4. Forking a project from inside an iframe now opens it on tldraw.com 5. Slight copy change on the sharing menu. We no longer have a toggle between readonly and non-readonly links. 6. `editor` and `app` are no longer exposed on the window object for readonly rooms. Prevents users from using the `updateInstanceState` to escape readonly rooms. --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-04-25 14:10:40 +00:00
RoomNotFound: 'roomNotFound',
} as const
/** @public */
export type TLIncompatibilityReason =
(typeof TLIncompatibilityReason)[keyof typeof TLIncompatibilityReason]
/** @public */
export type TLSocketServerSentEvent<R extends UnknownRecord> =
| {
type: 'connect'
hydrationType: 'wipe_all' | 'wipe_presence'
connectRequestId: string
protocolVersion: number
schema: SerializedSchema
diff: NetworkDiff<R>
serverClock: number
}
| {
type: 'incompatibility_error'
reason: TLIncompatibilityReason
}
| {
type: 'error'
error?: any
}
| {
type: 'pong'
}
| { type: 'data'; data: TLSocketServerSentDataEvent<R>[] }
| TLSocketServerSentDataEvent<R>
/** @public */
export type TLSocketServerSentDataEvent<R extends UnknownRecord> =
| {
type: 'patch'
diff: NetworkDiff<R>
serverClock: number
}
| {
type: 'push_result'
clientClock: number
serverClock: number
action: 'discard' | 'commit' | { rebaseWithDiff: NetworkDiff<R> }
}
/** @public */
export interface TLPushRequest<R extends UnknownRecord> {
Prevent wobble during viewport following (#3695) This revives the old 'derived camera' idea to prevent cursor wobbling during viewport following. Before this PR we updated the camera on a tick during viewport following, but the shapes and cursors were not moving on the same tick (we tried that during the perf work and it was all kinds of problematic). Frankly I've forgotten how we ever managed to eliminate wobble here in the first place? Anyway after this PR we derive the camera based on whether or not we are following a user. When you follow a user it makes it so that your viewport contains their viewport. If your viewport is not already very close to their viewport it will animate the initial position, after which it will 'lock' in place and the derived value will be used from then on. This exposed a minor issue in our sync engine: the fact that we send presence updates in separate websocket messages from document updates. We get into situations like this 1. user A follows user B 2. user B deletes the current page they are on 3. user B's page deletion diff gets sent 4. user B's presence update gets sent with a new currentPageId 5. user A receives the page deletion 6. user A still thinks that user B is on the old page and doesn't know how to update the follow state. So to fix this I made it so that we can (and do) send presence updates in the same websocket messages as document updates so the server can handle them atomically. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `sdk` — Changes the tldraw SDK - [x] `bugfix` — Bug fix ### Test Plan 1. Add a step-by-step description of how to test your PR here. 8. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Fixes a bug that caused the cursor & shapes to wiggle around when following someone else's viewport
2024-05-19 01:22:01 +00:00
type: 'push'
clientClock: number
diff?: NetworkDiff<R>
presence?: [typeof RecordOpType.Patch, ObjectDiff] | [typeof RecordOpType.Put, R]
}
/** @public */
export interface TLConnectRequest {
type: 'connect'
connectRequestId: string
lastServerClock: number
protocolVersion: number
schema: SerializedSchema
}
/** @public */
export interface TLPingRequest {
type: 'ping'
}
/** @public */
export type TLSocketClientSentEvent<R extends UnknownRecord> =
| TLPushRequest<R>
| TLConnectRequest
| TLPingRequest