1
- import { extensionContext , useCommand } from 'reactive-vscode' ;
1
+ import { useCommand } from 'reactive-vscode' ;
2
2
import * as vscode from 'vscode' ;
3
3
4
+ const welcomeVersion = '3.0.6' ;
5
+
4
6
let panel : vscode . WebviewPanel | undefined ;
5
7
6
- export function activate ( ) {
8
+ export function activate ( context : vscode . ExtensionContext ) {
7
9
useCommand ( 'vue.welcome' , ( ) => {
8
10
if ( panel ) {
9
11
panel . reveal ( vscode . ViewColumn . One ) ;
@@ -17,24 +19,34 @@ export function activate() {
17
19
{ enableScripts : true } ,
18
20
) ;
19
21
20
- panel . webview . html = getWelcomeHtml ( ) ;
22
+ panel . webview . html = getWelcomeHtml ( context ) ;
21
23
panel . webview . onDidReceiveMessage ( message => {
22
24
switch ( message . command ) {
23
25
case 'verifySponsor' :
24
26
vscode . commands . executeCommand ( 'vue.action.verify' ) ;
25
27
break ;
28
+ case 'toggleShowUpdates' :
29
+ context . globalState . update ( 'vue.showUpdates' , message . value ) ;
30
+ break ;
26
31
}
27
32
} ) ;
28
33
29
34
panel . onDidDispose ( ( ) => {
30
35
panel = undefined ;
31
36
} ) ;
32
37
} ) ;
33
- }
34
38
35
- function getWelcomeHtml ( ) {
36
- const version = extensionContext . value ?. extension . packageJSON . version ;
39
+ if (
40
+ context . globalState . get ( 'vue.showUpdates' , true )
41
+ && context . globalState . get ( 'vue-welcome' ) !== welcomeVersion
42
+ ) {
43
+ context . globalState . update ( 'vue-welcome' , welcomeVersion ) ;
44
+ vscode . commands . executeCommand ( 'vue.welcome' ) ;
45
+ }
46
+ }
37
47
48
+ function getWelcomeHtml ( context : vscode . ExtensionContext ) {
49
+ const version = context . extension . packageJSON . version ;
38
50
return /* HTML */ `
39
51
<!DOCTYPE html>
40
52
<html lang="en">
@@ -48,6 +60,9 @@ function getWelcomeHtml() {
48
60
function verifySponsor() {
49
61
vscode.postMessage({ command: 'verifySponsor' });
50
62
}
63
+ function toggleShowUpdates(value) {
64
+ vscode.postMessage({ command: 'toggleShowUpdates', value });
65
+ }
51
66
</script>
52
67
<style>
53
68
body {
@@ -319,8 +334,40 @@ function getWelcomeHtml() {
319
334
</header>
320
335
<hr>
321
336
322
- <h2>📣 What's New</h2>
337
+ <div style="display: flex; justify-content: center; margin: 1.5rem 0;">
338
+ <label>
339
+ <input type="checkbox" onchange="toggleShowUpdates(this.checked)" ${
340
+ context . globalState . get ( 'vue.showUpdates' , true ) ? 'checked' : ''
341
+ } >
342
+ <span>Show release notes on every significant update</span>
343
+ </label>
344
+ </div>
345
+
323
346
<div class="card whats-new-card">
347
+ <h3>3.0.6</h3>
348
+ <ul style="margin: 0; padding-left: 1.25rem;">
349
+ <li>✨ The official extension has now been renamed to "Vue.js"</li>
350
+ <li>🚀 Expandable Hovers support for TypeScript (<a href="https://code.visualstudio.com/updates/v1_100#_expandable-hovers-for-javascript-and-typescript-experimental" target="_blank">Learn More</a>)</li>
351
+ <li>🐛 8+ bug fixes</li>
352
+ </ul>
353
+ <div
354
+ style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
355
+ <a href="https://github.com/vuejs/language-tools/releases/tag/v3.0.6" target="_blank"
356
+ style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vscode-textLink-foreground);">
357
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
358
+ <path
359
+ d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
360
+ </svg>
361
+ Full Release Notes
362
+ </a>
363
+ <div style="display: flex; gap: 0.5rem; font-size: 0.9em; color: var(--vscode-descriptionForeground);">
364
+ <span>Released: August 2025</span>
365
+ <span>•</span>
366
+ <span>v3.0.6</span>
367
+ </div>
368
+ </div>
369
+ <br>
370
+
324
371
<h3>3.0.2</h3>
325
372
<ul style="margin: 0; padding-left: 1.25rem;">
326
373
<li>🚀 Improve memory usage in extreme cases</li>
@@ -343,6 +390,7 @@ function getWelcomeHtml() {
343
390
</div>
344
391
</div>
345
392
<br>
393
+
346
394
<h3>3.0.0</h3>
347
395
<ul style="margin: 0; padding-left: 1.25rem;">
348
396
<li>🚀 Significantly improved Hybrid Mode stability</li>
@@ -418,7 +466,7 @@ function getWelcomeHtml() {
418
466
</div>
419
467
</div>
420
468
421
- <h2>💎 Premium Features</h2>
469
+ <h2>🚀 Premium Features</h2>
422
470
<div class="features" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 1.5rem 0;">
423
471
<div class="feature">
424
472
<div class="feature-icon">🧩</div>
@@ -432,7 +480,7 @@ function getWelcomeHtml() {
432
480
</div>
433
481
<div class="feature">
434
482
<div class="feature-icon">🧩</div>
435
- <h4>Reactivity Visualization 🌟🌟🌟🌟 </h4>
483
+ <h4>Reactivity Visualization 🌟🌟🌟</h4>
436
484
<p>Visualize Vue's reactivity system in component scripts</p>
437
485
</div>
438
486
<div class="feature">
0 commit comments