fix(vitepress): improve class handing, reduce html payload size

antfu · Jan 26, 2024 · f54cbf6 · f54cbf6
1 parent 68429e4
commit f54cbf6
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 327 deletions.
diff --git a/packages/shikiji-twoslash/style-rich.css b/packages/shikiji-twoslash/style-rich.css
@@ -10,6 +10,7 @@
   --twoslash-docs-color: #888;
   --twoslash-docs-font: sans-serif;
   --twoslach-code-font: inherit;
+  --twoslach-code-font-size: 1em;
   --twoslash-matched-color: inherit;
   --twoslash-unmatched-color: #888;
   --twoslash-cursor-color: #8888;
@@ -95,6 +96,7 @@
 
 .twoslash .twoslash-popup-code {
   font-family: var(--twoslach-code-font);
+  font-size: var(--twoslach-code-font-size);
 }
 
 .twoslash .twoslash-popup-docs {

diff --git a/packages/vitepress-plugin-twoslash/src/client.ts b/packages/vitepress-plugin-twoslash/src/client.ts
@@ -24,16 +24,33 @@ const TwoslashFloatingVue = {
     app.use(FloatingVue, {
       ...options,
       themes: {
-        twoslash: {
+        'twoslash': {
           $extend: 'dropdown',
           triggers: isMobile ? ['touch'] : ['hover', 'touch'],
           popperTriggers: isMobile ? ['touch'] : ['hover', 'touch'],
+          placement: 'bottom-start',
           overflowPadding: 10,
           delay: 0,
           handleResize: false,
           autoHide: true,
           instantMove: true,
           flip: false,
+          arrowPadding: 8,
+          autoBoundaryMaxSize: true,
+        },
+        'twoslash-query': {
+          $extend: 'twoslash',
+          triggers: ['click'],
+          popperTriggers: ['click'],
+          autoHide: false,
+        },
+        'twoslash-completion': {
+          $extend: 'twoslash-query',
+          triggers: ['click'],
+          popperTriggers: ['click'],
+          autoHide: false,
+          distance: 0,
+          arrowOverflow: true,
         },
         ...options.theme,
       },

diff --git a/packages/vitepress-plugin-twoslash/src/renderer-floating-vue.ts b/packages/vitepress-plugin-twoslash/src/renderer-floating-vue.ts
@@ -10,20 +10,18 @@ import type { VitePressPluginTwoslashOptions } from 'vitepress-plugin-twoslash'
 export { defaultHoverInfoProcessor }
 
 export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & RendererRichOptions = {}): TwoslashRenderer {
+  const classCopyIgnore = 'vp-copy-ignore'
+  const classFloatingPanel = 'twoslash-floating'
+  const classCode = 'vp-code'
+  const classMarkdown = 'vp-doc'
+  const floatingVueTheme = 'twoslash'
+  const floatingVueThemeQuery = 'twoslash-query'
+  const floatingVueThemeCompletion = 'twoslash-completion'
+
   const hoverBasicProps = {
     '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',
-  }
-  const hoverPresistedProps = {
-    ...hoverBasicProps,
-    ':shown': 'true',
-    ':triggers': '["click"]',
-    ':popper-triggers': '["click"]',
-    ':auto-hide': 'false',
+    'popper-class': ['shiki', classFloatingPanel, classCopyIgnore, classCode].join(' '),
+    'theme': floatingVueTheme,
   }
 
   function compose(parts: { token: Element | Text, popup: Element }): Element[] {
@@ -50,7 +48,7 @@ export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & Re
   }
 
   const rich = rendererRich({
-    classExtra: 'vp-copy-ignore',
+    classExtra: classCopyIgnore,
     ...options,
     renderMarkdown,
     renderMarkdownInline,
@@ -62,31 +60,27 @@ export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & Re
       hoverCompose: compose,
       queryToken: {
         tagName: 'v-menu',
-        properties: hoverPresistedProps,
+        properties: {
+          ...hoverBasicProps,
+          theme: floatingVueThemeQuery,
+        },
       },
       queryCompose: compose,
       popupDocs: {
-        class: 'twoslash-popup-docs vp-doc',
+        class: `twoslash-popup-docs ${classMarkdown}`,
       },
       popupDocsTags: {
-        class: 'twoslash-popup-docs twoslash-popup-docs-tags vp-doc',
+        class: `twoslash-popup-docs twoslash-popup-docs-tags ${classMarkdown}`,
       },
       completionCompose({ popup, cursor }) {
         return [
           <Element>{
             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',
+              'popper-class': ['shiki twoslash-completion', classCopyIgnore, classFloatingPanel],
+              'theme': floatingVueThemeCompletion,
               ':shown': 'true',
-              ':triggers': '["click"]',
-              ':popper-triggers': '["click"]',
-              ':auto-hide': 'false',
             },
             children: [
               cursor,

diff --git a/packages/vitepress-plugin-twoslash/src/style.css b/packages/vitepress-plugin-twoslash/src/style.css
@@ -4,10 +4,12 @@
   --twoslash-docs-color: var(--vp-c-text-1);
   --twoslash-docs-font: var(--vp-font-family-base);
   --twoslash-code-font: var(--vp-font-family-mono);
+  --twoslash-code-size: var(--vp-code-font-size);
   --twoslash-underline-color: #8888;
   --twoslash-border-color: var(--vp-c-border);
   --twoslash-cursor-color: var(--vp-c-brand);
   --twoslash-matched-color: var(--vp-c-brand);
+  --twoslash-unmatched-color: var(--vp-c-text-2);
 }
 
 .v-popper--theme-twoslash {
@@ -44,20 +46,19 @@
   color: var(--twoslash-unmatched-color) !important;
 }
 
-.floating-vue-twoslash .twoslash-popup-code {
+.twoslash-floating .twoslash-popup-code {
   max-width: 600px;
   display: block;
   width: fit-content;
   min-width: 100%;
   padding: 6px 12px;
   line-height: var(--vp-code-line-height);
-  font-size: var(--vp-code-font-size);
-  color: var(--vp-code-block-color);
+  font-size: var(--twoslash-code-size);
   transition: color 0.5s;
   white-space: pre-wrap;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs {
+.twoslash-floating .twoslash-popup-docs {
   border-top: 1px solid var(--twoslash-border-color);
   color: var(--twoslash-docs-color);
   padding: 0px 12px 0px 12px !important;
@@ -70,29 +71,29 @@
   text-wrap: balance;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs p {
+.twoslash-floating .twoslash-popup-docs p {
   margin: 0;
   padding: 6px 0;
   text-wrap: balance;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs pre {
+.twoslash-floating .twoslash-popup-docs pre {
   background-color: var(--vp-code-block-bg);
   border-radius: 8px;
   padding: 12px;
   margin: 6px -2px;
   overflow-x: auto;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs-tags {
+.twoslash-floating .twoslash-popup-docs-tags {
   display: flex;
   flex-direction: column;
   padding: 8px 12px !important;
 }
 
-.floating-vue-twoslash .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
+.twoslash-floating .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
   font-family: var(--twoslash-code-font);
-  color: var(--vp-c-text-2);
+  color: var(--twoslash-unmatched-color);
   margin-right: 0.5em;
 }
 
@@ -105,16 +106,16 @@
   user-select: none;
 }
 
-.floating-vue-twoslash-compeltion .v-popper__arrow-container {
+.twoslash-floating.twoslash-completion .v-popper__arrow-container {
   display: none;
 }
 
-.floating-vue-twoslash-compeltion .twoslash-completion-list {
+.twoslash-floating.twoslash-completion .twoslash-completion-list {
   padding: 6px;
-  font-family: var(--vp-font-family-mono);
-  font-size: var(--vp-code-font-size) !important;
+  font-family: var(--twoslash-code-font);
+  font-size: var(--twoslash-code-size) !important;
 }
 
-.floating-vue-twoslash-compeltion .twoslash-completion-list li {
+.twoslash-floating.twoslash-completion .twoslash-completion-list li {
   padding: 3px 0;
 }
diff --git a/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile-2.ts.json b/packages/vitepress-plugin-twoslash/test/out/completion-end-multifile-2.ts.json
@@ -92,11 +92,8 @@
                       "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"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -396,11 +393,8 @@
                       "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"
+                        "popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
+                        "theme": "twoslash"
                       },
                       "children": [
                         {
@@ -566,16 +560,13 @@
                           "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"
+                            "popper-class": [
+                              "shiki twoslash-completion",
+                              "vp-copy-ignore",
+                              "twoslash-floating"
+                            ],
+                            "theme": "twoslash-completion",
+                            ":shown": "true"
                           },
                           "children": [
                             {