Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lazy-rehype-shiki-highlighter.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@node-core/rehype-shiki': patch
---

Only import every bundled grammar when the plugin isn't given a highlighter
24 changes: 24 additions & 0 deletions packages/rehype-shiki/src/__tests__/plugin.test.mjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
import assert from 'node:assert/strict';
import { registerHooks } from 'node:module';
import { describe, it, mock } from 'node:test';

// The modules loaded from here on, to tell whether the default highlighter,
// which imports every grammar Shiki bundles, was loaded
const loaded = new Set();

registerHooks({
load(url, context, nextLoad) {
loaded.add(new URL(url).pathname);

return nextLoad(url, context);
},
});

const defaultHighlighter = new URL('../index.mjs', import.meta.url).pathname;

// Simplified mocks - only mock what's actually needed
mock.module('../index.mjs', {
defaultExport: () => ({ highlightToHast: mock.fn(() => ({ children: [] })) }),
Expand All @@ -23,6 +38,15 @@ describe('rehypeShikiji', async () => {
const { default: rehypeShikiji } = await import('../plugin.mjs');
const mockTree = { type: 'root', children: [] };

// Runs first, as the cases after it load the default highlighter
it('only loads the default highlighter without a highlighter', async () => {
await rehypeShikiji({ highlighter: { highlightToHast: mock.fn() } });
assert.ok(!loaded.has(defaultHighlighter));

await rehypeShikiji();
assert.ok(loaded.has(defaultHighlighter));
});

it('calls visit twice', async () => {
mockVisit.mock.resetCalls();
(await rehypeShikiji())(mockTree);
Expand Down
13 changes: 9 additions & 4 deletions packages/rehype-shiki/src/plugin.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import classNames from 'classnames';
import { toString } from 'hast-util-to-string';
import { SKIP, visit } from 'unist-util-visit';

import createHighlighter from '#rs/index.mjs';

// This is what Remark will use as prefix within a <pre> className
// to attribute the current language of the <pre> element
const languagePrefix = 'language-';
Expand Down Expand Up @@ -57,8 +55,15 @@ function isCodeBlock(node) {
* @param {import('#rs/index.mjs').HighlighterOptions & { highlighter: import('#rs/highlighter.mjs').SyntaxHighlighter }} options
*/
export default async function rehypeShikiji(options) {
const highlighter =
options?.highlighter ?? (await createHighlighter(options));
let highlighter = options?.highlighter;

// Loaded only when no highlighter is given, as it imports every grammar
// Shiki bundles as soon as it's loaded
if (!highlighter) {
const { default: createHighlighter } = await import('#rs/index.mjs');
Comment thread
ovflowd marked this conversation as resolved.

highlighter = await createHighlighter(options);
}

return function (tree) {
visit(tree, 'element', (_, index, parent) => {
Expand Down
Loading