`mdxJsxToMarkdown` to apply `printWidth` property to attribute's value that are longer than the given length

[AlbertMukarsel]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

given a JSX component in the AST form, after passing it to the mdxJsxToMarkdown() with the printWidth property set to 80, here's how it returns:

<Component
    title="My Title"
    description="My description"
    longValue={[{"title":"Link 1","link":"/path/1"},{"title":"Link 2","link":"/path/2"},{"title":"Link 3","link":"/path/3"},{"title":"Link 4","link":"/path/4"}]}
/>

The syntax of an attribute's value should be affected too by the printWidth property

Solution

The component should be returned like this:

<Component
    title="My Title"
    description="My description"
    longValue={[
            {"title":"Link 1","link":"/path/1"},
            {"title":"Link 2","link":"/path/2"},
            {"title":"Link 3","link":"/path/3"},
            {"title":"Link 4","link":"/path/4"},
    ]}
/>

Alternatives

N/A

[wooorm]

Hey.

This is outside of the scope of this project.
This project doesn’t delve into the JavaScript that you specify. It doesn’t have the features such as Prettier that you are looking for.

It doesn’t even consider what‘s inside that attribute. It’s just a string value: https://github.com/syntax-tree/mdast-util-mdx-jsx/blob/15da3704395cd3c541dfcfe9fb28029674331f1c/lib/index.js#L560-L561C48

It would likely be nice to create a project that does this though.
I would make a broader scope: format the JavaScript in ESM blocks (export/import) and in expressions (a { 2 } b, trim it?), and also look at attributes like this.

It can live in this repo but shouldn’t be shipped by default, or you can make it yourself and maintain it, or maybe you can do most of the work to create it. Let me know if you need advise on how to create it!

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.