Mdx: With transclusion, is there any way to use in a second document variables exported in the parent document?

[kuworking]

My use case is to have independent mdx files with the same export const but different content, and then that each file imports (transcludes) a second mdx file that acts as a sort of template, but that should use those constants exported in the former (parent) doc

my_mdx_file.mdx

export const title = 'my title'

This is a provided component **Hello** by **MDXProvider**

<Hello />

This template is provided by **MDXProvider**

<Template />

template.mdx

This is the title

<div>{title}</div>

And this is the same component also accessible here

<Hello />

*I can just add a .js template, but I loss the mdx format and agility, and that this template should also have access to the same components provided by MDXProvider (in the js file I should import them)

[wooorm]

That seems to go a bit against encapsulation of components, and would make it hard to reason about your code because it’s unclear where data is coming from.

Does passing props into your components solve this?

[kuworking]

Is something like this possible?

my_mdx_file.mdx

export const title = 'my title'

This is a provided component **Hello** by **MDXProvider**

<Hello />

This template is provided by **MDXProvider**

<Template title ={title} />

template.mdx

This is the title

<div>{props.title}</div>

And this is the same component also accessible here

<Hello />

EDIT: I've seen you can 🙌🙌 could you pass a component?
EDIT2: Yes, just <Com mycom={Com} /> and there {props.mycom()}

Great!

[wooorm]

yup!

[kuworking]

I can see that variables are not always passed

In template.mdx, this works

This is the title

<ul>
 <li>
  <strong>me:</strong> <span>{props.title}</span>
 </li>
</ul>

But this doesn't work

This is the title

- **me:** <span>{props.title}</span>

Is this something going to change in v2.0? https://github.com/mdx-js/mdx/issues/628#issuecomment-618521671

[wooorm]

Most probably!

[kuworking]

Sorry to bother you again ... I can't see how can I have access to props inside a component (to modify them before deploying the text as I'd like)

Something like this renders empty props (so I cannot access them there), in template.mdx

This is the title

<ul>
 <li>
  <strong>me:</strong> <span>{props.title}</span>
 </li>
</ul>

export const NewCom = () => (
<>{console.log(props)}</>
)

export const NewCom2 = (props) => (
<>{console.log(props)}</>
)

[wooorm]

Looks like you’re not passing the props to your components?

[kuworking]

Completely right 👍

my_mdx_file.mdx

export const title = 'hey'
<Template title ={title} />

template.mdx

<div>{props.title] Here it works</div>

export const Title = (props) => <div>{props.title] Here it also works</div>

<Title title={props.title} />