fix: uniform client features enablement

packages/client/composables/useDragElements.ts

@@ -9,6 +9,7 @@ import { activeDragElement } from '../state'
 import { directiveInject } from '../utils'
 import { useSlideBounds } from './useSlideBounds'
 import { useDynamicSlideInfo } from './useSlideInfo'
+import { useFeatures } from './useFeatures'
 
 export type DragElementDataSource = 'frontmatter' | 'prop' | 'directive'
 /**
@@ -21,7 +22,8 @@ export type DragElementsUpdater = (id: string, posStr: string, type: DragElement
 const map: Record<number, DragElementsUpdater> = {}
 
 export function useDragElementsUpdater(no: number) {
-  if (!(__DEV__ && __SLIDEV_FEATURE_EDITOR__))
+  const features = useFeatures()
+  if (!features.editor)
     return () => {}
 
   if (map[no])

packages/client/composables/useFeatures.ts

@@ -0,0 +1,35 @@
+import { createSharedComposable } from '@vueuse/core'
+import { computed, reactive } from 'vue'
+import { configs } from '../env'
+import { useRouteQuery } from '../logic/route'
+import { useNav } from './useNav'
+
+function satisfiesMode(mode: boolean | string) {
+  return mode === true || mode === __MODE__
+}
+
+export const staticFeatures = {
+  record: satisfiesMode(configs.record),
+  presenter: satisfiesMode(configs.presenter),
+  contextMenu: configs.contextMenu === true || configs.contextMenu === undefined || configs.contextMenu === __MODE__,
+}
+
+export const useFeatures = createSharedComposable(() => {
+  const { isPresenter, isEmbedded } = useNav()
+
+  const password = useRouteQuery<string>('password')
+  const trusted = computed(() => !configs.remote || password.value === configs.remote)
+
+  const drawings = computed(() => satisfiesMode(configs.drawings.enabled) && !isEmbedded.value)
+  const allowToDraw = computed(() => drawings.value && trusted.value && (!configs.drawings.presenterOnly || isPresenter.value) && !isEmbedded.value)
+  const editor = computed(() => configs.editor && trusted.value && __MODE__ === 'dev')
+  const enterPresenter = computed(() => staticFeatures.presenter && !isPresenter.value && trusted.value)
+
+  return reactive({
+    ...staticFeatures,
+    drawings,
+    allowToDraw,
+    editor,
+    enterPresenter,
+  })
+})

packages/client/composables/useNav.ts

@@ -10,7 +10,6 @@ import { getCurrentTransition } from '../logic/transition'
 import { getSlide, getSlidePath } from '../logic/slides'
 import { CLICKS_MAX } from '../constants'
 import { skipTransition } from '../logic/hmr'
-import { configs } from '../env'
 import { useRouteQuery } from '../logic/route'
 import { useTocTree } from './useTocTree'
 import { createClicksContextBase } from './useClicks'
@@ -76,7 +75,6 @@ export interface SlidevContextNavState {
   isPlaying: ComputedRef<boolean>
   isPresenter: ComputedRef<boolean>
   isNotesViewer: ComputedRef<boolean>
-  isPresenterAvailable: ComputedRef<boolean>
   hasPrimarySlide: ComputedRef<boolean>
   currentSlideNo: ComputedRef<number>
   currentSlideRoute: ComputedRef<SlideRoute>
@@ -281,7 +279,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
   const isPlaying = computed(() => currentRoute.value.name === 'play')
   const isPresenter = computed(() => currentRoute.value.name === 'presenter')
   const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
-  const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || query.value.get('password') === configs.remote))
   const hasPrimarySlide = logicOr(isPlaying, isPresenter)
 
   const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
@@ -351,7 +348,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     isPlaying,
     isPresenter,
     isNotesViewer,
-    isPresenterAvailable,
     hasPrimarySlide,
     currentSlideNo,
     currentSlideRoute,

packages/client/env.ts

@@ -4,8 +4,6 @@ import configs from '#slidev/configs'
 
 export { configs }
 
-export const mode = __DEV__ ? 'dev' : 'build'
-
 export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
 export const slideWidth = ref(configs.canvasWidth ?? 980)
 

packages/client/internals/Controls.vue

@@ -3,20 +3,22 @@ import { shallowRef } from 'vue'
 import { showInfoDialog, showRecordingDialog } from '../state'
 import { configs } from '../env'
 import { useNav } from '../composables/useNav'
+import { useFeatures } from '../composables/useFeatures'
 import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 import ContextMenu from './ContextMenu.vue'
 
 const { isEmbedded } = useNav()
-const drawingEnabled = __SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded.value
+const features = useFeatures()
+const drawingEnabled = features.drawings && !configs.drawings.presenterOnly && !isEmbedded.value
 const DrawingControls = shallowRef<any>()
 if (drawingEnabled)
   import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
 
 const WebCamera = shallowRef<any>()
 const RecordingDialog = shallowRef<any>()
-if (__SLIDEV_FEATURE_RECORD__) {
+if (features.record) {
   import('./WebCamera.vue').then(v => WebCamera.value = v.default)
   import('./RecordingDialog.vue').then(v => RecordingDialog.value = v.default)
 }

packages/client/internals/NavControls.vue

@@ -6,6 +6,7 @@ import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, sh
 import { configs } from '../env'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useFeatures } from '../composables/useFeatures'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
@@ -25,7 +26,6 @@ const {
   hasPrev,
   isEmbedded,
   isPresenter,
-  isPresenterAvailable,
   next,
   prev,
   total,
@@ -36,6 +36,7 @@ const {
   brush,
   drawingEnabled,
 } = useDrawings()
+const features = useFeatures()
 
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
@@ -51,7 +52,7 @@ const barStyle = computed(() => props.persist
   : 'rounded-md bg-main shadow dark:border dark:border-main')
 
 const RecordingControls = shallowRef<any>()
-if (__SLIDEV_FEATURE_RECORD__)
+if (features.record)
   import('./RecordingControls.vue').then(v => RecordingControls.value = v.default)
 </script>
 
@@ -102,7 +103,7 @@ if (__SLIDEV_FEATURE_RECORD__)
         </IconButton>
       </template>
 
-      <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
+      <template v-if="features.allowToDraw">
         <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
           <carbon:pen />
           <div
@@ -118,12 +119,12 @@ if (__SLIDEV_FEATURE_RECORD__)
         <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
           <carbon:presentation-file />
         </IconButton>
-        <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
+        <IconButton v-if="features.enterPresenter" title="Presenter Mode" @click="enterPresenter">
           <carbon:user-speaker />
         </IconButton>
 
         <IconButton
-          v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
+          v-if="features.editor"
           :title="showEditor ? 'Hide editor' : 'Show editor'"
           class="lt-md:hidden"
           @click="showEditor = !showEditor"

packages/client/internals/PrintSlideClick.vue

@@ -5,6 +5,7 @@ import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../composables/useNav'
+import { useFeatures } from '../composables/useFeatures'
 import SlideWrapper from './SlideWrapper.vue'
 
 import GlobalTop from '#slidev/global-components/top'
@@ -21,8 +22,10 @@ const style = computed(() => ({
   width: `${slideWidth.value}px`,
 }))
 
+const features = useFeatures()
+
 const DrawingPreview = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+if (features.drawings)
   import('./DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
 
 const id = computed(() =>
@@ -46,15 +49,7 @@ provideLocal(injectionSlidevContext, reactive({
       :class="getSlideClass(route)"
       :route="route"
     />
-    <template
-      v-if="
-        (__SLIDEV_FEATURE_DRAWINGS__
-          || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
-          && DrawingPreview
-      "
-    >
-      <DrawingPreview :page="route.no" />
-    </template>
+    <DrawingPreview v-if="DrawingPreview" :page="route.no" />
 
     <GlobalTop />
   </div>

packages/client/internals/QuickOverview.vue

@@ -6,12 +6,14 @@ import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
+import { useFeatures } from '../composables/useFeatures'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
 const { currentSlideNo, go: goSlide, slides } = useNav()
+const features = useFeatures()
 
 function close() {
   showOverview.value = false
@@ -165,7 +167,7 @@ setTimeout(() => {
       <carbon:close />
     </IconButton>
     <IconButton
-      v-if="__SLIDEV_FEATURE_PRESENTER__"
+      v-if="features.presenter"
       as="a"
       title="Slides Overview"
       target="_blank"

packages/client/internals/SlidesShow.vue

@@ -7,6 +7,7 @@ import { skipTransition } from '../logic/hmr'
 import { createFixedClicks } from '../composables/useClicks'
 import { activeDragElement } from '../state'
 import { CLICKS_MAX } from '../constants'
+import { useFeatures } from '../composables/useFeatures'
 import SlideWrapper from './SlideWrapper.vue'
 import DragControl from './DragControl.vue'
 
@@ -38,8 +39,10 @@ watch(currentSlideRoute, () => {
 
 const hasViewTransition = useViewTransition()
 
+const features = useFeatures()
+
 const DrawingLayer = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+if (features.drawings)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
 
 const loadedRoutes = computed(() => slides.value.filter(r => r.meta?.__preloaded || r === currentSlideRoute.value))
@@ -86,9 +89,7 @@ function onAfterLeave() {
   <!-- Global Top -->
   <GlobalTop />
 
-  <template v-if="(__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__) && DrawingLayer">
-    <DrawingLayer />
-  </template>
+  <DrawingLayer v-if="DrawingLayer" />
 </template>
 
 <style scoped>

packages/client/logic/contextMenu.ts

@@ -2,8 +2,8 @@ import type { ContextMenuItem } from '@slidev/types'
 import type { ComputedRef } from 'vue'
 import { shallowRef } from 'vue'
 import setupContextMenu from '../setup/context-menu'
-import { configs, mode } from '../env'
 import { useNav } from '../composables/useNav'
+import { useFeatures } from '../composables/useFeatures'
 
 export const currentContextMenu = shallowRef<null | {
   x: number
@@ -24,11 +24,13 @@ export function closeContextMenu() {
 }
 
 export function onContextMenu(ev: MouseEvent) {
-  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
-    return
   if (ev.shiftKey || ev.defaultPrevented)
     return
 
+  const features = useFeatures()
+  if (!features.contextMenu)
+    return
+
   const { isEmbedded } = useNav()
   if (isEmbedded.value)
     return

packages/client/pages/play.vue

@@ -11,10 +11,12 @@ import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useFeatures } from '../composables/useFeatures'
 import PresenterMouse from '../internals/PresenterMouse.vue'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
+const features = useFeatures()
 
 const root = ref<HTMLDivElement>()
 function onClick(e: MouseEvent) {
@@ -36,7 +38,7 @@ registerShortcuts()
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()
-if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
+if (features.editor)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 </script>
 

packages/client/pages/presenter.vue

@@ -18,12 +18,12 @@ import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
 import Goto from '../internals/Goto.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
-import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useFeatures } from '../composables/useFeatures'
 
 const main = ref<HTMLDivElement>()
 
@@ -42,6 +42,7 @@ const {
   total,
 } = useNav()
 const { isDrawing } = useDrawings()
+const features = useFeatures()
 
 useHead({ title: `Presenter - ${slidesTitle}` })
 
@@ -73,9 +74,13 @@ watch(
 )
 
 const SideEditor = shallowRef<any>()
-if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
+if (features.editor)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
+const DrawingControls = shallowRef<any>()
+if (features.allowToDraw)
+  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
+
 // sync presenter cursor
 onMounted(() => {
   const slidesContainer = main.value!.querySelector('#slide-content')!
@@ -189,7 +194,7 @@ onMounted(() => {
           {{ timer }}
         </div>
       </div>
-      <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
+      <DrawingControls v-if="DrawingControls" />
     </div>
     <div class="progress-bar">
       <div