solid-jsx icon indicating copy to clipboard operation
solid-jsx copied to clipboard

`useMdxComponents` should be part of the readme?

Open Blankeos opened this issue 1 year ago • 3 comments

//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

Blankeos avatar Oct 19 '24 20:10 Blankeos

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 avatar Oct 30 '24 22:10 high1

@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:

  1. ❗️ code won't render if not a fragment. (returning just div won't work) (Line 31)
  2. ❗️ code won'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

Blankeos avatar Oct 30 '24 23:10 Blankeos

Yes, there's something not working right. I'll fix this as soon as I find some time.

high1 avatar Nov 24 '24 18:11 high1