From a1e242ae3ad9cd98bc3f9da2f0c3a63a9739ea78 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Sun, 28 Jan 2024 21:13:47 +0000
Subject: [PATCH] [DX] Use tabs in JSON.stringify (#2674)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Occasionally the auto-built items, such as Sections.json, will be
flagged as having changes in a commit. This is because we generate that
file using spaces but our formatting uses tabs.

This PR changes all JSON.stringify({}, null, 2) to JSON.stringify({},
null, '\t'). Problem solved!

### Change Type

- [x] `patch` — Bug fix
---
 apps/docs/scripts/functions/createApiMarkdown.ts              | 2 +-
 .../src/examples/canvas-events/CanvasEventsExample.tsx        | 2 +-
 .../src/examples/meta-on-change/OnChangeShapeMetaExample.tsx  | 2 +-
 .../src/examples/meta-on-create/OnCreateShapeMetaExample.tsx  | 2 +-
 apps/examples/src/examples/shape-meta/ShapeMetaExample.tsx    | 2 +-
 apps/huppy/pages/api/dev/simulate.ts                          | 2 +-
 apps/huppy/pages/deliveries.tsx                               | 2 +-
 apps/vscode/extension/src/TldrawDocument.ts                   | 2 +-
 packages/tlsync/src/test/syncFuzz.test.ts                     | 4 ++--
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/docs/scripts/functions/createApiMarkdown.ts b/apps/docs/scripts/functions/createApiMarkdown.ts
index 850b87ad6..bab0f8ab6 100644
--- a/apps/docs/scripts/functions/createApiMarkdown.ts
+++ b/apps/docs/scripts/functions/createApiMarkdown.ts
@@ -89,5 +89,5 @@ export async function createApiMarkdown() {
 		1
 	)
 	sectionsJson.push(apiInputSection)
-	fs.writeFileSync(sectionsJsonPath, JSON.stringify(sectionsJson, null, 2))
+	fs.writeFileSync(sectionsJsonPath, JSON.stringify(sectionsJson, null, '\t'))
 }
diff --git a/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx b/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx
index 1bf66c86a..d0c018992 100644
--- a/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx
+++ b/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx
@@ -8,7 +8,7 @@ export default function CanvasEventsExample() {
 	const [events, setEvents] = useState<string[]>([])
 
 	const handleEvent = useCallback((data: TLEventInfo) => {
-		setEvents((events) => [JSON.stringify(data, null, 2), ...events.slice(0, 100)])
+		setEvents((events) => [JSON.stringify(data, null, '\t'), ...events.slice(0, 100)])
 	}, [])
 
 	return (
diff --git a/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx b/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx
index 10e4af301..36a50527a 100644
--- a/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx
+++ b/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx
@@ -46,7 +46,7 @@ export const MetaUiHelper = track(function MetaUiHelper() {
 	return (
 		<pre style={{ position: 'absolute', zIndex: 300, top: 64, left: 12, margin: 0 }}>
 			{onlySelectedShape
-				? JSON.stringify(onlySelectedShape.meta, null, 2)
+				? JSON.stringify(onlySelectedShape.meta, null, '\t')
 				: 'Select one shape to see its meta data.'}
 		</pre>
 	)
diff --git a/apps/examples/src/examples/meta-on-create/OnCreateShapeMetaExample.tsx b/apps/examples/src/examples/meta-on-create/OnCreateShapeMetaExample.tsx
index 1aa408a99..2d11cc26f 100644
--- a/apps/examples/src/examples/meta-on-create/OnCreateShapeMetaExample.tsx
+++ b/apps/examples/src/examples/meta-on-create/OnCreateShapeMetaExample.tsx
@@ -35,7 +35,7 @@ export const MetaUiHelper = track(function MetaUiHelper() {
 	return (
 		<pre style={{ position: 'absolute', zIndex: 300, top: 64, left: 12, margin: 0 }}>
 			{onlySelectedShape
-				? JSON.stringify(onlySelectedShape.meta, null, 2)
+				? JSON.stringify(onlySelectedShape.meta, null, '\t')
 				: 'Select one shape to see its meta data.'}
 		</pre>
 	)
diff --git a/apps/examples/src/examples/shape-meta/ShapeMetaExample.tsx b/apps/examples/src/examples/shape-meta/ShapeMetaExample.tsx
index c55cb75f8..33ad1dd08 100644
--- a/apps/examples/src/examples/shape-meta/ShapeMetaExample.tsx
+++ b/apps/examples/src/examples/shape-meta/ShapeMetaExample.tsx
@@ -43,7 +43,7 @@ export const ShapeLabelUiWithHelper = track(function ShapeLabelUiWithHelper() {
 		<div style={{ position: 'absolute', zIndex: 300, top: 64, left: 12 }}>
 			<pre style={{ margin: '0 0 16px 0' }}>
 				{onlySelectedShape
-					? JSON.stringify(onlySelectedShape.meta, null, 2)
+					? JSON.stringify(onlySelectedShape.meta, null, '\t')
 					: 'Select one shape to see / edit its meta data.'}
 			</pre>
 			{onlySelectedShape && <input value={onlySelectedShape.meta.label} onChange={onChange} />}
diff --git a/apps/huppy/pages/api/dev/simulate.ts b/apps/huppy/pages/api/dev/simulate.ts
index 575b7f66f..743c7b315 100644
--- a/apps/huppy/pages/api/dev/simulate.ts
+++ b/apps/huppy/pages/api/dev/simulate.ts
@@ -29,7 +29,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 			name: delivery.event,
 			payload: delivery.request.payload,
 		} as NamedEvent)
-		return res.json({ message: JSON.stringify(messages, null, 2) })
+		return res.json({ message: JSON.stringify(messages, null, '\t') })
 	} catch (err: any) {
 		console.log(err.stack)
 		return res.json({ message: err.message })
diff --git a/apps/huppy/pages/deliveries.tsx b/apps/huppy/pages/deliveries.tsx
index c23d314fa..95a8f1db4 100644
--- a/apps/huppy/pages/deliveries.tsx
+++ b/apps/huppy/pages/deliveries.tsx
@@ -97,7 +97,7 @@ export default function Deliveries({ deliveries, cursor }: Props) {
 				{selectedDelivery && selectedDelivery.data ? (
 					<div className="relative flex-auto overflow-hidden text-sm">
 						<pre className="absolute inset-0 overflow-auto whitespace-pre-wrap p-4">
-							{JSON.stringify(selectedDelivery.data, null, 2)}
+							{JSON.stringify(selectedDelivery.data, null, '\t')}
 						</pre>
 						<div className="absolute right-8 top-4 flex gap-3">
 							<button
diff --git a/apps/vscode/extension/src/TldrawDocument.ts b/apps/vscode/extension/src/TldrawDocument.ts
index a4aca24fa..3f010eb4c 100644
--- a/apps/vscode/extension/src/TldrawDocument.ts
+++ b/apps/vscode/extension/src/TldrawDocument.ts
@@ -115,7 +115,7 @@ export class TLDrawDocument implements vscode.CustomDocument {
 	}
 
 	private async writeToResource(targetResource: vscode.Uri) {
-		const fileContents = Buffer.from(JSON.stringify(this.documentData, null, 2), 'utf8')
+		const fileContents = Buffer.from(JSON.stringify(this.documentData, null, '\t'), 'utf8')
 		await vscode.workspace.fs.writeFile(targetResource, fileContents)
 	}
 
diff --git a/packages/tlsync/src/test/syncFuzz.test.ts b/packages/tlsync/src/test/syncFuzz.test.ts
index 70f8166f6..5b1b4251c 100644
--- a/packages/tlsync/src/test/syncFuzz.test.ts
+++ b/packages/tlsync/src/test/syncFuzz.test.ts
@@ -239,7 +239,7 @@ function runTest(seed: number) {
 
 		const [first, ...rest] = peers.map((peer) => peer.editor?.store.serialize('document'))
 
-		// writeFileSync(`./test-results.${seed}.json`, JSON.stringify(ops, null, 2))
+		// writeFileSync(`./test-results.${seed}.json`, JSON.stringify(ops, null, '\t'))
 
 		expect(first).toEqual(rest[0])
 		// all snapshots should be the same
@@ -256,7 +256,7 @@ function runTest(seed: number) {
 				2
 			)
 		)
-		console.error('ops', JSON.stringify(ops, null, 2))
+		console.error('ops', JSON.stringify(ops, null, '\t'))
 		throw e
 	}
 }