Which acorn options?

[hahnbeelee]

I want to inject this element:

export default (props) => <_Default {...props} tableOfContents={tableOfContents} apiComponents={apiComponents}>{props.children}</_Default>

But, when I do this I get an error 'Unexpected Token':

import { parse } from 'acorn';

const withLayouts = () => {
  return (tree) => {
    tree.children.push({
      type: 'mdxjsEsm',
      data: {
        estree: parse(
          `export default (props) => <_Default {...props} tableOfContents={tableOfContents} apiComponents={apiComponents}>{props.children}</_Default>`,
          {
             sourceType: 'module',
             ecmaVersion: 2020,
          }
        )
      }
    });
  };

export default withLayouts;

I know this line of code works when I put it in the mdx file. Am I using the correct options?

[wooorm]

Can you share more about the error?
value should also be set on ESM nodes btw.
If the error is in Acorn, it’s a problem there.

[hahnbeelee]

The error is ./src/pages/introduction.mdx SyntaxError: Unexpected token (1:26)

Do you know if I'm using the correct options for the acorn parse function? I wasn't able to find that information in this repo.

[hahnbeelee]

But, I'll also leave a discussion in the acorn repo, thanks!

[wooorm]

Not enough info on the stack trace for me to figure it out.
See https://mdxjs.com/community/support/ for more info. The more you can share, the better we can help you!

[ChristianMurphy]

Adding on to what @wooorm shared for support.
If/when sandbox there are some starters which can make it easier to create a running example for folks to take a look at.

description	codesandbox	stackblitz
MDX Loader with Next.js	codesandbox	stackblitz
MDX Evaluate with Node.js	codesandbox	stackblitz
MDX Evaluate with Create React App	codesandbox	stackblitz

[remcohaszing]

It looks like you’re not actually interested in parsing JavaScript using acorn. Your code parses a hardcoded string of JavaScript with JSX.

I recommend to paste the code into https://astexplorer.net (make sure to use the JavaScript language and acorn parser), then copy the JSON output on the side and strip any positional information.

I suspect this is a minimal scenario and your real use case contains some variables. Once you get used working with the AST you’ll find it to be much safer to use and more powerful than string manipulations. For an example of how to use this, you can have a look at remark-mdx-frontmatter.

If you really do need to parse JavaScript from a string and it may contain JSX, you should use acorn-jsx. For example remark-mdx-code-meta uses this to parse the code block meta field as if it uses JSX props.

[hahnbeelee]

Thanks! I'll make sure to check out acorn-jsx.

Yeah, this ended up being my solution:

const withLayouts = () => {
  return (tree) => {
    tree.children.push({
      type: 'mdxjsEsm',
      value: `export default (props) => <_Default {...props} tableOfContents={tableOfContents} apiComponents={apiComponents}>{props.children}</_Default>`,
      data: {
        estree: {
          type: 'Program',
          sourceType: 'module',
          body: [
            {
              type: 'ExportDefaultDeclaration',
              declaration: {
                type: 'ArrowFunctionExpression',
                async: false,
                expression: true,
                generator: false,
                id: null,
                body: {
                  type: 'JSXElement',
                  children: [
                    {
                      type: 'JSXExpressionContainer',
                      expression: {
                        type: 'MemberExpression',
                        computed: false,
                        optional: false,
                        object: {
                          name: 'props',
                          type: 'Identifier',
                        },
                        property: {
                          name: 'children',
                          type: 'Identifier',
                        },
                      },
                    },
                  ],
                  closingElement: {
                    type: 'JSXClosingElement',
                    name: {
                      type: 'JSXIdentifier',
                      name: '_Default',
                    },
                  },
                  openingElement: {
                    type: 'JSXOpeningElement',
                    selfClosing: false,
                    name: {
                      type: 'JSXIdentifier',
                      name: '_Default',
                    },
                    attributes: [
                      {
                        type: 'JSXSpreadAttribute',
                        argument: {
                          type: 'Identifier',
                          name: 'props',
                        },
                      },
                      {
                        type: 'JSXAttribute',
                        name: {
                          type: 'JSXIdentifier',
                          name: 'tableOfContents',
                        },
                        value: {
                          type: 'JSXExpressionContainer',
                          expression: {
                            type: 'Identifier',
                            name: 'tableOfContents',
                          },
                        },
                      },
                      {
                        type: 'JSXAttribute',
                        name: {
                          type: 'JSXIdentifier',
                          name: 'apiComponents',
                        },
                        value: {
                          type: 'JSXExpressionContainer',
                          expression: {
                            type: 'Identifier',
                            name: 'apiComponents',
                          },
                        },
                      },
                    ],
                  },
                },
                params: [
                  {
                    type: 'Identifier',
                    name: 'props',
                  },
                ],
              },
            },
          ],
        },
      },
    });
  };
};

export default withLayouts;

[remcohaszing]

The value as a string is ignored, but it is required by the type interface. I tend to just use an empty string for that, especially when generating content dynamically.