@slidev/client 0.48.0-beta.2 → 0.48.0-beta.4

package/builtin/Tweet.vue

@@ -7,9 +7,9 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { useScriptTag } from '@vueuse/core'
 import { getCurrentInstance, onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
+import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -41,21 +41,10 @@ async function create() {
 }
 
 // @ts-expect-error global
-if (window?.twttr?.widgets) {
+if (window?.twttr?.widgets)
   onMounted(create)
-}
-else {
-  useScriptTag(
-    'https://platform.twitter.com/widgets.js',
-    () => {
-      if (vm.isMounted)
-        create()
-      else
-        onMounted(create, vm)
-    },
-    { async: true },
-  )
-}
+else
+  useTweetScript(vm, create)
 </script>
 
 <template>

package/builtin/VClicks.ts

@@ -96,7 +96,7 @@ export default defineComponent({
         if (depth < +this.depth && Array.isArray(i.children))
           vNode = h(i, {}, mapSubList(i.children, depth))
         else
-          vNode = i
+          vNode = h(i)
 
         const delta = thisShowIdx - execIdx
         execIdx = thisShowIdx

package/composables/useTweetScript.ts

@@ -0,0 +1,17 @@
+import { createSharedComposable, useScriptTag } from '@vueuse/core'
+import type { ComponentInternalInstance } from 'vue'
+import { onMounted } from 'vue'
+
+export const useTweetScript = createSharedComposable(
+  (vm: ComponentInternalInstance, create: () => void) =>
+    useScriptTag(
+      'https://platform.twitter.com/widgets.js',
+      () => {
+        if (vm.isMounted)
+          create()
+        else
+          onMounted(create, vm)
+      },
+      { async: true },
+    ),
+)

package/constants.ts

@@ -1,6 +1,7 @@
 import type { ComputedRef, InjectionKey, Ref, UnwrapNestedRefs } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext, RenderContext } from '@slidev/types'
+import { objectOmit } from '@vueuse/core'
 import type { SlidevContext } from './modules/context'
 
 export const injectionClicksContext: InjectionKey<Ref<ClicksContext>> = Symbol('slidev-clicks-context')
@@ -24,3 +25,56 @@ export const TRUST_ORIGINS = [
   'localhost',
   '127.0.0.1',
 ]
+
+const FRONTMATTER_FIELDS = [
+  'clicks',
+  'disabled',
+  'hide',
+  'hideInToc',
+  'layout',
+  'level',
+  'preload',
+  'routeAlias',
+  'src',
+  'title',
+  'transition',
+  'zoom',
+]
+
+const HEADMATTER_FIELDS = [
+  ...FRONTMATTER_FIELDS,
+  'theme',
+  'titleTemplate',
+  'info',
+  'author',
+  'keywords',
+  'presenter',
+  'download',
+  'exportFilename',
+  'export',
+  'highlighter',
+  'lineNumbers',
+  'monaco',
+  'remoteAssets',
+  'selectable',
+  'record',
+  'colorSchema',
+  'routerMode',
+  'aspectRatio',
+  'canvasWidth',
+  'themeConfig',
+  'favicon',
+  'plantUmlServer',
+  'fonts',
+  'defaults',
+  'drawings',
+  'htmlAttrs',
+  'mdc',
+]
+
+export function filterFrontmatter(frontmatter: Record<string, any>, pageNo: number) {
+  return {
+    ...objectOmit(frontmatter, pageNo === 0 ? HEADMATTER_FIELDS : FRONTMATTER_FIELDS),
+    frontmatter,
+  }
+}

package/internals/DrawingControls.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Menu } from 'floating-vue'
+import 'floating-vue/dist/style.css'
 import {
   brush,
   brushColors,
@@ -21,19 +23,24 @@ function undo() {
 function redo() {
   drauu.redo()
 }
+
+let lastDrawingMode: typeof drawingMode.value = 'stylus'
 function setDrawingMode(mode: typeof drawingMode.value) {
   drawingMode.value = mode
   drawingEnabled.value = true
+  if (mode !== 'eraseLine')
+    lastDrawingMode = mode
 }
 function setBrushColor(color: typeof brush.color) {
   brush.color = color
   drawingEnabled.value = true
+  drawingMode.value = lastDrawingMode
 }
 </script>
 
 <template>
   <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20"
     dark="border border-gray-400 border-opacity-10"
     :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
     storage-key="slidev-drawing-pos"
@@ -57,23 +64,41 @@ function setBrushColor(color: typeof brush.color) {
     <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
     </IconButton>
-    <!-- TODO: not sure why it's not working! -->
-    <!-- <IconButton title="Erase" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
-    </IconButton> -->
+    </IconButton>
 
     <VerticalDivider />
 
+    <Menu>
+      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
+        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
+          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+      <template #popper>
+        <div class="flex bg-main p-2">
+          <div class="inline-block w-7 text-center">
+            {{ brush.size }}
+          </div>
+          <div class="pt-.5">
+            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
+          </div>
+        </div>
+      </template>
+    </Menu>
     <IconButton
       v-for="color of brushColors"
       :key="color"
       title="Set brush color"
-      :class="brush.color === color ? 'active' : 'shallow'"
+      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
       <div
-        class="w-6 h-6 transition-all transform border border-gray-400/50"
-        :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
+        class="w-6 h-6 transition-all transform border"
+        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
         :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
     </IconButton>
@@ -87,7 +112,7 @@ function setBrushColor(color: typeof brush.color) {
       <carbon:redo />
     </IconButton>
     <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
-      <carbon:delete />
+      <carbon:trash-can />
     </IconButton>
 
     <VerticalDivider />
@@ -106,3 +131,11 @@ function setBrushColor(color: typeof brush.color) {
     </IconButton>
   </Draggable>
 </template>
+
+<style lang="postcss">
+.v-popper--theme-menu {
+  .v-popper__arrow-inner {
+    @apply border-main;
+  }
+}
+</style>

package/internals/Editor.vue

@@ -38,7 +38,6 @@ watch(
 async function save() {
   dirty.value = false
   await update({
-    raw: null!,
     note: note.value || undefined,
     content: content.value,
     // frontmatter: frontmatter.value,

package/internals/InfoDialog.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 const hasInfo = computed(() => typeof configs.info === 'string')
 </script>

package/internals/Modal.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function onClick() {

package/internals/NoteEditor.vue

@@ -36,7 +36,7 @@ const { ignoreUpdates } = ignorableWatch(
     const id = currentSlideId.value
     clearTimeout(timer)
     timer = setTimeout(() => {
-      update({ raw: null!, note: v }, id)
+      update({ note: v }, id)
     }, 500)
   },
 )

package/internals/SlideWrapper.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, provide, ref, toRef } from 'vue'
+import { computed, defineComponent, h, provide, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
 import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { RouteRecordRaw } from 'vue-router'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
 
 export default defineComponent({
@@ -20,23 +21,37 @@ export default defineComponent({
     },
     is: {
       type: Object,
-      default: undefined,
+      required: true,
     },
     route: {
-      type: Object,
-      default: undefined,
+      type: Object as PropType<RouteRecordRaw>,
+      required: true,
     },
   },
   setup(props) {
-    provide(injectionRoute, props.route as any)
-    provide(injectionCurrentPage, ref(+props.route?.path))
+    provide(injectionRoute, props.route)
+    provide(injectionCurrentPage, ref(+props.route.path))
     provide(injectionRenderContext, ref(props.renderContext as RenderContext))
     provide(injectionActive, toRef(props, 'active'))
     provide(injectionClicksContext, toRef(props, 'clicksContext'))
+
+    const style = computed(() => {
+      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+      return zoom === 1
+        ? undefined
+        : {
+            width: `${100 / zoom}%`,
+            height: `${100 / zoom}%`,
+            transformOrigin: 'top left',
+            transform: `scale(${zoom})`,
+          }
+    })
+
+    return {
+      style,
+    }
   },
   render() {
-    if (this.$props.is)
-      return h(this.$props.is)
-    return this.$slots?.default?.()
+    return h(this.$props.is, { style: this.style })
   },
 })

package/internals/SlidesOverview.vue

@@ -14,7 +14,7 @@ import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
-const emit = defineEmits([])
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function close() {

package/logic/drawings.ts

@@ -4,6 +4,7 @@ import { createDrauu } from 'drauu'
 import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
+import { isInputting } from '../state'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
@@ -40,11 +41,13 @@ export const drawingMode = computed({
   set(v: DrawingMode | 'arrow') {
     _mode.value = v
     if (v === 'arrow') {
-      brush.mode = 'line'
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = 'line'
       brush.arrowEnd = true
     }
     else {
-      brush.mode = v
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = v
       brush.arrowEnd = false
     }
   },
@@ -110,7 +113,7 @@ drauu.on('start', () => isDrawing.value = true)
 drauu.on('end', () => isDrawing.value = false)
 
 window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value)
+  if (!drawingEnabled.value || isInputting.value)
     return
 
   const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey

package/logic/nav.ts

@@ -177,7 +177,7 @@ export async function downloadPDF() {
 export async function openInEditor(url?: string) {
   if (url == null) {
     const slide = currentRoute.value?.meta?.slide
-    if (!slide?.filepath)
+    if (!slide)
       return false
     url = `${slide.filepath}:${slide.start}`
   }

package/logic/note.ts

@@ -2,17 +2,17 @@ import type { MaybeRef } from '@vueuse/core'
 import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
-import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
+import type { SlideInfo } from '@slidev/types'
 
 export interface UseSlideInfo {
-  info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
+  info: Ref<SlideInfo | undefined>
+  update: (data: Partial<SlideInfo>) => Promise<SlideInfo | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
   if (id == null) {
     return {
-      info: ref() as Ref<SlideInfoExtended | undefined>,
+      info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
@@ -41,7 +41,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
         info.value = payload.data
     })
     import.meta.hot?.on('slidev-update-note', (payload) => {
-      if (payload.id === id && info.value.note.trim() !== payload.note.trim())
+      if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.48.0-beta.2",
+  "version": "0.48.0-beta.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -22,15 +22,15 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.1.3",
+    "@shikijs/vitepress-twoslash": "^1.1.6",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/math": "^10.7.2",
+    "@vueuse/core": "^10.8.0",
+    "@vueuse/math": "^10.8.0",
     "@vueuse/motion": "^2.0.0",
     "codemirror": "^5.65.16",
     "defu": "^6.1.4",
-    "drauu": "^0.3.7",
+    "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
@@ -39,15 +39,15 @@
     "katex": "^0.16.9",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.5",
+    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
     "vue-router": "^4.2.5",
-    "@slidev/parser": "0.48.0-beta.2",
-    "@slidev/types": "0.48.0-beta.2"
+    "@slidev/parser": "0.48.0-beta.4",
+    "@slidev/types": "0.48.0-beta.4"
   },
   "devDependencies": {
     "vite": "^5.1.3"

package/routes.ts

@@ -1,9 +1,7 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import type { TransitionGroupProps } from 'vue'
-import type { ClicksContext } from '@slidev/types'
-import Play from './internals/Play.vue'
-import Print from './internals/Print.vue'
+import type { ClicksContext, SlideInfo } from '@slidev/types'
 
 // @ts-expect-error missing types
 import _rawRoutes, { redirects } from '/@slidev/routes'
@@ -17,13 +15,13 @@ export const routes: RouteRecordRaw[] = [
   {
     name: 'play',
     path: '/',
-    component: Play,
+    component: () => import('./internals/Play.vue'),
     children: [
       ...rawRoutes,
       ...redirects,
     ],
   },
-  { name: 'print', path: '/print', component: Print },
+  { name: 'print', path: '/print', component: () => import('./internals/Print.vue') },
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
 ]
@@ -86,19 +84,12 @@ declare module 'vue-router' {
     preload?: boolean
 
     // slide info
-    slide?: {
+    slide?: Omit<SlideInfo, 'source'> & {
+      noteHTML: string
+      filepath: string
       start: number
-      end: number
-      note?: string
-      noteHTML?: string
       id: number
       no: number
-      filepath: string
-      title?: string
-      level?: number
-      raw: string
-      content: string
-      frontmatter: Record<string, any>
     }
 
     // private fields

package/setup/codemirror.ts

@@ -1,4 +1,5 @@
 import type { Ref, WritableComputedRef } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { watch } from 'vue'
 import * as _CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
@@ -47,5 +48,11 @@ export async function useCodeMirror(
     { immediate: true },
   )
 
+  onClickOutside(cm.getWrapperElement(), () => {
+    const el = cm.getInputField()
+    if (document.activeElement === el)
+      el.blur()
+  })
+
   return cm
 }