great progress

exercises/01.exercises/04.problem.async-components/README.mdx

@@ -1 +1,8 @@
 # Async Components
+
+<callout-success>
+	Once you have the async components streaming, you should take a look at the
+	HTML the server is sending. You'll find some interesting hidden divs and some
+	inline script tags. These are used to put the streamed-in content in the right
+	place!
+</callout-success>

exercises/01.exercises/07.problem.module-graph/.gitignore

@@ -0,0 +1 @@
+node_modules

exercises/01.exercises/07.problem.module-graph/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+built_node_modules

exercises/01.exercises/07.problem.module-graph/.prettierrc

@@ -0,0 +1,28 @@
+{
+	"arrowParens": "avoid",
+	"bracketSameLine": false,
+	"bracketSpacing": true,
+	"embeddedLanguageFormatting": "auto",
+	"endOfLine": "lf",
+	"htmlWhitespaceSensitivity": "css",
+	"insertPragma": false,
+	"jsxSingleQuote": false,
+	"printWidth": 80,
+	"proseWrap": "always",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": false,
+	"singleAttributePerLine": false,
+	"singleQuote": true,
+	"tabWidth": 2,
+	"trailingComma": "all",
+	"useTabs": true,
+	"overrides": [
+		{
+			"files": ["**/*.json"],
+			"options": {
+				"useTabs": false
+			}
+		}
+	]
+}

exercises/01.exercises/07.problem.module-graph/README.mdx

@@ -0,0 +1,7 @@
+# Split Module Graph
+
+<callout-success>
+	NOTE: Now that we have the RSC module graph with `react-server-dom-esm`
+	rendering our app, be sure to take a look at the output by opening the RSC
+	server directly in the browser and check out the serialized JSX!
+</callout-success>

exercises/01.exercises/07.problem.module-graph/db/ship-api.js

@@ -0,0 +1,47 @@
+import fs from 'node:fs/promises'
+
+const shipData = JSON.parse(
+	String(await fs.readFile(new URL('./ships.json', import.meta.url))),
+)
+
+export async function searchShips({
+	search,
+	delay = Math.random() * 200 + 300,
+}) {
+	const endTime = Date.now() + delay
+	const ships = shipData
+		.filter(ship => ship.name.toLowerCase().includes(search.toLowerCase()))
+		.slice(0, 13)
+	await new Promise(resolve => setTimeout(resolve, endTime - Date.now()))
+	return {
+		ships: ships.map(ship => ({ name: ship.name, id: ship.id })),
+	}
+}
+
+export async function getShip({ shipId, delay = Math.random() * 200 + 300 }) {
+	const endTime = Date.now() + delay
+	if (!shipId) {
+		throw new Error('No shipId provided')
+	}
+	const ship = shipData.find(ship => ship.id === shipId)
+	await new Promise(resolve => setTimeout(resolve, endTime - Date.now()))
+	if (!ship) {
+		throw new Error(`No ship with the id "${shipId}"`)
+	}
+	return ship
+}
+
+export async function updateShipName({
+	shipId,
+	shipName,
+	delay = Math.random() * 200 + 300,
+}) {
+	const endTime = Date.now() + delay
+	const ship = shipData.find(ship => ship.id === shipId)
+	await new Promise(resolve => setTimeout(resolve, endTime - Date.now()))
+	if (!ship) {
+		throw new Error(`No ship with the id "${shipId}"`)
+	}
+	ship.name = shipName
+	return ship
+}