Refactor to generate JS AST #1382
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/mdx/mdx/47du63gcf [Deployment for 04a85f7 failed] |
| @@ -1,348 +1,312 @@ | |||
| const {transformSync} = require('@babel/core') | |||
There was a problem hiding this comment.
it might be easier to compare this file side by side. Because a lot changed
| export default function createMdxElement(type, props, ...children) { | ||
| let node | ||
|
|
||
| export default function createMdxElement(type, props, children) { |
There was a problem hiding this comment.
I made it pretty hard for myself last time by thinking it’d be wise to also support the React babel transform, for Vue.
That was stupid. Now our Vue runtime only supports the Vue babel transform.
|
So does this mean that we can reuse the AST in |
|
Correct! I now implemented it in the compiler that does hast -> string. But I think we should expose it in the future on the interface of the main |
|
You can already do so with |
@wooorm I tried this and find there is no |
|
HTML comments are supported in hast-util-to-estree. JS comments are not supported in acorn. |
According to https://github.com/acornjs/acorn/blob/master/acorn/src/options.js#L117-L122, I got const doc = `
<>
{/* MDX is awesome! */}
<div
// MDX is awesome!
style={{ color: "white", backgroundColor: "black", padding: "24px 32px" }}
></div>
</>;
`;
const comments = [];
const tokens = [];
const mdast = fromMarkdown(doc, {
extensions: [
mdxjs({
acornOptions: {
locations: true,
ranges: true,
onComment: comments,
onToken: tokens,
},
}),
],
mdastExtensions: [mdxFromMarkdown],
});
Acorn itself is working: let acorn = require("acorn");
const jsx = require("acorn-jsx");
acorn = acorn.Parser.extend(jsx());
const comments = [];
acorn.parse(doc, {
onComment: comments,
});
console.log(comments);
// output
// [
// { type: 'Block', value: ' MDX is awesome! ', start: 7, end: 28 },
// { type: 'Line', value: ' MDX is awesome!', start: 41, end: 59 }
// ] |
|
@JounQin One problem though is tokens and positional info from markdown, as your example is just JSX |
|
@JounQin Also, comments are rather non-standard in estree. Different parsers add them differently. ESLint supports the |
|
@wooorm We don't need comments on AST, but we should be able to detect comments on parsing like |
That is correct for ESLint, but incorrect for other tools |
This PR changes the internals of the core `@mdx-js/mdx` package to generate a JavaScript syntax tree instead of a string. This fixes escaping issues such as #1219. It makes `mdx-hast-to-jsx` much more palatable. It also prevents several Babel parses. It paves the way for passing in Babel plugins, which is useful for users, but also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls directly and make MDX’s output directly usable. * `babel-plugin-apply-mdx-type-props`: add `parentType` * `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace * `mdx`: use `hast-util-to-estree` to transform hast to estree * `mdx`: use `estree-to-babel` to transform estree to Babel * `mdx`: generate estree/Babel instead of strings * `mdx`: use `@babel/generator` to serialize Babel AST * `vue`: stop supporting the react transform: (it doesn’t make sense) * `vue`: fix support for props to components Related to GH-741. Related to GH-1152. Closes GH-606. Closes GH-1028. Closes GH-1219.
wooorm
force-pushed
the
no-strings-attached
branch
from
68ff02c
to
04a85f7
Compare
This PR changes the internals of the core `@mdx-js/mdx` package to generate a JavaScript syntax tree instead of a string. This fixes escaping issues such as #1219. It makes `mdx-hast-to-jsx` much more palatable. It also prevents several Babel parses. It paves the way for passing in Babel plugins, which is useful for users, but also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls directly and make MDX’s output directly usable. * `babel-plugin-apply-mdx-type-props`: add `parentType` * `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace * `mdx`: use `hast-util-to-estree` to transform hast to estree * `mdx`: use `estree-to-babel` to transform estree to Babel * `mdx`: generate estree/Babel instead of strings * `mdx`: use `@babel/generator` to serialize Babel AST * `vue`: stop supporting the react transform: (it doesn’t make sense) * `vue`: fix support for props to components Related to GH-741. Related to GH-1152. Closes GH-606. Closes GH-1028. Closes GH-1219. Closes GH-1382. Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>
|
@JounQin Looks like this can attach comments: https://github.com/davidbonnet/astravel#astravelattachcommentsast-comments--ast, that makes it much easier than having to figure it out myself! |
This PR changes the internals of the core
@mdx-js/mdxpackage to generate a JavaScript syntax tree instead of a string. This fixes escaping issues such as #1219. It makesmdx-hast-to-jsxmuch more palatable. It also prevents several Babel parses. It paves the way for passing in Babel plugins, which is useful for users, but also for us to compile toReact.createElement,_jsx, or Vue’shcalls directly and make MDX’s output directly usable.babel-plugin-apply-mdx-type-props: addparentType(used to be when serializing in mdx)mdx: userehype-minify-whitespaceto remove superfluous whitespacemdx: usehast-util-to-estreeto transform hast to estreemdx: useestree-to-babelto transform estree to Babelmdx: generate estree/Babel instead of stringsmdx: use@babel/generatorto serialize Babel ASTvue: stop supporting the react transform: (it doesn’t make sense)vue: fix support for props to componentsRelated to GH-741.
Related to GH-1152.
Closes GH-606.
Closes GH-1028.
Closes GH-1219.