Filter children in wrapper with MDX 2

[acelaya]

I have a Nextjs-based blog, where I use MDX for the posts.

Posts can be displayed in the post detail, where the whole content is rendered, or the posts list, where just the "first lines" are displayed.

With MDX 1 I used to do this by providing a wrapper which was able to "pick" only the first couple children from the JSX "rendered" from the MDX.

Something in these lines:

import { Children } from 'react';
import { MDXProvider } from '@mdx-js/react';
import dynamic from 'next/dynamic';

const wrapper = ({ children }) => <>{Children.toArray(children).slice(0, 5)}</>;

export const PostPreview = ({ post }) => {
  const Content = dynamic(() => import(`../posts/${post.fileName}`));

  return (
    <MDXProvider components={{ wrapper }}>
      <Content />
    </MDXProvider>
  );
};

This does not seem to be possible anymore with MDX 2, as it seems to pass just one wrapping component when using the wrapper. This component does not have children, so there's no way to do the above.

This issue seems to be somehow related: #2029

PS: I know this is a very hacky approach to truncate the article content. I'm open to ideas if there's a better alternative.

[wooorm]

Indeed, it’s impossible.

On your question:

• You don’t need the provider:

  import { Children } from 'react';
  import dynamic from 'next/dynamic';
  
  const wrapper = ({ children }) => <>{Children.toArray(children).slice(0, 5)}</>;
  
  export const PostPreview = ({ post }) => {
    const Content = dynamic(() => import(`../posts/${post.fileName}`));
  
    return (
      <Content components={{ wrapper }} />
    );
  };

• as you mention, this is a “hacky approach”. The proper place to do these things is I believe on the AST.
  One of the rehype projects of interest is https://github.com/rehypejs/rehype-infer-description-meta. It gives you a truncated string of a description of a page.
  To get rich data instead of a plain text string, you can pass options, e.g.,

  mdx/website/mdx-config.js

  Line 68 in 38c2d46

  {inferDescriptionHast: true, truncateSize: 280}

  .
  That plugin exposes data on the file, which you can later process how you want.
  You could turn the descriptionHast into a string of HTML and export it, or you could expose it as an exported component from your files for example.

[wooorm]

Do you mean from the mdx files?

How I solve most programming questions that I myself have, is by figuring out the input I have and output I want.

So we know your input: an MDX document
And we know what to get out of it: first a string as a MVP (but we can do the rest later)!
But the question for you is, what output do you want?

Say for:

# hi

Lorem ipsum.

How do you want to get that description out?
Currently, that MDX is equivalent to:

export default function MDXContent(props) { /* … */ }

Would you want it to be equivalent to something like this:

export const description = 'Hi\n\nLorem ipsum.'

export default function MDXContent(props) { /* … */ }

next/mdx

next/mdx is just a branded wrapper around our webpack loader for Next.js to hide the fact that its a webpack loader. Anything you can do with MDX, you can do with their wrapper.

[acelaya]

Would you want it to be equivalent to something like this:

On paper I would say that would work for me, yes. I'm also exporting metadata already.

That said, I think it might be a problem when combined with Next's dynamic. I say this based on some of my tests from yesterday. However, I should be able to change the approach there, so for simplicity, let's say yes, that's what I want.

As per description content, as of now, what I'm displaying is the first 5 components/elements, whatever they are (heading, paragraph, list, etc), and with the same style.

It would be ideal to keep that behavior, but again, let's first try to get something working. Once I understand it I can probably figure that out myself.

[wooorm]

Alright! So now we know the output you want, we can make a plugin to do that.
When making plugins, I like to look at examples. Here are some plugins specific to MDX, and most of them do something very close to what you want: https://mdxjs.com/docs/extending-mdx/#list-of-plugins.
E.g., https://github.com/remcohaszing/remark-mdx-frontmatter.
Or: https://github.com/remcohaszing/rehype-mdx-title/blob/main/index.ts.

The earlier plugin exposes the description it finds at file.data.meta.description. You can access that in your plugin. Something along the following pseudocode:

/**
 * @typedef {import('remark-mdx')}
 * @typedef {import('rehype-infer-title-meta')}
 */

/** @type {import('unified').Plugin<[], import('hast').Root>} */
export default function myRehypeMdxPluginInjectingDescription() {
  return (tree, file) => {
    const value = file.data.meta?.description

    if (typeof value === 'string') {
      tree.children.unshift({
        type: 'mdxjsEsm',
        value: '',
        data: {
          estree: {
            type: 'Program',
            sourceType: 'module',
            body: [
              {
                type: 'ExportNamedDeclaration',
                source: null,
                specifiers: [],
                declaration: {
                  type: 'VariableDeclaration',
                  kind: 'const',
                  declarations: [
                    {
                      type: 'VariableDeclarator',
                      id: {type: 'Identifier', name: 'description'},
                      init: {type: 'Literal', value}
                    }
                  ]
                }
              }
            ]
          }
        }
      })
    }
  }
}

[acelaya]

Nice!

I think I'm starting to understand things. I'll give it a try this afternoon.

Thanks a lot for the extensive help.

[acelaya]

@wooorm this works pretty nicely!

With the string it doesn't look exactly the same (maybe I try to tweak it later, or check other rehype plugins), but to be honest, I may like this even better than what I had before.

Also, I had to switch from this:

const Content = dynamic(() => import(`../posts/${post.fileName}`));
return <Content components={mdxComponents} />;

To something in these lines:

const [summary, setSummary] = useState('');

useEffect(() => {
  import(`../posts/${post.fileName}`).then(({ description }) => setSummary(description));
}, []);

return <p>{summary}</p>;

Other than that, I can finish now the update and come back to this later.

Thanks again!

[acelaya]

From @wooorm

#2189 (reply in thread)

[shepmaster]

I had a similar problem — a slide deck where I want to grab the JSX elements from my MDX file, group them based on some rules, then dynamically control which slide(s) are shown on screen.

In MDX1, I did the same thing you did — used components={{ wrapper: MyAwesomeComponent }} and then mucked around with the children.

In MDX2, I added a little one-off remark plugin that wraps the entire result in my component:

const wrapIt = () => {
  const transformer = (tree) => {
    const wrapItNode = {
      type: 'mdxJsxFlowElement',
      name: 'MyAwesomeComponent',
      attributes: [],
      children: tree.children,
    };

    tree.children = [wrapItNode];
  };

  return transformer;
};

And then I pass that component via the previous wrapper technique: components={{ MyAwesomeComponent }}.

This allowed me to upgrade to MDX2 with minimal changes.