Greatly speed up CopyToClipboard by having it accept a function to ge…

…nerate its value.
zemn-me · Apr 25, 2024 · 653a7ff · 653a7ff
1 parent bd7a916
commit 653a7ff
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/project/zemn.me/app/experiments/factorio/blueprint/parse/client.tsx b/project/zemn.me/app/experiments/factorio/blueprint/parse/client.tsx
@@ -77,7 +77,7 @@ export function Client() {
 							<li>
 								JSON{' '}
 								<CopyToClipboard
-									text={JSON.stringify(bw[Ok])}
+									text={() => JSON.stringify(bw[Ok])}
 								/>
 								<PrettyJSON value={bw[Ok]} />
 							</li>

diff --git a/ts/factorio/react/blueprint.tsx b/ts/factorio/react/blueprint.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { extent } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
 import { z } from 'zod';
@@ -126,7 +127,7 @@ export function DisplayBlueprintBook({ book }: DisplayBlueprintBookProps) {
 				</ol>
 			) : null}
 
-			<CopyToClipboard text={MarshalBlueprintBookString(book)} />
+			<CopyToClipboard text={() => MarshalBlueprintBookString(book)} />
 		</article>
 	);
 }
@@ -147,7 +148,7 @@ export function DisplayBlueprint({ blueprint }: DisplayBlueprintProps) {
 				</header>
 			) : null}
 			{blueprint.description ? <p>{blueprint.description}</p> : null}
-			<CopyToClipboard text={MarshalBlueprintString(blueprint)} />
+			<CopyToClipboard text={() => MarshalBlueprintString(blueprint)} />
 			<RenderBlueprint blueprint={blueprint} />
 		</article>
 	);

diff --git a/ts/next.js/index.tsx b/ts/next.js/index.tsx
@@ -46,7 +46,9 @@ export const DefaultContentSecurityPolicy: CspPolicy = {
 		'https://*.google-analytics.com',
 		'https://*.doubleclick.net',
 	]),
-	'require-trusted-types-for': new Set(["'script'"]),
+	...(process.env.NODE_ENV == 'development'
+		? {}
+		: { 'require-trusted-types-for': new Set(["'script'"]) }),
 	'script-src': new Set([
 		"'self'",
 		"'unsafe-inline'", // https://github.com/vercel/next.js/discussions/54907#discussioncomment-8178117

diff --git a/ts/react/CopyToClipboard/CopyToClipboard.tsx b/ts/react/CopyToClipboard/CopyToClipboard.tsx
@@ -3,12 +3,12 @@ import { useMutation } from '@tanstack/react-query';
 import { MouseEvent, useCallback } from 'react';
 
 export interface CopyToClipboardProps {
-	readonly text: string;
+	readonly text: () => string;
 }
 
 export function CopyToClipboard(props: CopyToClipboardProps) {
 	const mutation = useMutation({
-		mutationFn: () => navigator.clipboard.writeText(props.text),
+		mutationFn: () => navigator.clipboard.writeText(props.text()),
 	});
 
 	const onClick = useCallback(