Merge branch 'main' into graphiql-6

Author: trevor-scheer

.changeset/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@2.0.1/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
   "changelog": ["@changesets/changelog-github", { "repo": "graphql/graphiql" }],
   "commit": false,
   "linked": [],
@@ -14,6 +14,10 @@
     "example-monaco-graphql-webpack"
   ],
   "updateInternalDependencies": "patch",
+  "privatePackages": {
+    "version": true,
+    "tag": true
+  },
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }

.changeset/vscode-publish-path-fix.md

@@ -0,0 +1,7 @@
+---
+'vscode-graphql-execution': patch
+'vscode-graphql-syntax': patch
+'vscode-graphql': patch
+---
+
+Burning patch version due to previous release failure.

.github/workflows/pr.yml

@@ -147,7 +147,7 @@ jobs:
             ~/.cache/Cypress
           key: cypress-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@v7
         with:
           install: false
           command: yarn e2e

.github/workflows/release.yml

@@ -31,6 +31,10 @@ jobs:
       # To enable trusted publishing
       id-token: write
 
+    outputs:
+      vscode-published: ${{ steps.vscode.outputs.published }}
+      published-packages: ${{ steps.changesets.outputs.publishedPackages }}
+
     steps:
       - name: Checkout Code
         uses: actions/checkout@v6
@@ -42,7 +46,7 @@ jobs:
           node-version-file: '.node-version'
           cache: yarn
 
-      - run: yarn install --frozen-lockfile --immutable
+      - run: yarn install --immutable
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
@@ -51,8 +55,70 @@ jobs:
           version: yarn ci:version
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
           publish: yarn release
+
+      - name: Note VSCode extension release
+        id: vscode
+        if: ${{ steps.changesets.outputs.published == 'true' && contains(steps.changesets.outputs.publishedPackages, '"name":"vscode-graphql') }}
+        run: echo "published=true" >> "$GITHUB_OUTPUT"
+
+      - name: Build VSCode extension .vsix files
+        if: ${{ steps.vscode.outputs.published == 'true' }}
+        env:
+          PUBLISHED_PACKAGES: ${{ steps.changesets.outputs.publishedPackages }}
+        run: node scripts/release-vscode.mts build
+
+      - name: Attach VSCode .vsix files to GitHub Releases
+        if: ${{ steps.vscode.outputs.published == 'true' }}
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PUBLISHED_PACKAGES: ${{ steps.changesets.outputs.publishedPackages }}
+        run: node scripts/release-vscode.mts attach
+
+      - name: Upload VSCode extension .vsix artifacts
+        if: ${{ steps.vscode.outputs.published == 'true' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: vscode-extensions
+          path: packages/vscode-graphql*/*.vsix
+          if-no-files-found: error
+
+  publish-vscode-extensions:
+    name: Publish to ${{ matrix.registry }}
+    needs: release
+    if: ${{ needs.release.outputs.vscode-published == 'true' }}
+    runs-on: ubuntu-latest
+    permissions: {}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - registry: VSCode Marketplace
+            command: publish-vsce
+          - registry: Open VSX Registry
+            command: publish-ovsx
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.node-version'
+          cache: yarn
+
+      - run: yarn install --immutable
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: vscode-extensions
+          # `upload-artifact` strips the path prefix up to the first wildcard
+          # segment, so the artifact contains `vscode-graphql*/*.vsix` rather
+          # than `packages/vscode-graphql*/*.vsix`. Restore the `packages/`
+          # prefix here so the layout lines up with `vsixPath('vsix', …)` in
+          # the script.
+          path: vsix/packages
+
+      - name: Publish
         env:
-          # for vscode marketplace, see https://github.com/microsoft/vscode-vsce/blob/194d59b975523696362ead891dc0f3ddd277b3bd/README.md#linux
           VSCE_PAT: ${{ secrets.VSCE_PAT }}
-          # for ovsx, see https://github.com/eclipse/openvsx/blob/master/cli/README.md#publish-extensions
           OVSX_PAT: ${{ secrets.OPEN_VSX_TOKEN }}
+          PUBLISHED_PACKAGES: ${{ needs.release.outputs.published-packages }}
+        run: node scripts/release-vscode.mts ${{ matrix.command }}

RELEASING.md

@@ -1,3 +1,27 @@
 # Cutting New Releases
 
 TODO: Redo for `changesets`. See [`Changesets Readme`](./.changeset/README.md)
+
+## VSCode extension releases
+
+After Changesets publishes the npm packages, the release workflow hands the
+VSCode extension pipeline to [`scripts/release-vscode.mts`](./scripts/release-vscode.mts).
+It exposes four commands — `build`, `attach`, `publish-vsce`, `publish-ovsx` —
+each of which operates only on the extensions actually released in this run
+(filtered from the Changesets `publishedPackages` output).
+
+### Why attach to GitHub Releases
+
+We upload each built `.vsix` to its GitHub Release tag in addition to
+publishing to the VSCode Marketplace and Open VSX. That makes the artifact
+downloadable directly from GitHub — useful when a registry is degraded, when
+a PAT has expired and a manual re-upload is needed, or for anyone who wants
+the exact bits we shipped without going through a marketplace.
+
+### Why a TS script, not workflow shell
+
+Per-package iteration, version lookups, and registry-API calls are tidier
+(and safer) in a type-checked TS file than spread across `run:` blocks of
+bash in `release.yml`. The script type-checks under `scripts/tsconfig.json`,
+can be run locally with a mocked `PUBLISHED_PACKAGES` env var, and aggregates
+failures across packages rather than short-circuiting on the first error.

package.json

@@ -56,7 +56,7 @@
     "svgo": "svgo --pretty --indent 2 --eol lf --final-newline -r -f . --exclude node_modules",
     "svgo-check": "yarn svgo && git diff --exit-code -- '*.svg'",
     "ci:version": "yarn changeset version && yarn install --no-immutable && yarn build && yarn fix",
-    "release": "yarn build && yarn build-bundles && (wsrun release --exclude-missing --serial --recursive --changedSince main -- || true) && yarn changeset publish",
+    "release": "yarn build && yarn build-bundles && yarn changeset publish",
     "release:canary": "(node scripts/canary-release.mts && yarn build-bundles && yarn changeset publish --tag canary) || echo Skipping Canary...",
     "repo:lint": "manypkg check",
     "repo:fix": "manypkg fix",
@@ -128,7 +128,9 @@
     "vite": "6.3.4"
   },
   "devDependencies": {
+    "@vscode/vsce": "^2.22.1-2",
     "jsdom": "^29.0.2",
+    "ovsx": "0.8.3",
     "svgo": "^4.0.1"
   }
 }

packages/graphiql-react/src/components/operation-editor.tsx

@@ -8,14 +8,11 @@ import { FC, useEffect, useRef } from 'react';
 import { useMonaco } from '../stores';
 import { useGraphiQL, useGraphiQLActions } from './provider';
 import {
-  debounce,
   getOrCreateModel,
   createEditor,
   onEditorContainerKeyDown,
-  pick,
-  cleanupDisposables,
-  cn,
-} from '../utility';
+} from '../utility/create-editor';
+import { debounce, pick, cleanupDisposables, cn } from '../utility';
 import { Uri, Range } from '../utility/monaco-ssr';
 import type { MonacoEditor, EditorProps, SchemaReference } from '../types';
 import {

packages/graphiql-react/src/components/provider.tsx

@@ -11,14 +11,13 @@ import {
 import { create, useStore, UseBoundStore, StoreApi } from 'zustand';
 import { useShallow } from 'zustand/shallow';
 import { StorageAPI } from '@graphiql/toolkit';
+import { createEditorSlice, type EditorProps } from '../stores/editor';
 import {
-  createEditorSlice,
   createExecutionSlice,
   createPluginSlice,
   createSchemaSlice,
   createThemeSlice,
   createStorageSlice,
-  EditorProps,
   ExecutionProps,
   PluginProps,
   SchemaProps,

packages/graphiql-react/src/components/request-headers-editor.tsx

@@ -5,12 +5,9 @@ import { URI_NAME, KEY_BINDINGS, STORAGE_KEY } from '../constants';
 import {
   getOrCreateModel,
   createEditor,
-  useChangeHandler,
   onEditorContainerKeyDown,
-  pick,
-  cleanupDisposables,
-  cn,
-} from '../utility';
+} from '../utility/create-editor';
+import { useChangeHandler, pick, cleanupDisposables, cn } from '../utility';
 import { useMonaco } from '../stores';
 
 interface RequestHeadersEditorProps extends EditorProps {

packages/graphiql-react/src/components/response-editor.tsx

@@ -7,11 +7,9 @@ import {
   getOrCreateModel,
   createEditor,
   onEditorContainerKeyDown,
-  pick,
-  cleanupDisposables,
-  cn,
-} from '../utility';
+} from '../utility/create-editor';
 import { Range } from '../utility/monaco-ssr';
+import { pick, cleanupDisposables, cn } from '../utility';
 import { KEY_BINDINGS, URI_NAME } from '../constants';
 import type { EditorProps } from '../types';
 import type * as monaco from 'monaco-editor';