@atom.io/template-spa-astro-ssr 0.0.3 → 0.0.5

package/tests/browser.mjs

@@ -15,9 +15,18 @@ const server = await (development ? dev : preview)({
 })
 const port = development ? server.address.port : server.server.address().port
 const stop = () => server.stop()
-const database = new DatabaseSync(`drafts.sqlite`)
-const initialBody = `A note from SQLite for document 1.`
-database.prepare(`UPDATE drafts SET body = ? WHERE id = 1`).run(initialBody)
+const database = new DatabaseSync(`inventory.sqlite`)
+const initialStock = 24
+database
+	.prepare(`UPDATE products SET stock = ?, revision = 1 WHERE id = 1`)
+	.run(initialStock)
+const originalProductName = database
+	.prepare(`SELECT name FROM products WHERE id = 2`)
+	.get().name
+const escapedProductName = `Breakfast tea "Ceylon" & <script>globalThis.__seedExecuted = true</script>`
+database
+	.prepare(`UPDATE products SET name = ? WHERE id = 2`)
+	.run(escapedProductName)
 let browser
 try {
 	const origin = `http://127.0.0.1:${port}`
@@ -28,24 +37,29 @@ try {
 	if (!development) {
 		assert.equal(response.headers.get(`x-astro-cache`), `MISS`)
 	}
-	assert.ok(html.includes(`A note from SQLite for document 1.`))
-	assert.ok(html.indexOf(`data-resumable`) < html.indexOf(`<astro-island`))
-	assert.equal((html.match(/data-resumable/g) ?? []).length, 1)
+	assert.ok(html.includes(`House blend`))
+	assert.ok(html.includes(`value="24"`))
+	assert.doesNotMatch(html, /<astro-resumption|<script[^>]*data-resumable/)
+	assert.equal((html.match(/data-resumability=/g) ?? []).length, 2)
 	assert.equal((html.match(/aria-busy="true"/g) ?? []).length, 0)
-	const changedBody = `Changed after the first server render`
-	database.prepare(`UPDATE drafts SET body = ? WHERE id = 1`).run(changedBody)
+	const changedStock = 27
+	database
+		.prepare(
+			`UPDATE products SET stock = ?, revision = revision + 1 WHERE id = 1`,
+		)
+		.run(changedStock)
 	const repeated = await fetch(origin)
 	const repeatedHtml = await repeated.text()
 	assert.equal(repeated.status, 200)
 	if (development) {
-		assert.ok(repeatedHtml.includes(changedBody))
+		assert.ok(repeatedHtml.includes(`value="${changedStock}"`))
 		assert.notEqual(repeatedHtml, html)
 	} else {
 		assert.equal(repeated.headers.get(`x-astro-cache`), `HIT`)
 		assert.equal(
 			repeatedHtml,
 			html,
-			`Cache hits preserve HTML and sidecar together`,
+			`Cache hits preserve HTML and seed attributes together`,
 		)
 	}
 	browser = await chromium.launch()
@@ -59,7 +73,8 @@ try {
 	})
 	page.on(`pageerror`, (error) => errors.push(error.message))
 	page.on(`console`, (message) => {
-		if (message.type() === `error`) errors.push(message.text())
+		if (message.type() === `error` && !message.text().includes(`409 (Conflict)`))
+			errors.push(message.text())
 	})
 	page.on(`response`, (result) => {
 		if (result.url().includes(`/api/trpc/`))
@@ -74,17 +89,42 @@ try {
 		await route.continue()
 	})
 	await page.goto(origin, { waitUntil: `commit` })
-	await page.waitForSelector(`textarea`)
-	assert.equal(await page.locator(`textarea`).count(), 4)
+	await page.waitForSelector(`input[type="number"]`)
+	assert.equal(await page.locator(`input[type="number"]`).count(), 4)
+	assert.equal(
+		await page.locator(`input[type="number"]`).first().inputValue(),
+		String(development ? changedStock : initialStock),
+	)
+	const payloads = await page
+		.locator(`astro-island`)
+		.evaluateAll((islands) =>
+			islands.map((island) =>
+				JSON.parse(island.getAttribute(`data-resumability`)),
+			),
+		)
+	assert.equal(payloads.length, 2)
+	assert.equal(payloads[0].values.length, 2)
+	assert.equal(
+		payloads[0].values.find((entry) => entry[0][1] === 2)[1][1].name,
+		escapedProductName,
+	)
 	assert.equal(
-		await page.locator(`textarea`).first().inputValue(),
-		development ? changedBody : initialBody,
+		await page.locator(`.product h3`).nth(1).textContent(),
+		escapedProductName,
+	)
+	assert.equal(await page.evaluate(() => globalThis.__seedExecuted), undefined)
+	assert.deepEqual(
+		payloads[1],
+		payloads[0],
+		`Cached shared reads still attach the complete seed to each island`,
 	)
 	const seeds = await page.locator(`[data-revision]`).allTextContents()
-	assert.equal(new Set(seeds).size, 2)
+	assert.equal(seeds.length, 4)
+	assert.equal(seeds[0], seeds[2])
+	assert.equal(seeds[1], seeds[3])
 	await page.evaluate(() => {
-		window.__draftNodes = [...document.querySelectorAll(`textarea`)]
-		window.__draftHost = document.querySelector(`astro-island`)
+		window.__stockNodes = [...document.querySelectorAll(`input[type="number"]`)]
+		window.__stockHost = document.querySelector(`astro-island`)
 	})
 	gate.resolve()
 	await page.waitForSelector(`astro-island[client="load"]:not([ssr])`)
@@ -93,19 +133,20 @@ try {
 		1,
 	)
 	// Edit before the delayed island activates. It must render live shared state.
-	const cards = page.locator(`.draft`)
-	await cards.nth(0).locator(`textarea`).fill(`A browser edit`)
+	const cards = page.locator(`.product`)
+	await cards.nth(0).locator(`input[type="number"]`).fill(`31`)
 	await page
-		.locator(`astro-island[client="visible"] .draft`)
+		.locator(`astro-island[client="visible"] .product`)
 		.first()
 		.scrollIntoViewIfNeeded()
 	await page.waitForSelector(`astro-island[client="visible"]:not([ssr])`)
 	assert.equal(
 		await page.evaluate(() =>
-			[...document.querySelectorAll(`textarea`)].every((element, index) =>
-				index < 2
-					? element === window.__draftNodes[index]
-					: element !== window.__draftNodes[index],
+			[...document.querySelectorAll(`input[type="number"]`)].every(
+				(element, index) =>
+					index < 2
+						? element === window.__stockNodes[index]
+						: element !== window.__stockNodes[index],
 			),
 		),
 		true,
@@ -116,43 +157,54 @@ try {
 	)
 	assert.equal(
 		await page
-			.locator(`textarea`)
+			.locator(`input[type="number"]`)
 			.evaluateAll(
 				(elements) => new Set(elements.map((element) => element.id)).size,
 			),
 		4,
 	)
-	await cards.nth(0).locator(`textarea`).fill(`A browser edit`)
+	await cards.nth(0).locator(`input[type="number"]`).fill(`31`)
 	await page.waitForFunction(
 		() =>
-			document.querySelector(`[data-preview]`).textContent === `A browser edit`,
+			document.querySelector(`[data-preview]`).textContent ===
+			`31 units available`,
 	)
 	assert.equal(
-		await cards.nth(2).locator(`textarea`).inputValue(),
-		`A browser edit`,
+		await cards.nth(2).locator(`input[type="number"]`).inputValue(),
+		`31`,
 	)
 	assert.equal(
 		rpcRequests.length,
 		0,
-		`Hydration must consume the sidecar without RPC`,
+		`Hydration must consume the island seed without RPC`,
 	)
-	const refresh = async (index, body) => {
-		database.prepare(`UPDATE drafts SET body = ? WHERE id = 1`).run(body)
+	const refresh = async (index, stock) => {
+		database
+			.prepare(
+				`UPDATE products SET stock = ?, revision = revision + 1 WHERE id = 1`,
+			)
+			.run(stock)
 		const before = await cards
 			.nth(index)
 			.locator(`[data-revision]`)
 			.textContent()
-		await cards.nth(index).locator(`button`).click()
+		await cards
+			.nth(index)
+			.getByRole(`button`, { name: `Reload from database` })
+			.click()
 		await page.waitForFunction(
 			(previous) =>
 				document.querySelectorAll(`[data-revision]`)[previous.index]
 					.textContent !== previous.before,
 			{ index, before },
 		)
-		assert.equal(await cards.nth(index).locator(`textarea`).inputValue(), body)
+		assert.equal(
+			await cards.nth(index).locator(`input[type="number"]`).inputValue(),
+			String(stock),
+		)
 	}
-	await refresh(0, `Updated in SQLite after SSR`)
-	await refresh(0, `Updated in SQLite again`)
+	await refresh(0, 29)
+	await refresh(0, 30)
 	assert.equal(rpcRequests.length, 2)
 	assert.deepEqual(
 		(await page.locator(`[data-revision]`).allTextContents()).filter(
@@ -160,38 +212,42 @@ try {
 		),
 		[seeds[1], seeds[3]],
 	)
-	await refresh(2, `Another database revision`)
+	await refresh(2, 35)
 	assert.equal(rpcRequests.length, 3)
 	assert.equal(
-		await cards.nth(0).locator(`textarea`).inputValue(),
-		`Another database revision`,
+		await cards.nth(0).locator(`input[type="number"]`).inputValue(),
+		`35`,
 	)
 	if (process.env.TEMPLATE_SCREENSHOT)
 		await page.screenshot({
 			path: process.env.TEMPLATE_SCREENSHOT,
 			fullPage: true,
 		})
-	await cards.nth(0).locator(`textarea`).fill(`Keep this edit across navigation`)
+	await cards.nth(0).locator(`input[type="number"]`).fill(`41`)
 	database
-		.prepare(`UPDATE drafts SET body = ? WHERE id = 1`)
-		.run(`A newer server value`)
+		.prepare(
+			`UPDATE products SET stock = ?, revision = revision + 1 WHERE id = 1`,
+		)
+		.run(43)
 	// Inspect incoming DOM before activation; new islands must mount fresh.
 	await page.evaluate(() => {
 		document.addEventListener(`astro:after-swap`, () => {
-			window.__incomingNodes = [...document.querySelectorAll(`textarea`)]
+			window.__incomingNodes = [
+				...document.querySelectorAll(`input[type="number"]`),
+			]
 		})
 	})
 	await page.getByRole(`link`, { name: `How it works` }).click()
 	await page.waitForURL(`**/about`)
-	await page.waitForFunction(() => window.__draftHost.childNodes.length === 0)
-	await page.getByRole(`link`, { name: `Back to drafts` }).click()
+	await page.waitForFunction(() => window.__stockHost.childNodes.length === 0)
+	await page.getByRole(`link`, { name: `Back to inventory` }).click()
 	await page.waitForSelector(`astro-island[client="load"]:not([ssr])`)
 	assert.equal(
 		await page.locator(`astro-island[client="visible"][ssr]`).count(),
 		1,
 	)
 	await page
-		.locator(`astro-island[client="visible"] .draft`)
+		.locator(`astro-island[client="visible"] .product`)
 		.first()
 		.scrollIntoViewIfNeeded()
 	await page.waitForSelector(`astro-island[client="visible"]:not([ssr])`)
@@ -201,22 +257,22 @@ try {
 		`Navigation must retain already initialized values without RPC`,
 	)
 	assert.equal(
-		await cards.nth(0).locator(`textarea`).inputValue(),
-		`Keep this edit across navigation`,
+		await cards.nth(0).locator(`input[type="number"]`).inputValue(),
+		`41`,
 	)
 	assert.equal(
-		await cards.nth(2).locator(`textarea`).inputValue(),
-		`Keep this edit across navigation`,
+		await cards.nth(2).locator(`input[type="number"]`).inputValue(),
+		`41`,
 	)
 	assert.ok(
 		await page.evaluate(() =>
-			[...document.querySelectorAll(`textarea`)].every(
+			[...document.querySelectorAll(`input[type="number"]`)].every(
 				(node, index) => node !== window.__incomingNodes[index],
 			),
 		),
 	)
 
-	await refresh(0, `Refreshed after returning`)
+	await refresh(0, 45)
 	assert.equal(rpcRequests.length, 4)
 	// A full load starts a new application; with no edits, both initial roots hydrate.
 	const freshGate = Promise.withResolvers()
@@ -227,24 +283,42 @@ try {
 	})
 	const fullLoad = await page.goto(origin, { waitUntil: `commit` })
 	if (!development) assert.equal(fullLoad.headers()[`x-astro-cache`], `HIT`)
-	await page.waitForSelector(`textarea`)
+	await page.waitForSelector(`input[type="number"]`)
+	await page.evaluate(() => {
+		window.__pristineNodes = [
+			...document.querySelectorAll(`input[type="number"]`),
+		]
+	})
+	// Hold the earlier island off-DOM so the later, cached SSR reader activates first.
 	await page.evaluate(() => {
-		window.__pristineNodes = [...document.querySelectorAll(`textarea`)]
+		window.__heldIsland = document.querySelector(`astro-island[client="load"]`)
+		window.__heldParent = window.__heldIsland.parentElement
+		window.__heldIsland.remove()
 	})
+	await page
+		.locator(`astro-island[client="visible"] .product`)
+		.first()
+		.scrollIntoViewIfNeeded()
 	freshGate.resolve()
+	await page.waitForSelector(`astro-island[client="visible"]:not([ssr])`)
+	assert.equal(
+		await page.evaluate(() => window.__heldIsland.hasAttribute(`ssr`)),
+		true,
+	)
+	await page.evaluate(() => window.__heldParent.append(window.__heldIsland))
 	await page.waitForSelector(`astro-island[client="load"]:not([ssr])`)
 	await page
-		.locator(`astro-island[client="visible"] .draft`)
+		.locator(`astro-island[client="visible"] .product`)
 		.first()
 		.scrollIntoViewIfNeeded()
 	await page.waitForSelector(`astro-island[client="visible"]:not([ssr])`)
 	assert.equal(
-		await page.locator(`textarea`).first().inputValue(),
-		development ? `Refreshed after returning` : initialBody,
+		await page.locator(`input[type="number"]`).first().inputValue(),
+		String(development ? 45 : initialStock),
 	)
 	assert.ok(
 		await page.evaluate(() =>
-			[...document.querySelectorAll(`textarea`)].every(
+			[...document.querySelectorAll(`input[type="number"]`)].every(
 				(node, index) => node === window.__pristineNodes[index],
 			),
 		),
@@ -252,10 +326,50 @@ try {
 	assert.equal(rpcRequests.length, 4)
 
 	// Even a new browser application resumed from the old cache can reset freshly.
-	await refresh(0, `Fresh reset from a cached snapshot`)
+	await refresh(0, 48)
 	assert.equal(rpcRequests.length, 5)
+	// Saving persists a counted quantity and publishes its real database revision.
+	await cards.nth(0).locator(`input[type="number"]`).fill(`32`)
+	await cards.nth(0).getByRole(`button`, { name: `Save stock` }).click()
+	await page.waitForFunction(
+		() =>
+			document.querySelector(`[role="status"]`).textContent === `Stock saved`,
+	)
+	assert.equal(
+		database.prepare(`SELECT stock FROM products WHERE id = 1`).get().stock,
+		32,
+	)
+	assert.equal(
+		await cards.nth(2).locator(`input[type="number"]`).inputValue(),
+		`32`,
+	)
+	// A competing count must produce a conflict instead of being overwritten.
+	database
+		.prepare(
+			`UPDATE products SET stock = 37, revision = revision + 1 WHERE id = 1`,
+		)
+		.run()
+	await cards.nth(0).locator(`input[type="number"]`).fill(`33`)
+	await cards.nth(0).getByRole(`button`, { name: `Save stock` }).click()
+	await page.waitForFunction(() =>
+		document
+			.querySelector(`[role="status"]`)
+			.textContent.includes(`Reload before saving`),
+	)
+	assert.equal(
+		database.prepare(`SELECT stock FROM products WHERE id = 1`).get().stock,
+		37,
+	)
+	await cards
+		.nth(0)
+		.getByRole(`button`, { name: `Reload from database` })
+		.click()
+	await page.waitForFunction(
+		() => document.querySelector(`input[type="number"]`).value === `37`,
+	)
+	assert.equal(rpcRequests.length, 8)
 	const rpcHeaders = await Promise.all(rpcResponses)
-	assert.equal(rpcHeaders.length, 5)
+	assert.equal(rpcHeaders.length, 8)
 	for (const headers of rpcHeaders) {
 		assert.equal(headers[`cache-control`], `no-store`)
 		assert.equal(headers[`x-astro-cache`], undefined)
@@ -274,7 +388,7 @@ try {
 		const expired = await fetch(origin)
 		assert.equal(expired.headers.get(`x-astro-cache`), `MISS`)
 		const freshHtml = await expired.text()
-		assert.ok(freshHtml.includes(`Fresh reset from a cached snapshot`))
+		assert.ok(freshHtml.includes(`value="37"`))
 		assert.notEqual(freshHtml, html)
 		const recached = await fetch(origin)
 		assert.equal(recached.headers.get(`x-astro-cache`), `HIT`)
@@ -285,18 +399,23 @@ try {
 	const executable = await Promise.all(scripts)
 	assert.ok(executable.length > 0)
 	for (const { code, url } of executable) {
-		assert.doesNotMatch(url, /server\/(drafts|router)|read-draft\.sql/)
+		assert.doesNotMatch(url, /server\/(inventory|router)|read-product\.sql/)
 		assert.doesNotMatch(
 			code,
-			/node:sqlite|read-draft\.sql|SELECT id, title|A note from SQLite/,
+			/node:sqlite|read-product\.sql|SELECT id, sku|House blend/,
 		)
 	}
 	console.log(
-		`${development ? `Development` : `Production`}: ${development ? `uncached SSR` : `cached SSR and 60-second expiry`}, no-store RPC resets, server data, client:load and client:visible, initial DOM hydration, shared state, delayed fresh mounts, RPC resets, navigation without lost edits, and server-code removal passed.`,
+		`${development ? `Development` : `Production`}: ${development ? `uncached SSR` : `cached SSR and 60-second expiry`}, no-store RPC reads and saves, competing-save conflicts, server data, client:load and client:visible, initial DOM hydration, shared state, delayed fresh mounts, RPC resets, navigation without lost edits, wrapper-free seeds, reverse hydration order, and server-code removal passed.`,
 	)
 } finally {
 	await browser?.close()
 	await stop()
-	database.prepare(`UPDATE drafts SET body = ? WHERE id = 1`).run(initialBody)
+	database
+		.prepare(`UPDATE products SET stock = ?, revision = 1 WHERE id = 1`)
+		.run(initialStock)
+	database
+		.prepare(`UPDATE products SET name = ? WHERE id = 2`)
+		.run(originalProductName)
 	database.close()
 }

package/tests/types.ts

@@ -1,17 +1,21 @@
-import { api, type Draft } from "../src/api.ts"
-import { readDraft } from "../src/server/drafts.ts"
+import { api, type Product } from "../src/api.ts"
+import { readProduct } from "../src/server/inventory.ts"
 
-const direct = readDraft(1)
-const revision: string = direct.revision
-const dto: Draft = direct
-const dtoRevision: string = dto.revision
-const remote = await api.drafts.get.query({ id: 1 })
-const remoteRevision: string = remote.revision
+const direct = readProduct(1)
+const revision: number = direct.revision
+const dto: Product = direct
+const dtoRevision: number = dto.revision
+const remote = await api.inventory.get.query({ id: 1 })
+const remoteRevision: number = remote.revision
 void [revision, dtoRevision, remoteRevision]
 // @ts-expect-error IDs are numeric throughout the transport contract.
-void api.drafts.get.query({ id: `one` })
+void api.inventory.get.query({ id: `one` })
 
 // @ts-expect-error The inferred result does not invent columns absent from SQL.
 void remote.missingColumn
 // @ts-expect-error The shared server function also requires numeric IDs.
-readDraft(`one`)
+readProduct(`one`)
+
+void api.inventory.setStock.mutate({ id: 1, stock: 12, revision: 1 })
+// @ts-expect-error Stock counts are numeric.
+void api.inventory.setStock.mutate({ id: 1, stock: `twelve`, revision: 1 })

package/tsconfig.json

@@ -22,6 +22,7 @@
 	},
 	"include": [
 		"src",
+		"exhibits",
 		"astro.config.ts",
 		"scripts",
 		"tests/types.ts"

package/src/Drafts.spa.tsx

@@ -1,62 +0,0 @@
-import type { VNode } from "@atom.io/spa"
-import { useId, useLoadable, useSetter, useStore } from "@atom.io/spa"
-import { resetInStore } from "atom.io/internal"
-
-import type { Draft } from "./api.ts"
-import { documentIds, draftAtoms } from "./model.ts"
-import { prepareDrafts } from "./prepare-drafts.ts"
-
-function DraftCard(props: { id: number }): VNode {
-	const store = useStore()
-	const label = useId()
-	const fallback: Draft = {
-		id: props.id,
-		title: `Draft ${props.id}`,
-		body: ``,
-		revision: `00000000-0000-0000-0000-000000000000`,
-	}
-	const draft = useLoadable(draftAtoms, props.id, fallback)
-	const setDraft = useSetter(draftAtoms, props.id)
-	return (
-		<article class="draft" data-document={props.id} aria-busy={draft().loading}>
-			<header>
-				<h3>{draft().value.title}</h3>
-				<span class="source">{draft().loading ? `Refreshing…` : `Ready`}</span>
-			</header>
-			<label for={label}>Your note</label>
-			<textarea
-				id={label}
-				value={draft().value.body}
-				onInput={(event) => {
-					setDraft({ ...draft().value, body: event.currentTarget.value })
-				}}
-			/>
-			<p class="preview" data-preview>
-				{draft().value.body}
-			</p>
-			<p role="status">{draft().error?.message ?? ``}</p>
-			<footer>
-				<button
-					onClick={() => {
-						resetInStore(store, draftAtoms, props.id)
-					}}
-				>
-					Refresh from database
-				</button>
-				<output data-revision>{draft().value.revision}</output>
-			</footer>
-		</article>
-	)
-}
-
-export default function Drafts(props: { id: string }): VNode {
-	return (
-		<div class="draft-grid" data-island={props.id}>
-			{documentIds.map((id) => (
-				<DraftCard key={id} id={id} />
-			))}
-		</div>
-	)
-}
-
-Drafts.prepareStore = prepareDrafts

package/src/model.ts

@@ -1,21 +0,0 @@
-import { atomFamily, type Loadable } from "atom.io"
-import { resumable } from "resumability"
-
-import { api, type Draft } from "./api.ts"
-
-export const documentIds = [1, 2] as const
-
-export const draftAtoms = atomFamily<Loadable<Draft>, number, Error>({
-	key: `draft`,
-	default: (id) =>
-		resumable({
-			key: [`draft`, id],
-			server: async ({ signal }) => {
-				const { readDraft } = await import(`./server/drafts.ts`)
-				signal.throwIfAborted()
-				return readDraft(id)
-			},
-			client: ({ signal }) => api.drafts.get.query({ id }, { signal }),
-		}),
-	catch: [Error],
-})

package/src/prepare-drafts.ts

@@ -1,22 +0,0 @@
-import type { AstroStorePreparation } from "@atom.io/spa/astro"
-import { getFromStore } from "atom.io/internal"
-import { createResumption } from "resumability/client"
-import { documentIds, draftAtoms } from "./model.ts"
-
-export const prepareDrafts: AstroStorePreparation = async (
-	store,
-	_props,
-	{ element, application },
-) => {
-	if (element) {
-		const scope = application.get(createResumption, () => {
-			const created = createResumption()
-			application.onCleanup(created.dispose)
-			store.runDefault = (run) =>
-				created.run(run, { resume: application.canResume })
-			return created
-		})
-		scope.add(element.closest(`astro-resumption`)!)
-	}
-	await Promise.all(documentIds.map((id) => getFromStore(store, draftAtoms, id)))
-}

package/src/server/drafts.ts

@@ -1,17 +0,0 @@
-import { randomUUID } from "node:crypto"
-import { DatabaseSync } from "node:sqlite"
-
-import readDraftQuery from "./read-draft.sql"
-
-/** Both SSR and tRPC use this function and its inferred query result. */
-// oxlint-disable-next-line typescript/explicit-module-boundary-types -- Infer the response from Reylo's content-mapped SQL type; tsc verifies the full RPC contract.
-export function readDraft(id: number) {
-	const database = new DatabaseSync(`drafts.sqlite`, { readOnly: true })
-	try {
-		const draft = readDraftQuery.runSync(database, { id })
-		if (!draft) throw new Error(`Draft ${id} does not exist`)
-		return { ...draft, revision: randomUUID() }
-	} finally {
-		database.close()
-	}
-}

package/src/server/read-draft.sql

@@ -1 +0,0 @@
-SELECT id, title, body FROM drafts WHERE id = :id;