feat(graphiql): add graphiql-console package foundation

[amcaplan]

WHY are these changes introduced?

This PR establishes the foundation for migrating GraphiQL from a template-based approach to a standalone React 18 package. This is the first PR in an 8-PR stack that modernizes our GraphiQL implementation.

Context: The current GraphiQL implementation uses Rails templates which makes it harder to maintain, test, and iterate on. By creating a standalone React 18 package, we can:

• Use modern React features and tooling
• Integrate advanced editor features (Monaco)
• Improve developer experience with hot-reload
• Make the codebase more maintainable and testable

WHAT is this pull request doing?

This PR creates the complete foundation for the @shopify/graphiql-console package with all build infrastructure and tooling needed for development.

Key Changes:

• Package Setup: Creates new package with minimal dependencies (React 18.2.0, Polaris, Vite 6.4.1)
• Build Infrastructure:
  • Vite 6.4.1 bundler configured to output to app/assets/graphiql directory
  • Monaco Editor plugin with ESM/CJS interop via createRequire
  • NX build system with explicit cache invalidation inputs
  • TypeScript configuration with path aliases (@/ for src, tests/ for tests)
• Development Tooling:
  • Vitest test runner with jsdom environment
  • Monaco Editor plugin with optimized language workers (JSON, TypeScript only)
  • ESLint rule to prevent importing full Monaco (avoids bundling 83 languages)
• Minimal Application: Basic App component with comprehensive tests demonstrating the setup works

Files Added:

• packages/graphiql-console/package.json - Dependencies and scripts
• packages/graphiql-console/vite.config.ts - Build and test configuration
• packages/graphiql-console/project.json - NX build targets
• packages/graphiql-console/tsconfig.*.json - TypeScript configuration
• packages/graphiql-console/src/App.tsx - Minimal starter component
• packages/graphiql-console/tests/setup.ts - Test infrastructure

CI Fixes Applied

Issue 1: Monaco Editor Plugin Import

• Problem: Knip couldn't load vite.config.ts due to ESM/CJS interop issue with vite-plugin-monaco-editor
• Fix: Used createRequire to properly load the CommonJS plugin in ESM context
• Impact: Knip check now passes successfully

Issue 2: Vite Version Mismatch

• Problem: graphiql-console used Vite 6.3.6 while rest of codebase used 6.4.1, failing dependency consistency check
• Fix: Updated to Vite 6.4.1 to match codebase standard
• Impact: Dependency version check now passes

Issue 3: Unused Dependencies

• Problem: Knip detected unused dependencies (graphiql, @graphiql/toolkit, monaco-graphql, etc.)
• Fix: Removed dependencies not used in foundation PR - they'll be added in later PRs where actually used
• Impact: Foundation PR now includes only what it uses, following incremental PR principles

How to test your changes?

# Install dependencies
pnpm install

# Run tests
pnpm --filter @shopify/graphiql-console test

# Run type checking
pnpm --filter @shopify/graphiql-console tsc --noEmit

# Build the package
pnpm --filter @shopify/graphiql-console build

# Run knip check
pnpm knip

# Verify output exists
ls -la packages/app/assets/graphiql

All CI checks pass: build, test, lint, type-check, and knip.

Measuring impact

• [x] n/a - this is foundational infrastructure for the GraphiQL migration

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes

[amcaplan]

• #6585
• #6584
• #6583
• #6582
• #6581
• #6580
• #6579
• #6578 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	79.28% (+0.01% 🔼)	13613/17170
🟡	Branches	73.14% (+0.01% 🔼)	6653/9096
🟡	Functions	79.37% (+0% 🔼)	3508/4420
🟡	Lines	79.65% (+0.01% 🔼)	12858/16144

Show new covered files 🐣

St.:grey_question:	File	Statements	Branches	Functions	Lines
🟢	... / App.tsx	100%	100%	100%	100%
🟢	... / main.tsx	100%	100%	100%	100%

Show files with reduced coverage 🔻

St.:grey_question:	File	Statements	Branches	Functions	Lines
🟢	... / ConcurrentOutput.tsx	98.36% (-1.64% 🔻)	92% (-4% 🔻)	100%	98.33% (-1.67% 🔻)

Test suite run success

3362 tests passing in 1376 suites.

Report generated by 🧪jest coverage report action from 705da8c434f4c27d60e1a5e477890af010069b61