Shopify · amcaplan · Nov 6, 2025
@@ -180,6 +180,7 @@ vite.config.ts.timestamp*
 
 # from nested gitignores
 packages/app/assets/dev-console
+packages/app/assets/graphiql
 packages/ui-extensions-server-kit/*.d.ts
 packages/ui-extensions-server-kit/!typings.d.ts
 packages/ui-extensions-server-kit/index.*

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/src/assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GraphiQL Console</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+      .Polaris-Page--fullWidth {
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+{
+  "name": "@shopify/graphiql-console",
+  "version": "3.86.0",
+  "packageManager": "pnpm@10.11.1",
+  "private": true,
+  "scripts": {
+    "build": "nx build",
+    "clean": "nx clean",
+    "dev": "nx dev",
+    "lint": "nx lint",
+    "lint:fix": "nx lint:fix",
+    "vitest": "vitest"
+  },
+  "dependencies": {
+    "@shopify/polaris": "^12.27.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@shopify/react-testing": "^3.0.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "jsdom": "^20.0.3",
+    "sass": "^1.83.1",
+    "vite": "6.4.1",
+    "vite-plugin-monaco-editor": "^1.1.0"
+  },
+  "eslintConfig": {
+    "rules": {
+      "no-restricted-imports": [
+        "error",
+        {
+          "name": "monaco-editor",
+          "message": "Use 'monaco-graphql/esm/monaco-editor' instead to avoid bundling 83 languages"
+        }
+      ]
+    }
+  }
+}
@@ -0,0 +1,52 @@
+{
+  "name": "graphiql-console",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/graphiql-console/src",
+  "projectType": "library",
+  "tags": ["scope:feature", "scope:graphiql"],
+  "targets": {
+    "clean": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm rimraf dist/ ../app/assets/graphiql",
+        "cwd": "packages/graphiql-console"
+      }
+    },
+    "build": {
+      "inputs": [
+        "{projectRoot}/src/**/*",
+        "{projectRoot}/index.html",
+        "{projectRoot}/package.json",
+        "{projectRoot}/vite.config.ts",
+        "{projectRoot}/tsconfig.json"
+      ],
+      "outputs": ["{workspaceRoot}/packages/app/assets/graphiql"],
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm vite build",
+        "cwd": "packages/graphiql-console"
+      }
+    },
+    "lint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm eslint src tests",
+        "cwd": "packages/graphiql-console"
+      }
+    },
+    "lint:fix": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm eslint src tests --fix",
+        "cwd": "packages/graphiql-console"
+      }
+    },
+    "dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm vite dev",
+        "cwd": "packages/graphiql-console"
+      }
+    }
+  }
+}
@@ -0,0 +1,19 @@
+import App from './App.tsx'
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import {describe, test, expect} from 'vitest'
+
+describe('<App />', () => {
+  test('renders AppProvider with basic content', () => {
+    render(<App />)
+
+    expect(screen.getByText('GraphiQL Console')).toBeDefined()
+  })
+
+  test('provides i18n context to children', () => {
+    const {container} = render(<App />)
+
+    // AppProvider should be rendered (it creates a div wrapper)
+    expect(container.querySelector('div')).toBeDefined()
+  })
+})
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import {AppProvider} from '@shopify/polaris'
+import '@shopify/polaris/build/esm/styles.css'
+
+function App() {
+  return (
+    <AppProvider i18n={{}}>
+      <div>GraphiQL Console</div>
+    </AppProvider>
+  )
+}
+
+export default App
@@ -0,0 +1,58 @@
+import {describe, test, expect, vi, beforeEach, afterEach} from 'vitest'
+
+// Mock dependencies
+vi.mock('react-dom/client', () => {
+  const mockRender = vi.fn()
+  const mockCreateRoot = vi.fn(() => ({
+    render: mockRender,
+  }))
+  return {
+    createRoot: mockCreateRoot,
+  }
+})
+
+vi.mock('./App.tsx', () => ({
+  default: () => null,
+}))
+
+describe('main.tsx', () => {
+  let originalGetElementById: typeof document.getElementById
+
+  beforeEach(() => {
+    // Save original method
+    originalGetElementById = document.getElementById
+
+    // Clear module cache to ensure fresh import
+    vi.resetModules()
+  })
+
+  afterEach(() => {
+    // Restore original method
+    document.getElementById = originalGetElementById
+  })
+
+  test('finds root element and renders App', async () => {
+    const mockRootElement = document.createElement('div')
+    mockRootElement.id = 'root'
+
+    document.getElementById = vi.fn().mockReturnValue(mockRootElement)
+
+    // Import main to execute it
+    const {createRoot} = await import('react-dom/client')
+
+    // Dynamic import to trigger execution
+    await import('./main.tsx')
+
+    expect(document.getElementById).toHaveBeenCalledWith('root')
+    expect(createRoot).toHaveBeenCalledWith(mockRootElement)
+  })
+
+  test('throws error when root element not found', async () => {
+    document.getElementById = vi.fn().mockReturnValue(null)
+
+    // Expect the import to throw
+    await expect(async () => {
+      await import('./main.tsx')
+    }).rejects.toThrow('Root element not found')
+  })
+})
@@ -0,0 +1,15 @@
+import App from './App.tsx'
+import React from 'react'
+import {createRoot} from 'react-dom/client'
+
+const container = document.getElementById('root')
+if (!container) {
+  throw new Error('Root element not found')
+}
+
+const root = createRoot(container)
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
@@ -0,0 +1,30 @@
+// CSS Modules - named exports pattern
+declare module '*.module.scss' {
+  const classes: {[key: string]: string}
+  export = classes
+}
+
+declare module '*.scss' {
+  const content: string
+  export default content
+}
+
+declare module '*.module.css' {
+  const classes: {[key: string]: string}
+  export = classes
+}
+
+// Vite worker imports
+declare module '*?worker' {
+  const workerConstructor: new () => Worker
+  export default workerConstructor
+}
+
+// Vite environment variables
+interface ImportMetaEnv {
+  readonly VITE_GRAPHIQL_BASE_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
@@ -0,0 +1,15 @@
+import '@shopify/react-testing/matchers'
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+  })),
+})
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "node"],
+    "composite": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "rootDir": ".",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["tests/**/*", "src/**/*.test.tsx", "src/**/*.test.ts", "dist/**"],
+  "include": ["src/**/*", "src/**/*.json"]
+}
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "paths": {
+      "tests/*": ["tests/*"],
+      "@/*": ["src/*"]
+    },
+    "outDir": "dist",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*", "tests/**/*", "src/**/*.json"]
+}