fix: improve transformers

shikijs · Nov 22, 2023 · 182dc80 · 182dc80
1 parent 543c2b7
commit 182dc80
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 82 deletions.
diff --git a/packages/shikiji-transformers/src/transformers/notation-diff.ts b/packages/shikiji-transformers/src/transformers/notation-diff.ts
@@ -1,20 +1,21 @@
 import type { ShikijiTransformer } from 'shikiji'
 import { addClassToHast } from 'shikiji'
 import { createCommentNotationTransformer } from '../utils'
+import { transformerNotationMap } from './notation-map'
 
 export interface TransformerNotationDiffOptions {
   /**
    * Class for added lines
    */
-  classAdded?: string
+  classLineAdd?: string
   /**
    * Class for removed lines
    */
-  classRemoved?: string
+  classLineRemove?: string
   /**
-   * Class added to the root element when the current code has diff
+   * Class added to the <pre> element when the current code has diff
    */
-  classRootActive?: string
+  classActivePre?: string
 }
 
 /**
@@ -24,27 +25,19 @@ export function transformerNotationDiff(
   options: TransformerNotationDiffOptions = {},
 ): ShikijiTransformer {
   const {
-    classAdded = 'diff add',
-    classRemoved = 'diff remove',
-    classRootActive = 'has-diff',
+    classLineAdd = 'diff add',
+    classLineRemove = 'diff remove',
+    classActivePre = 'has-diff',
   } = options
 
-  return createCommentNotationTransformer(
-    'shikiji-transformers:notation-diff',
-    /\[!code (\-\-|\+\+)(:\d+)?\]/,
-    function ([_, match, range = ':1'], _line, _comment, lines, index) {
-      const className = match === '--'
-        ? classRemoved
-        : classAdded
-      const lineNum = Number.parseInt(range.slice(1), 10)
-      lines
-        .slice(index, index + lineNum)
-        .forEach((line) => {
-          addClassToHast(line, className)
-        })
-      if (classRootActive)
-        addClassToHast(this.pre, classRootActive)
-      return true
+  return transformerNotationMap(
+    {
+      classMap: {
+        '++': classLineAdd,
+        '--': classLineRemove,
+      },
+      classActivePre,
     },
+    'shikiji-transformers:notation-diff',
   )
 }
diff --git a/packages/shikiji-transformers/src/transformers/notation-error-level.ts b/packages/shikiji-transformers/src/transformers/notation-error-level.ts
@@ -1,9 +1,14 @@
 import type { ShikijiTransformer } from 'shikiji'
 import { addClassToHast } from 'shikiji'
 import { createCommentNotationTransformer } from '../utils'
+import { transformerNotationMap } from './notation-map'
 
 export interface TransformerNotationErrorLevelOptions {
   classMap?: Record<string, string | string[]>
+  /**
+   * Class added to the <pre> element when the current code has diff
+   */
+  classActivePre?: string
 }
 
 /**
@@ -17,19 +22,14 @@ export function transformerNotationErrorLevel(
       error: ['highlighted', 'error'],
       warning: ['highlighted', 'warning'],
     },
+    classActivePre = 'has-highlighted',
   } = options
 
-  return createCommentNotationTransformer(
-    'shikiji-transformers:notation-error-level',
-    new RegExp(`\\[!code (${Object.keys(classMap).join('|')})(:\\d+)?\\]`),
-    ([_, match, range = ':1'], _line, _comment, lines, index) => {
-      const lineNum = Number.parseInt(range.slice(1), 10)
-      lines
-        .slice(index, index + lineNum)
-        .forEach((line) => {
-          addClassToHast(line, classMap[match])
-        })
-      return true
+  return transformerNotationMap(
+    {
+      classMap,
+      classActivePre,
     },
+    'shikiji-transformers:notation-error-level',
   )
 }
diff --git a/packages/shikiji-transformers/src/transformers/notation-focus.ts b/packages/shikiji-transformers/src/transformers/notation-focus.ts
@@ -1,16 +1,17 @@
 import type { ShikijiTransformer } from 'shikiji'
 import { addClassToHast } from 'shikiji'
 import { createCommentNotationTransformer } from '../utils'
+import { transformerNotationMap } from './notation-map'
 
 export interface TransformerNotationFocusOptions {
   /**
    * Class for focused lines
    */
-  classFocused?: string
+  classActiveLine?: string
   /**
    * Class added to the root element when the code has focused lines
    */
-  classRootActive?: string
+  classActivePre?: string
 }
 
 /**
@@ -20,23 +21,17 @@ export function transformerNotationFocus(
   options: TransformerNotationFocusOptions = {},
 ): ShikijiTransformer {
   const {
-    classFocused = 'focused',
-    classRootActive = 'has-focused',
+    classActiveLine = 'focused',
+    classActivePre = 'has-focused',
   } = options
 
-  return createCommentNotationTransformer(
-    'shikiji-transformers:notation-focus',
-    /\[!code focus(:\d+)?\]/,
-    function ([_, range = ':1'], _line, _comment, lines, index) {
-      const lineNum = Number.parseInt(range.slice(1), 10)
-      lines
-        .slice(index, index + lineNum)
-        .forEach((line) => {
-          addClassToHast(line, classFocused)
-        })
-      if (classRootActive)
-        addClassToHast(this.pre, classRootActive)
-      return true
+  return transformerNotationMap(
+    {
+      classMap: {
+        focus: classActiveLine,
+      },
+      classActivePre,
     },
+    'shikiji-transformers:notation-focus',
   )
 }
diff --git a/packages/shikiji-transformers/src/transformers/notation-highlight.ts b/packages/shikiji-transformers/src/transformers/notation-highlight.ts
@@ -1,16 +1,17 @@
 import type { ShikijiTransformer } from 'shikiji'
 import { addClassToHast } from 'shikiji'
 import { createCommentNotationTransformer } from '../utils'
+import { transformerNotationMap } from './notation-map'
 
 export interface TransformerNotationHighlightOptions {
   /**
    * Class for highlighted lines
    */
-  classHighlight?: string
+  classActiveLine?: string
   /**
    * Class added to the root element when the code has highlighted lines
    */
-  classRootActive?: string
+  classActivePre?: string
 }
 
 /**
@@ -20,23 +21,18 @@ export function transformerNotationHighlight(
   options: TransformerNotationHighlightOptions = {},
 ): ShikijiTransformer {
   const {
-    classHighlight = 'highlighted',
-    classRootActive = 'has-highlighted',
+    classActiveLine = 'highlighted',
+    classActivePre = 'has-highlighted',
   } = options
 
-  return createCommentNotationTransformer(
-    'shikiji-transformers:notation-highlight',
-    /\[!code (?:hl|highlight)(:\d+)?\]/,
-    function ([_, range = ':1'], _line, _comment, lines, index) {
-      const lineNum = Number.parseInt(range.slice(1), 10)
-      lines
-        .slice(index, index + lineNum)
-        .forEach((line) => {
-          addClassToHast(line, classHighlight)
-        })
-      if (classRootActive)
-        addClassToHast(this.pre, classRootActive)
-      return true
+  return transformerNotationMap(
+    {
+      classMap: {
+        highlight: classActiveLine,
+        hl: classActiveLine,
+      },
+      classActivePre,
     },
+    'shikiji-transformers:notation-highlight',
   )
 }
diff --git a/packages/shikiji-transformers/src/transformers/notation-map.ts b/packages/shikiji-transformers/src/transformers/notation-map.ts
@@ -0,0 +1,41 @@
+import type { ShikijiTransformer } from 'shikiji'
+import { addClassToHast } from 'shikiji'
+import { createCommentNotationTransformer } from '../utils'
+
+export interface TransformerNotationMapOptions {
+  classMap?: Record<string, string | string[]>
+  /**
+   * Class added to the <pre> element when the current code has diff
+   */
+  classActivePre?: string
+}
+
+function escapeRegExp(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+export function transformerNotationMap(
+  options: TransformerNotationMapOptions = {},
+  name = 'shikiji-transformers:notation-map',
+): ShikijiTransformer {
+  const {
+    classMap = {},
+    classActivePre = undefined,
+  } = options
+
+  return createCommentNotationTransformer(
+    name,
+    new RegExp(`\\s*(?://|/\\*|<!--|#)\\s+\\[!code (${Object.keys(classMap).map(escapeRegExp).join('|')})(:\\d+)?\\]\\s*(?:\\*/|-->)?`),
+    function ([_, match, range = ':1'], _line, _comment, lines, index) {
+      const lineNum = Number.parseInt(range.slice(1), 10)
+      lines
+        .slice(index, index + lineNum)
+        .forEach((line) => {
+          addClassToHast(line, classMap[match])
+        })
+      if (classActivePre)
+        addClassToHast(this.pre, classActivePre)
+      return true
+    },
+  )
+}
diff --git a/packages/shikiji-transformers/src/utils.ts b/packages/shikiji-transformers/src/utils.ts
@@ -23,7 +23,7 @@ export function createCommentNotationTransformer(
   regex: RegExp,
   onMatch: (
     this: ShikijiTransformerContext,
-    match: RegExpMatchArray,
+    match: string[],
     line: Element,
     commentNode: Element,
     lines: Element[],
@@ -39,18 +39,17 @@ export function createCommentNotationTransformer(
         for (const child of line.children) {
           if (child.type !== 'element')
             continue
-          if (!isCommentLike(child, line))
-            continue
           const text = child.children[0]
           if (text.type !== 'text')
             continue
-          const match = text.value.match(regex)
-          if (!match)
-            continue
-          if (onMatch.call(this, match, line, child, lines, idx)) {
+
+          text.value = text.value.replace(regex, (...match) => {
+            if (onMatch.call(this, match, line, child, lines, idx))
+              return ''
+            return match[0]
+          })
+          if (!text.value.trim())
             nodeToRemove = child
-            break
-          }
         }
         if (nodeToRemove)
           line.children.splice(line.children.indexOf(nodeToRemove), 1)

diff --git a/packages/shikiji-transformers/test/fixtures/error-level/a.js.output.html b/packages/shikiji-transformers/test/fixtures/error-level/a.js.output.html
@@ -1,4 +1,4 @@
-<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> foo</span><span style="color:#E1E4E8">() {</span></span><span class="line highlighted error"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'error'</span><span style="color:#E1E4E8">) </span></span><span class="line highlighted warning"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'warn'</span><span style="color:#E1E4E8">) </span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
+<pre class="shiki github-dark has-highlighted" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> foo</span><span style="color:#E1E4E8">() {</span></span><span class="line highlighted error"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'error'</span><span style="color:#E1E4E8">) </span></span><span class="line highlighted warning"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'warn'</span><span style="color:#E1E4E8">) </span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
 <style>
 body { margin: 0; }
 .shiki { padding: 1em; }

diff --git a/packages/shikiji-transformers/test/fixtures/focus/mutliple-lines.js b/packages/shikiji-transformers/test/fixtures/focus/mutliple-lines.js
@@ -3,6 +3,6 @@ export function transformerNotationFocus(
 ) {
   const {
     classFocused = 'focused',
-    classRootActive = 'has-focused',
+    classActivePre = 'has-focused',
   } = options
 }
diff --git a/packages/shikiji-transformers/test/fixtures/focus/mutliple-lines.js.output.html b/packages/shikiji-transformers/test/fixtures/focus/mutliple-lines.js.output.html
@@ -1,4 +1,4 @@
-<pre class="shiki github-dark has-focused" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> transformerNotationFocus</span><span style="color:#E1E4E8">(</span></span><span class="line focused"><span style="color:#FFAB70">  options</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {}, </span></span><span class="line focused"><span style="color:#E1E4E8">) {</span></span><span class="line focused"><span style="color:#F97583">  const</span><span style="color:#E1E4E8"> {</span></span><span class="line focused"><span style="color:#79B8FF">    classFocused</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#79B8FF">    classRootActive</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'has-focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#E1E4E8">  } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
+<pre class="shiki github-dark has-focused" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> transformerNotationFocus</span><span style="color:#E1E4E8">(</span></span><span class="line focused"><span style="color:#FFAB70">  options</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {}, </span></span><span class="line focused"><span style="color:#E1E4E8">) {</span></span><span class="line focused"><span style="color:#F97583">  const</span><span style="color:#E1E4E8"> {</span></span><span class="line focused"><span style="color:#79B8FF">    classFocused</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#79B8FF">    classActivePre</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'has-focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#E1E4E8">  } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
 <style>
 body { margin: 0; }
 .shiki { padding: 1em; }

diff --git a/packages/shikiji-transformers/test/fixtures/highlight/mutliple-lines.js b/packages/shikiji-transformers/test/fixtures/highlight/mutliple-lines.js
@@ -3,6 +3,6 @@ export function transformerNotationFocus(
 ) {
   const {
     classFocused = 'focused',
-    classRootActive = 'has-focused',
+    classActivePre = 'has-focused',
   } = options
 }
diff --git a/packages/shikiji-transformers/test/fixtures/highlight/mutliple-lines.js.output.html b/packages/shikiji-transformers/test/fixtures/highlight/mutliple-lines.js.output.html
@@ -1,4 +1,4 @@
-<pre class="shiki github-dark has-highlighted" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> transformerNotationFocus</span><span style="color:#E1E4E8">(</span></span><span class="line highlighted"><span style="color:#FFAB70">  options</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {}, </span></span><span class="line highlighted"><span style="color:#E1E4E8">) {</span></span><span class="line highlighted"><span style="color:#F97583">  const</span><span style="color:#E1E4E8"> {</span></span><span class="line highlighted"><span style="color:#79B8FF">    classFocused</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#79B8FF">    classRootActive</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'has-focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#E1E4E8">  } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
+<pre class="shiki github-dark has-highlighted" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> transformerNotationFocus</span><span style="color:#E1E4E8">(</span></span><span class="line highlighted"><span style="color:#FFAB70">  options</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {}, </span></span><span class="line highlighted"><span style="color:#E1E4E8">) {</span></span><span class="line highlighted"><span style="color:#F97583">  const</span><span style="color:#E1E4E8"> {</span></span><span class="line highlighted"><span style="color:#79B8FF">    classFocused</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#79B8FF">    classActivePre</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'has-focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#E1E4E8">  } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
 <style>
 body { margin: 0; }
 .shiki { padding: 1em; }