SolidJS integration

[Blankeos]

I was looking into using https://github.com/high1/solid-jsx

and then adding

// velite.config.ts
{
  mdx: {
     jsxImportSource: "solid-jsx"
  }
}

Unfortunately still doesn't work. My content contains React strings still.

I've also been following the doc here: https://mdxjs.com/docs/getting-started/#solid. Not sure how I can relate it to Velite though.

[Blankeos]

Massive findings.

Install the following

    "@mdx-js/mdx": "^3.1.1", // Official mdx lib for parsing mdx, compiling mdx, rendering mdx with (react by default, unless you change the import source)
    "solid-jsx": "^1.1.4", // This is what you can use to change the import source.

Create the renderer component:

// mdx-content.tsx (I made it similar to 
import { run, runSync } from "@mdx-js/mdx"
import { createRenderEffect, createSignal, type JSX } from "solid-js"

// import * as runtime from 'solid-js/h/jsx-runtime' // ⚠️ I also tried, this as jsx import source. But this isn't isomorphic :( (not working in ssr, but if you only need client... Yes, you don't need to install solid-jsx to make mdx work on ssr).
import * as runtime from "solid-jsx"; // This is isomorphic.

interface MDXProps {
  code: string
  components?: Record<string, any>
}

export const MDXContent = (props: MDXProps): JSX.Element => {
  const [mdxModule, setMdxModule] = createSignal<any>()

  createRenderEffect(() => {
    ;(async () => {
      setMdxModule(await run(props.code, { ...(runtime as any), baseUrl: import.meta.url }))
    })()
  })

  const Content = () => mdxModule()?.default || (() => null)

  return Content as unknown as JSX.Element
}

export const MDXContentStatic = (props: MDXProps): JSX.Element => {
  const mdxModule = runSync(props.code, { ...(runtime as any), baseUrl: import.meta.url })

  const Content = () => mdxModule.default || (() => null)

  return Content as unknown as JSX.Element
}

Use it with Velite

import { docs } from "@velite" // your content from velite, mine is called 'docs'
import { MDXContentStatic } from "@/lib/velite/mdx-content"

export default function Page() {
   const params = useParams({ from: "/docs/@" }) // Get params using ur framework
   const slug = createMemo(() => params()["_@"])
   const doc = createMemo(() => docs.find((d) => `/${d.slugAsParams}` === slug()))

   return (
        <Show when={doc()?.slug} keyed>
          <MDXContext>
            <MDXContentStatic code={doc()!.content} />
          </MDXContext>
        </Show>
   )
}

---

What I haven't figured out yet (I'll come back here to add that)

• Custom components. Ideally be able to <MDXContent components={} /> for custom components, or overriding existing components.
• MDX Context (i.e. passing custom components there instead of passing it at every <MDXContent /> usage.