Configuration option to enable _mdxExplicitJsx everywhere

[milomg]

I've just started using MDX for a Solid JS blog, and after turning on jsx: true, I was hoping to optimize the rendering a bit by having MDX output raw JSX tags like <h1>hi</h1><p>ho</p> instead of <_components.h1>hi</_components.h1><_components.p>ho</_components.p>. This would allow Solid JS to compile the entire markdown into an efficient template rendering call. I realize this isn't a feature for everyone because then you can no longer customize the components that are rendered, but it would be awesome to have a config option like useExplicitJSX that I could turn on when I don't need that customization.

I attempted to manually recreate this feature with a plugin, but unfortunately there is no stage in between recma-jsx-build.js and recma-jsx-rewrite.jswhere I could visit the nodes and add _mdxExplicitJsx.

In summary: I was wondering if there was any interest in a configuration option named something like useExplicitJSX that always ran this branch of the if statement https://github.com/mdx-js/mdx/blob/main/packages/mdx/lib/plugin/recma-jsx-rewrite.js#L199 (or if there was another way to do the same thing)

[wooorm]

Heya!

The behavior you observe for jsx: true, is indeed what jsx: true does, and not what you want to do.

jsx: true should not be needed. You introduce more work which solid then does.

This would allow Solid JS to compile the entire markdown into an efficient template rendering call.

I can help you better if you tell us what you want to achieve. Give actual input, expected output, and current actual output.

I’d also appreciate more info about the current Solid + JSX situation? Solid previously had different bugs, does Solid currently work well?

I was wondering if there was any interest in a configuration option named something like useExplicitJSX that always ran this branch of the if statement mdx-js/mdx@main/packages/mdx/lib/plugin/recma-jsx-rewrite.js#L199 (or if there was another way to do the same thing)

It doesn’t seem very smart to me. As you say you are just starting out. I think, when using MDX for a bit longer, you will find out that components are quite a nice feature? Even if you would not perhaps notice this in Solid, MDX supports all JSX runtimes, and components are definitely very useful in React/Preact and the like!

Instead, I’d search for solutions along the lines of #2473, https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-optimize-static.ts, and https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-9/

[milomg]

Thanks for the links! Astro's optimize static plugin looks like it might work for my use case.

To answer your question about what the current situation with Solid is:

Things work pretty well, but they're a bit complicated and inefficient. SolidJS has a specialized JSX transform that detects raw HTML and turns it into a template string. We can use a library that provides a hyperscript style interface (and everything pretty much works when using https://github.com/high1/solid-jsx), I'd rather use the Solid JSX compiler.

To take advantage of Solid's compiler, I wanted:

# hi
ho

to compile into

function _createMdxContent(props) {
  return <><h1>{"hi"}</h1>{"\n"}<p>{"ho"}</p></>;
}

Because Solid compiles this into

import { template as _$template } from "solid-js/web";
var _tmpl$ = /*#__PURE__*/_$template(`<h1>hi`),
  _tmpl$2 = /*#__PURE__*/_$template(`<p>ho`);
function _createMdxContent(props) {
  return [_tmpl$(), "\n", _tmpl$2()];
}

(and with longer templates, more nodes can be compiled even more efficiently into a single _$template call, which is helpful for faster rendering both in the browser and on the server)

What currently happens is:

function _createMdxContent(props) {
  const _components = {
    h1: "h1",
    p: "p",
    ...props.components
  };
  return <><_components.h1>{"hi"}</_components.h1>{"\n"}<_components.p>{"ho"}</_components.p></>;
}

turns into

import { createComponent as _$createComponent } from "./solid-mdx";
function _createMdxContent(props) {
  const _components = {
    h1: "h1",
    p: "p",
    ...props.components
  };
  return [_$createComponent(_components.h1, {
    children: "hi"
  }), "\n", _$createComponent(_components.p, {
    children: "ho"
  })];
}

Which I believe can work (although I haven't tested), but then this manually creates each element

[wooorm]

SolidJS has a specialized JSX transform that detects raw HTML and turns it into a template string.

Do you mean that it has a custom Babel plugin that does this work?

If that is the case, even if this particular question was solved to your heart’s desire, that custom plugin might still not work well with MDX. MDX does assume control over how it turns markdown -> JS

You can test that out by making a small plugin that does what you ask here.

This Solid JSX compiler algorithm sounds very similar to the Deno JSX precompile runtime.
Two standards might not be a good idea. Particularly if they are both undocumented. Perhaps Solid and Deno can collaborate on one, documented, standard, which we can then support here.

[milomg]

Yes, Solid has a custom Babel plugin that does that (if you're curious, you can explore the compilation in the Solid playground https://playground.solidjs.com/). However, the basic assumptions are basically the same, i.e. if it has component functions and jsx/html it will probably work. I believe the only assumption that doesn't quite hold is that strings are valid components, although this is easy enough to just override by passing in function components.

Edit: I just skimmed the spec and I think Solid supports exactly the syntax described here: https://facebook.github.io/jsx/, even if it has some behavioural differences from React (e.g. not needing className, or not supporting class components).