chore: upgrade deps (#125)

package.json

@@ -65,23 +65,23 @@
     "jest-file-snapshot": "^0.5.0",
     "jest-mock": "^29.5.0",
     "mdast-util-to-hast": "^12.1.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.1.0",
     "remark": "^14.0.2",
     "rollup": "^2.60.2",
     "rome": "12.1.3",
     "shiki": "^0.14.0",
     "ts-jest": "^29.1.0",
     "typescript": "^4.9.5",
     "vite": "^4.3.9",
-    "vitest": "^0.32.2",
-    "@types/hast": "^2.0.0"
+    "vitest": "^0.32.2"
   },
   "dependencies": {
+    "@types/hast": "^3.0.3",
     "hash-obj": "^4.0.0",
+    "hast-util-to-string": "^3.0.0",
     "parse-numeric-range": "^1.3.0",
-    "hast-util-to-string": "^2.0.0",
-    "unist-util-visit": "^4.0.0",
-    "rehype-parse": "^8.0.3",
-    "unified": "^10.1.2"
+    "rehype-parse": "^9.0.0",
+    "unified": "^11.0.4",
+    "unist-util-visit": "^5.0.0"
   }
 }

src/chars/charsHighlighter.ts

@@ -21,8 +21,8 @@ export function charsHighlighter(
   options: CharsHighlighterOptions,
   onVisitHighlightedChars?: (
     element: CharsElement,
-    id: string | undefined
-  ) => void
+    id: string | undefined,
+  ) => void,
 ) {
   const { ranges = [] } = options;
   const textContent = toString(element);
@@ -46,7 +46,7 @@ export function charsHighlighter(
           element,
           chars,
           startIndex,
-          ignoreChars
+          ignoreChars,
         );
 
         // maybe throw / notify due to failure here
@@ -57,15 +57,15 @@ export function charsHighlighter(
           elementsToWrap,
           options,
           ignoreChars,
-          onVisitHighlightedChars
+          onVisitHighlightedChars,
         );
 
         // re-start from the 'last' node (the chars or part of them may exist
         // multiple times in the same node)
         // account for possible extra nodes added from split with - 2
         startIndex = Math.max(
           elementsToWrap[elementsToWrap.length - 1].index - 2,
-          0
+          0,
         );
 
         textContent = element.children

src/chars/getElementsToHighlight.ts

@@ -11,7 +11,7 @@ export function getElementsToHighlight(
   element: Element,
   chars: string,
   startIndex = 0,
-  ignoreChars = false
+  ignoreChars = false,
 ): Array<{ element: Element; index: number }> {
   const toWrap = [];
   let charsSoFar = '';
@@ -34,7 +34,7 @@ export function getElementsToHighlight(
         // ignore any previously matched chars within
         hasOwnProperty(
           maybeElement.properties ?? {},
-          'rehype-pretty-code-visited'
+          'rehype-pretty-code-visited',
         )
       ) {
         continue;

src/chars/wrapHighlightedChars.ts

@@ -10,8 +10,8 @@ export function wrapHighlightedChars(
   ignoreWord: boolean,
   onVisitHighlightedChars?: (
     element: CharsElement,
-    id: string | undefined
-  ) => void
+    id: string | undefined,
+  ) => void,
 ) {
   if (!elementsToWrap || elementsToWrap.length === 0) {
     return;
@@ -35,7 +35,7 @@ export function wrapHighlightedChars(
         tagName: 'span',
         properties: { 'data-highlighted-chars-wrapper': '' },
         children: elementsToWrap.map(({ element }) => element),
-      }
+      },
     );
 
     const element = parentElement.children[elementsToWrap[0].index];

src/index.ts

@@ -39,7 +39,7 @@ function toFragment(
     lineNumbersMaxDigits = 1,
     onVisitTitle,
     onVisitCaption,
-  }: ToFragmentProps
+  }: ToFragmentProps,
 ) {
   element.tagName = inline ? 'span' : 'div';
   // User can replace this with a real Fragment at runtime
@@ -55,8 +55,11 @@ function toFragment(
       const code = pre.children[0];
 
       // Remove class="shiki"
-      if (Array.isArray(pre.properties?.className) && pre.properties?.className.includes('shiki')) {
-        const className = pre.properties.className.filter(c => c !== 'shiki');
+      if (
+        Array.isArray(pre.properties?.className) &&
+        pre.properties?.className.includes('shiki')
+      ) {
+        const className = pre.properties.className.filter((c) => c !== 'shiki');
         pre.properties.className = className.length > 0 ? className : undefined;
       }
 
@@ -140,7 +143,7 @@ const globalHighlighterCache = new Map<
 const hastParser = unified().use(rehypeParse, { fragment: true });
 
 export default function rehypePrettyCode(
-  options: Options = {}
+  options: Options = {},
 ): void | Transformer<Root, Root> {
   const {
     grid = true,
@@ -166,7 +169,7 @@ export default function rehypePrettyCode(
       onVisitHighlightedChars,
       getHighlighter,
     },
-    { algorithm: 'sha1' }
+    { algorithm: 'sha1' },
   );
   let highlighterCache = globalHighlighterCache.get(optionsHash);
   if (!highlighterCache) {
@@ -239,12 +242,13 @@ export default function rehypePrettyCode(
             const color =
               highlighter
                 .getTheme()
-                .settings.find(({ scope }: { scope?: string[] }) =>
-                  scope?.includes(tokensMap[meta.slice(1)] ?? meta.slice(1))
+                .settings.find(
+                  ({ scope }: { scope?: string[] }) =>
+                    scope?.includes(tokensMap[meta.slice(1)] ?? meta.slice(1)),
                 )?.settings.foreground ?? 'inherit';
 
             trees[mode] = hastParser.parse(
-              `<pre><code><span style="color:${color}">${strippedValue}</span></code></pre>`
+              `<pre><code><span style="color:${color}">${strippedValue}</span></code></pre>`,
             );
           } else {
             let html;
@@ -353,7 +357,7 @@ export default function rehypePrettyCode(
           } catch (e) {
             // Fallback to plain text if a language has not been registered
             trees[mode] = hastParser.parse(
-              highlighter.codeToHtml(strippedValue, 'txt')
+              highlighter.codeToHtml(strippedValue, 'txt'),
             );
           }
         }
@@ -377,7 +381,7 @@ export default function rehypePrettyCode(
               }
 
               const lineNumbersStartAtMatch = reverseString(meta).match(
-                /(?:\}(\d+){)?srebmuNeniLwohs(?!(.*)(\/))/
+                /(?:\}(\d+){)?srebmuNeniLwohs(?!(.*)(\/))/,
               );
               const startNumberString = lineNumbersStartAtMatch?.[1];
               if (startNumberString) {
@@ -399,8 +403,11 @@ export default function rehypePrettyCode(
                 element.children = [{ type: 'text', value: ' ' }];
               }
 
-              const className = element.properties.className.filter(c => c !== 'line');
-              element.properties.className = className.length > 0 ? className : undefined;
+              const className = element.properties.className.filter(
+                (c) => c !== 'line',
+              );
+              element.properties.className =
+                className.length > 0 ? className : undefined;
               element.properties['data-line'] = '';
               onVisitLine?.(element as LineElement);
 
@@ -416,7 +423,7 @@ export default function rehypePrettyCode(
                 element,
                 words,
                 wordOptions,
-                onVisitHighlightedChars
+                onVisitHighlightedChars,
               );
 
               lineNumbersMaxDigits++;

src/utils.ts

@@ -7,7 +7,7 @@ export function isShikiTheme(value: any): value is IShikiTheme {
 }
 
 export function isElement(
-  value: ElementContent | Element | Root | RootContent | null
+  value: ElementContent | Element | Root | RootContent | null | undefined,
 ): value is Element {
   return value ? value.type === 'element' : false;
 }
@@ -18,7 +18,7 @@ export function isText(value: ElementContent | null): value is Text {
 
 export function hasOwnProperty(
   object: Record<string, unknown>,
-  string: string
+  string: string,
 ) {
   return {}.hasOwnProperty.call(object, string);
 }

test/chars-highlighter-playground/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

test/chars-highlighter-playground/src/App.jsx

@@ -70,8 +70,8 @@ function App() {
         highlighter.current.codeToHtml(
           editorRef.current.getDoc().getValue('\n'),
           mode,
-          DEFAULT_THEME
-        )
+          DEFAULT_THEME,
+        ),
       );
     }
     if (highlighter.current) {
@@ -82,8 +82,8 @@ function App() {
             plugins: [htmlParser],
           }),
           'html',
-          DEFAULT_THEME
-        )
+          DEFAULT_THEME,
+        ),
       );
     }
   }, [mode]);
@@ -94,7 +94,7 @@ function App() {
         container.innerHTML = highlighter.current.codeToHtml(
           editorRef.current.getDoc().getValue('\n'),
           mode,
-          DEFAULT_THEME
+          DEFAULT_THEME,
         );
       }
       let options = {
@@ -114,11 +114,11 @@ function App() {
           `Something went wrong with highlighting!
           
           expect: ${container.textContent}
-          got: ${value}`
+          got: ${value}`,
         );
       }
     },
-    [word, wordNumbers, value, mode]
+    [word, wordNumbers, value, mode],
   );
 
   React.useEffect(() => {

test/chars-highlighter-playground/src/main.jsx

@@ -7,5 +7,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );

test/fixtures.test.js

@@ -29,22 +29,22 @@ const getTheme = (multiple) => {
   const singleTheme = JSON.parse(
     readFileSync(
       join(__dirname, '../node_modules/shiki/themes/github-dark.json'),
-      'utf-8'
-    )
+      'utf-8',
+    ),
   );
 
   const multipleTheme = {
     dark: JSON.parse(
       readFileSync(
         join(__dirname, '../node_modules/shiki/themes/github-dark.json'),
-        'utf-8'
-      )
+        'utf-8',
+      ),
     ),
     light: JSON.parse(
       readFileSync(
         join(__dirname, '../node_modules/shiki/themes/github-light.json'),
-        'utf-8'
-      )
+        'utf-8',
+      ),
     ),
   };
   return multiple ? multipleTheme : singleTheme;
@@ -108,7 +108,7 @@ const runFixture = async (fixture, fixtureName, getHighlighter) => {
     getHighlighter,
   });
 
-  const htmlString = prettier.format(html, { parser: 'html' });
+  const htmlString = await prettier.format(html, { parser: 'html' });
   return { htmlString, resultHTMLPath };
 };
 
@@ -127,7 +127,7 @@ describe('Single theme', () => {
       const { htmlString, resultHTMLPath } = await runFixture(
         fixture,
         fixtureName,
-        getHighlighter
+        getHighlighter,
       );
 
       expect(defaultStyle + htmlString).toMatchFile(resultHTMLPath);
@@ -151,7 +151,7 @@ describe('Multiple theme', () => {
       const { htmlString, resultHTMLPath } = await runFixture(
         fixture,
         fixtureName,
-        getHighlighter
+        getHighlighter,
       );
 
       expect(defaultStyle + htmlString).toMatchFile(resultHTMLPath);

test/fixtures/caption.md

@@ -6,8 +6,7 @@ caption="Immutable variable declaration"
 const code = true;
 ```
 
-caption="Immutable variable declaration"
-title="./components/index.js"
+caption="Immutable variable declaration" title="./components/index.js"
 
 ```js caption="Immutable variable declaration" title="./components/index.js"
 const caption = 'immutable';