`useMdxComponents` should be part of the readme?
//Parent
<MDXProvider
components={{
code(props: any): JSX.Element {
const [ref, setRef] = createSignal<HTMLPreElement | undefined>();
createEffect(async () => {
const current = ref();
const content = props.children;
if (current && content) {
const result = await codeToHtml(content, {
lang: 'typescript',
theme: 'vitesse-dark',
});
current.innerHTML = result;
}
});
return <div ref={setRef}></div>;
},
}}
>
{props.children}
</MDXProvider>
// Child (Doesn't work) ❌
import Awesome from "./awesome.mdx"
// ...
return (
<Awesome />
)
// Child (Works) ✅
import Awesome from "./awesome.mdx"
// ...
// @ts-ignore (Also, there seems to be a bug on just Types for this atm, I can't get rid of the error unless I ts-ignore it)
const components = useMdxComponents();
return (
<Awesome components={components} />
)
I think this should be part of the docs because I was more under the impression that if I had the context wrapped, I won't need to manually consume it. (Similar to this: https://stackoverflow.com/a/56636389/8622733). So I think it's important to note that it needs to be manually consumed.
Second, any solutions to the type error when using useMdxComponents()?
Version currently installed 1.1.4
Could you give me a complete repro? I was working on an update, and hoping to push something more substantial in the coming days, after a period of inactivity.
@high1 Sure thing!
I discovered some more bugs while making this repro. But it seems to only happen here in this minimal example so idk I just goofed up the setup. Because for my actual project that uses it, it doesn't have these issues:
- ❗️
codewon't render if not a fragment. (returning just div won't work) (Line 31) - ❗️
codewon't render if no extra content inside fragment? (Line 34)
But make sure to check what I'm addressing in this Issue though:
3.❗️ components won't render unless using useMdxComponents() (Line 50)
Repro: https://codesandbox.io/p/devbox/ym5c82
Yes, there's something not working right. I'll fix this as soon as I find some time.