Tag MDX component for faster checks when rendering #10864
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: f513ba6 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
bluwy
commented
Apr 24, 2024
Comment on lines
-43
to
+42
| const importsFromJSXRuntime = imports | ||
| .filter(({ n }) => n === 'astro/jsx-runtime') | ||
| .map(({ ss, se }) => code.substring(ss, se)); | ||
| const hasFragmentImport = importsFromJSXRuntime.some((statement) => | ||
| fragmentImportRegex.test(statement) | ||
| ); | ||
| if (!hasFragmentImport) { | ||
| code = `import { Fragment } from "astro/jsx-runtime"\n` + code; | ||
| if (!isSpecifierImported(code, imports, fragmentImportRegex, 'astro/jsx-runtime')) { | ||
| code += `\nimport { Fragment } from 'astro/jsx-runtime';`; |
There was a problem hiding this comment.
I updated the code = to code +=. This causes the import statement to append the code, but ESM hoists the import specifiers, so you can actually use Fragment beforehand.
The reason I append is to avoid generating a sourcemap as we don't alter existing code positions.
Comment on lines
+111
to
+123
| // Tag the `Content` export as "astro:jsx" so it's quicker to identify how to render this component | ||
| if (ssr) { | ||
| if ( | ||
| !isSpecifierImported( | ||
| code, | ||
| imports, | ||
| astroTagComponentImportRegex, | ||
| 'astro/runtime/server/index.js' | ||
| ) | ||
| ) { | ||
| code += `\nimport { __astro_tag_component__ } from 'astro/runtime/server/index.js';`; | ||
| } | ||
| code += `\n__astro_tag_component__(Content, 'astro:jsx');`; |
There was a problem hiding this comment.
This mimics tag.ts but specific to the MDX component so it's much simpler. We only need to tag the default exported Content component. I don't think there will be other exports that are MDX components.
ematipico
approved these changes
Apr 24, 2024
Merged
ematipico
pushed a commit
that referenced
this pull request
May 8, 2024
* fix(mdx): convert remark-images-to-component plugin to a rehype plugin (#10697) * Remove fs read for MDX transform (#10866) * Tag MDX component for faster checks when rendering (#10864) * Use unified plugin only for MDX transform (#10869) * Only traverse children and handle mdxJsxTextElement when optimizing (#10885) * Rename to `optimize.ignoreComponentNames` in MDX (#10884) * Allow remark/rehype plugins added after mdx to work (#10877) * Improve MDX optimize with sibling nodes (#10887) * Improve types in rehype-optimize-static.ts * Rename `ignoreComponentNames` to `ignoreElementNames` I think this better reflects what it's actually doing * Simplify plain MDX nodes in optimize option (#10934) * Format code * Minimize diff changes * Update .changeset/slimy-cobras-end.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Armand Philippot <59021693+ArmandPhilippot@users.noreply.github.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
This PR does two things:
__astro_tag_component__(Content, 'astro:jsx')so that we can render MDX components faster. No need to callcheck()to test if it'sastro:jsxas we already tagged it.astro:jsxrenderToStaticMarkup(). Because of the above,check()wasn't enhancing the error anymore, which failed a test.Performance:
I tested this in the docs repo but there isn't any significant improvements nor regressions, so this would be harmless. Part of the reason I added this is to port a faster version of https://github.com/withastro/astro/blob/main/packages/astro/src/vite-plugin-mdx/tag.ts.
Testing
Existing tests should pass.
Docs
Added changesets about the improved error message, but otherwise this shouldn't have a significant impact on normal usage.