[4/5] sync -> sync-core, sync-react -> sync (#4123)

Renames `@tldraw/sync` to `@tldraw/sync-core`, and `@tldraw/sync-react`
to `@tldraw/sync`. This also adds an export * from sync-core to sync.

- [x] `other`

apps/bemo-worker/package.json

@@ -21,7 +21,7 @@
 	"dependencies": {
 		"@tldraw/dotcom-shared": "workspace:*",
 		"@tldraw/store": "workspace:*",
-		"@tldraw/sync": "workspace:*",
+		"@tldraw/sync-core": "workspace:*",
 		"@tldraw/tlschema": "workspace:*",
 		"@tldraw/utils": "workspace:*",
 		"@tldraw/validate": "workspace:*",

apps/bemo-worker/src/BemoDO.ts

@@ -1,4 +1,4 @@
-import { RoomSnapshot, TLCloseEventCode, TLSocketRoom } from '@tldraw/sync'
+import { RoomSnapshot, TLCloseEventCode, TLSocketRoom } from '@tldraw/sync-core'
 import { TLRecord } from '@tldraw/tlschema'
 import { throttle } from '@tldraw/utils'
 import { T } from '@tldraw/validate'

apps/bemo-worker/tsconfig.json

@@ -14,7 +14,7 @@
 			"path": "../../packages/store"
 		},
 		{
-			"path": "../../packages/sync"
+			"path": "../../packages/sync-core"
 		},
 		{
 			"path": "../../packages/tlschema"

apps/docs/content/docs/collaboration.mdx

@@ -20,7 +20,7 @@ We have a [sockets example](https://github.com/tldraw/tldraw-sockets-example) th
 
 ### Our own sync engine
 
-We developed our own sync engine for use on tldraw.com based on a push/pull/rebase-style algorithm. It powers our "shared projects", such as [this one](https://tldraw.com/r). The engine's source code can be found [here](https://github.com/tldraw/tldraw/tree/main/packages/sync). It was designed to be hosted on Cloudflare workers with [DurableObjects](https://developers.cloudflare.com/durable-objects/).
+We developed our own sync engine for use on tldraw.com based on a push/pull/rebase-style algorithm. It powers our "shared projects", such as [this one](https://tldraw.com/r). The engine's source code can be found [here](https://github.com/tldraw/tldraw/tree/main/packages/sync-core). It was designed to be hosted on Cloudflare workers with [DurableObjects](https://developers.cloudflare.com/durable-objects/).
 
 We don't suggest using this code directly. However, like our other examples, it may serve as a good reference for your own sync engine.
 

apps/docs/content/docs/persistence.mdx

@@ -409,7 +409,7 @@ Tldraw ships with a local-only sync engine based on `IndexedDb` and `BroadcastCh
 ### Tldraw.com sync engine
 
 [tldraw.com/r](https://tldraw.com/r) currently uses a simple custom sync engine based on a push/pull/rebase-style algorithm.
-It can be found [here](https://github.com/tldraw/tldraw/tree/main/packages/sync).
+It can be found [here](https://github.com/tldraw/tldraw/tree/main/packages/sync-core).
 It was optimized for Cloudflare workers with [DurableObjects](https://developers.cloudflare.com/durable-objects/)
 
 We don't suggest using our code directly yet, but it may serve as a good reference for your own sync engine.

apps/dotcom-worker/package.json

@@ -23,7 +23,7 @@
 		"@supabase/supabase-js": "^2.33.2",
 		"@tldraw/dotcom-shared": "workspace:*",
 		"@tldraw/store": "workspace:*",
-		"@tldraw/sync": "workspace:*",
+		"@tldraw/sync-core": "workspace:*",
 		"@tldraw/tlschema": "workspace:*",
 		"@tldraw/utils": "workspace:*",
 		"@tldraw/validate": "workspace:*",

apps/dotcom-worker/src/TLDrawDurableObject.ts

@@ -14,7 +14,7 @@ import {
 	TLCloseEventCode,
 	TLSocketRoom,
 	type PersistedRoomSnapshotForSupabase,
-} from '@tldraw/sync'
+} from '@tldraw/sync-core'
 import { TLRecord } from '@tldraw/tlschema'
 import { assert, assertExists, exhaustiveSwitchError } from '@tldraw/utils'
 import { createPersistQueue, createSentry } from '@tldraw/worker-shared'

apps/dotcom-worker/src/routes/createRoom.ts

@@ -1,5 +1,5 @@
 import { CreateRoomRequestBody } from '@tldraw/dotcom-shared'
-import { RoomSnapshot, schema } from '@tldraw/sync'
+import { RoomSnapshot, schema } from '@tldraw/sync-core'
 import { IRequest } from 'itty-router'
 import { nanoid } from 'nanoid'
 import { getR2KeyForRoom } from '../r2'

apps/dotcom-worker/src/routes/createRoomSnapshot.ts

@@ -1,5 +1,5 @@
 import { CreateSnapshotRequestBody } from '@tldraw/dotcom-shared'
-import { RoomSnapshot } from '@tldraw/sync'
+import { RoomSnapshot } from '@tldraw/sync-core'
 import { IRequest } from 'itty-router'
 import { nanoid } from 'nanoid'
 import { getR2KeyForSnapshot } from '../r2'

apps/dotcom-worker/src/routes/getRoomSnapshot.ts

@@ -1,4 +1,4 @@
-import { RoomSnapshot } from '@tldraw/sync'
+import { RoomSnapshot } from '@tldraw/sync-core'
 import { notFound } from '@tldraw/worker-shared'
 import { IRequest } from 'itty-router'
 import { getR2KeyForSnapshot } from '../r2'

apps/dotcom-worker/src/types.ts

@@ -1,6 +1,6 @@
 // https://developers.cloudflare.com/analytics/analytics-engine/
 
-import { RoomSnapshot } from '@tldraw/sync'
+import { RoomSnapshot } from '@tldraw/sync-core'
 
 // This type isn't available in @cloudflare/workers-types yet
 export interface Analytics {

apps/dotcom-worker/src/utils/validateSnapshot.ts

@@ -1,5 +1,5 @@
 import { SerializedSchema, SerializedStore } from '@tldraw/store'
-import { schema } from '@tldraw/sync'
+import { schema } from '@tldraw/sync-core'
 import { TLRecord } from '@tldraw/tlschema'
 import { Result, objectMapEntries } from '@tldraw/utils'
 

apps/dotcom-worker/tsconfig.json

@@ -20,7 +20,7 @@
 			"path": "../../packages/tlschema"
 		},
 		{
-			"path": "../../packages/sync"
+			"path": "../../packages/sync-core"
 		},
 		{
 			"path": "../../packages/utils"

apps/dotcom/package.json

@@ -25,7 +25,7 @@
 		"@tldraw/assets": "workspace:*",
 		"@tldraw/dotcom-shared": "workspace:*",
 		"@tldraw/sync": "workspace:*",
-		"@tldraw/sync-react": "workspace:*",
+		"@tldraw/sync-core": "workspace:*",
 		"@tldraw/utils": "workspace:*",
 		"@vercel/analytics": "^1.1.1",
 		"browser-fs-access": "^0.35.0",

apps/dotcom/src/components/BoardHistorySnapshot/BoardHistorySnapshot.tsx

@@ -1,5 +1,5 @@
 import { ROOM_PREFIX } from '@tldraw/dotcom-shared'
-import { RoomSnapshot } from '@tldraw/sync'
+import { RoomSnapshot } from '@tldraw/sync-core'
 import { useCallback, useState } from 'react'
 import { Tldraw, fetch } from 'tldraw'
 import '../../../styles/core.css'

apps/dotcom/src/components/MultiplayerEditor.tsx

@@ -1,5 +1,5 @@
 import { ROOM_OPEN_MODE, RoomOpenModeToPath, type RoomOpenMode } from '@tldraw/dotcom-shared'
-import { useMultiplayerSync } from '@tldraw/sync-react'
+import { useMultiplayerSync } from '@tldraw/sync'
 import { useCallback } from 'react'
 import {
 	DefaultHelpMenu,

apps/dotcom/src/components/StoreErrorScreen.tsx

@@ -1,4 +1,4 @@
-import { TLIncompatibilityReason, TLRemoteSyncError } from '@tldraw/sync'
+import { TLIncompatibilityReason, TLRemoteSyncError } from '@tldraw/sync-core'
 import { exhaustiveSwitchError } from 'tldraw'
 import { ErrorPage } from './ErrorPage/ErrorPage'
 

apps/dotcom/src/components/TemporaryBemoDevEditor.tsx

@@ -1,4 +1,4 @@
-import { useMultiplayerDemo } from '@tldraw/sync-react'
+import { useMultiplayerDemo } from '@tldraw/sync'
 import { Tldraw } from 'tldraw'
 import { assetUrls } from '../utils/assetUrls'
 

apps/dotcom/src/pages/history-snapshot.tsx

@@ -1,5 +1,5 @@
 import { ROOM_PREFIX } from '@tldraw/dotcom-shared'
-import { RoomSnapshot } from '@tldraw/sync'
+import { RoomSnapshot } from '@tldraw/sync-core'
 import { fetch } from 'tldraw'
 import '../../styles/globals.css'
 import { BoardHistorySnapshot } from '../components/BoardHistorySnapshot/BoardHistorySnapshot'

apps/dotcom/src/pages/new.tsx

@@ -1,5 +1,5 @@
 import { ROOM_PREFIX, Snapshot } from '@tldraw/dotcom-shared'
-import { schema } from '@tldraw/sync'
+import { schema } from '@tldraw/sync-core'
 import { Navigate } from 'react-router-dom'
 import '../../styles/globals.css'
 import { ErrorPage } from '../components/ErrorPage/ErrorPage'

apps/dotcom/src/pages/public-touchscreen-side-panel.tsx

@@ -1,5 +1,5 @@
 import { CreateRoomRequestBody, ROOM_PREFIX, Snapshot } from '@tldraw/dotcom-shared'
-import { schema } from '@tldraw/sync'
+import { schema } from '@tldraw/sync-core'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { TldrawUiButton, fetch } from 'tldraw'

apps/dotcom/tsconfig.json

@@ -35,7 +35,7 @@
 			"path": "../../packages/sync"
 		},
 		{
-			"path": "../../packages/sync-react"
+			"path": "../../packages/sync-core"
 		},
 		{
 			"path": "../../packages/tldraw"

packages/sync-core/README.md

@@ -0,0 +1 @@
+# @tldraw/tlsync

packages/sync-core/package.json

@@ -1,6 +1,6 @@
 {
-	"name": "@tldraw/sync-react",
+	"name": "@tldraw/sync-core",
-	"description": "A tiny little drawing app (multiplayer sync react bindings).",
+	"description": "A tiny little drawing app (multiplayer sync).",
 	"version": "2.0.0-alpha.11",
 	"private": true,
 	"author": {
@@ -37,11 +37,13 @@
 		"lint": "yarn run -T tsx ../../scripts/lint.ts"
 	},
 	"devDependencies": {
+		"tldraw": "workspace:*",
 		"typescript": "^5.3.3",
 		"uuid-by-string": "^4.0.0",
 		"uuid-readable": "^0.0.2"
 	},
 	"jest": {
+		"resolver": "<rootDir>/jestResolver.js",
 		"preset": "config/jest/node",
 		"testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
 		"moduleNameMapper": {
@@ -55,12 +57,13 @@
 		]
 	},
 	"dependencies": {
-		"@tldraw/sync": "workspace:*",
+		"@tldraw/state": "workspace:*",
+		"@tldraw/store": "workspace:*",
+		"@tldraw/tlschema": "workspace:*",
 		"@tldraw/utils": "workspace:*",
 		"lodash.isequal": "^4.5.0",
 		"nanoevents": "^7.0.1",
 		"nanoid": "4.0.2",
-		"tldraw": "workspace:*",
 		"ws": "^8.16.0"
 	},
 	"peerDependencies": {

packages/sync-core/setupJest.js

@@ -0,0 +1,16 @@
+require('fake-indexeddb/auto')
+global.ResizeObserver = require('resize-observer-polyfill')
+global.crypto ??= new (require('@peculiar/webcrypto').Crypto)()
+global.FontFace = class FontFace {
+	load() {
+		return Promise.resolve()
+	}
+}
+document.fonts = {
+	add: () => {},
+	delete: () => {},
+	forEach: () => {},
+}
+
+global.TextEncoder = require('util').TextEncoder
+global.TextDecoder = require('util').TextDecoder

packages/sync-core/src/index.ts

@@ -0,0 +1,37 @@
+export { ClientWebSocketAdapter } from './lib/ClientWebSocketAdapter'
+export { TLRemoteSyncError } from './lib/TLRemoteSyncError'
+export { TLSocketRoom } from './lib/TLSocketRoom'
+export {
+	TLCloseEventCode,
+	TLSyncClient,
+	type TLPersistentClientSocket,
+	type TLPersistentClientSocketStatus,
+} from './lib/TLSyncClient'
+export { TLSyncRoom, type RoomSnapshot, type TLRoomSocket } from './lib/TLSyncRoom'
+export { chunk } from './lib/chunk'
+export {
+	RecordOpType,
+	ValueOpType,
+	applyObjectDiff,
+	diffRecord,
+	getNetworkDiff,
+	type AppendOp,
+	type DeleteOp,
+	type NetworkDiff,
+	type ObjectDiff,
+	type PatchOp,
+	type PutOp,
+	type RecordOp,
+	type ValueOp,
+} from './lib/diff'
+export {
+	TLIncompatibilityReason,
+	getTlsyncProtocolVersion,
+	type TLConnectRequest,
+	type TLPingRequest,
+	type TLPushRequest,
+	type TLSocketClientSentEvent,
+	type TLSocketServerSentEvent,
+} from './lib/protocol'
+export { schema } from './lib/schema'
+export type { PersistedRoomSnapshotForSupabase } from './lib/server-types'

packages/sync-core/tsconfig.json

@@ -8,11 +8,17 @@
 	},
 	"references": [
 		{
-			"path": "../sync"
+			"path": "../state"
+		},
+		{
+			"path": "../store"
 		},
 		{
 			"path": "../tldraw"
 		},
+		{
+			"path": "../tlschema"
+		},
 		{
 			"path": "../utils"
 		}

packages/sync-react/README.md

@@ -1,3 +0,0 @@
-# @tldraw/sync-react
-
-react bindings for tldraw sync

packages/sync-react/src/index.ts

@@ -1,6 +0,0 @@
-export {
-	useMultiplayerSync,
-	type RemoteTLStoreWithStatus,
-	type UseMultiplayerSyncOptions,
-} from './useMultiplayerSync'
-export { useMultiplayerDemo, type UseMultiplayerDemoOptions } from './useMutliplayerDemo'

packages/sync/README.md

@@ -1 +1,3 @@
-# @tldraw/tlsync
+# @tldraw/sync
+
+react bindings for tldraw sync

packages/sync/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tldraw/sync",
-	"description": "A tiny little drawing app (multiplayer sync).",
+	"description": "A tiny little drawing app (multiplayer sync react bindings).",
 	"version": "2.0.0-alpha.11",
 	"private": true,
 	"author": {
@@ -37,13 +37,11 @@
 		"lint": "yarn run -T tsx ../../scripts/lint.ts"
 	},
 	"devDependencies": {
-		"tldraw": "workspace:*",
 		"typescript": "^5.3.3",
 		"uuid-by-string": "^4.0.0",
 		"uuid-readable": "^0.0.2"
 	},
 	"jest": {
-		"resolver": "<rootDir>/jestResolver.js",
 		"preset": "config/jest/node",
 		"testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
 		"moduleNameMapper": {
@@ -57,13 +55,12 @@
 		]
 	},
 	"dependencies": {
-		"@tldraw/state": "workspace:*",
+		"@tldraw/sync-core": "workspace:*",
-		"@tldraw/store": "workspace:*",
-		"@tldraw/tlschema": "workspace:*",
 		"@tldraw/utils": "workspace:*",
 		"lodash.isequal": "^4.5.0",
 		"nanoevents": "^7.0.1",
 		"nanoid": "4.0.2",
+		"tldraw": "workspace:*",
 		"ws": "^8.16.0"
 	},
 	"peerDependencies": {

packages/sync/setupJest.js

@@ -1,16 +0,0 @@
-require('fake-indexeddb/auto')
-global.ResizeObserver = require('resize-observer-polyfill')
-global.crypto ??= new (require('@peculiar/webcrypto').Crypto)()
-global.FontFace = class FontFace {
-	load() {
-		return Promise.resolve()
-	}
-}
-document.fonts = {
-	add: () => {},
-	delete: () => {},
-	forEach: () => {},
-}
-
-global.TextEncoder = require('util').TextEncoder
-global.TextDecoder = require('util').TextDecoder

packages/sync/src/index.ts

@@ -1,37 +1,9 @@
-export { ClientWebSocketAdapter } from './lib/ClientWebSocketAdapter'
+// eslint-disable-next-line local/no-export-star
-export { TLRemoteSyncError } from './lib/TLRemoteSyncError'
+export * from '@tldraw/sync-core'
-export { TLSocketRoom } from './lib/TLSocketRoom'
+
 export {
-	TLCloseEventCode,
+	useMultiplayerSync,
-	TLSyncClient,
+	type RemoteTLStoreWithStatus,
-	type TLPersistentClientSocket,
+	type UseMultiplayerSyncOptions,
-	type TLPersistentClientSocketStatus,
+} from './useMultiplayerSync'
-} from './lib/TLSyncClient'
+export { useMultiplayerDemo, type UseMultiplayerDemoOptions } from './useMutliplayerDemo'
-export { TLSyncRoom, type RoomSnapshot, type TLRoomSocket } from './lib/TLSyncRoom'
-export { chunk } from './lib/chunk'
-export {
-	RecordOpType,
-	ValueOpType,
-	applyObjectDiff,
-	diffRecord,
-	getNetworkDiff,
-	type AppendOp,
-	type DeleteOp,
-	type NetworkDiff,
-	type ObjectDiff,
-	type PatchOp,
-	type PutOp,
-	type RecordOp,
-	type ValueOp,
-} from './lib/diff'
-export {
-	TLIncompatibilityReason,
-	getTlsyncProtocolVersion,
-	type TLConnectRequest,
-	type TLPingRequest,
-	type TLPushRequest,
-	type TLSocketClientSentEvent,
-	type TLSocketServerSentEvent,
-} from './lib/protocol'
-export { schema } from './lib/schema'
-export type { PersistedRoomSnapshotForSupabase } from './lib/server-types'

packages/sync/src/useMultiplayerSync.ts

@@ -6,7 +6,7 @@ import {
 	TLRemoteSyncError,
 	TLSyncClient,
 	schema,
-} from '@tldraw/sync'
+} from '@tldraw/sync-core'
 import { useEffect } from 'react'
 import {
 	Editor,

packages/sync/tsconfig.json

@@ -8,17 +8,11 @@
 	},
 	"references": [
 		{
-			"path": "../state"
+			"path": "../sync-core"
-		},
-		{
-			"path": "../store"
 		},
 		{
 			"path": "../tldraw"
 		},
-		{
-			"path": "../tlschema"
-		},
 		{
 			"path": "../utils"
 		}

yarn.lock

@@ -5997,7 +5997,7 @@ __metadata:
     "@cloudflare/workers-types": "npm:^4.20240620.0"
     "@tldraw/dotcom-shared": "workspace:*"
     "@tldraw/store": "workspace:*"
-    "@tldraw/sync": "workspace:*"
+    "@tldraw/sync-core": "workspace:*"
     "@tldraw/tlschema": "workspace:*"
     "@tldraw/utils": "workspace:*"
     "@tldraw/validate": "workspace:*"
@@ -6086,7 +6086,7 @@ __metadata:
     "@supabase/supabase-js": "npm:^2.33.2"
     "@tldraw/dotcom-shared": "workspace:*"
     "@tldraw/store": "workspace:*"
-    "@tldraw/sync": "workspace:*"
+    "@tldraw/sync-core": "workspace:*"
     "@tldraw/tlschema": "workspace:*"
     "@tldraw/utils": "workspace:*"
     "@tldraw/validate": "workspace:*"
@@ -6255,11 +6255,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@tldraw/sync-react@workspace:*, @tldraw/sync-react@workspace:packages/sync-react":
+"@tldraw/sync-core@workspace:*, @tldraw/sync-core@workspace:packages/sync-core":
   version: 0.0.0-use.local
-  resolution: "@tldraw/sync-react@workspace:packages/sync-react"
+  resolution: "@tldraw/sync-core@workspace:packages/sync-core"
   dependencies:
-    "@tldraw/sync": "workspace:*"
+    "@tldraw/state": "workspace:*"
+    "@tldraw/store": "workspace:*"
+    "@tldraw/tlschema": "workspace:*"
     "@tldraw/utils": "workspace:*"
     lodash.isequal: "npm:^4.5.0"
     nanoevents: "npm:^7.0.1"
@@ -6279,9 +6281,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@tldraw/sync@workspace:packages/sync"
   dependencies:
-    "@tldraw/state": "workspace:*"
+    "@tldraw/sync-core": "workspace:*"
-    "@tldraw/store": "workspace:*"
-    "@tldraw/tlschema": "workspace:*"
     "@tldraw/utils": "workspace:*"
     lodash.isequal: "npm:^4.5.0"
     nanoevents: "npm:^7.0.1"
@@ -10356,7 +10356,7 @@ __metadata:
     "@tldraw/assets": "workspace:*"
     "@tldraw/dotcom-shared": "workspace:*"
     "@tldraw/sync": "workspace:*"
-    "@tldraw/sync-react": "workspace:*"
+    "@tldraw/sync-core": "workspace:*"
     "@tldraw/utils": "workspace:*"
     "@tldraw/validate": "workspace:*"
     "@types/qrcode": "npm:^1.5.0"