How to add an import while traversing in a remark plugin?

[Codpoe]

Hi, what I want to achieve is:
input:

# Title
<Demo src="./Button.tsx" />

output:

import * as __demo_0 from './Button.tsx';

# Title
<Demo {...__demo_0}>
  <__demo_0.default />
</Demo>

So I write a plugin like this:

export function demoMdxPlugin() {
  return tree => {
    visit(tree, 'mdxJsxFlowElement', (node, index) => {
      let src: string | undefined = node.attributes?.find(
        attr => attr.name === 'src' && typeof attr.value === 'string'
      )?.value;

      if (!src) {
        return;
      }

      const imported = `__demo_${index}`;
      const importStr = `import * as ${imported} from '${getDemoModuleId(
        src
      )}';`;

     // add import to root tree
      tree.children.push({
        type: 'mdxjsEsm',
        value: importStr,
      });

      // add component children
      node.children.push({
        type: 'mdxJsxFlowElement',
        name: `${imported}.default`,
      });

      return SKIP;
    });
  };
}

But it doesn't work as expected, and throw an error in runtime:

Error: Expected object `__demo_1` to be defined: you likely forgot to import, pass, or provide it.

I was wondering if there was any way to do that. Thanks!

[Codpoe]

In mdx v1, it seemed like I could do this in a way like this:

tree.children.unshift({
      type: 'import',
      value: 'import * as __demo_0 from './Button.tsx';',
});

[wooorm]

We now have a proper AST for these things. You can look at the existing plugins that use it for inspiration: https://mdxjs.com/docs/extending-mdx/#list-of-plugins.

Note, from your existing attempts, the main thing is: we handle ASTs now, not strings. So the main difference is that you need to define an AST. Not a string.

[pgarciacamou]

I hope this helps someone.

I'm a newb at this, so I couldn't figure out for the life of me what was going on!

Thanks to your comment @wooorm, it finally clicked! I'm now using abstract-syntax-tree to parse the code into AST and inject it into the tree!

import AST from "abstract-syntax-tree";

const importStr = "import Whatever from './path/to/whatever'"
const exportStr = "export default Whatever;"
tree.children.unshift(
  {
    type: "mdxjsEsm",
    value: importStr,
    data: {
      estree: AST.parse(importStr),
    },
  },
  {
    type: "mdxjsEsm",
    default: true,
    value: exportStr,
    data: {
      estree: AST.parse(exportStr),
    },
  }
);

[wooorm]

• perf: because parsing strings into objects is very slow. Particularly if the string is not going to change
• security: because your probably either a) letting users define that string, which is unsafe as they can inject unsafe things, or b) building that string some other way, which is unsafe because it will probably go wrong

[pgarciacamou]

Oh! Got it. I'm using this for my personal website using Next.js at build time, that's why I was looking into simplification, but I totally agree with your concerns.

If it is not too much to ask, do you use or recommend an online tool instead to generate your AST? This would be especially useful for developers like me that are simply looking at side projects.

For example, would you recommend https://astexplorer.net/?

[ChristianMurphy]

If it is not too much to ask, do you use or recommend an online tool instead to generate your AST? This would be especially useful for developers like me that are simply looking at side projects.

I'd recommend https://mdxjs.com/playground/ which includes AST information for the Markdown AST (mdast), HTML AST (hast), and EcmaScript AST (esast) at the bottom.

For example, would you recommend https://astexplorer.net/?

I'm a fan of ASTExplorer in general.
Though be aware, it is currently behind on the MDX version, and doesn't have the full AST information.
fkling/astexplorer#689 aims to address this, but hasn't been merged yet.

[wooorm]

I personally also use ASTExplorer to look at the estree AST (from acorn), to figure out what to inject.

simply looking at side projects

I feel like most of contemporary open source in the JavaScript world is side projects ;)
Of course, you can choose how you want to solve things, what works for you, what’s enough.
But this is a place where people ask questions, and take answers from, so it’s important to show good examples here, instead of things that will likely cause problems for folks!

[pgarciacamou]

Awesome, thank you both for your help!

[rick-chou]

just use components props

import Demo from './demo';
......

 <MDXProvider
    components={{
      Demo: props => < Demo {...props} />,
    }}>
    {children}
</MDXProvider>