Correctly pass options to embedded parsers (withastro#339)

* Correctly pass options to embedded parsers

* Add changeset

* Add ignore and comment about why the types don’t match

* Add test

.changeset/long-cats-laugh.md

@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': patch
+---
+
+Correctly pass options to embedded parsers

src/printer/embed.ts

@@ -219,7 +219,11 @@ function forceIntoExpression(statement: string) {
 }
 
 function expressionParser(text: string, parsers: BuiltInParsers, options: ParserOptions) {
-	const ast = parsers['babel-ts'](text, options);
+	// @ts-ignore
+	// The type `RequiredOptions['parser]` is wrong. It uses `BuiltInParsers` as the type for the 2nd argument.
+	// However, the parsers produced by `getParsers()` include ALL registered parsers, not just the built-in ones.
+	// And the type of the built-in parsers and custom parsers all take (text[, parsers[, options]]) as arguments.
+	const ast = parsers['babel-ts'](text, parsers, options);
 
 	return {
 		...ast,

test/fixtures/other/embedded-expr-options/custom-plugin.js

@@ -0,0 +1,59 @@
+let prettierParserBabel = require('prettier/parser-babel');
+
+module.exports.options = {
+	customPluginClass: {
+		since: '1.0.0',
+		category: 'foo',
+		type: 'string',
+		default: 'my-default-class',
+		description: 'Replace all classes with this one.',
+	},
+};
+
+let original = prettierParserBabel.parsers['babel-ts'];
+
+/** @type {Record<string, import('prettier').Parser<any>>} */
+module.exports.parsers = {
+	'babel-ts': {
+		parse(text, parsers, options) {
+			let ast = original.parse(text, parsers, options);
+
+			let nodes = [ast.program];
+			while (nodes.length) {
+				let node = nodes.shift();
+				switch (node.type) {
+					case 'Program':
+						nodes.push(...node.body);
+						break;
+					case 'ExpressionStatement':
+						nodes.push(node.expression);
+						break;
+					case 'JSXExpressionContainer':
+						nodes.push(node.expression);
+						break;
+					case 'JSXFragment':
+						nodes.push(...node.children);
+						break;
+					case 'JSXElement':
+						nodes.push(node.openingElement);
+						nodes.push(...node.children);
+						break;
+					case 'JSXOpeningElement':
+						nodes.push(...node.attributes);
+						break;
+					case 'JSXAttribute':
+						if (node.name && node.name.type === 'JSXIdentifier' && node.name.name === 'class') {
+							node.value.value = `${options.customPluginClass}`;
+							node.value.extra = {
+								rawValue: node.value.value,
+								raw: `"${node.value.value}"`,
+							};
+						}
+						break;
+				}
+			}
+
+			return ast;
+		},
+	},
+};

test/fixtures/other/embedded-expr-options/input.astro

@@ -0,0 +1,5 @@
+<div>
+  {
+    <div class="foo bar"></div>
+  }
+</div>

test/fixtures/other/embedded-expr-options/options.js

@@ -0,0 +1,4 @@
+module.exports = {
+	plugins: [require.resolve('../../../../'), require.resolve('./custom-plugin.js')],
+	customPluginClass: 'my-custom-class',
+};

test/fixtures/other/embedded-expr-options/output.astro

@@ -0,0 +1,3 @@
+<div>
+  {(<div class="my-custom-class" />)}
+</div>

test/test-utils.ts

@@ -55,6 +55,10 @@ function getFiles(file: any, path: string, isMarkdown = false) {
 }
 
 function getOptions(files: any, path: string) {
+	if (files[`/test/fixtures/${path}/options.js`] !== undefined) {
+		return files[`/test/fixtures/${path}/options.js`].default;
+	}
+
 	let opts: object;
 	try {
 		opts = JSON.parse(files[`/test/fixtures/${path}/options.json`]);

test/tests/other.test.ts

@@ -1,13 +1,23 @@
 import { test } from '../test-utils';
 
-const files = import.meta.glob('/test/fixtures/other/*/*', {
-	eager: true,
-	as: 'raw',
-});
+const files = {
+	...import.meta.glob('/test/fixtures/other/*/*', {
+		eager: true,
+		as: 'raw',
+	}),
+	...import.meta.glob('/test/fixtures/other/*/*.js', {
+		eager: true,
+	}),
+};
 
 test('Can format an Astro file with frontmatter', files, 'other/frontmatter');
 
 test('Can format an Astro file with embedded JSX expressions', files, 'other/embedded-expr');
+test(
+	'Options are passed to other Prettier Plugins when parsing embedded JSX expressions',
+	files,
+	'other/embedded-expr-options'
+);
 
 test(
 	'Can format an Astro file with a `<!DOCTYPE html>` + embedded JSX expressions',