invalid javascript @ generated object keys #72
Comments
github-actions
bot
added
👋 phase/new
Related-to: remarkjs/remark-math#72.
|
Thanks for the report! I fixed it in xdm (expect a release in a minute), and will release it in MDX in the next RC / actual release (a week or two?). |
|
Awesome, thanks for the quick fix! Managed to get it working
Based on the docs it seems like no additional config should be required for Can provide more info if needed!
|
|
Also just noticed this:
It seems that the base URL for fonts has changed from to |
|
Interested in working on a PR for the URL change? |
Just forked the repo but didn't find any
Here's a minimal repro:
|
|
Oh whoops I forgot that the docs instruct you to add that URL to your config & was thinking there was a hardcoded URL somewhere in the codebase 😅. Just submitted a PR.
Hmm weird, so both However, I did notice that even with the repro starter you sent me, the results aren't matching up between Left: Solid + CHTML |
Related-to GH-72. Closes GH-73. Reviewed-by: Titus Wormer <[email protected]>
I’m assuming Solid + JSX + SVG.
One is a plain text file. The other is a backticked string in JavaScript. JavaScript eats the |
|
Ah yeah, that was the issue. Ok I'll try diffing that result against the one from Solid & see if anybody @ their Discord might know what's going on if I can't figure it out. Thanks for the assistance! |
|
😁 Chiming in. svg didn't work because Another problem with jsx output is If mathjax doesn't use a custom element name and |
|
Hi Nyi Nyi!
Yes, thanks for finding the precise cause.
Similar to a VDOM In this case
Can you expand on this point? JSX supports the first fine (tested with xdm: it works). The last is not JSX. I don’t think xdm or MDX need to change to support that? |
|
After digging more, I've come to know there are reason why things are the way things are. Don't have any opinion atm. Pretty overwhelmed by standards but here's a sorta working example https://codesandbox.io/s/mathjax-svg-render-issue-forked-pk07y?file=/vite.config.ts
Yes, which I did there. The reactivity is kinda limited with jsx-runtime approach. Roughly, Solid needs to analyze jsx and transform the js parts to work with its reactivity system and jsx to templates via a babel plugin. And we found a better way which was to use
Yes they aren't and is the jsx output of mdx|xdm with |
Hey so we've been discussing this over @ Discord/SolidJS/help, and it seems that Before making the switch, I ran a diff against updated versions of the initial repros I submitted:
It's currently throwing this error: which seems like it could be related to the fix that was implemented for the original topic of this issue? |
Why not use markdown? Markdown outputs HTML.
This package has no documentation and is only a few days old.
Yes. Want to work on a PR? |
This is a bit lower level stuff than I'm used to working on, but could take a shot at it perhaps. I managed to get it rendering properly with a few replacements run after the initial transform:
{from:`xmlnsXlink=`, to:`xmlns:xlink=` },
{from:`xlinkHref=`, to:`xlink:href=` },
{from:`className=`, to:`class=` },
{from:`"mjx-container": "mjx-container",`, to:`"mjxcontainer": "span",` },
{from:`.mjx-container class="MathJax`, to:`.span class="MathJax MJX_Container`},
{from:`."mjx-container" class="MathJax`, to:`.span class="MathJax MJX_Container`},
{from:`</_components.mjx-container>`, to:`</_components.span>` },
{from:`</_components."mjx-container">`, to:`</_components.span>` },
{from:`mjx-container`, to:`.MJX_Container` },Do you think there's a way it could be set up to where it would work for both React & Solid? |
|
Gotcha, I'm wondering if there are any steps that could be taken to facilitate interop between If so, I could be open to working on this and could also forward the info to the Solid community; although as of right now, I don't have much AST-manipulation experience so it would definitely require some time + research before I could personally contribute anything of value. I'm open to it though! |
Yes there is. The glue is called |
Ok I'll look into this further when I get a chance and dig into the source code of all of the involved libraries. It's tough to tell what's going on without prior experience with this ecosystem & AST work, and also to know where this needs to be addressed because both sides are claiming that the other is where the issue lies. I appreciate your time & explanations! |
Does MDX choose to support it?
I found it but holding because of the above. I can work on both. |
I believe I‘ve mentioned a few times now that you can use
The standard defines it as such: https://facebook.github.io/jsx/. (observer: Other implementations match this behavior. |
Related to: ddcebdb. Related to: remarkjs/remark-math#72. Closes GH-106. Co-authored-by: Titus Wormer <[email protected]>
Backports: wooorm/xdm@ddcebdb. Backports: wooorm/xdm@0c6d8ac. Related-to: remarkjs/remark-math#72. Related-to: wooorm/xdm#106.
Backports: wooorm/xdm@ddcebdb. Backports: wooorm/xdm@0c6d8ac. Related-to: remarkjs/remark-math#72. Related-to: wooorm/xdm#106.
Initial checklist
Affected packages and versions
rehype-mathjax: 4.0.2
Link to runnable example
No response
Steps to reproduce
Expected behavior
Example snippet
should compile from an
mdxfile without error.Actual behavior
Browser Error:
It seems that the error would be prevented by wrapping the generated
mdx-containerkey in quotes.Through trial & error I found that this issue:
mdxfiles via eithermdx-jsorxdmrehype-katexin place ofrehype-mathjaxRuntime
Node v16
Package manager
yarn v1
OS
Windows
Build and bundle tools
Vite
The text was updated successfully, but these errors were encountered: