@slidev/client 0.49.0-beta.2 → 0.49.0-beta.3

package/builtin/Monaco.vue

@@ -17,7 +17,10 @@ import lz from 'lz-string'
 import type * as monaco from 'monaco-editor'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import type { RawAtValue } from '@slidev/types'
+import { whenever } from '@vueuse/core'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
+import { useNav } from '../composables/useNav'
 import CodeRunner from '../internals/CodeRunner.vue'
 
 const props = withDefaults(defineProps<{
@@ -76,6 +79,19 @@ const height = computed(() => {
   return props.height
 })
 
+const loadTypes = ref<() => void>()
+const { $page: thisSlideNo, $renderContext: renderContext } = useSlideContext()
+const { currentSlideNo } = useNav()
+const stopWatchTypesLoading = whenever(
+  () => Math.abs(thisSlideNo.value - currentSlideNo.value) <= 1 && loadTypes.value,
+  (loadTypes) => {
+    if (['slide', 'presenter'].includes(renderContext.value))
+      loadTypes()
+    else
+      setTimeout(loadTypes, 5000)
+  },
+)
+
 onMounted(async () => {
   // Lazy load monaco, so it will be bundled in async chunk
   const { default: setup } = await import('../setup/monaco')
@@ -137,11 +153,15 @@ onMounted(async () => {
     })
     editableEditor = editor
   }
-  if (props.ata) {
-    ata(editableEditor.getValue())
-    editableEditor.onDidChangeModelContent(debounce(1000, () => {
+  loadTypes.value = () => {
+    stopWatchTypesLoading()
+    import('#slidev/monaco-types')
+    if (props.ata) {
       ata(editableEditor.getValue())
-    }))
+      editableEditor.onDidChangeModelContent(debounce(1000, () => {
+        ata(editableEditor.getValue())
+      }))
+    }
   }
   const originalLayoutContentWidget = editableEditor.layoutContentWidget.bind(editableEditor)
   editableEditor.layoutContentWidget = (widget: any) => {

package/internals/QuickOverview.vue

@@ -102,6 +102,11 @@ watchEffect(() => {
   // Watch rowCount, make sure up and down shortcut work correctly.
   overviewRowCount.value = rowCount.value
 })
+
+const activeSlidesLoaded = ref(false)
+setTimeout(() => {
+  activeSlidesLoaded.value = true
+}, 3000)
 </script>
 
 <template>
@@ -112,6 +117,7 @@ watchEffect(() => {
     leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
   >
     <div
+      v-if="value || activeSlidesLoaded"
       v-show="value"
       class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
       @click="close()"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.0-beta.2",
+  "version": "0.49.0-beta.3",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -60,8 +60,8 @@
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
     "yaml": "^2.4.1",
-    "@slidev/parser": "0.49.0-beta.2",
-    "@slidev/types": "0.49.0-beta.2"
+    "@slidev/parser": "0.49.0-beta.3",
+    "@slidev/types": "0.49.0-beta.3"
   },
   "devDependencies": {
     "vite": "^5.2.8"

package/setup/main.ts

@@ -9,7 +9,7 @@ import { createVClickDirectives } from '../modules/v-click'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVDragDirective } from '../modules/v-drag'
 import { createVMotionDirectives } from '../modules/v-motion'
-import { routes } from '../routes'
+import setupRoutes from '../setup/routes'
 import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
@@ -28,7 +28,7 @@ export default async function setupMain(app: App) {
     history: __SLIDEV_HASH_ROUTE__
       ? createWebHashHistory(import.meta.env.BASE_URL)
       : createWebHistory(import.meta.env.BASE_URL),
-    routes,
+    routes: setupRoutes(),
   })
 
   app.use(router)

package/setup/monaco.ts

@@ -66,9 +66,6 @@ const setup = createSingletonPromise(async () => {
     module: monaco.languages.typescript.ModuleKind.ESNext,
   })
 
-  // Load types from server
-  import('#slidev/monaco-types')
-
   const ata = configs.monacoTypesSource === 'cdn'
     ? setupTypeAcquisition({
       projectName: 'TypeScript Playground',

package/setup/routes.ts

@@ -0,0 +1,80 @@
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
+import configs from '#slidev/configs'
+import setups from '#slidev/setups/routes'
+
+export default function setupRoutes() {
+  const routes: RouteRecordRaw[] = []
+
+  if (__SLIDEV_FEATURE_PRESENTER__) {
+    function passwordGuard(to: RouteLocationNormalized) {
+      if (!configs.remote || configs.remote === to.query.password)
+        return true
+      if (configs.remote && to.query.password === undefined) {
+        // eslint-disable-next-line no-alert
+        const password = prompt('Enter password')
+        if (configs.remote === password)
+          return true
+      }
+      if (to.params.no)
+        return { path: `/${to.params.no}` }
+      return { path: '' }
+    }
+
+    routes.push(
+      {
+        name: 'entry',
+        path: '/entry',
+        component: () => import('../pages/entry.vue'),
+      },
+      {
+        name: 'overview',
+        path: '/overview',
+        component: () => import('../pages/overview.vue'),
+      },
+      {
+        name: 'notes',
+        path: '/notes',
+        component: () => import('../pages/notes.vue'),
+        beforeEnter: passwordGuard,
+      },
+      {
+        name: 'presenter',
+        path: '/presenter/:no',
+        component: () => import('../pages/presenter.vue'),
+        beforeEnter: passwordGuard,
+      },
+      {
+        path: '/presenter',
+        redirect: { path: '/presenter/1' },
+      },
+    )
+  }
+
+  if (__SLIDEV_HAS_SERVER__) {
+    routes.push(
+      {
+        name: 'print',
+        path: '/print',
+        component: () => import('../pages/print.vue'),
+      },
+      {
+        path: '/presenter/print',
+        component: () => import('../pages/presenter/print.vue'),
+      },
+    )
+  }
+
+  routes.push(
+    {
+      name: 'play',
+      path: '/:no',
+      component: () => import('../pages/play.vue'),
+    },
+    {
+      path: '',
+      redirect: { path: '/1' },
+    },
+  )
+
+  return setups.reduce((routes, setup) => setup(routes), routes)
+}

package/routes.ts

@@ -1,68 +0,0 @@
-import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
-import configs from '#slidev/configs'
-
-export const routes: RouteRecordRaw[] = [
-  {
-    name: 'print',
-    path: '/print',
-    component: () => import('./pages/print.vue'),
-  },
-
-  // Redirects
-  { path: '', redirect: { path: '/1' } },
-]
-
-if (__SLIDEV_FEATURE_PRESENTER__) {
-  function passwordGuard(to: RouteLocationNormalized) {
-    if (!configs.remote || configs.remote === to.query.password)
-      return true
-    if (configs.remote && to.query.password === undefined) {
-      // eslint-disable-next-line no-alert
-      const password = prompt('Enter password')
-      if (configs.remote === password)
-        return true
-    }
-    if (to.params.no)
-      return { path: `/${to.params.no}` }
-    return { path: '' }
-  }
-
-  routes.push({
-    path: '/presenter/print',
-    component: () => import('./pages/presenter/print.vue'),
-  })
-  if (__SLIDEV_HAS_SERVER__) {
-    routes.push({
-      name: 'entry',
-      path: '/entry',
-      component: () => import('./pages/entry.vue'),
-    })
-    routes.push({
-      name: 'overview',
-      path: '/overview',
-      component: () => import('./pages/overview.vue'),
-    })
-    routes.push({
-      name: 'notes',
-      path: '/notes',
-      component: () => import('./pages/notes.vue'),
-      beforeEnter: passwordGuard,
-    })
-  }
-  routes.push({
-    name: 'presenter',
-    path: '/presenter/:no',
-    component: () => import('./pages/presenter.vue'),
-    beforeEnter: passwordGuard,
-  })
-  routes.push({
-    path: '/presenter',
-    redirect: { path: '/presenter/1' },
-  })
-}
-
-routes.push({
-  name: 'play',
-  path: '/:no',
-  component: () => import('./pages/play.vue'),
-})