create-ncblock 0.0.32 → 0.0.34

package/package.json

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

package/scripts/scaffold-assets/AGENTS.md

@@ -14,7 +14,7 @@ That writes `custom_blocks.json`, `.notion/target.json`, and PATCHes any blocks
 
 ## Talking to the host
 
-- Always use the React hooks from `ncblock`. Never call `window.parent.postMessage` directly — the SDK owns the protocol.
+- Always use the React hooks from `ncblock/react`. Never call `window.parent.postMessage` directly — the SDK owns the protocol.
 - Render app code inside `<NotionCustomBlock>` so the handshake completes before hooks run.
 - `<NotionCustomBlock>` runs `useCustomBlockAutoResize` for you by default — no extra wiring needed. Pass `autoResize={false}` for full-bleed views.
 

package/scripts/utils/templates.ts

@@ -190,6 +190,27 @@ function copyDirectoryContents(
 	}
 }
 
+function applyTemplateReplacements(
+	contents: string,
+	replacements: Record<string, string>,
+): string {
+	let replaced = contents
+	for (const [placeholder, value] of Object.entries(replacements)) {
+		replaced = replaced.replaceAll(placeholder, value)
+	}
+	return replaced
+}
+
+function writeRenderedFile(args: {
+	sourcePath: string
+	targetPath: string
+	replacements: Record<string, string>
+}) {
+	const { sourcePath, targetPath, replacements } = args
+	const contents = readFileSync(sourcePath, "utf-8")
+	writeFileSync(targetPath, applyTemplateReplacements(contents, replacements))
+}
+
 export function scaffoldTemplate({
 	root,
 	templateDir,
@@ -198,6 +219,12 @@ export function scaffoldTemplate({
 	overwrite = false,
 	sdkDep,
 }: ScaffoldTemplateOptions) {
+	const replacements = { "{{name}}": name }
+	const appEntrySource = resolve(templateDir, "src/index.tsx")
+	const appEntryTarget = resolve(dest, "src/index.tsx")
+	const shouldRenderAppEntry =
+		existsSync(appEntrySource) && (overwrite || !existsSync(appEntryTarget))
+
 	copyDirectoryContents(templateDir, dest, {
 		overwrite,
 		// README.md and package.json are rendered below with the app name and
@@ -209,6 +236,14 @@ export function scaffoldTemplate({
 		]),
 	})
 
+	if (shouldRenderAppEntry) {
+		writeRenderedFile({
+			sourcePath: appEntrySource,
+			targetPath: appEntryTarget,
+			replacements,
+		})
+	}
+
 	// Scaffolded projects are standalone, not workspace members. If the user
 	// scaffolds inside an existing pnpm workspace (e.g. this repo), pnpm walks
 	// up, finds the workspace root, and the install ends up partial. A local
@@ -221,15 +256,21 @@ export function scaffoldTemplate({
 
 	const readmeTarget = resolve(dest, "README.md")
 	if (overwrite || !existsSync(readmeTarget)) {
-		const readme = readFileSync(resolve(templateDir, "README.md"), "utf-8")
-		writeFileSync(readmeTarget, readme.replace(/\{\{name\}\}/g, name))
+		writeRenderedFile({
+			sourcePath: resolve(templateDir, "README.md"),
+			targetPath: readmeTarget,
+			replacements,
+		})
 	}
 
 	const agentsTarget = resolve(dest, "AGENTS.md")
 	if (overwrite || !existsSync(agentsTarget)) {
 		const agentsSource = resolve(root, "scripts/scaffold-assets/AGENTS.md")
-		const agents = readFileSync(agentsSource, "utf-8")
-		writeFileSync(agentsTarget, agents.replace(/\{\{name\}\}/g, name))
+		writeRenderedFile({
+			sourcePath: agentsSource,
+			targetPath: agentsTarget,
+			replacements,
+		})
 	}
 
 	const pkgPath = resolve(dest, "package.json")

package/sdk-version.json

@@ -1 +1 @@
-{"version":"0.0.30"}
+{"version":"0.0.32"}

package/templates/debug/src/index.tsx

@@ -1,16 +1,18 @@
 import {
 	type NotionCreatePagePosition,
-	NotionCustomBlock,
 	type NotionCustomBlockContext,
 	type NotionDataSourceId,
 	type NotionPage,
 	type NotionPageId,
 	pages,
+} from "ncblock"
+import {
+	NotionCustomBlock,
 	useCurrentUser,
 	useCustomBlockContext,
 	useManifest,
 	useTheme,
-} from "ncblock"
+} from "ncblock/react"
 import React, {
 	Component,
 	useCallback,

package/templates/empty/src/index.css

@@ -0,0 +1,33 @@
+:root {
+	color-scheme: light dark;
+	--background: #ffffff;
+	--foreground: #1f1f1f;
+	--muted: #5f5e5b;
+	--border: #e6e6e6;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: #191919;
+		--foreground: #f1f1ef;
+		--muted: #b7b6b2;
+		--border: #3f3f3c;
+	}
+}
+
+body {
+	background: var(--background);
+}
+
+main {
+	box-sizing: border-box;
+	padding: 8px 24px;
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	color: var(--foreground);
+	background: var(--background);
+}
+
+p {
+	color: var(--muted);
+}

package/templates/empty/src/index.tsx

@@ -1,8 +1,16 @@
-import { NotionCustomBlock } from "ncblock"
+import { NotionCustomBlock } from "ncblock/react"
 import ReactDOM from "react-dom/client"
+import "./index.css"
 
 function App() {
-	return <h1>Edit me in index.tsx</h1>
+	return (
+		<main>
+			<h3>{"{{name}}"}</h3>
+			<p>
+				Edit <code>src/index.tsx</code> and then deploy using <code>ntn</code>
+			</p>
+		</main>
+	)
 }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

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

@@ -1,11 +1,10 @@
+import type { NotionDataSourcePage, NotionPageId } from "ncblock"
 import {
 	NotionCustomBlock,
-	type NotionDataSourcePage,
-	type NotionPageId,
 	useDataSource,
 	useManifest,
 	useTheme,
-} from "ncblock"
+} from "ncblock/react"
 import React from "react"
 import ReactDOM from "react-dom/client"
 

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

@@ -7,15 +7,17 @@ import {
 	useReactTable,
 } from "@tanstack/react-table"
 import {
-	NotionCustomBlock,
 	type NotionPagePropertyInputMap,
 	type NotionPagePropertyInputValue,
 	type NotionPropertySchema,
 	pages,
+} from "ncblock"
+import {
+	NotionCustomBlock,
 	useDataSource,
 	useManifest,
 	useTheme,
-} from "ncblock"
+} from "ncblock/react"
 import React from "react"
 import ReactDOM from "react-dom/client"