@gxp-dev/tools 2.0.63 → 2.0.64

package/runtime/vite-source-tracker-plugin.js

@@ -23,90 +23,101 @@
  * This correctly handles > characters inside quoted attribute values
  */
 function parseTagsFromHtml(html) {
-	const tags = [];
-	let i = 0;
+	const tags = []
+	let i = 0
 
 	const VOID_ELEMENTS = new Set([
-		"br", "hr", "img", "input", "meta", "link",
-		"area", "base", "col", "embed", "param",
-		"source", "track", "wbr"
-	]);
+		"br",
+		"hr",
+		"img",
+		"input",
+		"meta",
+		"link",
+		"area",
+		"base",
+		"col",
+		"embed",
+		"param",
+		"source",
+		"track",
+		"wbr",
+	])
 
 	while (i < html.length) {
 		// Look for tag start
 		if (html[i] === "<") {
-			const tagStart = i;
-			i++;
+			const tagStart = i
+			i++
 
 			// Check for closing tag
-			const isClosing = html[i] === "/";
-			if (isClosing) i++;
+			const isClosing = html[i] === "/"
+			if (isClosing) i++
 
 			// Skip if not a valid tag start (could be < in text or comment)
 			if (!/[a-zA-Z]/.test(html[i])) {
-				continue;
+				continue
 			}
 
 			// Parse tag name
-			let tagName = "";
+			let tagName = ""
 			while (i < html.length && /[a-zA-Z0-9-]/.test(html[i])) {
-				tagName += html[i];
-				i++;
+				tagName += html[i]
+				i++
 			}
 
 			// Parse attributes (skip whitespace and attributes until we hit > or />)
-			let attrs = "";
-			let inDoubleQuote = false;
-			let inSingleQuote = false;
-			let foundEnd = false;
-			let isSelfClosing = false;
+			let attrs = ""
+			let inDoubleQuote = false
+			let inSingleQuote = false
+			let foundEnd = false
+			let isSelfClosing = false
 
 			while (i < html.length && !foundEnd) {
-				const char = html[i];
+				const char = html[i]
 
 				if (inDoubleQuote) {
-					attrs += char;
+					attrs += char
 					if (char === '"') {
-						inDoubleQuote = false;
+						inDoubleQuote = false
 					}
-					i++;
+					i++
 				} else if (inSingleQuote) {
-					attrs += char;
+					attrs += char
 					if (char === "'") {
-						inSingleQuote = false;
+						inSingleQuote = false
 					}
-					i++;
+					i++
 				} else if (char === '"') {
-					attrs += char;
-					inDoubleQuote = true;
-					i++;
+					attrs += char
+					inDoubleQuote = true
+					i++
 				} else if (char === "'") {
-					attrs += char;
-					inSingleQuote = true;
-					i++;
+					attrs += char
+					inSingleQuote = true
+					i++
 				} else if (char === "/" && html[i + 1] === ">") {
-					isSelfClosing = true;
-					i += 2;
-					foundEnd = true;
+					isSelfClosing = true
+					i += 2
+					foundEnd = true
 				} else if (char === ">") {
-					i++;
-					foundEnd = true;
+					i++
+					foundEnd = true
 				} else {
-					attrs += char;
-					i++;
+					attrs += char
+					i++
 				}
 			}
 
 			if (!foundEnd) {
 				// Malformed tag, skip
-				continue;
+				continue
 			}
 
-			const fullMatch = html.substring(tagStart, i);
+			const fullMatch = html.substring(tagStart, i)
 
 			// Check for void elements
 			if (!isSelfClosing && VOID_ELEMENTS.has(tagName.toLowerCase())) {
-				isSelfClosing = true;
+				isSelfClosing = true
 			}
 
 			tags.push({
@@ -116,71 +127,71 @@ function parseTagsFromHtml(html) {
 				fullMatch,
 				isClosing,
 				isSelfClosing,
-			});
+			})
 		} else {
-			i++;
+			i++
 		}
 	}
 
-	return tags;
+	return tags
 }
 
 /**
  * Create the source tracker plugin
  */
 export function gxpSourceTrackerPlugin(options = {}) {
-	const { enabled = true, attrName = "data-gxp-expr" } = options;
+	const { enabled = true, attrName = "data-gxp-expr" } = options
 
 	return {
 		name: "gxp-source-tracker",
 		enforce: "pre",
 
 		apply(config, { command }) {
-			return enabled && command === "serve";
+			return enabled && command === "serve"
 		},
 
 		transform(code, id) {
 			if (!id.endsWith(".vue")) {
-				return null;
+				return null
 			}
 
-			const templateMatch = code.match(/<template>([\s\S]*?)<\/template>/);
+			const templateMatch = code.match(/<template>([\s\S]*?)<\/template>/)
 			if (!templateMatch) {
-				return null;
+				return null
 			}
 
 			// Debug: log which file we're processing
-			const fileName = id.split("/").pop();
-			console.log(`[GxP Source Tracker] Processing: ${fileName}`);
+			const fileName = id.split("/").pop()
+			console.log(`[GxP Source Tracker] Processing: ${fileName}`)
 
-			let template = templateMatch[1];
-			let modified = false;
+			let template = templateMatch[1]
+			let modified = false
 
 			// Process each element that has {{ expression }} as its content
 			// Strategy: Find each {{ expression }} and trace back to find its parent element
 
-			const exprPattern = /\{\{([\s\S]*?)\}\}/g;
-			let match;
+			const exprPattern = /\{\{([\s\S]*?)\}\}/g
+			let match
 
 			// Map to track which elements we've already added attributes to
 			// Key: element start position, Value: array of expressions
-			const elementExpressions = new Map();
+			const elementExpressions = new Map()
 
 			while ((match = exprPattern.exec(template)) !== null) {
-				const exprStart = match.index;
-				const expression = match[1].trim();
+				const exprStart = match.index
+				const expression = match[1].trim()
 
 				// Find the opening tag that contains this expression
 				// Look backwards from the expression to find the nearest unclosed tag
-				const beforeExpr = template.substring(0, exprStart);
+				const beforeExpr = template.substring(0, exprStart)
 
 				// Use state-machine parser for reliable tag parsing
-				const tags = parseTagsFromHtml(beforeExpr);
+				const tags = parseTagsFromHtml(beforeExpr)
 
 				// Walk through tags to find the immediate parent (last unclosed tag)
-				const stack = [];
+				const stack = []
 				for (const tag of tags) {
-					if (tag.isSelfClosing) continue;
+					if (tag.isSelfClosing) continue
 
 					if (tag.isClosing) {
 						// Pop from stack
@@ -189,152 +200,160 @@ export function gxpSourceTrackerPlugin(options = {}) {
 							stack[stack.length - 1].tagName.toLowerCase() ===
 								tag.tagName.toLowerCase()
 						) {
-							stack.pop();
+							stack.pop()
 						}
 					} else {
-						stack.push(tag);
+						stack.push(tag)
 					}
 				}
 
 				// The last item in the stack is our parent element
 				if (stack.length > 0) {
-					const parentTagInfo = stack[stack.length - 1];
+					const parentTagInfo = stack[stack.length - 1]
 
 					// Skip script/style tags
 					if (
 						["script", "style"].includes(parentTagInfo.tagName.toLowerCase())
 					) {
-						continue;
+						continue
 					}
 
 					// Skip if already has data-gxp-expr in the original attrs
 					if (parentTagInfo.attrs.includes(attrName)) {
-						continue;
+						continue
 					}
 
 					// Add this expression to the parent element's list
-					const key = parentTagInfo.start;
+					const key = parentTagInfo.start
 					if (!elementExpressions.has(key)) {
 						elementExpressions.set(key, {
 							tagInfo: parentTagInfo,
 							expressions: [],
-						});
+						})
 					}
-					elementExpressions.get(key).expressions.push(expression);
+					elementExpressions.get(key).expressions.push(expression)
 				}
 			}
 
 			// Now build replacements for each element that has expressions
-			const replacements = [];
+			const replacements = []
 
 			for (const [start, data] of elementExpressions) {
-				const { tagInfo, expressions } = data;
+				const { tagInfo, expressions } = data
 
 				// Only add expressions that are direct children (not from nested elements)
 				// For now, take all unique expressions
-				const uniqueExprs = [...new Set(expressions)];
-				const exprValue = uniqueExprs.join("; ");
+				const uniqueExprs = [...new Set(expressions)]
+				const exprValue = uniqueExprs.join("; ")
 
-				const oldOpenTag = tagInfo.fullMatch;
+				const oldOpenTag = tagInfo.fullMatch
 				// Insert the attribute before the closing > or />
-				let newOpenTag;
+				let newOpenTag
 				if (oldOpenTag.endsWith("/>")) {
-					newOpenTag = oldOpenTag.slice(0, -2) + ` ${attrName}="${escapeAttr(exprValue)}"/>`;
+					newOpenTag =
+						oldOpenTag.slice(0, -2) +
+						` ${attrName}="${escapeAttr(exprValue)}"/>`
 				} else {
-					newOpenTag = oldOpenTag.slice(0, -1) + ` ${attrName}="${escapeAttr(exprValue)}">`;
+					newOpenTag =
+						oldOpenTag.slice(0, -1) + ` ${attrName}="${escapeAttr(exprValue)}">`
 				}
 
 				replacements.push({
 					start: tagInfo.start,
 					oldText: oldOpenTag,
 					newText: newOpenTag,
-				});
+				})
 
-				modified = true;
+				modified = true
 			}
 
 			// Apply replacements in reverse order to preserve indices
-			replacements.sort((a, b) => b.start - a.start);
+			replacements.sort((a, b) => b.start - a.start)
 			for (const r of replacements) {
 				template =
 					template.substring(0, r.start) +
 					r.newText +
-					template.substring(r.start + r.oldText.length);
+					template.substring(r.start + r.oldText.length)
 			}
 
 			// Also handle v-html, v-text directives using state-machine approach
-			template = addAttrToDirective(template, "v-html", attrName);
-			template = addAttrToDirective(template, "v-text", attrName);
-			template = addAttrToDirective(template, ":textContent", attrName);
+			template = addAttrToDirective(template, "v-html", attrName)
+			template = addAttrToDirective(template, "v-text", attrName)
+			template = addAttrToDirective(template, ":textContent", attrName)
 
 			if (!modified && !template.includes(attrName)) {
-				console.log(
-					`[GxP Source Tracker] No expressions found in: ${fileName}`
-				);
-				return null;
+				console.log(`[GxP Source Tracker] No expressions found in: ${fileName}`)
+				return null
 			}
 
 			console.log(
-				`[GxP Source Tracker] Added data-gxp-expr to ${elementExpressions.size} elements in: ${fileName}`
-			);
+				`[GxP Source Tracker] Added data-gxp-expr to ${elementExpressions.size} elements in: ${fileName}`,
+			)
 			const newCode = code.replace(
 				/<template>[\s\S]*?<\/template>/,
-				`<template>${template}</template>`
-			);
+				`<template>${template}</template>`,
+			)
 
 			return {
 				code: newCode,
 				map: null,
-			};
+			}
 		},
-	};
+	}
 }
 
 /**
  * Add data-gxp-expr attribute to elements with a specific directive
  */
 function addAttrToDirective(template, directive, attrName) {
-	const tags = parseTagsFromHtml(template);
-	const replacements = [];
+	const tags = parseTagsFromHtml(template)
+	const replacements = []
 
 	for (const tag of tags) {
-		if (tag.isClosing) continue;
-		if (tag.fullMatch.includes(attrName)) continue;
+		if (tag.isClosing) continue
+		if (tag.fullMatch.includes(attrName)) continue
 
 		// Check if this tag has the directive
-		const directivePattern = new RegExp(`${escapeRegex(directive)}="([^"]*)"`, "g");
-		const match = directivePattern.exec(tag.attrs);
+		const directivePattern = new RegExp(
+			`${escapeRegex(directive)}="([^"]*)"`,
+			"g",
+		)
+		const match = directivePattern.exec(tag.attrs)
 		if (match) {
-			const exprValue = `${directive}:${match[1]}`;
-			let newOpenTag;
+			const exprValue = `${directive}:${match[1]}`
+			let newOpenTag
 			if (tag.fullMatch.endsWith("/>")) {
-				newOpenTag = tag.fullMatch.slice(0, -2) + ` ${attrName}="${escapeAttr(exprValue)}"/>`;
+				newOpenTag =
+					tag.fullMatch.slice(0, -2) +
+					` ${attrName}="${escapeAttr(exprValue)}"/>`
 			} else {
-				newOpenTag = tag.fullMatch.slice(0, -1) + ` ${attrName}="${escapeAttr(exprValue)}">`;
+				newOpenTag =
+					tag.fullMatch.slice(0, -1) +
+					` ${attrName}="${escapeAttr(exprValue)}">`
 			}
 
 			replacements.push({
 				start: tag.start,
 				oldText: tag.fullMatch,
 				newText: newOpenTag,
-			});
+			})
 		}
 	}
 
 	// Apply replacements in reverse order
-	replacements.sort((a, b) => b.start - a.start);
+	replacements.sort((a, b) => b.start - a.start)
 	for (const r of replacements) {
 		template =
 			template.substring(0, r.start) +
 			r.newText +
-			template.substring(r.start + r.oldText.length);
+			template.substring(r.start + r.oldText.length)
 	}
 
-	return template;
+	return template
 }
 
 function escapeRegex(str) {
-	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
 }
 
 function escapeAttr(str) {
@@ -343,7 +362,7 @@ function escapeAttr(str) {
 		.replace(/"/g, "&quot;")
 		.replace(/'/g, "&#39;")
 		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;");
+		.replace(/>/g, "&gt;")
 }
 
-export default gxpSourceTrackerPlugin;
+export default gxpSourceTrackerPlugin