1- import { extensionContext , useCommand } from 'reactive-vscode' ;
1+ import { useCommand } from 'reactive-vscode' ;
22import * as vscode from 'vscode' ;
33
4+ const welcomeVersion = '3.0.6' ;
5+
46let panel : vscode . WebviewPanel | undefined ;
57
6- export function activate ( ) {
8+ export function activate ( context : vscode . ExtensionContext ) {
79 useCommand ( 'vue.welcome' , ( ) => {
810 if ( panel ) {
911 panel . reveal ( vscode . ViewColumn . One ) ;
@@ -17,24 +19,34 @@ export function activate() {
1719 { enableScripts : true } ,
1820 ) ;
1921
20- panel . webview . html = getWelcomeHtml ( ) ;
22+ panel . webview . html = getWelcomeHtml ( context ) ;
2123 panel . webview . onDidReceiveMessage ( message => {
2224 switch ( message . command ) {
2325 case 'verifySponsor' :
2426 vscode . commands . executeCommand ( 'vue.action.verify' ) ;
2527 break ;
28+ case 'toggleShowUpdates' :
29+ context . globalState . update ( 'vue.showUpdates' , message . value ) ;
30+ break ;
2631 }
2732 } ) ;
2833
2934 panel . onDidDispose ( ( ) => {
3035 panel = undefined ;
3136 } ) ;
3237 } ) ;
33- }
3438
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+ }
3747
48+ function getWelcomeHtml ( context : vscode . ExtensionContext ) {
49+ const version = context . extension . packageJSON . version ;
3850 return /* HTML */ `
3951<!DOCTYPE html>
4052<html lang="en">
@@ -48,6 +60,9 @@ function getWelcomeHtml() {
4860 function verifySponsor() {
4961 vscode.postMessage({ command: 'verifySponsor' });
5062 }
63+ function toggleShowUpdates(value) {
64+ vscode.postMessage({ command: 'toggleShowUpdates', value });
65+ }
5166 </script>
5267 <style>
5368 body {
@@ -319,8 +334,40 @@ function getWelcomeHtml() {
319334 </header>
320335 <hr>
321336
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+
323346 <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+
324371 <h3>3.0.2</h3>
325372 <ul style="margin: 0; padding-left: 1.25rem;">
326373 <li>🚀 Improve memory usage in extreme cases</li>
@@ -343,6 +390,7 @@ function getWelcomeHtml() {
343390 </div>
344391 </div>
345392 <br>
393+
346394 <h3>3.0.0</h3>
347395 <ul style="margin: 0; padding-left: 1.25rem;">
348396 <li>🚀 Significantly improved Hybrid Mode stability</li>
@@ -418,7 +466,7 @@ function getWelcomeHtml() {
418466 </div>
419467 </div>
420468
421- <h2>💎 Premium Features</h2>
469+ <h2>🚀 Premium Features</h2>
422470 <div class="features" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 1.5rem 0;">
423471 <div class="feature">
424472 <div class="feature-icon">🧩</div>
@@ -432,7 +480,7 @@ function getWelcomeHtml() {
432480 </div>
433481 <div class="feature">
434482 <div class="feature-icon">🧩</div>
435- <h4>Reactivity Visualization 🌟🌟🌟🌟 </h4>
483+ <h4>Reactivity Visualization 🌟🌟🌟</h4>
436484 <p>Visualize Vue's reactivity system in component scripts</p>
437485 </div>
438486 <div class="feature">
0 commit comments