reactive-vscode 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -54,14 +54,18 @@ import { UnwrapNestedRefs } from '@reactive-vscode/reactivity';
 import { Uri } from 'vscode';
 import { ViewBadge } from 'vscode';
 import { ViewColumn } from 'vscode';
-import { WatchSource } from '@reactive-vscode/reactivity';
 import { WebviewOptions } from 'vscode';
+import { WebviewPanel } from 'vscode';
 import { WebviewView } from 'vscode';
+import { WebviewViewResolveContext } from 'vscode';
+import { window } from 'vscode';
 import { WorkspaceFolder } from 'vscode';
 import { WritableComputedRef } from '@reactive-vscode/reactivity';
 
 /* Excluded from this release type: activateCbs */
 
+export declare type AnyWatchSource = any;
+
 export declare type Awaitable<T> = T | Promise<T>;
 
 export declare interface Commands extends Record<string, (...args: any[]) => any> {
@@ -717,7 +721,7 @@ export declare type UseTreeViewOptions<T> = Omit<TreeViewOptions<T>, 'treeDataPr
     /**
      * Additional watch source to trigger a change event. Useful when `treeItem` is a promise.
      */
-    watchSource?: WatchSource<any>;
+    watchSource?: AnyWatchSource;
 };
 
 /**
@@ -759,14 +763,28 @@ export declare function useVscodeContext<T>(name: string, value: WritableCompute
 
 export declare function useVscodeContext<T>(name: string, value: MaybeRef<T>, shouldUpdate?: MaybeRefOrGetter<boolean>): Ref<T>;
 
+/**
+ * Register a webview panel. See `vscode::window.createWebviewPanel`.
+ *
+ * @category view
+ */
+export declare function useWebviewPanel(viewType: string, title: MaybeRefOrGetter<string>, html: MaybeRefOrGetter<string>, showOptions: Parameters<typeof window.createWebviewPanel>[2], options?: WebviewPanelRegisterOptions): {
+    panel: WebviewPanel;
+    context: ShallowRef<unknown>;
+    active: Ref<boolean>;
+    visible: Ref<boolean>;
+    postMessage: (message: any) => Thenable<boolean>;
+    forceRefresh: () => void;
+};
+
 /**
  * Register a webview view. See `vscode::window.registerWebviewViewProvider`.
  *
  * @category view
  */
-export declare const useWebviewView: (viewId: string, html: MaybeRefOrGetter<string>, options?: WebviewRegisterOptions | undefined) => {
+export declare const useWebviewView: (viewId: string, html: MaybeRefOrGetter<string>, options?: WebviewViewRegisterOptions | undefined) => {
     view: ShallowRef<WebviewView | undefined>;
-    context: ShallowRef<unknown>;
+    context: ShallowRef<WebviewViewResolveContext<unknown> | undefined>;
     postMessage: (message: any) => Thenable<boolean> | undefined;
     forceRefresh: () => void;
 };
@@ -790,7 +808,14 @@ declare type ViewWithTitle = Pick<TreeView<unknown> | WebviewView, 'title'>;
 
 declare type ViewWithVisibility = Pick<TreeView<unknown> | WebviewView, 'visible' | 'onDidChangeVisibility'>;
 
-declare interface WebviewRegisterOptions {
+export declare interface WebviewPanelRegisterOptions {
+    enableFindWidget?: boolean;
+    retainContextWhenHidden?: boolean;
+    onDidReceiveMessage?: (message: any) => void;
+    webviewOptions?: MaybeRefOrGetter<WebviewOptions>;
+}
+
+export declare interface WebviewViewRegisterOptions {
     retainContextWhenHidden?: boolean;
     onDidReceiveMessage?: (message: any) => void;
     webviewOptions?: MaybeRefOrGetter<WebviewOptions>;

package/dist/index.js

@@ -1,100 +1,100 @@
-import { getCurrentScope as L, onScopeDispose as P, shallowRef as d, effectScope as Q, computed as g, reactive as U, toValue as o, watchEffect as C, watch as b, ref as y, shallowReactive as q, toRaw as Y, isRef as G } from "@reactive-vscode/reactivity";
+import { getCurrentScope as $, onScopeDispose as W, shallowRef as d, effectScope as Q, computed as g, reactive as U, toValue as r, watchEffect as b, watch as C, ref as S, shallowReactive as q, toRaw as Y, isRef as G } from "@reactive-vscode/reactivity";
 export * from "@reactive-vscode/reactivity";
-import { workspace as D, commands as A, window as l, debug as W, extensions as V, comments as J, env as E, EventEmitter as N, tasks as x, Uri as X, languages as Z, ColorThemeKind as O, l10n as F } from "vscode";
+import { workspace as T, commands as A, window as l, debug as P, extensions as V, comments as J, env as p, EventEmitter as L, tasks as k, Uri as X, languages as Z, ColorThemeKind as M, l10n as F } from "vscode";
 function _(e) {
-  return L() ? (P(e), !0) : !1;
+  return $() ? (W(e), !0) : !1;
 }
-function $(e, t) {
+function N(e, t) {
   const n = /* @__PURE__ */ new Map();
   return (...a) => {
     const i = t(...a);
-    let r = n.get(i);
-    return r ? r.refCount++ : (r = {
+    let u = n.get(i);
+    return u ? u.refCount++ : (u = {
       data: e(...a),
       refCount: 1
-    }, n.set(i, r)), _(() => {
-      --r.refCount === 0 && n.delete(i);
-    }), r.data;
+    }, n.set(i, u)), _(() => {
+      --u.refCount === 0 && n.delete(i);
+    }), u.data;
   };
 }
-function h(e) {
+function m(e) {
   let t;
   return () => t ?? (t = e());
 }
-const M = [];
+const H = [];
 function ge(e) {
-  M.push(e);
+  H.push(e);
 }
-const k = d(null), I = Q();
-function me(e) {
+const R = d(null), I = Q();
+function he(e) {
   return {
-    activate: (t) => (k.value = t, I.run(() => (j.map((n) => n(t)), e()))),
+    activate: (t) => (R.value = t, I.run(() => (j.map((n) => n(t)), e()))),
     deactivate: () => {
-      M.map((t) => t()), I.stop();
+      H.map((t) => t()), I.stop();
     }
   };
 }
 const j = [];
 function B(e) {
-  k.value ? e(k.value) : j.push(e);
+  R.value ? e(R.value) : j.push(e);
 }
 function ee(e, t, n) {
-  const a = !e, i = D.getConfiguration(a ? void 0 : e, n);
-  function r(c, f) {
-    const m = d(f), w = g({
-      get: () => m.value,
+  const a = !e, i = T.getConfiguration(a ? void 0 : e, n);
+  function u(o, f) {
+    const h = d(f), w = g({
+      get: () => h.value,
       set: (v) => {
-        m.value = v, i.update(c, v);
+        h.value = v, i.update(o, v);
       }
     });
-    return w.update = async (v, T, p) => {
-      await i.update(c, v, T, p), w.value = v;
+    return w.update = async (v, D, x) => {
+      await i.update(o, v, D, x), w.value = v;
     }, w.set = (v) => {
-      m.value = v;
+      h.value = v;
     }, w;
   }
-  const s = Object.fromEntries(
-    Object.keys(t).map((c) => [c, r(c, i.get(c))])
+  const c = Object.fromEntries(
+    Object.keys(t).map((o) => [o, u(o, i.get(o))])
   );
   return B(() => {
-    u(D.onDidChangeConfiguration(
-      a ? (c) => {
-        const f = D.getConfiguration();
-        for (const m in t)
-          c.affectsConfiguration(m) && s[m].set(f.get(m));
-      } : (c) => {
-        if (!c.affectsConfiguration(e))
+    s(T.onDidChangeConfiguration(
+      a ? (o) => {
+        const f = T.getConfiguration();
+        for (const h in t)
+          o.affectsConfiguration(h) && c[h].set(f.get(h));
+      } : (o) => {
+        if (!o.affectsConfiguration(e))
           return;
-        const f = D.getConfiguration(e);
-        for (const m in t)
-          c.affectsConfiguration(`${e}.${m}`) && s[m].set(f.get(m));
+        const f = T.getConfiguration(e);
+        for (const h in t)
+          o.affectsConfiguration(`${e}.${h}`) && c[h].set(f.get(h));
       }
     ));
-  }), s;
+  }), c;
 }
-function he(e, t, n) {
+function me(e, t, n) {
   const a = ee(e, t, n);
   return U({
     ...a,
-    $update(i, r, s, c) {
-      return a[i].update(r, s, c);
+    $update(i, u, c, o) {
+      return a[i].update(u, c, o);
     },
-    $set(i, r) {
-      return a[i].set(r);
+    $set(i, u) {
+      return a[i].set(u);
     }
   });
 }
-function Ce(e, t) {
-  const n = d(null), a = [], i = (r) => (...s) => n.value ? n.value[r](...s) : (a.push([r, s]), null);
+function be(e, t) {
+  const n = d(null), a = [], i = (u) => (...c) => n.value ? n.value[u](...c) : (a.push([u, c]), null);
   return B(() => {
-    n.value = ue(e, t);
-    for (const [r, s] of a)
-      n.value[r](...s);
+    n.value = se(e, t);
+    for (const [u, c] of a)
+      n.value[u](...c);
   }), {
     logger: n,
     outputChannel: g(() => {
-      var r;
-      return (r = n.value) == null ? void 0 : r.outputChannel;
+      var u;
+      return (u = n.value) == null ? void 0 : u.outputChannel;
     }),
     info: i("info"),
     warn: i("warn"),
@@ -107,151 +107,151 @@ function Ce(e, t) {
     hide: i("hide")
   };
 }
-function be(e, ...t) {
+function we(e, ...t) {
   return A.executeCommand(e, ...t);
 }
 function te(e, t = !1) {
-  const n = k.value;
+  const n = R.value;
   if (!n && !t)
     throw new Error("Cannot get absolute path because the extension is not activated yet");
   return n == null ? void 0 : n.asAbsolutePath(e);
 }
-function we(e, t = !1) {
-  return g(() => te(o(e), t));
+function Ce(e, t = !1) {
+  return g(() => te(r(e), t));
 }
-function u(e) {
-  return (L() ?? I).cleanups.push(e.dispose.bind(e)), e;
+function s(e) {
+  return ($() ?? I).cleanups.push(e.dispose.bind(e)), e;
 }
-const ne = h(() => {
+const ne = m(() => {
   const e = d(l.activeColorTheme);
-  return u(l.onDidChangeActiveColorTheme((t) => {
+  return s(l.onDidChangeActiveColorTheme((t) => {
     e.value = t;
   })), e;
-}), De = h(() => {
-  const e = d(W.activeDebugSession);
-  return u(W.onDidChangeActiveDebugSession((t) => {
+}), De = m(() => {
+  const e = d(P.activeDebugSession);
+  return s(P.onDidChangeActiveDebugSession((t) => {
     e.value = t;
   })), g(() => e.value);
-}), ae = h(() => {
+}), ae = m(() => {
   const e = d(l.activeTextEditor);
-  return u(l.onDidChangeActiveTextEditor((t) => {
+  return s(l.onDidChangeActiveTextEditor((t) => {
     e.value = t;
   })), e;
 });
 function ie(e) {
   var n;
-  const t = d((n = o(e)) == null ? void 0 : n.getText());
-  return C(() => {
+  const t = d((n = r(e)) == null ? void 0 : n.getText());
+  return b(() => {
     var a;
-    t.value = (a = o(e)) == null ? void 0 : a.getText();
-  }), u(D.onDidChangeTextDocument((a) => {
-    a.document === o(e) && (t.value = a.document.getText());
+    t.value = (a = r(e)) == null ? void 0 : a.getText();
+  }), s(T.onDidChangeTextDocument((a) => {
+    a.document === r(e) && (t.value = a.document.getText());
   })), t;
 }
 function re(e, t, n, a = {}) {
   const {
     updateOn: i = ["effect", "documentChanged"]
-  } = a, r = "key" in t ? t : u(l.createTextEditorDecorationType(t)), s = async () => {
-    const f = o(e);
+  } = a, u = "key" in t ? t : s(l.createTextEditorDecorationType(t)), c = async () => {
+    const f = r(e);
     f && f.setDecorations(
-      r,
-      typeof n == "function" ? await n(f) : o(n)
+      u,
+      typeof n == "function" ? await n(f) : r(n)
     );
-  }, c = i.includes("documentChanged") ? ie(() => {
+  }, o = i.includes("documentChanged") ? ie(() => {
     var f;
-    return (f = o(e)) == null ? void 0 : f.document;
+    return (f = r(e)) == null ? void 0 : f.document;
   }) : null;
-  return i.includes("effect") ? C(async () => {
-    c == null || c.value, await s();
-  }) : c && b(c, s), {
+  return i.includes("effect") ? b(async () => {
+    o == null || o.value, await c();
+  }) : o && C(o, c), {
     /**
      * Manually trigger the decoration update.
      */
-    update: s
+    update: c
   };
 }
 function Te(e, t) {
   const n = ae();
   re(n, e, t);
 }
-const pe = h(() => {
+const Se = m(() => {
   const e = d(l.activeNotebookEditor);
-  return u(l.onDidChangeActiveNotebookEditor((t) => {
+  return s(l.onDidChangeActiveNotebookEditor((t) => {
     e.value = t;
   })), e;
-}), Se = h(() => {
+}), xe = m(() => {
   const e = d(l.activeTerminal);
-  return u(l.onDidChangeActiveTerminal((t) => {
+  return s(l.onDidChangeActiveTerminal((t) => {
     e.value = t;
   })), e;
-}), Ee = h(() => {
+}), Ee = m(() => {
   const e = d(V.all);
-  return u(V.onDidChange(() => {
+  return s(V.onDidChange(() => {
     e.value = V.all;
   })), g(() => e.value);
 });
-function oe(e, t) {
-  u(A.registerCommand(e, t));
+function ce(e, t) {
+  s(A.registerCommand(e, t));
 }
-function xe(e) {
+function pe(e) {
   for (const [t, n] of Object.entries(e))
-    n && oe(t, n);
+    n && ce(t, n);
 }
 function ke(e, t) {
-  return u(J.createCommentController(e, t));
+  return s(J.createCommentController(e, t));
 }
-function H(e) {
+function z(e) {
   var n;
-  const t = d((n = o(e)) == null ? void 0 : n.state);
-  return b(e, () => {
+  const t = d((n = r(e)) == null ? void 0 : n.state);
+  return C(e, () => {
     var a;
-    t.value = (a = o(e)) == null ? void 0 : a.state;
-  }), u(l.onDidChangeTerminalState((a) => {
-    a === o(e) && (t.value = a.state);
+    t.value = (a = r(e)) == null ? void 0 : a.state;
+  }), s(l.onDidChangeTerminalState((a) => {
+    a === r(e) && (t.value = a.state);
   })), g(() => t.value);
 }
-function ye(...e) {
-  const t = y(null);
+function Re(...e) {
+  const t = S(null);
   function n() {
     return !!t.value && t.value.exitStatus == null;
   }
   function a() {
     return n() ? t.value : t.value = l.createTerminal(...e);
   }
-  function i(c) {
-    a().sendText(c);
+  function i(o) {
+    a().sendText(o);
   }
-  function r() {
+  function u() {
     a().show();
   }
-  function s() {
+  function c() {
     n() && (t.value.sendText(""), t.value.dispose(), t.value = null);
   }
-  return P(s), {
+  return W(c), {
     terminal: t,
     getIsActive: n,
-    show: r,
+    show: u,
     sendText: i,
-    close: s,
-    state: H(t)
+    close: c,
+    state: z(t)
   };
 }
-const Re = h(() => {
-  const e = d(E.shell);
-  return u(E.onDidChangeShell((t) => {
+const ye = m(() => {
+  const e = d(p.shell);
+  return s(p.onDidChangeShell((t) => {
     e.value = t;
   })), g(() => e.value);
 });
-function S(e, t) {
-  const n = (a, i, r) => {
-    u(e(a, i, r));
+function E(e, t) {
+  const n = (a, i, u) => {
+    s(e(a, i, u));
   };
   return t == null || t.forEach((a) => n(a)), n;
 }
-function R(e, t = []) {
-  const n = Array.isArray(e) ? e : t ?? [], a = u(Array.isArray(e) || e == null ? new N() : e), i = S(a.event, n);
-  for (const r of n)
-    i(r);
+function y(e, t = []) {
+  const n = Array.isArray(e) ? e : t ?? [], a = s(Array.isArray(e) || e == null ? new L() : e), i = E(a.event, n);
+  for (const u of n)
+    i(u);
   return {
     event: a.event,
     fire: a.fire.bind(a),
@@ -259,56 +259,56 @@ function R(e, t = []) {
   };
 }
 async function Ae(e) {
-  const t = k.value.secrets, n = y(await t.get(e));
+  const t = R.value.secrets, n = S(await t.get(e));
   return n.set = async (a) => {
     n.value = a, await t.store(e, a);
   }, n.remove = async () => {
     n.value = void 0, await t.delete(e);
-  }, u(t.onDidChange(async (a) => {
+  }, s(t.onDidChange(async (a) => {
     a.key === e && (n.value = await t.get(e));
-  })), b(n, (a) => {
+  })), C(n, (a) => {
     a === void 0 ? t.delete(e) : t.store(e, a);
   }), n;
 }
 function Ve(e) {
-  return g(() => x.fetchTasks(o(e)));
+  return g(() => k.fetchTasks(r(e)));
 }
 function Ie(e) {
-  return g(() => X.file(o(e)));
+  return g(() => X.file(r(e)));
 }
-function Pe(e, t) {
-  const n = new N(), a = d();
-  C(() => {
-    a.value && n.fire(), a.value = o(t);
-  }), u(Z.registerFoldingRangeProvider(
+function We(e, t) {
+  const n = new L(), a = d();
+  b(() => {
+    a.value && n.fire(), a.value = r(t);
+  }), s(Z.registerFoldingRangeProvider(
     e,
     {
       onDidChangeFoldingRanges: n.event,
-      provideFoldingRanges(i, r, s) {
-        var c;
-        return (c = a.value) == null ? void 0 : c.call(a, i, r, s);
+      provideFoldingRanges(i, u, c) {
+        var o;
+        return (o = a.value) == null ? void 0 : o.call(a, i, u, c);
       }
     }
   ));
 }
-function We(e, t, n, a) {
-  const i = q(/* @__PURE__ */ new Map()), r = R(), s = R(), c = R(), f = g(() => {
-    const v = o(e);
+function Oe(e, t, n, a) {
+  const i = q(/* @__PURE__ */ new Map()), u = y(), c = y(), o = y(), f = g(() => {
+    const v = r(e);
     return Array.isArray(v) ? v : v instanceof Set ? Array.from(v) : [v];
   });
-  function m() {
+  function h() {
     const v = f.value;
-    for (const [T, p] of i)
-      v.includes(T) || (p.dispose(), i.delete(T));
-    for (const T of v)
-      if (!i.has(T)) {
-        const p = D.createFileSystemWatcher(
-          T,
-          o(t) || !1,
-          o(n) || !1,
-          o(a) || !1
+    for (const [D, x] of i)
+      v.includes(D) || (x.dispose(), i.delete(D));
+    for (const D of v)
+      if (!i.has(D)) {
+        const x = T.createFileSystemWatcher(
+          D,
+          r(t) || !1,
+          r(n) || !1,
+          r(a) || !1
         );
-        p.onDidCreate(r.fire), p.onDidChange(s.fire), p.onDidDelete(c.fire);
+        x.onDidCreate(u.fire), x.onDidChange(c.fire), x.onDidDelete(o.fire);
       }
   }
   function w() {
@@ -316,45 +316,45 @@ function We(e, t, n, a) {
       v.dispose();
     i.clear();
   }
-  return b(f, m), b(
+  return C(f, h), C(
     () => [
-      o(t),
-      o(n),
-      o(a)
+      r(t),
+      r(n),
+      r(a)
     ],
     () => {
-      w(), m();
+      w(), h();
     }
-  ), P(w), {
+  ), W(w), {
     watchers: i,
-    onDidCreate: r.event,
-    onDidChange: s.event,
-    onDidDelete: c.event
+    onDidCreate: u.event,
+    onDidChange: c.event,
+    onDidDelete: o.event
   };
 }
-const Oe = h(() => {
+const Pe = m(() => {
   const e = ne();
-  return g(() => e.value.kind === O.Dark || e.value.kind === O.HighContrast);
-}), Fe = h(() => {
-  const e = d(E.isTelemetryEnabled);
-  return u(E.onDidChangeTelemetryEnabled((t) => {
+  return g(() => e.value.kind === M.Dark || e.value.kind === M.HighContrast);
+}), Me = m(() => {
+  const e = d(p.isTelemetryEnabled);
+  return s(p.onDidChangeTelemetryEnabled((t) => {
     e.value = t;
   })), g(() => e.value);
 });
-function Le(e, ...t) {
-  return g(() => typeof t[0] == "object" ? F.t(o(e), Y(t[0])) : F.t(o(e), ...t.map(o)));
+function Fe(e, ...t) {
+  return g(() => typeof t[0] == "object" ? F.t(r(e), Y(t[0])) : F.t(r(e), ...t.map(r)));
 }
-function se(e, t) {
-  return u(l.createOutputChannel(e, t));
+function ue(e, t) {
+  return s(l.createOutputChannel(e, t));
 }
-function Ne(e) {
-  const t = /* @__PURE__ */ new Date(), n = String(t.getFullYear()).padStart(4, "0"), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0"), r = String(t.getHours()).padStart(2, "0"), s = String(t.getMinutes()).padStart(2, "0"), c = String(t.getSeconds()).padStart(2, "0"), f = String(t.getMilliseconds()).padStart(3, "0");
-  return `${n}-${a}-${i} ${r}:${s}:${c}.${f} [${e}] `;
+function $e(e) {
+  const t = /* @__PURE__ */ new Date(), n = String(t.getFullYear()).padStart(4, "0"), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0"), u = String(t.getHours()).padStart(2, "0"), c = String(t.getMinutes()).padStart(2, "0"), o = String(t.getSeconds()).padStart(2, "0"), f = String(t.getMilliseconds()).padStart(3, "0");
+  return `${n}-${a}-${i} ${u}:${c}:${o}.${f} [${e}] `;
 }
-function ue(e, t = {}) {
-  const n = t.outputChannel ?? se(e), a = (i) => (...r) => {
-    var s;
-    n.appendLine((((s = t.getPrefix) == null ? void 0 : s.call(t, i)) ?? "") + r.join(" "));
+function se(e, t = {}) {
+  const n = t.outputChannel ?? ue(e), a = (i) => (...u) => {
+    var c;
+    n.appendLine((((c = t.getPrefix) == null ? void 0 : c.call(t, i)) ?? "") + u.join(" "));
   };
   return {
     outputChannel: n,
@@ -370,33 +370,33 @@ function ue(e, t = {}) {
     hide: n.hide.bind(n)
   };
 }
-const $e = h(() => {
-  const e = d(E.logLevel);
-  return u(E.onDidChangeLogLevel((t) => {
+const Le = m(() => {
+  const e = d(p.logLevel);
+  return s(p.onDidChangeLogLevel((t) => {
     e.value = t;
   })), g(() => e.value);
 });
-function ce(e) {
+function oe(e) {
   var n;
-  const t = d(((n = o(e)) == null ? void 0 : n.selections) ?? []);
-  return b(e, () => {
+  const t = d(((n = r(e)) == null ? void 0 : n.selections) ?? []);
+  return C(e, () => {
     var a;
-    t.value = ((a = o(e)) == null ? void 0 : a.selections) ?? [];
-  }), u(l.onDidChangeNotebookEditorSelection((a) => {
-    a.notebookEditor === o(e) && (t.value = a.selections);
+    t.value = ((a = r(e)) == null ? void 0 : a.selections) ?? [];
+  }), s(l.onDidChangeNotebookEditorSelection((a) => {
+    a.notebookEditor === r(e) && (t.value = a.selections);
   })), g({
     get() {
       return t.value;
     },
     set(a) {
       t.value = a;
-      const i = o(e);
+      const i = r(e);
       i && (i.selections = a);
     }
   });
 }
-function Me(e) {
-  const t = ce(e);
+function Ne(e) {
+  const t = oe(e);
   return g({
     get() {
       return t.value[0];
@@ -406,25 +406,25 @@ function Me(e) {
     }
   });
 }
-function je(e) {
+function He(e) {
   var n;
-  const t = d(((n = o(e)) == null ? void 0 : n.visibleRanges) ?? []);
-  return b(e, () => {
+  const t = d(((n = r(e)) == null ? void 0 : n.visibleRanges) ?? []);
+  return C(e, () => {
     var a;
-    t.value = ((a = o(e)) == null ? void 0 : a.visibleRanges) ?? [];
-  }), u(l.onDidChangeNotebookEditorVisibleRanges((a) => {
-    a.notebookEditor === o(e) && (t.value = a.visibleRanges);
+    t.value = ((a = r(e)) == null ? void 0 : a.visibleRanges) ?? [];
+  }), s(l.onDidChangeNotebookEditorVisibleRanges((a) => {
+    a.notebookEditor === r(e) && (t.value = a.visibleRanges);
   })), g(() => t.value);
 }
-const Be = h(() => {
+const je = m(() => {
   const e = d(l.terminals);
   function t() {
     e.value = l.terminals;
   }
-  return u(l.onDidOpenTerminal(t)), u(l.onDidCloseTerminal(t)), e;
+  return s(l.onDidOpenTerminal(t)), s(l.onDidCloseTerminal(t)), e;
 });
-function He(e = {}) {
-  const t = u(l.createQuickPick()), n = S(t.onDidChangeActive), a = S(t.onDidChangeSelection), i = S(t.onDidAccept), r = S(t.onDidHide), s = S(t.onDidTriggerButton), c = S(t.onDidChangeValue);
+function Be(e = {}) {
+  const t = s(l.createQuickPick()), n = E(t.onDidChangeActive), a = E(t.onDidChangeSelection), i = E(t.onDidAccept), u = E(t.onDidHide), c = E(t.onDidTriggerButton), o = E(t.onDidChangeValue);
   [
     "items",
     "buttons",
@@ -440,31 +440,31 @@ function He(e = {}) {
     "matchOnDetail",
     "keepScrollPosition"
   ].forEach((v) => {
-    e[v] && C(() => t[v] = o(e[v]));
+    e[v] && b(() => t[v] = r(e[v]));
   }), e.value && (t.value = e.value);
   const f = d(t.value);
-  c((v) => f.value = v), e.activeItems && (t.activeItems = e.activeItems);
-  const m = d(t.activeItems);
-  n((v) => m.value = v), e.selectedItems && (t.selectedItems = e.selectedItems);
+  o((v) => f.value = v), e.activeItems && (t.activeItems = e.activeItems);
+  const h = d(t.activeItems);
+  n((v) => h.value = v), e.selectedItems && (t.selectedItems = e.selectedItems);
   const w = d(t.selectedItems);
   return a((v) => w.value = v), {
     ...t,
     onDidChangeActive: n,
     onDidChangeSelection: a,
     onDidAccept: i,
-    onDidHide: r,
-    onDidTriggerButton: s,
-    onDidChangeValue: c,
+    onDidHide: u,
+    onDidTriggerButton: c,
+    onDidChangeValue: o,
     value: f,
-    activeItems: m,
+    activeItems: h,
     selectedItems: w
   };
 }
 function ze(e) {
-  const t = u(e.id ? l.createStatusBarItem(e.id, e.alignment, e.priority) : l.createStatusBarItem(e.alignment, e.priority));
+  const t = s(e.id ? l.createStatusBarItem(e.id, e.alignment, e.priority) : l.createStatusBarItem(e.alignment, e.priority));
   function n(a) {
     const i = e[a];
-    i != null && C(() => t[a] = o(i));
+    i != null && b(() => t[a] = r(i));
   }
   return [
     "name",
@@ -476,15 +476,15 @@ function ze(e) {
     "accessibilityInformation"
   ].forEach(n), t;
 }
-const Ke = h(() => {
-  const e = d(x.taskExecutions);
+const Ke = m(() => {
+  const e = d(k.taskExecutions);
   function t() {
-    e.value = x.taskExecutions;
+    e.value = k.taskExecutions;
   }
-  return u(x.onDidStartTask(t)), u(x.onDidEndTask(t)), g(() => e.value);
+  return s(k.onDidStartTask(t)), s(k.onDidEndTask(t)), g(() => e.value);
 });
 function Qe(...e) {
-  const t = u(l.createTerminal(...e));
+  const t = s(l.createTerminal(...e));
   return {
     terminal: t,
     get name() {
@@ -502,11 +502,11 @@ function Qe(...e) {
     sendText: t.sendText.bind(t),
     show: t.show.bind(t),
     hide: t.hide.bind(t),
-    state: H(t)
+    state: z(t)
   };
 }
 function le(e, t) {
-  u(A.registerTextEditorCommand(e, t));
+  s(A.registerTextEditorCommand(e, t));
 }
 function Ue(e) {
   for (const [t, n] of Object.entries(e))
@@ -514,21 +514,21 @@ function Ue(e) {
 }
 function de(e, t) {
   var a;
-  const n = d(((a = o(e)) == null ? void 0 : a.selections) ?? []);
-  return b(e, () => {
+  const n = d(((a = r(e)) == null ? void 0 : a.selections) ?? []);
+  return C(e, () => {
     var i;
-    n.value = ((i = o(e)) == null ? void 0 : i.selections) ?? [];
-  }), u(l.onDidChangeTextEditorSelection((i) => {
-    const r = o(e), s = o(t);
-    i.textEditor === r && (!s || s.includes(i.kind)) && (n.value = i.selections);
+    n.value = ((i = r(e)) == null ? void 0 : i.selections) ?? [];
+  }), s(l.onDidChangeTextEditorSelection((i) => {
+    const u = r(e), c = r(t);
+    i.textEditor === u && (!c || c.includes(i.kind)) && (n.value = i.selections);
   })), g({
     get() {
       return n.value;
     },
     set(i) {
       n.value = i;
-      const r = o(e);
-      r && (r.selections = i);
+      const u = r(e);
+      u && (u.selections = i);
     }
   });
 }
@@ -545,101 +545,134 @@ function qe(e, t) {
 }
 function Ye(e) {
   var n;
-  const t = d((n = o(e)) == null ? void 0 : n.viewColumn);
-  return b(e, () => {
+  const t = d((n = r(e)) == null ? void 0 : n.viewColumn);
+  return C(e, () => {
     var a;
-    t.value = (a = o(e)) == null ? void 0 : a.viewColumn;
-  }), u(l.onDidChangeTextEditorViewColumn((a) => {
-    a.textEditor === o(e) && (t.value = a.viewColumn);
+    t.value = (a = r(e)) == null ? void 0 : a.viewColumn;
+  }), s(l.onDidChangeTextEditorViewColumn((a) => {
+    a.textEditor === r(e) && (t.value = a.viewColumn);
   })), g(() => t.value);
 }
 function Ge(e) {
   var n;
-  const t = d(((n = o(e)) == null ? void 0 : n.visibleRanges) ?? []);
-  return b(e, () => {
+  const t = d(((n = r(e)) == null ? void 0 : n.visibleRanges) ?? []);
+  return C(e, () => {
     var a;
-    t.value = ((a = o(e)) == null ? void 0 : a.visibleRanges) ?? [];
-  }), u(l.onDidChangeTextEditorVisibleRanges((a) => {
-    a.textEditor === o(e) && (t.value = a.visibleRanges);
+    t.value = ((a = r(e)) == null ? void 0 : a.visibleRanges) ?? [];
+  }), s(l.onDidChangeTextEditorVisibleRanges((a) => {
+    a.textEditor === r(e) && (t.value = a.visibleRanges);
   })), g(() => t.value);
 }
-function z(e, t) {
-  C(() => {
-    const n = o(e);
-    n && (n.badge = o(t));
+function K(e, t) {
+  b(() => {
+    const n = r(e);
+    n && (n.badge = r(t));
   });
 }
-function K(e, t) {
-  C(() => {
-    const n = o(e);
-    n && (n.title = o(t));
+function O(e, t) {
+  b(() => {
+    const n = r(e);
+    n && (n.title = r(t));
   });
 }
-const Je = $(
+const Je = N(
   (e, t, n) => {
-    const a = R();
-    b(t, () => a.fire()), n != null && n.watchSource && b(n.watchSource, () => a.fire());
-    const i = /* @__PURE__ */ new WeakMap(), r = u(l.createTreeView(e, {
+    const a = y();
+    C(t, () => a.fire()), n != null && n.watchSource && C(n.watchSource, () => a.fire());
+    const i = /* @__PURE__ */ new WeakMap(), u = s(l.createTreeView(e, {
       ...n,
       treeDataProvider: {
         ...n,
         onDidChangeTreeData: a.event,
-        getTreeItem(s) {
-          return s.treeItem;
+        getTreeItem(c) {
+          return c.treeItem;
         },
-        getChildren(s) {
-          var c;
-          return s ? ((c = s.children) == null || c.forEach((f) => i.set(f, s)), s.children) : o(t);
+        getChildren(c) {
+          var o;
+          return c ? ((o = c.children) == null || o.forEach((f) => i.set(f, c)), c.children) : r(t);
         },
-        getParent(s) {
-          return i.get(s);
+        getParent(c) {
+          return i.get(c);
         }
       }
     }));
-    return n != null && n.title && K(r, n.title), n != null && n.badge && z(r, n.badge), r;
+    return n != null && n.title && O(u, n.title), n != null && n.badge && K(u, n.badge), u;
   },
   (e) => e
 );
 function Xe(e) {
   var a;
-  const t = y((a = o(e)) == null ? void 0 : a.visible);
+  const t = S((a = r(e)) == null ? void 0 : a.visible);
   function n() {
     var i;
-    t.value = (i = o(e)) == null ? void 0 : i.visible;
+    t.value = (i = r(e)) == null ? void 0 : i.visible;
   }
-  return C((i) => {
-    const r = o(e);
-    if (r) {
-      const s = r.onDidChangeVisibility(n);
-      i(() => s.dispose());
+  return b((i) => {
+    const u = r(e);
+    if (u) {
+      const c = u.onDidChangeVisibility(n);
+      i(() => c.dispose());
     }
-  }), C(n), g(() => !!t.value);
+  }), b(n), g(() => !!t.value);
 }
-const Ze = h(() => {
+const Ze = m(() => {
   const e = d(l.visibleNotebookEditors);
-  return u(l.onDidChangeVisibleNotebookEditors((t) => {
+  return s(l.onDidChangeVisibleNotebookEditors((t) => {
     e.value = t;
   })), e;
-}), _e = h(() => {
+}), _e = m(() => {
   const e = d(l.visibleTextEditors);
-  return u(l.onDidChangeVisibleTextEditors((t) => {
+  return s(l.onDidChangeVisibleTextEditors((t) => {
     e.value = t;
   })), e;
 });
 function et(e, t, n = !0) {
-  const a = G(t) ? t : typeof t == "function" ? g(t) : y(t);
-  return C(() => {
-    o(n) && A.executeCommand("setContext", e, a.value);
+  const a = G(t) ? t : typeof t == "function" ? g(t) : S(t);
+  return b(() => {
+    r(n) && A.executeCommand("setContext", e, a.value);
   }), a;
 }
-const tt = $(
+function tt(e, t, n, a, i) {
+  const u = d(), c = s(l.createWebviewPanel(
+    e,
+    r(t),
+    a,
+    {
+      enableFindWidget: i == null ? void 0 : i.enableFindWidget,
+      retainContextWhenHidden: i == null ? void 0 : i.retainContextWhenHidden,
+      ...r(i == null ? void 0 : i.webviewOptions)
+    }
+  ));
+  i != null && i.onDidReceiveMessage && c.webview.onDidReceiveMessage(i.onDidReceiveMessage);
+  const o = S(0);
+  function f() {
+    o.value++;
+  }
+  if (b(() => {
+    c.webview.html = `${r(n)}<!--${o.value}-->`;
+  }), i != null && i.webviewOptions) {
+    const D = i.webviewOptions;
+    b(() => {
+      c.webview.options = r(D);
+    });
+  }
+  O(c, t);
+  function h(D) {
+    return c.webview.postMessage(D);
+  }
+  const w = S(c.active), v = S(c.visible);
+  return s(c.onDidChangeViewState(() => {
+    w.value = c.active, v.value = c.visible;
+  })), { panel: c, context: u, active: w, visible: v, postMessage: h, forceRefresh: f };
+}
+const nt = N(
   (e, t, n) => {
     const a = d(), i = d();
-    u(l.registerWebviewViewProvider(
+    s(l.registerWebviewViewProvider(
       e,
       {
-        resolveWebviewView(f, m) {
-          a.value = f, i.value = m, n != null && n.onDidReceiveMessage && f.webview.onDidReceiveMessage(n.onDidReceiveMessage);
+        resolveWebviewView(f, h) {
+          a.value = f, i.value = h, n != null && n.onDidReceiveMessage && f.webview.onDidReceiveMessage(n.onDidReceiveMessage);
         }
       },
       {
@@ -648,94 +681,94 @@ const tt = $(
         }
       }
     ));
-    const r = y(0);
-    function s() {
-      r.value++;
+    const u = S(0);
+    function c() {
+      u.value++;
     }
-    if (C(() => {
-      a.value && (a.value.webview.html = `${o(t)}<!--${r.value}-->`);
+    if (b(() => {
+      a.value && (a.value.webview.html = `${r(t)}<!--${u.value}-->`);
     }), n != null && n.webviewOptions) {
       const f = n.webviewOptions;
-      C(() => {
-        a.value && (a.value.webview.options = o(f));
+      b(() => {
+        a.value && (a.value.webview.options = r(f));
       });
     }
-    n != null && n.title && K(a, n.title), n != null && n.badge && z(a, n.badge);
-    function c(f) {
-      var m;
-      return (m = a.value) == null ? void 0 : m.webview.postMessage(f);
+    n != null && n.title && O(a, n.title), n != null && n.badge && K(a, n.badge);
+    function o(f) {
+      var h;
+      return (h = a.value) == null ? void 0 : h.webview.postMessage(f);
     }
-    return { view: a, context: i, postMessage: c, forceRefresh: s };
+    return { view: a, context: i, postMessage: o, forceRefresh: c };
   },
   (e) => e
-), nt = h(() => {
+), at = m(() => {
   const e = d(l.state);
-  return u(l.onDidChangeWindowState((t) => {
+  return s(l.onDidChangeWindowState((t) => {
     e.value = t;
   })), {
     focused: g(() => e.value.focused),
     active: g(() => e.value.active)
   };
-}), at = h(() => {
-  const e = d(D.workspaceFolders);
-  return u(D.onDidChangeWorkspaceFolders(() => {
-    e.value = D.workspaceFolders;
+}), it = m(() => {
+  const e = d(T.workspaceFolders);
+  return s(T.onDidChangeWorkspaceFolders(() => {
+    e.value = T.workspaceFolders;
   })), g(() => e.value);
 });
 export {
   j as activateCbs,
-  $ as createKeyedComposable,
-  h as createSingletonComposable,
-  M as deactivateCbs,
-  he as defineConfigObject,
+  N as createKeyedComposable,
+  m as createSingletonComposable,
+  H as deactivateCbs,
+  me as defineConfigObject,
   ee as defineConfigs,
-  me as defineExtension,
-  Ce as defineLogger,
-  be as executeCommand,
-  k as extensionContext,
+  he as defineExtension,
+  be as defineLogger,
+  we as executeCommand,
+  R as extensionContext,
   I as extensionScope,
-  Ne as getDefaultLoggerPrefix,
+  $e as getDefaultLoggerPrefix,
   B as onActivate,
   ge as onDeactivate,
   _ as tryOnScopeDispose,
-  we as useAbsolutePath,
+  Ce as useAbsolutePath,
   ne as useActiveColorTheme,
   De as useActiveDebugSession,
   Te as useActiveEditorDecorations,
-  pe as useActiveNotebookEditor,
-  Se as useActiveTerminal,
+  Se as useActiveNotebookEditor,
+  xe as useActiveTerminal,
   ae as useActiveTextEditor,
   Ee as useAllExtensions,
-  oe as useCommand,
-  xe as useCommands,
+  ce as useCommand,
+  pe as useCommands,
   ke as useCommentController,
-  ye as useControlledTerminal,
-  Re as useDefaultShell,
-  u as useDisposable,
+  Re as useControlledTerminal,
+  ye as useDefaultShell,
+  s as useDisposable,
   ie as useDocumentText,
   re as useEditorDecorations,
-  S as useEvent,
-  R as useEventEmitter,
+  E as useEvent,
+  y as useEventEmitter,
   Ae as useExtensionSecret,
   Ve as useFetchTasks,
   Ie as useFileUri,
-  Pe as useFoldingRangeProvider,
-  We as useFsWatcher,
-  Oe as useIsDarkTheme,
-  Fe as useIsTelemetryEnabled,
-  Le as useL10nText,
-  $e as useLogLevel,
-  ue as useLogger,
-  Me as useNotebookEditorSelection,
-  ce as useNotebookEditorSelections,
-  je as useNotebookEditorVisibleRanges,
-  Be as useOpenedTerminals,
-  se as useOutputChannel,
-  He as useQuickPick,
+  We as useFoldingRangeProvider,
+  Oe as useFsWatcher,
+  Pe as useIsDarkTheme,
+  Me as useIsTelemetryEnabled,
+  Fe as useL10nText,
+  Le as useLogLevel,
+  se as useLogger,
+  Ne as useNotebookEditorSelection,
+  oe as useNotebookEditorSelections,
+  He as useNotebookEditorVisibleRanges,
+  je as useOpenedTerminals,
+  ue as useOutputChannel,
+  Be as useQuickPick,
   ze as useStatusBarItem,
   Ke as useTaskExecutions,
   Qe as useTerminal,
-  H as useTerminalState,
+  z as useTerminalState,
   le as useTextEditorCommand,
   Ue as useTextEditorCommands,
   qe as useTextEditorSelection,
@@ -743,13 +776,14 @@ export {
   Ye as useTextEditorViewColumn,
   Ge as useTextEditorVisibleRanges,
   Je as useTreeView,
-  z as useViewBadge,
-  K as useViewTitle,
+  K as useViewBadge,
+  O as useViewTitle,
   Xe as useViewVisibility,
   Ze as useVisibleNotebookEditors,
   _e as useVisibleTextEditors,
   et as useVscodeContext,
-  tt as useWebviewView,
-  nt as useWindowState,
-  at as useWorkspaceFolders
+  tt as useWebviewPanel,
+  nt as useWebviewView,
+  at as useWindowState,
+  it as useWorkspaceFolders
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactive-vscode",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Develop VSCode extension with Vue Reactivity API",
   "author": "_Kerman <kermanx@qq.com>",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "@types/vscode": "^1.89.0"
   },
   "dependencies": {
-    "@reactive-vscode/reactivity": "0.2.2"
+    "@reactive-vscode/reactivity": "0.2.3"
   },
   "devDependencies": {
     "@types/node": "^20.14.2",