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

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/constants.ts

@@ -61,6 +61,9 @@ export const HEADMATTER_FIELDS = [
   'highlighter',
   'lineNumbers',
   'monaco',
+  'monacoTypesSource',
+  'monacoTypesAdditionalPackages',
+  'monacoRunAdditionalDeps',
   'remoteAssets',
   'selectable',
   'record',

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.4",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
     "@unhead/vue": "^1.9.5",
-    "@unocss/reset": "^0.59.2",
+    "@unocss/reset": "^0.59.3",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -53,17 +53,17 @@
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "shiki": "^1.3.0",
-    "shiki-magic-move": "^0.3.5",
+    "shiki-magic-move": "^0.3.6",
     "typescript": "^5.4.5",
-    "unocss": "^0.59.2",
-    "vue": "^3.4.21",
+    "unocss": "^0.59.3",
+    "vue": "^3.4.22",
     "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.4",
+    "@slidev/types": "0.49.0-beta.4"
   },
   "devDependencies": {
-    "vite": "^5.2.8"
+    "vite": "^5.2.9"
   }
 }

package/setup/code-runners.ts

@@ -1,8 +1,9 @@
-import { createSingletonPromise, ensurePrefix, slash } from '@antfu/utils'
-import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
+import { createSingletonPromise } from '@antfu/utils'
+import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
 import type { CodeToHastOptions } from 'shiki'
 import type ts from 'typescript'
 import { isDark } from '../logic/dark'
+import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
 
 export default createSingletonPromise(async () => {
@@ -25,18 +26,6 @@ export default createSingletonPromise(async () => {
     ...options,
   })
 
-  const resolveId = async (specifier: string) => {
-    if (!'./'.includes(specifier[0]) && !/^(@[^\/:]+?\/)?[^\/:]+$/.test(specifier))
-      return specifier // this might be a url or something else
-    const res = await fetch(`/@slidev/resolve-id?specifier=${specifier}`)
-    if (!res.ok)
-      return null
-    const id = await res.text()
-    if (!id)
-      return null
-    return `/@fs${ensurePrefix('/', slash(id))}`
-  }
-
   const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
     try {
       const runner = runners[lang]
@@ -47,7 +36,6 @@ export default createSingletonPromise(async () => {
         {
           options,
           highlight,
-          resolveId,
           run: async (code, lang) => {
             return await run(code, lang, options)
           },
@@ -85,16 +73,20 @@ async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
   replace.clear = () => allLogs.length = 0
   const vmConsole = Object.assign({}, console, replace)
   try {
-    const safeJS = `return async (console) => {
-      window.console = console
+    const safeJS = `return async (console, __slidev_import) => {
       ${sanitizeJS(code)}
     }`
     // eslint-disable-next-line no-new-func
-    await (new Function(safeJS)())(vmConsole)
+    await (new Function(safeJS)())(vmConsole, (specifier: string) => {
+      const mod = deps[specifier]
+      if (!mod)
+        throw new Error(`Module not found: ${specifier}.\nAvailable modules: ${Object.keys(deps).join(', ')}. Please refer to https://sli.dev/custom/config-code-runners#additional-runner-dependencies`)
+      return mod
+    })
   }
   catch (error) {
     return {
-      error: `ERROR: ${error}`,
+      error: String(error),
     }
   }
 
@@ -175,7 +167,7 @@ async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
 
 let tsModule: typeof import('typescript') | undefined
 
-export async function runTypeScript(code: string, context: CodeRunnerContext) {
+export async function runTypeScript(code: string) {
   tsModule ??= await import('typescript')
 
   code = tsModule.transpileModule(code, {
@@ -188,11 +180,8 @@ export async function runTypeScript(code: string, context: CodeRunnerContext) {
     },
   }).outputText
 
-  const importRegex = /import\s*\(\s*(['"])(.+?)['"]\s*\)/g
-  const idMap: Record<string, string> = {}
-  for (const [,,specifier] of code.matchAll(importRegex)!)
-    idMap[specifier] = await context.resolveId(specifier) ?? specifier
-  code = code.replace(importRegex, (_full, quote, specifier) => `import(${quote}${idMap[specifier] ?? specifier}${quote})`)
+  const importRegex = /import\s*\((.+)\)/g
+  code = code.replace(importRegex, (_full, specifier) => `__slidev_import(${specifier})`)
 
   return await runJavaScript(code)
 }

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'),
-})