[DX] Use tabs in JSON.stringify (#2674)

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

@@ -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'))
 }

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 (

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>
 	)

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>
 	)

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} />}

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 })

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

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)
 	}
 

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
 	}
 }