@slidev/client 0.43.0-beta.3 → 0.43.0-beta.4

package/builtin/Monaco.vue

@@ -16,6 +16,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { decode } from 'js-base64'
 import { nanoid } from 'nanoid'
+import type * as monaco from 'monaco-editor'
 import { isDark } from '../logic/dark'
 
 const props = withDefaults(defineProps<{
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<{
   readonly?: boolean
   lineNumbers?: 'on' | 'off' | 'relative' | 'interval'
   height?: number | string
+  editorOptions?: monaco.editor.IEditorOptions
 }>(), {
   code: '',
   lang: 'typescript',
@@ -108,6 +110,7 @@ useEventListener(window, 'message', ({ data: payload }) => {
         lang: props.lang,
         readonly: props.readonly,
         lineNumbers: props.lineNumbers,
+        editorOptions: props.editorOptions,
         dark: isDark.value,
         style: Object.entries(getStyleObject(iframe.value)).map(([k, v]) => `${k}: ${v};`).join(''),
       })

package/composables/useViewTransition.ts

@@ -0,0 +1,56 @@
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+export function useViewTransition() {
+  const router = useRouter()
+  const isViewTransition = ref(false)
+
+  let viewTransitionFinish: undefined | (() => void)
+  let viewTransitionAbort: undefined | (() => void)
+
+  const supportViewTransition = typeof document !== 'undefined' && 'startViewTransition' in document
+
+  router.beforeResolve((from, to) => {
+    if (!(from.meta.transition === 'view-transition' || to.meta.transition === 'view-transition')) {
+      isViewTransition.value = false
+      return
+    }
+
+    if (!supportViewTransition) {
+      isViewTransition.value = false
+      console.warn('View transition is not supported in your browser, fallback to normal transition.')
+      return
+    }
+
+    isViewTransition.value = true
+    const promise = new Promise<void>((resolve, reject) => {
+      viewTransitionFinish = resolve
+      viewTransitionAbort = reject
+    })
+
+    let changeRoute: () => void
+    const ready = new Promise<void>(resolve => (changeRoute = resolve))
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const transition = document.startViewTransition(() => {
+      changeRoute()
+      return promise
+    })
+
+    transition.finished.then(() => {
+      viewTransitionAbort = undefined
+      viewTransitionFinish = undefined
+    })
+    return ready
+  })
+
+  if (supportViewTransition) {
+    router.afterEach(() => {
+      viewTransitionFinish?.()
+      viewTransitionAbort?.()
+    })
+  }
+
+  return isViewTransition
+}

package/iframes/monaco/index.ts

@@ -16,6 +16,7 @@ const props = {
   lineNumbers: url.searchParams.get('lineNumbers') ?? 'off',
   dark: false,
   style: '',
+  editorOptions: {},
 }
 
 const styleObject = document.createElement('style')
@@ -65,7 +66,7 @@ function post(data: any, type = 'slidev-monaco') {
 }
 
 async function start() {
-  const { monaco, theme = {} } = await setupMonaco()
+  const { monaco, theme = {}, editorOptions = {} } = await setupMonaco()
 
   const style = getComputedStyle(document.documentElement)
   const container = document.getElementById('container')!
@@ -106,6 +107,7 @@ async function start() {
       enableSplitViewResizing: false,
       renderOverviewRuler: false,
       // renderSideBySide: false,
+      ...editorOptions,
     })
     monacoEditor.setModel({
       original: model,
@@ -146,6 +148,7 @@ async function start() {
         if (selection)
           originalEditor.setSelection(selection)
       }
+      originalEditor.updateOptions(props.editorOptions)
 
       if (modifiedEditor.getValue().toString() !== props.diff) {
         const selection = modifiedEditor.getSelection()
@@ -153,6 +156,7 @@ async function start() {
         if (selection)
           modifiedEditor.setSelection(selection)
       }
+      modifiedEditor.updateOptions(props.editorOptions)
     }
 
     diffModel.onDidChangeContent(() => {
@@ -191,6 +195,7 @@ async function start() {
       },
       overviewRulerLanes: 0,
       minimap: { enabled: false },
+      ...editorOptions,
     })
 
     format = async () => {
@@ -218,6 +223,7 @@ async function start() {
         if (selection)
           originalEditor.setSelection(selection)
       }
+      originalEditor.updateOptions(props.editorOptions)
     }
   }
 

package/internals/Editor.vue

@@ -6,6 +6,10 @@ import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
 
+const props = defineProps<{
+  resize: boolean
+}>()
+
 const tab = ref<'content' | 'note'>('content')
 const content = ref('')
 const note = ref('')
@@ -103,16 +107,19 @@ function switchTab(newTab: typeof tab.value) {
   // @ts-expect-error force cast
   document.activeElement?.blur?.()
 }
-useEventListener('pointermove', (e) => {
-  if (handlerDown.value)
-    updateWidth(window.innerWidth - e.pageX)
-}, { passive: true })
-useEventListener('pointerup', () => {
-  handlerDown.value = false
-})
-useEventListener('resize', () => {
-  updateWidth(editorWidth.value)
-})
+
+if (props.resize) {
+  useEventListener('pointermove', (e) => {
+    if (handlerDown.value)
+      updateWidth(window.innerWidth - e.pageX)
+  }, { passive: true })
+  useEventListener('pointerup', () => {
+    handlerDown.value = false
+  })
+  useEventListener('resize', () => {
+    updateWidth(editorWidth.value)
+  })
+}
 
 throttledWatch(
   [content, note],
@@ -126,14 +133,16 @@ throttledWatch(
 
 <template>
   <div
+    v-if="resize"
     class="fixed h-full top-0 bottom-0 w-10px bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
     :class="{ '!opacity-30': handlerDown }"
     :style="{ right: `${editorWidth - 5}px`, cursor: 'col-resize' }"
     @pointerdown="onHandlerDown"
   />
   <div
-    class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
-    :style="{ width: `${editorWidth}px` }"
+    class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
+    :class="resize ? 'border-l border-gray-400 border-opacity-20' : ''"
+    :style="resize ? { width: `${editorWidth}px` } : {}"
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">

package/internals/NavControls.vue

@@ -118,7 +118,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <carbon:user-speaker />
         </RouterLink>
 
-        <button v-if="__DEV__ && !isPresenter" class="slidev-icon-btn <md:hidden" @click="showEditor = !showEditor">
+        <button
+          v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
+          class="slidev-icon-btn <md:hidden"
+          @click="showEditor = !showEditor"
+        >
           <carbon:text-annotation-toggle />
         </button>
       </template>

package/internals/Play.vue

@@ -32,7 +32,7 @@ useSwipeControls(root)
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const Editor = shallowRef<any>()
-if (__DEV__)
+if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('./Editor.vue').then(v => Editor.value = v.default)
 
 const DrawingControls = shallowRef<any>()
@@ -69,8 +69,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
     </SlideContainer>
 
-    <template v-if="__DEV__">
-      <Editor v-if="Editor && showEditor" />
+    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
+      <Editor :resize="true" />
     </template>
   </div>
   <Controls />

package/internals/Presenter.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { clicks, clicksTotal, currentPage, currentRoute, hasNext, nextRoute, total, useSwipeControls } from '../logic/nav'
-import { showOverview, showPresenterCursor } from '../state'
+import { showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs, themeVars } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -53,6 +53,10 @@ const nextSlide = computed(() => {
   }
 })
 
+const Editor = shallowRef<any>()
+if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
+  import('./Editor.vue').then(v => Editor.value = v.default)
+
 // sync presenter cursor
 onMounted(() => {
   const slidesContainer = main.value!.querySelector('#slide-content')!
@@ -132,7 +136,10 @@ onMounted(() => {
         </div>
       </div>
       <div class="grid-section note overflow-auto">
-        <NoteEditor v-if="__DEV__" class="w-full max-w-full h-full overflow-auto p-2 lg:p-4" />
+        <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
+          <Editor />
+        </template>
+        <NoteEditor v-else-if="__DEV__" class="w-full max-w-full h-full overflow-auto p-2 lg:p-4" />
         <NoteStatic v-else class="w-full max-w-full h-full overflow-auto p-2 lg:p-4" />
       </div>
       <div class="grid-section bottom">

package/internals/SlidesOverview.vue

@@ -57,61 +57,60 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div
-    v-show="value"
-    class="slides-overview bg-main !bg-opacity-75 p-16 overflow-y-auto"
+  <Transition
+    enter-active-class="duration-150 ease-out"
+    enter-from-class="opacity-0 scale-102 !backdrop-blur-0px"
+    leave-active-class="duration-200 ease-in"
+    leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
   >
     <div
-      class="grid gap-y-4 gap-x-8 w-full"
-      :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      v-show="value"
+      class="bg-main !bg-opacity-75 p-16 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
+      @click="close()"
     >
       <div
-        v-for="(route, idx) of rawRoutes"
-        :key="route.path"
-        class="relative"
+        class="grid gap-y-4 gap-x-8 w-full"
+        :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
       >
         <div
-          class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary"
-          :class="{ 'border-$slidev-theme-primary': focus(idx + 1), 'border-gray-400': !focus(idx + 1) }"
-          :style="themeVars"
-          @click="go(+route.path)"
+          v-for="(route, idx) of rawRoutes"
+          :key="route.path"
+          class="relative"
         >
-          <SlideContainer
-            :key="route.path"
-            :width="cardWidth"
-            :clicks-disabled="true"
-            class="pointer-events-none"
+          <div
+            class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary transition"
+            :class="{ 'border-$slidev-theme-primary': focus(idx + 1), 'border-gray-400': !focus(idx + 1) }"
+            :style="themeVars"
+            @click="go(+route.path)"
           >
-            <SlideWrapper
-              :is="route.component"
-              v-if="route?.component"
+            <SlideContainer
+              :key="route.path"
+              :width="cardWidth"
               :clicks-disabled="true"
-              :class="getSlideClass(route)"
-              :route="route"
-              context="overview"
-            />
-            <DrawingPreview :page="+route.path" />
-          </SlideContainer>
-        </div>
-        <div
-          class="absolute top-0 opacity-50"
-          :style="`left: ${cardWidth + 5}px`"
-        >
-          {{ idx + 1 }}
+              class="pointer-events-none"
+            >
+              <SlideWrapper
+                :is="route.component"
+                v-if="route?.component"
+                :clicks-disabled="true"
+                :class="getSlideClass(route)"
+                :route="route"
+                context="overview"
+              />
+              <DrawingPreview :page="+route.path" />
+            </SlideContainer>
+          </div>
+          <div
+            class="absolute top-0 opacity-50"
+            :style="`left: ${cardWidth + 5}px`"
+          >
+            {{ idx + 1 }}
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </Transition>
   <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
     <carbon:close />
   </button>
 </template>
-
-<style lang="postcss">
-.slides-overview {
-  @apply fixed left-0 right-0 top-0;
-  backdrop-filter: blur(5px);
-  height: 100vh;
-  height: calc(var(--vh, 1vh) * 100);
-}
-</style>

package/internals/SlidesShow.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, shallowRef, watch } from 'vue'
+import { TransitionGroup, computed, shallowRef, watch } from 'vue'
 import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes, router, transition } from '../logic/nav'
 import { getSlideClass } from '../utils'
+import { useViewTransition } from '../composables/useViewTransition'
 import SlideWrapper from './SlideWrapper'
 
 // @ts-expect-error virtual module
@@ -21,6 +22,8 @@ watch(currentRoute, () => {
     nextRoute.value.meta.__preloaded = true
 }, { immediate: true })
 
+const hasViewTransition = useViewTransition()
+
 // preserve the clicks count for previous slide to avoid flash on transition
 let previousClicks: [string | undefined, number] = [] as any
 router.beforeEach(() => {
@@ -39,7 +42,11 @@ const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded ||
   <GlobalBottom />
 
   <!-- Slides -->
-  <TransitionGroup v-bind="transition" id="slideshow" tag="div">
+  <component
+    :is="hasViewTransition ? 'div' : TransitionGroup"
+    v-bind="transition"
+    id="slideshow" tag="div"
+  >
     <template v-for="route of loadedRoutes" :key="route.path">
       <SlideWrapper
         :is="route?.component as any"
@@ -52,7 +59,7 @@ const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded ||
         :context="context"
       />
     </template>
-  </TransitionGroup>
+  </component>
 
   <!-- Global Top -->
   <GlobalTop />

package/modules/directives.ts

@@ -30,6 +30,9 @@ export default function createDirectives() {
           if (isClicksDisabled.value || dirInject(dir, injectionClicksDisabled)?.value)
             return
 
+          if (dir.value === false || dir.value === 'false')
+            return
+
           const elements = dirInject(dir, injectionClicksElements)
           const clicks = dirInject(dir, injectionClicks)
           const orderMap = dirInject(dir, injectionOrderMap)
@@ -37,19 +40,14 @@ export default function createDirectives() {
           const hide = dir.modifiers.hide !== false && dir.modifiers.hide != null
           const fade = dir.modifiers.fade !== false && dir.modifiers.fade != null
 
-          const prev = elements?.value?.length || 0
-
           const CLASS_HIDE = fade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN
 
           if (elements && !elements?.value?.includes(el))
             elements.value.push(el)
 
-          // Set default dir.value
-          if (dir.value == null)
-            dir.value = elements?.value?.length
-          // Relative value starts with '+' o '-'
-          if (typeof dir.value === 'string' && (dir.value.startsWith('+') || dir.value.startsWith('-')))
-            dir.value = (elements?.value?.length || 0) + Number(dir.value)
+          const prev = elements?.value?.length || 0
+
+          resolveDirValue(dir, prev)
 
           // If orderMap didn't have dir.value aka the order key, then initialize it.
           // If key exists, then move current element to the first of order array to
@@ -121,18 +119,16 @@ export default function createDirectives() {
           if (isClicksDisabled.value || dirInject(dir, injectionClicksDisabled)?.value)
             return
 
+          if (dir.value === false || dir.value === 'false')
+            return
+
           const elements = dirInject(dir, injectionClicksElements)
           const clicks = dirInject(dir, injectionClicks)
           const orderMap = dirInject(dir, injectionOrderMap)
 
           const prev = elements?.value.length || 0
 
-          // Set default dir.value
-          if (dir.value == null)
-            dir.value = elements?.value.length
-          // Relative value starts with '+' o '-'
-          if (typeof dir.value === 'string' && (dir.value.startsWith('+') || dir.value.startsWith('-')))
-            dir.value = (elements?.value?.length || 0) + Number(dir.value)
+          resolveDirValue(dir, prev)
 
           // If a v-click order before v-after is lower than v-after, the order map will
           // not contain the key for v-after, so we need to set it first, then move v-after
@@ -216,3 +212,12 @@ export default function createDirectives() {
     },
   }
 }
+
+function resolveDirValue(dir: DirectiveBinding<any>, prev: number) {
+  // Set default dir.value
+  if (dir.value == null || dir.value === true || dir.value === 'true')
+    dir.value = prev
+  // Relative value starts with '+' o '-'
+  if (typeof dir.value === 'string' && (dir.value.startsWith('+') || dir.value.startsWith('-')))
+    dir.value = prev + Number(dir.value)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.0-beta.3",
+  "version": "0.43.0-beta.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.6",
-    "@unocss/reset": "^0.55.4",
+    "@unocss/reset": "^0.55.5",
     "@vueuse/core": "^10.4.1",
     "@vueuse/head": "^1.3.1",
     "@vueuse/math": "^10.4.1",
@@ -35,14 +35,14 @@
     "prettier": "^3.0.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.4",
-    "unocss": "^0.55.4",
+    "unocss": "^0.55.5",
     "vite-plugin-windicss": "^1.9.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.0-beta.3",
-    "@slidev/types": "0.43.0-beta.3"
+    "@slidev/parser": "0.43.0-beta.4",
+    "@slidev/types": "0.43.0-beta.4"
   },
   "devDependencies": {
     "vite": "^4.4.9"