create-ncblock 0.0.36 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-ncblock",
-	"version": "0.0.36",
+	"version": "0.0.38",
 	"description": "Create a Notion custom view block project.",
 	"type": "module",
 	"bin": {

package/sdk-version.json

@@ -1 +1 @@
-{"version":"0.0.34"}
+{"version":"0.0.36"}

package/templates/debug/src/index.tsx

@@ -42,6 +42,7 @@ type NotionInitFixture =
 	| "invalid-ready"
 	| "invalid-manifest"
 	| "unsupported-protocol-version"
+	| "legacy-ready-v1"
 type TrackedPage = {
 	page: NotionPage
 	draftTitle: string
@@ -56,6 +57,11 @@ const metaTextClass =
 	"font-mono text-[11px] font-normal normal-case tracking-normal text-(--muted)"
 const HOST_NO_READY_ERROR_DELAY_SECONDS = 5
 
+function makeMockDataSourceId(value: number): NotionDataSourceId {
+	return `00000000-0000-4000-8000-${String(value).padStart(12, "0")}` as NotionDataSourceId
+}
+const DEFAULT_QUERY_DATA_SOURCE_ID = makeMockDataSourceId(1)
+
 function App() {
 	const blockId = useBlockId()
 	const parent = useParent()
@@ -286,7 +292,8 @@ function DevOnlyInvalidManifestFixture() {
 		window.parent.postMessage(
 			{
 				type: "ready",
-				bridgeProtocolVersion: 1,
+				status: "success",
+				bridgeProtocolVersion: 2,
 				manifest: {
 					version: 1,
 					dataSources: {
@@ -339,6 +346,7 @@ function DevOnlyUnsupportedProtocolVersionFixture() {
 		window.parent.postMessage(
 			{
 				type: "ready",
+				status: "success",
 				bridgeProtocolVersion: 1,
 				manifest: null,
 			},
@@ -369,6 +377,49 @@ function DevOnlyUnsupportedProtocolVersionFixture() {
 	)
 }
 
+function DevOnlyLegacyReadyV1Fixture() {
+	useEffect(() => {
+		if (window.parent === window) {
+			return
+		}
+
+		// Dev-only fixture for local manual testing of Notion host init error UI.
+		// This intentionally bypasses the SDK and sends the legacy protocol-v1
+		// ready shape that existed before ready messages carried `status`.
+		window.parent.postMessage(
+			{
+				type: "ready",
+				bridgeProtocolVersion: 1,
+				manifest: null,
+			},
+			"*",
+		)
+	}, [])
+
+	return (
+		<div className="min-h-screen bg-(--app-bg) p-8 text-(--foreground)">
+			<div className={cardClass}>
+				<div className={labelClass}>Local init fixture</div>
+				<h1 className="mt-2 text-[24px] font-semibold">
+					Legacy ready protocol v1
+				</h1>
+				<p className="mt-2 text-sm leading-6 text-(--muted)">
+					This dev-only fixture posts the old <code>ready</code> message shape
+					without a <code>status</code> field and with bridge protocol version{" "}
+					<code>1</code>. It does not mount the SDK provider. Use it only for
+					local manual testing of Notion host init error UI.
+				</p>
+				<DevOnlyHostErrorExpectation>
+					This page is the pre-error fixture, not the Notion error state. In the
+					Notion host, set the host minimum bridge protocol version above{" "}
+					<code>1</code>; the host-owned unsupported protocol version error
+					should cover this page.
+				</DevOnlyHostErrorExpectation>
+			</div>
+		</div>
+	)
+}
+
 function DevOnlyHostErrorExpectation(props: { children: React.ReactNode }) {
 	return (
 		<div className="mt-3 rounded-md border border-(--border) bg-(--app-bg) px-3 py-2 text-sm leading-6 text-(--foreground)">
@@ -407,7 +458,8 @@ function getNotionInitFixture(): NotionInitFixture {
 		fixture === "no-ready" ||
 		fixture === "invalid-ready" ||
 		fixture === "invalid-manifest" ||
-		fixture === "unsupported-protocol-version"
+		fixture === "unsupported-protocol-version" ||
+		fixture === "legacy-ready-v1"
 	) {
 		return fixture
 	}
@@ -1453,7 +1505,8 @@ const PRESETS: {
 		label: "ready",
 		createMessage: () => ({
 			type: "ready",
-			bridgeProtocolVersion: 1,
+			status: "success",
+			bridgeProtocolVersion: 2,
 			manifest: null,
 		}),
 	},
@@ -1471,7 +1524,11 @@ const PRESETS: {
 		createMessage: () => ({
 			type: "queryDataSource",
 			requestId: "debug-query",
-			key: "default",
+			snapshotId: JSON.stringify({
+				dataSourceId: DEFAULT_QUERY_DATA_SOURCE_ID,
+				limit: 20,
+			}),
+			dataSourceId: DEFAULT_QUERY_DATA_SOURCE_ID,
 			limit: 20,
 		}),
 	},
@@ -2189,6 +2246,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 		{notionInitFixture === "unsupported-protocol-version" && (
 			<DevOnlyUnsupportedProtocolVersionFixture />
 		)}
+		{notionInitFixture === "legacy-ready-v1" && <DevOnlyLegacyReadyV1Fixture />}
 		{notionInitFixture === "normal" && (
 			<NotionCustomBlock errorFallback={DebugInitErrorFallback}>
 				<App />

package/templates/radar-chart/src/index.tsx

@@ -451,7 +451,8 @@ function App() {
 	const manifest = useManifest()
 	const activeDataSourceKey =
 		Object.keys(manifest?.dataSources ?? {})[0] ?? "default"
-	const query = useDataSource(activeDataSourceKey)
+	const [queryLimit, setQueryLimit] = React.useState(20)
+	const query = useDataSource(activeDataSourceKey, { limit: queryLimit })
 	const colorTheme = theme === "dark" ? "dark" : "light"
 	const mappedAnalysis = analyzeRadarSchema(query.items)
 	const isUsingFallbackData = !mappedAnalysis.isReady
@@ -522,7 +523,7 @@ function App() {
 				queryError={query.error?.message}
 				hasMore={query.hasMore}
 				isLoading={query.isLoading}
-				onFetchMore={query.fetchMore}
+				onFetchMore={() => setQueryLimit(limit => limit + 20)}
 			/>
 		</div>
 	)

package/templates/table-view/src/index.tsx

@@ -1704,7 +1704,8 @@ function App() {
 	}, [activeDataSourceKey, dataSourceKeys])
 
 	const queryKey = dataSourceKeys.length === 0 ? "default" : activeDataSourceKey
-	const query = useDataSource(queryKey)
+	const [queryLimit, setQueryLimit] = React.useState(20)
+	const query = useDataSource(queryKey, { limit: queryLimit })
 	const colorTheme = theme === "dark" ? "dark" : "light"
 
 	const mappedItems = query.items as TableRow[]
@@ -1800,7 +1801,7 @@ function App() {
 					onSelectDataSource={setActiveDataSourceKey}
 					hasMore={query.hasMore}
 					isLoading={query.isLoading}
-					onFetchMore={query.fetchMore}
+					onFetchMore={() => setQueryLimit(limit => limit + 20)}
 					isUsingFallbackData={isUsingFallbackData}
 					isCollectionEmpty={isCollectionEmpty}
 					queryError={query.error?.message}