Integration for SolidJS

[high1]

Hello. My goal is to try to create an integration for SolidJS users. The issue here is that SolidJS is a JSX compiler, not a runtime - and it can't create components from text tags, so using this sample

## Hello, world!

<div className="note">
  > Some notable things in a block quote!
</div>

the compiled output would be

/*@jsxRuntime automatic @jsxImportSource solid-js*/
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? <MDXLayout {...props}><_createMdxContent /></MDXLayout> : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      h2: "h2",
      blockquote: "blockquote",
      p: "p"
    }, props.components);
    return <><_components.h2>{"Hello, world!"}</_components.h2>{"\n"}<div className="note"><_components.blockquote>{"\n"}<_components.p>{"Some notable things in a block quote! in test"}</_components.p>{"\n"}</_components.blockquote></div></>;
  }
}
export default MDXContent;

and it doesn't work for the compiler because components.h2 is a string - it expects a function, or a plain template string which it can parse. The workaround I first applied here is that I've first just removed _components. with a regex before passing the mdx compiled output to babel, and that's enough for solid compiler to understand templates. A second attempt, which also worked, is that I've changed how opening and closing nodes are created directly in forked mdx code to get the same effect.
The problem here is that this prevents changing the way the markdown elements are rendered - and I just couldn't find how to replace the value of a tag inside the code with the one from props.components - this is left to runtimes, but it's not an option for Solid. So, I was wondering if there's any recommendation on how to approach this - any guidance would be great. Thanks in advance.

[wooorm]

I would strongly recommend that, assuming solid has components and a vdom or actual dom, to implement an automatic jsx runtime rather than hacking around everything. Here's a svelte example: https://github.com/kenoxa/svelte-jsx/blob/main/src/jsx-runtime.js.

[high1]

Thanks for the prompt response - there's no vdom, just actual dom in solid, and there's a small runtime, but only for reactivity. I'm not sure if that's an option.,, If I implemented something like that, all reactivity in components would be lost. The components are basically compiled to plain DOM - they disappear, and only the reactive properties update their dependency graph.

[wooorm]

I included "actual dom" above

https://github.com/solidjs/solid/tree/main/packages/solid/h

Combine it with the code I have you earlier, or get solid itself to do it.