fix: image compiling

[kellyjosephprice]

	Resolves RM-10691

🧰 Changes

Fixes compiling images.

The problem was our naive transformer that could not handle non string attributes. For instance, using a false value would crash the compiler:

<Image border={false} />

This updates the toAttributes method to create the valid AST.

🧬 QA & Testing

Do the tests pass?

You could test it locally like:

npm i && npm run build
node
> const rmdx = require('./')
> rmdx.mdx(rmdx.mdast('<Image border={false} />'))

But that's roughly the same as the tests?

• Broken on production.
• Working in this PR app.

[rafegoldberg]

are these imports all types? can we specify that if so?

import type { Node } from 'mdast';
import type { MdxJsxFlowElement, MdxJsxTextElement, MdxFlowExpression } from 'mdast-util-mdx';
import type {
  MdxJsxAttribute,
  MdxJsxAttributeValueExpression,
  MdxJsxAttributeValueExpressionData,
} from 'mdast-util-mdx-jsx';

[rafegoldberg]

This else case is a bit hard to reason through without looking at the right test! Mind adding a comment here to clarify why/what the underlying issue is?

Suggested change

	} else {
	const proxy = mdast(`{${v}}`);
	const data = proxy.children[0].data as MdxJsxAttributeValueExpressionData;
	} else {
	/* serialize <Image> components with JSX expressions in
	* their attributes (i.e. [border={false}]) back to MDX.
	*/
	const proxy = mdast(`{${v}}`);
	const data = proxy.children[0].data as MdxJsxAttributeValueExpressionData;

[rafegoldberg]

Appreciate the quick turnaround on my review; reaffirming my approval!

[rafegoldberg]

This PR was released!

🚀 Changes included in v7.4.2