@nuasite/cms 0.13.0 → 0.13.3

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.13.0",
+  "version": "0.13.3",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/dev-middleware.ts

@@ -2,6 +2,7 @@ import { parse } from 'node-html-parser'
 import fs from 'node:fs/promises'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import path from 'node:path'
+import { scanCollections } from './collection-scanner'
 import { getProjectRoot } from './config'
 import { buildMapPattern, detectArrayPattern, extractArrayElementProps, handleAddArrayItem, handleRemoveArrayItem, parseInlineArrayName } from './handlers/array-ops'
 import {
@@ -13,7 +14,7 @@ import {
 	handleRemoveComponent,
 	normalizeFilePath,
 } from './handlers/component-ops'
-import { handleCreateMarkdown, handleGetMarkdownContent, handleUpdateMarkdown } from './handlers/markdown-ops'
+import { handleCreateMarkdown, handleDeleteMarkdown, handleGetMarkdownContent, handleUpdateMarkdown } from './handlers/markdown-ops'
 import { handleCors, parseJsonBody, parseMultipartFile, readBody, sendError, sendJson } from './handlers/request-utils'
 import { handleUpdate } from './handlers/source-writer'
 import { processHtml } from './html-processor'
@@ -29,8 +30,19 @@ interface ViteDevServerLike {
 		use: (middleware: (req: IncomingMessage, res: ServerResponse, next: () => void) => void) => void
 	}
 	transformIndexHtml: (url: string, html: string) => Promise<string>
+	watcher?: {
+		on: (event: string, listener: (...args: any[]) => void) => any
+		removeListener: (event: string, listener: (...args: any[]) => void) => any
+	}
 }
 
+/**
+ * Set of absolute file paths that the CMS expects to be deleted.
+ * When Vite/Astro detects an unlink for one of these files, the CMS
+ * intercepts the event and prevents a full page reload.
+ */
+export const expectedDeletions = new Set<string>()
+
 export interface DevMiddlewareOptions {
 	enableCmsApi?: boolean
 	mediaAdapter?: MediaStorageAdapter
@@ -89,7 +101,7 @@ export function createDevMiddleware(
 
 			const route = url.replace('/_nua/cms/', '').split('?')[0]!
 
-			handleCmsApiRoute(route, req, res, manifestWriter, options.mediaAdapter).catch(
+			handleCmsApiRoute(route, req, res, manifestWriter, config.contentDir, options.mediaAdapter).catch(
 				(error) => {
 					console.error('[astro-cms] API error:', error)
 					sendError(res, 'Internal server error', 500)
@@ -279,6 +291,7 @@ async function handleCmsApiRoute(
 	req: IncomingMessage,
 	res: ServerResponse,
 	manifestWriter: ManifestWriter,
+	contentDir: string,
 	mediaAdapter?: MediaStorageAdapter,
 ): Promise<void> {
 	// POST /_nua/cms/update
@@ -354,6 +367,24 @@ async function handleCmsApiRoute(
 		return
 	}
 
+	// POST /_nua/cms/markdown/delete
+	if (route === 'markdown/delete' && req.method === 'POST') {
+		const body = await parseJsonBody<Parameters<typeof handleDeleteMarkdown>[0]>(req)
+		// Register expected deletion so the Vite watcher ignores the unlink
+		const fullPath = path.resolve(getProjectRoot(), body.filePath?.replace(/^\//, '') ?? '')
+		expectedDeletions.add(fullPath)
+		const result = await handleDeleteMarkdown(body)
+		if (result.success) {
+			// Re-scan collections so the manifest reflects the deletion
+			const updatedCollections = await scanCollections(contentDir)
+			manifestWriter.setCollectionDefinitions(updatedCollections)
+		} else {
+			expectedDeletions.delete(fullPath)
+		}
+		sendJson(res, result, result.success ? 200 : 400)
+		return
+	}
+
 	// GET /_nua/cms/media/list
 	if (route === 'media/list' && req.method === 'GET') {
 		if (!mediaAdapter) {

package/src/editor/components/collections-browser.tsx

@@ -1,6 +1,9 @@
 import { useMemo } from 'preact/hooks'
+import { signal } from '@preact/signals'
+import { deleteMarkdownPage } from '../markdown-api'
 import {
 	closeCollectionsBrowser,
+	config,
 	isCollectionsBrowserOpen,
 	manifest,
 	openMarkdownEditorForEntry,
@@ -10,6 +13,9 @@ import {
 } from '../signals'
 import { savePendingEntryNavigation } from '../storage'
 
+const deletingEntry = signal<string | null>(null)
+const confirmDeleteSlug = signal<string | null>(null)
+
 export function CollectionsBrowser() {
 	const visible = isCollectionsBrowserOpen.value
 	const selected = selectedBrowserCollection.value
@@ -54,6 +60,44 @@ export function CollectionsBrowser() {
 			openMarkdownEditorForNewPage(selected, def)
 		}
 
+		const handleDeleteClick = (e: Event, slug: string) => {
+			e.stopPropagation()
+			confirmDeleteSlug.value = slug
+		}
+
+		const handleConfirmDelete = async (slug: string, sourcePath: string) => {
+			deletingEntry.value = slug
+
+			// Optimistically remove the entry from the manifest
+			const defs = manifest.value.collectionDefinitions
+			const currentDef = defs?.[selected]
+			if (currentDef) {
+				const updatedEntries = (currentDef.entries ?? []).filter(e => e.slug !== slug)
+				manifest.value = {
+					...manifest.value,
+					collectionDefinitions: {
+						...defs,
+						[selected]: {
+							...currentDef,
+							entries: updatedEntries,
+							entryCount: updatedEntries.length,
+						},
+					},
+				}
+			}
+
+			deletingEntry.value = null
+			confirmDeleteSlug.value = null
+
+			// Fire the API call in the background
+			deleteMarkdownPage(config.value, sourcePath)
+		}
+
+		const handleCancelDelete = (e: Event) => {
+			e.stopPropagation()
+			confirmDeleteSlug.value = null
+		}
+
 		return (
 			<div
 				class="fixed inset-0 z-2147483647 flex items-center justify-center bg-black/60 backdrop-blur-sm"
@@ -99,33 +143,68 @@ export function CollectionsBrowser() {
 							</div>
 						)}
 						{entries.map((entry) => (
-							<button
-								key={entry.slug}
-								type="button"
-								onClick={() => handleEntryClick(entry.slug, entry.sourcePath, entry.pathname)}
-								class="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 rounded-cms-lg transition-colors text-left group"
-								data-cms-ui
-							>
-								<div class="flex-1 min-w-0">
-									<div class={`font-medium truncate ${entry.draft ? 'text-white/40' : 'text-white'}`}>
-										{entry.title || entry.slug}
+							<div key={entry.slug} class="relative" data-cms-ui>
+								{confirmDeleteSlug.value === entry.slug ? (
+									<div class="flex items-center gap-2 px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-cms-lg" data-cms-ui>
+										<div class="flex-1 min-w-0 text-sm text-white/70">
+											Delete "{entry.title || entry.slug}"?
+										</div>
+										<button
+											type="button"
+											onClick={() => handleConfirmDelete(entry.slug, entry.sourcePath)}
+											disabled={deletingEntry.value === entry.slug}
+											class="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-cms-pill transition-colors disabled:opacity-50"
+											data-cms-ui
+										>
+											{deletingEntry.value === entry.slug ? 'Deleting...' : 'Delete'}
+										</button>
+										<button
+											type="button"
+											onClick={handleCancelDelete}
+											class="px-3 py-1 text-xs font-medium text-white/60 hover:text-white bg-white/10 hover:bg-white/20 rounded-cms-pill transition-colors"
+											data-cms-ui
+										>
+											Cancel
+										</button>
 									</div>
-									{entry.title && <div class="text-white/30 text-xs truncate">{entry.slug}</div>}
-								</div>
-								{entry.draft && (
-									<span class="shrink-0 px-2 py-0.5 text-xs font-medium text-amber-400/80 bg-amber-400/10 rounded-full border border-amber-400/20">
-										Draft
-									</span>
+								) : (
+									<button
+										type="button"
+										onClick={() => handleEntryClick(entry.slug, entry.sourcePath, entry.pathname)}
+										class="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 rounded-cms-lg transition-colors text-left group"
+										data-cms-ui
+									>
+										<div class="flex-1 min-w-0">
+											<div class={`font-medium truncate ${entry.draft ? 'text-white/40' : 'text-white'}`}>
+												{entry.title || entry.slug}
+											</div>
+											{entry.title && <div class="text-white/30 text-xs truncate">{entry.slug}</div>}
+										</div>
+										{entry.draft && (
+											<span class="shrink-0 px-2 py-0.5 text-xs font-medium text-amber-400/80 bg-amber-400/10 rounded-full border border-amber-400/20">
+												Draft
+											</span>
+										)}
+										<button
+											type="button"
+											onClick={(e) => handleDeleteClick(e, entry.slug)}
+											class="shrink-0 p-1 text-white/0 group-hover:text-white/30 hover:!text-red-400 rounded transition-colors"
+											title="Delete entry"
+											data-cms-ui
+										>
+											<TrashIcon />
+										</button>
+										<svg
+											class="w-4 h-4 text-white/20 group-hover:text-white/40 shrink-0 transition-colors"
+											fill="none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+										</svg>
+									</button>
 								)}
-								<svg
-									class="w-4 h-4 text-white/20 group-hover:text-white/40 shrink-0 transition-colors"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-								</svg>
-							</button>
+							</div>
 						))}
 					</div>
 				</div>
@@ -250,3 +329,11 @@ function BackArrowIcon() {
 		</svg>
 	)
 }
+
+function TrashIcon() {
+	return (
+		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+		</svg>
+	)
+}

package/src/editor/markdown-api.ts

@@ -107,6 +107,33 @@ export async function fetchMarkdownContent(
 	return res.json()
 }
 
+/**
+ * Delete a markdown page (collection entry)
+ */
+export async function deleteMarkdownPage(
+	config: CmsConfig,
+	filePath: string,
+): Promise<{ success: boolean; error?: string }> {
+	const res = await fetchWithTimeout(`${config.apiBase}/markdown/delete`, {
+		method: 'POST',
+		credentials: 'include',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({ filePath }),
+	})
+
+	if (!res.ok) {
+		const text = await res.text().catch(() => '')
+		return {
+			success: false,
+			error: `Delete failed (${res.status}): ${text || res.statusText}`,
+		}
+	}
+
+	return res.json()
+}
+
 /**
  * Fetch media library items
  */

package/src/handlers/markdown-ops.ts

@@ -41,6 +41,15 @@ export interface UpdateMarkdownResponse {
 	error?: string
 }
 
+export interface DeleteMarkdownRequest {
+	filePath: string
+}
+
+export interface DeleteMarkdownResponse {
+	success: boolean
+	error?: string
+}
+
 export interface GetMarkdownContentResponse {
 	content: string
 	frontmatter: BlogFrontmatter
@@ -135,6 +144,26 @@ export async function handleCreateMarkdown(
 	}
 }
 
+export async function handleDeleteMarkdown(
+	request: DeleteMarkdownRequest,
+): Promise<DeleteMarkdownResponse> {
+	try {
+		const fullPath = resolveAndValidatePath(request.filePath)
+
+		// Verify the file exists before deleting
+		await fs.access(fullPath)
+		await fs.unlink(fullPath)
+
+		return { success: true }
+	} catch (error) {
+		if (error instanceof Error && 'code' in error && (error as NodeJS.ErrnoException).code === 'ENOENT') {
+			return { success: false, error: `File not found: ${request.filePath}` }
+		}
+		const message = error instanceof Error ? error.message : String(error)
+		return { success: false, error: message }
+	}
+}
+
 // --- Internal helpers ---
 
 /**

package/src/vite-plugin.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from 'vite'
+import { expectedDeletions } from './dev-middleware'
 import type { ManifestWriter } from './manifest-writer'
 import type { CmsMarkerOptions, ComponentDefinition } from './types'
 import { createArrayTransformPlugin } from './vite-plugin-array-transform'
@@ -12,7 +13,7 @@ export interface VitePluginContext {
 }
 
 export function createVitePlugin(context: VitePluginContext): Plugin[] {
-	const { manifestWriter, componentDefinitions } = context
+	const { manifestWriter, componentDefinitions, command } = context
 
 	const virtualManifestPlugin: Plugin = {
 		name: 'cms-marker-virtual-manifest',
@@ -34,10 +35,33 @@ export function createVitePlugin(context: VitePluginContext): Plugin[] {
 		},
 	}
 
+	// Intercept Vite's file watcher to suppress full page reloads when the CMS
+	// deletes a content collection entry. Without this, Vite/Astro detects the
+	// unlink and forces a reload, undoing the optimistic UI update.
+	const watcherPlugin: Plugin = {
+		name: 'cms-suppress-delete-reload',
+		configureServer(server) {
+			if (command !== 'dev') return
+
+			// Monkey-patch the watcher to intercept unlink events before Vite/Astro
+			// processes them. We use prependListener so our handler runs first.
+			const watcher = server.watcher
+			const origEmit = watcher.emit.bind(watcher)
+			watcher.emit = function (event: string, filePath: string, ...args: any[]) {
+				if ((event === 'unlink' || event === 'unlinkDir') && expectedDeletions.has(filePath)) {
+					expectedDeletions.delete(filePath)
+					// Swallow the event — don't let Vite/Astro see it
+					return true
+				}
+				return origEmit(event, filePath, ...args)
+			} as typeof watcher.emit
+		},
+	}
+
 	// Note: We cannot use transformIndexHtml for static Astro builds because
 	// Astro generates HTML files directly without going through Vite's HTML pipeline.
 	// HTML processing is done in build-processor.ts after pages are generated.
 	// Source location attributes are provided natively by Astro's compiler
 	// (data-astro-source-file, data-astro-source-loc) in dev mode.
-	return [virtualManifestPlugin, createArrayTransformPlugin()]
+	return [virtualManifestPlugin, watcherPlugin, createArrayTransformPlugin()]
 }