create-ncblock 0.0.20 → 0.0.22

package/package.json

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

package/scripts/utils/templates.ts

@@ -1,3 +1,4 @@
+import { resolve } from "node:path"
 import {
 	copyFileSync,
 	existsSync,
@@ -7,7 +8,6 @@ import {
 	statSync,
 	writeFileSync,
 } from "fs"
-import { resolve } from "path"
 
 type StoredTemplateMetadata = {
 	title?: string

package/sdk-version.json

@@ -1 +1 @@
-{"version":"0.0.18"}
+{"version":"0.0.20"}

package/templates/debug/src/index.tsx

@@ -33,6 +33,11 @@ type LogEntry = {
 }
 
 type ThemeOverride = "host" | "light" | "dark"
+type NotionInitFixture =
+	| "normal"
+	| "no-ready"
+	| "invalid-ready"
+	| "invalid-manifest"
 type TrackedPage = {
 	page: NotionPage
 	draftTitle: string
@@ -45,6 +50,7 @@ const labelClass =
 	"text-[10px] font-semibold uppercase tracking-[0.06em] text-(--muted)"
 const metaTextClass =
 	"font-mono text-[11px] font-normal normal-case tracking-normal text-(--muted)"
+const HOST_NO_READY_ERROR_DELAY_SECONDS = 5
 
 function App() {
 	const ctx = useCustomBlockContext()
@@ -198,6 +204,162 @@ function App() {
 	)
 }
 
+function DevOnlyNoReadyFixture() {
+	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">No ready message</h1>
+				<p className="mt-2 text-sm leading-6 text-(--muted)">
+					This dev-only fixture intentionally skips the SDK provider, so the
+					sandbox loads but never sends the initial <code>ready</code> message.
+					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, wait about {HOST_NO_READY_ERROR_DELAY_SECONDS} seconds
+					after the iframe loads; the host-owned{" "}
+					<span className="font-mono">Custom block didn't connect</span> error
+					should then cover this page.
+				</DevOnlyHostErrorExpectation>
+			</div>
+		</div>
+	)
+}
+
+function DevOnlyInvalidReadyFixture() {
+	useEffect(() => {
+		if (window.parent === window) {
+			return
+		}
+
+		// Dev-only fixture for local manual testing of Notion host init error UI.
+		// This intentionally bypasses the SDK so the host receives a malformed
+		// ready message that is missing the manifest and protocol fields.
+		window.parent.postMessage({ type: "ready" }, "*")
+	}, [])
+
+	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">
+					Invalid ready message
+				</h1>
+				<p className="mt-2 text-sm leading-6 text-(--muted)">
+					This dev-only fixture posts malformed{" "}
+					<code>{'{ type: "ready" }'}</code> to the parent window and 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, the host-owned invalid setup message error should cover
+					this page as soon as Notion processes the malformed <code>ready</code>{" "}
+					message.
+				</DevOnlyHostErrorExpectation>
+			</div>
+		</div>
+	)
+}
+
+function DevOnlyInvalidManifestFixture() {
+	useEffect(() => {
+		if (window.parent === window) {
+			return
+		}
+
+		// Dev-only fixture for local manual testing of Notion host init error UI.
+		// This intentionally bypasses the SDK so the host receives a ready message
+		// with a manifest schema the bridge validator must reject.
+		window.parent.postMessage(
+			{
+				type: "ready",
+				bridgeProtocolVersion: 1,
+				manifest: {
+					version: 1,
+					dataSources: {
+						default: {
+							name: "Invalid fixture data source",
+							properties: {
+								unsupportedProperty: {
+									name: "Unsupported property",
+									type: "unsupported_manual_fixture_property_type",
+								},
+							},
+						},
+					},
+				},
+			},
+			"*",
+		)
+	}, [])
+
+	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">Invalid manifest</h1>
+				<p className="mt-2 text-sm leading-6 text-(--muted)">
+					This dev-only fixture posts a <code>ready</code> message with an
+					unsupported manifest property type and 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, the host-owned invalid manifest error should cover this
+					page as soon as Notion validates the <code>ready</code> message.
+				</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)">
+			<span className="font-semibold">Expected host behavior: </span>
+			{props.children}
+		</div>
+	)
+}
+
+function DebugInitErrorFallback(error: Error) {
+	return (
+		<div className="min-h-screen bg-(--app-bg) p-8 text-(--foreground)">
+			<div className={cardClass} role="alert">
+				<div className={labelClass}>Custom block init</div>
+				<h1 className="mt-2 text-[24px] font-semibold">
+					Couldn&apos;t connect to Notion
+				</h1>
+				<p className="mt-2 text-sm leading-6 text-(--muted)">
+					The debug template waited for the host handshake, but it did not
+					complete. This fallback is only for local manual testing; host-owned
+					error UI should normally cover known Notion init failures first.
+				</p>
+				<pre className="mt-3 overflow-auto rounded-md border border-(--border) bg-(--app-bg) p-3 font-mono text-[11px] text-(--muted)">
+					{error.message}
+				</pre>
+			</div>
+		</div>
+	)
+}
+
+function getNotionInitFixture(): NotionInitFixture {
+	const fixture = new URLSearchParams(window.location.search).get(
+		"notionInitFixture",
+	)
+	if (
+		fixture === "no-ready" ||
+		fixture === "invalid-ready" ||
+		fixture === "invalid-manifest"
+	) {
+		return fixture
+	}
+	return "normal"
+}
+
 // --- Hooks ---
 
 function useMessageLog(isPaused: boolean) {
@@ -1960,10 +2122,19 @@ function CreatePageCard({ context, dataSources }: CreatePageCardProps) {
 
 // --- Mount ---
 
+const notionInitFixture = getNotionInitFixture()
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<ErrorBoundary>
-		<NotionCustomBlock>
-			<App />
-		</NotionCustomBlock>
+		{notionInitFixture === "no-ready" && <DevOnlyNoReadyFixture />}
+		{notionInitFixture === "invalid-ready" && <DevOnlyInvalidReadyFixture />}
+		{notionInitFixture === "invalid-manifest" && (
+			<DevOnlyInvalidManifestFixture />
+		)}
+		{notionInitFixture === "normal" && (
+			<NotionCustomBlock errorFallback={DebugInitErrorFallback}>
+				<App />
+			</NotionCustomBlock>
+		)}
 	</ErrorBoundary>,
 )