Hot Reload

[bukowa]

Extension/feature description

After running example following the given README.md:

# Copy sample extension locally
npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-vue hello-world

# Navigate into sample directory
cd hello-world

# Install dependencies for both the extension and webview UI source code
npm run install:all

# Build webview UI source code
npm run build:webview

# Open sample in VS Code
code .

1. When I press F5 there is no hot reload; yes there is a new task npm run watch but it doesn't care about changes to webview-ui so extension is not reloaded.

2. Even when the extension is reloaded the webview in vscode won't reflect any changes without opening the Hello World command; it would be cool to auto-reload this also.

Use case

Pleasantly developing extensions.

[bukowa]

So vscode uses this task from .vscode/tasks.json when you press F5:

// tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "watch",
      "problemMatcher": "$tsc-watch",
      "isBackground": true,
      "presentation": {
        "reveal": "never"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

Because it has kind: build and default: true that is defaultBuildTask

// launch.json
{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Run Extension",
			"type": "extensionHost",
			"request": "launch",
			"args": [
				"--extensionDevelopmentPath=${workspaceFolder}"
			],
			"outFiles": [
				"${workspaceFolder}/out/**/*.js"
			],
			"preLaunchTask": "${defaultBuildTask}"
		},

But webview-ui is excluded.

//tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "out",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "rootDir": "src",
    "strict": true
  },
  "exclude": ["node_modules", ".vscode-test", "webview-ui"]
}

microsoft/TypeScript#41224

For me the solution is to vite build --watch in the webview-ui dir and in the vscode there's a command palette Developer: Reload Webviews - I wonder how to execute that command on changes?

[bukowa]

As mentioned here it's best (if possible) to work directly with the Vite server. In my case I hooked some data directly into Vue (data that is normally acquired from vscode by reading files) via vite plugins:

import type { UserConfig } from "vite";
import * as path from "node:path";
import { parseMods } from "../src/mod";

export default function customPlugin() {
  return {
    name: 'vite-plugin-custom',
    config(config: UserConfig, { command }: { command: 'build' | 'serve' }) {
      if (command === 'serve') {
        let modDir = path.join(__dirname, "../example/mod")
        let mods = parseMods(modDir)
        config.define = {
          ...config.define,
          __DEV_MODS__: mods,
        };
      }
    }
  };
}

import  customPlugin  from './vite-plugin.custom'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), customPlugin()],

  data() {
    return {
      mods: __DEV_MODS__,
    };
  },