fix: Fix Info Pane (#3815)

packages/client/src/storage/mementoFile.mts

@@ -88,7 +88,9 @@ export class MementoFile<T> implements Memento<T>, Disposable {
     };
 
     #handleFileChange(uri: Uri) {
-        assert(uri.toString() === this.uri.toString(), 'Invalid file change');
+        const a = uri.path;
+        const b = this.uri.path;
+        assert(a === b, `Invalid file change: ${a} !== ${b}`);
         this.#loadData().catch(() => undefined);
     }
 

packages/webview-ui/src/App.svelte

@@ -29,8 +29,12 @@
   // provideVSCodeDesignSystem().register(allComponents);
   provideVSCodeDesignSystem().register(allComponents);
 
-  export let name: string;
-  export let view: string | undefined | null;
+  interface Props {
+    name: string;
+    view: string | undefined | null;
+  }
+
+  let { name, view }: Props = $props();
 
   const disposable = createDisposableList();
 

packages/webview-ui/src/components/VscodeButton.svelte

@@ -3,42 +3,62 @@
 
   const dispatch = createEventDispatcher();
 
-  /**
-   * Determines the visual appearance (primary, secondary, icon) of the button.
-   */
-  export let appearance: 'primary' | 'secondary' | 'icon' | undefined = undefined;
-  /**
-   * Defines a label for buttons that screen readers can use.
-   */
-  export let ariaLabel: string | undefined = undefined;
-  /**
-   * Determines if the element should receive document focus on page load.
-   */
-  export let autofocus: boolean | undefined = undefined;
-  /**
-   * Prevents the user from interacting with the button––it cannot be pressed or focused.
-   */
-  export let disabled: boolean | undefined = undefined;
-  /** See MDN. */
-  export let form: string | undefined = undefined;
-  /** See MDN. */
-  export let formaction: string | undefined = undefined;
-  /** See MDN. */
-  export let formenctype: string | undefined = undefined;
-  /** See MDN. */
-  export let formmethod: string | undefined = undefined;
-  /** See MDN. */
-  export let formnovalidate: string | undefined = undefined;
-  /** See MDN. */
-  export let formtarget: string | undefined = undefined;
-  /** See MDN. */
-  export let name: string | undefined = undefined;
-  /** See MDN. */
-  export let inputType: string | undefined = undefined;
-  /** See MDN. */
-  export let value: string | undefined = undefined;
+  interface Props {
+    /**
+     * Determines the visual appearance (primary, secondary, icon) of the button.
+     */
+    appearance?: 'primary' | 'secondary' | 'icon' | undefined;
+    /**
+     * Defines a label for buttons that screen readers can use.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Determines if the element should receive document focus on page load.
+     */
+    autofocus?: boolean | undefined;
+    /**
+     * Prevents the user from interacting with the button––it cannot be pressed or focused.
+     */
+    disabled?: boolean | undefined;
+    /** See MDN. */
+    form?: string | undefined;
+    /** See MDN. */
+    formaction?: string | undefined;
+    /** See MDN. */
+    formenctype?: string | undefined;
+    /** See MDN. */
+    formmethod?: string | undefined;
+    /** See MDN. */
+    formnovalidate?: string | undefined;
+    /** See MDN. */
+    formtarget?: string | undefined;
+    /** See MDN. */
+    name?: string | undefined;
+    /** See MDN. */
+    inputType?: string | undefined;
+    /** See MDN. */
+    value?: string | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    appearance = undefined,
+    ariaLabel = undefined,
+    autofocus = undefined,
+    disabled = undefined,
+    form = undefined,
+    formaction = undefined,
+    formenctype = undefined,
+    formmethod = undefined,
+    formnovalidate = undefined,
+    formtarget = undefined,
+    name = undefined,
+    inputType = undefined,
+    value = undefined,
+    children,
+  }: Props = $props();
 
-  $: extraProps = {
+  let extraProps = $derived({
     appearance,
     autofocus,
     disabled,
@@ -52,16 +72,16 @@
     formnovalidate,
     formtarget,
     value,
-  };
-  $: props = Object.fromEntries(Object.entries(extraProps).filter(([_k, v]) => typeof v !== 'undefined'));
+  });
+  let itemProps = $derived(Object.fromEntries(Object.entries(extraProps).filter(([_k, v]) => typeof v !== 'undefined')));
 
   function click(e: Event) {
     return dispatch('click', e);
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-<vscode-button {...props} on:click={click}><slot /></vscode-button>
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<vscode-button {...itemProps} onclick={click}>{@render children?.()}</vscode-button>
 
 <style>
 </style>

packages/webview-ui/src/components/VscodeCheckbox.svelte

@@ -1,23 +1,39 @@
 <script lang="ts">
+  import { createBubbler } from 'svelte/legacy';
+
+  const bubble = createBubbler();
   import { createEventDispatcher } from 'svelte';
   import type { ChangeEvent } from '../types';
   import type { Checkbox } from '@vscode/webview-ui-toolkit';
 
-  /** Determines if the element should receive document focus on page load. */
-  export let autofocus: boolean | undefined = undefined;
-  /** When true, the checkbox is toggled on by default. */
-  export let checked: boolean = false;
-  /** Prevents the user from interacting with the button––it cannot be pressed or focused. */
-  export let disabled: boolean | undefined = undefined;
-  /** When true, the control will be immutable by user interaction. */
-  export let makeReadonly: boolean | undefined = undefined;
-  /** Indicates that the user must check the checkbox before the owning form can be submitted. */
-  export let required: boolean | undefined = undefined;
-  /** The string to use as the value of the checkbox when submitting the form */
-  export let value: string | undefined = undefined;
+  interface Props {
+    /** Determines if the element should receive document focus on page load. */
+    autofocus?: boolean | undefined;
+    /** When true, the checkbox is toggled on by default. */
+    checked?: boolean;
+    /** Prevents the user from interacting with the button––it cannot be pressed or focused. */
+    disabled?: boolean | undefined;
+    /** When true, the control will be immutable by user interaction. */
+    makeReadonly?: boolean | undefined;
+    /** Indicates that the user must check the checkbox before the owning form can be submitted. */
+    required?: boolean | undefined;
+    /** The string to use as the value of the checkbox when submitting the form */
+    value?: string | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    autofocus = undefined,
+    checked = $bindable(false),
+    disabled = undefined,
+    makeReadonly = undefined,
+    required = undefined,
+    value = undefined,
+    children,
+  }: Props = $props();
 
-  $: extraProps = { autofocus, disabled, readonly: makeReadonly, required, value };
-  $: props = Object.fromEntries(Object.entries(extraProps).filter(([_k, v]) => typeof v !== 'undefined'));
+  let extraProps = $derived({ autofocus, disabled, readonly: makeReadonly, required, value });
+  let itemProps = $derived(Object.fromEntries(Object.entries(extraProps).filter(([_k, v]) => typeof v !== 'undefined')));
 
   const dispatch = createEventDispatcher();
 
@@ -27,5 +43,12 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-autofocus -->
-<vscode-checkbox on:change={handleChecked} on:focus on:blur on:input {checked} {...props}><slot /></vscode-checkbox>
+<!-- svelte-ignore a11y_autofocus -->
+<vscode-checkbox
+  onchange={handleChecked}
+  onfocus={bubble('focus')}
+  onblur={bubble('blur')}
+  oninput={bubble('input')}
+  {checked}
+  {...itemProps}>{@render children?.()}</vscode-checkbox
+>

packages/webview-ui/src/components/VscodeLink.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  const dispatch = createEventDispatcher();
-
-  export let href: string;
-
-  function click(e: Event) {
-    return dispatch('click', e);
+  interface Props {
+    href: string;
+    children?: import('svelte').Snippet;
+    click?: (e: Event) => void;
   }
+
+  let { href, children, click }: Props = $props();
 </script>
 
-<!-- svelte-ignore a11y-autofocus -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<vscode-link {href} on:click={click}>
-  <slot />
+<!-- svelte-ignore a11y_autofocus -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<vscode-link {href} onclick={click}>
+  {@render children?.()}
 </vscode-link>

packages/webview-ui/src/components/VscodeTextField.svelte

@@ -1,33 +1,58 @@
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$props` rune but there's already a variable named props.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
+  import { createBubbler } from 'svelte/legacy';
+
+  const bubble = createBubbler();
   import { createEventDispatcher } from 'svelte';
   import type { TextInputEvent } from '../types';
 
-  /** Determines if the element should receive document focus on page load. */
-  export let autofocus: boolean | undefined = undefined;
-  /** Prevents the user from interacting with the button––it cannot be pressed or focused. */
-  export let disabled: true | undefined = undefined;
-  /** When true, the control will be immutable by user interaction. */
-  export let makeReadonly: boolean | undefined = undefined;
-  /** The string to use as the value of the checkbox when submitting the form */
-  export let value: string | undefined = undefined;
-  /** The maximum number of characters a user can enter. */
-  export let maxlength: number | undefined = undefined;
-  /** The name of the component. */
-  export let name: string | undefined = undefined;
-  /** Sets the placeholder value of the component, generally used to provide a hint to the user. */
-  export let placeholder: string | undefined = undefined;
-  /** Sets the width of the element to a specified number of characters. */
-  export let size: number | undefined = undefined;
-  /** Sets the text field type. */
-  export let inputType: string | undefined = undefined;
-
-  /** Set the focus to this element. */
-  export let focus: boolean | undefined = undefined;
+  interface Props {
+    /** Determines if the element should receive document focus on page load. */
+    autofocus?: boolean | undefined;
+    /** Prevents the user from interacting with the button––it cannot be pressed or focused. */
+    disabled?: true | undefined;
+    /** When true, the control will be immutable by user interaction. */
+    makeReadonly?: boolean | undefined;
+    /** The string to use as the value of the checkbox when submitting the form */
+    value?: string | undefined;
+    /** The maximum number of characters a user can enter. */
+    maxlength?: number | undefined;
+    /** The name of the component. */
+    name?: string | undefined;
+    /** Sets the placeholder value of the component, generally used to provide a hint to the user. */
+    placeholder?: string | undefined;
+    /** Sets the width of the element to a specified number of characters. */
+    size?: number | undefined;
+    /** Sets the text field type. */
+    inputType?: string | undefined;
+    /** Set the focus to this element. */
+    focus?: boolean | undefined;
+    start?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+  }
+
+  let {
+    autofocus = undefined,
+    disabled = undefined,
+    makeReadonly = undefined,
+    value = $bindable(undefined),
+    maxlength = undefined,
+    name = undefined,
+    placeholder = undefined,
+    size = undefined,
+    inputType = undefined,
+    focus = undefined,
+    start,
+    children,
+    end,
+  }: Props = $props();
 
   const dispatch = createEventDispatcher<{ input: TextInputEvent }>();
 
-  $: extraProps = { autofocus, disabled, readonly: makeReadonly, maxlength, name, placeholder, size, type: inputType };
-  $: props = Object.fromEntries(Object.entries(extraProps).filter(([_k, v]) => typeof v !== 'undefined'));
+  let extraProps = $derived({ autofocus, disabled, readonly: makeReadonly, maxlength, name, placeholder, size, type: inputType });
+  let itemProps = $derived(Object.fromEntries(Object.entries(extraProps).filter(([_k, v]) => typeof v !== 'undefined')));
 
   function handleInput(e: TextInputEvent) {
     value = e.target.value;
@@ -45,16 +70,27 @@
     update(useFocus);
     return { update };
   }
+
+  const start_render = $derived(start);
+  const end_render = $derived(end);
 </script>
 
-<!-- svelte-ignore a11y-autofocus -->
-<vscode-text-field {...props} {value} on:input={handleInput} on:change use:init={focus} on:focus on:blur>
-  {#if $$slots.start}
-    <section slot="start"><slot name="start" /></section>
+<!-- svelte-ignore a11y_autofocus -->
+<vscode-text-field
+  {...itemProps}
+  {value}
+  oninput={handleInput}
+  onchange={bubble('change')}
+  use:init={focus}
+  onfocus={bubble('focus')}
+  onblur={bubble('blur')}
+>
+  {#if start}
+    <section slot="start">{@render start_render?.()}</section>
   {/if}
-  <slot />
-  {#if $$slots.end}
-    <section slot="end"><slot name="end" /></section>
+  {@render children?.()}
+  {#if end}
+    <section slot="end">{@render end_render?.()}</section>
   {/if}
 </vscode-text-field>
 

packages/webview-ui/src/main.ts

@@ -1,3 +1,5 @@
+import { mount } from 'svelte';
+
 import App from './App.svelte';
 
 // setLogLevel(LogLevel.debug);
@@ -11,7 +13,7 @@ function getView() {
     }
 }
 
-const app = new App({
+const app = mount(App, {
     target: document.body,
     props: {
         name: 'web world',