security: enforce use of our fetch function and its default referrerpolicy (#3884)

followup to https://github.com/tldraw/tldraw/pull/3881 to enforce this
in the codebase

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `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

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
 	extends: [
 		'prettier',
 		'eslint:recommended',
+		'plugin:react/recommended',
 		'plugin:@typescript-eslint/recommended',
 		'plugin:@next/next/core-web-vitals',
 	],
@@ -12,6 +13,7 @@ module.exports = {
 		'import',
 		'local',
 		'@next/next',
+		'react',
 		'react-hooks',
 		'deprecation',
 	],
@@ -23,15 +25,17 @@ module.exports = {
 	rules: {
 		'deprecation/deprecation': 'error',
 		'@next/next/no-html-link-for-pages': 'off',
-		'react/jsx-key': 'off',
 		'no-non-null-assertion': 'off',
 		'no-fallthrough': 'off',
+		'react/jsx-no-target-blank': 'error',
+		'react/react-in-jsx-scope': 'off',
 		'@typescript-eslint/no-fallthrough': 'off',
 		'@typescript-eslint/no-non-null-assertion': 'off',
 		'@typescript-eslint/no-explicit-any': 'off',
 		'@typescript-eslint/ban-ts-comment': 'off',
 		'react/display-name': 'off',
 		'@next/next/no-img-element': 'off',
+		'react/prop-types': 'off',
 		'@typescript-eslint/no-extra-semi': 'off',
 		'no-mixed-spaces-and-tabs': 'off',
 		'@typescript-eslint/no-unused-vars': [
@@ -86,39 +90,107 @@ module.exports = {
 			},
 		},
 		{
-			files: ['packages/editor/**/*', 'packages/tldraw/**/*'],
+			files: ['packages/editor/**/*', 'packages/tldraw/**/*', 'packages/utils/**/*'],
 			rules: {
 				'no-restricted-globals': [
 					'error',
 					{
-						name: 'setInterval',
+						name: 'fetch',
-						message: 'Use the timers from @tldraw/util instead.',
+						message: 'Use the fetch from @tldraw/util instead.',
+					},
+					{
+						name: 'Image',
+						message: 'Use the Image from @tldraw/util instead.',
 					},
 					{
 						name: 'setTimeout',
-						message: 'Use the timers from @tldraw/util instead.',
+						message: 'Use the timers from editor.timers instead.',
+					},
+					{
+						name: 'setInterval',
+						message: 'Use the timers from editor.timers instead.',
 					},
 					{
 						name: 'requestAnimationFrame',
-						message: 'Use the timers from @tldraw/util instead.',
+						message: 'Use the timers from editor.timers instead.',
 					},
+					{ name: 'structuredClone', message: 'Use structuredClone from @tldraw/util instead' },
 				],
 				'no-restricted-properties': [
 					'error',
+					{
+						object: 'window',
+						property: 'fetch',
+						message: 'Use the fetch from @tldraw/util instead.',
+					},
+					{
+						object: 'window',
+						property: 'Image',
+						message: 'Use the Image from @tldraw/util instead.',
+					},
 					{
 						object: 'window',
 						property: 'setTimeout',
-						message: 'Use the timers from @tldraw/util instead.',
+						message: 'Use the timers from editor.timers instead.',
 					},
 					{
 						object: 'window',
 						property: 'setInterval',
-						message: 'Use the timers from @tldraw/util instead.',
+						message: 'Use the timers from editor.timers instead.',
 					},
 					{
 						object: 'window',
 						property: 'requestAnimationFrame',
-						message: 'Use the timers from @tldraw/util instead.',
+						message: 'Use the timers from editor.timers instead.',
+					},
+				],
+				'no-restricted-syntax': [
+					'error',
+					{ selector: "MethodDefinition[kind='set']", message: 'Property setters are not allowed' },
+					{ selector: "MethodDefinition[kind='get']", message: 'Property getters are not allowed' },
+					{
+						selector: 'Identifier[name=localStorage]',
+						message: 'Use the getFromLocalStorage/setInLocalStorage helpers instead',
+					},
+					{
+						selector: 'Identifier[name=sessionStorage]',
+						message: 'Use the getFromSessionStorage/setInSessionStorage helpers instead',
+					},
+					{
+						selector:
+							"JSXElement[openingElement.name.name='img']:not(:has(JSXAttribute[name.name='referrerPolicy']))",
+						message: 'You must pass `referrerPolicy` when creating an <img>.',
+					},
+				],
+			},
+		},
+		// This overrides the default config for the given matching paths.
+		{
+			files: ['apps/dotcom/**/*'],
+			rules: {
+				'no-restricted-globals': [
+					'error',
+					{
+						name: 'fetch',
+						message: 'Use the fetch from @tldraw/util instead.',
+					},
+					{
+						name: 'Image',
+						message: 'Use the Image from @tldraw/util instead.',
+					},
+					{ name: 'structuredClone', message: 'Use structuredClone from @tldraw/util instead' },
+				],
+				'no-restricted-properties': [
+					'error',
+					{
+						object: 'window',
+						property: 'fetch',
+						message: 'Use the fetch from @tldraw/util instead.',
+					},
+					{
+						object: 'window',
+						property: 'Image',
+						message: 'Use the Image from @tldraw/util instead.',
 					},
 				],
 			},
@@ -136,10 +208,12 @@ module.exports = {
 			},
 		},
 		{
-			files: ['*.test.ts', '*.spec.ts'],
+			files: ['*.test.ts', '*.test.tsx', '*.spec.ts'],
 			rules: {
 				'no-restricted-properties': 'off',
 				'no-restricted-globals': 'off',
+				'react/jsx-key': 'off',
+				'react/no-string-refs': 'off',
 			},
 		},
 		{

apps/docs/app/(content)/cla/page.tsx

@@ -28,17 +28,17 @@ export default async function ClaPage() {
 					You reserve all right, title, and interest in and to Your Contributions.{' '}
 				</p>
 				<p>1. Definitions. </p>
-				<p>"You" (or "Your") means the individual identified above. </p>
+				<p>“You” (or “Your”) means the individual identified above. </p>
 				<p>
-					"Contribution" means any original work of authorship, including any modifications or
+					“Contribution” means any original work of authorship, including any modifications or
 					additions to an existing work, that is intentionally submitted by You to tldraw for
 					inclusion in, or documentation of, any of the products owned or managed by tldraw (each, a
-					"Work"). For the purposes of this definition, "submitted" means any form of electronic,
+					“Work”). For the purposes of this definition, “submitted” means any form of electronic,
 					verbal, or written communication sent to tldraw or its representatives, including but not
 					limited to communication on electronic mailing lists, source code control systems, and
 					issue tracking systems that are managed by, or on behalf of, tldraw for the purpose of
 					discussing and improving the Works, but excluding communication that is conspicuously
-					marked or otherwise designated in writing by You as "Not a Contribution."{' '}
+					marked or otherwise designated in writing by You as “Not a Contribution.”{' '}
 				</p>
 				<p>
 					2. Grant of Copyright License. You hereby grant to tldraw a perpetual, worldwide,
@@ -74,7 +74,7 @@ export default async function ClaPage() {
 					6. You are not expected to provide support for Your Contributions, except to the extent
 					You desire to provide support. You may provide support for free, for a fee, or not at all.
 					Unless required by applicable law or agreed to in writing, You provide Your Contributions
-					on an "as is" basis, without warranties or conditions of any kind, either express or
+					on an “as is” basis, without warranties or conditions of any kind, either express or
 					implied, including, without limitation, any warranties or conditions of title,
 					non-infringement, merchantability, or fitness for a particular purpose.{' '}
 				</p>

apps/docs/app/(content)/license/page.tsx

@@ -53,13 +53,13 @@ export default async function LicensePage() {
 					available upon request and do so only under a license that complies with this License.
 				</p>
 				<p>
-					That that the word "tldraw" shall not be used to refer to any derivative works of the
+					That that the word “tldraw” shall not be used to refer to any derivative works of the
-					Software except in the phrase "Based on the tldraw library (https://tldraw.com)", provided
+					Software except in the phrase “Based on the tldraw library (https://tldraw.com)”, provided
 					such phrase is not used to promote the derivative works or to imply that tldraw endorses
 					you or the derivative works.
 				</p>
 				<p>
-					THAT THE SOFTWARE COMES "AS IS", WITH NO WARRANTIES. THIS MEANS NO EXPRESS, IMPLIED OR
+					THAT THE SOFTWARE COMES “AS IS”, WITH NO WARRANTIES. THIS MEANS NO EXPRESS, IMPLIED OR
 					STATUTORY WARRANTY, INCLUDING WITHOUT LIMITATION, WARRANTIES OF MERCHANTABILITY OR FITNESS
 					FOR A PARTICULAR PURPOSE OR ANY WARRANTY OF TITLE OR NON-INFRINGEMENT. ALSO, YOU MUST PASS
 					THIS DISCLAIMER ON WHENEVER YOU DISTRIBUTE THE SOFTWARE OR DERIVATIVE WORKS.

apps/docs/app/not-found.tsx

@@ -15,7 +15,7 @@ export default async function NotFound() {
 					<div className="page-header">
 						<h1>Not found.</h1>
 					</div>
-					<p>There's nothing here. :(</p>
+					<p>There’s nothing here. :(</p>
 				</main>
 			</div>
 		</div>

apps/docs/components/Header.tsx

@@ -24,6 +24,7 @@ export function Header({ sectionId }: { sectionId?: string }) {
 						href="https://x.com/tldraw/"
 						className="sidebar__button icon-button"
 						title="twitter"
+						rel="noopener noreferrer"
 						target="_blank"
 					>
 						<Icon icon="twitter" />
@@ -32,6 +33,7 @@ export function Header({ sectionId }: { sectionId?: string }) {
 						href="https://discord.com/invite/SBBEVCA4PG"
 						className="sidebar__button icon-button"
 						title="discord"
+						rel="noopener noreferrer"
 						target="_blank"
 					>
 						<Icon icon="discord" />
@@ -40,6 +42,7 @@ export function Header({ sectionId }: { sectionId?: string }) {
 						href="https://github.com/tldraw/tldraw"
 						className="sidebar__button icon-button"
 						title="github"
+						rel="noopener noreferrer"
 						target="_blank"
 					>
 						<Icon icon="github" />

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

@@ -1,7 +1,7 @@
 import { ROOM_PREFIX } from '@tldraw/dotcom-shared'
 import { RoomSnapshot } from '@tldraw/tlsync'
 import { useCallback, useState } from 'react'
-import { Tldraw } from 'tldraw'
+import { Tldraw, fetch } from 'tldraw'
 import '../../../styles/core.css'
 import { assetUrls } from '../../utils/assetUrls'
 import { useFileSystem } from '../../utils/useFileSystem'

apps/dotcom/src/components/IFrameProtector.tsx

@@ -62,7 +62,7 @@ export function IFrameProtector({
 		return (
 			<div className="tldraw__editor tl-container">
 				<div className="iframe-warning__container">
-					<a className="iframe-warning__link" href={url} target="_blank">
+					<a className="iframe-warning__link" href={url} rel="noopener noreferrer" target="_blank">
 						{'Visit this page on tldraw.com'}
 						<svg
 							width="15"

apps/dotcom/src/components/ShareMenu.tsx

@@ -10,6 +10,7 @@ import {
 	TldrawUiMenuContextProvider,
 	TldrawUiMenuGroup,
 	TldrawUiMenuItem,
+	fetch,
 	unwrapLabel,
 	useActions,
 	useContainer,

apps/dotcom/src/hooks/useMultiplayerAssets.ts

@@ -4,6 +4,7 @@ import {
 	MediaHelpers,
 	TLAsset,
 	TLAssetId,
+	fetch,
 	getHashForString,
 	uniqueId,
 } from 'tldraw'

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

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

apps/dotcom/src/pages/history.tsx

@@ -1,4 +1,5 @@
 import { ROOM_PREFIX } from '@tldraw/dotcom-shared'
+import { fetch } from 'tldraw'
 import { BoardHistoryLog } from '../components/BoardHistoryLog/BoardHistoryLog'
 import { ErrorPage } from '../components/ErrorPage/ErrorPage'
 import { IFrameProtector, ROOM_CONTEXT } from '../components/IFrameProtector'

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

@@ -1,4 +1,4 @@
-import { SerializedSchema, TLRecord } from 'tldraw'
+import { SerializedSchema, TLRecord, fetch } from 'tldraw'
 import '../../styles/globals.css'
 import { IFrameProtector, ROOM_CONTEXT } from '../components/IFrameProtector'
 import { SnapshotsEditor } from '../components/SnapshotsEditor'

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

@@ -2,7 +2,7 @@ import { CreateRoomRequestBody, ROOM_PREFIX, Snapshot } from '@tldraw/dotcom-sha
 import { schema } from '@tldraw/tlsync'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { TldrawUiButton } from 'tldraw'
+import { TldrawUiButton, fetch } from 'tldraw'
 import '../../styles/globals.css'
 import { getParentOrigin } from '../utils/iFrame'
 

apps/dotcom/src/utils/assetUrls.ts

@@ -1,4 +1,5 @@
 import { getAssetUrlsByImport } from '@tldraw/assets/imports.vite'
+import { Image } from 'tldraw'
 
 export const assetUrls = getAssetUrlsByImport()
 
@@ -12,7 +13,7 @@ async function preloadIcons() {
 
 function preloadIcon(url: string) {
 	return new Promise((resolve, reject) => {
-		const image = new Image()
+		const image = Image()
 		// this isn't known by typescript but it works
 		;(image as any).fetchPriority = 'low'
 		image.onload = resolve

apps/dotcom/src/utils/cloneAssetForShare.ts

@@ -1,4 +1,4 @@
-import { TLAsset } from 'tldraw'
+import { TLAsset, fetch } from 'tldraw'
 
 export async function cloneAssetForShare(
 	asset: TLAsset,

apps/dotcom/src/utils/createAssetFromFile.ts

@@ -3,6 +3,7 @@ import {
 	MediaHelpers,
 	TLAsset,
 	TLAssetId,
+	fetch,
 	getHashForString,
 	uniqueId,
 } from 'tldraw'
@@ -18,7 +19,6 @@ export async function createAssetFromFile({ file }: { type: 'file'; file: File }
 	await fetch(url, {
 		method: 'POST',
 		body: file,
-		referrerPolicy: 'strict-origin-when-cross-origin',
 	})
 
 	const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))

apps/dotcom/src/utils/createAssetFromUrl.ts

@@ -1,4 +1,4 @@
-import { AssetRecordType, TLAsset, getHashForString } from 'tldraw'
+import { AssetRecordType, TLAsset, fetch, getHashForString } from 'tldraw'
 import { BOOKMARK_ENDPOINT } from './config'
 
 interface ResponseBody {
@@ -45,7 +45,6 @@ export async function createAssetFromUrl({ url }: { type: 'url'; url: string }):
 			const resp = await fetch(url, {
 				method: 'GET',
 				mode: 'no-cors',
-				referrerPolicy: 'strict-origin-when-cross-origin',
 			})
 			const html = await resp.text()
 			const doc = new DOMParser().parseFromString(html, 'text/html')

apps/dotcom/src/utils/migration/migration.tsx

@@ -1,5 +1,5 @@
 import { openDB } from 'idb'
-import { Editor, TLV1Document, buildFromV1Document } from 'tldraw'
+import { Editor, TLV1Document, buildFromV1Document, fetch } from 'tldraw'
 
 export function isEditorEmpty(editor: Editor) {
 	const hasAnyShapes = editor.store.allRecords().some((r) => r.typeName === 'shape')

apps/dotcom/src/utils/sharing.ts

@@ -20,6 +20,7 @@ import {
 	TLUiOverrides,
 	TLUiToastsContextType,
 	TLUiTranslationKey,
+	fetch,
 	isShape,
 } from 'tldraw'
 import { useMultiplayerAssets } from '../hooks/useMultiplayerAssets'

apps/examples/src/ExamplePage.tsx

@@ -45,6 +45,7 @@ export function ExamplePage({
 							<a
 								target="_blank"
 								href="https://twitter.com/tldraw"
+								rel="noopener noreferrer"
 								title="twitter"
 								className="hoverable"
 							>
@@ -53,6 +54,7 @@ export function ExamplePage({
 							<a
 								target="_blank"
 								href="https://github.com/tldraw/tldraw"
+								rel="noopener noreferrer"
 								title="github"
 								className="hoverable"
 							>
@@ -61,6 +63,7 @@ export function ExamplePage({
 							<a
 								target="_blank"
 								href="https://discord.com/invite/SBBEVCA4PG"
+								rel="noopener noreferrer"
 								title="discord"
 								className="hoverable"
 							>
@@ -104,6 +107,7 @@ export function ExamplePage({
 						<a
 							className="example__sidebar__footer-link example__sidebar__footer-link--grey"
 							target="_blank"
+							rel="noopener noreferrer"
 							href="https://github.com/tldraw/tldraw/issues/new?assignees=&labels=Example%20Request&projects=&template=example_request.yml&title=%5BExample Request%5D%3A+"
 						>
 							Request an example
@@ -111,6 +115,7 @@ export function ExamplePage({
 						<a
 							className="example__sidebar__footer-link example__sidebar__footer-link--grey"
 							target="_blank"
+							rel="noopener noreferrer"
 							href="https://tldraw.dev"
 						>
 							Visit the docs

apps/examples/src/examples/editor-focus/EditorFocusExample.tsx

@@ -42,10 +42,10 @@ function ControlledFocusExample() {
 				</div>
 			</div>
 			<p>
-				The checkbox controls the editor's <code>instanceState.isFocused</code> property.
+				The checkbox controls the editor’s <code>instanceState.isFocused</code> property.
 			</p>
 			<p>
-				When the editor is "focused", its keyboard shortcuts will work. When it is not focused, the
+				When the editor is “focused”, its keyboard shortcuts will work. When it is not focused, the
 				keyboard shortcuts will not work.
 			</p>
 			<div style={{ width: 800, maxWidth: '100%', height: 500 }}>
@@ -67,7 +67,7 @@ function FreeFocusExample() {
 		<div>
 			<h2>Free Focus</h2>
 			<p>
-				You can use `onBlur` and `onFocus` to control the editor's focus so that it behaves like a
+				You can use `onBlur` and `onFocus` to control the editor’s focus so that it behaves like a
 				native form input.
 			</p>
 			<div

apps/examples/src/examples/local-storage/LocalStorageExample.tsx

@@ -1,5 +1,6 @@
+import { throttle } from 'lodash'
 import { useLayoutEffect, useState } from 'react'
-import { Tldraw, createTLStore, getSnapshot, loadSnapshot, throttle } from 'tldraw'
+import { Tldraw, createTLStore, getSnapshot, loadSnapshot } from 'tldraw'
 import 'tldraw/tldraw.css'
 
 // There's a guide at the bottom of this file!

apps/examples/src/examples/multiple/MultipleExample.tsx

@@ -155,13 +155,13 @@ function ABunchOfText() {
 				The fluorescent lights flickered overhead as John sat hunched over his desk, his fingers
 				tapping rhythmically on the keyboard. He was a software developer, and tonight, he had a
 				peculiar mission. A mission that would take him deep into the labyrinthine world of web
-				development. John had stumbled upon a new whiteboard library called "tldraw," a seemingly
+				development. John had stumbled upon a new whiteboard library called “tldraw”, a seemingly
 				simple tool that promised to revolutionize collaborative drawing on the web. Little did he
 				know that this discovery would set off a chain of events that would challenge his skills,
 				test his perseverance, and blur the line between reality and imagination.
 			</p>
 			<p>
-				With a newfound sense of excitement, John began integrating "tldraw" into his latest
+				With a newfound sense of excitement, John began integrating “tldraw” into his latest
 				project. As lines of code danced across his screen, he imagined the possibilities that lay
 				ahead. The potential to create virtual spaces where ideas could be shared, concepts could be
 				visualized, and teams could collaborate seamlessly from different corners of the world. It
@@ -169,7 +169,7 @@ function ABunchOfText() {
 				merged into a harmonious symphony.
 			</p>
 			<p>
-				As the night wore on, John's mind became consumed with the whiteboard library. He couldn't
+				As the night wore on, John’s mind became consumed with the whiteboard library. He couldn’t
 				help but marvel at its elegance and simplicity. With each stroke of his keyboard, he felt a
 				surge of inspiration, a connection to something greater than himself. It was as if the lines
 				of code he was writing were transforming into a digital canvas, waiting to be filled with
@@ -179,7 +179,7 @@ function ABunchOfText() {
 				take shape.
 			</p>
 			<p>
-				Little did John know, this integration of "tldraw" was only the beginning. It would lead him
+				Little did John know, this integration of “tldraw” was only the beginning. It would lead him
 				down a path filled with unforeseen challenges, where he would confront his own limitations
 				and question the very nature of creation. The journey ahead would test his resolve, pushing
 				him to the edge of his sanity. And as he embarked on this perilous adventure, he could not

apps/examples/src/examples/things-on-the-canvas/OnTheCanvasExample.tsx

@@ -75,7 +75,7 @@ const MyComponentInFront = track(() => {
 				boxShadow: '0 0 0 1px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)',
 			}}
 		>
-			<p>This won't scale with zoom.</p>
+			<p>This won’t scale with zoom.</p>
 		</div>
 	)
 })

apps/examples/src/examples/yjs/YjsExample.tsx

@@ -1,7 +1,7 @@
 export default function YjsExample() {
 	return (
 		<div className="tldraw__editor">
-			We've moved! See{' '}
+			We’ve moved! See{' '}
 			<a href="https://github.com/tldraw/tldraw-yjs-example">
 				https://github.com/tldraw/tldraw-yjs-example
 			</a>

apps/vscode/editor/src/utils/bookmarks.ts

@@ -1,4 +1,4 @@
-import { AssetRecordType, TLAsset, TLExternalAssetContent, getHashForString } from 'tldraw'
+import { AssetRecordType, TLAsset, TLExternalAssetContent, fetch, getHashForString } from 'tldraw'
 import { rpc } from './rpc'
 
 export async function onCreateAssetFromUrl({
@@ -30,7 +30,6 @@ export async function onCreateAssetFromUrl({
 			const resp = await fetch(url, {
 				method: 'GET',
 				mode: 'no-cors',
-				referrerPolicy: 'strict-origin-when-cross-origin',
 			})
 			const html = await resp.text()
 			const doc = new DOMParser().parseFromString(html, 'text/html')

packages/editor/api-report.md

@@ -1073,6 +1073,7 @@ export class Editor extends EventEmitter<TLEventMap> {
     };
     interrupt(): this;
     isAncestorSelected(shape: TLShape | TLShapeId): boolean;
+    isDisposed: boolean;
     isIn(path: string): boolean;
     isInAny(...paths: string[]): boolean;
     isPointInShape(shape: TLShape | TLShapeId, point: VecLike, opts?: {

packages/editor/package.json

@@ -57,8 +57,6 @@
 		"eventemitter3": "^4.0.7",
 		"idb": "^7.1.1",
 		"is-plain-object": "^5.0.0",
-		"lodash.throttle": "^4.1.1",
-		"lodash.uniq": "^4.5.0",
 		"nanoid": "4.0.2"
 	},
 	"peerDependencies": {
@@ -70,8 +68,6 @@
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",
 		"@types/benchmark": "^2.1.2",
-		"@types/lodash.throttle": "^4.1.7",
-		"@types/lodash.uniq": "^4.5.7",
 		"@types/react-test-renderer": "^18.0.0",
 		"@types/wicg-file-system-access": "^2020.9.5",
 		"benchmark": "^2.1.4",

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

@@ -596,6 +596,7 @@ function DebugSvgCopy({ id }: { id: TLShapeId }) {
 			src={image.src}
 			width={image.bounds.width}
 			height={image.bounds.height}
+			referrerPolicy="no-referrer"
 			style={{
 				position: 'absolute',
 				top: 0,

packages/editor/src/lib/editor/Editor.ts

@@ -230,6 +230,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.options = { ...defaultTldrawOptions, ...options }
 		this.store = store
+		this.disposables.add(this.store.dispose.bind(this.store))
 		this.history = new HistoryManager<TLRecord>({
 			store,
 			annotateError: (error) => {
@@ -718,6 +719,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly disposables = new Set<() => void>()
 
+	/**
+	 * Whether the editor is disposed.
+	 *
+	 * @public
+	 */
+	isDisposed = false
+
 	/** @internal */
 	private readonly _tickManager
 
@@ -798,6 +806,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	dispose() {
 		this.disposables.forEach((dispose) => dispose())
 		this.disposables.clear()
+		this.isDisposed = true
 	}
 
 	/* ------------------- Shape Utils ------------------ */

packages/editor/src/lib/hooks/useScreenBounds.ts

@@ -1,4 +1,4 @@
-import throttle from 'lodash.throttle'
+import { throttle } from '@tldraw/utils'
 import { useLayoutEffect } from 'react'
 import { Box } from '../primitives/Box'
 import { useEditor } from './useEditor'
@@ -62,6 +62,7 @@ export function useScreenBounds(ref: React.RefObject<HTMLElement>) {
 			window.removeEventListener('resize', updateBounds)
 			resizeObserver.disconnect()
 			scrollingParent?.removeEventListener('scroll', updateBounds)
+			updateBounds.cancel()
 		}
 	}, [editor, ref])
 }

packages/editor/src/lib/hooks/useZoomCss.ts

@@ -26,6 +26,7 @@ export function useZoomCss() {
 
 		return () => {
 			scheduler.detach()
+			setScaleDebounced.cancel()
 		}
 	}, [editor, container])
 }

packages/editor/src/lib/utils/assets.ts

@@ -1,3 +1,5 @@
+import { fetch } from '@tldraw/utils'
+
 /** @public */
 export function dataUrlToFile(url: string, filename: string, mimeType: string) {
 	return fetch(url)

packages/editor/src/lib/utils/uniq.ts

@@ -1,4 +1,4 @@
-import _uniq from 'lodash.uniq'
+import { uniq as _uniq } from '@tldraw/utils'
 
 /** @public */
 export function uniq<T>(

packages/store/api-report.md

@@ -348,6 +348,8 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
     clear: () => void;
     createComputedCache: <Result, Record extends R = R>(name: string, derive: (record: Record) => Result | undefined, isEqual?: ((a: Record, b: Record) => boolean) | undefined) => ComputedCache<Result, Record>;
     createSelectedComputedCache: <Selection, Result, Record extends R = R>(name: string, selector: (record: Record) => Selection | undefined, derive: (input: Selection) => Result | undefined) => ComputedCache<Result, Record>;
+    // (undocumented)
+    dispose(): void;
     // @internal (undocumented)
     ensureStoreIsUsable(): void;
     extractingChanges(fn: () => void): RecordsDiff<R>;

packages/store/src/lib/Store.ts

@@ -162,6 +162,15 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 	 */
 	private historyReactor: Reactor
 
+	/**
+	 * Function to dispose of any in-flight timeouts.
+	 *
+	 * @internal
+	 */
+	private cancelHistoryReactor: () => void = () => {
+		/* noop */
+	}
+
 	readonly schema: StoreSchema<R, Props>
 
 	readonly props: Props
@@ -209,7 +218,7 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 				// If we have accumulated history, flush it and update listeners
 				this._flushHistory()
 			},
-			{ scheduleEffect: (cb) => throttleToNextFrame(cb) }
+			{ scheduleEffect: (cb) => (this.cancelHistoryReactor = throttleToNextFrame(cb)) }
 		)
 		this.scopedTypes = {
 			document: new Set(
@@ -264,6 +273,10 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 		}
 	}
 
+	dispose() {
+		this.cancelHistoryReactor()
+	}
+
 	/**
 	 * Filters out non-document changes from a diff. Returns null if there are no changes left.
 	 * @param change - the records diff

packages/tldraw/src/lib/TldrawImage.tsx

@@ -186,7 +186,13 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 
 	return (
 		<div ref={setContainer} style={{ position: 'relative', width: '100%', height: '100%' }}>
-			{url && <img src={url} style={{ width: '100%', height: '100%' }} />}
+			{url && (
+				<img
+					src={url}
+					referrerPolicy="strict-origin-when-cross-origin"
+					style={{ width: '100%', height: '100%' }}
+				/>
+			)}
 		</div>
 	)
 })

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -16,6 +16,7 @@ import {
 	assert,
 	compact,
 	createShapeId,
+	fetch,
 	getHashForBuffer,
 	getHashForString,
 } from '@tldraw/editor'
@@ -116,7 +117,6 @@ export function registerDefaultExternalContentHandlers(
 			const resp = await fetch(url, {
 				method: 'GET',
 				mode: 'no-cors',
-				referrerPolicy: 'strict-origin-when-cross-origin',
 			})
 			const html = await resp.text()
 			const doc = new DOMParser().parseFromString(html, 'text/html')

packages/tldraw/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -220,6 +220,8 @@ function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape)
 }
 
 const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {
+	if (editor.isDisposed) return
+
 	const { url } = shape.props
 
 	// Create the asset using the external content manager's createAssetFromUrl method.

packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx

@@ -3,11 +3,13 @@ import {
 	BaseBoxShapeUtil,
 	FileHelpers,
 	HTMLContainer,
+	Image,
 	MediaHelpers,
 	TLImageShape,
 	TLOnDoubleClickHandler,
 	TLShapePartial,
 	Vec,
+	fetch,
 	imageShapeMigrations,
 	imageShapeProps,
 	structuredClone,
@@ -19,7 +21,7 @@ import { HyperlinkButton } from '../shared/HyperlinkButton'
 import { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'
 
 async function getDataURIFromURL(url: string): Promise<string> {
-	const response = await fetch(url, { referrerPolicy: 'strict-origin-when-cross-origin' })
+	const response = await fetch(url)
 	const blob = await response.blob()
 	return FileHelpers.blobToDataUrl(blob)
 }
@@ -70,7 +72,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 				const url = asset.props.src
 				if (!url) return
 
-				const image = new Image()
+				const image = Image()
 				image.onload = () => {
 					if (cancelled) return
 

packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx

@@ -9,6 +9,7 @@ import {
 	TLDefaultFontStyle,
 	TLShapeUtilCanvasSvgDef,
 	debugFlags,
+	fetch,
 	last,
 	useEditor,
 	useValue,
@@ -28,9 +29,7 @@ export function getFontDefForExport(fontStyle: TLDefaultFontStyle): SvgExportDef
 			const fontFaceRule: string = (font as any).$$_fontface
 			if (!url || !fontFaceRule) return null
 
-			const fontFile = await (
+			const fontFile = await (await fetch(url)).blob()
-				await fetch(url, { referrerPolicy: 'strict-origin-when-cross-origin' })
-			).blob()
 			const base64FontFile = await FileHelpers.blobToDataUrl(fontFile)
 
 			const newFontFaceRule = fontFaceRule.replace(url, base64FontFile)

packages/tldraw/src/lib/shapes/text/TextArea.tsx

@@ -40,7 +40,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
 			spellCheck="true"
 			wrap="off"
 			dir="auto"
-			datatype="wysiwyg"
 			defaultValue={text}
 			onFocus={handleFocus}
 			onChange={handleChange}

packages/tldraw/src/lib/shapes/text/toolStates/Idle.ts

@@ -21,6 +21,10 @@ export class Idle extends StateNode {
 		this.editor.setCursor({ type: 'cross', rotation: 0 })
 	}
 
+	override onExit = () => {
+		updateHoveredShapeId.cancel()
+	}
+
 	override onKeyDown: TLEventHandlers['onKeyDown'] = (info) => {
 		if (info.key === 'Enter') {
 			if (this.editor.getInstanceState().isReadonly) return null

packages/tldraw/src/lib/tools/SelectTool/childStates/EditingShape.ts

@@ -23,6 +23,8 @@ export class EditingShape extends StateNode {
 		// Clear the editing shape
 		this.editor.setEditingShape(null)
 
+		updateHoveredShapeId.cancel()
+
 		const shape = this.editor.getShape(editingShapeId)!
 		const util = this.editor.getShapeUtil(shape)
 

packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -41,6 +41,10 @@ export class Idle extends StateNode {
 		this.editor.setCursor({ type: 'default', rotation: 0 })
 	}
 
+	override onExit = () => {
+		updateHoveredShapeId.cancel()
+	}
+
 	override onPointerMove: TLEventHandlers['onPointerMove'] = () => {
 		updateHoveredShapeId(this.editor)
 	}

packages/tldraw/src/lib/tools/selection-logic/updateHoveredShapeId.ts

@@ -32,5 +32,7 @@ function _updateHoveredShapeId(editor: Editor) {
 }
 
 /** @internal */
-export const updateHoveredShapeId =
+export const updateHoveredShapeId = throttle(
-	process.env.NODE_ENV === 'test' ? _updateHoveredShapeId : throttle(_updateHoveredShapeId, 32)
+	_updateHoveredShapeId,
+	process.env.NODE_ENV === 'test' ? 0 : 32
+)

packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx

@@ -240,7 +240,7 @@ export function ExampleDialog({
 						style={{ marginRight: 'auto' }}
 					>
 						<TldrawUiButtonCheck checked={dontShowAgain} />
-						<TldrawUiButtonLabel>Don't show again</TldrawUiButtonLabel>
+						<TldrawUiButtonLabel>Don’t show again</TldrawUiButtonLabel>
 					</TldrawUiButton>
 				)}
 				<TldrawUiButton type="normal" onClick={onCancel}>

packages/tldraw/src/lib/ui/context/asset-urls.tsx

@@ -1,3 +1,4 @@
+import { Image } from '@tldraw/editor'
 import { createContext, useContext, useEffect } from 'react'
 import { TLUiAssetUrls } from '../assetUrls'
 
@@ -16,13 +17,13 @@ export function AssetUrlsProvider({
 }) {
 	useEffect(() => {
 		for (const src of Object.values(assetUrls.icons)) {
-			const image = new Image()
+			const image = Image()
 			image.referrerPolicy = 'strict-origin-when-cross-origin'
 			image.src = src
 			image.decode()
 		}
 		for (const src of Object.values(assetUrls.embedIcons)) {
-			const image = new Image()
+			const image = Image()
 			image.referrerPolicy = 'strict-origin-when-cross-origin'
 			image.src = src
 			image.decode()

packages/tldraw/src/lib/ui/hooks/clipboard/pasteFiles.ts

@@ -1,4 +1,4 @@
-import { Editor, TLExternalContentSource, VecLike } from '@tldraw/editor'
+import { Editor, TLExternalContentSource, VecLike, fetch } from '@tldraw/editor'
 
 /**
  * When the clipboard has a file, create an image shape from the file and paste it into the scene
@@ -14,12 +14,7 @@ export async function pasteFiles(
 	point?: VecLike,
 	sources?: TLExternalContentSource[]
 ) {
-	const blobs = await Promise.all(
+	const blobs = await Promise.all(urls.map(async (url) => await (await fetch(url)).blob()))
-		urls.map(
-			async (url) =>
-				await (await fetch(url, { referrerPolicy: 'strict-origin-when-cross-origin' })).blob()
-		)
-	)
 	const files = blobs.map((blob) => new File([blob], 'tldrawFile', { type: blob.type }))
 
 	editor.mark('paste')

packages/tldraw/src/lib/ui/hooks/clipboard/pasteUrl.ts

@@ -1,4 +1,4 @@
-import { Editor, TLExternalContentSource, VecLike } from '@tldraw/editor'
+import { Editor, TLExternalContentSource, VecLike, fetch } from '@tldraw/editor'
 import { pasteFiles } from './pasteFiles'
 
 /**
@@ -22,7 +22,6 @@ export async function pasteUrl(
 		if (new URL(url).pathname.match(/\.(png|jpe?g|gif|svg|webp)$/i)) {
 			const resp = await fetch(url, {
 				method: 'HEAD',
-				referrerPolicy: 'strict-origin-when-cross-origin',
 			})
 			if (resp.headers.get('content-type')?.match(/^image\//)) {
 				editor.mark('paste')

packages/tldraw/src/lib/ui/hooks/useTranslation/translations.ts

@@ -1,4 +1,4 @@
-import { LANGUAGES } from '@tldraw/editor'
+import { LANGUAGES, fetch } from '@tldraw/editor'
 import { TLUiAssetUrls } from '../../assetUrls'
 import { TLUiTranslationKey } from './TLUiTranslationKey'
 import { DEFAULT_TRANSLATION } from './defaultTranslation'

packages/tldraw/src/lib/utils/export/export.ts

@@ -1,5 +1,6 @@
 import {
 	Editor,
+	Image,
 	PngHelpers,
 	TLShapeId,
 	TLSvgOptions,
@@ -34,7 +35,7 @@ export async function getSvgAsImage(
 	const svgUrl = URL.createObjectURL(new Blob([svgString], { type: 'image/svg+xml' }))
 
 	const canvas = await new Promise<HTMLCanvasElement | null>((resolve) => {
-		const image = new Image()
+		const image = Image()
 		image.crossOrigin = 'anonymous'
 
 		image.onload = async () => {

packages/tldraw/src/lib/utils/tldr/buildFromV1Document.ts

@@ -24,6 +24,7 @@ import {
 	VecModel,
 	clamp,
 	createShapeId,
+	fetch,
 	structuredClone,
 } from '@tldraw/editor'
 import { getArrowBindings } from '../../shapes/arrow/shared'

packages/tldraw/src/lib/utils/tldr/file.ts

@@ -17,6 +17,7 @@ import {
 	UnknownRecord,
 	createTLStore,
 	exhaustiveSwitchError,
+	fetch,
 	partition,
 } from '@tldraw/editor'
 import { TLUiToastsContextType } from '../../ui/context/toasts'
@@ -188,9 +189,7 @@ export async function serializeTldrawJson(store: TLStore): Promise<string> {
 					try {
 						// try to save the asset as a base64 string
 						assetSrcToSave = await FileHelpers.blobToDataUrl(
-							await (
+							await (await fetch(record.props.src)).blob()
-								await fetch(record.props.src, { referrerPolicy: 'strict-origin-when-cross-origin' })
-							).blob()
 						)
 					} catch {
 						// if that fails, just save the original src

packages/tlsync/src/lib/TLSyncClient.ts

@@ -417,6 +417,8 @@ export class TLSyncClient<R extends UnknownRecord, S extends Store<R> = Store<R>
 	close() {
 		this.debug('closing')
 		this.disposables.forEach((dispose) => dispose())
+		this.flushPendingPushRequests.cancel?.()
+		this.scheduleRebase.cancel?.()
 	}
 
 	lastPushedPresenceState: R | null = null

packages/utils/api-report.md

@@ -4,6 +4,9 @@
 
 ```ts
 
+import { default as throttle } from 'lodash.throttle';
+import { default as uniq } from 'lodash.uniq';
+
 // @internal
 export function annotateError(error: unknown, annotations: Partial<ErrorAnnotations>): void;
 
@@ -76,6 +79,10 @@ export type Expand<T> = T extends infer O ? {
     [K in keyof O]: O[K];
 } : never;
 
+// @internal
+function fetch_2(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+export { fetch_2 as fetch }
+
 // @public
 export class FileHelpers {
     static blobToDataUrl(file: Blob): Promise<string>;
@@ -92,7 +99,13 @@ export function filterEntries<Key extends string, Value>(object: {
 };
 
 // @internal
-export function fpsThrottle(fn: () => void): () => void;
+export function fpsThrottle(fn: {
+    (): void;
+    cancel?(): void;
+}): {
+    (): void;
+    cancel?(): void;
+};
 
 // @internal (undocumented)
 export function getErrorAnnotations(error: Error): ErrorAnnotations;
@@ -145,6 +158,10 @@ export function getOwnProperty(obj: object, key: string): unknown;
 // @internal (undocumented)
 export function hasOwnProperty(obj: object, key: string): boolean;
 
+// @internal
+const Image_2: (width?: number, height?: number) => HTMLImageElement;
+export { Image_2 as Image }
+
 // @public
 export type IndexKey = string & {
     __orderKey: true;
@@ -367,8 +384,7 @@ export const STRUCTURED_CLONE_OBJECT_PROTOTYPE: any;
 const structuredClone_2: <T>(i: T) => T;
 export { structuredClone_2 as structuredClone }
 
-// @public
+export { throttle }
-export function throttle<T extends (...args: any) => any>(func: T, limit: number): (...args: Parameters<T>) => ReturnType<T>;
 
 // @internal
 export function throttleToNextFrame(fn: () => void): () => void;
@@ -385,6 +401,8 @@ export class Timers {
     setTimeout(handler: TimerHandler, timeout?: number, ...args: any[]): number;
 }
 
+export { uniq }
+
 // @internal (undocumented)
 export function validateIndexKey(key: string): asserts key is IndexKey;
 

packages/utils/package.json

@@ -49,7 +49,13 @@
 			"^~(.*)": "<rootDir>/src/$1"
 		}
 	},
+	"dependencies": {
+		"lodash.throttle": "^4.1.1",
+		"lodash.uniq": "^4.5.0"
+	},
 	"devDependencies": {
+		"@types/lodash.throttle": "^4.1.7",
+		"@types/lodash.uniq": "^4.5.7",
 		"jest-environment-jsdom": "^29.4.3",
 		"lazyrepo": "0.0.0-alpha.27"
 	}

packages/utils/src/index.ts

@@ -1,3 +1,5 @@
+export { default as throttle } from 'lodash.throttle'
+export { default as uniq } from 'lodash.uniq'
 export { PerformanceTracker } from './lib/PerformanceTracker'
 export {
 	areArraysShallowEqual,
@@ -21,7 +23,7 @@ export {
 export { debounce } from './lib/debounce'
 export { annotateError, getErrorAnnotations, type ErrorAnnotations } from './lib/error'
 export { FileHelpers } from './lib/file'
-export { noop, omitFromStackTrace, throttle } from './lib/function'
+export { noop, omitFromStackTrace } from './lib/function'
 export { getHashForBuffer, getHashForObject, getHashForString, lns } from './lib/hash'
 export { getFirstFromIterable } from './lib/iterable'
 export type { JsonArray, JsonObject, JsonPrimitive, JsonValue } from './lib/json-value'
@@ -32,6 +34,7 @@ export {
 	MediaHelpers,
 } from './lib/media/media'
 export { PngHelpers } from './lib/media/png'
+export { Image, fetch } from './lib/network'
 export { invLerp, lerp, modulate, rng } from './lib/number'
 export {
 	areObjectsShallowEqual,

packages/utils/src/lib/PerformanceTracker.ts

@@ -11,6 +11,7 @@ export class PerformanceTracker {
 	recordFrame = () => {
 		this.frames++
 		if (!this.started) return
+		// eslint-disable-next-line no-restricted-globals
 		this.frame = requestAnimationFrame(this.recordFrame)
 	}
 
@@ -19,6 +20,7 @@ export class PerformanceTracker {
 		this.frames = 0
 		this.started = true
 		if (this.frame !== null) cancelAnimationFrame(this.frame)
+		// eslint-disable-next-line no-restricted-globals
 		this.frame = requestAnimationFrame(this.recordFrame)
 		this.startTime = performance.now()
 	}

packages/utils/src/lib/debounce.ts

@@ -17,6 +17,7 @@ export function debounce<T extends unknown[], U>(
 	let state:
 		| undefined
 		| {
+				// eslint-disable-next-line no-restricted-globals
 				timeout: ReturnType<typeof setTimeout>
 				promise: Promise<U>
 				resolve: (value: U | PromiseLike<U>) => void
@@ -34,6 +35,8 @@ export function debounce<T extends unknown[], U>(
 		}
 		clearTimeout(state!.timeout)
 		state!.latestArgs = args
+		// It's up to the consumer of debounce to call `cancel`
+		// eslint-disable-next-line no-restricted-globals
 		state!.timeout = setTimeout(() => {
 			const s = state!
 			state = undefined

packages/utils/src/lib/file.ts

@@ -1,3 +1,5 @@
+import { fetch } from './network'
+
 /**
  * Helpers for files
  *
@@ -10,11 +12,9 @@ export class FileHelpers {
 	 * from https://stackoverflow.com/a/53817185
 	 */
 	static async dataUrlToArrayBuffer(dataURL: string) {
-		return fetch(dataURL, { referrerPolicy: 'strict-origin-when-cross-origin' }).then(
+		return fetch(dataURL).then(function (result) {
-			function (result) {
+			return result.arrayBuffer()
-				return result.arrayBuffer()
+		})
-			}
-		)
 	}
 
 	/**

packages/utils/src/lib/function.ts

@@ -1,31 +1,3 @@
-/**
- * Throttle a function.
- *
- * @example
- *
- * ```ts
- * const A = throttle(myFunction, 1000)
- * ```
- *
- * @public
- * @see source - https://github.com/bameyrick/throttle-typescript
- */
-export function throttle<T extends (...args: any) => any>(
-	func: T,
-	limit: number
-): (...args: Parameters<T>) => ReturnType<T> {
-	let inThrottle: boolean
-	let lastResult: ReturnType<T>
-	return function (this: any, ...args: any[]): ReturnType<T> {
-		if (!inThrottle) {
-			inThrottle = true
-			setTimeout(() => (inThrottle = false), limit)
-			lastResult = func(...args)
-		}
-		return lastResult
-	}
-}
-
 /**
  * When a function is wrapped in `omitFromStackTrace`, if it throws an error the stack trace won't
  * include the function itself or any stack frames above it. Useful for assertion-style function

packages/utils/src/lib/media/media.ts

@@ -1,3 +1,4 @@
+import { Image } from '../network'
 import { isApngAnimated } from './apng'
 import { isAvifAnimated } from './avif'
 import { isGifAnimated } from './gif'
@@ -65,7 +66,7 @@ export class MediaHelpers {
 	 */
 	static loadImage(src: string): Promise<HTMLImageElement> {
 		return new Promise((resolve, reject) => {
-			const img = new Image()
+			const img = Image()
 			img.onload = () => resolve(img)
 			img.onerror = (e) => {
 				console.error(e)

packages/utils/src/lib/network.ts

@@ -0,0 +1,26 @@
+/**
+ * Just a wrapper around `window.fetch` that sets the `referrerPolicy` to `strict-origin-when-cross-origin`.
+ *
+ * @internal
+ */
+export async function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+	// eslint-disable-next-line no-restricted-properties
+	return window.fetch(input, {
+		// We want to make sure that the referrer is not sent to other domains.
+		referrerPolicy: 'strict-origin-when-cross-origin',
+		...init,
+	})
+}
+
+/**
+ * Just a wrapper around `new Image`, and yeah, it's a bit strange that it's in the network.ts file
+ * but the main concern here is the referrerPolicy and setting it correctly.
+ *
+ * @internal
+ */
+export const Image = (width?: number, height?: number) => {
+	// eslint-disable-next-line no-restricted-properties
+	const img = new window.Image(width, height)
+	img.referrerPolicy = 'strict-origin-when-cross-origin'
+	return img
+}

packages/utils/src/lib/throttle.ts

@@ -26,12 +26,16 @@ function tick() {
 	const elapsed = now - last
 
 	if (time + elapsed < targetTimePerFrame) {
+		// It's up to the consumer of debounce to call `cancel`
+		// eslint-disable-next-line no-restricted-globals
 		frame = requestAnimationFrame(() => {
 			frame = undefined
 			tick()
 		})
 		return
 	}
+	// It's up to the consumer of debounce to call `cancel`
+	// eslint-disable-next-line no-restricted-globals
 	frame = requestAnimationFrame(() => {
 		frame = undefined
 		last = now
@@ -51,12 +55,16 @@ let started = false
  * @returns
  * @internal
  */
-export function fpsThrottle(fn: () => void) {
+export function fpsThrottle(fn: { (): void; cancel?(): void }): {
+	(): void
+	cancel?(): void
+} {
 	if (isTest()) {
+		fn.cancel = () => frame && cancelAnimationFrame(frame)
 		return fn
 	}
 
-	return () => {
+	const throttledFn = () => {
 		if (fpsQueue.includes(fn)) {
 			return
 		}
@@ -68,6 +76,13 @@ export function fpsThrottle(fn: () => void) {
 		}
 		tick()
 	}
+	throttledFn.cancel = () => {
+		const index = fpsQueue.indexOf(fn)
+		if (index > -1) {
+			fpsQueue.splice(index, 1)
+		}
+	}
+	return throttledFn
 }
 
 /**

packages/utils/src/lib/timers.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-properties */
+
 /** @public */
 export class Timers {
 	private timeouts: number[] = []

scripts/api-check.ts

@@ -6,6 +6,8 @@ import { nicelog } from './lib/nicelog'
 import { getAllWorkspacePackages } from './lib/workspace'
 
 const packagesOurTypesCanDependOn = [
+	'@types/lodash.throttle',
+	'@types/lodash.uniq',
 	'@types/react',
 	'@types/react-dom',
 	'eventemitter3',

yarn.lock

@@ -6129,8 +6129,6 @@ __metadata:
     "@tldraw/validate": "workspace:*"
     "@types/benchmark": "npm:^2.1.2"
     "@types/core-js": "npm:^2.5.5"
-    "@types/lodash.throttle": "npm:^4.1.7"
-    "@types/lodash.uniq": "npm:^4.5.7"
     "@types/react-test-renderer": "npm:^18.0.0"
     "@types/wicg-file-system-access": "npm:^2020.9.5"
     "@use-gesture/react": "npm:^10.2.27"
@@ -6144,8 +6142,6 @@ __metadata:
     jest-canvas-mock: "npm:^2.5.2"
     jest-environment-jsdom: "npm:^29.4.3"
     lazyrepo: "npm:0.0.0-alpha.27"
-    lodash.throttle: "npm:^4.1.1"
-    lodash.uniq: "npm:^4.5.0"
     nanoid: "npm:4.0.2"
     react-test-renderer: "npm:^18.2.0"
     resize-observer-polyfill: "npm:^1.5.1"
@@ -6322,8 +6318,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@tldraw/utils@workspace:packages/utils"
   dependencies:
+    "@types/lodash.throttle": "npm:^4.1.7"
+    "@types/lodash.uniq": "npm:^4.5.7"
     jest-environment-jsdom: "npm:^29.4.3"
     lazyrepo: "npm:0.0.0-alpha.27"
+    lodash.throttle: "npm:^4.1.1"
+    lodash.uniq: "npm:^4.5.0"
   languageName: unknown
   linkType: soft