feat(vscode): allow to enable and disable extension manually (#1589)

packages/vscode/package.json

@@ -25,6 +25,16 @@
   ],
   "contributes": {
     "commands": [
+      {
+        "command": "slidev.enable-extension",
+        "category": "Slidev",
+        "title": "Force enable Slidev extension"
+      },
+      {
+        "command": "slidev.disable-extension",
+        "category": "Slidev",
+        "title": "Force disable Slidev extension"
+      },
       {
         "command": "slidev.rescan-projects",
         "category": "Slidev",
@@ -157,12 +167,12 @@
       ],
       "editor/title": [
         {
-          "when": "slidev-enabled && resourceLangId == markdown",
+          "when": "slidev:enabled && slidev:editing-markdown",
           "command": "slidev.prev",
           "group": "navigation"
         },
         {
-          "when": "slidev-enabled && resourceLangId == markdown",
+          "when": "slidev:enabled && slidev:editing-markdown",
           "command": "slidev.next",
           "group": "navigation"
         }
@@ -246,9 +256,14 @@
       ]
     },
     "configuration": {
-      "type": "object",
       "title": "Slidev",
       "properties": {
+        "slidev.force-enabled": {
+          "type": ["boolean", "null"],
+          "scope": "window",
+          "description": "Force enable Slidev extension",
+          "default": null
+        },
         "slidev.port": {
           "type": "number",
           "scope": "window",
@@ -274,8 +289,7 @@
         {
           "id": "slidev",
           "title": "Slidev",
-          "icon": "dist/res/logo-mono.svg",
-          "when": "slidev-enabled"
+          "icon": "dist/res/logo-mono.svg"
         }
       ]
     },
@@ -285,20 +299,23 @@
           "id": "slidev-projects-tree",
           "name": "Projects",
           "visibility": "collapsed",
-          "initialSize": 1
+          "initialSize": 1,
+          "when": "slidev:enabled"
         },
         {
           "id": "slidev-slides-tree",
           "name": "Slides",
           "visibility": "visible",
-          "initialSize": 3
+          "initialSize": 3,
+          "when": "slidev:enabled"
         },
         {
           "type": "webview",
           "id": "slidev-preview",
           "name": "Preview",
           "visibility": "visible",
-          "initialSize": 3
+          "initialSize": 3,
+          "when": "slidev:enabled"
         }
       ]
     },

packages/vscode/src/commands.ts

@@ -5,7 +5,7 @@ import { save as saveSlidevMarkdown } from '@slidev/parser/fs'
 import { useDevServer } from './composables/useDevServer'
 import { useEditingSlideSource } from './composables/useEditingSlideSource'
 import { useFocusedSlideNo } from './composables/useFocusedSlideNo'
-import { configuredPort, previewSync } from './config'
+import { configuredPort, forceEnabled, previewSync } from './configs'
 import type { SlidevProject } from './projects'
 import { activeEntry, activeProject, activeSlidevData, addProject, projects, rescanProjects } from './projects'
 import { findPossibleEntries } from './utils/findPossibleEntries'
@@ -19,6 +19,9 @@ export function useCommands() {
     disposables.push(commands.registerCommand(command, callback))
   }
 
+  registerCommand('slidev.enable-extension', () => forceEnabled.value = true)
+  registerCommand('slidev.disable-extension', () => forceEnabled.value = false)
+
   registerCommand('slidev.rescan-projects', rescanProjects)
 
   registerCommand('slidev.choose-entry', async () => {

packages/vscode/src/composables/useActiveTextEditor.ts

@@ -2,6 +2,8 @@ import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
 import { createSingletonComposable } from '../utils/singletonComposable'
 import { useDisposable } from './useDisposable'
+import { useProjectFromDoc } from './useProjectFromDoc'
+import { useVscodeContext } from './useVscodeContext'
 
 export const useActiveTextEditor = createSingletonComposable(() => {
   const activeTextEditor = shallowRef(window.activeTextEditor)
@@ -10,5 +12,8 @@ export const useActiveTextEditor = createSingletonComposable(() => {
     activeTextEditor.value = editor
   }))
 
+  const projectInfo = useProjectFromDoc(() => activeTextEditor.value?.document)
+  useVscodeContext('slidev:editing-markdown', () => !!projectInfo.value)
+
   return activeTextEditor
 })

packages/vscode/src/composables/usePreviewState.ts

@@ -2,7 +2,7 @@ import { computed, onScopeDispose, watchEffect } from '@vue/runtime-core'
 import { window } from 'vscode'
 import { activeEntry, activeProject, projects } from '../projects'
 import { createSingletonComposable } from '../utils/singletonComposable'
-import { configuredPort } from '../config'
+import { configuredPort } from '../configs'
 import { generateReadyHtml } from '../html/ready'
 import { generateErrorHtml } from '../html/error'
 import { useDevServer } from './useDevServer'

packages/vscode/src/config.ts → packages/vscode/src/configs.ts

@@ -1,16 +1,20 @@
 import type { Ref, ShallowRef } from '@vue/runtime-core'
-import { ref, shallowRef } from '@vue/runtime-core'
+import { ref, shallowRef, watch } from '@vue/runtime-core'
 import type { ColorTheme, ConfigurationChangeEvent } from 'vscode'
 import { ColorThemeKind, window, workspace } from 'vscode'
 import { useDisposable } from './composables/useDisposable'
 
 const config = workspace.getConfiguration('slidev')
 const configKeys: Record<string, ShallowRef<unknown>> = {}
 
-function useConfiguration<T>(key: string, defaultValue: T): Ref<T> {
-  return configKeys[key] = shallowRef<T>(config.get<T>(key) ?? defaultValue)
+function useConfiguration<T>(key: string, defaultValue: T, writeBack = false): Ref<T> {
+  const r = configKeys[key] = shallowRef<T>(config.get<T>(key) ?? defaultValue)
+  if (writeBack)
+    watch(r, v => config.update(key, v))
+  return r
 }
 
+export const forceEnabled = useConfiguration<boolean | null>('force-enabled', null, true)
 export const configuredPort = useConfiguration('port', 3030)
 export const displayAnnotations = useConfiguration('annotations', true)
 export const previewSync = useConfiguration('preview-sync', true)

packages/vscode/src/index.ts

@@ -1,23 +1,21 @@
 import { effectScope, shallowRef } from '@vue/runtime-core'
 import type { ExtensionContext } from 'vscode'
 import { useCommands } from './commands'
-import { useGlobalConfigurations } from './config'
+import { useGlobalConfigurations } from './configs'
 import { activeEntry, useProjects } from './projects'
 import { useAnnotations } from './views/annotations'
 import { useFoldings } from './views/foldings'
 import { useLogger } from './views/logger'
 import { usePreviewWebview } from './views/previewWebview'
 import { useSlidesTree } from './views/slidesTree'
 import { useProjectsTree } from './views/projectsTree'
-import { useVscodeContext } from './composables/useVscodeContext'
 
 const scope = effectScope()
 
 export const extCtx = shallowRef<ExtensionContext>(undefined!)
 
 export async function activate(ext: ExtensionContext) {
   extCtx.value = ext
-  useVscodeContext('slidev-enabled', () => true)
 
   scope.run(() => {
     // states

packages/vscode/src/projects.ts

@@ -2,12 +2,13 @@ import { existsSync } from 'node:fs'
 import { basename, dirname } from 'node:path'
 import type { LoadedSlidevData } from '@slidev/parser/fs'
 import { load } from '@slidev/parser/fs'
-import { computed, markRaw, onScopeDispose, reactive, ref } from '@vue/runtime-core'
+import { computed, markRaw, onScopeDispose, reactive, ref, watchEffect } from '@vue/runtime-core'
 import { commands, window, workspace } from 'vscode'
 import { slash } from '@antfu/utils'
 import { useLogger } from './views/logger'
 import { findShallowestPath } from './utils/findShallowestPath'
 import { useVscodeContext } from './composables/useVscodeContext'
+import { forceEnabled } from './configs'
 
 export interface SlidevProject {
   readonly entry: string
@@ -21,7 +22,6 @@ export const activeEntry = ref<string | null>(null)
 export const activeProject = computed(() => activeEntry.value ? projects.get(activeEntry.value) : undefined)
 export const activeSlidevData = computed(() => activeProject.value?.data)
 export const activeUserRoot = computed(() => activeProject.value?.userRoot)
-export const multiProject = useVscodeContext('slidev-multi-project', () => projects.size > 1)
 
 async function loadExistingProjects() {
   const files = await workspace.findFiles('**/*.md', '**/node_modules/**')
@@ -53,6 +53,18 @@ export function useProjects() {
   }
   init()
 
+  // In case all the projects are removed manually, and the user may not want to disable the extension.
+  const everHadProjects = ref(false)
+  watchEffect(() => {
+    if (projects.size > 0)
+      everHadProjects.value = true
+  })
+
+  useVscodeContext('slidev:enabled', () => {
+    const enabled = forceEnabled.value == null ? everHadProjects.value : forceEnabled.value
+    logger.info(`Slidev ${enabled ? 'enabled' : 'disabled'}.`)
+    return enabled
+  })
   useVscodeContext('slidev:hasActiveProject', () => !!activeEntry.value)
 
   let pendingUpdate: { cancelled: boolean } | null = null

packages/vscode/src/views/annotations.ts

@@ -5,7 +5,7 @@ import type { DecorationOptions } from 'vscode'
 import { Position, Range, window } from 'vscode'
 import { useActiveTextEditor } from '../composables/useActiveTextEditor'
 import { useProjectFromDoc } from '../composables/useProjectFromDoc'
-import { displayAnnotations } from '../config'
+import { displayAnnotations } from '../configs'
 import { activeProject } from '../projects'
 import { createSingletonComposable } from '../utils/singletonComposable'
 import { toRelativePath } from '../utils/toRelativePath'

packages/vscode/src/views/previewWebview.ts

@@ -5,7 +5,7 @@ import { useDisposable } from '../composables/useDisposable'
 import { useFocusedSlideNo } from '../composables/useFocusedSlideNo'
 import { usePreviewState } from '../composables/usePreviewState'
 import { useVscodeContext } from '../composables/useVscodeContext'
-import { isDarkTheme, previewSync } from '../config'
+import { isDarkTheme, previewSync } from '../configs'
 import { extCtx } from '../index'
 import { activeSlidevData } from '../projects'
 import { createSingletonComposable } from '../utils/singletonComposable'

packages/vscode/src/views/slidesTree.ts

@@ -4,7 +4,7 @@ import { computed, markRaw, onScopeDispose, watch, watchEffect } from '@vue/runt
 import type { TreeItem } from 'vscode'
 import { DataTransferItem, EventEmitter, ThemeIcon, TreeItemCollapsibleState, commands, window } from 'vscode'
 import { useViewVisibility } from '../composables/useViewVisibility'
-import { previewSync } from '../config'
+import { previewSync } from '../configs'
 import { activeSlidevData } from '../projects'
 import { getSlideNo } from '../utils/getSlideNo'
 import { getSlidesTitle } from '../utils/getSlidesTitle'