@nuasite/cms 0.2.2 → 0.3.0

package/package.json

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

package/src/build-processor.ts

@@ -4,6 +4,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { getProjectRoot } from './config'
+import { extractPropsFromSource, findComponentInvocationLine } from './handlers/component-ops'
 import { extractComponentName, processHtml } from './html-processor'
 import type { ManifestWriter } from './manifest-writer'
 import { generateComponentPreviews } from './preview-generator'
@@ -619,6 +620,32 @@ async function processFile(
 		result.html = root.toString()
 	}
 
+	// Populate component props from page source invocations
+	if (Object.keys(result.components).length > 0) {
+		const pageSourcePath = await findPageSource(pagePath)
+		if (pageSourcePath) {
+			try {
+				const pageContent = await fs.readFile(pageSourcePath, 'utf-8')
+				const pageLines = pageContent.split('\n')
+
+				// Track per-component-name occurrence counter
+				const occurrenceCounts = new Map<string, number>()
+
+				for (const comp of Object.values(result.components)) {
+					const idx = occurrenceCounts.get(comp.componentName) ?? 0
+					occurrenceCounts.set(comp.componentName, idx + 1)
+
+					const invLine = findComponentInvocationLine(pageLines, comp.componentName, idx)
+					if (invLine >= 0) {
+						comp.props = extractPropsFromSource(pageLines, invLine, comp.componentName)
+					}
+				}
+			} catch {
+				// Could not read page source — leave props empty
+			}
+		}
+	}
+
 	// Remove CMS ID attributes from HTML for entries that were filtered out
 	let finalHtml = result.html
 	if (idsToRemove.length > 0) {

package/src/component-registry.ts

@@ -1,3 +1,4 @@
+import { parse as parseBabel } from '@babel/parser'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { getProjectRoot } from './config'
@@ -88,100 +89,148 @@ export class ComponentRegistry {
 	}
 
 	/**
-	 * Parse Props content and extract individual property definitions
-	 * Handles multi-line properties with nested types
+	 * Parse Props content using @babel/parser AST for correct TypeScript handling.
+	 * Wraps the content in a synthetic interface and walks TSPropertySignature nodes.
 	 */
 	private parsePropsContent(propsContent: string): ComponentProp[] {
 		const props: ComponentProp[] = []
-		let i = 0
-		const content = propsContent.trim()
-
-		while (i < content.length) {
-			// Skip whitespace and newlines
-			while (i < content.length && /\s/.test(content[i] ?? '')) i++
-			if (i >= content.length) break
-
-			// Skip comments
-			if (content[i] === '/' && content[i + 1] === '/') {
-				// Skip to end of line
-				while (i < content.length && content[i] !== '\n') i++
-				continue
-			}
-
-			if (content[i] === '/' && content[i + 1] === '*') {
-				// Skip block comment
-				while (i < content.length - 1 && !(content[i] === '*' && content[i + 1] === '/')) i++
-				i += 2
-				continue
-			}
-
-			// Extract property name
-			const nameStart = i
-			while (i < content.length && /\w/.test(content[i] ?? '')) i++
-			const name = content.substring(nameStart, i)
-
-			if (!name) break
-
-			// Skip whitespace
-			while (i < content.length && /\s/.test(content[i] ?? '')) i++
-
-			// Check for optional marker
-			const optional = content[i] === '?'
-			if (optional) i++
 
-			// Skip whitespace
-			while (i < content.length && /\s/.test(content[i] ?? '')) i++
-
-			// Expect colon
-			if (content[i] !== ':') break
-			i++
+		// Wrap in an interface so Babel can parse it as valid TypeScript
+		const synthetic = `interface _Props {\n${propsContent}\n}`
+		let ast: ReturnType<typeof parseBabel>
+		try {
+			ast = parseBabel(synthetic, {
+				sourceType: 'module',
+				plugins: ['typescript'],
+				errorRecovery: true,
+			})
+		} catch {
+			return props
+		}
 
-			// Skip whitespace
-			while (i < content.length && /\s/.test(content[i] ?? '')) i++
-
-			// Extract type (up to semicolon, handling nested braces)
-			const typeStart = i
-			let braceDepth = 0
-			let angleDepth = 0
-			while (i < content.length) {
-				if (content[i] === '{') braceDepth++
-				else if (content[i] === '}') braceDepth--
-				else if (content[i] === '<') angleDepth++
-				else if (content[i] === '>') angleDepth--
-				else if (content[i] === ';' && braceDepth === 0 && angleDepth === 0) break
-				i++
+		const interfaceNode = ast.program.body[0]
+		if (!interfaceNode || interfaceNode.type !== 'TSInterfaceDeclaration') return props
+
+		// Collect leading comments per line for JSDoc / inline descriptions
+		const lines = synthetic.split('\n')
+
+		for (const member of interfaceNode.body.body) {
+			if (member.type !== 'TSPropertySignature') continue
+			if (member.key.type !== 'Identifier') continue
+
+			const name = member.key.name
+			const optional = !!member.optional
+
+			// Reconstruct the type string from source text
+			let type = 'unknown'
+			if (member.typeAnnotation?.typeAnnotation) {
+				const ta = member.typeAnnotation.typeAnnotation
+				if (ta.loc) {
+					// Extract the type text directly from the synthetic source
+					const startLine = ta.loc.start.line - 1
+					const endLine = ta.loc.end.line - 1
+					if (startLine === endLine) {
+						type = lines[startLine]!.slice(ta.loc.start.column, ta.loc.end.column).trim()
+					} else {
+						const parts: string[] = []
+						for (let l = startLine; l <= endLine; l++) {
+							if (l === startLine) parts.push(lines[l]!.slice(ta.loc.start.column))
+							else if (l === endLine) parts.push(lines[l]!.slice(0, ta.loc.end.column))
+							else parts.push(lines[l]!)
+						}
+						type = parts.join('\n').trim()
+					}
+				} else {
+					type = this.typeAnnotationToString(ta)
+				}
 			}
 
-			const type = content.substring(typeStart, i).trim()
-
-			// Skip the semicolon
-			if (content[i] === ';') i++
+			// Look for description from comments
+			let description: string | undefined
 
-			// Skip whitespace
-			while (i < content.length && /[ \t]/.test(content[i] ?? '')) i++
+			// First, check for inline trailing comment on the property's source line
+			// (Babel can misattach these as leading comments of the next property)
+			if (member.loc) {
+				const lineIdx = member.loc.end.line - 1
+				const sourceLine = lines[lineIdx]
+				if (sourceLine) {
+					const commentMatch = sourceLine.match(/\/\/\s*(.+?)\s*$/)
+					if (commentMatch?.[1]) {
+						description = commentMatch[1]
+					}
+				}
+			}
 
-			// Check for inline comment
-			let description: string | undefined
-			if (content[i] === '/' && content[i + 1] === '/') {
-				i += 2
-				const commentStart = i
-				while (i < content.length && content[i] !== '\n') i++
-				description = content.substring(commentStart, i).trim()
+			// If no inline comment, check for leading JSDoc or standalone line comments
+			if (!description && member.leadingComments && member.leadingComments.length > 0) {
+				const last = member.leadingComments[member.leadingComments.length - 1]!
+				if (last.type === 'CommentBlock') {
+					description = last.value
+						.split('\n')
+						.map((l: string) => l.replace(/^\s*\*\s?/, '').trim())
+						.filter(Boolean)
+						.join(' ')
+				} else if (last.type === 'CommentLine' && last.loc && member.loc) {
+					// Only use line comments on their own line (not inline on previous property)
+					const commentLineContent = lines[last.loc.start.line - 1]?.trim()
+					if (commentLineContent?.startsWith('//')) {
+						description = last.value.trim()
+					}
+				}
 			}
 
 			if (name && type) {
-				props.push({
-					name,
-					type,
-					required: !optional,
-					description,
-				})
+				props.push({ name, type, required: !optional, description })
 			}
 		}
 
 		return props
 	}
 
+	/**
+	 * Fallback: convert a Babel TSType node to a human-readable string
+	 */
+	private typeAnnotationToString(node: any): string {
+		switch (node.type) {
+			case 'TSStringKeyword':
+				return 'string'
+			case 'TSNumberKeyword':
+				return 'number'
+			case 'TSBooleanKeyword':
+				return 'boolean'
+			case 'TSAnyKeyword':
+				return 'any'
+			case 'TSVoidKeyword':
+				return 'void'
+			case 'TSNullKeyword':
+				return 'null'
+			case 'TSUndefinedKeyword':
+				return 'undefined'
+			case 'TSUnknownKeyword':
+				return 'unknown'
+			case 'TSNeverKeyword':
+				return 'never'
+			case 'TSObjectKeyword':
+				return 'object'
+			case 'TSArrayType':
+				return `${this.typeAnnotationToString(node.elementType)}[]`
+			case 'TSUnionType':
+				return node.types.map((t: any) => this.typeAnnotationToString(t)).join(' | ')
+			case 'TSIntersectionType':
+				return node.types.map((t: any) => this.typeAnnotationToString(t)).join(' & ')
+			case 'TSLiteralType':
+				if (node.literal.type === 'StringLiteral') return `'${node.literal.value}'`
+				return String(node.literal.value)
+			case 'TSTypeReference':
+				if (node.typeName?.type === 'Identifier') return node.typeName.name
+				return 'unknown'
+			case 'TSParenthesizedType':
+				return `(${this.typeAnnotationToString(node.typeAnnotation)})`
+			default:
+				return 'unknown'
+		}
+	}
+
 	/**
 	 * Extract content between balanced braces after a pattern match
 	 * Properly handles nested objects

package/src/dev-middleware.ts

@@ -2,20 +2,18 @@ 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 { handleInsertComponent, handleRemoveComponent } from './handlers/component-ops'
+import { getProjectRoot } from './config'
+import { handleAddArrayItem, handleRemoveArrayItem } from './handlers/array-ops'
 import {
-	handleCreateMarkdown,
-	handleGetMarkdownContent,
-	handleUpdateMarkdown,
-} from './handlers/markdown-ops'
-import {
-	handleCors,
-	parseJsonBody,
-	parseMultipartFile,
-	readBody,
-	sendError,
-	sendJson,
-} from './handlers/request-utils'
+	extractPropsFromSource,
+	findComponentInvocationLine,
+	getPageFileCandidates,
+	handleInsertComponent,
+	handleRemoveComponent,
+	normalizeFilePath,
+} from './handlers/component-ops'
+import { handleCreateMarkdown, 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'
 import type { ManifestWriter } from './manifest-writer'
@@ -188,7 +186,9 @@ export function createDevMiddleware(
 				return originalWrite.call(res, chunk, encodingOrCb, cb)
 			}
 			if (chunk) {
-				chunks!.push(typeof chunk === 'string' ? Buffer.from(chunk, typeof encodingOrCb === 'string' ? encodingOrCb as BufferEncoding : 'utf-8') : Buffer.from(chunk))
+				chunks!.push(
+					typeof chunk === 'string' ? Buffer.from(chunk, typeof encodingOrCb === 'string' ? encodingOrCb as BufferEncoding : 'utf-8') : Buffer.from(chunk),
+				)
 			}
 			if (typeof encodingOrCb === 'function') encodingOrCb()
 			else if (typeof cb === 'function') cb()
@@ -272,6 +272,22 @@ async function handleCmsApiRoute(
 		return
 	}
 
+	// POST /_nua/cms/add-array-item
+	if (route === 'add-array-item' && req.method === 'POST') {
+		const body = await parseJsonBody<Parameters<typeof handleAddArrayItem>[0]>(req)
+		const result = await handleAddArrayItem(body, manifestWriter)
+		sendJson(res, result)
+		return
+	}
+
+	// POST /_nua/cms/remove-array-item
+	if (route === 'remove-array-item' && req.method === 'POST') {
+		const body = await parseJsonBody<Parameters<typeof handleRemoveArrayItem>[0]>(req)
+		const result = await handleRemoveArrayItem(body, manifestWriter)
+		sendJson(res, result)
+		return
+	}
+
 	// GET /_nua/cms/markdown/content?filePath=...
 	if (route === 'markdown/content' && req.method === 'GET') {
 		const urlObj = new URL(req.url!, `http://${req.headers.host}`)
@@ -341,8 +357,14 @@ async function handleCmsApiRoute(
 
 		// Validate file content type — allow images, videos, PDFs, and common web assets
 		const allowedTypes = [
-			'image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/avif', 'image/x-icon',
-			'video/mp4', 'video/webm',
+			'image/jpeg',
+			'image/png',
+			'image/gif',
+			'image/webp',
+			'image/avif',
+			'image/x-icon',
+			'video/mp4',
+			'video/webm',
 			'application/pdf',
 		]
 		// Block SVG (can contain scripts) unless explicitly served with safe headers
@@ -435,6 +457,53 @@ async function processHtmlForDev(
 		idGenerator,
 	)
 
+	// Populate component props from source invocations
+	const projectRoot = getProjectRoot()
+	const fileCache = new Map<string, string[] | null>()
+	const readLines = async (filePath: string): Promise<string[] | null> => {
+		if (fileCache.has(filePath)) return fileCache.get(filePath)!
+		try {
+			const content = await fs.readFile(filePath, 'utf-8')
+			const lines = content.split('\n')
+			fileCache.set(filePath, lines)
+			return lines
+		} catch {
+			fileCache.set(filePath, null)
+			return null
+		}
+	}
+
+	for (const comp of Object.values(result.components)) {
+		let found = false
+
+		// Try invocationSourcePath first (may point to a layout, not the page)
+		if (comp.invocationSourcePath) {
+			const filePath = normalizeFilePath(comp.invocationSourcePath)
+			const lines = await readLines(path.resolve(projectRoot, filePath))
+			if (lines) {
+				const invLine = findComponentInvocationLine(lines, comp.componentName, comp.invocationIndex ?? 0)
+				if (invLine >= 0) {
+					comp.props = extractPropsFromSource(lines, invLine, comp.componentName)
+					found = true
+				}
+			}
+		}
+
+		// Fallback: search page source file candidates
+		if (!found) {
+			for (const candidate of getPageFileCandidates(pagePath)) {
+				const lines = await readLines(path.resolve(projectRoot, candidate))
+				if (lines) {
+					const invLine = findComponentInvocationLine(lines, comp.componentName, comp.invocationIndex ?? 0)
+					if (invLine >= 0) {
+						comp.props = extractPropsFromSource(lines, invLine, comp.componentName)
+						break
+					}
+				}
+			}
+		}
+	}
+
 	// Build collection entry if this is a collection page
 	let collectionEntry: CollectionEntry | undefined
 	if (collectionInfo && mdContent) {

package/src/editor/api.ts

@@ -247,6 +247,78 @@ export interface RemoveComponentResponse {
 	error?: string
 }
 
+export interface AddArrayItemResponse {
+	success: boolean
+	message?: string
+	sourceFile?: string
+	error?: string
+}
+
+export async function addArrayItem(
+	apiBase: string,
+	referenceComponentId: string,
+	position: 'before' | 'after',
+	props: Record<string, unknown>,
+): Promise<AddArrayItemResponse> {
+	const res = await fetchWithTimeout(`${apiBase}/add-array-item`, {
+		method: 'POST',
+		credentials: 'include',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			referenceComponentId,
+			position,
+			props,
+			meta: {
+				source: 'inline-editor',
+				url: window.location.href,
+			},
+		}),
+	})
+
+	if (!res.ok) {
+		const text = await res.text().catch(() => '')
+		throw new Error(`Add array item failed (${res.status}): ${text || res.statusText}`)
+	}
+
+	return res.json()
+}
+
+export interface RemoveArrayItemResponse {
+	success: boolean
+	message?: string
+	sourceFile?: string
+	error?: string
+}
+
+export async function removeArrayItem(
+	apiBase: string,
+	componentId: string,
+): Promise<RemoveArrayItemResponse> {
+	const res = await fetchWithTimeout(`${apiBase}/remove-array-item`, {
+		method: 'POST',
+		credentials: 'include',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			componentId,
+			meta: {
+				source: 'inline-editor',
+				url: window.location.href,
+			},
+		}),
+	})
+
+	if (!res.ok) {
+		const text = await res.text().catch(() => '')
+		throw new Error(`Remove array item failed (${res.status}): ${text || res.statusText}`)
+	}
+
+	return res.json()
+}
+
 export async function removeComponent(
 	apiBase: string,
 	componentId: string,

package/src/editor/components/ai-chat.tsx

@@ -382,7 +382,6 @@ export const AIChat = ({ callbacks }: AIChatProps) => {
 															? 'bg-cms-primary text-cms-primary-text self-end rounded-cms-lg rounded-br-cms-sm'
 															: 'bg-white/10 text-white self-start rounded-cms-lg rounded-bl-cms-sm cms-markdown border border-white/10'
 													}`}
-	
 													dangerouslySetInnerHTML={msg.role === 'assistant'
 														? { __html: renderMarkdown(msg.content) }
 														: undefined}