Resolve include selectors with parameters

Author: nesvizhskie

acumate-plugin/src/services/html-field-context-service.ts

@@ -16,6 +16,7 @@ import { findParentViewName, findViewNameAtOrAbove } from '../providers/html-sha
 import { resolveIncludeFilePath } from './include-service';
 import {
 	BaseScreenDocument,
+	createParameterizedHtmlDocument,
 	getCustomizationSelectorAttributes,
 	isCustomizationSelectorAttribute,
 	loadHtmlDocument,
@@ -342,11 +343,17 @@ export function getIncludeFieldContext(options: {
 		return undefined;
 	}
 
+	const parameterValues = getIncludeParameterValues(includeNode);
+	const templateDocument = templateContext.templateDocument
+		? createParameterizedHtmlDocument(templateContext.templateDocument, parameterValues)
+		: undefined;
+
 	return {
 		...templateContext,
+		templateDocument,
 		includeNode,
 		includePath: normalizedIncludePath,
-		parameterValues: getIncludeParameterValues(includeNode),
+		parameterValues,
 		hostScreenClasses: options.hostScreenClasses,
 	};
 }

acumate-plugin/src/services/screen-html-service.ts

@@ -23,7 +23,7 @@ export interface SelectorQueryResult {
 	error?: string;
 }
 
-const customizationSelectorAttributes = ["before", "after", "append", "prepend", "prepand", "move", "remove"] as const;
+const customizationSelectorAttributes = ["modify", "before", "after", "append", "prepend", "prepand", "move", "remove"] as const;
 const customizationSelectorAttributeSet = new Set<string>(
 	customizationSelectorAttributes.map(attribute => attribute.toLowerCase())
 );
@@ -134,6 +134,20 @@ export function queryBaseScreenElements(document: BaseScreenDocument, selector:
 	}
 }
 
+export function createParameterizedHtmlDocument(
+	document: BaseScreenDocument,
+	parameterValues: Map<string, string>
+): BaseScreenDocument {
+	const dom = parseHtml(document.content);
+	applyTemplateParametersToNodes(dom, parameterValues);
+
+	return {
+		filePath: document.filePath,
+		content: document.content,
+		dom,
+	};
+}
+
 export function getDocumentForNode(
 	document: BaseScreenDocument,
 	node: any
@@ -173,6 +187,33 @@ function parseHtml(content: string): any[] {
 	return domTree;
 }
 
+function applyTemplateParametersToNodes(
+	nodes: any[] | undefined,
+	parameterValues: Map<string, string>
+) {
+	if (!nodes) {
+		return;
+	}
+
+	for (const node of nodes) {
+		if (node?.attribs) {
+			for (const [attributeName, attributeValue] of Object.entries(node.attribs)) {
+				if (typeof attributeValue === "string") {
+					node.attribs[attributeName] = applyTemplateParameters(attributeValue, parameterValues);
+				}
+			}
+		}
+
+		applyTemplateParametersToNodes(node?.children, parameterValues);
+	}
+}
+
+function applyTemplateParameters(value: string, parameterValues: Map<string, string>): string {
+	return value.replace(/{{\s*([^#\/^}\s]+)\s*}}/g, (match, parameterName: string) => (
+		parameterValues.has(parameterName) ? parameterValues.get(parameterName) ?? "" : match
+	));
+}
+
 function tryGetMtime(targetPath: string): number | undefined {
 	try {
 		return fs.statSync(targetPath).mtimeMs;

acumate-plugin/src/test/fixtures/html/TestParameterizedIncludeSelectors.html

@@ -0,0 +1,9 @@
+<qp-root>
+	<qp-include
+		url="src/test/fixtures/includes/form-contact-document.html"
+		fs-id="contactPanel"
+		contact-view="ContactView"
+	>
+		<field modify="#contactPanel [name='Email']" after="#contactPanel [name='Attention']"></field>
+	</qp-include>
+</qp-root>

acumate-plugin/src/test/fixtures/html/TestParameterizedIncludeSelectorsInvalid.html

@@ -0,0 +1,9 @@
+<qp-root>
+	<qp-include
+		url="src/test/fixtures/includes/form-contact-document.html"
+		fs-id="contactPanel"
+		contact-view="ContactView"
+	>
+		<field modify="#contactPanel [name='MissingEmail']" after="#contactPanel [name='Attention']"></field>
+	</qp-include>
+</qp-root>

acumate-plugin/src/test/suite/htmlValidation.test.ts

@@ -357,6 +357,27 @@ describe('HTML validation diagnostics', () => {
 		);
 	});
 
+	it('validates qp-include child selectors after applying include parameters', async () => {
+		const document = await openFixtureDocument('TestParameterizedIncludeSelectors.html');
+		await validateHtmlFile(document);
+		const diagnostics = AcuMateContext.HtmlValidator?.get(document.uri) ?? [];
+		assert.strictEqual(
+			diagnostics.filter(d => d.message.includes('selector')).length,
+			0,
+			'Expected no selector diagnostics for parameterized qp-include selectors'
+		);
+	});
+
+	it('reports invalid qp-include modify selectors after applying include parameters', async () => {
+		const document = await openFixtureDocument('TestParameterizedIncludeSelectorsInvalid.html');
+		await validateHtmlFile(document);
+		const diagnostics = AcuMateContext.HtmlValidator?.get(document.uri) ?? [];
+		assert.ok(
+			diagnostics.some(d => d.message.includes('modify selector') && d.message.includes('MissingEmail')),
+			'Expected diagnostic for invalid parameterized qp-include modify selector'
+		);
+	});
+
 	it('accepts qp-template name values defined by ScreenTemplates', async () => {
 		const document = await openFixtureDocument('TestQpTemplate.html');
 		await validateHtmlFile(document);