[pull] main from tldraw:main

apps/dotcom/sync-worker/src/worker.ts

@@ -54,6 +54,10 @@ export { TLLoggerDurableObject } from './TLLoggerDurableObject'
 export { TLPostgresReplicator } from './TLPostgresReplicator'
 export { TLStatsDurableObject } from './TLStatsDurableObject'
 export { TLUserDurableObject } from './TLUserDurableObject'
+// no-op stub. wrangler.toml v1 created TLDrawDurableObject and v10 deletes it.
+// staging/prod still have it in their applied-migration history, so removing
+// this export breaks their deploys (see #8124). preview skips both v1 and v10,
+// so this export is just an unbound class on preview - harmless.
 export class TLDrawDurableObject {}
 
 const { preflight, corsify } = cors({

apps/dotcom/sync-worker/wrangler.toml

@@ -8,9 +8,11 @@ port = 8787
 ip = "0.0.0.0"
 
 # these migrations are append-only. you can't change them. if you do need to change something, do so
-# by creating new migrations
+# by creating new migrations.
+# IMPORTANT: when adding a new migration here, also add it to the [[env.preview.migrations]] block below
+# env-level migrations fully replace the top-level list, so preview won't inherit new entries.
 [[migrations]]
-tag = "v1" # Should be unique for each entry
+tag = "v1"                            # Should be unique for each entry
 new_classes = ["TLDrawDurableObject"]
 
 [[migrations]]
@@ -50,6 +52,42 @@ new_sqlite_classes = ["TLFileDurableObject"]
 tag = "v10"
 deleted_classes = ["TLDrawDurableObject"]
 
+# preview workers are fresh deploys, so CF rejects v10's delete-class for
+# TLDrawDurableObject (code 10074). skip v1 and v10 here; env-level migrations
+# fully replace the top-level list.
+[[env.preview.migrations]]
+tag = "v2"
+new_classes = ["TLProWorkspaceDurableObject"]
+
+[[env.preview.migrations]]
+tag = "v3"
+deleted_classes = ["TLProWorkspaceDurableObject"]
+
+[[env.preview.migrations]]
+tag = "v4"
+new_classes = ["TLAppDurableObject"]
+
+[[env.preview.migrations]]
+tag = "v5"
+new_sqlite_classes = ["TLPostgresReplicator"]
+new_classes = ["TLUserDurableObject"]
+
+[[env.preview.migrations]]
+tag = "v6"
+new_sqlite_classes = ["TLLoggerDurableObject"]
+
+[[env.preview.migrations]]
+tag = "v7"
+new_sqlite_classes = ["TLStatsDurableObject"]
+
+[[env.preview.migrations]]
+tag = "v8"
+deleted_classes = ["TLAppDurableObject"]
+
+[[env.preview.migrations]]
+tag = "v9"
+new_sqlite_classes = ["TLFileDurableObject"]
+
 [[analytics_engine_datasets]]
 binding = "MEASURE"
 
@@ -69,7 +107,7 @@ MULTIPLAYER_SERVER = "http://localhost:3000"
 # staging is the same as a preview on main:
 [env.staging]
 name = "main-tldraw-multiplayer"
-workers_dev = true # todo: remove this once clients are updated
+workers_dev = true               # todo: remove this once clients are updated
 
 [env.staging.vars]
 HEALTH_CHECK_DB_SIZE_THRESHOLD_GB = "4"
@@ -79,7 +117,7 @@ HEALTH_CHECK_WAL_SIZE_THRESHOLD_MB = "1024"
 # production gets the proper name
 [env.production]
 name = "tldraw-multiplayer"
-workers_dev = true # todo: remove this once clients are updated
+workers_dev = true          # todo: remove this once clients are updated
 
 [env.production.vars]
 HEALTH_CHECK_DB_SIZE_THRESHOLD_GB = "10"

internal/scripts/deploy-dotcom.ts

@@ -372,7 +372,9 @@ async function main() {
 		await withTiming('prebuild assets', () => exec('yarn', ['lazy', 'prebuild']))
 
 		// link to vercel and supabase projects:
-		await withTiming('vercel link', () => vercelCli('link', ['--project', env.VERCEL_PROJECT_ID]))
+		await withTiming('vercel link', () =>
+			vercelCli('link', ['--yes', '--project', env.VERCEL_PROJECT_ID])
+		)
 	})
 
 	// deploy pre-flight steps:
@@ -658,6 +660,11 @@ async function deployHealthWorker({ dryRun }: { dryRun: boolean }) {
 }
 
 type ExecOpts = NonNullable<Parameters<typeof exec>[2]>
+// `--yes` is per-subcommand in the vercel CLI, not a global flag. it is valid
+// for `link`, `deploy`, and `alias rm`; passing it to other subcommands like
+// `alias set` now hard-errors with "unknown or unexpected option: --yes" since
+// vercel removed permissive arg parsing. callers add `--yes` to `args` when
+// they want the non-interactive prompt skip.
 async function vercelCli(command: string, args: string[], opts?: ExecOpts) {
 	return exec(
 		'yarn',
@@ -670,7 +677,6 @@ async function vercelCli(command: string, args: string[], opts?: ExecOpts) {
 			env.VERCEL_TOKEN,
 			'--scope',
 			env.VERCEL_ORG_ID,
-			'--yes',
 			...args,
 		],
 		{
@@ -905,7 +911,7 @@ async function deploySpa(): Promise<{ deploymentUrl: string; inspectUrl: string
 	// both 'staging' and 'production' are deployed to vercel as 'production' deploys
 	// in separate 'projects'
 	const prod = env.TLDRAW_ENV !== 'preview'
-	const out = await vercelCli('deploy', ['--prebuilt', ...(prod ? ['--prod'] : [])], {
+	const out = await vercelCli('deploy', ['--yes', '--prebuilt', ...(prod ? ['--prod'] : [])], {
 		pwd: dotcom,
 	})
 

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -63,44 +63,52 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 		[editor]
 	)
 
-	const rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })
+	const rMemoizedStuff = useRef({ lodDisableTextOutline: false, canUpdateTextOutline: true })
+
+	useQuickReactor(
+		'set text outline',
+		function setTextOutline() {
+			if (rMemoizedStuff.current.canUpdateTextOutline) {
+				if (tlenv.isSafari) {
+					// We don't allow text outlines on safari for performance reasons
+					container.style.setProperty('--tl-text-outline', 'none')
+					rMemoizedStuff.current.canUpdateTextOutline = false // will prevent this check in the future
+				} else {
+					const efficientZoom = editor.getEfficientZoomLevel()
+					// If we're zoomed way out, and have this option enabled, then we hide text outline
+					const lodDisableTextOutline = efficientZoom < editor.options.textShadowLod
+					// Skip the style update if the property is the same as it was before
+					if (lodDisableTextOutline !== rMemoizedStuff.current.lodDisableTextOutline) {
+						container.style.setProperty(
+							'--tl-text-outline',
+							lodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`
+						)
+					}
+					rMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline
+				}
+			}
+		},
+		[editor, container]
+	)
 
 	useQuickReactor(
 		'position layers',
 		function positionLayersWhenCameraMoves() {
 			const { x, y, z } = editor.getCamera()
 
-			// This should only run once on first load
-			if (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {
-				container.style.setProperty('--tl-text-outline', 'none')
-				rMemoizedStuff.current.allowTextOutline = false
-			}
-
-			// And this should only run if we're not in Safari;
-			// If we're below the lod distance for text shadows, turn them off
-			if (
-				rMemoizedStuff.current.allowTextOutline &&
-				z < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline
-			) {
-				const lodDisableTextOutline = z < editor.options.textShadowLod
-				container.style.setProperty(
-					'--tl-text-outline',
-					lodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`
-				)
-				rMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline
-			}
-
 			// Because the html container has a width/height of 1px, we
 			// need to create a small offset when zoomed to ensure that
 			// the html container and svg container are lined up exactly.
 			const offset =
 				z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
 
-			const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
-				x + offset
-			)}px,${toDomPrecision(y + offset)}px)`
-
-			setStyleProperty(rHtmlLayer.current, 'transform', transform)
+			setStyleProperty(
+				rHtmlLayer.current,
+				'transform',
+				`scale(${toDomPrecision(z)}) translate(${toDomPrecision(
+					x + offset
+				)}px,${toDomPrecision(y + offset)}px)`
+			)
 		},
 		[editor, container]
 	)