Updates component explorer & adopts rspack for fixture serving (#306484)

2026-04-02 00:09:30 +01:00 · 2026-04-01 05:25:14 +02:00
parent eac55d867e
commit b533ee4b6e
19 changed files with 4770 additions and 3868 deletions
--- a/.github/skills/component-fixtures/SKILL.md
+++ b/.github/skills/component-fixtures/SKILL.md
@@ -11,7 +11,7 @@ Use tools `mcp_component-exp_`* to list and screenshot fixtures. If you cannot s

 ## Running Fixtures Locally

-1. Start the component explorer daemon: run the **Launch Component Explorer** task
+1. Start the component explorer server: run the **Component Explorer Server** task
 2. Use the `mcp_component-exp_list_fixtures` tool to see all available fixtures and their URLs
 3. Use the `mcp_component-exp_screenshot` tool to capture screenshots programmatically

--- a/.github/workflows/screenshot-test.yml
+++ b/.github/workflows/screenshot-test.yml
@@ -42,84 +42,89 @@ jobs:
        run: npm ci
        working-directory: build

-      - name: Install build/vite dependencies
-        run: rm -f package-lock.json && npm install
-        working-directory: build/vite
+      - name: Install rspack dependencies
+        run: npm ci
+        working-directory: build/rspack

-      - name: Build vite
-        run: npm run build
-        working-directory: build/vite
+      - name: Transpile source
+        run: npm run transpile-client

      - name: Install Playwright Chromium
        run: npx playwright install chromium

      - name: Capture screenshots
-        run: ./node_modules/.bin/component-explorer screenshot --project ./test/componentFixtures/component-explorer.json
+        run: ./node_modules/.bin/component-explorer render --project ./test/componentFixtures/component-explorer.json

-      - name: Compare screenshots
-        id: compare
-        run: |
-          ./node_modules/.bin/component-explorer screenshot:compare \
-            --project ./test/componentFixtures \
-            --report ./test/componentFixtures/.screenshots/report
-        continue-on-error: true
-
-      - name: Prepare explorer artifact
-        run: |
-          mkdir -p /tmp/explorer-artifact/screenshot-report
-          cp -r build/vite/dist/* /tmp/explorer-artifact/
-          if [ -d test/componentFixtures/.screenshots/report ]; then
-            cp -r test/componentFixtures/.screenshots/report/* /tmp/explorer-artifact/screenshot-report/
-          fi
-
-      - name: Upload explorer artifact
+      - name: Upload screenshots
        uses: actions/upload-artifact@v7
        with:
-          name: component-explorer
-          path: /tmp/explorer-artifact/
+          name: screenshots
+          path: test/componentFixtures/.screenshots/current/

-      - name: Upload screenshot report
-        if: steps.compare.outcome == 'failure'
-        uses: actions/upload-artifact@v7
-        with:
-          name: screenshot-diff
-          path: |
-            test/componentFixtures/.screenshots/current/
-            test/componentFixtures/.screenshots/report/
+      # - name: Compare screenshots
+      #   id: compare
+      #   run: |
+      #     ./node_modules/.bin/component-explorer screenshot:compare \
+      #       --project ./test/componentFixtures \
+      #       --report ./test/componentFixtures/.screenshots/report
+      #   continue-on-error: true

-      - name: Set check title
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          REPORT="test/componentFixtures/.screenshots/report/report.json"
-          STATE="success"
-          if [ -f "$REPORT" ]; then
-            CHANGED=$(node -e "const r = require('./$REPORT'); console.log(r.summary.added + r.summary.removed + r.summary.changed)")
-            TITLE="⚠ ${CHANGED} screenshots changed"
-            BLOCKS_CI=$(node -e "
-              const r = require('./$REPORT');
-              const blocking = Object.entries(r.fixtures).filter(([, f]) =>
-                f.status !== 'unchanged' && (f.labels || []).includes('blocks-ci')
-              );
-              if (blocking.length > 0) {
-                console.log(blocking.map(([name]) => name).join(', '));
-              }
-            ")
-            if [ -n "$BLOCKS_CI" ]; then
-              STATE="failure"
-              TITLE="❌ ${CHANGED} screenshots changed (blocks CI: ${BLOCKS_CI})"
-            fi
-          else
-            TITLE="✅ Screenshots match"
-          fi
+      # - name: Prepare explorer artifact
+      #   run: |
+      #     mkdir -p /tmp/explorer-artifact/screenshot-report
+      #     cp -r build/vite/dist/* /tmp/explorer-artifact/
+      #     if [ -d test/componentFixtures/.screenshots/report ]; then
+      #       cp -r test/componentFixtures/.screenshots/report/* /tmp/explorer-artifact/screenshot-report/
+      #     fi

-          SHA="${{ github.event.pull_request.head.sha || github.sha }}"
-          DETAILS_URL="https://hediet-ghartifactpreview.azurewebsites.net/${{ github.repository }}/run/${{ github.run_id }}/component-explorer/___explorer.html?report=./screenshot-report/report.json&search=changed"
+      # - name: Upload explorer artifact
+      #   uses: actions/upload-artifact@v7
+      #   with:
+      #     name: component-explorer
+      #     path: /tmp/explorer-artifact/

-          gh api "repos/${{ github.repository }}/statuses/$SHA" \
-            --input - <<EOF || echo "::warning::Could not create commit status (expected for fork PRs)"
-          {"state":"$STATE","target_url":"$DETAILS_URL","description":"$TITLE","context":"Component Screenshots"}
-          EOF
+      # - name: Upload screenshot report
+      #   if: steps.compare.outcome == 'failure'
+      #   uses: actions/upload-artifact@v7
+      #   with:
+      #     name: screenshot-diff
+      #     path: |
+      #       test/componentFixtures/.screenshots/current/
+      #       test/componentFixtures/.screenshots/report/
+
+      # - name: Set check title
+      #   env:
+      #     GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      #   run: |
+      #     REPORT="test/componentFixtures/.screenshots/report/report.json"
+      #     STATE="success"
+      #     if [ -f "$REPORT" ]; then
+      #       CHANGED=$(node -e "const r = require('./$REPORT'); console.log(r.summary.added + r.summary.removed + r.summary.changed)")
+      #       TITLE="⚠ ${CHANGED} screenshots changed"
+      #       BLOCKS_CI=$(node -e "
+      #         const r = require('./$REPORT');
+      #         const blocking = Object.entries(r.fixtures).filter(([, f]) =>
+      #           f.status !== 'unchanged' && (f.labels || []).includes('blocks-ci')
+      #         );
+      #         if (blocking.length > 0) {
+      #           console.log(blocking.map(([name]) => name).join(', '));
+      #         }
+      #       ")
+      #       if [ -n "$BLOCKS_CI" ]; then
+      #         STATE="failure"
+      #         TITLE="❌ ${CHANGED} screenshots changed (blocks CI: ${BLOCKS_CI})"
+      #       fi
+      #     else
+      #       TITLE="✅ Screenshots match"
+      #     fi
+
+      #     SHA="${{ github.event.pull_request.head.sha || github.sha }}"
+      #     DETAILS_URL="https://hediet-ghartifactpreview.azurewebsites.net/${{ github.repository }}/run/${{ github.run_id }}/component-explorer/___explorer.html?report=./screenshot-report/report.json&search=changed"
+
+      #     gh api "repos/${{ github.repository }}/statuses/$SHA" \
+      #       --input - <<EOF || echo "::warning::Could not create commit status (expected for fork PRs)"
+      #     {"state":"$STATE","target_url":"$DETAILS_URL","description":"$TITLE","context":"Component Screenshots"}
+      #     EOF

      # - name: Post PR comment
      #   if: github.event_name == 'pull_request'
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -675,8 +675,8 @@
 			"name": "Component Explorer (Edge)",
 			"type": "msedge",
 			"request": "launch",
-			"url": "${taskVar:componentExplorerUrl}",
-			"preLaunchTask": "Launch Component Explorer",
+			"url": "http://localhost:5337/__explorer",
+			"preLaunchTask": "Component Explorer Server",
 			"presentation": {
 				"group": "1_component_explorer",
 				"order": 4
@@ -686,8 +686,8 @@
 			"name": "Component Explorer (Chrome)",
 			"type": "chrome",
 			"request": "launch",
-			"url": "${taskVar:componentExplorerUrl}",
-			"preLaunchTask": "Launch Component Explorer",
+			"url": "http://localhost:5337/__explorer",
+			"preLaunchTask": "Component Explorer Server",
 			"presentation": {
 				"group": "1_component_explorer",
 				"order": 4
--- a/.vscode/mcp.json
+++ b/.vscode/mcp.json
@@ -11,16 +11,17 @@
 		},
 		"component-explorer": {
 			"type": "stdio",
-			"command": "npx",
-			"cwd": "${workspaceFolder}",
+			"command": "npm",
 			"args": [
+				"exec",
+				"--no",
+				"--",
 				"component-explorer",
 				"mcp",
-				"-c",
+				"-p",
 				"./test/componentFixtures/component-explorer.json",
-				"--no-daemon-autostart",
-				"--no-daemon-hint",
-				"Start the daemon by running the 'Launch Component Explorer' VS Code task (use the run_task tool). When you start the task, try up to 4 times to give the daemon enough time to start."
+				"--use-daemon",
+				"-vv"
 			]
 		}
 	},
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -393,9 +393,9 @@
 			]
 		},
 		{
-			"label": "Launch Component Explorer",
+			"label": "Component Explorer Server",
 			"type": "shell",
-			"command": "npx component-explorer serve -c ./test/componentFixtures/component-explorer.json -vv --kill-if-running",
+			"command": "npx component-explorer serve -p ./test/componentFixtures/component-explorer.json -vv --kill-if-running",
 			"isBackground": true,
 			"inSessions": true,
 			"problemMatcher": {
@@ -408,7 +408,7 @@
 					"column": 3
 				},
 				"background": {
-					"activeOnStart": true,
+					"activeOnStart": false,
 					"beginsPattern": ".*Setting up sessions.*",
 					"endsPattern": "  current: (?<componentExplorerUrl>.*) \\(current\\)"
 				}
@@ -426,6 +426,29 @@
 				"runOn": "worktreeCreated"
 			}
 		},
+		{
+			"label": "Serve Out (rspack)",
+			"type": "npm",
+			"script": "serve-out-rspack",
+			"isBackground": true,
+			"problemMatcher": {
+				"owner": "rspack",
+				"fileLocation": "absolute",
+				"pattern": {
+					"regexp": "^(.+?):(\\d+):(\\d+):\\s+(error|warning)\\s+(.*)$",
+					"file": 1,
+					"line": 2,
+					"column": 3,
+					"severity": 4,
+					"message": 5
+				},
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": ".*compiling.*",
+					"endsPattern": ".*compiled.*successfully.*"
+				}
+			}
+		},
 		{
 			"label": "Echo E2E Status",
 			"type": "shell",
--- a/build/npm/dirs.ts
+++ b/build/npm/dirs.ts
@@ -11,6 +11,7 @@ import { existsSync } from 'fs';
 export const dirs = [
 	'',
 	'build',
+	'build/rspack',
 	'build/vite',
 	'extensions',
 	'extensions/configuration-editing',
--- a/build/rspack/package-lock.json
+++ b/build/rspack/package-lock.json
--- a/build/rspack/package.json
+++ b/build/rspack/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "code-oss-dev-rspack",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "serve-out": "rspack serve --config rspack.serve-out.config.mts"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^1.3.18",
+    "@rspack/core": "^1.3.18",
+    "@vscode/esm-url-webpack-plugin": "^1.0.1-3"
+  },
+  "dependencies": {
+    "@vscode/component-explorer": "^0.2.1-6",
+    "@vscode/component-explorer-webpack-plugin": "^0.3.1-3"
+  }
+}
--- a/build/rspack/rspack.serve-out.config.mts
+++ b/build/rspack/rspack.serve-out.config.mts
@@ -0,0 +1,115 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import type { Configuration } from '@rspack/core';
+import { HtmlRspackPlugin, rspack } from '@rspack/core';
+import { ComponentExplorerPlugin } from '@vscode/component-explorer-webpack-plugin';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+import net from 'net';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const repoRoot = path.resolve(__dirname, '../..');
+
+function findFreePort(startPort: number): Promise<number> {
+	return new Promise(resolve => {
+		const server = net.createServer();
+		server.listen(startPort, 'localhost', () => {
+			server.close(() => resolve(startPort));
+		});
+		server.on('error', () => resolve(findFreePort(startPort + 1)));
+	});
+}
+
+const port = await findFreePort(5123);
+
+export default {
+	context: repoRoot,
+	mode: 'development',
+	target: 'web',
+	entry: {
+		workbench: path.join(repoRoot, 'out', 'vs', 'code', 'browser', 'workbench', 'workbench.js'),
+	},
+	output: {
+		path: path.join(repoRoot, '.build', 'rspack-serve-out'),
+		filename: 'bundled/[name].js',
+		chunkFilename: 'bundled/[name].js',
+		assetModuleFilename: 'bundled/assets/[name][ext][query]',
+		publicPath: '/',
+		clean: true,
+	},
+	experiments: {
+		css: true,
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				type: 'css',
+			},
+			{
+				test: /\.ttf$/,
+				type: 'asset/resource',
+			},
+		],
+	},
+	plugins: [
+		new ComponentExplorerPlugin({
+			include: 'out/**/*.fixture.js',
+		}),
+		new rspack.NormalModuleReplacementPlugin(/\.css$/, resource => {
+			if (!resource.request.startsWith('.')) {
+				return;
+			}
+
+			const requestedPath = path.resolve(resource.context, resource.request);
+			const outVsSegment = `${path.sep}out${path.sep}vs${path.sep}`;
+			const srcVsSegment = `${path.sep}src${path.sep}vs${path.sep}`;
+
+			if (!requestedPath.includes(outVsSegment) || fs.existsSync(requestedPath)) {
+				return;
+			}
+
+			const sourceCssPath = requestedPath.replace(outVsSegment, srcVsSegment);
+			if (sourceCssPath !== requestedPath && fs.existsSync(sourceCssPath)) {
+				resource.request = sourceCssPath;
+			}
+		}),
+		new HtmlRspackPlugin({
+			filename: 'index.html',
+			template: path.join(__dirname, 'workbench-rspack.html'),
+			chunks: ['workbench'],
+		}),
+	],
+	lazyCompilation: false,
+	devServer: {
+		host: 'localhost',
+		port,
+		hot: 'only',
+		liveReload: false,
+		compress: false,
+		headers: {
+			'Access-Control-Allow-Origin': '*',
+		},
+		devMiddleware: {
+			writeToDisk: false,
+		},
+		static: [
+			{
+				directory: repoRoot,
+				publicPath: '/',
+				watch: false,
+			},
+		],
+		client: {
+			overlay: false,
+		},
+		allowedHosts: 'all',
+	},
+	watchOptions: {
+		// Poll the out/ directory since it's gitignored and may be excluded by default
+		ignored: /node_modules/,
+	},
+} satisfies Configuration;
--- a/build/rspack/workbench-rspack.html
+++ b/build/rspack/workbench-rspack.html
@@ -0,0 +1,18 @@
+<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta id="vscode-workbench-web-configuration" data-settings="{&quot;workspaceUri&quot;:{&quot;$mid&quot;:1,&quot;path&quot;:&quot;/default.code-workspace&quot;,&quot;scheme&quot;:&quot;tmp&quot;},&quot;productConfiguration&quot;:{&quot;enableTelemetry&quot;:false,&quot;extensionsGallery&quot;:{&quot;nlsBaseUrl&quot;:&quot;https://www.vscode-unpkg.net/_lp/&quot;,&quot;serviceUrl&quot;:&quot;https://marketplace.visualstudio.com/_apis/public/gallery&quot;,&quot;searchUrl&quot;:&quot;https://marketplace.visualstudio.com/_apis/public/gallery/searchrelevancy/extensionquery&quot;,&quot;servicePPEUrl&quot;:&quot;https://marketplace.vsallin.net/_apis/public/gallery&quot;,&quot;cacheUrl&quot;:&quot;https://vscode.blob.core.windows.net/gallery/index&quot;,&quot;itemUrl&quot;:&quot;https://marketplace.visualstudio.com/items&quot;,&quot;publisherUrl&quot;:&quot;https://marketplace.visualstudio.com/publishers&quot;,&quot;resourceUrlTemplate&quot;:&quot;https://{publisher}.vscode-unpkg.net/{publisher}/{name}/{version}/{path}&quot;,&quot;controlUrl&quot;:&quot;https://az764295.vo.msecnd.net/extensions/marketplace.json&quot;},&quot;configurationSync.store&quot;:{&quot;url&quot;:&quot;https://vscode-sync-insiders.trafficmanager.net/&quot;,&quot;stableUrl&quot;:&quot;https://vscode-sync.trafficmanager.net/&quot;,&quot;insidersUrl&quot;:&quot;https://vscode-sync-insiders.trafficmanager.net/&quot;,&quot;canSwitch&quot;:true,&quot;authenticationProviders&quot;:{&quot;github&quot;:{&quot;scopes&quot;:[&quot;user:email&quot;]},&quot;microsoft&quot;:{&quot;scopes&quot;:[&quot;openid&quot;,&quot;profile&quot;,&quot;email&quot;,&quot;offline_access&quot;]}}},&quot;enableSyncingProfiles&quot;:true,&quot;editSessions.store&quot;:{&quot;url&quot;:&quot;https://vscode-sync.trafficmanager.net/&quot;,&quot;authenticationProviders&quot;:{&quot;microsoft&quot;:{&quot;scopes&quot;:[&quot;openid&quot;,&quot;profile&quot;,&quot;email&quot;,&quot;offline_access&quot;]},&quot;github&quot;:{&quot;scopes&quot;:[&quot;user:email&quot;]}}},&quot;linkProtectionTrustedDomains&quot;:[&quot;https://*.visualstudio.com&quot;,&quot;https://*.microsoft.com&quot;,&quot;https://aka.ms&quot;,&quot;https://*.gallerycdn.vsassets.io&quot;,&quot;https://*.github.com&quot;,&quot;https://login.microsoftonline.com&quot;,&quot;https://*.vscode.dev&quot;,&quot;https://*.github.dev&quot;,&quot;https://gh.io&quot;],&quot;trustedExtensionAuthAccess&quot;:[&quot;vscode.git&quot;,&quot;vscode.github&quot;,&quot;ms-vscode.remote-repositories&quot;,&quot;github.remotehub&quot;,&quot;ms-vscode.azure-repos&quot;,&quot;ms-vscode.remote-server&quot;,&quot;github.vscode-pull-request-github&quot;,&quot;github.codespaces&quot;,&quot;ms-vsliveshare.vsliveshare&quot;,&quot;github.copilot&quot;,&quot;github.copilot-chat&quot;],&quot;webEndpointUrlTemplate&quot;:&quot;http://{{uuid}}.localhost:8080/static/sources&quot;,&quot;webviewContentExternalBaseUrlTemplate&quot;:&quot;http://{{uuid}}.localhost:8080/static/sources/out/vs/workbench/contrib/webview/browser/pre/&quot;}}">
+
+		<!-- Builtin Extensions -->
+		<meta id="vscode-workbench-builtin-extensions" data-settings="[]">
+	</head>
+
+	<body aria-label="">
+		<!-- Startup (do not modify order of script tags!) -->
+		<script>
+			globalThis._VSCODE_FILE_ROOT = 'http://localhost:5199/out/';
+		</script>
+	</body>
+</html>
--- a/build/vite/package-lock.json
+++ b/build/vite/package-lock.json
--- a/build/vite/package.json
+++ b/build/vite/package.json
@@ -9,8 +9,8 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "@vscode/component-explorer": "^0.1.1-24",
-    "@vscode/component-explorer-vite-plugin": "^0.1.1-24",
+    "@vscode/component-explorer": "^0.2.1-6",
+    "@vscode/component-explorer-vite-plugin": "^0.2.1-5",
    "@vscode/rollup-plugin-esm-url": "^1.0.1-1",
    "rollup": "*",
    "vite": "npm:rolldown-vite@latest"
--- a/build/vite/style.css
+++ b/build/vite/style.css
@@ -8,8 +8,12 @@
 	border: 1px solid black;
 }

+/*
+Disabled because of rspack
+
@font-face {
 	font-family: "codicon";
 	font-display: block;
 	src: url("~@vscode/codicons/dist/codicon.ttf") format("truetype");
 }
+*/
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
    "web": "echo 'npm run web' is replaced by './scripts/code-server' or './scripts/code-web'",
    "compile-cli": "npm run gulp compile-cli",
    "compile-web": "npm run gulp compile-web",
+    "serve-out-rspack": "cd build/rspack && npx rspack serve --config rspack.serve-out.config.mts",
    "watch-web": "npm run gulp watch-web",
    "watch-cli": "npm run gulp watch-cli",
    "eslint": "node build/eslint.ts",
@@ -76,9 +77,9 @@
    "extensions-ci-pr": "npm run gulp extensions-ci-pr",
    "perf": "node scripts/code-perf.js",
    "update-build-ts-version": "npm install -D typescript@next && npm install -D @typescript/native-preview && (cd build && npm run typecheck)",
-    "install-local-component-explorer": "npm install ../vscode-packages/js-component-explorer/dist/vscode-component-explorer-0.1.0.tgz ../vscode-packages/js-component-explorer/dist/vscode-component-explorer-cli-0.1.0.tgz --no-save && cd build/vite && npm install ../../../vscode-packages/js-component-explorer/dist/vscode-component-explorer-vite-plugin-0.1.0.tgz --no-save",
-    "symlink-local-component-explorer": "npm install ../vscode-packages/js-component-explorer/packages/explorer ../vscode-packages/js-component-explorer/packages/cli --no-save && cd build/vite && npm install ../../../vscode-packages/js-component-explorer/packages/vite-plugin ../../../vscode-packages/js-component-explorer/packages/explorer --no-save",
-    "install-latest-component-explorer": "npm install @vscode/component-explorer@next @vscode/component-explorer-cli@next && cd build/vite && npm install @vscode/component-explorer-vite-plugin@next && npm install @vscode/component-explorer@next"
+    "install-local-component-explorer": "npm install ../vscode-packages/js-component-explorer/dist/vscode-component-explorer-0.1.0.tgz ../vscode-packages/js-component-explorer/dist/vscode-component-explorer-cli-0.1.0.tgz --no-save && cd build/rspack && npm install ../../../vscode-packages/js-component-explorer/dist/vscode-component-explorer-webpack-plugin-0.1.0.tgz --no-save && cd ../vite && npm install ../../../vscode-packages/js-component-explorer/dist/vscode-component-explorer-vite-plugin-0.1.0.tgz --no-save",
+    "symlink-local-component-explorer": "npm install ../vscode-packages/js-component-explorer/packages/explorer ../vscode-packages/js-component-explorer/packages/cli --no-save && cd build/rspack && npm install ../../../vscode-packages/js-component-explorer/packages/webpack-plugin ../../../vscode-packages/js-component-explorer/packages/explorer --no-save && cd ../vite && npm install ../../../vscode-packages/js-component-explorer/packages/vite-plugin ../../../vscode-packages/js-component-explorer/packages/explorer --no-save",
+    "install-latest-component-explorer": "npm install @vscode/component-explorer@next @vscode/component-explorer-cli@next && cd build/rspack && npm install @vscode/component-explorer-webpack-plugin@next @vscode/component-explorer@next && cd ../vite && npm install @vscode/component-explorer-vite-plugin@next @vscode/component-explorer@next"
  },
  "dependencies": {
    "@anthropic-ai/sandbox-runtime": "0.0.42",
@@ -159,8 +160,8 @@
    "@types/yazl": "^2.4.2",
    "@typescript-eslint/utils": "^8.45.0",
    "@typescript/native-preview": "^7.0.0-dev.20260306",
-    "@vscode/component-explorer": "^0.1.1-24",
-    "@vscode/component-explorer-cli": "^0.1.1-20",
+    "@vscode/component-explorer": "^0.2.1-6",
+    "@vscode/component-explorer-cli": "^0.2.1-5",
    "@vscode/gulp-electron": "1.41.0",
    "@vscode/l10n-dev": "0.0.35",
    "@vscode/telemetry-extractor": "^1.20.2",
--- a/src/vs/amdX.ts
+++ b/src/vs/amdX.ts
@@ -171,15 +171,15 @@ class AMDModuleImporter {
 		if (this._amdPolicy) {
 			scriptSrc = this._amdPolicy.createScriptURL(scriptSrc) as unknown as string;
 		}
-		await import(/* @vite-ignore */ scriptSrc);
+		await import(/* webpackIgnore: true */ /* @vite-ignore */ scriptSrc);
 		return this._defineCalls.pop();
 	}

 	private async _nodeJSLoadScript(scriptSrc: string): Promise<DefineCall | undefined> {
 		try {
-			const fs = (await import(/* @vite-ignore */ `${'fs'}`)).default;
-			const vm = (await import(/* @vite-ignore */ `${'vm'}`)).default;
-			const module = (await import(/* @vite-ignore */ `${'module'}`)).default;
+			const fs = (await import(/* webpackIgnore: true */ /* @vite-ignore */ `${'fs'}`)).default;
+			const vm = (await import(/* webpackIgnore: true */ /* @vite-ignore */ `${'vm'}`)).default;
+			const module = (await import(/* webpackIgnore: true */ /* @vite-ignore */ `${'module'}`)).default;

 			const filePath = URI.parse(scriptSrc).fsPath;
 			const content = fs.readFileSync(filePath).toString();
--- a/src/vs/workbench/services/keybinding/browser/keyboardLayoutService.ts
+++ b/src/vs/workbench/services/keybinding/browser/keyboardLayoutService.ts
@@ -456,7 +456,7 @@ export class BrowserKeyboardMapperFactory extends BrowserKeyboardMapperFactoryBa

 		const platform = isWindows ? 'win' : isMacintosh ? 'darwin' : 'linux';

-		import(FileAccess.asBrowserUri(`vs/workbench/services/keybinding/browser/keyboardLayouts/layout.contribution.${platform}.js` satisfies AppResourcePath).path).then((m) => {
+		import(/* webpackIgnore: true */FileAccess.asBrowserUri(`vs/workbench/services/keybinding/browser/keyboardLayouts/layout.contribution.${platform}.js` satisfies AppResourcePath).path).then((m) => {
 			const keymapInfos: IKeymapInfo[] = m.KeyboardLayoutContribution.INSTANCE.layoutInfos;
 			this._keymapInfos.push(...keymapInfos.map(info => (new KeymapInfo(info.layout, info.secondaryLayouts, info.mapping, info.isUserKeyboardLayout))));
 			this._mru = this._keymapInfos;
--- a/src/vs/workbench/test/browser/componentFixtures/fixtureUtils.ts
+++ b/src/vs/workbench/test/browser/componentFixtures/fixtureUtils.ts
@@ -539,7 +539,6 @@ export function defineComponentFixture(options: ComponentFixtureOptions): Themed
 	const createFixture = (theme: typeof darkTheme | typeof lightTheme) => defineFixture({
 		isolation: 'none',
 		displayMode: { type: 'component' },
-		properties: [],
 		background: theme === darkTheme ? 'dark' : 'light',
 		render: (container: HTMLElement) => {
 			const disposableStore = new DisposableStore();
--- a/test/componentFixtures/component-explorer.json
+++ b/test/componentFixtures/component-explorer.json
@@ -15,12 +15,13 @@
 	"redirection": {
 		"port": 5337
 	},
-	"viteConfig": "../../build/vite/vite.config.ts",
-	"vite": {
-		"hmr": {
-			"allowedPaths": [
-				"*.css"
-			]
-		}
+	"server": {
+		"type": "http",
+		"cmd": "npm run serve-out-rspack",
+		"cwd": "../../",
+		"wait": {
+			"stderr": "Loopback: http://localhost:(?<port>\\d+)/,"
+		},
+		"url": "http://localhost:${var:port}"
 	}
 }