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

package/pages/presenter.vue

@@ -3,12 +3,11 @@ import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { configs } from '../env'
+import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
+import { slidesTitle } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { onContextMenu } from '../logic/contextMenu'
-import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { createFixedClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -44,10 +43,7 @@ const {
 } = useNav()
 const { isDrawing } = useDrawings()
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-useHead({
-  title: `Presenter - ${slideTitle}`,
-})
+useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
@@ -113,12 +109,11 @@ onMounted(() => {
       <div ref="main" class="relative grid-section main flex flex-col">
         <SlideContainer
           key="main"
-          class="h-full w-full p-2 lg:p-4 flex-auto"
+          class="p-2 lg:p-4 flex-auto"
+          is-main
           @contextmenu="onContextMenu"
         >
-          <template #default>
-            <SlidesShow render-context="presenter" />
-          </template>
+          <SlidesShow render-context="presenter" />
         </SlideContainer>
         <ClicksSlider
           :key="currentSlideRoute?.no"
@@ -130,16 +125,10 @@ onMounted(() => {
         </div>
       </div>
       <div class="relative grid-section next flex flex-col p-2 lg:p-4">
-        <SlideContainer
-          v-if="nextFrame && nextFrameClicksCtx"
-          key="next"
-          class="h-full w-full"
-        >
+        <SlideContainer v-if="nextFrame && nextFrameClicksCtx" key="next">
           <SlideWrapper
-            :is="nextFrame[0].component!"
             :key="nextFrame[0].no"
             :clicks-context="nextFrameClicksCtx"
-            :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
             render-context="previewNext"
           />
@@ -148,8 +137,7 @@ onMounted(() => {
           Next
         </div>
       </div>
-      <!-- Notes -->
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
+      <div v-if="SideEditor && showEditor" class="grid-section note of-auto">
         <SideEditor />
       </div>
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
@@ -206,12 +194,12 @@ onMounted(() => {
     <div class="progress-bar">
       <div
         class="progress h-3px bg-primary transition-all"
-        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100}%` }"
+        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100 + 1}%` }"
       />
     </div>
   </div>
   <Goto />
-  <QuickOverview v-model="showOverview" />
+  <QuickOverview />
   <ContextMenu />
 </template>
 
@@ -227,10 +215,6 @@ onMounted(() => {
   opacity: 1;
 }
 
-.section-title {
-  --uno: px-4 py-2 text-xl;
-}
-
 .grid-container {
   --uno: bg-gray/20;
   height: 100%;
@@ -303,4 +287,4 @@ onMounted(() => {
 .grid-section.bottom {
   grid-area: bottom;
 }
-</style>../composables/drawings
+</style>

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

@@ -1,7 +1,7 @@
 import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
 import { useHead } from '@unhead/vue'
 import { useRouter } from 'vue-router'
-import { configs } from '../env'
+import { configs, slidesTitle } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
 import { TRUST_ORIGINS, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
@@ -51,8 +51,6 @@ export default function setupRoot() {
   for (const setup of setups)
     setup()
 
-  const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-
   const {
     clicksContext,
     currentSlideNo,
@@ -62,12 +60,12 @@ export default function setupRoot() {
   } = useNav()
 
   useHead({
-    title,
+    title: slidesTitle,
     htmlAttrs: configs.htmlAttrs,
   })
 
-  initSharedState(`${title} - shared`)
-  initDrawingState(`${title} - drawings`)
+  initSharedState(`${slidesTitle} - shared`)
+  initDrawingState(`${slidesTitle} - drawings`)
 
   const id = `${location.origin}_${makeId()}`
 

package/styles/index.css

@@ -49,6 +49,10 @@ html {
   user-select: none !important;
 }
 
+.slidev-vclick-display-none {
+  display: none !important;
+}
+
 .slidev-vclick-fade {
   opacity: 0.5;
 }
@@ -116,3 +120,7 @@ html {
 .rough-annotation {
   transform: scale(calc(1 / var(--slidev-slide-scale)));
 }
+
+#twoslash-container {
+  position: fixed;
+}

package/uno.config.ts

@@ -9,6 +9,7 @@ import {
   transformerVariantGroup,
 } from 'unocss'
 import { variantMatcher } from '@unocss/preset-mini/utils'
+import extractorMdc from '@unocss/extractor-mdc'
 
 export default defineConfig({
   safelist: [
@@ -48,4 +49,7 @@ export default defineConfig({
     transformerDirectives({ enforce: 'pre' }),
     transformerVariantGroup(),
   ],
+  extractors: [
+    extractorMdc(),
+  ],
 })