@nuasite/cms 0.12.4 → 0.13.0

package/dist/editor.js

@@ -373,7 +373,7 @@ function Eg(t, e) {
 function Mg(t, e) {
   return typeof e == "function" ? e(t) : e;
 }
-const ok = "0.12.4", sk = ok, it = {
+const ok = "0.13.0", sk = ok, it = {
   /** Highlight overlay for hovered elements */
   HIGHLIGHT: 2147483644,
   /** Hover outline for elements/components */

package/package.json

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

package/src/dev-middleware.ts

@@ -3,7 +3,7 @@ import fs from 'node:fs/promises'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import path from 'node:path'
 import { getProjectRoot } from './config'
-import { detectArrayPattern, extractArrayElementProps, handleAddArrayItem, handleRemoveArrayItem } from './handlers/array-ops'
+import { buildMapPattern, detectArrayPattern, extractArrayElementProps, handleAddArrayItem, handleRemoveArrayItem, parseInlineArrayName } from './handlers/array-ops'
 import {
 	extractPropsFromSource,
 	findComponentInvocationLine,
@@ -507,6 +507,10 @@ async function processHtmlForDev(
 	}
 
 	for (const comp of Object.values(result.components)) {
+		// Skip inline array components — they have no <Tag> in source;
+		// their props are resolved in the array-group pass below
+		if (comp.componentName.startsWith('__array:')) continue
+
 		let found = false
 
 		// Try invocationSourcePath first (may point to a layout, not the page)
@@ -547,7 +551,7 @@ async function processHtmlForDev(
 	}
 
 	for (const group of componentGroups.values()) {
-		if (group.length <= 1) continue
+		if (group.length < 1) continue
 		// Only process groups where at least one component has empty props (spread case)
 		if (!group.some(c => Object.keys(c.props).length === 0)) continue
 
@@ -556,11 +560,33 @@ async function processHtmlForDev(
 		const lines = await readLines(path.resolve(projectRoot, filePath))
 		if (!lines) continue
 
-		// Find the invocation line (occurrence 0, since .map() has a single <Component> tag)
-		const invLine = findComponentInvocationLine(lines, firstComp.componentName, 0)
-		if (invLine < 0) continue
-
-		const pattern = detectArrayPattern(lines, invLine)
+		// For inline array components (__array:varName or __array:varName#N), find the .map() line
+		// directly instead of searching for a component tag that won't exist
+		let pattern: ReturnType<typeof detectArrayPattern>
+		const parsed = parseInlineArrayName(firstComp.componentName)
+		if (parsed) {
+			const { arrayVarName, mapOccurrence } = parsed
+			const fmEndCheck = findFrontmatterEnd(lines)
+			const mapRegex = new RegExp(buildMapPattern(arrayVarName))
+			let mapLine = -1
+			let seen = 0
+			for (let i = fmEndCheck; i < lines.length; i++) {
+				if (mapRegex.test(lines[i]!)) {
+					if (seen === mapOccurrence) {
+						mapLine = i
+						break
+					}
+					seen++
+				}
+			}
+			if (mapLine < 0) continue
+			pattern = { arrayVarName, mapLineIndex: mapLine }
+		} else {
+			// Find the invocation line (occurrence 0, since .map() has a single <Component> tag)
+			const invLine = findComponentInvocationLine(lines, firstComp.componentName, 0)
+			if (invLine < 0) continue
+			pattern = detectArrayPattern(lines, invLine)
+		}
 		if (!pattern) continue
 
 		const fmEnd = findFrontmatterEnd(lines)

package/src/handlers/array-ops.ts

@@ -3,7 +3,7 @@ import fs from 'node:fs/promises'
 import { getProjectRoot } from '../config'
 import type { ManifestWriter } from '../manifest-writer'
 import type { CmsManifest, ComponentInstance } from '../types'
-import { acquireFileLock, normalizePagePath, resolveAndValidatePath } from '../utils'
+import { acquireFileLock, escapeRegex, normalizePagePath, resolveAndValidatePath } from '../utils'
 import {
 	findComponentInvocationFile,
 	findComponentInvocationLine,
@@ -13,6 +13,40 @@ import {
 	normalizeFilePath,
 } from './component-ops'
 
+/**
+ * Parse an inline array component name like `__array:varName` or `__array:varName#1`.
+ * Returns the variable name and the .map() occurrence index (0-based).
+ */
+export function parseInlineArrayName(componentName: string): { arrayVarName: string; mapOccurrence: number } | null {
+	if (!componentName.startsWith('__array:')) return null
+	const rest = componentName.slice('__array:'.length)
+	const hashIndex = rest.indexOf('#')
+	if (hashIndex < 0) return { arrayVarName: rest, mapOccurrence: 0 }
+	const occurrence = Number(rest.slice(hashIndex + 1))
+	if (Number.isNaN(occurrence)) return null
+	return {
+		arrayVarName: rest.slice(0, hashIndex),
+		mapOccurrence: occurrence,
+	}
+}
+
+/**
+ * Build a regex pattern string that matches `.map(` calls on variables/properties.
+ *
+ * Supports simple variables (`{items.map(`) and dotted property paths
+ * (`{data.items.map(`, `{Astro.props.items.map(`).
+ * Also handles optional chaining (`{items?.map(`).
+ *
+ * If `varName` is omitted, uses a capture group to match any variable name
+ * (captures only the last segment before `.map`).
+ */
+export function buildMapPattern(varName?: string): string {
+	// Allow optional leading dotted path segments (e.g. `Astro.props.`)
+	const prefix = '(?:[\\w]+\\.)*'
+	const name = varName ? escapeRegex(varName) : '(\\w+)'
+	return `\\{${prefix}${name}\\??\\.map\\s*\\(`
+}
+
 export interface AddArrayItemRequest {
 	referenceComponentId: string
 	position: 'before' | 'after'
@@ -55,8 +89,7 @@ export function detectArrayPattern(
 	const searchStart = Math.max(0, invocationLineIndex - 5)
 	for (let i = invocationLineIndex; i >= searchStart; i--) {
 		const line = lines[i]!
-		// Match patterns like: {varName.map( or varName.map(
-		const match = line.match(/\{?\s*(\w+)\.map\s*\(/)
+		const match = line.match(new RegExp(buildMapPattern()))
 		if (match) {
 			return { arrayVarName: match[1]!, mapLineIndex: i }
 		}
@@ -131,7 +164,7 @@ function extractElementBounds(
 ): ArrayElementBounds[] {
 	const bounds: ArrayElementBounds[] = []
 	for (const el of elements) {
-		if (el?.loc) {
+		if (el?.loc && el.type !== 'SpreadElement') {
 			bounds.push({
 				// Babel loc is 1-indexed; convert to 0-indexed file lines
 				startLine: el.loc.start.line - 1 + frontmatterStartLine,
@@ -254,6 +287,66 @@ async function resolveArrayContext(
 ) {
 	const projectRoot = getProjectRoot()
 
+	// Inline array components (__array:varName or __array:varName#N) — find .map() line directly
+	const parsed = parseInlineArrayName(component.componentName)
+	if (parsed) {
+		const { arrayVarName, mapOccurrence } = parsed
+		const filePath = normalizeFilePath(component.invocationSourcePath ?? component.sourcePath)
+		const fullPath = resolveAndValidatePath(filePath)
+		const content = await fs.readFile(fullPath, 'utf-8')
+		const lines = content.split('\n')
+
+		// Find the Nth .map() line by searching the template section
+		const fmEnd = findFrontmatterEnd(lines)
+		if (fmEnd === 0) return null
+
+		let mapLineIndex = -1
+		let occurrencesSeen = 0
+		const mapPattern = new RegExp(buildMapPattern(arrayVarName))
+		for (let i = fmEnd; i < lines.length; i++) {
+			if (mapPattern.test(lines[i]!)) {
+				if (occurrencesSeen === mapOccurrence) {
+					mapLineIndex = i
+					break
+				}
+				occurrencesSeen++
+			}
+		}
+		if (mapLineIndex < 0) return null
+
+		const frontmatterStartLine = 1
+		const frontmatterContent = lines.slice(1, fmEnd - 1).join('\n')
+
+		const elementBounds = findArrayDeclaration(
+			frontmatterContent,
+			frontmatterStartLine,
+			arrayVarName,
+		)
+		if (!elementBounds || elementBounds.length === 0) return null
+
+		// Get array index from same-source components (sorted by invocationIndex for reliable ordering)
+		const sameSourceComponents = Object.values(manifest.components)
+			.filter(c =>
+				c.componentName === component.componentName
+				&& c.invocationSourcePath === component.invocationSourcePath
+			)
+			.sort((a, b) => (a.invocationIndex ?? 0) - (b.invocationIndex ?? 0))
+		const arrayIndex = sameSourceComponents.findIndex(c => c.id === component.id)
+		if (arrayIndex < 0 || arrayIndex >= elementBounds.length) return null
+
+		return {
+			filePath,
+			fullPath,
+			lines,
+			content,
+			elementBounds,
+			arrayIndex,
+			frontmatterContent,
+			frontmatterStartLine,
+			arrayVarName,
+		}
+	}
+
 	const invocation = await findComponentInvocationFile(
 		projectRoot,
 		pageUrl,
@@ -308,11 +401,13 @@ async function resolveArrayContext(
 	// which maps directly to the Nth array element.
 	const occurrenceIndex = getComponentOccurrenceIndex(manifest, component)
 	// Count only components with the same name AND same invocationSourcePath to get array index
+	// Sort by invocationIndex for reliable ordering (don't rely on Object.values insertion order)
 	const sameSourceComponents = Object.values(manifest.components)
 		.filter(c =>
 			c.componentName === component.componentName
 			&& c.invocationSourcePath === component.invocationSourcePath
 		)
+		.sort((a, b) => (a.invocationIndex ?? 0) - (b.invocationIndex ?? 0))
 	const arrayIndex = sameSourceComponents.findIndex(c => c.id === component.id)
 
 	if (arrayIndex < 0 || arrayIndex >= elementBounds.length) {
@@ -329,7 +424,6 @@ async function resolveArrayContext(
 		frontmatterContent,
 		frontmatterStartLine,
 		arrayVarName: pattern.arrayVarName,
-		occurrenceIndex,
 	}
 }
 
@@ -366,15 +460,25 @@ export async function handleRemoveArrayItem(
 			return { success: false, error: 'Could not detect array pattern for this component' }
 		}
 
-		const { fullPath, lines, elementBounds, arrayIndex } = ctx
+		const { fullPath, arrayIndex } = ctx
 
 		const release = await acquireFileLock(fullPath)
 		try {
-			// Re-read the file to avoid stale data
+			// Re-read the file and recompute bounds to avoid stale data
 			const freshContent = await fs.readFile(fullPath, 'utf-8')
 			const freshLines = freshContent.split('\n')
 
-			const bounds = elementBounds[arrayIndex]!
+			const freshFmEnd = findFrontmatterEnd(freshLines)
+			if (freshFmEnd === 0) {
+				return { success: false, error: 'Could not find frontmatter in source file' }
+			}
+			const freshFmContent = freshLines.slice(1, freshFmEnd - 1).join('\n')
+			const freshBounds = findArrayDeclaration(freshFmContent, 1, ctx.arrayVarName)
+			if (!freshBounds || arrayIndex >= freshBounds.length) {
+				return { success: false, error: 'Array declaration not found or index out of bounds after re-read' }
+			}
+
+			const bounds = freshBounds[arrayIndex]!
 			const removeStart = bounds.startLine
 			let removeEnd = bounds.endLine
 
@@ -387,8 +491,8 @@ export async function handleRemoveArrayItem(
 				// now becomes the last element (remove its trailing comma)
 			}
 
-			// Check line after removeEnd for a comma-only or blank line
-			if (removeEnd + 1 < freshLines.length && freshLines[removeEnd + 1]!.trim() === '') {
+			// Check line after removeEnd for a blank separator line (only between elements, not at start)
+			if (removeStart > 0 && removeEnd + 1 < freshLines.length && freshLines[removeEnd + 1]!.trim() === '') {
 				removeEnd++
 			}
 
@@ -454,14 +558,25 @@ export async function handleAddArrayItem(
 			return { success: false, error: 'Could not detect array pattern for this component' }
 		}
 
-		const { fullPath, elementBounds, arrayIndex } = ctx
+		const { fullPath, arrayIndex } = ctx
 
 		const release = await acquireFileLock(fullPath)
 		try {
+			// Re-read the file and recompute bounds to avoid stale data
 			const freshContent = await fs.readFile(fullPath, 'utf-8')
 			const freshLines = freshContent.split('\n')
 
-			const refBounds = elementBounds[arrayIndex]!
+			const freshFmEnd = findFrontmatterEnd(freshLines)
+			if (freshFmEnd === 0) {
+				return { success: false, error: 'Could not find frontmatter in source file' }
+			}
+			const freshFmContent = freshLines.slice(1, freshFmEnd - 1).join('\n')
+			const freshBounds = findArrayDeclaration(freshFmContent, 1, ctx.arrayVarName)
+			if (!freshBounds || arrayIndex >= freshBounds.length) {
+				return { success: false, error: 'Array declaration not found or index out of bounds after re-read' }
+			}
+
+			const refBounds = freshBounds[arrayIndex]!
 
 			// Generate JS object literal from props
 			const newElement = generateObjectLiteral(props)
@@ -482,7 +597,7 @@ export async function handleAddArrayItem(
 			if (position === 'before') {
 				// Insert before the reference element
 				const insertLine = refBounds.startLine
-				freshLines.splice(insertLine, 0, indentedLines + ',')
+				freshLines.splice(insertLine, 0, ...(indentedLines + ',').split('\n'))
 			} else {
 				// Insert after the reference element
 				const insertLine = refBounds.endLine + 1
@@ -491,17 +606,19 @@ export async function handleAddArrayItem(
 				if (!refEndLine.trimEnd().endsWith(',')) {
 					freshLines[refBounds.endLine] = refEndLine.replace(/(\s*)$/, ',$1')
 				}
-				freshLines.splice(insertLine, 0, indentedLines + ',')
+				freshLines.splice(insertLine, 0, ...(indentedLines + ',').split('\n'))
 			}
 
 			// Clean up trailing comma before closing bracket
-			// Find the closing ] and remove comma from the last element
-			for (let i = freshLines.length - 1; i >= 0; i--) {
+			// Search forward from the last element to find this array's closing ]
+			// The insertion always happens within the array, so the ] shifts by addedLineCount
+			const lastEl = freshBounds[freshBounds.length - 1]!
+			const addedLineCount = indentedLines.split('\n').length
+			const closingSearchStart = lastEl.endLine + addedLineCount + 1
+			for (let i = closingSearchStart; i < closingSearchStart + 5 && i < freshLines.length; i++) {
 				if (freshLines[i]!.trim().startsWith(']')) {
 					const prev = freshLines[i - 1]
 					if (prev?.trimEnd().endsWith(',')) {
-						// Check if this is the array we're editing by scanning backwards
-						// to find the array variable
 						freshLines[i - 1] = prev.replace(/,(\s*)$/, '$1')
 					}
 					break
@@ -528,7 +645,7 @@ export async function handleAddArrayItem(
  * Generate a JavaScript object literal string from props.
  * Example: { name: 'Components', slug: 'components' }
  */
-function generateObjectLiteral(props: Record<string, unknown>): string {
+export function generateObjectLiteral(props: Record<string, unknown>): string {
 	const entries = Object.entries(props)
 	if (entries.length === 0) return '{}'
 
@@ -545,9 +662,10 @@ function generateObjectLiteral(props: Record<string, unknown>): string {
 }
 
 function formatValue(value: unknown): string {
-	if (typeof value === 'string') return `'${value.replace(/'/g, "\\'")}'`
+	if (typeof value === 'string') return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
 	if (typeof value === 'number' || typeof value === 'boolean') return String(value)
-	if (value === null || value === undefined) return 'undefined'
+	if (value === null) return 'null'
+	if (value === undefined) return 'undefined'
 	if (Array.isArray(value)) return `[${value.map(formatValue).join(', ')}]`
 	if (typeof value === 'object') return generateObjectLiteral(value as Record<string, unknown>)
 	return String(value)

package/src/handlers/source-writer.ts

@@ -1,6 +1,6 @@
+import { NodeType, parse as parseHtml } from 'node-html-parser'
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import { NodeType, parse as parseHtml } from 'node-html-parser'
 import { getProjectRoot } from '../config'
 import type { AttributeChangePayload, ChangePayload, SaveBatchRequest } from '../editor/types'
 import type { ManifestWriter } from '../manifest-writer'

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,7 @@
 import type { Plugin } from 'vite'
 import type { ManifestWriter } from './manifest-writer'
 import type { CmsMarkerOptions, ComponentDefinition } from './types'
+import { createArrayTransformPlugin } from './vite-plugin-array-transform'
 
 export interface VitePluginContext {
 	manifestWriter: ManifestWriter
@@ -38,5 +39,5 @@ export function createVitePlugin(context: VitePluginContext): Plugin[] {
 	// 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, createArrayTransformPlugin()]
 }