@notionhq/custom-blocks 0.1.7 → 0.1.8

package/src/host/createCustomBlockHost.ts

@@ -1,662 +0,0 @@
-import * as v from "valibot"
-import {
-	DEFAULT_CONTRAST_MODE,
-	type NotionContrastMode,
-} from "../bridge/contrast.js"
-import type { NotionDataSourceId } from "../bridge/ids.js"
-import type { CustomBlockManifest } from "../bridge/manifest.js"
-import type { ConnectMessage } from "../bridge/messages/connect.js"
-import type { ContrastModeChangedMessage } from "../bridge/messages/contrastModeChanged.js"
-import type { CreatePageMessage } from "../bridge/messages/createPage.js"
-import type { CreatePageResultMessage } from "../bridge/messages/createPageResult.js"
-import type { DataSourcesChangedMessage } from "../bridge/messages/dataSourcesChanged.js"
-import type {
-	GetPageMessage,
-	GetPageResultMessage,
-} from "../bridge/messages/getPage.js"
-import type {
-	GetUserMessage,
-	GetUserResultMessage,
-} from "../bridge/messages/getUser.js"
-import type { HostToSandboxMessage } from "../bridge/messages/hostToSandbox.js"
-import type {
-	CustomBlockInitErrorCode,
-	CustomBlockInitErrorInfo,
-	InitMessage,
-} from "../bridge/messages/init.js"
-import type { InitResultMessage } from "../bridge/messages/initResult.js"
-import type {
-	ListUsersMessage,
-	ListUsersResultMessage,
-} from "../bridge/messages/listUsers.js"
-import type { PageChangedMessage } from "../bridge/messages/pageChanged.js"
-import type { ParentChangedMessage } from "../bridge/messages/parentChanged.js"
-import type { QueryDataSourceMessage } from "../bridge/messages/queryDataSource.js"
-import type { QueryDataSourceResultMessage } from "../bridge/messages/queryDataSourceResult.js"
-import { sandboxToHostMessageSchema } from "../bridge/messages/sandboxToHost.js"
-import type { ThemeChangedMessage } from "../bridge/messages/themeChanged.js"
-import type { UpdatePageMessage } from "../bridge/messages/updatePage.js"
-import type { UpdatePageResultMessage } from "../bridge/messages/updatePageResult.js"
-import type { CustomBlockPage } from "../bridge/pages/page.js"
-import type { NotionParent } from "../bridge/parent.js"
-import { CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION } from "../bridge/SandboxBridge.js"
-import type { NotionTheme } from "../bridge/theme.js"
-import type { NotionUser } from "../bridge/users/user.js"
-import { unreachable } from "../utils.js"
-import { initErrorForFailureReason } from "./lifecycle/initErrors.js"
-import { isValidBridgeProtocolVersion } from "./lifecycle/protocolVersion.js"
-import type {
-	ConnectSuccessMessage,
-	CustomBlockHostDataSourcesPayload,
-	CustomBlockHostInitialState,
-	InitStatus,
-} from "./lifecycle/types.js"
-import { getInvalidSandboxMessageResponse } from "./messages/invalidSandboxMessage.js"
-import type {
-	CustomBlockHostHandlers,
-	CustomBlockHostLogDirection,
-} from "./messages/types.js"
-import { QuerySubscriptions } from "./queries/querySubscriptions.js"
-import type { CustomBlockHostQueryDataSourceResult } from "./queries/types.js"
-
-export type CustomBlockHostOptions = {
-	iframe: HTMLIFrameElement
-	targetOrigin?: string
-	minBridgeProtocolVersion: number
-	noConnectTimeoutMs?: number
-	noInitResultTimeoutMs?: number
-	initialState: CustomBlockHostInitialState
-	handlers: CustomBlockHostHandlers
-	onConnect?: (message: ConnectSuccessMessage) => void
-	onInitResult?: (message: InitResultMessage) => void
-	onLog?: (direction: CustomBlockHostLogDirection, payload: unknown) => void
-}
-
-export type CustomBlockHostHandle = {
-	stop: () => void
-	post: (message: HostToSandboxMessage) => void
-	setTheme: (theme: NotionTheme) => void
-	setContrastMode: (contrastMode: NotionContrastMode) => void
-	setParent: (parent: NotionParent) => void
-	setPage: (page: CustomBlockPage) => void
-	setDataSources: (dataSources: CustomBlockHostDataSourcesPayload) => void
-	setCurrentUser: (currentUser: NotionUser) => void
-	refreshQuery: (args: {
-		dataSourceId: NotionDataSourceId
-		response: CustomBlockHostQueryDataSourceResult
-	}) => void
-}
-
-const DEFAULT_NO_CONNECT_TIMEOUT_MS = 5_000
-const DEFAULT_NO_INIT_RESULT_TIMEOUT_MS = 5_000
-const initializationIdentitySchema = v.object({
-	initializationId: v.string(),
-})
-
-export function createCustomBlockHost(
-	options: CustomBlockHostOptions,
-): CustomBlockHostHandle {
-	const {
-		iframe,
-		initialState,
-		handlers,
-		onConnect,
-		onInitResult,
-		onLog,
-		targetOrigin = "*",
-		minBridgeProtocolVersion: configuredMinBridgeProtocolVersion,
-		noConnectTimeoutMs = DEFAULT_NO_CONNECT_TIMEOUT_MS,
-		noInitResultTimeoutMs = DEFAULT_NO_INIT_RESULT_TIMEOUT_MS,
-	} = options
-	const minBridgeProtocolVersion = Math.max(
-		configuredMinBridgeProtocolVersion ?? CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION,
-		CUSTOM_BLOCK_BRIDGE_PROTOCOL_VERSION,
-	)
-
-	let theme = initialState.theme
-	let contrastMode = initialState.contrastMode ?? DEFAULT_CONTRAST_MODE
-	let parent = initialState.parent
-	let page = initialState.page
-	let dataSources = initialState.dataSources
-	let manifest = initialState.manifest
-	let currentUser = initialState.currentUser
-	let initStatus: InitStatus = "waitingForConnect"
-	let noConnectTimeoutId: number | undefined
-	let noInitResultTimeoutId: number | undefined
-	let activeInitializationId: string | undefined
-	let connectedSandbox: ConnectSuccessMessage | undefined
-	let pendingThemeChange = false
-	let pendingContrastModeChange = false
-	let pendingParentChange = false
-	let pendingPageChange = false
-	let pendingDataSourcesChange: CustomBlockHostDataSourcesPayload | undefined
-	let pendingCurrentUserChange = false
-	const querySubscriptions = new QuerySubscriptions()
-
-	function emit(direction: CustomBlockHostLogDirection, payload: unknown) {
-		onLog?.(direction, payload)
-	}
-
-	function post(message: HostToSandboxMessage) {
-		emit("out", message)
-		iframe.contentWindow?.postMessage(message, targetOrigin)
-	}
-
-	function postQueryDataSourceResult(args: {
-		subscriptionId: string
-		response: CustomBlockHostQueryDataSourceResult
-	}) {
-		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)
-	}
-
-	function clearNoConnectTimeout() {
-		if (noConnectTimeoutId !== undefined) {
-			window.clearTimeout(noConnectTimeoutId)
-			noConnectTimeoutId = undefined
-		}
-	}
-
-	function clearNoInitResultTimeout() {
-		if (noInitResultTimeoutId !== undefined) {
-			window.clearTimeout(noInitResultTimeoutId)
-			noInitResultTimeoutId = undefined
-		}
-	}
-
-	function resolveDataSourcesPayload(
-		connect: ConnectSuccessMessage,
-	): CustomBlockHostDataSourcesPayload {
-		return typeof dataSources === "function"
-			? dataSources(connect)
-			: dataSources
-	}
-
-	function sendInit(connect: ConnectSuccessMessage): boolean {
-		if (initStatus !== "waitingForConnect") {
-			return false
-		}
-		onConnect?.(connect)
-		manifest = connect.manifest ?? initialState.manifest
-		const resolvedDataSources = resolveDataSourcesPayload(connect)
-		const bindingErrorCode = getBindingErrorCode(manifest, resolvedDataSources)
-		if (bindingErrorCode !== undefined) {
-			sendInitError(
-				connect.initializationId,
-				initErrorForFailureReason(bindingErrorCode),
-			)
-			return false
-		}
-		initStatus = "waitingForInitResult"
-		activeInitializationId = connect.initializationId
-		clearNoConnectTimeout()
-		const message: InitMessage = {
-			type: "init",
-			initializationId: connect.initializationId,
-			status: "success",
-			theme,
-			contrastMode,
-			blockId: initialState.blockId,
-			parent,
-			page,
-			manifest,
-			dataSources: resolvedDataSources,
-			currentUser,
-		}
-		post(message)
-		noInitResultTimeoutId = window.setTimeout(() => {
-			if (initStatus !== "waitingForInitResult") {
-				return
-			}
-			initStatus = "error"
-			emit("warn", {
-				message: "Sandbox did not send initResult",
-				initializationId: connect.initializationId,
-			})
-		}, noInitResultTimeoutMs)
-		return true
-	}
-
-	function sendInitError(
-		initializationId: string,
-		error: CustomBlockInitErrorInfo,
-	) {
-		if (initStatus !== "waitingForConnect") {
-			return
-		}
-		initStatus = "error"
-		activeInitializationId = initializationId
-		clearNoConnectTimeout()
-		post({
-			type: "init",
-			initializationId,
-			status: "error",
-			error,
-		})
-	}
-
-	function onIframeLoad() {
-		clearNoConnectTimeout()
-		if (initStatus !== "waitingForConnect") {
-			// Only set the timeout if the iframe loaded before the `connect` message was sent.
-			return
-		}
-		noConnectTimeoutId = window.setTimeout(() => {
-			if (initStatus !== "waitingForConnect") {
-				// Only do anything if the iframe loaded before the `connect` message was sent.
-				return
-			}
-			initStatus = "error"
-			emit("warn", initErrorForFailureReason("no_connect"))
-		}, noConnectTimeoutMs)
-	}
-
-	async function handleQuery(message: QueryDataSourceMessage) {
-		const token = querySubscriptions.track(message)
-		const response = await handlers.queryDataSource(message)
-		if (!querySubscriptions.isCurrent(message.subscriptionId, token)) {
-			return
-		}
-		postQueryDataSourceResult({
-			subscriptionId: message.subscriptionId,
-			response,
-		})
-	}
-
-	async function handleCreatePage(message: CreatePageMessage) {
-		if (handlers.createPage === undefined) {
-			return
-		}
-		const response = await handlers.createPage(message)
-		const result: CreatePageResultMessage = {
-			type: "createPageResult",
-			requestId: message.requestId,
-			...response,
-		}
-		post(result)
-	}
-
-	async function handleGetPage(message: GetPageMessage) {
-		if (handlers.getPage === undefined) {
-			return
-		}
-		const response = await handlers.getPage(message)
-		const result: GetPageResultMessage = {
-			type: "getPageResult",
-			requestId: message.requestId,
-			...response,
-		}
-		post(result)
-	}
-
-	async function handleGetUser(message: GetUserMessage) {
-		if (handlers.getUser === undefined) {
-			return
-		}
-		const response = await handlers.getUser(message)
-		const result: GetUserResultMessage = {
-			type: "getUserResult",
-			requestId: message.requestId,
-			...response,
-		}
-		post(result)
-	}
-
-	async function handleListUsers(message: ListUsersMessage) {
-		if (handlers.listUsers === undefined) {
-			return
-		}
-		const response = await handlers.listUsers(message)
-		const result: ListUsersResultMessage = {
-			type: "listUsersResult",
-			requestId: message.requestId,
-			...response,
-		}
-		post(result)
-	}
-
-	async function handleUpdatePage(message: UpdatePageMessage) {
-		if (handlers.updatePage === undefined) {
-			return
-		}
-		const response = await handlers.updatePage(message)
-		const result: UpdatePageResultMessage = {
-			type: "updatePageResult",
-			requestId: message.requestId,
-			...response,
-		}
-		post(result)
-	}
-
-	function handleConnect(message: ConnectMessage) {
-		// Verify the bridge protocol version is valid.
-		if (!isValidBridgeProtocolVersion(message.bridgeProtocolVersion)) {
-			const initError = initErrorForFailureReason("invalid_protocol_version", {
-				currentBridgeProtocolVersion: message.bridgeProtocolVersion,
-			})
-			sendInitError(message.initializationId, initError)
-			return
-		}
-		if (message.bridgeProtocolVersion < minBridgeProtocolVersion) {
-			const initError = initErrorForFailureReason(
-				"unsupported_protocol_version",
-				{
-					currentBridgeProtocolVersion: message.bridgeProtocolVersion,
-					minBridgeProtocolVersion,
-				},
-			)
-			sendInitError(message.initializationId, initError)
-			return
-		}
-
-		// If the sandbox reported an error during `connect`, return it as an `init` error.
-		if (message.status === "error") {
-			sendInitError(message.initializationId, message.error)
-			return
-		}
-
-		if (!sendInit(message)) {
-			return
-		}
-		connectedSandbox = message
-	}
-
-	/**
-	 * Sends any pending host state changes to the sandbox. It is possible for these to change
-	 * between when the host sends `init` and when the sandbox responds with `initResult`. The host
-	 * does send any pending state changes until hearing back from the sandbox.
-	 */
-	function flushPendingHostStateChanges() {
-		if (pendingThemeChange) {
-			pendingThemeChange = false
-			post({ type: "themeChanged", theme })
-		}
-		if (pendingContrastModeChange) {
-			pendingContrastModeChange = false
-			post({ type: "contrastModeChanged", contrastMode })
-		}
-		if (pendingParentChange) {
-			pendingParentChange = false
-			post({ type: "parentChanged", parent })
-		}
-		if (pendingPageChange) {
-			pendingPageChange = false
-			post({ type: "pageChanged", page })
-		}
-		if (pendingDataSourcesChange !== undefined) {
-			const nextDataSources = pendingDataSourcesChange
-			pendingDataSourcesChange = undefined
-			post({ type: "dataSourcesChanged", dataSources: nextDataSources })
-		}
-		if (pendingCurrentUserChange) {
-			pendingCurrentUserChange = false
-			post({ type: "currentUserChanged", currentUser })
-		}
-	}
-
-	function handleInitResult(message: InitResultMessage) {
-		if (
-			initStatus !== "waitingForInitResult" ||
-			message.initializationId !== activeInitializationId
-		) {
-			emit("warn", {
-				message: "Ignored stale or unexpected initResult",
-				payload: message,
-			})
-			return
-		}
-		clearNoInitResultTimeout()
-		initStatus = message.status === "success" ? "success" : "error"
-		if (initStatus === "success") {
-			flushPendingHostStateChanges()
-		}
-		onInitResult?.(message)
-	}
-
-	function onInvalidSandboxMessage(
-		data: unknown,
-		issues: readonly v.BaseIssue<unknown>[],
-	) {
-		emit("warn", {
-			message: "Ignored unsupported sandbox message",
-			payload: data,
-			issues,
-		})
-		const response = getInvalidSandboxMessageResponse(data)
-
-		const parsedIdentity = v.safeParse(initializationIdentitySchema, data)
-		const initializationId = parsedIdentity.success
-			? parsedIdentity.output.initializationId
-			: undefined
-		if (
-			initStatus === "waitingForConnect" &&
-			response.incomingType === "connect" &&
-			initializationId !== undefined
-		) {
-			sendInitError(
-				initializationId,
-				initErrorForFailureReason("invalid_connect"),
-			)
-		} else if (response.nack !== undefined) {
-			post(response.nack)
-		}
-	}
-
-	function onMessage(event: MessageEvent) {
-		if (event.source !== iframe.contentWindow) {
-			return
-		}
-
-		const parsed = v.safeParse(sandboxToHostMessageSchema, event.data)
-		if (!parsed.success) {
-			onInvalidSandboxMessage(event.data, parsed.issues)
-			return
-		}
-
-		const message = parsed.output
-		emit("in", message)
-
-		if (
-			message.type !== "connect" &&
-			message.type !== "initResult" &&
-			initStatus !== "success"
-		) {
-			emit("warn", {
-				message: `Ignored ${message.type} before initialization completed`,
-				payload: message,
-			})
-			return
-		}
-
-		switch (message.type) {
-			case "connect":
-				handleConnect(message)
-				return
-			case "initResult":
-				handleInitResult(message)
-				return
-			case "queryDataSource":
-				void handleQuery(message)
-				return
-			case "createPage":
-				void handleCreatePage(message)
-				return
-			case "getPage":
-				void handleGetPage(message)
-				return
-			case "getUser":
-				void handleGetUser(message)
-				return
-			case "listUsers":
-				void handleListUsers(message)
-				return
-			case "updatePage":
-				void handleUpdatePage(message)
-				return
-			case "resize":
-				handlers.resize?.(message)
-				return
-			case "invalidHostMessage":
-				return
-			default:
-				unreachable(message)
-		}
-	}
-
-	window.addEventListener("message", onMessage)
-	iframe.addEventListener("load", onIframeLoad)
-
-	return {
-		stop() {
-			window.removeEventListener("message", onMessage)
-			iframe.removeEventListener("load", onIframeLoad)
-			clearNoConnectTimeout()
-			clearNoInitResultTimeout()
-			querySubscriptions.clear()
-		},
-		post,
-		setTheme(nextTheme) {
-			theme = nextTheme
-			if (initStatus !== "success") {
-				if (initStatus === "waitingForInitResult") {
-					pendingThemeChange = true
-				}
-				return
-			}
-			const message: ThemeChangedMessage = { type: "themeChanged", theme }
-			post(message)
-		},
-		setContrastMode(nextContrastMode) {
-			contrastMode = nextContrastMode
-			if (initStatus !== "success") {
-				if (initStatus === "waitingForInitResult") {
-					pendingContrastModeChange = true
-				}
-				return
-			}
-			const message: ContrastModeChangedMessage = {
-				type: "contrastModeChanged",
-				contrastMode,
-			}
-			post(message)
-		},
-		setParent(nextParent) {
-			parent = nextParent
-			if (initStatus !== "success") {
-				if (initStatus === "waitingForInitResult") {
-					pendingParentChange = true
-				}
-				return
-			}
-			const message: ParentChangedMessage = { type: "parentChanged", parent }
-			post(message)
-		},
-		setPage(nextPage) {
-			page = nextPage
-			if (initStatus !== "success") {
-				if (initStatus === "waitingForInitResult") {
-					pendingPageChange = true
-				}
-				return
-			}
-			const message: PageChangedMessage = { type: "pageChanged", page }
-			post(message)
-		},
-		setDataSources(nextDataSources) {
-			if (
-				connectedSandbox !== undefined &&
-				getBindingErrorCode(manifest, nextDataSources) !== undefined
-			) {
-				emit("warn", {
-					message: "Ignored invalid data source bindings update",
-					payload: nextDataSources,
-				})
-				return
-			}
-			dataSources = nextDataSources
-			if (initStatus !== "success") {
-				if (initStatus === "waitingForInitResult") {
-					pendingDataSourcesChange = nextDataSources
-				}
-				return
-			}
-			const message: DataSourcesChangedMessage = {
-				type: "dataSourcesChanged",
-				dataSources: nextDataSources,
-			}
-			post(message)
-		},
-		setCurrentUser(nextCurrentUser) {
-			currentUser = nextCurrentUser
-			if (initStatus !== "success") {
-				if (initStatus === "waitingForInitResult") {
-					pendingCurrentUserChange = true
-				}
-				return
-			}
-			post({ type: "currentUserChanged", currentUser })
-		},
-		refreshQuery({ dataSourceId, response }) {
-			if (initStatus !== "success") {
-				return
-			}
-			const refreshes = querySubscriptions.resolveRefreshes({
-				dataSourceId,
-				response,
-			})
-			if (refreshes.length === 0) {
-				emit("warn", `No active query exists for data source "${dataSourceId}"`)
-				return
-			}
-			for (const refresh of refreshes) {
-				postQueryDataSourceResult(refresh)
-			}
-		},
-	}
-}
-
-function getBindingErrorCode(
-	manifest: CustomBlockManifest,
-	dataSources: CustomBlockHostDataSourcesPayload,
-): CustomBlockInitErrorCode | undefined {
-	for (const [dataSourceKey, manifestDataSource] of Object.entries(
-		manifest.dataSources,
-	)) {
-		const binding = dataSources.bindings[dataSourceKey]
-		if (
-			binding?.collectionPointer === undefined ||
-			binding.collectionSchema === undefined
-		) {
-			return "missing_data_source_binding"
-		}
-		for (const [propertyKey, manifestProperty] of Object.entries(
-			manifestDataSource.properties ?? {},
-		)) {
-			const propertyId = binding.propertyIdsByKey?.[propertyKey]
-			if (propertyId === undefined) {
-				return "missing_property_binding"
-			}
-			if (
-				binding.collectionSchema.propertiesById[propertyId]?.type !==
-				manifestProperty.type
-			) {
-				return "invalid_property_binding"
-			}
-		}
-	}
-	return undefined
-}