feat: update view options

Author: kermanx

docs/snippets/treeView.ts

@@ -11,6 +11,7 @@ export const useDemoTreeView = createSingletonComposable(() => {
     'reactive-tree-view',
     rootNodes,
     {
+      title: () => `Tree with ${rootNodes.value.length} roots`,
       getTreeItem(node) {
         return {
           label: `Item ${node.data}`,

docs/snippets/webviewView.ts

@@ -21,12 +21,12 @@ export const useDemoWebviewView = createSingletonComposable(() => {
 
   const { postMessage } = useWebviewView(
     'reactive-webview-view',
-    /* html content, can be computed */ html,
-    /* webviewOptions, can be computed */ {
-      enableScripts: true,
-      enableCommandUris: true,
-    },
-    /* registerOptions, static */ {
+    html,
+    {
+      webviewOptions: {
+        enableScripts: true,
+        enableCommandUris: true,
+      },
       onDidReceiveMessage(ev) {
         if (ev.type === 'updateMessage')
           message.value = ev.message

packages/core/src/composables/useTreeView.ts

@@ -1,9 +1,11 @@
 import type { MaybeRefOrGetter } from '@reactive-vscode/reactivity'
 import { toValue, watch } from '@reactive-vscode/reactivity'
-import type { TreeDataProvider, TreeView, TreeViewOptions } from 'vscode'
+import type { TreeDataProvider, TreeView, TreeViewOptions, ViewBadge } from 'vscode'
 import { EventEmitter, window } from 'vscode'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
+import { useViewBadge } from './useViewBadge'
+import { useViewTitle } from './useViewTitle'
 
 export interface TreeViewNode {
   readonly children?: this[]
@@ -13,6 +15,10 @@ export type UseTreeViewOptions<T> =
   | (
     & Omit<TreeViewOptions<T>, 'treeDataProvider'>
     & Pick<TreeDataProvider<T>, 'getTreeItem' | 'resolveTreeItem'>
+    & {
+      title?: MaybeRefOrGetter<string | undefined>
+      badge?: MaybeRefOrGetter<ViewBadge | undefined>
+    }
   )
   | TreeDataProvider<T>['getTreeItem']
 
@@ -34,7 +40,7 @@ export const useTreeView = createKeyedComposable(
 
     const childrenToParentMap = new WeakMap<T, T>()
 
-    return useDisposable(window.createTreeView(viewId, {
+    const view = useDisposable(window.createTreeView(viewId, {
       ...normalizedOptions,
       treeDataProvider: {
         ...normalizedOptions,
@@ -54,6 +60,14 @@ export const useTreeView = createKeyedComposable(
         },
       },
     }))
+
+    if (normalizedOptions?.title)
+      useViewTitle(view, normalizedOptions.title)
+
+    if (normalizedOptions?.badge)
+      useViewBadge(view, normalizedOptions.badge)
+
+    return view
   },
   viewId => viewId,
 )

packages/core/src/composables/useViewBadge.ts

@@ -12,11 +12,11 @@ type ViewWithBadge = Pick<TreeView<unknown> | WebviewView, 'badge'>
  */
 export function useViewBadge(
   view: MaybeRefOrGetter<Nullable<ViewWithBadge>>,
-  title: MaybeRefOrGetter<ViewBadge | undefined>,
+  badge: MaybeRefOrGetter<ViewBadge | undefined>,
 ) {
   watchEffect(() => {
     const viewValue = toValue(view)
     if (viewValue)
-      viewValue.badge = toValue(title)
+      viewValue.badge = toValue(badge)
   })
 }

packages/core/src/composables/useWebviewView.ts

@@ -1,12 +1,17 @@
 import type { MaybeRefOrGetter } from '@reactive-vscode/reactivity'
 import { shallowRef, toValue, watchEffect } from '@reactive-vscode/reactivity'
-import type { WebviewOptions, WebviewView } from 'vscode'
+import type { ViewBadge, WebviewOptions, WebviewView } from 'vscode'
 import { window } from 'vscode'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
+import { useViewBadge } from './useViewBadge'
+import { useViewTitle } from './useViewTitle'
 
 type WebviewRegisterOptions = Parameters<typeof window.registerWebviewViewProvider>[2] & {
   onDidReceiveMessage?: (message: any) => void
+  webviewOptions?: MaybeRefOrGetter<WebviewOptions>
+  title?: MaybeRefOrGetter<string | undefined>
+  badge?: MaybeRefOrGetter<ViewBadge | undefined>
 }
 
 /**
@@ -18,32 +23,38 @@ export const useWebviewView = createKeyedComposable(
   (
     viewId: string,
     html: MaybeRefOrGetter<string>,
-    webviewOptions?: MaybeRefOrGetter<WebviewOptions>,
-    registerOptions?: WebviewRegisterOptions,
+    options?: WebviewRegisterOptions,
   ) => {
     const view = shallowRef<WebviewView>()
     const context = shallowRef<unknown>()
     useDisposable(window.registerWebviewViewProvider(viewId, {
       resolveWebviewView(viewArg, contextArg) {
         view.value = viewArg
         context.value = contextArg
-        if (registerOptions?.onDidReceiveMessage)
-          viewArg.webview.onDidReceiveMessage(registerOptions.onDidReceiveMessage)
+        if (options?.onDidReceiveMessage)
+          viewArg.webview.onDidReceiveMessage(options.onDidReceiveMessage)
       },
-    }, registerOptions))
+    }, options))
 
     watchEffect(() => {
       if (view.value)
         view.value.webview.html = toValue(html)
     })
 
-    if (webviewOptions) {
+    if (options?.webviewOptions) {
+      const webviewOptions = options.webviewOptions
       watchEffect(() => {
         if (view.value)
           view.value.webview.options = toValue(webviewOptions)
       })
     }
 
+    if (options?.title)
+      useViewTitle(view, options.title)
+
+    if (options?.badge)
+      useViewBadge(view, options.badge)
+
     function postMessage(message: any) {
       return view.value?.webview.postMessage(message)
     }