fix(rehype-shiki): sequential codeboxes are merged together #7805
Conversation
This file contains hidden or 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the rehype-shiki plugin to merge adjacent code blocks (specifically CJS/ESM pairs) into grouped CodeTabs elements while updating the relevant tests.
- Refactored code block grouping logic by replacing the visit traversal with a while loop and newChildren array.
- Updated tests to verify the new grouping behavior and added concurrency options.
- Adjusted the highlighter tests to use the new concurrent test configuration.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/rehype-shiki/src/plugin.mjs | Refactored merging of sequential code blocks into CodeTabs and updated syntax highlighting integration. |
| packages/rehype-shiki/src/tests/plugin.test.mjs | Revised tests for the grouping functionality with updated expectations and concurrency settings. |
| packages/rehype-shiki/src/tests/highlighter.test.mjs | Minor test update to include concurrency settings. |
packages/rehype-shiki/src/plugin.mjs
Outdated
| languages: actualLanguagesArray.join('|'), | ||
| }, | ||
| children: codeBlocksToGroup.map(block => | ||
| JSON.parse(JSON.stringify(block)) |
There was a problem hiding this comment.
Consider using a dedicated deep clone utility instead of JSON.parse(JSON.stringify(...)) to improve performance and maintainability when cloning code blocks.
Copilot uses AI. Check for mistakes.
❌ 5 Tests Failed:
View the top 3 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
Co-authored-by: Copilot <[email protected]> Signed-off-by: Augustin Mauroy <[email protected]>
avivkeller
reviewed
Jun 1, 2025
Comment on lines
135
to
164
| const firstGroup = parent.children[0]; | ||
| assert.strictEqual( | ||
| firstGroup.tagName, | ||
| 'CodeTabs', | ||
| 'Group 1 should be CodeTabs' | ||
| ); | ||
| assert.strictEqual( | ||
| firstGroup.properties.languages, | ||
| 'cjs|esm', | ||
| 'Group 1 languages should be cjs|esm' | ||
| ); | ||
| assert.strictEqual( | ||
| firstGroup.properties.displayNames, | ||
| 'CJS|ESM', | ||
| 'Group 1 displayNames should be CJS|ESM' | ||
| ); | ||
| assert.ok( | ||
| Array.isArray(firstGroup.children) && firstGroup.children.length === 2, | ||
| 'Group 1 should contain 2 code blocks' | ||
| ); | ||
| assert.strictEqual( | ||
| firstGroup.children[0].children[0].properties.className[0], | ||
| 'language-cjs', | ||
| 'Group 1, Block 1 should be CJS' | ||
| ); | ||
| assert.strictEqual( | ||
| firstGroup.children[1].children[0].properties.className[0], | ||
| 'language-esm', | ||
| 'Group 1, Block 2 should be ESM' | ||
| ); |
There was a problem hiding this comment.
Can we use deepStrictEqual or partialDeepStrictEqual instead of comparing each with it's own assert?
| @@ -19,18 +19,21 @@ mock.module('unist-util-visit', { | |||
| namedExports: { visit: mockVisit, SKIP: Symbol() }, | |||
There was a problem hiding this comment.
Suggested change
| namedExports: { visit: mockVisit, SKIP: Symbol() }, | |
| namedExports: { visit: mockVisit }, |
If you aren't relying on SKIP anymore, no need to mock it
packages/rehype-shiki/src/plugin.mjs
Outdated
| // First pass: Group adjacent code blocks into <CodeTabs> | ||
| const newChildren = []; | ||
| let i = 0; | ||
| while (i < tree.children.length) { |
There was a problem hiding this comment.
I'm not a huge fan that we are using a while loop and a visit, is there an alternative?
packages/rehype-shiki/src/plugin.mjs
Outdated
Comment on lines
97
to
98
| (lang2 === 'cjs' && lang3 === 'esm') || | ||
| (lang2 === 'esm' && lang3 === 'cjs') |
There was a problem hiding this comment.
Maybe make a groupableLangs constant?
packages/rehype-shiki/src/plugin.mjs
Outdated
Comment on lines
168
to
170
| const lang = preElement.properties.className | ||
| ?.find(cn => cn.startsWith(languagePrefix)) | ||
| ?.substring(languagePrefix.length); |
ovflowd
reviewed
Jun 2, 2025
| @@ -44,6 +44,14 @@ server.listen(port, hostname, () => { | |||
| }); | |||
| ``` | |||
|
|
|||
| ```cjs | |||
There was a problem hiding this comment.
But that is intentional. Sequential codeboxes are supposed to be merged together afaik.
There was a problem hiding this comment.
take a look to the issue. In doc it's supposed to be separated
There was a problem hiding this comment.
Maybe we can make this an opt-in thing, so we can opt-in on api-docs-tooling?
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.
Description
It's add some logic to merge or not two code snippets
adding
concurencytake110msto90msValidation
test should pass
Related Issues
close #7803
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.