@notionhq/custom-blocks 0.0.76 → 0.0.77

package/src/bridge/SandboxBridge.ts

@@ -55,7 +55,6 @@ import type { NotionUser } from "./users/user.js"
  * single host needs to support multiple custom blocks built with different versions of the bridge
  * protocol. Increment this number any time a breaking change is made to the bridge protocol.
  */
-// TODO(custom-blocks): Update when bumping bridge protocol version to 3.
 export const CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION = 2
 
 /**
@@ -76,7 +75,6 @@ export class SandboxBridge {
 	private listeners = new Set<() => void>()
 	private messageLog: MessageLogEntry[] = []
 	private messageLogListeners = new Set<() => void>()
-	private nextRequestId = 1
 	private readonly pendingCreatePage = new PendingRequests<CreatePageResult>(
 		"custom-block-create-page",
 	)
@@ -400,32 +398,23 @@ export class SandboxBridge {
 
 			case "queryDataSourceResult": {
 				const queryEntry = Object.entries(hostState.dataSourceState).find(
-					([, state]) => state.latestSnapshotId === message.snapshotId,
+					([, state]) => state.subscriptionId === message.subscriptionId,
 				)
 				if (queryEntry === undefined) {
 					return
 				}
 				const [key, currentState] = queryEntry
-				if (currentState.latestRequestId !== message.requestId) {
-					return
-				}
 				const queryResult =
-					"status" in message
-						? message.status === "error"
-							? {
-									items: [],
-									hasMore: false,
-									error: message.error,
-								}
-							: {
-									items: message.items,
-									hasMore: message.hasMore,
-									error: undefined,
-								}
+					message.status === "error"
+						? {
+								items: [],
+								hasMore: false,
+								error: message.error,
+							}
 						: {
 								items: message.items,
 								hasMore: message.hasMore,
-								error: message.error,
+								error: undefined,
 							}
 				this.hostState = {
 					...hostState,
@@ -436,10 +425,7 @@ export class SandboxBridge {
 							isLoading: false,
 							hasMore: queryResult.hasMore,
 							error: queryResult.error,
-							// Keep the request ID so later host-pushed refreshes for the
-							// same subscription still match.
-							latestRequestId: message.requestId,
-							latestSnapshotId: message.snapshotId,
+							subscriptionId: message.subscriptionId,
 							latestLimit: currentState.latestLimit,
 						},
 					},
@@ -558,21 +544,18 @@ export class SandboxBridge {
 		}
 
 		const limit = resolveDataSourceQueryLimit(options.limit)
-		const snapshotId = makeDataSourceSnapshotId({
+		const subscriptionId = makeDataSourceSubscriptionId({
 			key,
 		})
 
 		if (
 			currentState.isLoading &&
-			currentState.latestSnapshotId === snapshotId &&
+			currentState.subscriptionId === subscriptionId &&
 			currentState.latestLimit === limit
 		) {
 			return
 		}
 
-		const requestId = `custom-block-query-${this.nextRequestId}`
-		this.nextRequestId += 1
-
 		this.hostState = {
 			...this.hostState,
 			dataSourceState: {
@@ -581,8 +564,7 @@ export class SandboxBridge {
 					...currentState,
 					isLoading: true,
 					error: undefined,
-					latestRequestId: requestId,
-					latestSnapshotId: snapshotId,
+					subscriptionId,
 					latestLimit: limit,
 				},
 			},
@@ -591,8 +573,7 @@ export class SandboxBridge {
 
 		const outbound: QueryDataSourceMessage = {
 			type: "queryDataSource",
-			requestId,
-			snapshotId,
+			subscriptionId,
 			dataSourceId: dataSource.collectionPointer.id,
 			limit,
 		}
@@ -615,8 +596,7 @@ export class SandboxBridge {
 					...currentState,
 					isLoading: false,
 					error,
-					latestRequestId: undefined,
-					latestSnapshotId: undefined,
+					subscriptionId: undefined,
 					latestLimit: undefined,
 				},
 			},
@@ -907,7 +887,7 @@ function resolveDataSourceQueryLimit(limit: number | undefined): number {
 	return limit
 }
 
-function makeDataSourceSnapshotId(args: { key: string }): string {
+function makeDataSourceSubscriptionId(args: { key: string }): string {
 	const { key } = args
 	return `data-source:${encodeURIComponent(key)}`
 }

package/src/bridge/hostState.ts

@@ -38,8 +38,7 @@ export type DataSourceQueryState = {
 	isLoading: boolean
 	hasMore: boolean
 	error?: CustomBlockQueryDataSourceErrorInfo
-	latestRequestId?: string
-	latestSnapshotId?: string
+	subscriptionId?: string
 	latestLimit?: number
 }
 

package/src/bridge/messages/hostToSandbox.ts

@@ -9,10 +9,7 @@ import { invalidSandboxMessageSchema } from "./invalidSandboxMessage.js"
 import { listUsersResultMessageSchema } from "./listUsers.js"
 import { pageChangedMessageSchema } from "./pageChanged.js"
 import { parentChangedMessageSchema } from "./parentChanged.js"
-import {
-	legacyQueryDataSourceResultMessageSchema,
-	statusQueryDataSourceResultMessageSchema,
-} from "./queryDataSourceResult.js"
+import { queryDataSourceResultMessageSchema } from "./queryDataSourceResult.js"
 import { themeChangedMessageSchema } from "./themeChanged.js"
 import { updatePageResultMessageSchema } from "./updatePageResult.js"
 
@@ -26,8 +23,7 @@ export const hostToSandboxMessageSchema = v.variant("type", [
 	pageChangedMessageSchema,
 	currentUserChangedMessageSchema,
 	dataSourcesChangedMessageSchema,
-	statusQueryDataSourceResultMessageSchema,
-	legacyQueryDataSourceResultMessageSchema,
+	queryDataSourceResultMessageSchema,
 	createPageResultMessageSchema,
 	getPageResultMessageSchema,
 	getUserResultMessageSchema,

package/src/bridge/messages/queryDataSource.ts

@@ -7,15 +7,11 @@ import { notionDataSourceIdSchema } from "../ids.js"
  */
 export const queryDataSourceMessageSchema = v.object({
 	type: v.literal("queryDataSource"),
-	requestId: v.string(),
-	/**
-	 * The stable snapshot ID that identifies the SDK result slot to update. This is stable for the
-	 * lifetime of the subscription.
-	 */
-	snapshotId: v.string(),
+	/** Stable for the lifetime of this query subscription. */
+	subscriptionId: v.string(),
 	/** The raw Notion data source ID to read from. */
 	dataSourceId: notionDataSourceIdSchema,
-	/** The number of items to return in the snapshot. */
+	/** The number of items to return in each subscription update. */
 	limit: v.number(),
 })
 

package/src/bridge/messages/queryDataSourceResult.ts

@@ -22,44 +22,24 @@ export const customBlockQueryDataSourceErrorInfoSchema = v.object({
 })
 
 /**
- * Message sent by the host to the sandbox in response to a `queryDataSource` request.
+ * Message sent by the host to update a `queryDataSource` subscription.
  */
-export const legacyQueryDataSourceResultMessageSchema = v.object({
-	type: v.literal("queryDataSourceResult"),
-	requestId: v.string(),
-	snapshotId: v.string(),
-	items: v.array(notionDataSourcePageBridgeSchema),
-	hasMore: v.boolean(),
-	error: v.optional(customBlockQueryDataSourceErrorInfoSchema),
-})
-
-export const statusQueryDataSourceResultMessageSchema = v.variant("status", [
+export const queryDataSourceResultMessageSchema = v.variant("status", [
 	v.object({
 		type: v.literal("queryDataSourceResult"),
-		requestId: v.string(),
-		snapshotId: v.string(),
+		subscriptionId: v.string(),
 		status: v.literal("success"),
 		items: v.array(notionDataSourcePageBridgeSchema),
 		hasMore: v.boolean(),
 	}),
 	v.object({
 		type: v.literal("queryDataSourceResult"),
-		requestId: v.string(),
-		snapshotId: v.string(),
+		subscriptionId: v.string(),
 		status: v.literal("error"),
 		error: customBlockQueryDataSourceErrorInfoSchema,
 	}),
 ])
 
-/**
- * TODO(custom-blocks): Update when bumping bridge protocol version to 3.
- * Protocol version 2 hosts and sandboxes use the legacy optional-error shape.
- */
-export const queryDataSourceResultMessageSchema = v.union([
-	legacyQueryDataSourceResultMessageSchema,
-	statusQueryDataSourceResultMessageSchema,
-])
-
 export type QueryDataSourceResultMessage = v.InferOutput<
 	typeof queryDataSourceResultMessageSchema
 >

package/src/host/createCustomBlockHost.ts

@@ -111,20 +111,24 @@ export function createCustomBlockHost(
 	}
 
 	function postQueryDataSourceResult(args: {
-		requestId: string
-		snapshotId: string
+		subscriptionId: string
 		response: CustomBlockHostQueryDataSourceResult
 	}) {
-		// TODO(custom-blocks): Update when bumping bridge protocol version to 3.
-		// Protocol v2 sandboxes require the legacy optional-error result shape.
-		const message: QueryDataSourceResultMessage = {
-			type: "queryDataSourceResult",
-			requestId: args.requestId,
-			snapshotId: args.snapshotId,
-			items: args.response.items,
-			hasMore: args.response.hasMore ?? false,
-			error: args.response.error,
-		}
+		const message: QueryDataSourceResultMessage =
+			args.response.status === "error"
+				? {
+						type: "queryDataSourceResult",
+						subscriptionId: args.subscriptionId,
+						status: "error",
+						error: args.response.error,
+					}
+				: {
+						type: "queryDataSourceResult",
+						subscriptionId: args.subscriptionId,
+						status: "success",
+						items: args.response.items,
+						hasMore: args.response.hasMore,
+					}
 		post(message)
 	}
 
@@ -183,11 +187,13 @@ export function createCustomBlockHost(
 	}
 
 	async function handleQuery(message: QueryDataSourceMessage) {
-		querySubscriptions.track(message)
+		const token = querySubscriptions.track(message)
 		const response = await handlers.queryDataSource(message)
+		if (!querySubscriptions.isCurrent(message.subscriptionId, token)) {
+			return
+		}
 		postQueryDataSourceResult({
-			requestId: message.requestId,
-			snapshotId: message.snapshotId,
+			subscriptionId: message.subscriptionId,
 			response,
 		})
 	}
@@ -362,6 +368,7 @@ export function createCustomBlockHost(
 			window.removeEventListener("message", onMessage)
 			iframe.removeEventListener("load", onIframeLoad)
 			clearNoReadyTimeout()
+			querySubscriptions.clear()
 		},
 		post,
 		setTheme(nextTheme) {
@@ -392,19 +399,17 @@ export function createCustomBlockHost(
 			post({ type: "currentUserChanged", currentUser })
 		},
 		refreshQuery({ dataSourceId, response }) {
-			const refresh = querySubscriptions.resolveRefresh({
+			const refreshes = querySubscriptions.resolveRefreshes({
 				dataSourceId,
 				response,
 			})
-			if (refresh.status === "missing") {
+			if (refreshes.length === 0) {
 				emit("warn", `No active query exists for data source "${dataSourceId}"`)
 				return
 			}
-			postQueryDataSourceResult({
-				requestId: refresh.requestId,
-				snapshotId: refresh.snapshotId,
-				response: refresh.response,
-			})
+			for (const refresh of refreshes) {
+				postQueryDataSourceResult(refresh)
+			}
 		},
 	}
 }

package/src/host/queries/querySubscriptions.ts

@@ -1,52 +1,71 @@
 import type { NotionDataSourceId } from "../../bridge/ids.js"
 import type { QueryDataSourceMessage } from "../../bridge/messages/queryDataSource.js"
-import type {
-	CustomBlockHostQueryDataSourceResult,
-	QuerySubscriptionState,
-} from "./types.js"
-
-export type QueryRefreshResult =
-	| {
-			status: "success"
-			requestId: string
-			snapshotId: string
-			response: CustomBlockHostQueryDataSourceResult
-	  }
-	| { status: "missing" }
+import type { CustomBlockHostQueryDataSourceResult } from "./types.js"
+
+export type QueryRefresh = {
+	subscriptionId: string
+	response: CustomBlockHostQueryDataSourceResult
+}
+
+type QuerySubscriptionToken = object
+
+type QuerySubscriptionState = {
+	dataSourceId: NotionDataSourceId
+	limit: number
+	token: QuerySubscriptionToken
+}
 
 export class QuerySubscriptions {
-	private readonly latestByDataSourceId = new Map<
-		NotionDataSourceId,
-		QuerySubscriptionState
-	>()
-
-	track(message: QueryDataSourceMessage) {
-		this.latestByDataSourceId.set(message.dataSourceId, {
-			requestId: message.requestId,
-			snapshotId: message.snapshotId,
+	private readonly bySubscriptionId = new Map<string, QuerySubscriptionState>()
+
+	track(message: QueryDataSourceMessage): QuerySubscriptionToken {
+		const token = {}
+		this.bySubscriptionId.set(message.subscriptionId, {
+			dataSourceId: message.dataSourceId,
 			limit: message.limit,
+			token,
 		})
+		return token
+	}
+
+	isCurrent(subscriptionId: string, token: QuerySubscriptionToken): boolean {
+		return this.bySubscriptionId.get(subscriptionId)?.token === token
 	}
 
-	resolveRefresh(args: {
+	resolveRefreshes(args: {
 		dataSourceId: NotionDataSourceId
 		response: CustomBlockHostQueryDataSourceResult
-	}): QueryRefreshResult {
-		const queryState = this.latestByDataSourceId.get(args.dataSourceId)
-		if (!queryState) {
-			return { status: "missing" }
-		}
-		const items = args.response.items.slice(0, queryState.limit)
-		return {
-			status: "success",
-			requestId: queryState.requestId,
-			snapshotId: queryState.snapshotId,
-			response: {
-				items,
-				hasMore:
-					args.response.hasMore ?? args.response.items.length > items.length,
-				error: args.response.error,
-			},
+	}): QueryRefresh[] {
+		const refreshes: QueryRefresh[] = []
+		for (const [subscriptionId, queryState] of this.bySubscriptionId) {
+			if (queryState.dataSourceId !== args.dataSourceId) {
+				continue
+			}
+			queryState.token = {}
+			refreshes.push({
+				subscriptionId,
+				response: limitResponse(args.response, queryState.limit),
+			})
 		}
+		return refreshes
+	}
+
+	clear() {
+		this.bySubscriptionId.clear()
+	}
+}
+
+function limitResponse(
+	response: CustomBlockHostQueryDataSourceResult,
+	limit: number,
+): CustomBlockHostQueryDataSourceResult {
+	if (response.status === "error") {
+		return response
+	}
+	const items = response.items.slice(0, limit)
+	return {
+		status: "success",
+		items,
+		hasMore: response.hasMore || response.items.length > items.length,
 	}
 }

package/src/host/queries/types.ts

@@ -1,14 +1,13 @@
 import type { NotionDataSourcePageBridge } from "../../bridge/dataSources/dataSourcePage.js"
-import type { QueryDataSourceMessage } from "../../bridge/messages/queryDataSource.js"
 import type { CustomBlockQueryDataSourceErrorInfo } from "../../bridge/messages/queryDataSourceResult.js"
 
-export type CustomBlockHostQueryDataSourceResult = {
-	items: NotionDataSourcePageBridge[]
-	hasMore?: boolean
-	error?: CustomBlockQueryDataSourceErrorInfo
-}
-
-export type QuerySubscriptionState = Pick<
-	QueryDataSourceMessage,
-	"requestId" | "snapshotId" | "limit"
->
+export type CustomBlockHostQueryDataSourceResult =
+	| {
+			status: "success"
+			items: NotionDataSourcePageBridge[]
+			hasMore: boolean
+	  }
+	| {
+			status: "error"
+			error: CustomBlockQueryDataSourceErrorInfo
+	  }