@nuasite/cms 0.12.4 → 0.13.1

package/src/html-processor.ts

@@ -339,6 +339,66 @@ export async function processHtml(
 		})
 	}
 
+	// Inline array detection pass: detect elements with data-cms-array-source
+	// (injected by vite-plugin-array-transform) and create virtual ComponentInstance entries
+	if (markComponents) {
+		root.querySelectorAll('[data-cms-array-source]').forEach((node) => {
+			const arrayVarName = node.getAttribute('data-cms-array-source')
+			if (!arrayVarName) return
+
+			// Walk ancestors to find invocationSourcePath and source line
+			let invocationSourcePath: string | undefined
+			let sourceLine = 0
+			let ancestor = node.parentNode as HTMLNode | null
+			while (ancestor) {
+				const ancestorSource = ancestor.getAttribute?.('data-astro-source-file')
+				if (ancestorSource) {
+					invocationSourcePath = ancestorSource
+					// Try to get source line from ancestor
+					const locAttr = ancestor.getAttribute?.('data-astro-source-loc')
+						|| ancestor.getAttribute?.('data-astro-source-line')
+					if (locAttr) {
+						sourceLine = parseInt(locAttr.split(':')[0] ?? '0', 10)
+					}
+					break
+				}
+				ancestor = ancestor.parentNode as HTMLNode | null
+			}
+
+			const componentName = `__array:${arrayVarName}`
+
+			// Track invocation index using existing componentCountPerParent map
+			let invocationIndex: number | undefined
+			if (invocationSourcePath) {
+				if (!componentCountPerParent.has(invocationSourcePath)) {
+					componentCountPerParent.set(invocationSourcePath, new Map())
+				}
+				const counters = componentCountPerParent.get(invocationSourcePath)!
+				const current = counters.get(componentName) ?? 0
+				counters.set(componentName, current + 1)
+				invocationIndex = current
+			}
+
+			const id = getNextId()
+			node.setAttribute('data-cms-component-id', id)
+
+			components[id] = {
+				id,
+				componentName,
+				file: fileId,
+				sourcePath: invocationSourcePath ?? '',
+				sourceLine,
+				props: {},
+				invocationSourcePath,
+				invocationIndex,
+				isInlineArray: true,
+			}
+
+			// Remove the marker attribute from output HTML
+			node.removeAttribute('data-cms-array-source')
+		})
+	}
+
 	// Second pass: mark span elements with text-only styling classes as styled spans
 	// This allows the CMS editor to recognize pre-existing styled text
 	if (markStyledSpans) {

package/src/types.ts

@@ -195,6 +195,8 @@ export interface ComponentInstance {
 	invocationSourcePath?: string
 	/** 0-based index among same-name component invocations in the parent file */
 	invocationIndex?: number
+	/** Whether this component represents an inline HTML element inside a .map() array */
+	isInlineArray?: boolean
 }
 
 /** Represents a content collection entry (markdown file) */

package/src/vite-plugin-array-transform.ts

@@ -0,0 +1,119 @@
+import type { Plugin } from 'vite'
+import { buildMapPattern } from './handlers/array-ops'
+import { findFrontmatterEnd } from './handlers/component-ops'
+
+/**
+ * Vite transform plugin that injects `data-cms-array-source` markers on root HTML
+ * elements inside `.map()` callbacks in Astro template sections.
+ *
+ * This enables the CMS to detect inline array-rendered HTML elements (not just
+ * named Astro components) and provide add/remove array item operations.
+ *
+ * Only targets lowercase tags (inline HTML). Uppercase tags (components) are
+ * already supported via `data-astro-source-file` tracking.
+ */
+export function createArrayTransformPlugin(): Plugin {
+	return {
+		name: 'cms-array-transform',
+		enforce: 'pre',
+		transform(code, id) {
+			if (!id.endsWith('.astro')) return null
+
+			// Find template section (after closing ---)
+			const templateStart = findTemplateStart(code)
+			if (templateStart < 0) return null
+
+			const template = code.slice(templateStart)
+			const transformed = injectArraySourceMarkers(template)
+			if (transformed === template) return null
+
+			return {
+				code: code.slice(0, templateStart) + transformed,
+				map: null,
+			}
+		},
+	}
+}
+
+/**
+ * Find the start of the template section in an Astro file.
+ * The template starts after the closing `---` of the frontmatter block.
+ */
+export function findTemplateStart(code: string): number {
+	const lines = code.split('\n')
+	const fmEndLine = findFrontmatterEnd(lines)
+	if (fmEndLine === 0) return 0 // No frontmatter, whole file is template
+
+	// Convert line index back to character offset
+	let offset = 0
+	for (let i = 0; i < fmEndLine; i++) {
+		offset += lines[i]!.length + 1 // +1 for the newline
+	}
+	return offset
+}
+
+/**
+ * Scan the template section for `.map(` patterns that render inline HTML elements,
+ * and inject `data-cms-array-source="varName"` on the root element.
+ */
+export function injectArraySourceMarkers(template: string): string {
+	// Match patterns like: {varName.map((item) => (  or {varName.map(item =>
+	// We process each match individually
+	const mapPattern = new RegExp(buildMapPattern(), 'g')
+	let result = template
+	let offset = 0
+	// Track how many .map() calls we've seen per variable name
+	const varMapCounts = new Map<string, number>()
+
+	for (const match of template.matchAll(mapPattern)) {
+		const arrayVarName = match[1]!
+		const matchEnd = match.index! + match[0].length
+
+		// Scan forward from the match to find the arrow `=>` and then the first `<tag`
+		const afterMatch = template.slice(matchEnd)
+		const arrowIndex = afterMatch.indexOf('=>')
+		if (arrowIndex < 0) continue
+
+		const afterArrow = afterMatch.slice(arrowIndex + 2)
+		// Find the first opening tag: `<tagName` where tagName starts with a letter.
+		// Supports multiple patterns:
+		//   => <tag               (direct return)
+		//   => (<tag              (parenthesized)
+		//   => { return <tag      (block body)
+		//   => { return (<tag     (block body, parenthesized)
+		//   => expr && <tag       (logical AND conditional)
+		//   => cond ? <tag        (ternary conditional)
+		const tagMatch = afterArrow.match(/^[\s(]*<([a-zA-Z][\w.-]*)/)
+			?? afterArrow.match(/^[\s]*\{[\s]*return[\s(]*<([a-zA-Z][\w.-]*)/)
+			?? afterArrow.match(/^[\s(]*[^<]*?&&\s*[\s(]*<([a-zA-Z][\w.-]*)/)
+			?? afterArrow.match(/^[\s(]*[^<]*?\?\s*[\s(]*<([a-zA-Z][\w.-]*)/)
+		if (!tagMatch) continue
+
+		const tagName = tagMatch[1]!
+		// Skip uppercase tags (Astro components) — they are already supported
+		if (tagName[0] === tagName[0]!.toUpperCase() && tagName[0] !== tagName[0]!.toLowerCase()) continue
+
+		// Find the exact position of this `<tagName` in the original template
+		const tagStartInAfterArrow = afterArrow.indexOf(tagMatch[0])
+		const absoluteTagPos = matchEnd + arrowIndex + 2 + tagStartInAfterArrow
+		// Position right after `<tagName`
+		const insertPos = absoluteTagPos + tagMatch[0].length
+
+		// Check if the attribute is already injected (search to closing >)
+		const closingBracket = template.indexOf('>', insertPos)
+		const searchEnd = closingBracket >= 0 ? closingBracket : template.length
+		const alreadyHasAttr = template.slice(insertPos, searchEnd).includes('data-cms-array-source')
+		if (alreadyHasAttr) continue
+
+		// Track occurrence index per variable name (for multiple .map() of same array)
+		const mapIndex = varMapCounts.get(arrayVarName) ?? 0
+		varMapCounts.set(arrayVarName, mapIndex + 1)
+		const attrValue = mapIndex === 0 ? arrayVarName : `${arrayVarName}#${mapIndex}`
+
+		const injection = ` data-cms-array-source="${attrValue}"`
+		result = result.slice(0, insertPos + offset) + injection + result.slice(insertPos + offset)
+		offset += injection.length
+	}
+
+	return result
+}

package/src/vite-plugin.ts

@@ -1,6 +1,8 @@
 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'
 
 export interface VitePluginContext {
 	manifestWriter: ManifestWriter
@@ -11,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',
@@ -33,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]
+	return [virtualManifestPlugin, watcherPlugin, createArrayTransformPlugin()]
 }