Merge branch 'main' into fix/328520-turn-changes-preview-icon

Author: cipheraxat

.github/dependabot.yml

@@ -14,5 +14,7 @@ updates:
     directory: "/extensions/markdown-language-features"
     schedule:
       interval: "daily"
+      time: "16:00"
+      timezone: "America/Los_Angeles"
     allow:
       - dependency-name: "@vscode/markdown-editor"

.github/instructions/css-best-practices.instructions.md

@@ -8,3 +8,4 @@ applyTo: "**/*.css"
 ## Selectors
 
 - Avoid `:has()` selectors. Because their result depends on descendant state, DOM mutations can invalidate styles on ancestors and cause expensive style recalculation, especially when selectors are broadly scoped. Instead, represent the state explicitly with a class or data attribute on the smallest container you own, and scope selectors to that marker. Add and remove the marker together with the state it represents.
+- Never match the `class` attribute by substring (`[class*="…"]`, `[class^="…"]`, `[class$="…"]`). A single such selector anywhere in the workbench stylesheet defeats Blink's per-class invalidation: every `classList` change then forces a style recalculation for that element, even when no rule references the class that changed. Measured on a 3.7k-node workbench, the ten `[class*="monaco-decoration-itemColor"]` selectors in the Modern UI tab styles alone made a full style recalculation 2.4x slower. When a class carries a generated suffix, have the code that applies it also set a stable marker class (see `DECORATION_LABEL_COLOR_CLASS`) and match that instead.

.vscode-test.js

@@ -57,6 +57,11 @@ const extensions = [
 		workspaceFolder: path.join(os.tmpdir(), `confeditout-${Math.floor(Math.random() * 100000)}`),
 		mocha: { timeout: 60_000 }
 	},
+	{
+		label: 'npm',
+		workspaceFolder: path.join(os.tmpdir(), `npmout-${Math.floor(Math.random() * 100000)}`),
+		mocha: { timeout: 60_000 }
+	},
 	{
 		label: 'github-authentication',
 		workspaceFolder: path.join(os.tmpdir(), `msft-auth-${Math.floor(Math.random() * 100000)}`),

extensions/npm/src/features/npmViewParser.ts

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export interface ViewPackageInfo {
+	description: string;
+	version?: string;
+	time?: string;
+	homepage?: string;
+	installedVersion?: string;
+}
+
+export interface NpmViewRecord {
+	description?: string;
+	version?: string;
+	homepage?: string;
+	time?: { [version: string]: string };
+	'dist-tags.latest'?: string;
+}
+
+/**
+ * Parses the output of `npm view --json`. npm 12+ always returns an array `[{...}]`,
+ * even for a single package, while older versions return the object directly.
+ */
+export function parseNpmViewOutput(stdout: string): ViewPackageInfo | undefined {
+	try {
+		const parsed = JSON.parse(stdout) as NpmViewRecord | NpmViewRecord[];
+		const content = Array.isArray(parsed) ? parsed[0] : parsed;
+		const version = content['dist-tags.latest'] || content.version;
+		return {
+			description: content.description ?? '',
+			version,
+			time: version ? content.time?.[version] : undefined,
+			homepage: content.homepage
+		};
+	} catch (e) {
+		return undefined;
+	}
+}

extensions/npm/src/features/packageJSONContribution.ts

@@ -11,6 +11,7 @@ import { Location } from 'jsonc-parser';
 import type * as cp from 'child_process';
 import { dirname } from 'path';
 import { fromNow } from './date';
+import { parseNpmViewOutput, ViewPackageInfo } from './npmViewParser';
 
 const LIMIT = 40;
 
@@ -325,21 +326,7 @@ export class PackageJSONContribution implements IJSONContribution {
 	private async npmView(npmCommandPath: string, pack: string, resource: Uri | undefined): Promise<ViewPackageInfo | undefined> {
 		const args = ['view', '--json', '--', pack, 'description', 'dist-tags.latest', 'homepage', 'version', 'time'];
 		const stdout = await this.runNpmCommand(npmCommandPath, args, resource);
-		if (stdout) {
-			try {
-				const content = JSON.parse(stdout);
-				const version = content['dist-tags.latest'] || content['version'];
-				return {
-					description: content['description'],
-					version,
-					time: content.time?.[version],
-					homepage: content['homepage']
-				};
-			} catch (e) {
-				// ignore
-			}
-		}
-		return undefined;
+		return stdout ? parseNpmViewOutput(stdout) : undefined;
 	}
 
 	private async npmjsView(pack: string): Promise<ViewPackageInfo | undefined> {
@@ -429,11 +416,3 @@ interface SearchPackageInfo {
 	version?: string;
 	links?: { homepage?: string };
 }
-
-interface ViewPackageInfo {
-	description: string;
-	version?: string;
-	time?: string;
-	homepage?: string;
-	installedVersion?: string;
-}

extensions/npm/src/test/index.ts

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as path from 'path';
+import * as testRunner from '../../../../test/integration/electron/testrunner';
+
+const options: import('mocha').MochaOptions = {
+	ui: 'tdd',
+	color: true,
+	timeout: 60000
+};
+
+// These integration tests is being run in multiple environments (electron, web, remote)
+// so we need to set the suite name based on the environment as the suite name is used
+// for the test results file name
+let suite = '';
+if (process.env.VSCODE_BROWSER) {
+	suite = `${process.env.VSCODE_BROWSER} Browser Integration Npm Tests`;
+} else if (process.env.REMOTE_VSCODE) {
+	suite = 'Remote Integration Npm Tests';
+} else {
+	suite = 'Integration Npm Tests';
+}
+
+if (process.env.BUILD_ARTIFACTSTAGINGDIRECTORY || process.env.GITHUB_WORKSPACE) {
+	options.reporter = 'mocha-multi-reporters';
+	options.reporterOptions = {
+		reporterEnabled: 'spec, mocha-junit-reporter',
+		mochaJunitReporterReporterOptions: {
+			testsuitesTitle: `${suite} ${process.platform}`,
+			mochaFile: path.join(
+				process.env.BUILD_ARTIFACTSTAGINGDIRECTORY || process.env.GITHUB_WORKSPACE || __dirname,
+				`test-results/${process.platform}-${process.arch}-${suite.toLowerCase().replace(/[^\w]/g, '-')}-results.xml`)
+		}
+	};
+}
+
+testRunner.configure(options);
+
+export = testRunner;

extensions/npm/src/test/npmViewParser.test.ts

@@ -0,0 +1,105 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as assert from 'assert';
+import { NpmViewRecord, parseNpmViewOutput } from '../features/npmViewParser';
+
+const npmViewOutput: NpmViewRecord = {
+	description: 'React is a JavaScript library for building user interfaces.',
+	'dist-tags.latest': '19.1.0',
+	homepage: 'https://react.dev/',
+	version: '19.1.0',
+	time: {
+		'19.1.0': '2025-05-20T20:58:48.397Z',
+		'0.0.0-experimental-98e8ed76': '2026-07-25T21:39:01.123Z'
+	}
+};
+
+suite('npmViewParser', () => {
+
+	test('parses object output (npm <= 11)', () => {
+		const info = parseNpmViewOutput(JSON.stringify(npmViewOutput));
+		assert.ok(info);
+		assert.strictEqual(info!.description, 'React is a JavaScript library for building user interfaces.');
+		assert.strictEqual(info!.version, '19.1.0');
+		assert.strictEqual(info!.time, '2025-05-20T20:58:48.397Z');
+		assert.strictEqual(info!.homepage, 'https://react.dev/');
+	});
+
+	test('parses array output (npm 12+)', () => {
+		const info = parseNpmViewOutput(JSON.stringify([npmViewOutput]));
+		assert.ok(info);
+		assert.strictEqual(info!.description, 'React is a JavaScript library for building user interfaces.');
+		assert.strictEqual(info!.version, '19.1.0');
+		assert.strictEqual(info!.time, '2025-05-20T20:58:48.397Z');
+		assert.strictEqual(info!.homepage, 'https://react.dev/');
+	});
+
+	test('prefers dist-tags.latest over version', () => {
+		const info = parseNpmViewOutput(JSON.stringify({
+			'dist-tags.latest': '19.1.0',
+			version: '0.0.0-experimental-98e8ed76',
+			time: {
+				'19.1.0': '2025-05-20T20:58:48.397Z',
+				'0.0.0-experimental-98e8ed76': '2026-07-25T21:39:01.123Z'
+			}
+		}));
+		assert.ok(info);
+		assert.strictEqual(info!.version, '19.1.0');
+		assert.strictEqual(info!.time, '2025-05-20T20:58:48.397Z');
+		assert.notStrictEqual(info!.time, '2026-07-25T21:39:01.123Z');
+	});
+
+	test('uses the first element when the array contains multiple packages', () => {
+		const first = { ...npmViewOutput, description: 'first package' };
+		const second = { ...npmViewOutput, description: 'second package' };
+		const info = parseNpmViewOutput(JSON.stringify([first, second]));
+		assert.ok(info);
+		assert.strictEqual(info!.description, 'first package');
+	});
+
+	test('falls back to the version field when dist-tags.latest is missing', () => {
+		const info = parseNpmViewOutput(JSON.stringify([
+			{ version: '0.0.0-experimental-98e8ed76', time: { '0.0.0-experimental-98e8ed76': '2026-07-25T21:39:01.123Z' } }
+		]));
+		assert.ok(info);
+		assert.strictEqual(info!.version, '0.0.0-experimental-98e8ed76');
+		assert.strictEqual(info!.time, '2026-07-25T21:39:01.123Z');
+		assert.strictEqual(info!.description, '');
+		assert.strictEqual(info!.homepage, undefined);
+	});
+
+	test('returns undefined version and time when neither field is present', () => {
+		const info = parseNpmViewOutput(JSON.stringify({ description: 'React is a JavaScript library for building user interfaces.' }));
+		assert.ok(info);
+		assert.strictEqual(info!.version, undefined);
+		assert.strictEqual(info!.time, undefined);
+	});
+
+	test('returns empty description when description is missing', () => {
+		const info = parseNpmViewOutput(JSON.stringify({ 'dist-tags.latest': '19.1.0' }));
+		assert.ok(info);
+		assert.strictEqual(info!.description, '');
+		assert.strictEqual(info!.version, '19.1.0');
+	});
+
+	test('returns undefined time when the resolved version has no matching time entry', () => {
+		const info = parseNpmViewOutput(JSON.stringify({ 'dist-tags.latest': '19.1.0', time: { '18.3.1': '2024-04-26T09:39:52.159Z' } }));
+		assert.ok(info);
+		assert.strictEqual(info!.version, '19.1.0');
+		assert.strictEqual(info!.time, undefined);
+	});
+
+	test('returns undefined for invalid JSON', () => {
+		assert.strictEqual(parseNpmViewOutput('not json'), undefined);
+		assert.strictEqual(parseNpmViewOutput('{'), undefined);
+		assert.strictEqual(parseNpmViewOutput(''), undefined);
+	});
+
+	test('returns undefined for non-object output', () => {
+		assert.strictEqual(parseNpmViewOutput('null'), undefined);
+		assert.strictEqual(parseNpmViewOutput('[]'), undefined);
+	});
+});

package-lock.json

@@ -111,7 +111,7 @@
     "@microsoft/mxc-sdk": "0.7.0",
     "@parcel/watcher": "^2.5.6",
     "@types/semver": "^7.5.8",
-    "@vscode/codicons": "^0.0.46-36",
+    "@vscode/codicons": "^0.0.46-37",
     "@vscode/copilot-api": "^0.5.2",
     "@vscode/deviceid": "^0.1.1",
     "@vscode/diff": "0.0.2-7",