From a23e40b33519bce243a307d4b8e52e8fd228554d Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 19 Jan 2024 16:12:10 +0100 Subject: [PATCH] test: add test cases --- .../shikiji-twoslash/test/fixtures.test.ts | 2 +- .../test/fixtures/completion-string.ts | 2 + .../out/completion-end-multifile-2.ts.html | 2 +- .../test/out/completion-end-multifile.ts.html | 2 +- .../test/out/completion-end.ts.html | 2 +- .../test/out/completion-string.ts.html | 2 + .../test/out/completion-string.ts.json | 889 +++++++++++++++++ .../test/out/highlights.ts.html | 2 +- .../test/out/import-vue.ts.html | 2 +- .../test/out/query-offset.ts.html | 2 +- .../test/out/completion-string.ts.json | 943 ++++++++++++++++++ 11 files changed, 1843 insertions(+), 7 deletions(-) create mode 100644 packages/shikiji-twoslash/test/fixtures/completion-string.ts create mode 100644 packages/shikiji-twoslash/test/out/completion-string.ts.html create mode 100644 packages/shikiji-twoslash/test/out/completion-string.ts.json create mode 100644 packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json diff --git a/packages/shikiji-twoslash/test/fixtures.test.ts b/packages/shikiji-twoslash/test/fixtures.test.ts index 312cc07..0cbe14b 100644 --- a/packages/shikiji-twoslash/test/fixtures.test.ts +++ b/packages/shikiji-twoslash/test/fixtures.test.ts @@ -26,7 +26,7 @@ describe('fixtures', () => { expect.soft(JSON.stringify(hast, null, 2)) .toMatchFileSnapshot(`./out/${name}.json`) - const style = '' + const style = '' expect.soft(style + html) .toMatchFileSnapshot(`./out/${name}.html`) }) diff --git a/packages/shikiji-twoslash/test/fixtures/completion-string.ts b/packages/shikiji-twoslash/test/fixtures/completion-string.ts new file mode 100644 index 0000000..a69c591 --- /dev/null +++ b/packages/shikiji-twoslash/test/fixtures/completion-string.ts @@ -0,0 +1,2 @@ +const str: '/' | '/foo' | '/bar' = '/' +// ^| diff --git a/packages/shikiji-twoslash/test/out/completion-end-multifile-2.ts.html b/packages/shikiji-twoslash/test/out/completion-end-multifile-2.ts.html index 0d5796c..59b4fa2 100644 --- a/packages/shikiji-twoslash/test/out/completion-end-multifile-2.ts.html +++ b/packages/shikiji-twoslash/test/out/completion-end-multifile-2.ts.html @@ -1,4 +1,4 @@ -
import { const foo: "foo"foo } from './foo'
+
import { const foo: "foo"foo } from './foo'
 
 var console: Consoleconsole.e
  • error
 
 

\ No newline at end of file
diff --git a/packages/shikiji-twoslash/test/out/completion-end-multifile.ts.html b/packages/shikiji-twoslash/test/out/completion-end-multifile.ts.html
index 4e87580..74eca10 100644
--- a/packages/shikiji-twoslash/test/out/completion-end-multifile.ts.html
+++ b/packages/shikiji-twoslash/test/out/completion-end-multifile.ts.html
@@ -1,4 +1,4 @@
-
import { const foo: "foo"foo } from './foo'
+
import { const foo: "foo"foo } from './foo'
  
 type type Example = {
     name: 'foo' | 'bar' | 'baz';
diff --git a/packages/shikiji-twoslash/test/out/completion-end.ts.html b/packages/shikiji-twoslash/test/out/completion-end.ts.html
index 01f7542..ddb1708 100644
--- a/packages/shikiji-twoslash/test/out/completion-end.ts.html
+++ b/packages/shikiji-twoslash/test/out/completion-end.ts.html
@@ -1,4 +1,4 @@
-
console.e
  • error

+
console.e
  • error

 
 
 const const a: {
diff --git a/packages/shikiji-twoslash/test/out/completion-string.ts.html b/packages/shikiji-twoslash/test/out/completion-string.ts.html
new file mode 100644
index 0000000..5a32849
--- /dev/null
+++ b/packages/shikiji-twoslash/test/out/completion-string.ts.html
@@ -0,0 +1,2 @@
+
const const str: "/" | "/foo" | "/bar"str: '/' | '/foo' | '/bar' = '/
  • /
  • /foo
  • /bar
'
+

\ No newline at end of file
diff --git a/packages/shikiji-twoslash/test/out/completion-string.ts.json b/packages/shikiji-twoslash/test/out/completion-string.ts.json
new file mode 100644
index 0000000..9ee2343
--- /dev/null
+++ b/packages/shikiji-twoslash/test/out/completion-string.ts.json
@@ -0,0 +1,889 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "element",
+      "tagName": "pre",
+      "properties": {
+        "class": [
+          "shiki",
+          "vitesse-dark",
+          "twoslash",
+          "lsp"
+        ],
+        "style": "background-color:#121212;color:#dbd7caee",
+        "tabindex": "0"
+      },
+      "children": [
+        {
+          "type": "element",
+          "tagName": "code",
+          "properties": {},
+          "children": [
+            {
+              "type": "element",
+              "tagName": "span",
+              "properties": {
+                "class": "line"
+              },
+              "children": [
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#CB7676"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "const"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#BD976A"
+                  },
+                  "children": [
+                    {
+                      "type": "element",
+                      "value": "str",
+                      "tagName": "span",
+                      "properties": {
+                        "class": "twoslash-hover"
+                      },
+                      "children": [
+                        {
+                          "type": "element",
+                          "tagName": "span",
+                          "properties": {
+                            "class": "twoslash-popup-container"
+                          },
+                          "children": [
+                            {
+                              "type": "element",
+                              "tagName": "code",
+                              "properties": {
+                                "class": "twoslash-popup-code"
+                              },
+                              "children": [
+                                {
+                                  "type": "element",
+                                  "tagName": "span",
+                                  "properties": {
+                                    "class": "line"
+                                  },
+                                  "children": [
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#CB7676"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "const"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": " "
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#BD976A"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "str"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#666666"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": ":"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": " "
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D99"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "\""
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "/"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D99"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "\""
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": " "
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#666666"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "|"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": " "
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D99"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "\""
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "/foo"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D99"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "\""
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": " "
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#666666"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "|"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": " "
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D99"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "\""
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "/bar"
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "style": "color:#C98A7D99"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "text",
+                                          "value": "\""
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "value": "str"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": ":"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "/"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "|"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "/foo"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "|"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "/bar"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "="
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#CB7676"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "element",
+                      "value": "/",
+                      "tagName": "span",
+                      "properties": {},
+                      "children": [
+                        {
+                          "type": "text",
+                          "value": "/"
+                        },
+                        {
+                          "type": "element",
+                          "tagName": "span",
+                          "properties": {
+                            "class": "twoslash-completion-cursor"
+                          },
+                          "children": [
+                            {
+                              "type": "element",
+                              "tagName": "ul",
+                              "properties": {
+                                "class": "twoslash-completion-list"
+                              },
+                              "children": [
+                                {
+                                  "type": "element",
+                                  "tagName": "li",
+                                  "properties": {},
+                                  "children": [
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "class": "twoslash-completions-icon completions-string"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "element",
+                                          "tagName": "svg",
+                                          "properties": {
+                                            "viewBox": "0 0 32 32"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "element",
+                                              "tagName": "path",
+                                              "properties": {
+                                                "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"
+                                              },
+                                              "children": []
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "element",
+                                          "tagName": "span",
+                                          "properties": {
+                                            "class": "twoslash-completions-matched"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "text",
+                                              "value": "/"
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "type": "element",
+                                          "tagName": "span",
+                                          "properties": {
+                                            "class": "twoslash-completions-unmatched"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "text",
+                                              "value": ""
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "type": "element",
+                                  "tagName": "li",
+                                  "properties": {},
+                                  "children": [
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "class": "twoslash-completions-icon completions-string"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "element",
+                                          "tagName": "svg",
+                                          "properties": {
+                                            "viewBox": "0 0 32 32"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "element",
+                                              "tagName": "path",
+                                              "properties": {
+                                                "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"
+                                              },
+                                              "children": []
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "element",
+                                          "tagName": "span",
+                                          "properties": {
+                                            "class": "twoslash-completions-matched"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "text",
+                                              "value": "/"
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "type": "element",
+                                          "tagName": "span",
+                                          "properties": {
+                                            "class": "twoslash-completions-unmatched"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "text",
+                                              "value": "foo"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "type": "element",
+                                  "tagName": "li",
+                                  "properties": {},
+                                  "children": [
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {
+                                        "class": "twoslash-completions-icon completions-string"
+                                      },
+                                      "children": [
+                                        {
+                                          "type": "element",
+                                          "tagName": "svg",
+                                          "properties": {
+                                            "viewBox": "0 0 32 32"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "element",
+                                              "tagName": "path",
+                                              "properties": {
+                                                "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"
+                                              },
+                                              "children": []
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "type": "element",
+                                      "tagName": "span",
+                                      "properties": {},
+                                      "children": [
+                                        {
+                                          "type": "element",
+                                          "tagName": "span",
+                                          "properties": {
+                                            "class": "twoslash-completions-matched"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "text",
+                                              "value": "/"
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "type": "element",
+                                          "tagName": "span",
+                                          "properties": {
+                                            "class": "twoslash-completions-unmatched"
+                                          },
+                                          "children": [
+                                            {
+                                              "type": "text",
+                                              "value": "bar"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "value": ""
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "value": "\n"
+            },
+            {
+              "type": "element",
+              "tagName": "span",
+              "properties": {
+                "class": "line"
+              },
+              "children": []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/shikiji-twoslash/test/out/highlights.ts.html b/packages/shikiji-twoslash/test/out/highlights.ts.html
index 686f3aa..d4a9c14 100644
--- a/packages/shikiji-twoslash/test/out/highlights.ts.html
+++ b/packages/shikiji-twoslash/test/out/highlights.ts.html
@@ -1,4 +1,4 @@
-
type type Result = "pass" | "fail"Result = "pass" | "fail"
+
type type Result = "pass" | "fail"Result = "pass" | "fail"
 
 const const hello: "OK"heconst hello: "OK"llo = "OK"
 
diff --git a/packages/shikiji-twoslash/test/out/import-vue.ts.html b/packages/shikiji-twoslash/test/out/import-vue.ts.html
index 936464c..5dc7554 100644
--- a/packages/shikiji-twoslash/test/out/import-vue.ts.html
+++ b/packages/shikiji-twoslash/test/out/import-vue.ts.html
@@ -1,4 +1,4 @@
-
import { function ref<T>(value: T): Ref<UnwrapRef<T>> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
+
import { function ref<T>(value: T): Ref<UnwrapRef<T>> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
 has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}
ref } from "vue"
 
 const const a: Ref<number>a = ref<number>(value: number): Ref<number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
diff --git a/packages/shikiji-twoslash/test/out/query-offset.ts.html b/packages/shikiji-twoslash/test/out/query-offset.ts.html
index 7a7caf3..02fee1b 100644
--- a/packages/shikiji-twoslash/test/out/query-offset.ts.html
+++ b/packages/shikiji-twoslash/test/out/query-offset.ts.html
@@ -1,4 +1,4 @@
-
const 
const foo: "123"foo = "123"
+
const 
const foo: "123"foo = "123"
 
 
 
diff --git a/packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json b/packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json
new file mode 100644
index 0000000..91ab13b
--- /dev/null
+++ b/packages/vitepress-plugin-twoslash/test/out/completion-string.ts.json
@@ -0,0 +1,943 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "element",
+      "tagName": "pre",
+      "properties": {
+        "class": [
+          "shiki",
+          "vitesse-dark",
+          "twoslash",
+          "lsp"
+        ],
+        "style": "background-color:#121212;color:#dbd7caee",
+        "tabindex": "0"
+      },
+      "children": [
+        {
+          "type": "element",
+          "tagName": "code",
+          "properties": {},
+          "children": [
+            {
+              "type": "element",
+              "tagName": "span",
+              "properties": {
+                "class": "line"
+              },
+              "children": [
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#CB7676"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "const"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#BD976A"
+                  },
+                  "children": [
+                    {
+                      "type": "element",
+                      "value": "str",
+                      "tagName": "v-menu",
+                      "properties": {
+                        "class": "twoslash-hover",
+                        "popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
+                        "placement": "bottom-start",
+                        "theme": "twoslash",
+                        ":arrow-padding": "8",
+                        ":auto-boundary-max-size": "true"
+                      },
+                      "children": [
+                        {
+                          "type": "element",
+                          "tagName": "span",
+                          "properties": {},
+                          "children": [
+                            {
+                              "type": "text",
+                              "value": "str"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "element",
+                          "tagName": "template",
+                          "properties": {
+                            "v-slot:popper": "{}"
+                          },
+                          "content": {
+                            "type": "root",
+                            "children": [
+                              {
+                                "type": "element",
+                                "tagName": "span",
+                                "properties": {
+                                  "class": "twoslash-popup-container vp-copy-ignore"
+                                },
+                                "children": [
+                                  {
+                                    "type": "element",
+                                    "tagName": "code",
+                                    "properties": {
+                                      "class": "twoslash-popup-code"
+                                    },
+                                    "children": [
+                                      {
+                                        "type": "element",
+                                        "tagName": "span",
+                                        "properties": {
+                                          "class": "line"
+                                        },
+                                        "children": [
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#CB7676"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "const"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": " "
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#BD976A"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "str"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#666666"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": ":"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": " "
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D99"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "\""
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "/"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D99"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "\""
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": " "
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#666666"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "|"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": " "
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D99"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "\""
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "/foo"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D99"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "\""
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": " "
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#666666"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "|"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": " "
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D99"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "\""
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "/bar"
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "style": "color:#C98A7D99"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "text",
+                                                "value": "\""
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "children": []
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": ":"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "/"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "|"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "/foo"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "|"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "/bar"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {},
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#666666"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "="
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#CB7676"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": " "
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D"
+                  },
+                  "children": [
+                    {
+                      "type": "element",
+                      "value": "/",
+                      "tagName": "span",
+                      "properties": {},
+                      "children": [
+                        {
+                          "type": "text",
+                          "value": "/"
+                        },
+                        {
+                          "type": "element",
+                          "tagName": "v-menu",
+                          "properties": {
+                            "popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
+                            "placement": "bottom-start",
+                            "theme": "twoslash",
+                            ":distance": "0",
+                            ":arrow-overflow": "true",
+                            ":auto-boundary-max-size": "true",
+                            ":shown": "true",
+                            ":triggers": "[\"click\"]",
+                            ":popper-triggers": "[\"click\"]",
+                            ":auto-hide": "false"
+                          },
+                          "children": [
+                            {
+                              "type": "element",
+                              "tagName": "span",
+                              "properties": {
+                                "class": "twoslash-completion-cursor vp-copy-ignore"
+                              },
+                              "children": []
+                            },
+                            {
+                              "type": "element",
+                              "tagName": "template",
+                              "properties": {
+                                "v-slot:popper": "{}"
+                              },
+                              "content": {
+                                "type": "root",
+                                "children": [
+                                  {
+                                    "type": "element",
+                                    "tagName": "ul",
+                                    "properties": {
+                                      "class": "twoslash-completion-list vp-copy-ignore"
+                                    },
+                                    "children": [
+                                      {
+                                        "type": "element",
+                                        "tagName": "li",
+                                        "properties": {},
+                                        "children": [
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "class": "twoslash-completions-icon completions-string"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "element",
+                                                "tagName": "svg",
+                                                "properties": {
+                                                  "viewBox": "0 0 32 32"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "element",
+                                                    "tagName": "path",
+                                                    "properties": {
+                                                      "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"
+                                                    },
+                                                    "children": []
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "element",
+                                                "tagName": "span",
+                                                "properties": {
+                                                  "class": "twoslash-completions-matched"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "text",
+                                                    "value": "/"
+                                                  }
+                                                ]
+                                              },
+                                              {
+                                                "type": "element",
+                                                "tagName": "span",
+                                                "properties": {
+                                                  "class": "twoslash-completions-unmatched"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "text",
+                                                    "value": ""
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      },
+                                      {
+                                        "type": "element",
+                                        "tagName": "li",
+                                        "properties": {},
+                                        "children": [
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "class": "twoslash-completions-icon completions-string"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "element",
+                                                "tagName": "svg",
+                                                "properties": {
+                                                  "viewBox": "0 0 32 32"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "element",
+                                                    "tagName": "path",
+                                                    "properties": {
+                                                      "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"
+                                                    },
+                                                    "children": []
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "element",
+                                                "tagName": "span",
+                                                "properties": {
+                                                  "class": "twoslash-completions-matched"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "text",
+                                                    "value": "/"
+                                                  }
+                                                ]
+                                              },
+                                              {
+                                                "type": "element",
+                                                "tagName": "span",
+                                                "properties": {
+                                                  "class": "twoslash-completions-unmatched"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "text",
+                                                    "value": "foo"
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      },
+                                      {
+                                        "type": "element",
+                                        "tagName": "li",
+                                        "properties": {},
+                                        "children": [
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {
+                                              "class": "twoslash-completions-icon completions-string"
+                                            },
+                                            "children": [
+                                              {
+                                                "type": "element",
+                                                "tagName": "svg",
+                                                "properties": {
+                                                  "viewBox": "0 0 32 32"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "element",
+                                                    "tagName": "path",
+                                                    "properties": {
+                                                      "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"
+                                                    },
+                                                    "children": []
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          },
+                                          {
+                                            "type": "element",
+                                            "tagName": "span",
+                                            "properties": {},
+                                            "children": [
+                                              {
+                                                "type": "element",
+                                                "tagName": "span",
+                                                "properties": {
+                                                  "class": "twoslash-completions-matched"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "text",
+                                                    "value": "/"
+                                                  }
+                                                ]
+                                              },
+                                              {
+                                                "type": "element",
+                                                "tagName": "span",
+                                                "properties": {
+                                                  "class": "twoslash-completions-unmatched"
+                                                },
+                                                "children": [
+                                                  {
+                                                    "type": "text",
+                                                    "value": "bar"
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "value": ""
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "element",
+                  "tagName": "span",
+                  "properties": {
+                    "style": "color:#C98A7D99"
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "'"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "value": "\n"
+            },
+            {
+              "type": "element",
+              "tagName": "span",
+              "properties": {
+                "class": "line"
+              },
+              "children": []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file