Add asset pruning when importing files (#3689)

Adds pruning of unused assets when importing files.

Pulled out the pruning logic from the exporting of tldraw files and we
now use the same logic for both cases.

### Change Type

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

- [x] `sdk` — Changes the tldraw SDK
- [ ] `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

### Release Notes

- Prunes unused assets when loading a tldraw document.

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

@@ -10,7 +10,6 @@ import {
 	SerializedSchemaV2,
 	SerializedStore,
 	T,
-	TLAsset,
 	TLAssetId,
 	TLRecord,
 	TLSchema,
@@ -135,7 +134,8 @@ export function parseTldrawJsonFile({
 	// latest version
 	let migrationResult: MigrationResult<SerializedStore<TLRecord>>
 	try {
-		const storeSnapshot = Object.fromEntries(data.records.map((r) => [r.id, r as TLRecord]))
+		const records = pruneUnusedAssets(data.records as TLRecord[])
+		const storeSnapshot = Object.fromEntries(records.map((r) => [r.id, r]))
 		migrationResult = schema.migrateStoreSnapshot({ store: storeSnapshot, schema: data.schema })
 	} catch (e) {
 		// junk data in the migration
@@ -164,11 +164,19 @@ export function parseTldrawJsonFile({
 	}
 }
 
+function pruneUnusedAssets(records: TLRecord[]) {
+	const usedAssets = new Set<TLAssetId>()
+	for (const record of records) {
+		if (record.typeName === 'shape' && 'assetId' in record.props && record.props.assetId) {
+			usedAssets.add(record.props.assetId)
+		}
+	}
+	return records.filter((r) => r.typeName !== 'asset' || usedAssets.has(r.id))
+}
+
 /** @public */
 export async function serializeTldrawJson(store: TLStore): Promise<string> {
 	const records: TLRecord[] = []
-	const usedAssets = new Set<TLAssetId | null>()
-	const assets: TLAsset[] = []
 	for (const record of store.allRecords()) {
 		switch (record.typeName) {
 			case 'asset':
@@ -188,7 +196,7 @@ export async function serializeTldrawJson(store: TLStore): Promise<string> {
 						assetSrcToSave = record.props.src
 					}
 
-					assets.push({
+					records.push({
 						...record,
 						props: {
 							...record.props,
@@ -196,26 +204,19 @@ export async function serializeTldrawJson(store: TLStore): Promise<string> {
 						},
 					})
 				} else {
-					assets.push(record)
-				}
-				break
-			case 'shape':
-				if ('assetId' in record.props) {
-					usedAssets.add(record.props.assetId)
-				}
 					records.push(record)
+				}
 				break
 			default:
 				records.push(record)
 				break
 		}
 	}
-	const recordsToSave = records.concat(assets.filter((a) => usedAssets.has(a.id)))
 
 	return JSON.stringify({
 		tldrawFileFormatVersion: LATEST_TLDRAW_FILE_FORMAT_VERSION,
 		schema: store.schema.serialize(),
-		records: recordsToSave,
+		records: pruneUnusedAssets(records),
 	})
 }