dynamic sizing better

Author: kentcdodds

exercises/03.complex/03.problem.sizing/worker/mcp/tools.ts

@@ -82,7 +82,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 							iframeUrl: iframeUrl.toString(),
 						},
 						encoding: 'text',
-						// 🐨 add uiMetadata with the key 'preferred-frame-size' with a width of 800px and a height of 600px
+						// 🐨 add uiMetadata with the key 'preferred-frame-size' with a width of 600px and a height of 800px
 					}),
 				],
 			}

exercises/03.complex/03.solution.sizing/worker/mcp/tools.ts

@@ -83,7 +83,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 						},
 						encoding: 'text',
 						uiMetadata: {
-							'preferred-frame-size': ['800px', '600px'],
+							'preferred-frame-size': ['600px', '800px'],
 						},
 					}),
 				],

exercises/03.complex/04.problem.dynamic-sizing/README.mdx

@@ -45,3 +45,6 @@ sequenceDiagram
 </callout-info>
 
 Now implement the size measurement to make the journal viewer fit perfectly.
+
+💰 I'll be in the instructions a bit because this isn't a React workshop, so if
+you're unfamiliar with React, don't worry.

exercises/03.complex/04.problem.dynamic-sizing/app/routes/ui/journal-viewer.tsx

@@ -1,4 +1,10 @@
-import { useEffect, useState, useTransition } from 'react'
+import {
+	useEffect,
+	useState,
+	useTransition,
+	// 💰 you'll need this:
+	useRef,
+} from 'react'
 import {
 	ErrorBoundary,
 	useErrorBoundary,
@@ -17,12 +23,19 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 	const [deletedEntryIds, setDeletedEntryIds] = useState<Set<number>>(
 		() => new Set([]),
 	)
+	// 🐨 create a ref for the root element of this component
+	// 💰 (this isn't a react workshop, here's how you do that):
+	// const rootRef = useRef<HTMLDivElement>(null)
 
 	useEffect(() => {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 
-		// 🐨 get the height of the document.documentElement
-		// 🐨 get the width of the document.documentElement
+		// 🐨 get the root element
+		// 💰 const root = rootRef.current
+		// 🐨 if the root is null, return
+		// 🐨 get the height and width of the root
+		// 💰 const height = root.scrollHeight
+		// 💰 const width = root.scrollWidth
 		// 🐨 call window.parent.postMessage with the type 'ui-size-change' and the payload { height, width }
 		// 🐨 set the targetOrigin to '*'
 	}, [])
@@ -32,7 +45,11 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 	}
 
 	return (
-		<div className="bg-background max-h-[800px] overflow-y-auto p-4">
+		<div
+			// 🐨 add the ref to the div
+			// 💰 ref={rootRef}
+			className="bg-background max-h-[800px] overflow-y-auto p-4"
+		>
 			<div className="mx-auto max-w-4xl">
 				<div className="bg-card mb-6 rounded-xl border p-6 shadow-lg">
 					<h1 className="text-foreground mb-2 text-3xl font-bold">

exercises/03.complex/04.problem.dynamic-sizing/worker/mcp/tools.ts

@@ -83,7 +83,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 						},
 						encoding: 'text',
 						uiMetadata: {
-							'preferred-frame-size': ['800px', '600px'],
+							'preferred-frame-size': ['600px', '800px'],
 						},
 					}),
 				],

exercises/03.complex/04.solution.dynamic-sizing/app/routes/ui/journal-viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useTransition } from 'react'
+import { useEffect, useState, useTransition, useRef } from 'react'
 import {
 	ErrorBoundary,
 	useErrorBoundary,
@@ -17,12 +17,16 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 	const [deletedEntryIds, setDeletedEntryIds] = useState<Set<number>>(
 		() => new Set([]),
 	)
+	const rootRef = useRef<HTMLDivElement>(null)
 
 	useEffect(() => {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 
-		const height = document.documentElement.scrollHeight
-		const width = document.documentElement.scrollWidth
+		const root = rootRef.current
+		if (!root) return
+
+		const height = root.scrollHeight
+		const width = root.scrollWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
@@ -35,7 +39,10 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 	}
 
 	return (
-		<div className="bg-background max-h-[800px] overflow-y-auto p-4">
+		<div
+			ref={rootRef}
+			className="bg-background max-h-[800px] overflow-y-auto p-4"
+		>
 			<div className="mx-auto max-w-4xl">
 				<div className="bg-card mb-6 rounded-xl border p-6 shadow-lg">
 					<h1 className="text-foreground mb-2 text-3xl font-bold">

exercises/03.complex/04.solution.dynamic-sizing/worker/mcp/tools.ts

@@ -83,7 +83,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 						},
 						encoding: 'text',
 						uiMetadata: {
-							'preferred-frame-size': ['800px', '600px'],
+							'preferred-frame-size': ['600px', '800px'],
 						},
 					}),
 				],

exercises/04.interactive/01.problem.links/app/routes/ui/journal-viewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useTransition } from 'react'
+import { useState, useTransition, useRef } from 'react'
 import {
 	ErrorBoundary,
 	useErrorBoundary,
@@ -22,8 +22,8 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 	const [deletedEntryIds, setDeletedEntryIds] = useState<Set<number>>(
 		() => new Set([]),
 	)
-
-	useMcpUiInit()
+	const rootRef = useRef<HTMLDivElement>(null)
+	useMcpUiInit(rootRef)
 
 	const handleEntryDeleted = (entryId: number) => {
 		setDeletedEntryIds((prev) => new Set([...prev, entryId]))

exercises/04.interactive/01.problem.links/app/utils/mcp.ts

@@ -1,17 +1,18 @@
 import { useEffect } from 'react'
 
-export function useMcpUiInit() {
+export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 	useEffect(() => {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
+		if (!rootRef.current) return
 
-		const height = document.documentElement.scrollHeight
-		const width = document.documentElement.scrollWidth
+		const height = rootRef.current.scrollHeight
+		const width = rootRef.current.scrollWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
 			'*',
 		)
-	}, [])
+	}, [rootRef])
 }
 
 // 🐨 export a function called sendLinkMcpMessage that takes a url string and returns a promise

exercises/04.interactive/01.problem.links/worker/mcp/tools.ts

@@ -83,7 +83,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 						},
 						encoding: 'text',
 						uiMetadata: {
-							'preferred-frame-size': ['800px', '600px'],
+							'preferred-frame-size': ['600px', '800px'],
 						},
 					}),
 				],