rehype-typst + Next.js + MDX

[Loosetooth]

Hey there, first of all, thanks for all the work on typst.ts!

I like to write in MDX for blogs and the like, and Next.js does a good job of generating pages from MDX files.

Yesterday I worked on getting rehype-typst formulas working with Next.js and MDX. I managed to get it to work, but I noticed some issues which I would like to share here, see what we could do about those to get this more functional.

Issue 1

Inability to compile .mdx pages whenever the rehype-typst package is included in the next.config.mjs file.
The bug is in the styled-jsx package. See this pull request.
The 'work around' is to add a question mark in the isStyledJsx function:

// styled-jsx/dist/babel/index.js
var isStyledJsx = function(param) {
    var el = param.node;
    return lib$1.isJSXElement(el) && el.openingElement.name.name === "style" && el.openingElement.attributes.some(function(attr) {
        // OLD: return attr.name.name === STYLE_ATTRIBUTE;
        // NEW:
        return attr.name?.name === STYLE_ATTRIBUTE;
    });
};

I see two ways to fix this:

1. Somehow get the fix in the styled-jsx package
2. Figure out why there are empty style attributes in the SVG/HTML generated by rehype-typst, and change this somehow.

Issue 2

React does not support namespaces in the svg string generated by typst:

SyntaxError: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

We can work around this by ignoring the react error in the .babelrc file, with the following config:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": { "throwIfNamespace": false }
      }
    ]
  ],
  "plugins": []
}

Perhaps one way to work around this is to add an option in rehype-typst to convert the resulting SVG files into JSX format.
This could be off by default, but would have to be turned on for React apps.

I did some quick searching, but could not find an npm plugin to automatically convert SVG to JSX, but I found this online app, which is open source. So we could take a look and see how they do it, perhaps publish it as an npm package.

Let me know what you think!

I'll try to do the following at some point in the future:

1. create a minimal repo for Nextjs + rehype-typst + MDX for testing (which I will share here if/when it's done)
2. comment on the pull request in the styled-jsx package.

[Myriad-Dreamin]

@Enter-tainer may help. I'll also look at it later.

[Enter-tainer]

Somehow get the fix in the styled-jsx package
Figure out why there are empty style attributes in the SVG/HTML generated by rehype-typst, and change this somehow.

make sense to me. although i dont think empty style tag is a bug.

Perhaps one way to work around this is to add an option in rehype-typst to convert the resulting SVG files into JSX format.
This could be off by default, but would have to be turned on for React apps.

i dont really know how next.js works. from rehype-typst's view, it convert typst code to hast and cannot see jsx or relevant things. maybe the solution should be turning some switches on.

[Loosetooth]

Thanks for the responses!

I just tried out the latest Next.js version, including the app router.
It works fine!
(With the exception of a hydration error, but that's not a big problem.)

You can check out here: https://github.com/Loosetooth/next-rehype-typst-mdx

As such you can ignore my opening comment above. I tried that out in an older project.
Seemingly, those issues have already been fixed one way or another.