chore: increase performance of legacy generators (#505)

Author: ovflowd

src/generators/legacy-html-all/index.mjs

@@ -5,7 +5,7 @@ import { join, resolve } from 'node:path';
 
 import HTMLMinifier from '@minify-html/node';
 
-import { getRemarkRehype } from '../../utils/remark.mjs';
+import { getRemarkRehypeWithShiki } from '../../utils/remark.mjs';
 import dropdowns from '../legacy-html/utils/buildDropdowns.mjs';
 import tableOfContents from '../legacy-html/utils/tableOfContents.mjs';
 
@@ -49,7 +49,7 @@ export default {
     const inputWithoutIndex = input.filter(entry => entry.api !== 'index');
 
     // Gets a Remark Processor that parses Markdown to minified HTML
-    const remarkWithRehype = getRemarkRehype();
+    const remarkWithRehype = getRemarkRehypeWithShiki();
 
     // Current directory path relative to the `index.mjs` file
     // from the `legacy-html` generator, as all the assets are there

src/generators/legacy-html/index.mjs

@@ -10,7 +10,7 @@ import dropdowns from './utils/buildDropdowns.mjs';
 import { safeCopy } from './utils/safeCopy.mjs';
 import tableOfContents from './utils/tableOfContents.mjs';
 import { groupNodesByModule } from '../../utils/generators.mjs';
-import { getRemarkRehype } from '../../utils/remark.mjs';
+import { getRemarkRehypeWithShiki } from '../../utils/remark.mjs';
 
 /**
  * @typedef {{
@@ -53,7 +53,7 @@ export default {
     const generatedValues = [];
 
     // Gets a Remark Processor that parses Markdown to minified HTML
-    const remarkRehypeProcessor = getRemarkRehype();
+    const remarkRehypeProcessor = getRemarkRehypeWithShiki();
 
     const groupedModules = groupNodesByModule(input);
 

src/generators/legacy-json/index.mjs

@@ -53,6 +53,7 @@ export default {
       const nodes = groupedModules.get(head.api);
 
       const section = buildSection(head, nodes);
+
       generatedValues.push(section);
 
       return section;

src/utils/highlighter.mjs

@@ -32,11 +32,13 @@ function isCodeBlock(node) {
   );
 }
 
-export const highlighter = await createHighlighter();
+export const highlighter = await createHighlighter({ wasm: true });
 
 /**
  * Creates a HAST transformer for Shiki which is used for transforming our codeboxes
  *
+ * @deprecated This is used only for the legacy-html generator, please use `@node-core/rehype-shiki` directly instead.
+ *
  * @type {import('unified').Plugin}
  */
 export default function rehypeShikiji() {

src/utils/remark.mjs

@@ -26,9 +26,24 @@ export const getRemark = () =>
 
 /**
  * Retrieves an instance of Remark configured to output stringified HTML code
- * including parsing Code Boxes with syntax highlighting
  */
 export const getRemarkRehype = () =>
+  unified()
+    .use(remarkParse)
+    // We make Rehype ignore existing HTML nodes (just the node itself, not its children)
+    // as these are nodes we manually created during the rehype process
+    // We also allow dangerous HTML to be passed through, since we have HTML within our Markdown
+    // and we trust the sources of the Markdown files
+    .use(remarkRehype, { allowDangerousHtml: true, passThrough })
+    // We allow dangerous HTML to be passed through, since we have HTML within our Markdown
+    // and we trust the sources of the Markdown files
+    .use(rehypeStringify, { allowDangerousHtml: true });
+
+/**
+ * Retrieves an instance of Remark configured to output stringified HTML code
+ * including parsing Code Boxes with syntax highlighting
+ */
+export const getRemarkRehypeWithShiki = () =>
   unified()
     .use(remarkParse)
     // We make Rehype ignore existing HTML nodes (just the node itself, not its children)
@@ -38,8 +53,6 @@ export const getRemarkRehype = () =>
     .use(remarkRehype, { allowDangerousHtml: true, passThrough })
     // This is a custom ad-hoc within the Shiki Rehype plugin, used to highlight code
     // and transform them into HAST nodes
-    // @TODO: Get rid of @shikijis/rehype and use our own Rehype plugin for Shiki
-    // since we have CJS/ESM nodes. (Base off from the nodejs/nodejs.org repository)
     .use(syntaxHighlighter)
     // We allow dangerous HTML to be passed through, since we have HTML within our Markdown
     // and we trust the sources of the Markdown files
@@ -58,10 +71,7 @@ export const getRemarkRecma = () =>
     // as these are nodes we manually created during the generation process
     // We also allow dangerous HTML to be passed through, since we have HTML within our Markdown
     // and we trust the sources of the Markdown files
-    .use(remarkRehype, {
-      allowDangerousHtml: true,
-      passThrough,
-    })
+    .use(remarkRehype, { allowDangerousHtml: true, passThrough })
     // Any `raw` HTML in the markdown must be converted to AST in order for Recma to understand it
     .use(rehypeRaw, { passThrough })
     .use(() => singletonShiki)