@slidev/client 0.46.3 → 0.47.1

package/App.vue

@@ -6,5 +6,4 @@ setupRoot()
 
 <template>
   <RouterView />
-  <StarportCarrier />
 </template>

package/internals/Play.vue

@@ -48,6 +48,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       :width="isPrintMode ? windowSize.width.value : undefined"
       :scale="slideScale"
+      :is-main="true"
       @pointerdown="onClick"
     >
       <template #default>

package/internals/SlideContainer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
+import { useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, provide, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
@@ -15,6 +15,10 @@ const props = defineProps({
   scale: {
     type: [Number, String],
   },
+  isMain: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const root = ref<HTMLDivElement>()
@@ -52,6 +56,14 @@ const className = computed(() => ({
   'select-none': !configs.selectable,
 }))
 
+if (props.isMain) {
+  useStyleTag(computed(() => `
+    :root {
+      --slidev-slide-scale: ${scale.value};
+    }
+  `))
+}
+
 provide(injectionSlideScale, scale as any)
 </script>
 

package/internals/SlidesShow.vue

@@ -68,6 +68,7 @@ function onAfterLeave() {
         :class="getSlideClass(route)"
         :route="route"
         :render-context="renderContext"
+        class="overflow-hidden"
       />
     </template>
   </component>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.46.3",
+  "version": "0.47.1",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -20,8 +20,9 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
+    "@shikijs/vitepress-twoslash": "^1.0.0-beta.3",
     "@unhead/vue": "^1.8.10",
-    "@unocss/reset": "^0.58.3",
+    "@unocss/reset": "^0.58.4",
     "@vueuse/core": "^10.7.2",
     "@vueuse/math": "^10.7.2",
     "@vueuse/motion": "^2.0.0",
@@ -29,24 +30,22 @@
     "defu": "^6.1.4",
     "drauu": "^0.3.7",
     "file-saver": "^2.0.5",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "js-base64": "^3.7.6",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
-    "mermaid": "^10.7.0",
+    "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.4",
+    "nanoid": "^5.0.5",
     "prettier": "^3.2.4",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
-    "unocss": "^0.58.3",
-    "vite-plugin-windicss": "^1.9.3",
+    "unocss": "^0.58.4",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
-    "vue-starport": "^0.4.0",
-    "windicss": "^3.5.6",
-    "@slidev/parser": "0.46.3",
-    "@slidev/types": "0.46.3"
+    "@slidev/parser": "0.47.1",
+    "@slidev/types": "0.47.1"
   },
   "devDependencies": {
     "vite": "^5.0.12"

package/setup/codemirror.ts

@@ -1,6 +1,6 @@
 import type { Ref, WritableComputedRef } from 'vue'
 import { watch } from 'vue'
-import CodeMirror from 'codemirror'
+import * as CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'

package/setup/main.ts

@@ -2,7 +2,7 @@
 
 import type { AppContext } from '@slidev/types'
 import { MotionPlugin } from '@vueuse/motion'
-import StarportPlugin from 'vue-starport'
+import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 
 export default function setupMain(context: AppContext) {
   function setMaxHeight() {
@@ -14,7 +14,7 @@ export default function setupMain(context: AppContext) {
   window.addEventListener('resize', setMaxHeight)
 
   context.app.use(MotionPlugin)
-  context.app.use(StarportPlugin({ keepAlive: true }))
+  context.app.use(TwoSlashFloatingVue as any)
 
   // @ts-expect-error inject in runtime
   // eslint-disable-next-line unused-imports/no-unused-vars

package/styles/code.css

@@ -3,48 +3,24 @@ html.dark:root {
 }
 
 /* Shiki */
-html.dark .shiki-light {
-  display: none;
-}
-
-html:not(.dark) .shiki-dark {
-  display: none;
-}
-
-.shiki-container {
-  @apply relative flex flex-col;
-}
-
-.shiki-container > .shiki {
-  @apply h-full;
-}
-
-/* Shikiji */
-html.dark .shikiji {
+html.dark .shiki {
   color: var(--shiki-dark, inherit);
-  background: var(--shiki-dark-bg, inherit);
   --twoslash-popup-bg: var(--shiki-dark-bg, inherit);
 }
 
-html.dark .shikiji span {
+html.dark .shiki span {
   color: var(--shiki-dark);
 }
 
-html:not(.dark) .shikiji {
+html:not(.dark) .shiki {
   color: var(--shiki-light, inherit);
-  background: var(--shiki-light-bg, inherit);
   --twoslash-popup-bg: var(--shiki-light-bg, inherit);
 }
 
-html:not(.dark) .shikiji span {
+html:not(.dark) .shiki span {
   color: var(--shiki-light);
 }
 
-.shikiji.twoslash {
-  /* Do not set overflow so the hover popover can be displayed */
-  overflow: inherit;
-}
-
 .twoslash-meta-line.twoslash-popover-line {
   margin-top: -10px;
 }
@@ -64,6 +40,7 @@ html:not(.dark) .shikiji span {
   font-size: var(--slidev-code-font-size) !important;
   line-height: var(--slidev-code-line-height) !important;
   border-radius: var(--slidev-code-radius) !important;
+  background: var(--slidev-code-background);
   overflow: auto;
 }
 
@@ -85,6 +62,18 @@ html:not(.dark) .shikiji span {
   @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
 }
 
+/* Inline Code */
+.slidev-layout :not(pre) > code {
+  font-size: 0.9em;
+  background: var(--slidev-code-background);
+  border-radius: var(--slidev-code-radius);
+  @apply font-light py-0.5 px-1.5;
+}
+
+.slidev-layout :not(pre) > code:before {
+  margin-right: -0.08em;
+}
+
 /* Revert CSS reset for KaTex */
 .katex,
 .katex :after,

package/styles/shiki-twoslash.css

@@ -0,0 +1,24 @@
+:root {
+  --twoslash-popup-bg: var(--slidev-code-background);
+  --twoslash-popup-color: var(--slidev-code-foreground);
+  --twoslash-docs-color: inherit;
+  --twoslash-docs-font: inherit;
+  --twoslash-code-font: theme('fontFamily.mono');
+  --twoslash-underline-color: #8888;
+  --twoslash-border-color: #8888;
+  --twoslash-cursor-color: var(--slidev-theme-primary);
+  --twoslash-matched-color: var(--slidev-theme-primary);
+}
+
+.twoslash-popup-container {
+  font-size: calc(13px * var(--slidev-slide-scale, 1));
+}
+
+.twoslash-popup-container .twoslash-popup-code {
+  font-size: 0.85em;
+}
+
+.twoslash-floating .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
+  color: inherit;
+  opacity: 0.5;
+}

package/styles/vars.css

@@ -1,5 +1,6 @@
 :root {
-  --slidev-code-background: rgba(125,125,125,0.03);
+  --slidev-code-background: #f5f5f5;
+  --slidev-code-foreground: #1b1b1b;
   --slidev-code-font-family: theme('fontFamily.mono');
   --slidev-code-padding: 8px;
   --slidev-code-font-size: 12px;
@@ -8,7 +9,11 @@
   --slidev-code-margin: 4px 0;
 
   --slidev-transition-duration: 0.5s;
-
   --slidev-slide-container-background: black;
   --slidev-controls-foreground: white;
 }
+
+html.dark {
+  --slidev-code-background: #1b1b1b;
+  --slidev-code-foreground: #eee;
+}

package/windi.config.ts

@@ -1,86 +0,0 @@
-import { resolve } from 'node:path'
-import process from 'node:process'
-import { isTruthy } from '@antfu/utils'
-import { DefaultExtractor, defineConfig } from 'vite-plugin-windicss'
-import typography from 'windicss/plugin/typography'
-
-export default defineConfig({
-  extract: {
-    include: [
-      resolve(process.cwd(), '**/*.{vue,ts,tsx,js,jsx,md}'),
-      // @slidev/client/**/*.{vue,ts}
-      resolve(__dirname, '**/*.{vue,ts}'),
-    ],
-    exclude: [
-      '.git',
-      'dist',
-      resolve(process.cwd(), '.git'),
-      resolve(process.cwd(), 'dist'),
-      // @slidev/client/node_modules
-      resolve(__dirname, 'node_modules'),
-      resolve(__dirname, 'windi.config.ts'),
-    ],
-    extractors: [
-      {
-        extensions: ['md'],
-        extractor(code, id) {
-          const data = DefaultExtractor(code, id)
-
-          const frontmatterClasses = Array.from(code.matchAll(/^class:\s+(.*)$/gm)).flatMap(i => i[1].split(/[\s'"`]/g)).filter(isTruthy)
-          const classes = [
-            ...data.classes || [],
-            ...frontmatterClasses,
-          ]
-
-          return {
-            ...data,
-            classes,
-          }
-        },
-      },
-    ],
-  },
-  plugins: [
-    // @ts-expect-error casing
-    typography,
-  ],
-  safelist: [
-    '!opacity-0',
-  ],
-  shortcuts: {
-    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
-    'bg-active': 'bg-gray-400/10',
-    'border-main': 'border-gray-400/20',
-    'abs-tl': 'absolute top-0 left-0',
-    'abs-tr': 'absolute top-0 right-0',
-    'abs-b': 'absolute bottom-0 left-0 right-0',
-    'abs-bl': 'absolute bottom-0 left-0',
-    'abs-br': 'absolute bottom-0 right-0',
-  },
-  attributify: true,
-  darkMode: 'class',
-  preflight: {
-    includeAll: true,
-  },
-  theme: {
-    extend: {
-      typography: {
-        DEFAULT: {
-          css: {
-            color: 'inherit',
-            a: { color: 'inherit' },
-            b: { color: 'inherit' },
-            code: { color: 'inherit' },
-            strong: { color: 'inherit' },
-            em: { color: 'inherit' },
-            h1: { color: 'inherit' },
-            h2: { color: 'inherit' },
-            h3: { color: 'inherit' },
-            h4: { color: 'inherit' },
-            blockquote: { color: 'inherit' },
-          },
-        },
-      },
-    },
-  },
-})