fix(twoslash): split tokens on completion

antfu · Jan 19, 2024 · 3f34919 · 3f34919
1 parent d57736e
commit 3f34919
Show file tree

Hide file tree

Showing 16 changed files with 247 additions and 920 deletions.
diff --git a/packages/shikiji-twoslash/src/core.ts b/packages/shikiji-twoslash/src/core.ts
@@ -65,7 +65,7 @@ export function createTransformerFactory(
 
         // Break tokens at the boundaries of twoslash nodes
         const breakpoints = Array.from(new Set(this.meta.twoslash.nodes.flatMap(i =>
-          ['hover', 'error', 'query', 'highlight'].includes(i.type)
+          ['hover', 'error', 'query', 'highlight', 'completion'].includes(i.type)
             ? [i.start, i.start + i.length]
             : [],
         ))).sort()

diff --git a/packages/shikiji-twoslash/src/renderer-rich.ts b/packages/shikiji-twoslash/src/renderer-rich.ts
@@ -368,9 +368,6 @@ export function rendererRich(options: RendererRichOptions = {}): TwoslashRendere
       if (node.type !== 'text')
         throw new Error(`[shikiji-twoslash] nodeCompletion only works on text nodes, got ${node.type}`)
 
-      const leftPart = query.completionsPrefix || ''
-      const rightPart = node.value.slice(leftPart.length || 0)
-
       const items: Element[] = query.completions
         .map(i => ({
           type: 'element',
@@ -451,28 +448,27 @@ export function rendererRich(options: RendererRichOptions = {}): TwoslashRendere
         },
       )
 
+      const children: ElementContent[] = []
+      if (node.value)
+        children.push({ type: 'text', value: node.value })
+
+      if (hast?.completionCompose) {
+        children.push(...hast.completionCompose({ popup, cursor }))
+      }
+      else {
+        children.push({
+          ...cursor,
+          children: [popup],
+        })
+      }
+
       return extend(
         hast?.completionToken,
         {
           type: 'element',
           tagName: 'span',
           properties: {},
-          children: [
-            {
-              type: 'text',
-              value: leftPart,
-            },
-            ...(hast?.completionCompose
-              ? hast?.completionCompose({ popup, cursor })
-              : [{
-                  ...cursor,
-                  children: [popup],
-                }]),
-            {
-              type: 'text',
-              value: rightPart,
-            },
-          ],
+          children,
         },
       )
     },

diff --git a/packages/shikiji-twoslash/test/fixtures.test.ts b/packages/shikiji-twoslash/test/fixtures.test.ts
@@ -9,11 +9,18 @@ describe('fixtures', () => {
   for (const file in files) {
     const name = basename(file)
     it(name, async () => {
-      const code = files[file]
+      let code = files[file]
       const ext = file.split('.').pop()!
+
+      let theme = 'vitesse-dark'
+      code = code.replace(/\/\/\s+@theme:\s+(.*)\n/, (_, t) => {
+        theme = t
+        return ''
+      })
+
       const hast = await codeToHast(code, {
         lang: ext,
-        theme: 'vitesse-dark',
+        theme,
         transformers: [
           transformerTwoslash({
             renderer: rendererRich(),

diff --git a/packages/shikiji-twoslash/test/fixtures/completion-string.ts b/packages/shikiji-twoslash/test/fixtures/completion-string.ts
@@ -1,4 +1,5 @@
 // @errors: 2322
+// @theme: github-dark
 type A = '@foo' | '@bar' | '/foo' | '/bar'
 
 const a: A = '@'

diff --git a/packages/shikiji-twoslash/test/out/completion-end-multifile-2.ts.json b/packages/shikiji-twoslash/test/out/completion-end-multifile-2.ts.json
@@ -614,10 +614,6 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": ""
                         }
                       ]
                     }

diff --git a/packages/shikiji-twoslash/test/out/completion-end-multifile.ts.json b/packages/shikiji-twoslash/test/out/completion-end-multifile.ts.json
@@ -3208,10 +3208,6 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": ""
                         }
                       ]
                     }

diff --git a/packages/shikiji-twoslash/test/out/completion-end.ts.html b/packages/shikiji-twoslash/test/out/completion-end.ts.html
@@ -23,7 +23,7 @@
 <span class="line"></span>
 <span class="line"><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#CB7676">const</span><span> </span><span style="color:#BD976A">a</span><span style="color:#666666">: {</span></span>
 <span class="line"><span style="color:#666666">    </span><span style="color:#BD976A">test</span><span style="color:#666666">:</span><span> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D">foo</span><span style="color:#C98A7D99">'</span><span> </span><span style="color:#666666">|</span><span> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D">bar</span><span style="color:#C98A7D99">'</span><span> </span><span style="color:#666666">|</span><span> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D">baz</span><span style="color:#C98A7D99">'</span><span style="color:#666666">;</span></span>
-<span class="line"><span style="color:#666666">}</span></span></code></span>a</span></span><span style="color:#666666">.</span><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#80A665">test</span><span style="color:#666666">:</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">foo</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">bar</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">baz</span><span style="color:#C98A7D99">"</span></span></code></span>test</span></span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">===</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D"><span>b<span class="twoslash-completion-cursor"><ul class="twoslash-completion-list"><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">ar</span></span></li><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">az</span></span></li></ul></span>ar</span></span><span style="color:#C98A7D99">'</span></span>
+<span class="line"><span style="color:#666666">}</span></span></code></span>a</span></span><span style="color:#666666">.</span><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#80A665">test</span><span style="color:#666666">:</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">foo</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">bar</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">baz</span><span style="color:#C98A7D99">"</span></span></code></span>test</span></span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">===</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D"><span>b<span class="twoslash-completion-cursor"><ul class="twoslash-completion-list"><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">ar</span></span></li><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">az</span></span></li></ul></span></span></span><span style="color:#C98A7D">ar</span><span style="color:#C98A7D99">'</span></span>
 <span class="line"></span>
 <span class="line"></span>
 <span class="line"><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#CB7676">const</span><span> </span><span style="color:#BD976A">a</span><span style="color:#666666">: {</span></span>

diff --git a/packages/shikiji-twoslash/test/out/completion-end.ts.json b/packages/shikiji-twoslash/test/out/completion-end.ts.json
@@ -172,10 +172,6 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": ""
                         }
                       ]
                     }
@@ -2115,10 +2111,6 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": ""
                         }
                       ]
                     }
@@ -3121,10 +3113,6 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": ""
                         }
                       ]
                     }
@@ -4058,10 +4046,6 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": ""
                         }
                       ]
                     }
@@ -4851,7 +4835,7 @@
                   "children": [
                     {
                       "type": "element",
-                      "value": "bar",
+                      "value": "b",
                       "tagName": "span",
                       "properties": {},
                       "children": [
@@ -5010,15 +4994,24 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": "ar"
                         }
                       ]
                     }
                   ]
                 },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "ar"
+                    }
+                  ]
+                },
                 {
                   "type": "element",
                   "tagName": "span",
@@ -6029,10 +6022,6 @@
                               ]
                             }
                           ]
-                        },
-                        {
-                          "type": "text",
-                          "value": ""
                         }
                       ]
                     }