Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-02 00:09:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

updates component explorer

Browse Source
This commit is contained in:
Henning Dieterichs
2026-03-11 21:49:09 +01:00
committed by Henning Dieterichs
parent b49670d4a1
commit 5d56633a57
11 changed files with 106 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
.github/workflows/screenshot-test.yml vendored
View File

@@ -54,12 +54,12 @@ jobs:
run: npx playwright install chromium
- name: Capture screenshots
run: npx component-explorer screenshot --project ./test/componentFixtures/component-explorer.json
run: ./node_modules/.bin/component-explorer screenshot --project ./test/componentFixtures/component-explorer.json
- name: Compare screenshots
id: compare
run: |
npx component-explorer screenshot:compare \
./node_modules/.bin/component-explorer screenshot:compare \
--project ./test/componentFixtures \
--report ./test/componentFixtures/.screenshots/report
continue-on-error: true
@@ -92,19 +92,33 @@ jobs:
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"
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":"success","target_url":"$DETAILS_URL","description":"$TITLE","context":"Component Screenshots"}
{"state":"$STATE","target_url":"$DETAILS_URL","description":"$TITLE","context":"Component Screenshots"}
EOF
# - name: Post PR comment

2
.vscode/tasks.json vendored
View File

@@ -386,7 +386,7 @@
{
"label": "Launch Component Explorer",
"type": "shell",
"command": "npx component-explorer serve -c ./test/componentFixtures/component-explorer.json -vv",
"command": "npx component-explorer serve -c ./test/componentFixtures/component-explorer.json -vv --kill-if-running",
"isBackground": true,
"problemMatcher": {
"owner": "component-explorer",

16
build/vite/package-lock.json generated
View File

@@ -8,8 +8,8 @@
"name": "@vscode/sample-source",
"version": "0.0.0",
"devDependencies": {
"@vscode/component-explorer": "^0.1.1-23",
"@vscode/component-explorer-vite-plugin": "^0.1.1-23",
"@vscode/component-explorer": "^0.1.1-24",
"@vscode/component-explorer-vite-plugin": "^0.1.1-24",
"@vscode/rollup-plugin-esm-url": "^1.0.1-1",
"rollup": "*",
"vite": "npm:rolldown-vite@latest"
@@ -1379,9 +1379,9 @@
}
},
"node_modules/@vscode/component-explorer": {
"version": "0.1.1-23",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer/-/component-explorer-0.1.1-23.tgz",
"integrity": "sha512-ocYhB5sG2PS49o1QDKWqjXBmCFJUQVE9JrY2Ug4m6gCuksvvwAJll6F01PfjqOHrfo+vb6OLV9L88/SnuwQvHg==",
"version": "0.1.1-24",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer/-/component-explorer-0.1.1-24.tgz",
"integrity": "sha512-o+uFX1bqD6dvAALx+Y32Gf7FmQehPsjGAI1Bm+5PvaV/++RIqsniM+VXIwqwjtuUvOyAMOz2TEOPYy3Uju//Qw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1391,9 +1391,9 @@
}
},
"node_modules/@vscode/component-explorer-vite-plugin": {
"version": "0.1.1-23",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer-vite-plugin/-/component-explorer-vite-plugin-0.1.1-23.tgz",
"integrity": "sha512-6cqqwvwijYwUoJtp2DW332LbiqKH/hHxDBdHeBR+M3gbacs0OtAl+kJwiPFc/NY0bff7FRqZp+nWtKihHshwFQ==",
"version": "0.1.1-24",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer-vite-plugin/-/component-explorer-vite-plugin-0.1.1-24.tgz",
"integrity": "sha512-XHccBmg4mnIHahBTmoIBaJwvDZM0QOIbDm/qxZAw8Zr1xSfTCRQNBwBAYNrOZe4/XK52N5DLMBmjpFroEtY2WQ==",
"dev": true,
"license": "MIT",
"dependencies": {

4
build/vite/package.json
View File

@@ -9,8 +9,8 @@
"preview": "vite preview"
},
"devDependencies": {
"@vscode/component-explorer": "^0.1.1-23",
"@vscode/component-explorer-vite-plugin": "^0.1.1-23",
"@vscode/component-explorer": "^0.1.1-24",
"@vscode/component-explorer-vite-plugin": "^0.1.1-24",
"@vscode/rollup-plugin-esm-url": "^1.0.1-1",
"rollup": "*",
"vite": "npm:rolldown-vite@latest"

16
package-lock.json generated
View File

@@ -85,8 +85,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-23",
"@vscode/component-explorer-cli": "^0.1.1-19",
"@vscode/component-explorer": "^0.1.1-24",
"@vscode/component-explorer-cli": "^0.1.1-20",
"@vscode/gulp-electron": "1.40.1",
"@vscode/l10n-dev": "0.0.35",
"@vscode/telemetry-extractor": "^1.20.2",
@@ -4154,9 +4154,9 @@
"license": "CC-BY-4.0"
},
"node_modules/@vscode/component-explorer": {
"version": "0.1.1-23",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer/-/component-explorer-0.1.1-23.tgz",
"integrity": "sha512-ocYhB5sG2PS49o1QDKWqjXBmCFJUQVE9JrY2Ug4m6gCuksvvwAJll6F01PfjqOHrfo+vb6OLV9L88/SnuwQvHg==",
"version": "0.1.1-24",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer/-/component-explorer-0.1.1-24.tgz",
"integrity": "sha512-o+uFX1bqD6dvAALx+Y32Gf7FmQehPsjGAI1Bm+5PvaV/++RIqsniM+VXIwqwjtuUvOyAMOz2TEOPYy3Uju//Qw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -4166,9 +4166,9 @@
}
},
"node_modules/@vscode/component-explorer-cli": {
"version": "0.1.1-19",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer-cli/-/component-explorer-cli-0.1.1-19.tgz",
"integrity": "sha512-wAi2BKY+PXSPZ7vPX6PUSvdc6JaAGueEwWREMHXgSvRlud0HQb6kIQzzy0LrVTqYlKOgvz4upX5YWyhj69KUSg==",
"version": "0.1.1-20",
"resolved": "https://registry.npmjs.org/@vscode/component-explorer-cli/-/component-explorer-cli-0.1.1-20.tgz",
"integrity": "sha512-pD/1wujsryCcdEvIaHZCxAyVZSmNl/Cic2+C2MY+PV/gzyRkJs9ek0/vah8oayVMW7d02YB02v4Hhifw2Zj7Hw==",
"dev": true,
"license": "MIT",
"dependencies": {

4
package.json
View File

@@ -155,8 +155,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-23",
"@vscode/component-explorer-cli": "^0.1.1-19",
"@vscode/component-explorer": "^0.1.1-24",
"@vscode/component-explorer-cli": "^0.1.1-20",
"@vscode/gulp-electron": "1.40.1",
"@vscode/l10n-dev": "0.0.35",
"@vscode/telemetry-extractor": "^1.20.2",

2
src/vs/workbench/test/browser/componentFixtures/codeEditor.fixture.ts
View File

@@ -70,7 +70,7 @@ function renderCodeEditor({ container, disposableStore, theme }: ComponentFixtur
export default defineThemedFixtureGroup({ path: 'editor/' }, {
CodeEditor: defineComponentFixture({
labels: { kind: 'screenshot' },
labels: { kind: 'screenshot', blocksCi: true },
render: (context) => renderCodeEditor(context),
}),
});

58
src/vs/workbench/test/browser/componentFixtures/inlineCompletionsExtras.fixture.ts
View File

@@ -19,6 +19,8 @@ import { InlineCompletionsSource, InlineCompletionsState } from '../../../../edi
import { InlineEditItem } from '../../../../editor/contrib/inlineCompletions/browser/model/inlineSuggestionItem.js';
import { TextModelValueReference } from '../../../../editor/contrib/inlineCompletions/browser/model/textModelValueReference.js';
import { JumpToView } from '../../../../editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/jumpToView.js';
import { GutterIndicatorMenuContent } from '../../../../editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorMenu.js';
import { InlineSuggestionGutterMenuData } from '../../../../editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.js';
import { IUserInteractionService, MockUserInteractionService } from '../../../../platform/userInteraction/browser/userInteractionService.js';
import '../../../../editor/contrib/inlineCompletions/browser/hintsWidget/inlineCompletionsHintsWidget.css';
@@ -276,6 +278,58 @@ function createLongDistanceEditor(options: {
controller?.model?.get();
}
function renderGutterMenu({ container, disposableStore, theme }: ComponentFixtureContext): void {
container.style.width = '250px';
container.style.height = '280px';
const instantiationService = createEditorServices(disposableStore, {
colorTheme: theme,
additionalServices: (reg) => {
registerWorkbenchServices(reg);
},
});
const textModel = disposableStore.add(createTextModel(
instantiationService,
'const x = 1;',
URI.parse('inmemory://gutter-menu.ts'),
'typescript'
));
const editor = disposableStore.add(instantiationService.createInstance(
CodeEditorWidget,
document.createElement('div'),
{ minimap: { enabled: false } },
{ contributions: [] } satisfies ICodeEditorWidgetOptions
));
editor.setModel(textModel);
const editorObs = observableCodeEditor(editor);
const menuData = new InlineSuggestionGutterMenuData(
undefined,
'Copilot',
[],
undefined,
undefined,
undefined,
);
const content = disposableStore.add(
instantiationService.createInstance(
GutterIndicatorMenuContent,
editorObs,
menuData,
() => { },
).toDisposableLiveElement()
);
container.style.background = 'var(--vscode-editorHoverWidget-background)';
container.style.border = '2px solid var(--vscode-editorHoverWidget-border)';
container.style.borderRadius = '3px';
container.style.color = 'var(--vscode-editorHoverWidget-foreground)';
container.appendChild(content.element);
}
export default defineThemedFixtureGroup({ path: 'editor/' }, {
HintsToolbar: defineComponentFixture({
labels: { kind: 'screenshot' },
@@ -307,4 +361,8 @@ export default defineThemedFixtureGroup({ path: 'editor/' }, {
await writeFile(outputPath, processed);`,
}),
}),
GutterMenu: defineComponentFixture({
labels: { kind: 'screenshot' },
render: renderGutterMenu,
}),
});

2
src/vs/workbench/test/browser/componentFixtures/suggestWidget.fixture.ts
View File

@@ -34,7 +34,7 @@ interface SuggestFixtureOptions extends ComponentFixtureContext {
editorOptions?: IEditorOptions;
}
async function renderSuggestWidget(options: SuggestFixtureOptions): Promise<void> {
function renderSuggestWidget(options: SuggestFixtureOptions): void {
const { container, disposableStore, theme } = options;
container.style.width = options.width ?? '500px';
container.style.height = options.height ?? '300px';

183
test/componentFixtures/component-explorer-config.schema.json
View File

@@ -1,183 +0,0 @@
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"type": "object",
"properties": {
"screenshotDir": {
"description": "Directory for storing screenshots (default: .screenshots)",
"type": "string"
},
"sessions": {
"minItems": 1,
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Unique session name"
},
"source": {
"anyOf": [
{
"type": "string",
"const": "current"
},
{
"type": "object",
"properties": {
"worktree": {
"type": "object",
"properties": {
"ref": {
"type": "string",
"description": "Git ref (branch, tag, or commit) to check out"
},
"name": {
"description": "Directory name for the worktree (default: component-explorer-baseline)",
"type": "string"
},
"install": {
"anyOf": [
{
"type": "string",
"const": "auto"
},
{
"type": "string",
"const": "npm"
},
{
"type": "string",
"const": "pnpm"
},
{
"type": "string",
"const": "yarn"
},
{
"type": "object",
"properties": {
"command": {
"type": "string",
"description": "Custom install command to run in the worktree"
}
},
"required": [
"command"
],
"additionalProperties": false
},
{
"type": "boolean",
"const": false
}
],
"description": "Dependency install strategy for the worktree"
}
},
"required": [
"ref"
],
"additionalProperties": false,
"description": "Git worktree configuration for a baseline session"
}
},
"required": [
"worktree"
],
"additionalProperties": false
}
],
"description": "Session source: \"current\" for the working tree, or a worktree config for a baseline"
},
"viteConfig": {
"description": "Path to vite config file, relative to this config (overrides top-level viteConfig)",
"type": "string"
}
},
"required": [
"name"
],
"additionalProperties": false,
"description": "A component explorer session"
},
"description": "List of explorer sessions"
},
"compare": {
"type": "object",
"properties": {
"baseline": {
"type": "string",
"description": "Session name to use as the baseline for comparisons"
},
"current": {
"type": "string",
"description": "Session name to use as the current version for comparisons"
}
},
"required": [
"baseline",
"current"
],
"additionalProperties": false,
"description": "Screenshot comparison configuration"
},
"viteConfig": {
"description": "Default vite config file path, relative to this config (default: vite.config.ts)",
"type": "string"
},
"vite": {
"type": "object",
"properties": {
"hmr": {
"type": "object",
"properties": {
"allowedPaths": {
"type": "array",
"items": {
"type": "string"
},
"description": "Glob patterns for files that keep HMR; everything else triggers a full reload"
}
},
"required": [
"allowedPaths"
],
"additionalProperties": false,
"description": "Vite HMR configuration"
}
},
"additionalProperties": false,
"description": "Vite configuration overrides"
},
"redirection": {
"type": "object",
"properties": {
"port": {
"type": "integer",
"minimum": 1,
"maximum": 65535,
"description": "Port for the redirection HTTP server"
},
"host": {
"description": "Host to bind the redirection server to (default: localhost)",
"type": "string"
}
},
"required": [
"port"
],
"additionalProperties": false,
"description": "HTTP redirection server that redirects to the session URL"
},
"$schema": {
"type": "string",
"description": "URL of the JSON Schema for this config file"
}
},
"required": [
"sessions"
],
"additionalProperties": false,
"description": "Component Explorer configuration"
}

8
test/componentFixtures/component-explorer.json
View File

@@ -1,11 +1,17 @@
{
"$schema": "./component-explorer-config.schema.json",
"$schema": "../../node_modules/@vscode/component-explorer-cli/dist/component-explorer-config.schema.json",
"screenshotDir": ".screenshots",
"sessions": [
{
"name": "current"
}
],
"worktree": {
"maxSlots": 1,
"setup": {
"command": "echo 'test'"
}
},
"redirection": {
"port": 5337
},